/* ============================================================= RevvRider — main.css Site-wide layout, header, cards, footer, widgets, custom blocks. Loaded on every page; assets/css/single.css adds single-post-only rules. ============================================================= */ /* ---------- Layout ---------- */ .rr-container{max-width:var(--rr-container);margin-inline:auto;padding-inline:20px;} .rr-layout-with-sidebar{display:grid;grid-template-columns:1fr var(--rr-sidebar);gap:var(--rr-gap);align-items:start;padding-block:32px;} /* No max-width here on purpose — .rr-main-col fills its grid track completely: up to the sidebar when one is present, the full row when not. Applies to single-post article content too, by design. */ .rr-main-col{min-width:0;} /* Same fix, same reason, as .rr-main-col above — .rr-sidebar is the OTHER grid item in this layout, and grid items default to min-width:auto (the largest min-content size of anything inside them), not 0. Missing this here specifically let a widget with an unshrinkable min-content (like the newsletter form's "Subscribe" button, one word that can't wrap — see the identical .rr-footer__column bug this was already fixed for) push the widget past the sidebar's own fixed-width column instead of shrinking to fit it, even though var(--rr-sidebar) is a definite width, not 1fr. */ .rr-sidebar{min-width:0;} .rr-layout-narrow .rr-container{max-width:1200px;} .rr-layout-wide .rr-container{max-width:1600px;} .rr-no-sidebar .rr-layout-with-sidebar{grid-template-columns:1fr;} .rr-sidebar-left .rr-layout-with-sidebar{grid-template-columns:var(--rr-sidebar) 1fr;} .rr-sidebar-left .rr-main-col{order:2;} .rr-sidebar-left .rr-sidebar{order:1;} @media (max-width:1000px){ .rr-layout-with-sidebar{grid-template-columns:1fr;} } /* ---------- Top bar ---------- */ .rr-topbar{background:var(--rr-black);color:var(--rr-text-on-dark);font-size:13px;} .rr-topbar__inner{display:flex;align-items:center;gap:24px;height:36px;} .rr-topbar__ticker{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .rr-topbar__ticker-label{color:var(--rr-accent);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em;flex-shrink:0;} .rr-topbar__ticker-viewport{overflow:hidden;flex:1;min-width:0;} .rr-topbar__ticker-list{display:flex;gap:28px;margin:0;padding:0;list-style:none;white-space:nowrap;animation:rr-ticker 30s linear infinite;width:max-content;} .rr-topbar__ticker-list a{color:var(--rr-text-on-dark);} .rr-topbar__ticker-list a:hover{color:var(--rr-accent);} @keyframes rr-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}} .rr-topbar__menu ul{display:flex;gap:16px;margin:0;padding:0;list-style:none;} .rr-topbar__menu a{color:var(--rr-text-on-dark);font-size:13px;} /* Same reason .rr-topbar__menu/.rr-topbar__ticker-list above need their own color override: style.css's global a{color:charcoal} targets these tags directly, and a rule that matches an element outright always beats an inherited value (from .rr-topbar's color further up) regardless of specificity — inheritance is the fallback of last resort, not a competing declaration. Without this the icons rendered charcoal-on-black, nearly invisible. */ .rr-topbar__social .rr-social-icons__link,.rr-footer .rr-social-icons__link{color:var(--rr-text-on-dark);} .rr-social-icons{display:flex;gap:10px;margin:0;padding:0;list-style:none;} /* background:currentColor was rendering every network as an identical plain dot — no actual Facebook/X/Instagram/Pinterest glyph ever showed, on the topbar, footer, or anywhere else this list is used. Single-layer currentColor mask (no separate badge circle) is deliberate, not the .rr-social-share__btn two-layer badge pattern: this list renders on both the topbar/footer's dark background AND a widget's light one, and a fixed badge color good enough to read on one reads as near-invisible on the other (charcoal-on-black was tried first — vanished on the topbar). A plain currentColor glyph has no such problem: it inherits whatever ambient text color already contrasts correctly against its own background, in either context, automatically. Hover switches to a fixed accent instead of following currentColor, matching the hover-to-accent convention used everywhere else in this theme. */ .rr-social-icons__link{display:inline-flex;width:20px;height:20px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:background-color .15s ease;} .rr-social-icons__link:hover{background-color:var(--rr-accent);} .rr-social-icons__link--facebook{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 12.06C22 6.48 17.52 2 12 2S2 6.48 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.84c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.91h-2.34v7.03C18.34 21.24 22 17.08 22 12.06z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 12.06C22 6.48 17.52 2 12 2S2 6.48 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.84c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.91h-2.34v7.03C18.34 21.24 22 17.08 22 12.06z'/%3E%3C/svg%3E");} .rr-social-icons__link--twitter{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");} .rr-social-icons__link--pinterest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.017 0C5.396 0 0 5.396 0 12.017c0 5.081 3.163 9.422 7.627 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.084.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.752-1.398l-.749 2.848c-.269 1.045-.994 2.352-1.494 3.146 1.125.345 2.319.535 3.554.535 6.607 0 11.985-5.365 11.985-11.985C24.014 5.396 18.629.026 12.017.026L12.017 0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.017 0C5.396 0 0 5.396 0 12.017c0 5.081 3.163 9.422 7.627 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.084.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.752-1.398l-.749 2.848c-.269 1.045-.994 2.352-1.494 3.146 1.125.345 2.319.535 3.554.535 6.607 0 11.985-5.365 11.985-11.985C24.014 5.396 18.629.026 12.017.026L12.017 0z'/%3E%3C/svg%3E");} /* Feather-style rounded-square + lens + shutter-dot glyph — the recognized simplified Instagram mark, legible at this 20px size unlike the more intricate official camera icon. */ .rr-social-icons__link--instagram{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E");} /* ---------- Masthead ---------- */ .rr-masthead{position:sticky;top:0;z-index:50;background:var(--rr-white);border-bottom:1px solid var(--rr-gray-100);} .rr-masthead__inner{position:relative;display:flex;align-items:center;gap:24px;height:76px;} .rr-masthead--logo-center .rr-masthead__inner{justify-content:center;flex-wrap:wrap;height:auto;padding-block:12px;} .rr-masthead__branding img{max-height:44px;} .rr-masthead__site-title{font-family:var(--rr-font-heading);font-size:26px;font-weight:600;text-transform:uppercase;} .rr-primary-nav{flex:1;min-width:0;} .rr-mega-menu{display:flex;gap:4px;list-style:none;margin:0;padding:0;} .rr-menu-item{position:relative;} .rr-menu-item__link{display:flex;align-items:center;gap:6px;padding:10px 14px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.02em;} .rr-menu-item__caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;} .rr-mega-menu__panel{position:absolute;left:0;top:100%;min-width:320px;background:var(--rr-white);border:1px solid var(--rr-gray-100);box-shadow:0 12px 24px rgba(0,0,0,.08);padding:20px;display:none;z-index:60;} .rr-menu-item--has-mega:hover .rr-mega-menu__panel, .rr-menu-item--has-mega:focus-within .rr-mega-menu__panel{display:block;} .rr-mega-menu__list{list-style:none;margin:0;padding:0;display:grid;gap:6px;} .rr-mega-menu__link{display:flex;align-items:center;gap:10px;padding:6px 4px;font-size:14px;} .rr-mega-menu__thumb{width:44px;height:32px;object-fit:cover;flex-shrink:0;} .rr-menu-item--featured{grid-column:1 / -1;border-top:1px solid var(--rr-gray-100);margin-top:6px;padding-top:6px;} .rr-mega-menu__link--featured{background:var(--rr-gray-100);padding:10px;font-weight:700;} .rr-mega-menu__link--featured .rr-mega-menu__thumb{width:100%;height:120px;} .rr-masthead__tools{display:flex;align-items:center;gap:12px;} .rr-search-toggle,.rr-dark-mode-toggle,.rr-mobile-toggle{background:none;border:none;cursor:pointer;padding:8px;color:var(--rr-charcoal);} /* Icons: inline SVG masks (not an icon font/library) — background-color picks up currentColor so each icon automatically matches its button's text color, dark mode included, with no extra HTTP request. */ .rr-icon-search,.rr-icon-moon,.rr-icon-close{display:inline-block;width:18px;height:18px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .rr-icon-close{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");} .rr-icon-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");} .rr-icon-moon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");} .rr-mobile-toggle{display:none;flex-direction:column;gap:4px;} .rr-mobile-toggle span{width:22px;height:2px;background:currentColor;display:block;} .rr-mobile-nav-close{display:none;} .rr-search-panel{position:absolute;top:100%;left:0;right:0;background:var(--rr-white);border-bottom:1px solid var(--rr-gray-100);padding:20px;box-shadow:0 12px 24px rgba(0,0,0,.08);z-index:70;} .rr-search-form{display:flex;} .rr-search-form__input{flex:1;padding:12px 16px;border:1px solid var(--rr-gray-300);font-size:16px;background:var(--rr-white);color:var(--rr-charcoal);} /* Accent orange rather than plain black — a flat black button on the (also near-black) dark-mode search panel had almost no contrast/definition. */ .rr-search-form__submit{background:var(--rr-accent);color:#fff;border:none;padding:0 20px;cursor:pointer;} .rr-search-form__submit:hover{background:#e04f18;} .rr-search-panel__results{margin-top:12px;max-height:60vh;overflow:auto;} .rr-search-result{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rr-gray-100);} .rr-search-result img{width:48px;height:48px;object-fit:cover;flex-shrink:0;} .rr-search-result mark{background:none;color:var(--rr-accent-text);} .rr-search-recent{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .rr-search-recent__label{font-size:12px;color:var(--rr-gray-600);width:100%;} .rr-search-recent__item{background:var(--rr-gray-100);border:none;padding:6px 12px;font-size:13px;cursor:pointer;} .rr-search-no-results{color:var(--rr-gray-600);font-size:14px;} @media (max-width:900px){ .rr-mobile-toggle{display:flex;} /* Tighter than the 12px used at desktop width, where .rr-masthead__tools only ever holds 2 icons (search + dark mode) — at mobile width it also picks up the hamburger as a 3rd, and 3 icons at 12px reads as loose. */ .rr-masthead__tools{gap:8px;} /* .rr-primary-nav's flex:1 (desktop rule, main.css above) is what normally pushes .rr-masthead__tools flush to the right edge — but at this width the nav switches to position:fixed a few lines down, which drops it out of the flex flow entirely, so that spacer vanishes and .rr-masthead__inner's default flex-start left branding+tools packed together on the left with dead space after them. space-between here restores the same right-aligned tools without depending on the nav still being a normal flex item. */ .rr-masthead__inner{justify-content:space-between;} .rr-primary-nav{position:fixed;top:0;right:0;bottom:0;width:70%;background:var(--rr-black);color:#fff;transform:translateX(100%);transition:transform .25s ease;z-index:100;overflow-y:auto;padding:80px 20px 20px;} .rr-primary-nav.is-open{transform:translateX(0);} .rr-mobile-nav-close{display:block;position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:8px;color:#fff;} /* Full-screen scrim behind the drawer, in the remaining 30% of the viewport the 70%-wide nav doesn't cover — without it, the only way to close the menu was the close button, with no larger, easier-to-hit target and no visual cue that tapping outside the drawer does anything. hidden (not display:none) so the same element can carry the fade transition when JS toggles the attribute off. */ .rr-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;} .rr-mega-menu{flex-direction:column;} /* Collapsed by default, expanded only via JS toggling .is-open on the parent
  • (already wired in main.js's initMegaMenuTouch — it was already tracking open/closed state correctly, but this display:block below used to apply unconditionally regardless of that state, so every panel rendered permanently expanded no matter what the JS did). */ .rr-mega-menu__panel{position:static;display:none;background:transparent;border:none;box-shadow:none;padding-left:16px;} .rr-menu-item--has-mega.is-open > .rr-mega-menu__panel{display:block;} /* Rotates the existing desktop caret (a static 45°-rotated corner that normally just points down) to point up instead, so it doubles as an open/closed indicator for the accordion — same element, no new markup. */ .rr-menu-item--has-mega.is-open > .rr-menu-item__link .rr-menu-item__caret{transform:rotate(225deg);margin-top:3px;} .rr-menu-item__link,.rr-mega-menu__link{color:#fff;} } body.rr-nav-open{overflow:hidden;} /* ---------- Buttons & badges ---------- */ .rr-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em;border-radius:var(--rr-radius);border:2px solid transparent;cursor:pointer;} .rr-btn--primary{background:var(--rr-accent);color:#fff;} .rr-btn--primary:hover{background:#e04f18;color:#fff;} .rr-btn--secondary{background:var(--rr-black);color:#fff;} .rr-btn--outline{background:transparent;border-color:var(--rr-black);color:var(--rr-black);} .rr-btn--affiliate{background:var(--rr-accent-2);color:#fff;} .rr-btn__price{font-weight:400;opacity:.85;margin-left:4px;} /* bottom:10px, not top — top-left collided with baked-in title text that several of this site's stock photos already have in that exact corner (a recurring issue, see the hero-secondary-tile redesign for the same root cause). Bottom-left sits clear of that on every image seen so far. */ .rr-badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:var(--rr-radius);position:absolute;bottom:10px;left:10px;background:var(--rr-black);color:#fff;} /* If a card ever prints two adjacent .rr-badge elements, stack the second one upward from the first rather than on top of it. */ .rr-badge + .rr-badge{bottom:40px;} .rr-badge--affiliate{position:static;background:var(--rr-accent-2);margin-left:6px;} .rr-badge--best_overall{background:var(--rr-accent);} .rr-badge--editors_choice{background:var(--rr-accent-2);} .rr-badge--value_for_money{background:var(--rr-success);} .rr-badge--premium_choice{background:#6b46c1;} /* ---------- Cards ---------- */ .rr-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rr-gap);margin-block:24px;} @media (max-width:900px){.rr-card-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.rr-card-grid{grid-template-columns:1fr;}} /* 10px, not the sitewide --rr-radius:2px used everywhere else (buttons, badges, media boxes) — a card is the one place on the site meant to read as a distinct, physical "object" sitting on the page, so it gets its own more noticeably rounded treatment rather than matching the theme's otherwise-sharp editorial look. overflow:hidden here (not just on .rr-card__media) is what makes that radius actually clip the image's top corners — .rr-card__media sits flush against the card's own edges with no gap, so the parent's rounded clip reaches it too. */ .rr-card{background:var(--rr-white);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:box-shadow .25s ease,transform .25s ease;} .rr-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.14);transform:translateY(-3px);} .rr-card__media-wrap{position:relative;} .rr-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--rr-gray-100);} .rr-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;} .rr-card:hover .rr-card__media img{transform:scale(1.04);} /* Shown instead of the when a post has no featured image set — used to just be an empty gray-100 box (.rr-card__media's own background showing through with nothing on top), which reads as a broken/loading image rather than an intentional "no image" state. Same masked-icon technique as the rest of the theme's icons; gray-300 (not gray-600) since it needs to read as a quiet placeholder, not compete with real content. */ .rr-media-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;} .rr-media-placeholder::after{content:'';display:block;width:20%;max-width:56px;aspect-ratio:1;background-color:var(--rr-gray-300);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");} /* Edit link: only rendered for users who can actually edit the post (see content-card.php), so it's never shown to a logged-out visitor or a reader without permission — a quick jump into wp-admin straight from the card grid instead of hunting for the post there. Top-right keeps it clear of the category badge's bottom-left corner. */ .rr-card__edit-link{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);transition:background .15s ease;} .rr-card__edit-link:hover{background:var(--rr-accent);} .rr-icon-edit{display:inline-block;width:14px;height:14px;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");} /* Horizontal/bottom padding, not just the original padding-top — content used to run edge-to-edge flush with the image's own width, invisible when the card had no visible frame of its own; now that it does (radius + shadow), text needs breathing room from those rounded edges. */ .rr-card__body{padding:14px 16px 18px;} /* line-height:1.35, not the sitewide h1-h6 1.15 (.rr-card__title is an

    ) — too tight for a multi-line wrapped title, so the hover underline's own padding (below the first line) crept into the next line's text instead of sitting clear of it, worst at the larger .rr-card--large size where titles are most likely to wrap 3 lines. */ .rr-card__title{font-size:19px;line-height:1.35;margin-bottom:8px;} .rr-card__title a{color:var(--rr-charcoal);} /* Used to be a background-gradient bar grown via background-size (so it could be eased open on hover, since text-decoration itself can't animate a width). Dropped that technique entirely: box-decoration-break:clone's per-line sizing is a genuine cross-browser gray area, and on a wrapped multi-line title, Chromium was sizing background-size:100% on the LAST line against the merged multi-line box's width rather than that line's own (short) width — a short final line like "Breakdown" got a bar stretched out to the width of the longest line above it, not its own text. Native text-decoration-line has no such quirk: browsers guarantee each wrapped line gets its own underline sized to its own text, block or inline, fragmented or not — it's what the property is for. The tradeoff is losing the grow-in-width animation; text-decoration-color is still animatable, so hover fades the color in instead of growing a bar. */ .rr-card__title a, .rr-archive-featured__body .rr-title-underline, .rr-hero__primary-title a, .rr-hero__secondary-title .rr-title-underline, .rr-widget-post-list__title .rr-title-underline{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .25s ease;} /* .rr-hero__primary-overlay qualifies the primary-title selector (rather than the bare .rr-hero__primary-title a:hover) purely for specificity: its own base rule (color:inherit, further down in this file) ties with a plain a:hover at (0,1,1) and wins on source order since it's the later, always-active rule — the extra ancestor class here pushes past that tie outright instead of depending on where in the file the base rule sits. gray-600 (not charcoal) so the underline reads as a light-touch accent rather than competing with the bold orange text above it. --rr-accent-text (not --rr-accent) here — every one of these except the hero primary title sits on a white or near-white surface (card body, archive-featured body, the hero secondary tiles' body since they moved off the dark image overlay, and the widget title in the sidebar), so the AA-safe darker shade applies. The hero primary title keeps the vibrant --rr-accent in its own rule right below — that one's on a dark image overlay, where the original color already has plenty of contrast. */ .rr-card__title a:hover, .rr-archive-featured:hover .rr-archive-featured__body .rr-title-underline, .rr-hero__secondary-item:hover .rr-hero__secondary-title .rr-title-underline, .rr-widget-post-list__title:hover .rr-title-underline{text-decoration-color:var(--rr-gray-600);color:var(--rr-accent-text);} .rr-hero__primary-overlay .rr-hero__primary-title a:hover{text-decoration-color:var(--rr-gray-600);color:var(--rr-accent);} .rr-card--large .rr-card__title{font-size:26px;} .rr-card__excerpt{color:var(--rr-gray-600);font-size:15px;margin-bottom:10px;} .rr-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--rr-gray-600);} .rr-card__meta-sep{opacity:.5;} .rr-byline{display:inline-flex;align-items:center;gap:6px;} .rr-byline__avatar{border-radius:50%;} /* The avatar and the author's name are both inline content inside this single (see revvrider_author_byline() in inc/template-tags.php) with nothing of its own to keep them together — without display:flex here, the browser can wrap a line break in between them independently of how .rr-card__meta wraps its own items, dropping just the name onto its own line under the avatar instead of staying beside it. */ .rr-byline__link{display:inline-flex;align-items:center;gap:4px;color:var(--rr-gray-600);white-space:nowrap;} /* ---------- Stars / score ---------- */ .rr-stars{display:inline-flex;gap:2px;} .rr-star{width:14px;height:14px;background:var(--rr-gray-300);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);} .rr-star--full{background:var(--rr-accent);} .rr-star--half{background:linear-gradient(90deg,var(--rr-accent) 50%,var(--rr-gray-300) 50%);} .rr-score--great{color:var(--rr-success);} .rr-score--good{color:var(--rr-warning);} .rr-score--poor{color:var(--rr-danger);} /* ---------- Homepage sections ---------- */ .rr-home-section{padding-block:36px;border-top:1px solid var(--rr-gray-100);} /* Every homepage section was plain white, one after another — nothing visually separated where one ended and the next began beyond the thin 1px divider. Alternating a light band in (assigned server-side in home-section.php, not via CSS :nth-of-type — sections come from different templates like the hero/newsletter/Instagram gallery, so sibling-position counting there would band inconsistently) breaks up the page into visible chunks without introducing a new color; the fill is the same --rr-gray-100 already used for badges/dividers elsewhere, and it already flips correctly in dark mode. The section itself is full-width, so the band bleeds edge to edge automatically — .rr-container inside it (unaffected) still centers and constrains the actual content. */ .rr-home-section--alt{background:var(--rr-gray-100);} .rr-home-section__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;} .rr-home-section__title{font-size:26px;text-transform:uppercase;} .rr-home-section__view-all{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--rr-accent-text);} /* ---------- Hero ---------- */ /* Same --rr-gray-100 band used for alternating homepage sections below it — the hero was the one plain-white area left once those got banding, sitting flush against the white body with nothing to separate it. */ .rr-hero{padding-block:24px;background:var(--rr-gray-100);} /* * One unified grid instead of "primary" + a nested "secondary" sub-grid — * .rr-hero__primary-wrap and the 4 .rr-hero__secondary-item-wrap are flat * siblings here (see hero-featured.php). That's what lets the big post * automatically match the combined height of the 2x2 grid beside it: the * two right-hand columns size themselves from the secondary tiles' own * aspect-ratio, the primary column spans both of those rows, and it * stretches (default align-items:stretch) to fill whatever height that * turns out to be — with its aspect-ratio removed and object-fit:cover * doing the work, instead of the two sides trying to independently hit a * matching height and drifting apart. */ /* 3fr 1fr 1fr = primary column is 60% of the row width, the two 2x2 columns split the remaining 40% (20% each). */ .rr-hero__grid{display:grid;grid-template-columns:3fr 1fr 1fr;gap:16px;} .rr-hero__primary-wrap{position:relative;grid-column:1;grid-row:1 / span 2;} /* Same exception as .rr-hero__secondary-item-wrap below — this wrap spans the whole card, and the title/byline overlay sits at the bottom of it, so .rr-badge's default bottom:10px would land on top of the byline instead of the image. Keep this one at the top. */ .rr-hero__primary-wrap .rr-badge{top:10px;bottom:auto;} .rr-hero__primary{display:block;height:100%;overflow:hidden;background:var(--rr-black);color:#fff;} .rr-hero__primary img{width:100%;height:100%;object-fit:cover;} .rr-hero__primary-overlay{position:absolute;left:0;right:0;bottom:0;padding:32px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 100%);} .rr-hero__primary-title{color:#fff;font-size:clamp(28px,4vw,44px);margin:10px 0;} .rr-hero__primary-title a{color:inherit;} .rr-hero__primary-meta{color:var(--rr-text-on-dark);} .rr-hero__primary-meta .rr-byline__link{color:var(--rr-text-on-dark);} /* Same rounded/shadow/lift treatment as .rr-card, moved up to the wrap (rather than .rr-hero__secondary-item itself) since the wrap is this tile's equivalent of .rr-card — the outer "object" box that also holds the category badge — and hovering anywhere in that box, badge included, should lift the whole tile. */ .rr-hero__secondary-item-wrap{position:relative;border-radius:10px;overflow:hidden;background:var(--rr-white);box-shadow:0 1px 3px rgba(0,0,0,.08);transition:box-shadow .25s ease,transform .25s ease;} /* .rr-badge's default bottom:10px assumes the wrap it's positioned against is just the image — true for .rr-card__media-wrap, but this wrap spans the whole tile (image + title body stacked below it), so bottom:10px here would land on the title instead. Keeping this one at the top (where the image actually is) rather than restructuring the markup to isolate the image in its own positioned wrapper. */ .rr-hero__secondary-item-wrap .rr-badge{top:10px;bottom:auto;} .rr-hero__secondary-item-wrap:hover{box-shadow:0 10px 24px rgba(0,0,0,.14);transform:translateY(-3px);} /* Title used to sit in an absolutely-positioned overlay on top of the image with a dark gradient scrim behind it for contrast — the scrim also darkened whatever the image's own top-left corner already was, which on images with their own baked-in text/graphics there (a recurring issue on this site's stock photos) made the overlay title and the image's own text visually collide. Title now sits in a plain block below the image instead, like .rr-card — full image visible, no scrim needed, and nothing on top of it to collide with. */ .rr-hero__secondary-item{display:flex;flex-direction:column;height:100%;} .rr-hero__secondary-item img{width:100%;aspect-ratio:4/3;object-fit:cover;flex-shrink:0;transition:transform .3s ease;} .rr-hero__secondary-item-wrap:hover img{transform:scale(1.04);} .rr-hero__secondary-item-body{padding:10px 12px;flex:1;} /* -webkit-line-clamp:2 — a longer title now has somewhere to go (this tile isn't a fixed-height box with an image behind it anymore, so nothing forces a hard cutoff on its own) without it pushing the tile noticeably taller than its 3 neighbors in the 2x2 grid. */ .rr-hero__secondary-title{color:var(--rr-charcoal);font-size:14px;line-height:1.35;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Below ~900px there isn't room for "big post + 2x2" side by side, so the grid drops to 2 columns: the primary spans both on its own row up top, and the 4 secondary items auto-flow into a 2x2 underneath it — same technique, just reconfigured, rather than a completely different layout. */ @media (max-width:900px){ .rr-hero__grid{grid-template-columns:repeat(2,1fr);} .rr-hero__primary-wrap{grid-column:1 / -1;grid-row:auto;} .rr-hero__primary{height:auto;aspect-ratio:16/9;} /* Less padding at this height — 32px (the desktop value) was eating a big share of an already-short mobile box before any actual title text even started. */ .rr-hero__primary-overlay{padding:20px;} } /* 16/9 at an actual phone width (~390px and under) is only ~220px tall — barely more than the overlay's own title (up to 3 lines at the clamp() minimum) + byline + padding needs on their own, leaving the image next to no room to read as a photo before the text overlay all but covers it. A taller ratio here gives the image real space above the text instead of the two visually competing for the same ~220px. */ @media (max-width:560px){ .rr-hero__grid{grid-template-columns:1fr;} .rr-hero__primary-wrap{grid-column:1;} .rr-hero__primary{aspect-ratio:3/4;} .rr-hero__primary-overlay{padding:16px;} } /* ---------- Video grid ---------- */ .rr-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rr-gap);} @media (max-width:900px){.rr-video-grid{grid-template-columns:1fr 1fr;}} .rr-youtube-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;border:none;cursor:pointer;padding:0;} .rr-youtube-facade__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;background:rgba(0,0,0,.7);border-radius:50%;} .rr-youtube-facade__play::after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border:12px solid transparent;border-left-color:#fff;} .rr-youtube-facade iframe{position:absolute;inset:0;width:100%;height:100%;} /* ---------- Newsletter / Instagram ---------- */ .rr-newsletter{text-align:center;background:var(--rr-surface-dark);color:#fff;padding:48px 20px;} .rr-newsletter h2{color:#fff;} .rr-newsletter__form{max-width:480px;margin-inline:auto;} /* Shared by the homepage section (dark .rr-newsletter surface) and the sidebar/footer widget (light) — the form itself carries no background opinion of its own, same as .rr-search-form. */ .rr-newsletter-form{display:flex;flex-direction:column;gap:10px;} .rr-newsletter-form__row{display:flex;} .rr-newsletter-form__input{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--rr-gray-300);font-size:16px;background:var(--rr-white);color:var(--rr-charcoal);} .rr-newsletter-form__submit{background:var(--rr-accent);color:#fff;border:none;padding:0 20px;font-weight:600;cursor:pointer;} .rr-newsletter-form__submit:hover{background:#e04f18;} /* Visually hidden rather than display:none/hidden — a screen reader or a bot's basic form parser that skips display:none fields would defeat the point; visibly off-screen still lets the field register a fill-in. */ .rr-newsletter-form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .rr-newsletter-form__message{margin:0;padding:10px 14px;border-radius:var(--rr-radius);font-size:14px;text-align:left;} .rr-newsletter-form__message--success{background:rgba(31,157,85,.15);color:#1f9d55;} .rr-newsletter-form__message--error{background:rgba(217,43,43,.15);color:#d92b2b;} /* ---------- Archive hero ---------- */ .rr-archive-hero{background:var(--rr-surface-dark);color:#fff;padding:40px 0;} .rr-archive-hero__title{color:#fff;text-transform:uppercase;margin-top:12px;} .rr-archive-hero__description{color:var(--rr-text-on-dark);} .rr-breadcrumbs ol{list-style:none;display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:0;font-size:12px;color:inherit;opacity:.85;} .rr-breadcrumbs li:not(:last-child)::after{content:'/';margin-left:6px;flex-shrink:0;} .rr-breadcrumbs li:not(:last-child){flex-shrink:0;} /* The current-page crumb (no link) is often the post's full title — left unbounded, a long one wraps across multiple lines and makes the whole breadcrumb trail look heavy. Truncating it to one line with an ellipsis keeps the trail compact and consistent regardless of title length. */ .rr-breadcrumbs li:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} /* Without this, breadcrumb links fall back to the global a{color:var(--rr-charcoal)} rule — on .rr-archive-hero's dark background that's nearly the same color as the background itself, making "Home" (and any other link crumb) unreadable. Pinned to #fff explicitly rather than color:inherit: dark mode's [data-rr-theme="dark"] a{color:#eef0f2} rule has the exact same specificity and sits later in this file, so it was winning the tie over "inherit" and made the win/lose order of these two rules pure luck. */ .rr-archive-hero .rr-breadcrumbs a{color:#fff;} /* revvrider_breadcrumbs() (inc/template-tags.php) defers to Rank Math's own rank_math_the_breadcrumbs() when that plugin is active, printing Rank Math's own

    markup instead of our