/* ========================================================================== Rivatra: "Editorial trade publication" Site-wide stylesheet for the Rivatra layer on top of Astra 4.11. Enqueued after astra-theme-css (and after its inline CSS), plus one Google Fonts request: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400&display=swap Specificity strategy (no !important except where noted): - Astra's colour palette is re-pointed through its own --ast-global-color-* variables, so every Astra rule that uses them follows the design. - Layout rules that fight Astra's inline CSS are anchored on #page / #content / #masthead / #colophon (IDs Astra always prints). - Everything new is .rv-* and never collides with Astra. Markup contract: components.html (injected by rivatra.php) and home-body.html (page-home.php). Required Astra settings are listed in the handoff notes. Contents 1 Tokens 2 Base + Astra resets 3 Atoms 4 Covers 5 Header 6 Home 7 Footer 8 Article 9 Rail 10 After the article 11 Comments + post navigation 12 Archive 13 Responsive ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { --paper: #f5f0e6; --paper-2: #ede5d6; --paper-3: #e2d8c4; --sheet: #fbf8f2; --ink: #1a1814; --ink-body: #24211c; --ink-2: #48423a; --ink-3: #625b50; /* meta text: 5.8:1 on paper, 5.3:1 on paper-2 */ --rule: #d8cebd; --rule-2: #c3b7a2; --field: #857b6b; /* form-field borders: 3.67:1 on paper, 3.93:1 on sheet (non-text 3:1) */ --accent: #d2461e; /* fills and rules only */ --accent-ink: #ad3813; /* text-safe on paper 5.5:1, on paper-2 5.0:1 */ --accent-soft: #f6ddcf; --accent-night: #f2693f; /* text-safe on night 5.9:1 */ --night: #191713; --night-2: #25221d; --night-rule: #3b362e; --on-night: #f5f0e6; --on-night-2: #c2b9aa; /* 9.2:1 */ --on-night-3: #a39a8b; /* 6.4:1 */ /* category colours: fills (covers, squares, bands) */ --c-leadgen: #c9431c; --c-paidads: #2140b3; --c-analytics: #0c5a4d; --c-funnels: #e6a61d; --c-smm: #7a295f; --c-sales: #1e1c18; /* text-safe variants on paper (>= 4.5:1). Mustard text is never used on paper. */ --ct-leadgen: #b3401b; --ct-paidads: #2140b3; --ct-analytics: #0c5a4d; --ct-funnels: #8a5d00; --ct-smm: #7a295f; --ct-sales: #1e1c18; --f-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --f-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --f-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --fs-2xs: 0.75rem; /* 12 labels */ --fs-xs: 0.8125rem; /* 13 meta */ --fs-sm: 0.9375rem; /* 15 */ --fs-base: 1rem; --fs-body: 1.125rem; /* 18 article body */ --fs-md: 1.25rem; --fs-lg: 1.375rem; --fs-xl: clamp(1.5rem, 1.15rem + 1.1vw, 1.875rem); --fs-2xl: clamp(1.75rem, 1.2rem + 1.7vw, 2.375rem); --fs-3xl: clamp(2.125rem, 1.3rem + 2.5vw, 3.125rem); --fs-4xl: clamp(2.5rem, 1.3rem + 3.7vw, 4.375rem); --lh-body: 1.72; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --gutter: clamp(16px, 4vw, 40px); --container: 1200px; --measure: 40rem; /* running text: about 71 characters at 18px Inter */ --column: 45rem; /* article column (720px): rules, tables, boxes, hero, byline */ --section: clamp(48px, 7vw, 96px); --r-1: 2px; --r-2: 4px; --sh-hair: inset 0 0 0 1px rgba(26, 24, 20, .08); --sh-card: 0 1px 2px rgba(26, 24, 20, .06), 0 10px 24px -18px rgba(26, 24, 20, .35); --sh-lift: 0 2px 6px rgba(26, 24, 20, .08), 0 22px 40px -22px rgba(26, 24, 20, .55); --ease: cubic-bezier(.2, .7, .2, 1); /* Astra's palette, re-pointed. Astra's own rules (links, titles, meta, mobile menu, containers) read these, so they follow the design without overrides. */ --ast-global-color-0: #ad3813; /* links, meta accents */ --ast-global-color-1: #1a1814; /* link hover */ --ast-global-color-2: #1a1814; /* headings, site title */ --ast-global-color-3: #24211c; /* body text */ --ast-global-color-4: #f5f0e6; /* boxed backgrounds (made to match paper) */ --ast-global-color-5: #f5f0e6; /* page background */ --ast-global-color-6: #ede5d6; --ast-global-color-7: #d8cebd; --ast-global-color-8: #48423a; --ast-global-color-primary: #f5f0e6; --ast-global-color-secondary: #f5f0e6; --ast-global-color-alternate-background: #ede5d6; --ast-global-color-subtle-background: #d8cebd; --ast-body-line-height: 1.5; } /* category hooks. WordPress prints category-x on post_class / body_class; [href*=] covers Astra's class-less .cat-links anchors, menus and widgets. */ [href*="/category/lead-gen"], .cat-leadgen, .category-lead-gen { --cat: var(--c-leadgen); --cat-t: var(--ct-leadgen); } [href*="/category/paid-ads"], .cat-paidads, .category-paid-ads { --cat: var(--c-paidads); --cat-t: var(--ct-paidads); } [href*="/category/analytics"], .cat-analytics, .category-analytics { --cat: var(--c-analytics); --cat-t: var(--ct-analytics); } [href*="/category/funnels"], .cat-funnels, .category-funnels { --cat: var(--c-funnels); --cat-t: var(--ct-funnels); } [href*="/category/smm"], .cat-smm, .category-smm { --cat: var(--c-smm); --cat-t: var(--ct-smm); } [href*="/category/sales"], .cat-sales, .category-sales { --cat: var(--c-sales); --cat-t: var(--ct-sales); } /* ---------- 2. Base + Astra resets ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Astra drops to 91.2% under 922px */ body, body.ast-separate-container, body.ast-plain-container { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } body, button, input, select, textarea, .ast-button, .ast-custom-button { font-family: var(--f-sans); } img, svg, iframe { max-width: 100%; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; } a:hover, a:focus { color: inherit; } h1, h2, h3, h4, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { margin: 0; font-weight: 500; text-wrap: balance; color: var(--ink); } p { margin: 0; text-wrap: pretty; } button { font: inherit; color: inherit; } :focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 1px; box-shadow: none; } .rv-start :focus-visible, #colophon :focus-visible { outline-color: var(--accent-night); } /* on the coloured hub bands the ring takes the band's text colour (>= 4.6:1 on every band) */ .rv-hub__band :focus-visible { outline-color: currentColor; } ::selection { background: var(--accent-soft); color: var(--ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } #page .skip-link:focus { position: fixed; left: 16px; top: 16px; z-index: 100000; clip: auto; width: auto; height: auto; background: var(--ink); color: var(--paper); padding: 10px 16px; font-weight: 600; text-decoration: none; } /* one container width everywhere (Astra: 1240 / 750 narrow / 0.54em side padding on phones) */ .ast-container, .rv-wrap, #page #content > .ast-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } #page .site-content { background: none; } /* ---------- 3. Atoms ---------- */ /* brand mark: vermilion square with a serif R. On the site title it is pure CSS. */ .rv-mark, #page .site-title a::before { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; background: var(--accent); color: var(--paper); font: 600 25px/1 var(--f-serif); padding-bottom: 2px; } #page .site-title a::before { content: "R"; } .rv-kicker, #page .cat-links a { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .rv-kicker::before, #page .cat-links a::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--cat, var(--ink)); } .rv-kicker:hover, #page .cat-links a:hover { color: var(--cat-t, var(--accent-ink)); } .rv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 6px; border-radius: var(--r-1); background: var(--cat, var(--ink)); color: #fff8ee; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .rv-badge:hover, .rv-badge:focus { color: #fff8ee; background: var(--ink); } .rv-badge.cat-funnels, .rv-badge.cat-funnels:hover { color: var(--ink); } .rv-badge.cat-funnels:hover { background: var(--paper-3); } .rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; } .rv-meta > * + *::before { content: "\00B7"; margin: 0 8px; color: var(--rule-2); } .rv-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-1); font: 600 var(--fs-sm)/1 var(--f-sans); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); } .rv-btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } .rv-btn:hover svg { transform: translateX(3px); } .rv-btn--primary, .rv-btn--primary:focus { background: var(--ink); color: var(--paper); } .rv-btn--primary:hover { background: var(--accent-ink); color: var(--paper); } .rv-btn--ghost, .rv-btn--ghost:focus { border: 1px solid var(--ink); color: var(--ink); } .rv-btn--ghost:hover { background: var(--ink); color: var(--paper); } .rv-more, .rv-more:focus { display: inline-block; font: 600 var(--fs-sm)/1.3 var(--f-sans); color: var(--accent-ink); text-decoration: none; } /* the arrow is glued to the last word with a no-break space, so it never wraps onto a line of its own; it stays an inline box (not inline-block) for the same reason and nudges with position instead of transform */ .rv-more::after { content: "\00A0\2192"; position: relative; left: 0; margin-left: 3px; transition: left .2s var(--ease); } .rv-more:hover::after { left: 3px; } .rv-more:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .25em; } .rv-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-top: 3px solid var(--ink); padding-top: var(--s-4); margin-bottom: var(--s-6); } .rv-sechead__title, #page .rv-sechead__title { font: 500 var(--fs-2xl)/1.1 var(--f-serif); letter-spacing: -.012em; } .rv-sechead__aside { font-size: var(--fs-sm); color: var(--ink-3); } .rv-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); } .rv-eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; } /* breadcrumbs: .rv-crumbs (injected) and Astra's own trail if it is ever switched on */ .rv-crumbs, .ast-breadcrumbs-wrapper { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); } .rv-crumbs ol, .ast-breadcrumbs-wrapper ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .rv-crumbs li + li::before, .ast-breadcrumbs-wrapper li + li::before { content: "/"; margin: 0 10px; color: var(--rule-2); } .rv-crumbs a, .ast-breadcrumbs-wrapper a { color: var(--ink-2); text-decoration: none; } .rv-crumbs a:hover, .ast-breadcrumbs-wrapper a:hover { color: var(--accent-ink); text-decoration: underline; } .rv-crumbs ol { flex-wrap: nowrap; min-width: 0; } .rv-crumbs li { flex: none; white-space: nowrap; } .rv-crumbs [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); } /* ---------- 4. Covers ---------- Generated 1200x630 images. Title version: og:image, card thumbnails (featured image). Art version: home lead story, article hero, Start-here thumbnails. */ .rv-cover, .ast-article-post .post-thumb-img-content { position: relative; display: block; overflow: hidden; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--paper-3); border-radius: var(--r-1); box-shadow: var(--sh-hair); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } /* Astra pulls the image out with negative margins (remove-featured-img-padding) and forces 16:9 */ #page .ast-article-post .post-thumb-img-content { margin: 0; padding: 0; } #page .ast-article-post .post-thumb-img-content a { display: block; height: 100%; } #page .ast-article-post .post-thumb-img-content img { display: block; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: cover; border-radius: 0; } a:hover > .rv-cover, .rv-card:hover .rv-cover, .ast-article-post:hover .post-thumb-img-content { box-shadow: var(--sh-lift); } .rv-card:hover .rv-cover, .ast-article-post:hover .post-thumb-img-content { transform: translateY(-2px); } /* ---------- 5. Header (Astra header builder) ---------- */ #masthead { position: relative; z-index: 20; background: var(--paper); border-bottom: 4px double var(--ink); } #masthead .ast-primary-header-bar, #masthead .main-header-bar { background: none; border: 0; } #masthead .site-primary-header-wrap, #masthead .ast-mobile-header-wrap .ast-primary-header-bar { min-height: 78px; } #masthead #ast-desktop-header .site-primary-header-wrap { display: flex; align-items: center; } #masthead .ast-builder-grid-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); width: 100%; } #masthead .site-header-section { display: flex; align-items: center; gap: var(--s-6); min-width: 0; } #masthead .site-header-primary-section-right { gap: 12px; } #masthead .ast-builder-layout-element { padding: 0; margin: 0; } /* the menu may sit in either column: when it shares the right column with the button and search, it takes the free space and stays left-aligned next to the logo */ #masthead #ast-desktop-header .site-header-primary-section-right { flex: 1 1 auto; justify-content: flex-end; } #masthead #ast-desktop-header .site-header-primary-section-right > .ast-builder-menu-1 { margin-right: auto; } #masthead #ast-desktop-header .site-header-primary-section-left { flex: none; } #masthead .site-branding, #masthead .ast-site-identity { display: flex; align-items: center; flex: none; padding: 0; margin: 0; } #masthead .site-title { display: block; margin: 0; font: 600 29px/1 var(--f-serif); letter-spacing: -.01em; } #masthead .site-title a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font: inherit; } #masthead .site-title a:hover::before { background: var(--ink); } #masthead .main-header-menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; background: none; border: 0; } #masthead .main-header-menu > .menu-item { line-height: 1; height: auto; border: 0; } #masthead .main-header-menu > .menu-item > .menu-link { position: relative; display: block; height: auto; padding: 10px 11px; margin: 0; font: 500 15px/1 var(--f-sans); color: var(--ink); text-decoration: none; white-space: nowrap; background: none; } #masthead .main-header-menu > .menu-item > .menu-link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); } #masthead .main-header-menu > .menu-item > .menu-link:hover::after, #masthead .main-header-menu > .current-menu-item > .menu-link::after, #masthead .main-header-menu > .current-menu-parent > .menu-link::after, #masthead .main-header-menu > .current-post-ancestor > .menu-link::after { transform: scaleX(1); } #masthead .main-header-menu > .current-menu-item > .menu-link, #masthead .main-header-menu > .current-menu-parent > .menu-link, #masthead .main-header-menu > .current-post-ancestor > .menu-link { font-weight: 600; color: var(--ink); } /* "About" (a page item, after the six category items) gets a hairline separator */ #ast-desktop-header .main-header-menu > .menu-item-object-page { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--rule-2); } /* Astra header button element: "Start here" */ #masthead .ast-header-button-1 .ast-builder-button-wrap { display: flex; } #masthead .ast-header-button-1 .menu-link { display: none; } #masthead .ast-header-button-1 .ast-custom-button-link { text-decoration: none; display: inline-flex; } #masthead .ast-header-button-1 .ast-custom-button { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; margin: 0; border: 1px solid var(--ink); border-radius: var(--r-1); background: none; font: 600 14px/1 var(--f-sans); color: var(--ink); white-space: nowrap; transition: background-color .2s, color .2s; } #masthead .ast-header-button-1 .ast-custom-button-link:hover .ast-custom-button { background: var(--ink); color: var(--paper); } /* WordPress search form (GET /?s=), inside Astra's HTML element or the mobile dropdown */ .rv-search .search-form { position: relative; margin: 0; } .rv-search label { display: block; margin: 0; } .ast-builder-html-element > p:only-child, .ast-builder-html-element > p { margin: 0; } #page .rv-search .search-field { display: block; width: 210px; height: 40px; padding: 0 14px 0 38px; margin: 0; border: 1px solid var(--field); border-radius: var(--r-1); box-shadow: none; background: var(--sheet); color: var(--ink); font: 400 var(--fs-sm)/1 var(--f-sans); -webkit-appearance: none; appearance: none; transition: border-color .2s, width .25s var(--ease); } #page .rv-search .search-field::placeholder { color: var(--ink-3); opacity: 1; } #page .rv-search .search-field:focus { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-color: var(--ink); box-shadow: none; width: 250px; } #page .rv-search .search-submit { position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; padding: 0; margin: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: none; color: var(--ink-3); cursor: pointer; box-shadow: none; } #page .rv-search .search-submit svg { width: 16px; height: 16px; } #page .rv-search .search-submit:hover, #page .rv-search .search-submit:focus { color: var(--ink); background: none; } /* mobile-only pieces are hidden on desktop */ #masthead #ast-mobile-header, .rv-catstrip, .rv-search-link { display: none; } /* ---------- 6. Home (page-home.php; lives inside #content > .ast-container) ---------- */ #page .rv-home-content > .ast-container, .home #page #content > .ast-container { display: block; max-width: none; padding: 0; } .rv-home { display: block; width: 100%; margin: 0; padding: 0 0 var(--section); background: none; box-shadow: none; border-radius: 0; } .rv-dateline { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--rule); font: 600 var(--fs-2xs)/1.3 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .rv-dateline > span:last-child { color: var(--ink-3); } .rv-dateline b { color: var(--accent-ink); font-weight: 600; } .rv-intro__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; padding: clamp(36px, 5.5vw, 76px) 0 clamp(32px, 4.5vw, 60px); } #page .rv-display { font: 480 var(--fs-4xl)/1.03 var(--f-serif); letter-spacing: -.026em; color: var(--ink); max-width: 13.5em; text-wrap: balance; } .rv-display em { font-style: italic; font-weight: 400; color: var(--accent-ink); white-space: nowrap; } .rv-intro__side { padding-bottom: 6px; } .rv-lede { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); } .rv-lede strong { color: var(--ink); font-weight: 600; } .rv-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); } /* topic bar: each topic carries a mini-bar whose width is its real post count (--n / --max) */ .rv-topicbar { display: flex; align-items: stretch; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); } .rv-topicbar__label { align-self: center; padding: 0 20px 0 0; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .rv-topicbar a { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 14px 18px 12px; border-left: 1px solid var(--rule); font: 500 var(--fs-sm)/1 var(--f-sans); text-decoration: none; color: var(--ink); transition: background-color .2s; } .rv-topicbar a span { display: flex; justify-content: space-between; gap: 10px; } .rv-topicbar a b { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; } .rv-topicbar a i { display: block; height: 4px; width: calc(var(--n) / var(--max, 14) * 100%); min-width: 4px; background: var(--cat, var(--ink)); } .rv-topicbar a:hover { background: var(--sheet); color: var(--ink); } .rv-section { padding-block: var(--section) 0; } .rv-front { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-7); } .rv-lead__link { display: block; text-decoration: none; } .rv-lead .rv-cover { box-shadow: var(--sh-card); } .rv-lead__body { padding-top: var(--s-5); } #page .rv-lead__title { margin-top: var(--s-3); font: 500 var(--fs-3xl)/1.07 var(--f-serif); letter-spacing: -.02em; max-width: 21ch; } .rv-lead__title a { text-decoration: none; color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) 0 96% / 0 2px no-repeat; transition: background-size .35s var(--ease); } .rv-lead__title a:hover { background-size: 100% 2px; color: var(--ink); } .rv-lead__dek { margin-top: var(--s-4); max-width: 60ch; font: 400 var(--fs-md)/1.5 var(--f-serif); color: var(--ink-2); } .rv-lead .rv-meta { margin-top: var(--s-4); } .rv-rail__label { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; } .rv-rail__label span { color: var(--ink-3); font-weight: 500; letter-spacing: .06em; } .rv-latest { list-style: none; margin: 0; padding: 0; } .rv-latest li { padding: 20px 0; border-bottom: 1px solid var(--rule); } .rv-latest li:last-child { border-bottom: 0; } #page .rv-latest h3 { margin: 10px 0 8px; font: 500 var(--fs-lg)/1.2 var(--f-serif); letter-spacing: -.01em; } .rv-latest h3 a, .rv-card__title a, .rv-start__item h3 a, .rv-hub__list a, .rv-related__title a, .rv-railmore a:not(.rv-more) { text-decoration: none; color: inherit; } .rv-latest h3 a:hover, .rv-card__title a:hover, .rv-hub__list a:hover, .rv-related__title a:hover, .rv-railmore h3 a:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; } /* cards */ .rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); } .rv-card { display: flex; flex-direction: column; } .rv-card__media { display: block; margin-bottom: var(--s-4); } #page .rv-card__title { margin: 12px 0 10px; font: 500 var(--fs-lg)/1.2 var(--f-serif); letter-spacing: -.01em; } .rv-card__dek { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rv-card .rv-meta { margin-top: auto; padding-top: 14px; } /* Start here (night band, full bleed) */ .rv-start { margin-top: var(--section); background: var(--night); color: var(--on-night); padding-block: var(--section); position: relative; overflow: hidden; } .rv-start::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(245, 240, 230, .035) 31px 32px); } .rv-start .rv-wrap { position: relative; } .rv-start__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: end; padding-bottom: var(--s-6); border-bottom: 1px solid var(--night-rule); } .rv-start .rv-eyebrow { color: var(--accent-night); } #page .rv-start__title { margin-top: var(--s-4); font: 480 var(--fs-3xl)/1.05 var(--f-serif); letter-spacing: -.02em; color: var(--on-night); } .rv-start__intro { font-size: var(--fs-base); line-height: 1.65; color: var(--on-night-2); max-width: 56ch; } .rv-start__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: start; } .rv-start__item { counter-increment: start; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 88px; column-gap: var(--s-4); align-content: start; padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--night-rule); } .rv-start__item:not(:nth-child(3n+1)) { padding-left: var(--s-6); border-left: 1px solid var(--night-rule); } .rv-start__item:nth-last-child(-n+3) { border-bottom: 0; } .rv-start__item::before { content: counter(start, decimal-leading-zero); grid-column: 1; grid-row: 1; align-self: end; font: italic 400 56px/0.9 var(--f-serif); color: var(--accent-night); letter-spacing: -.02em; font-variant-numeric: lining-nums; } .rv-start__thumb { grid-column: 2; grid-row: 1; align-self: end; width: 88px; } .rv-start__thumb .rv-cover { box-shadow: 0 0 0 1px rgba(245, 240, 230, .14); } .rv-start__item > h3, .rv-start__item > p, .rv-start__item > .rv-meta { grid-column: 1 / -1; } #page .rv-start__item h3 { margin-top: var(--s-4); font: 500 var(--fs-lg)/1.22 var(--f-serif); color: var(--on-night); letter-spacing: -.005em; } .rv-start__item h3 a:hover { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--accent-night); text-decoration-thickness: 2px; text-underline-offset: .18em; } .rv-start__item p { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--on-night-2); } .rv-start__item .rv-meta { margin-top: 14px; color: var(--on-night-2); } .rv-start__item .rv-meta > * + *::before { color: var(--night-rule); } .rv-start__cat { display: inline-flex; align-items: center; gap: 7px; } .rv-start__cat::before { content: ""; width: 8px; height: 8px; background: var(--cat, var(--ink)); box-shadow: 0 0 0 1px rgba(245,240,230,.35); } /* topic hubs */ .rv-hubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } .rv-hub { position: relative; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); padding: 0 var(--s-5) var(--s-5); } .rv-hub__band { height: 104px; margin: 0 calc(-1 * var(--s-5)) var(--s-5); background-color: var(--cat, var(--ink)); background-repeat: no-repeat; background-position: right 8px center; background-size: auto 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; padding: 0 var(--s-5) 16px; color: #fff8ee; } .cat-funnels .rv-hub__band { color: var(--ink); } #page .rv-hub__name { font: 500 32px/1 var(--f-serif); letter-spacing: -.015em; color: inherit; } .rv-hub__name a, .rv-hub__name a:hover { text-decoration: none; color: inherit; } .rv-hub__name a::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 104px; } .rv-hub__count { order: -1; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .rv-hub__desc { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); } .rv-hub__list { list-style: none; margin: var(--s-4) 0 var(--s-5); padding: 0; border-top: 1px solid var(--rule); } .rv-hub__list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font: 500 17px/1.3 var(--f-serif); } .rv-hub__note { margin: calc(-1 * var(--s-2)) 0 var(--s-5); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); } .rv-hub__note a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: rgba(173, 56, 19, .35); text-underline-offset: .2em; } .rv-hub__note a:hover { color: var(--accent-ink); text-decoration-color: currentColor; } .rv-hub .rv-more { margin-top: auto; } .cat-leadgen .rv-hub__band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 88'%3E%3Cg fill='%23fff6ea'%3E%3Ccircle cx='40' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='60' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='80' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='100' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='120' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='140' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='160' cy='16' r='5' opacity='.35'/%3E%3Ccircle cx='60' cy='36' r='5' opacity='.5'/%3E%3Ccircle cx='80' cy='36' r='5' opacity='.5'/%3E%3Ccircle cx='100' cy='36' r='5' opacity='.5'/%3E%3Ccircle cx='120' cy='36' r='5' opacity='.5'/%3E%3Ccircle cx='140' cy='36' r='5' opacity='.5'/%3E%3Ccircle cx='80' cy='56' r='5' opacity='.7'/%3E%3Ccircle cx='100' cy='56' r='5' opacity='.7'/%3E%3Ccircle cx='120' cy='56' r='5' opacity='.7'/%3E%3C/g%3E%3Ccircle cx='100' cy='76' r='7' fill='%231a1814'/%3E%3C/svg%3E"); } .cat-analytics .rv-hub__band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 88'%3E%3Cpath d='M44 66 L60 66 L90 44 L120 48 L150 24 L180 14' fill='none' stroke='%23eefaf4' stroke-width='3' opacity='.8'/%3E%3Ccircle cx='150' cy='24' r='6' fill='%23f4bf4f'/%3E%3Cpath d='M44 80 H180 M44 50 H180 M44 20 H180' stroke='%23eefaf4' stroke-opacity='.15'/%3E%3C/svg%3E"); } .cat-paidads .rv-hub__band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 88'%3E%3Cg fill='none' stroke='%23f6f4ff' stroke-opacity='.3' stroke-width='2'%3E%3Ccircle cx='130' cy='44' r='18'/%3E%3Ccircle cx='130' cy='44' r='34' stroke-opacity='.6'/%3E%3Ccircle cx='130' cy='44' r='50'/%3E%3Ccircle cx='130' cy='44' r='66'/%3E%3C/g%3E%3Ccircle cx='130' cy='44' r='8' fill='%23ffc53d'/%3E%3C/svg%3E"); } .cat-smm .rv-hub__band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 88'%3E%3Cg stroke='%23fff2f7' stroke-opacity='.45' stroke-width='2'%3E%3Cpath d='M120 44 L80 20 M120 44 L90 70 M120 44 L160 18 M120 44 L165 66 M80 20 L60 48'/%3E%3C/g%3E%3Cg fill='%23fff2f7'%3E%3Ccircle cx='80' cy='20' r='6'/%3E%3Ccircle cx='90' cy='70' r='5'/%3E%3Ccircle cx='160' cy='18' r='7'/%3E%3Ccircle cx='165' cy='66' r='5'/%3E%3Ccircle cx='60' cy='48' r='4'/%3E%3C/g%3E%3Ccircle cx='120' cy='44' r='12' fill='%23ff9b73'/%3E%3C/svg%3E"); } .cat-funnels .rv-hub__band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 88'%3E%3Cg fill='%231a1814'%3E%3Crect x='50' y='8' width='120' height='12' opacity='.2'/%3E%3Crect x='70' y='26' width='80' height='12' opacity='.35'/%3E%3Crect x='88' y='44' width='44' height='12' opacity='.55'/%3E%3C/g%3E%3Crect x='100' y='62' width='20' height='12' fill='%23b8350f'/%3E%3C/svg%3E"); } .cat-sales .rv-hub__band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 88'%3E%3Cg fill='%23f5f0e6'%3E%3Crect x='60' y='10' width='22' height='14' opacity='.3'/%3E%3Crect x='60' y='30' width='22' height='14' opacity='.3'/%3E%3Crect x='60' y='50' width='22' height='14' opacity='.3'/%3E%3Crect x='90' y='10' width='22' height='14' opacity='.45'/%3E%3Crect x='90' y='30' width='22' height='14' opacity='.45'/%3E%3Crect x='120' y='10' width='22' height='14' opacity='.6'/%3E%3C/g%3E%3Crect x='150' y='10' width='22' height='14' fill='%23e8542a'/%3E%3C/svg%3E"); } /* about / principles */ .rv-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); border-top: 3px solid var(--ink); padding-top: var(--s-6); } #page .rv-about__title { margin-top: var(--s-4); font: 480 var(--fs-2xl)/1.12 var(--f-serif); letter-spacing: -.015em; } .rv-about__text { margin-top: var(--s-4); font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); max-width: 46ch; } .rv-about__text + .rv-more { margin-top: var(--s-5); } .rv-principles { list-style: none; margin: 0; padding: 0; } .rv-principles li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-5); padding: 20px 0; border-bottom: 1px solid var(--rule); } .rv-principles li:first-child { padding-top: 4px; } #page .rv-principles h3 { font: 600 var(--fs-base)/1.35 var(--f-sans); } .rv-principles p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); } /* ---------- 7. Footer (#colophon; .rv-catbar + .rv-footer injected at its top) ---------- */ #colophon { margin-top: var(--section); background: var(--night); color: var(--on-night-2); border: 0; } .home #colophon { margin-top: 0; } /* category strip: segment width = real post count (flex-grow from term->count) */ .rv-catbar { display: flex; height: 6px; } .rv-catbar i { flex: var(--n) 1 0; background: var(--cat); } .rv-catbar i.cat-sales { background: #6d665a; } .rv-footer { padding-block: var(--s-8) var(--s-7); } .rv-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.6fr) minmax(0, 3.4fr) minmax(0, 2fr); gap: var(--s-7); } .rv-footer__brand .rv-brand { display: inline-flex; align-items: center; gap: 12px; font: 600 29px/1 var(--f-serif); letter-spacing: -.01em; color: var(--on-night); text-decoration: none; } .rv-footer__brand .rv-brand:hover { color: var(--on-night); } .rv-footer__about { margin-top: var(--s-4); font-size: var(--fs-sm); line-height: 1.65; max-width: 36ch; } #colophon .rv-footer h2 { margin: 0 0 8px; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night); padding-bottom: 12px; border-bottom: 1px solid var(--night-rule); } .rv-footer ul { list-style: none; margin: 0; padding: 0; } #colophon .rv-footer li a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--on-night-2); text-decoration: none; } .rv-footer li a span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--on-night-3); } .rv-footer__topics a::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--cat, var(--ink)); box-shadow: 0 0 0 1px rgba(245,240,230,.3); } #colophon .rv-footer li a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: .25em; } /* Astra's below-footer row with the copyright element */ #colophon .site-below-footer-wrap { background: none; border-top: 1px solid var(--night-rule); padding: 0; min-height: 0; } #colophon .site-below-footer-inner-wrap, #colophon .site-below-footer-wrap .ast-builder-grid-row-container-inner { display: block; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: 0; min-height: 0; } #colophon .site-below-footer-inner-wrap { padding: var(--s-5) var(--gutter); } #colophon .site-footer-section, #colophon .ast-builder-layout-element { display: block; padding: 0; margin: 0; text-align: left; } #colophon .ast-footer-copyright { font-size: var(--fs-xs); line-height: 1.5; color: var(--on-night-3); text-align: left; } #colophon .ast-footer-copyright p { margin: 0; display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } #colophon .ast-footer-copyright a { color: var(--on-night-2); text-decoration: none; } #colophon .ast-footer-copyright a:hover { color: var(--on-night); text-decoration: underline; } /* Astra scroll-to-top button, quieter */ #ast-scroll-top { background: var(--ink); color: var(--paper); border-radius: var(--r-1); box-shadow: 0 0 0 1px rgba(245,240,230,.2); } #ast-scroll-top:hover { background: var(--accent-ink); } /* ---------- 8. Single article ---------- */ /* Astra settings expected: right sidebar + normal-width container on posts. Without the sidebar the article simply centres in one 720px column. */ .single-post #page #content { padding-top: var(--s-6); } .single-post #page #content > .ast-container { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; column-gap: clamp(48px, 7vw, 104px); } .single-post.ast-right-sidebar #page #content > .ast-container { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; } .single-post #page #primary, .single-post #page #secondary { width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; border: 0; float: none; } .single-post #page #primary .ast-article-single, .single-post #page .site-main > article.post { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; } .single-post #page .ast-article-single .single-layout-1 { padding: 0; } .single-post #page .entry-header { margin: 0 0 20px; padding: 0; text-align: left; } .single-post #page .entry-header .rv-crumbs { margin-bottom: var(--s-5); } .single-post #page .entry-header .rv-badge { margin-bottom: var(--s-4); } .single-post #page h1.entry-title { margin: 0; font: 500 var(--fs-3xl)/1.07 var(--f-serif); letter-spacing: -.022em; color: var(--ink); } .rv-dek { margin-top: var(--s-4); font: 400 var(--fs-md)/1.5 var(--f-serif); color: var(--ink-2); max-width: 62ch; } /* meta row. Astra prints "By / ": the loose "By" and "/" text nodes are hidden with font-size 0 and each item is re-sized. */ .site .entry-header .entry-meta, .site .entry-header .entry-meta * { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-transform: none; letter-spacing: normal; } .single-post #page .entry-header .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 20px 0 0; padding: 11px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: 0; line-height: 1.45; color: var(--ink-3); font-weight: 400; } .single-post #page .entry-header .entry-meta > span { font-size: var(--fs-xs); } .single-post #page .entry-header .entry-meta > span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--rule-2); margin: 0 14px; vertical-align: -1px; } .single-post #page .entry-meta .posted-by { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; } .single-post #page .entry-meta .posted-by::after { content: "R"; order: -1; width: 26px; height: 26px; display: inline-grid; place-items: center; padding-bottom: 2px; background: var(--accent); color: var(--paper); font: 600 19px/1 var(--f-serif); } .single-post #page .entry-meta .posted-by a { text-decoration: none; } .single-post #page .entry-meta .posted-by a:hover { text-decoration: underline; color: var(--ink); } .single-post #page .entry-meta .posted-on > .published::before { content: "Published "; color: var(--ink-3); } .single-post #page .entry-meta .posted-on > .updated:not(.published) { display: none; } .single-post #page .entry-meta .published, .single-post #page .entry-meta time { color: var(--ink-2); } .rv-readtime { display: inline-flex; align-items: center; gap: 6px; } .rv-readtime svg { width: 14px; height: 14px; flex: none; } .rv-updated time { color: var(--ink); font-weight: 600; } /* hero: every post shows the ART version of its generated cover (never a photo), cropped to the 3:1 band the motif is drawn in (y 115-515 of 630), so nothing of the motif is cut */ .rv-hero { margin: 0 0 28px; padding: 0; } .rv-hero .rv-cover { aspect-ratio: 3 / 1; object-position: 50% 50%; box-shadow: none; } /* Astra's own featured image block, if it is ever left on */ .single-post #page .ast-single-post-featured-section { margin: 0 0 28px; } .single-post #page .ast-single-post-featured-section img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--r-1); } .ast-separate-container .site-content .ast-single-post-featured-section + article { margin-top: 0; } /* body typography. Running text gets the reading measure (--measure, about 71 characters); structural blocks (section rules, tables, charts, boxes) span the 720px column like the hero and the byline rules. Injected ad containers get neither. :where() keeps the list at the specificity of the #page anchor alone, so later overrides are not outranked by the ID. */ #page .entry-content { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-body); counter-reset: h2; } #page .entry-content > :where(p, ul, ol, h3, h4, blockquote, dl) { max-width: var(--measure); } #page .entry-content > :where(h2, pre, figure, table, .rv-callout, .rv-bars, .rv-table-scroll, .wp-block-table, .rv-faq, [id="ez-toc-container"]) { max-width: var(--column); } #page .entry-content > * { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /* Astra centres block-editor children */ #page .entry-content > * + * { margin-top: 1.25em; } /* WordPress alignment classes (the reset above would otherwise remove their gaps) */ #page .entry-content > .aligncenter { margin-inline: auto; } #page .entry-content > .alignleft { float: left; margin: .3em 1.5em 1em 0; } #page .entry-content > .alignright { float: right; margin: .3em 0 1em 1.5em; } #page .entry-content > :is(h2, h3, .rv-table-scroll, .wp-block-table, pre, .rv-callout, .rv-bars) { clear: both; } #page .entry-content p { margin-bottom: 0; } .single-post #page .entry-content > p:first-of-type { font-size: 1.1875rem; line-height: 1.7; } .single-post #page .entry-content > p:first-of-type::first-letter { float: left; margin: .1em .12em 0 0; font: 500 4.35em/.8 var(--f-serif); color: var(--accent); } #page .entry-content a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: rgba(173, 56, 19, .35); text-underline-offset: .2em; } #page .entry-content a:hover { color: var(--accent-ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; } .entry-content strong { font-weight: 600; color: var(--ink); } #page .entry-content h2 { counter-increment: h2; margin-top: 2.4em; padding-top: 18px; border-top: 1px solid var(--ink); font: 500 var(--fs-2xl)/1.14 var(--f-serif); letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 24px; } #page .entry-content h2::before { content: counter(h2, decimal-leading-zero); display: block; margin-bottom: 12px; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; color: var(--accent-ink); } #page .entry-content h2 + * { margin-top: .7em; } #page .entry-content h3 { margin-top: 2em; font: 600 var(--fs-md)/1.35 var(--f-sans); letter-spacing: -.01em; color: var(--ink); scroll-margin-top: 24px; } #page .entry-content h3 + * { margin-top: .5em; } #page .entry-content h4 { margin-top: 1.6em; font: 600 var(--fs-base)/1.4 var(--f-sans); color: var(--ink); } .entry-content .ez-toc-section, .entry-content .ez-toc-section-end { display: inline; } /* optional owner tag inside a checklist heading: Marketing owns */ .rv-owner { display: inline-block; margin-left: 10px; padding: 4px 7px 3px; vertical-align: 3px; border: 1px solid var(--rule-2); border-radius: var(--r-1); font: 600 11px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } /* lists. Numbered lists use the built-in list-item counter, so
    continues numbering across checklist groups with no custom classes. */ #page .entry-content ul, #page .entry-content ol { list-style: none; margin-left: 0; padding: 0; } #page .entry-content li { margin: 0; } #page .entry-content li + li { margin-top: .6em; } #page .entry-content ul > li { position: relative; padding-left: 1.5em; } #page .entry-content ul > li::before { content: ""; position: absolute; left: .15em; top: .66em; width: 7px; height: 7px; background: var(--accent); } #page .entry-content ol > li { position: relative; padding-left: 2.6em; } #page .entry-content ol > li::before { content: counter(list-item); position: absolute; left: 0; top: .12em; width: 1.75em; height: 1.75em; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 600 .78em/1 var(--f-sans); color: var(--ink); font-variant-numeric: tabular-nums; } #page .entry-content li > ul, #page .entry-content li > ol { margin-top: .6em; } /* tables: wrapped by the_content filter (.rv-table-scroll) or Gutenberg (figure.wp-block-table). Scroll shadows: the two paper-coloured covers scroll with the content (local) and hide the two soft shadows (scroll) when the table is at that edge, so a cut-off column shows a shadow. */ #page .entry-content .rv-table-scroll, #page .entry-content .wp-block-table { margin-top: 1.6em; margin-inline: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } #page .entry-content .rv-table-scroll, #page .entry-content .wp-block-table { background: linear-gradient(to right, var(--paper) 30%, rgba(245, 240, 230, 0)) left / 40px 100% no-repeat local, linear-gradient(to left, var(--paper) 30%, rgba(245, 240, 230, 0)) right / 40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(26, 24, 20, .16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(26, 24, 20, .16), transparent) right / 12px 100% no-repeat scroll; } #page .entry-content .wp-block-table figcaption, #page .entry-content table caption { margin-top: 10px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); text-align: left; caption-side: bottom; } /* no tabular-nums on the whole table: Inter's tnum also widens the hyphen ("hand - raisers"). Numeric cells can opt in with class="rv-num" (the_content filter or the block editor). */ #page .entry-content table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: none; table-layout: auto; } #page .entry-content :is(td, th).rv-num { font-variant-numeric: tabular-nums; text-align: right; } #page .entry-content td:first-child, #page .entry-content th:first-child { min-width: 7.5em; } #page .entry-content .rv-table-wide table, #page .entry-content .wp-block-table table.has-fixed-layout { min-width: 560px; } #page .entry-content .wp-block-table thead { border: 0; } #page .entry-content th { text-align: left; vertical-align: bottom; padding: 12px 14px; border: 0; font: 600 var(--fs-2xs)/1.3 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper-2); } #page .entry-content td { padding: 12px 14px; vertical-align: top; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); background: none; } #page .entry-content tbody tr:last-child td { border-bottom: 0; } #page .entry-content td:first-child { font-weight: 600; color: var(--ink); } #page .entry-content tbody tr:nth-child(odd) { background: none; } #page .entry-content tbody tr:hover td { background: var(--sheet); } #page .entry-content code { font-family: var(--f-mono); font-size: .86em; background: var(--paper-2); padding: .12em .38em; border-radius: var(--r-1); color: var(--ink); } #page .entry-content pre { position: relative; overflow-x: auto; background: var(--night); color: #efe8da; border: 0; border-radius: var(--r-2); padding: 22px 24px; font: 400 .85rem/1.7 var(--f-mono); tab-size: 2; white-space: pre; } #page .entry-content pre[data-label] { padding-top: 48px; } #page .entry-content pre[data-label]::before { content: attr(data-label); position: absolute; left: 0; right: 0; top: 0; padding: 10px 24px; border-bottom: 1px solid var(--night-rule); font: 600 11px/1.2 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); } #page .entry-content pre code { background: none; padding: 0; color: inherit; font-size: inherit; } #page .entry-content blockquote { margin: 2.2em 0 0; padding: 4px 0 4px 28px; border: 0; border-left: 3px solid var(--accent); background: none; font-style: normal; } #page .entry-content blockquote + * { margin-top: 2.2em; } #page .entry-content blockquote p { font: italic 400 1.75rem/1.3 var(--f-serif); letter-spacing: -.01em; color: var(--ink); } #page .entry-content blockquote cite { display: block; margin-top: 12px; font: 600 var(--fs-2xs)/1.3 var(--f-sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } #page .entry-content img { height: auto; border-radius: var(--r-1); box-shadow: none; } #page .entry-content figure { margin-inline: 0; } #page .entry-content figcaption { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); } /* optional blocks (Gutenberg group with a class). Posts without them still look finished. */ .entry-content .rv-callout { background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 22px 26px 24px; font-size: 1.0625rem; line-height: 1.65; } .entry-content .rv-callout > * + * { margin-top: .75em; } .entry-content .rv-callout > .rv-callout__label, .rv-bars figcaption { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-2xs)/1.2 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); } .rv-callout__label::before { content: ""; width: 9px; height: 9px; background: var(--accent); } .rv-callout__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .rv-callout__stats div { padding: 14px 16px 12px 0; } .rv-callout__stats div + div { padding-left: 16px; border-left: 1px solid var(--rule); } .rv-callout__stats b { display: block; font: 500 2.25rem/1 var(--f-serif); letter-spacing: -.02em; color: var(--ink); } .rv-callout__stats span { display: block; margin-top: 6px; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); } /* benchmark bars: ink bars, vermilion current value, shaded healthy range, hairline axis. Scale: --max on the figure (percent); each row sets --v; the band sets --lo/--hi. */ #page .entry-content .rv-bars { margin-top: 1.8em; margin-inline: 0; padding-top: 16px; border-top: 1px solid var(--ink); } .rv-bars figcaption { justify-content: space-between; flex-wrap: wrap; row-gap: 6px; margin-bottom: 14px; } .rv-bars figcaption span:first-child { color: var(--ink); } .rv-bars__legend { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); letter-spacing: .06em; } .rv-bars__legend::before { content: ""; width: 18px; height: 10px; background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule-2); } .rv-bars__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; align-items: center; gap: 16px; padding: 10px 0; } .rv-bars__label { font: 600 var(--fs-sm)/1.25 var(--f-sans); color: var(--ink); } .rv-bars__label small { display: block; margin-top: 3px; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); } .rv-bars__track { position: relative; height: 22px; } .rv-bars__band { position: absolute; top: -7px; bottom: -7px; left: calc(var(--lo) / var(--max) * 100%); width: calc((var(--hi) - var(--lo)) / var(--max) * 100%); background: var(--paper-3); } .rv-bars__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / var(--max) * 100%); background: var(--ink-2); } .rv-bars__row.is-now .rv-bars__fill { background: var(--accent); } .rv-bars__val { font: 500 1.75rem/1 var(--f-serif); letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; } .rv-bars__row.is-now .rv-bars__val { color: var(--accent-ink); } .rv-bars__axis { position: relative; margin: 4px 80px 0 166px; height: 22px; border-top: 1px solid var(--ink); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .rv-bars__axis span { position: absolute; top: 6px; left: calc(var(--at) / var(--max) * 100%); transform: translateX(-50%); line-height: 1.2; } .rv-bars__axis span::before { content: ""; position: absolute; left: 50%; top: -7px; height: 5px; border-left: 1px solid var(--ink); } /* optional FAQ wrapper around "Common questions" (plain h3 + p works too) */ .entry-content .rv-faq { border-top: 1px solid var(--rule); } #page .entry-content .rv-faq h3 { margin-top: 0; padding-top: 18px; font-size: 1.125rem; } #page .entry-content .rv-faq p { margin-top: .4em; padding-bottom: 18px; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; } /* Easy Table of Contents box (in content). Hidden on wide screens only when the Easy TOC widget is in the rail (body class rv-has-railtoc from PHP). */ #page #ez-toc-container { display: block; position: relative; width: auto; margin-inline: 0; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--ink); border-radius: 0; padding: 18px 22px 14px; box-shadow: none; font-family: var(--f-sans); } #page #ez-toc-container .ez-toc-title-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #page #ez-toc-container .ez-toc-title { margin: 0; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } /* Easy TOC settings: Header Label "In this guide", Toggle View off. If the toggle is printed anyway it is hidden (the list is always open, so nothing is lost). */ #page #ez-toc-container .ez-toc-title-toggle { display: none; } #page #ez-toc-container nav { margin: 0; } #page #ez-toc-container nav > ul { counter-reset: toc; margin: 12px 0 0; padding: 0; } #page #ez-toc-container li { margin: 0; padding: 0; font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; } #page #ez-toc-container li::before { display: none; } #page #ez-toc-container nav > ul > li { counter-increment: toc; border-top: 1px solid var(--rule); } #page #ez-toc-container nav > ul > li > a { display: flex; gap: 12px; padding: 9px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; } #page #ez-toc-container nav > ul > li > a::before { content: counter(toc, decimal-leading-zero); float: none; margin: 0; counter-increment: none; flex: none; width: 22px; color: var(--accent-ink); font-variant-numeric: tabular-nums; } #page #ez-toc-container ul ul { margin: -3px 0 9px 34px; padding: 0; } #page #ez-toc-container ul ul li { padding: 2px 0; font-size: var(--fs-xs); } #page #ez-toc-container ul ul a { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-2); text-decoration: none; } #page #ez-toc-container ul ul a::before { content: none; } #page #ez-toc-container a:hover { color: var(--accent-ink); text-decoration: underline; } /* ad zones: reserved, never drawn without an ad (no placeholder boxes). PHP prints
    with no whitespace inside, and only once the AdSense code exists. Space is reserved on the while the request is pending (no layout shift when it fills); an unfilled slot collapses completely. */ #page .entry-content > .rv-ad, .rv-ad { margin: 48px 0; padding: 22px 0 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; max-width: none; clear: both; } .rv-ad::before { content: "Advertisement"; display: block; margin-bottom: 10px; font: 400 12px/1 var(--f-sans); color: var(--ink-3); } .rv-ad > ins.adsbygoogle { display: block; } .rv-ad > ins.adsbygoogle:not([data-ad-status]) { min-height: 280px; } #page .rv-ad:empty, #page .rv-ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; } /* AdSense Auto ads insert div.google-auto-placed between siblings: inside the CSS grids it would become a one-column cell and push the cards around, so it always spans the full row */ #page .site-main > .ast-row > .google-auto-placed, .rv-grid > .google-auto-placed, .rv-hubs > .google-auto-placed, .rv-start__list > .google-auto-placed, .rv-front > .google-auto-placed, .rv-footer__grid > .google-auto-placed { grid-column: 1 / -1; margin: var(--s-5) 0; } /* ---------- 9. Right rail (Astra #secondary) ---------- */ .single-post #page #secondary .sidebar-main { display: flex; flex-direction: column; gap: var(--s-7); height: 100%; padding: 0; margin: 0; background: none; border: 0; } .single-post #page #secondary .widget { margin: 0; padding: 0; background: none; border: 0; } /* only the 300x600 ad zone sticks ("More in" sits above it, in normal flow), so the whole unit (24px offset + 632px zone) fits a 900px-tall screen; on short screens it does not stick */ .rv-rail-sticky { position: sticky; top: 24px; } #page .rv-rail-sticky .rv-ad { margin: 0; } #page .rv-rail-sticky .rv-ad > ins.adsbygoogle:not([data-ad-status]) { min-height: 600px; } @media (max-height: 700px) { .rv-rail-sticky { position: static; } } #page .widget.ez-toc .widget-title, #page .rv-railmore__title { margin: 0; padding: 6px 0 12px; border-bottom: 3px solid var(--ink); font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } #page .widget.ez-toc .widget-title * { font: inherit; color: inherit; letter-spacing: inherit; } #page .widget.ez-toc .ez-toc-title-toggle { display: contents; } #page .widget.ez-toc .ez-toc-title-toggle > a.ez-toc-toggle { display: none; } #page .ez-toc-widget-container { background: none; border: 0; padding: 0; margin: 0; } #page .ez-toc-widget-container nav { display: block; } #page .ez-toc-widget-container ul.ez-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: rt; } #page .ez-toc-widget-container ul.ez-toc-list li { margin: 0; padding: 0; background: none; border: 0; } #page .ez-toc-widget-container ul.ez-toc-list > li { counter-increment: rt; border-bottom: 1px solid var(--rule); } #page .ez-toc-widget-container ul.ez-toc-list > li > a { position: relative; display: flex; gap: 12px; padding: 10px 0; font-size: var(--fs-sm); font-weight: 400; line-height: 1.35; color: var(--ink-2); text-decoration: none; background: none; transition: color .15s; } #page .ez-toc-widget-container ul.ez-toc-list > li > a::before { content: counter(rt, decimal-leading-zero); float: none; margin: 0; counter-increment: none; flex: none; width: 20px; font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; } #page .ez-toc-widget-container ul.ez-toc-list ul { list-style: none; margin: -4px 0 8px 32px; padding: 0; } #page .ez-toc-widget-container ul.ez-toc-list ul a { display: block; padding: 3px 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-3); text-decoration: none; } #page .ez-toc-widget-container ul.ez-toc-list ul a::before { content: none; } #page .ez-toc-widget-container a:hover { color: var(--ink); } #page .ez-toc-widget-container li.active { background: none; } #page .ez-toc-widget-container li.active > a { color: var(--ink); font-weight: 600; background: none; } #page .ez-toc-widget-container li.active > a::after { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; background: var(--accent); } #page .ez-toc-widget-container li.active > a::before { color: var(--accent-ink); } .rv-railtoc__foot { margin-top: 12px; display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); } .rv-railtoc__foot a { color: var(--ink-2); text-decoration: none; } .rv-railtoc__foot a:hover { color: var(--accent-ink); text-decoration: underline; } .rv-railmore ol { list-style: none; margin: 0; padding: 0; } .rv-railmore li { padding: 14px 0; border-bottom: 1px solid var(--rule); } #page .rv-railmore h3 { font: 500 1.0625rem/1.28 var(--f-serif); letter-spacing: -.005em; } .rv-railmore .rv-meta { margin-top: 6px; } #page .rv-railmore .rv-more { margin-top: 14px; font-size: var(--fs-xs); } /* ---------- 10. After the article: editorial box, related ---------- */ .rv-editorial { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-8); padding: var(--s-5); background: var(--paper-2); border-top: 3px solid var(--ink); max-width: var(--column); } .rv-editorial .rv-mark { width: 64px; height: 64px; font-size: 46px; padding-bottom: 4px; } .rv-editorial__label { font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); } #page .rv-editorial h2 { margin-top: 8px; font: 500 1.625rem/1.15 var(--f-serif); letter-spacing: -.01em; } .rv-editorial p { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); } .rv-editorial ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; } .rv-editorial li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); } .rv-editorial li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; background: var(--accent); } .rv-editorial .rv-more { margin-top: 16px; } .rv-related { margin-top: var(--s-8); max-width: var(--column); } .rv-related .rv-sechead { margin-bottom: 0; } #page .rv-related .rv-sechead__title { font-size: var(--fs-xl); } .rv-related__list { list-style: none; margin: 0; padding: 0; } .rv-related__item { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--s-5); align-items: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); } .rv-related__item:hover .rv-cover { box-shadow: var(--sh-lift); transform: translateY(-2px); } #page .rv-related__title { margin: 10px 0 8px; font: 500 var(--fs-lg)/1.2 var(--f-serif); letter-spacing: -.01em; } .rv-related__item p { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-related__item .rv-meta { margin-top: 8px; } /* ---------- 11. Post navigation + comments ---------- */ .single-post #page .post-navigation { max-width: var(--column); margin: var(--s-7) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--ink); background: none; } .single-post #page .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding: 0; margin: 0; } .single-post #page .post-navigation .nav-previous, .single-post #page .post-navigation .nav-next { width: auto; padding: 0; margin: 0; border: 0; text-align: left; } .single-post #page .post-navigation .nav-next { text-align: right; grid-column: 2; } .single-post #page .post-navigation .nav-previous::after { content: none; } /* Astra draws a divider here */ .single-post #page .post-navigation a { display: flex; flex-direction: column; gap: 6px; width: auto; max-width: none; height: auto; margin: 0; padding: 0; border: 0; background: none; text-decoration: none; color: var(--ink); } .single-post #page .post-navigation .nav-next a { align-items: flex-end; } .single-post #page .post-navigation .ast-post-nav { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-2xs)/1.2 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .single-post #page .post-navigation .ast-post-nav svg { width: 10px; height: 10px; fill: currentColor; } .single-post #page .post-navigation a p { display: block; margin: 0; padding: 0; max-width: 34ch; white-space: normal; overflow: visible; text-overflow: clip; font: 500 1.0625rem/1.3 var(--f-serif); letter-spacing: -.005em; text-transform: none; color: var(--ink); } .single-post #page .post-navigation a:hover p { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; } #page .comments-area { max-width: var(--column); margin: var(--s-7) 0 0; padding: 0; background: none; border: 0; } #page .comments-title, #page .comment-reply-title { margin: 0 0 var(--s-4); padding: var(--s-4) 0 0; border-top: 3px solid var(--ink); background: none; font: 500 var(--fs-xl)/1.15 var(--f-serif); letter-spacing: -.01em; color: var(--ink); } #page .comment-reply-title small a { font: 600 var(--fs-xs)/1 var(--f-sans); color: var(--accent-ink); margin-left: 12px; } #page .comment-respond { margin: 0; padding: 0; background: none; border: 0; } #page .comment-form { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0; } #page .comment-form > * { flex: 1 1 100%; margin: 0; } #page .comment-form .ast-row, #page .comment-form fieldset, #page .comment-form .comment-form-textarea { width: 100%; margin: 0; padding: 0; border: 0; float: none; } #page .comment-form legend:empty { display: none; } #page .comment-form .ast-comment-formwrap { display: flex; flex-wrap: wrap; gap: 12px 16px; flex: 1 1 100%; margin: 0; } #page .comment-form .ast-comment-formwrap > p { flex: 1 1 180px; width: auto; float: none; padding: 0; margin: 0; } #page .comment-notes, #page .comment-form-cookies-consent, #page .logged-in-as { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); } #page .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; } #page .comment-form-cookies-consent input { margin-top: 1px; } #respond input[type="checkbox"] { width: 16px; height: 16px; flex: none; accent-color: var(--ink); } #page .comment-form textarea, #page .comment-form input[type="text"], #page .comment-form input[type="email"], #page .comment-form input[type="url"] { width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--field); border-radius: var(--r-1); background: var(--sheet); color: var(--ink); font: 400 var(--fs-sm)/1.5 var(--f-sans); box-shadow: none; } #page .comment-form textarea { min-height: 150px; } #page .comment-form textarea:focus, #page .comment-form input:focus { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-color: var(--ink); box-shadow: none; } #page .comment-form ::placeholder { color: var(--ink-3); opacity: 1; } #page .comment-form .form-submit { flex: 0 0 auto; } #page .comment-form .submit { min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--r-1); background: var(--ink); color: var(--paper); font: 600 var(--fs-sm)/1 var(--f-sans); cursor: pointer; } #page .comment-form .submit:hover, #page .comment-form .submit:focus { background: var(--accent-ink); color: var(--paper); } #page .ast-comment-list, #page .comment-list { list-style: none; margin: 0 0 var(--s-6); padding: 0; } #page .comment-list .comment { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); background: none; } #page .comment-list .avatar { border-radius: 50%; } #page .comment-content { font-size: var(--fs-base); line-height: 1.65; color: var(--ink-body); } /* ---------- 12. Archive (category, tag, date, search) ---------- */ .archive #page #content, .search #page #content, .blog #page #content { padding-top: 0; } .archive #page #content > .ast-container, .search #page #content > .ast-container { display: block; } .archive #page #primary, .search #page #primary { width: 100%; margin: 0; padding: 0 0 var(--s-8); border: 0; } /* the header: every child of .ast-archive-description is a grid item, so the injected parts (crumbs, eyebrow, description, facts, art, other topics, list head) line up without wrapper elements around Astra's title */ :is(.archive, .search) #page .ast-archive-description { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--s-7); align-items: start; max-width: none; width: auto; margin: var(--s-6) 0 0; padding: 0; background: none; border: 0; border-top: 3px solid var(--ink); text-align: left; } :is(.archive, .search) #page .ast-archive-description > * { grid-column: 1; margin: 0; } :is(.archive, .search) #page .ast-archive-description > .rv-crumbs { margin-top: var(--s-6); } :is(.archive, .search) #page .ast-archive-description > .rv-eyebrow { margin-top: var(--s-5); justify-self: start; } :is(.archive, .search) #page .ast-archive-description .page-title, :is(.archive, .search) #page .ast-archive-description .ast-archive-title { margin-top: var(--s-3); font: 480 clamp(2.75rem, 2rem + 3.6vw, 5.25rem)/1 var(--f-serif); letter-spacing: -.03em; color: var(--ink); } :is(.archive, .search) #page .ast-archive-description > .rv-archive__desc p, :is(.archive, .search) #page .ast-archive-description > p, :is(.archive, .search) #page .ast-archive-description .ast-archive-description-text p { margin-top: var(--s-4); font: 400 var(--fs-md)/1.5 var(--f-serif); color: var(--ink-2); max-width: 46ch; } :is(.archive, .search) #page .ast-archive-description > .rv-archive__facts { display: flex; flex-wrap: wrap; margin: var(--s-5) 0 var(--s-6); } .rv-archive__facts div { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--rule); } .rv-archive__facts div:last-child { border-right: 0; margin-right: 0; } .rv-archive__facts b { display: block; font: 500 2rem/1 var(--f-serif); letter-spacing: -.02em; color: var(--ink); } .rv-archive__facts span { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); } :is(.archive, .search) #page .ast-archive-description > .rv-archive__art { grid-column: 2; grid-row: 1 / span 6; align-self: stretch; position: relative; min-height: 300px; background-color: var(--cat, var(--ink)); background-repeat: no-repeat; background-position: center 45%; background-size: 100% auto; } .category-lead-gen .rv-archive__art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330'%3E%3Cg fill='%23fff6ea'%3E%3Cg opacity='.3'%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Ccircle cx='90' cy='50' r='8'/%3E%3Ccircle cx='130' cy='50' r='8'/%3E%3Ccircle cx='170' cy='50' r='8'/%3E%3Ccircle cx='210' cy='50' r='8'/%3E%3Ccircle cx='250' cy='50' r='8'/%3E%3Ccircle cx='290' cy='50' r='8'/%3E%3Ccircle cx='330' cy='50' r='8'/%3E%3C/g%3E%3Cg opacity='.45'%3E%3Ccircle cx='90' cy='90' r='8'/%3E%3Ccircle cx='130' cy='90' r='8'/%3E%3Ccircle cx='170' cy='90' r='8'/%3E%3Ccircle cx='210' cy='90' r='8'/%3E%3Ccircle cx='250' cy='90' r='8'/%3E%3Ccircle cx='290' cy='90' r='8'/%3E%3C/g%3E%3Cg opacity='.6'%3E%3Ccircle cx='130' cy='130' r='8'/%3E%3Ccircle cx='170' cy='130' r='8'/%3E%3Ccircle cx='210' cy='130' r='8'/%3E%3Ccircle cx='250' cy='130' r='8'/%3E%3C/g%3E%3Cg opacity='.8'%3E%3Ccircle cx='150' cy='170' r='8'/%3E%3Ccircle cx='190' cy='170' r='8'/%3E%3Ccircle cx='230' cy='170' r='8'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%23fff6ea' stroke-opacity='.3' stroke-width='1.5'%3E%3Ccircle cx='50' cy='90' r='7'/%3E%3Ccircle cx='330' cy='90' r='7'/%3E%3Ccircle cx='50' cy='130' r='7'/%3E%3Ccircle cx='90' cy='130' r='7'/%3E%3Ccircle cx='290' cy='130' r='7'/%3E%3Ccircle cx='330' cy='130' r='7'/%3E%3C/g%3E%3Cg fill='%231a1814'%3E%3Ccircle cx='170' cy='214' r='13'/%3E%3Ccircle cx='210' cy='214' r='13'/%3E%3Ccircle cx='190' cy='254' r='13'/%3E%3C/g%3E%3Cpath d='M40 296 H340' stroke='%23fff6ea' stroke-opacity='.4' stroke-width='2'/%3E%3C/svg%3E"); } .category-analytics .rv-archive__art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330'%3E%3Cg stroke='%23eefaf4' stroke-opacity='.15' stroke-width='2'%3E%3Cpath d='M30 90 H350 M30 150 H350 M30 210 H350 M30 270 H350'/%3E%3C/g%3E%3Cpath d='M40 250 L100 236 L150 196 L200 206 L250 150 L300 120 L340 70' fill='none' stroke='%23eefaf4' stroke-width='5' stroke-opacity='.85'/%3E%3Ccircle cx='300' cy='120' r='12' fill='%23f4bf4f'/%3E%3C/svg%3E"); } .category-paid-ads .rv-archive__art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330'%3E%3Cg fill='none' stroke='%23f6f4ff' stroke-opacity='.3' stroke-width='3'%3E%3Ccircle cx='200' cy='160' r='40'/%3E%3Ccircle cx='200' cy='160' r='80' stroke-opacity='.6'/%3E%3Ccircle cx='200' cy='160' r='120'/%3E%3C/g%3E%3Ccircle cx='200' cy='160' r='18' fill='%23ffc53d'/%3E%3C/svg%3E"); } .category-smm .rv-archive__art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330'%3E%3Cg stroke='%23fff2f7' stroke-opacity='.45' stroke-width='3'%3E%3Cpath d='M190 170 L110 90 M190 170 L120 260 M190 170 L300 80 M190 170 L310 250'/%3E%3C/g%3E%3Cg fill='%23fff2f7'%3E%3Ccircle cx='110' cy='90' r='12'/%3E%3Ccircle cx='120' cy='260' r='10'/%3E%3Ccircle cx='300' cy='80' r='14'/%3E%3Ccircle cx='310' cy='250' r='10'/%3E%3C/g%3E%3Ccircle cx='190' cy='170' r='24' fill='%23ff9b73'/%3E%3C/svg%3E"); } .category-funnels .rv-archive__art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330'%3E%3Cg fill='%231a1814'%3E%3Crect x='60' y='60' width='260' height='30' opacity='.2'/%3E%3Crect x='100' y='110' width='180' height='30' opacity='.35'/%3E%3Crect x='140' y='160' width='100' height='30' opacity='.55'/%3E%3C/g%3E%3Crect x='170' y='210' width='40' height='30' fill='%23b8350f'/%3E%3C/svg%3E"); } .category-sales .rv-archive__art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 330'%3E%3Cg fill='%23f5f0e6'%3E%3Crect x='60' y='80' width='50' height='32' opacity='.3'/%3E%3Crect x='60' y='124' width='50' height='32' opacity='.3'/%3E%3Crect x='60' y='168' width='50' height='32' opacity='.3'/%3E%3Crect x='130' y='80' width='50' height='32' opacity='.45'/%3E%3Crect x='130' y='124' width='50' height='32' opacity='.45'/%3E%3Crect x='200' y='80' width='50' height='32' opacity='.6'/%3E%3C/g%3E%3Crect x='270' y='80' width='50' height='32' fill='%23e8542a'/%3E%3C/svg%3E"); } .rv-archive__tag { position: absolute; right: 16px; bottom: 14px; color: #fff6ea; font: 600 11px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; } .category-funnels .rv-archive__tag { color: var(--ink); } :is(.archive, .search) #page .ast-archive-description > .rv-subnav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0 0; border-top: 1px solid var(--ink); } .rv-subnav > span { font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 8px; } .rv-subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: 999px; font: 500 var(--fs-xs)/1 var(--f-sans); text-decoration: none; color: var(--ink); } .rv-subnav a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ink)); } .rv-subnav a:hover { border-color: var(--ink); background: var(--sheet); color: var(--ink); } .rv-subnav a small { color: var(--ink-3); font-size: inherit; } :is(.archive, .search) #page .ast-archive-description > .rv-listhead { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: var(--s-7) 0 var(--s-6); padding-bottom: 12px; border-bottom: 1px solid var(--ink); font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; } .rv-listhead span { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: var(--fs-xs); color: var(--ink-3); } /* search results (body.search): same header grid in one column, a wide search form under the title (printed by PHP on astra_after_archive_title when is_search()), the topics as a fallback */ body.search #page .ast-archive-description { grid-template-columns: minmax(0, 1fr); } .search #page .ast-archive-description .page-title, .search #page .ast-archive-description .ast-archive-title { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.05; overflow-wrap: anywhere; } .search #page .ast-archive-title span { font-size: inherit; line-height: inherit; font-style: italic; font-weight: 400; color: var(--accent-ink); } :is(.archive, .search) #page .ast-archive-description > .rv-searchhead { margin: var(--s-5) 0 var(--s-6); max-width: 560px; } .rv-searchhead__none { margin-bottom: var(--s-4); font: 400 var(--fs-md)/1.5 var(--f-serif); color: var(--ink-2); max-width: 46ch; } #page .rv-searchhead .rv-search .search-field, #page .rv-searchhead .rv-search .search-field:focus, #page .rv-404 .rv-search .search-field, #page .rv-404 .rv-search .search-field:focus { width: 100%; height: 50px; padding-left: 44px; font-size: var(--fs-base); } #page .rv-searchhead .rv-search .search-submit, #page .rv-404 .rv-search .search-submit { top: 9px; left: 6px; } /* the header already carries the message, the form and the topics: Astra's own no-results box is redundant */ .search-no-results #page .no-results { display: none; } .search-no-results #page .ast-archive-description > .rv-subnav { margin-bottom: var(--s-8); } /* the grid: Astra 4.x wraps each card as article > .ast-article-inner > .post-content; every level is a flex column so the meta pins to the bottom whatever the nesting. Astra prints the meta (header.entry-header) before the excerpt: order moves it down. */ #page .site-main > .ast-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); margin: 0; padding: 0; } #page .ast-row::before, #page .ast-row::after { content: none; } #page article.ast-article-post { display: flex; flex-direction: column; width: auto; min-width: 0; margin: 0; padding: 0; float: none; background: none; border: 0; box-shadow: none; border-radius: 0; } #page .ast-article-post .ast-article-inner, #page .ast-article-post .post-content { display: flex; flex-direction: column; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible; } #page .ast-article-post .ast-blog-featured-section { order: 1; margin: 0 0 var(--s-4); padding: 0; } #page .ast-article-post .ast-blog-featured-section:empty { display: none; } #page .ast-article-post .cat-links { order: 2; display: block; margin: 2px 0 0; } #page .ast-article-post h2.entry-title { order: 3; margin: 12px 0 10px; font: 500 var(--fs-lg)/1.2 var(--f-serif); letter-spacing: -.01em; } #page .ast-article-post h2.entry-title a { color: var(--ink); text-decoration: none; font-weight: inherit; } /* Astra sets 600 on archive title links */ #page .ast-article-post h2.entry-title a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; } #page .ast-article-post .ast-excerpt-container { order: 4; margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #page .ast-article-post .ast-excerpt-container p { margin: 0; } #page .ast-article-post header.entry-header { order: 5; margin: auto 0 0; padding: 14px 0 0; } #page .ast-article-post .entry-content:empty, #page .ast-article-post .entry-content { order: 6; margin: 0; } #page .ast-article-post .entry-content:empty { display: none; } #page .ast-article-post .read-more { order: 6; display: none; } /* card meta = reading time only (20 guides share one publish date) */ #page .ast-article-post .entry-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 0; line-height: 1.4; color: var(--ink-3); font-weight: 400; } #page .ast-article-post .entry-meta .posted-by, #page .ast-article-post .entry-meta .posted-on { display: none; } #page .ast-article-post .entry-meta > span { font-size: var(--fs-xs); } /* on its own topic page the category label is redundant */ .category #page .ast-article-post .cat-links { display: none; } /* pagination */ #page .ast-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: var(--s-8) 0 0; padding: var(--s-4) 0 0; border-top: 3px solid var(--ink); } #page .ast-pagination .navigation { margin: 0; } #page .ast-pagination .nav-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #page .ast-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; margin: 0; border: 1px solid var(--rule-2); border-radius: var(--r-1); background: none; font: 600 var(--fs-sm)/1 var(--f-sans); text-decoration: none; color: var(--ink); } #page .ast-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); } #page .ast-pagination .page-numbers:hover:not(.current) { border-color: var(--ink); color: var(--ink); } #page .ast-pagination .page-numbers.dots { border: 0; min-width: 20px; } /* Astra (max-width: 420px) makes Prev/Next full-width buttons on their own line */ #page .ast-pagination .prev.page-numbers, #page .ast-pagination .next.page-numbers { width: auto; margin: 0; } .rv-pagenote { margin-right: auto; font-size: var(--fs-xs); color: var(--ink-3); } /* 404 (body.error404): Astra's 404 template is replaced by rivatra_404() (components.html e1) */ .error404 #page #content { padding-top: 0; } .error404 #page #content > .ast-container { display: block; } .error404 #page #primary { width: 100%; margin: 0; padding: 0 0 var(--s-8); border: 0; } #page .rv-404 { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--s-6) 0 0; padding: 0; background: none; border: 0; border-top: 3px solid var(--ink); text-align: left; } .rv-404 > * { margin: 0; } .rv-404 > .rv-crumbs { margin-top: var(--s-6); } .rv-404 > .rv-eyebrow { margin-top: var(--s-5); justify-self: start; } #page .rv-404 .page-title { margin-top: var(--s-3); font: 480 clamp(2.5rem, 1.8rem + 3vw, 4.5rem)/1.02 var(--f-serif); letter-spacing: -.03em; color: var(--ink); max-width: 16ch; } .rv-404__text { margin-top: var(--s-4); font: 400 var(--fs-md)/1.5 var(--f-serif); color: var(--ink-2); max-width: 46ch; } .rv-404 > .rv-search { margin: var(--s-5) 0 var(--s-6); max-width: 560px; } .rv-404 > .rv-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0 0; border-top: 1px solid var(--ink); } .rv-404 > .rv-listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: var(--s-7) 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; } .rv-404__start { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); counter-reset: s404; } .rv-404__start li { counter-increment: s404; display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); font: 500 var(--fs-md)/1.3 var(--f-serif); } .rv-404__start li::before { content: counter(s404, decimal-leading-zero); flex: none; width: 22px; font: 600 var(--fs-2xs)/1 var(--f-sans); letter-spacing: .08em; color: var(--accent-ink); } .rv-404__start a { color: var(--ink); text-decoration: none; } .rv-404__start a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; } /* ---------- 13. Responsive (Astra breakpoints: 1200 / 921 / 544) ---------- */ @media (min-width: 1201px) { .rv-has-railtoc #page .entry-content #ez-toc-container { display: none; } } @media (max-width: 1200px) { #masthead .site-header-section { gap: var(--s-4); } #masthead .main-header-menu > .menu-item > .menu-link { padding: 10px 8px; font-size: 14.5px; } #masthead .main-header-menu > .menu-item > .menu-link::after { left: 8px; right: 8px; } #page .rv-search .search-field { width: 160px; } #page .rv-search .search-field:focus { width: 190px; } #page .rv-display { font-size: clamp(2.75rem, 5.2vw, 4rem); } .rv-front { grid-template-columns: minmax(0, 1fr); } .rv-front .rv-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } .rv-front .rv-rail__label { grid-column: 1 / -1; } .rv-latest { display: contents; } .rv-latest li:last-child { border-bottom: 1px solid var(--rule); } .rv-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .single-post.ast-right-sidebar #page #content > .ast-container { grid-template-columns: minmax(0, 720px); justify-content: center; } .single-post #page #secondary { display: none; } :is(.archive, .search) #page .ast-archive-description { grid-template-columns: minmax(0, 1fr) 280px; } .rv-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rv-footer__brand { grid-column: 1 / -1; } } /* narrow desktops (922-1080): keep the desktop header on one line */ @media (max-width: 1080px) { #ast-desktop-header .main-header-menu > .menu-item-object-page { display: none; } /* About stays in the footer */ #masthead .main-header-menu > .menu-item > .menu-link { padding: 10px 7px; font-size: 14px; } #masthead .main-header-menu > .menu-item > .menu-link::after { left: 7px; right: 7px; } #page .rv-search .search-field, #page .rv-search .search-field:focus { width: 165px; } } /* Astra switches to the mobile header at its tablet breakpoint (921px) */ @media (max-width: 921px) { #masthead #ast-desktop-header { display: none; } #masthead #ast-mobile-header { display: block; } #masthead .ast-mobile-header-wrap .ast-primary-header-bar { display: block; min-height: 64px; padding: 0 var(--gutter); } #masthead .ast-mobile-header-wrap .ast-builder-grid-row { min-height: 64px; gap: 12px; } #masthead #ast-mobile-header .site-title { font-size: 26px; } #masthead #ast-mobile-header .site-title a::before { width: 30px; height: 30px; font-size: 22px; } #masthead #ast-mobile-header .site-header-primary-section-right { gap: 8px; } /* the search link and the toggle sit in block wrappers that inherit Astra's 48px line-height: flex-centre both wrappers so the two 40px buttons share one centre line */ #masthead #ast-mobile-header .site-header-primary-section-right .ast-builder-html-element, #masthead #ast-mobile-header .site-header-primary-section-right .ast-header-html, #masthead #ast-mobile-header .ast-button-wrap { display: flex; align-items: center; line-height: 1; } #masthead .rv-search-link, #masthead #ast-mobile-header .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 12px; margin: 0; border: 1px solid var(--rule-2); border-radius: var(--r-1); background: none; color: var(--ink); box-shadow: none; font: 600 13px/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; } #masthead .rv-search-link { width: 40px; padding: 0; } #masthead .rv-search-link svg { width: 18px; height: 18px; } #masthead #ast-mobile-header .menu-toggle .mobile-menu-toggle-icon { display: inline-flex; align-items: center; } #masthead #ast-mobile-header .menu-toggle .ahfb-svg-iconset { display: inline-flex; align-items: center; } #masthead #ast-mobile-header .menu-toggle .ast-mobile-svg { width: 18px; height: 18px; fill: currentColor; } /* visible label from CSS (keep Astra's toggle label empty; the button's accessible name is Astra's "Main Menu") */ #masthead #ast-mobile-header .menu-toggle::after { content: "Menu"; } #masthead #ast-mobile-header .menu-toggle .mobile-menu-wrap { display: none; } #masthead #ast-mobile-header .menu-toggle:hover { border-color: var(--ink); color: var(--ink); background: none; } #masthead #ast-mobile-header .menu-toggle.toggled { background: var(--ink); border-color: var(--ink); color: var(--paper); } #masthead #ast-mobile-header .menu-toggle.toggled .ast-mobile-svg { fill: var(--paper); } #masthead #ast-mobile-header .menu-toggle.toggled::after { content: "Close"; } /* dropdown panel: Astra toggles .toggled on the button and ast-main-header-nav-open on body */ /* in flow (Astra makes it an absolute overlay): it pushes the topic strip and page down */ #masthead #ast-mobile-header .ast-mobile-header-content { position: static; width: auto; border-top: 1px solid var(--rule); background: var(--paper); padding: 16px var(--gutter) 24px; } #masthead #ast-mobile-header .ast-mobile-header-content > *, #masthead #ast-mobile-header .ast-mobile-header-content .ast-header-html, #masthead #ast-mobile-header .ast-mobile-header-content .ast-builder-html-element, #masthead #ast-mobile-header .ast-mobile-header-content .rv-search { display: block; width: 100%; padding: 0; } #masthead #ast-mobile-header .ast-mobile-header-content .rv-search { margin-bottom: 8px; } #masthead #ast-mobile-header .ast-mobile-header-content .search-field, #masthead #ast-mobile-header .ast-mobile-header-content .search-field:focus { width: 100%; height: 46px; } #masthead #ast-mobile-header .ast-mobile-header-content .search-submit { top: 7px; } #masthead #ast-mobile-header .main-header-bar-navigation { display: block; width: 100%; } #masthead #ast-mobile-header .main-header-menu { display: block; margin-top: 4px; background: none; } #masthead #ast-mobile-header .main-header-menu > .menu-item { display: block; border: 0; border-bottom: 1px solid var(--rule); } #masthead #ast-mobile-header .main-header-menu > .menu-item > .menu-link { display: flex; align-items: center; gap: 12px; padding: 14px 0; border: 0; background: none; font: 500 19px/1.2 var(--f-serif); color: var(--ink); } #masthead #ast-mobile-header .main-header-menu > .menu-item > .menu-link::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--cat, transparent); } #masthead #ast-mobile-header .main-header-menu > .menu-item > .menu-link::after { display: none; } #masthead #ast-mobile-header .main-header-menu > .menu-item > .menu-link:hover { color: var(--accent-ink); background: none; } #masthead #ast-mobile-header .main-header-menu > .menu-item-object-page { margin: 0; padding: 0; border-left: 0; } /* category strip injected with astra_masthead_bottom: coloured dots, scroll affordance */ #masthead .rv-catstrip { display: block; position: relative; border-top: 1px solid var(--rule); } .rv-catstrip::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 48px; pointer-events: none; background: linear-gradient(to right, rgba(245, 240, 230, 0), var(--paper) 80%); } .rv-catstrip ul { display: flex; gap: 6px; list-style: none; margin: 0; overflow-x: auto; scrollbar-width: none; padding: 10px 48px 10px var(--gutter); } .rv-catstrip ul::-webkit-scrollbar { display: none; } .rv-catstrip a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 999px; font: 500 13.5px/1 var(--f-sans); color: var(--ink); text-decoration: none; white-space: nowrap; } .rv-catstrip a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ink)); } .rv-catstrip a:hover { color: var(--ink); border-color: var(--ink); } .rv-catstrip .is-current a { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; } .rv-intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } /* the header topic strip (below 922px) already lists the six topics: no second and third list */ .rv-dateline > span:first-child { display: none; } .rv-topicbar { display: none; } .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-start__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .rv-start__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-start__item, .rv-start__item:not(:nth-child(3n+1)) { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-left: 0; } .rv-start__item:nth-child(even) { padding-left: var(--s-5); border-left: 1px solid var(--night-rule); } .rv-start__item:nth-last-child(-n+3) { border-bottom: 1px solid var(--night-rule); } .rv-start__item:nth-last-child(-n+2) { border-bottom: 0; } .rv-about { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .rv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #page .site-main > .ast-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.archive, .search) #page .ast-archive-description { grid-template-columns: minmax(0, 1fr); } :is(.archive, .search) #page .ast-archive-description > .rv-archive__facts { margin-bottom: var(--s-5); } :is(.archive, .search) #page .ast-archive-description > .rv-archive__art { grid-column: 1; grid-row: auto; min-height: 120px; background-size: auto 130%; background-position: center 36%; margin-bottom: var(--s-5); } /* sits below the facts */ .single-post #page #content { padding-top: var(--s-5); } } /* phones (Astra's mobile breakpoint is 544px; the phone layout starts a little earlier) */ @media (max-width: 640px) { :root { --fs-lg: 1.3125rem; } .rv-dateline { font-size: 11px; padding: 11px 0; } #page .rv-display { font-size: 2.45rem; line-height: 1.04; } .rv-lede { font-size: 1.0625rem; } .rv-ctas .rv-btn { flex: 1 1 auto; justify-content: center; } .rv-section { padding-top: 44px; } .rv-start { padding-block: 44px; margin-top: 44px; } .rv-start__intro { display: none; } .rv-start__head { padding-bottom: var(--s-4); } .rv-front { gap: 0; } #page .rv-lead__title { font-size: 1.875rem; } .rv-lead__dek { font-size: 1.0625rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-front .rv-rail { display: block; margin-top: var(--s-5); } .rv-rail__label { padding-bottom: 10px; } .rv-latest { display: block; } .rv-latest li { padding: 14px 0; } .rv-latest li:nth-child(n+4) { display: none; } #page .rv-latest h3 { margin: 8px 0 6px; font-size: 1.1875rem; } .rv-latest li:last-child, .rv-latest li:nth-child(3) { border-bottom: 0; } .rv-sechead { flex-direction: column; gap: 6px; margin-bottom: var(--s-4); } .rv-sechead__aside { font-size: var(--fs-xs); } .rv-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .rv-grid .rv-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); } .rv-grid .rv-card:first-child { border-top: 0; padding-top: 0; } .rv-grid .rv-card:nth-child(n+5) { display: none; } .rv-grid .rv-card__media { grid-row: 1 / span 3; margin: 0; } .rv-grid .rv-kicker { justify-self: start; font-size: 11px; } #page .rv-grid .rv-card__title { margin: 7px 0 0; font-size: 1.0625rem; line-height: 1.22; } .rv-grid .rv-card__dek { display: none; } .rv-grid .rv-meta { padding-top: 6px; font-size: 12px; } .rv-start__list { grid-template-columns: minmax(0, 1fr); } .rv-start__item, .rv-start__item:nth-child(even), .rv-start__item:not(:nth-child(3n+1)) { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--night-rule); } .rv-start__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--night-rule); } .rv-start__item:last-child { border-bottom: 0; } .rv-start__item::before { grid-row: 1 / span 2; align-self: start; font-size: 36px; } .rv-start__thumb, .rv-start__item p { display: none; } .rv-start__item > h3, .rv-start__item > .rv-meta { grid-column: 2; } #page .rv-start__item h3 { margin-top: 2px; font-size: 1.125rem; } .rv-start__item .rv-meta { margin-top: 6px; font-size: 12px; } .rv-hubs { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .rv-hub { padding: 0 var(--s-4) var(--s-4); } .rv-hub__band { height: 72px; margin: 0 calc(-1 * var(--s-4)) var(--s-3); padding: 0 var(--s-4) 10px; gap: 6px; } #page .rv-hub__name { font-size: 27px; } .rv-hub__name a::after { height: 72px; } .rv-hub__desc { display: none; } .rv-hub__list { margin: 0 0 var(--s-4); border-top: 0; } .rv-hub__list li { padding: 10px 0; font-size: 16px; } .rv-hub__list li:nth-child(n+3) { display: none; } .rv-hub__note { margin: -4px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); } .rv-hub .rv-more { display: none; } /* the whole band is the link on phones */ .rv-hub__list li:last-child { border-bottom: 0; } .rv-principles li { display: block; padding: 12px 0; font-size: var(--fs-sm); line-height: 1.55; } .rv-principles li:first-child { padding-top: 0; } #page .rv-principles h3, .rv-principles p { display: inline; font-size: inherit; line-height: inherit; } .rv-principles h3::after { content: ". "; } .rv-footer__about { display: none; } .rv-about__text { font-size: var(--fs-sm); } .rv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } .rv-footer__brand { grid-column: 1 / -1; } .rv-footer__start { grid-column: 1 / -1; order: 3; } .rv-footer { padding-block: var(--s-7) var(--s-6); } .single-post #page #content { padding-top: var(--s-4); } .single-post #page h1.entry-title { font-size: 2.125rem; line-height: 1.1; } .rv-dek { font-size: 1.125rem; } .single-post #page .entry-header .entry-meta > span + span::before { display: none; } /* no column gap: Astra's loose "By" and "/" text nodes are (zero-width) flex items */ .single-post #page .entry-header .entry-meta { gap: 6px 0; } .single-post #page .entry-header .entry-meta > span:not(.posted-by) { margin-right: 14px; } .single-post #page .entry-meta .posted-by { flex-basis: 100%; } .rv-hero { margin-inline: calc(-1 * var(--gutter)); margin-bottom: var(--s-5); } .rv-hero .rv-cover { border-radius: 0; } #page .entry-content { font-size: 1.0625rem; } .single-post #page .entry-content > p:first-of-type { font-size: 1.125rem; } #page .entry-content h2 { font-size: 1.75rem; } .rv-owner { display: table; margin: 8px 0 0; } #page .entry-content table { font-size: .875rem; } #page .entry-content th, #page .entry-content td { padding: 10px 8px; } #page .entry-content td:first-child { padding-left: 0; } #page .entry-content th:first-child { padding-left: 8px; } #page .entry-content blockquote p { font-size: 1.4rem; } #page .entry-content pre { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding-inline: var(--gutter); } #page .entry-content pre[data-label]::before { padding-inline: var(--gutter); } .entry-content .rv-callout { padding: 18px 18px 20px; } .rv-callout__stats { grid-template-columns: minmax(0, 1fr); } .rv-callout__stats div, .rv-callout__stats div + div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-left: 0; } .rv-callout__stats div + div { border-top: 1px solid var(--rule); } .rv-callout__stats b { font-size: 1.75rem; } .rv-callout__stats span { margin: 0; font-size: var(--fs-sm); } .rv-bars__row { grid-template-columns: minmax(0, 1fr) 56px; gap: 8px 12px; } .rv-bars__label { grid-column: 1 / -1; } .rv-bars__label small { display: inline; margin-left: 6px; } .rv-bars__axis { margin: 4px 68px 0 0; } .rv-editorial { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; } .rv-editorial .rv-mark { width: 44px; height: 44px; font-size: 32px; } .rv-related__item { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 18px 0; } #page .rv-related__title { font-size: 1.0625rem; margin: 8px 0 0; } .rv-related__item p { display: none; } .single-post #page .post-navigation .nav-links { grid-template-columns: 1fr; gap: 10px; } .single-post #page .post-navigation .nav-next { grid-column: 1; text-align: left; } .single-post #page .post-navigation .nav-next a { align-items: flex-start; } #page .site-main > .ast-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } :is(.archive, .search) #page .ast-archive-description { margin-top: var(--s-4); } :is(.archive, .search) #page .ast-archive-description > .rv-crumbs { margin-top: var(--s-5); } :is(.archive, .search) #page .ast-archive-description > .rv-archive__art { display: none; } /* first screen = topic name, description, facts */ :is(.archive, .search) #page .ast-archive-description > .rv-archive__facts { flex-wrap: nowrap; } .rv-archive__facts b { font-size: 1.5rem; } .rv-archive__facts span { font-size: 12px; } .rv-archive__facts div { padding-right: 14px; margin-right: 14px; } .rv-subnav > span { display: none; } :is(.archive, .search) #page .ast-archive-description > .rv-listhead { margin-top: var(--s-6); } .rv-pagenote { display: none; } #page .ast-pagination { justify-content: flex-start; } body.search #page .ast-archive-description > .rv-listhead { flex-direction: column; align-items: flex-start; gap: 8px; } #page .rv-404 { margin-top: var(--s-4); } .rv-404 > .rv-crumbs { margin-top: var(--s-5); } .rv-404__start { grid-template-columns: minmax(0, 1fr); } .rv-404__start li { font-size: 1.125rem; } .rv-404 > .rv-subnav > span { display: none; } } @media (max-width: 544px) { #masthead #ast-mobile-header .site-title { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } } /* ---------- 20. QA fixes from the preview review ---------- */ /* WordPress Pages (About, Privacy Policy, Terms of Use): same centred 720px column and serif title as articles. */ .page:not(.home) #page #content { padding-top: var(--s-7); } .page:not(.home) #page #content > .ast-container { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; } .page:not(.home) #page #primary { width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; float: none; border: 0; } .page:not(.home) #page .site-main > article.page { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } .page:not(.home) #page .entry-header { margin: 0 0 var(--s-6); padding: 0; text-align: left; } .page:not(.home) #page h1.entry-title { margin: 0; font: 500 var(--fs-3xl)/1.07 var(--f-serif); letter-spacing: -.022em; color: var(--ink); } /* Headings inside a post body are demoted to h2 by PHP; this only covers any h1 that remains. */ #page .entry-content h1 { margin: 2.4em 0 .6em; font: 500 var(--fs-2xl)/1.14 var(--f-serif); letter-spacing: -.015em; color: var(--ink); } @media (min-width: 545px) and (max-width: 921px) { /* 2-column archive grid with an odd number of cards: the last card spans the row instead of standing alone. */ #page .site-main > .ast-row > article:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; } } @media (max-width: 544px) { .page:not(.home) #page #content { padding-top: var(--s-6); } .page:not(.home) #page h1.entry-title { font-size: 2.125rem; line-height: 1.1; } }