/* Theme Name: Rivale Theme URI: https://rivale.io Description: Marketing theme for Rivale.io. Block theme (theme.json + HTML templates + native-block patterns). Dark-first with a light scheme, Inter + Plus Jakarta Sans + JetBrains Mono, no page-builder, no custom fields. Version: 5.0.0 Author: Rivale Author URI: https://rivale.io Text Domain: rivale Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* ============================================================ 0. Scheme. One token table (theme.json palette uses light-dark()). Default dark; the header toggle sets data-scheme="light" on . ============================================================ */ :root { color-scheme: dark; } [data-scheme="light"], .editor-styles-wrapper[data-scheme="light"] { color-scheme: light; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; overflow-x: clip; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } h2 strong, h1 strong, .wp-block-post-title strong { font-weight: 800; } strong, b { font-weight: 600; } mark.has-inline-color { background-color: transparent; } /* green as TEXT uses the darker light-scheme value (AA); fills keep the logo green */ .has-primary-color { color: var(--wp--preset--color--primary-text) !important; } :focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ============================================================ 1. Page structure: the two rails + section rules with ticks ============================================================ */ .wp-site-blocks { position: relative; } .wp-site-blocks::before, .wp-site-blocks::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--wp--preset--color--line); pointer-events: none; z-index: 0; } .wp-site-blocks::before { left: max(0px, calc(50% - var(--wp--custom--frame) / 2)); } .wp-site-blocks::after { right: max(0px, calc(50% - var(--wp--custom--frame) / 2)); } @media (max-width: 1260px) { .wp-site-blocks::before, .wp-site-blocks::after { display: none; } } .is-style-rv-section { position: relative; border-top: 1px solid var(--wp--preset--color--line); } .is-style-rv-section::before, .is-style-rv-section::after { content: ""; position: absolute; top: -6px; width: 11px; height: 11px; pointer-events: none; background: linear-gradient(var(--wp--preset--color--line-2), var(--wp--preset--color--line-2)) 5px 0 / 1px 11px no-repeat, linear-gradient(var(--wp--preset--color--line-2), var(--wp--preset--color--line-2)) 0 5px / 11px 1px no-repeat; } .is-style-rv-section::before { left: calc(50% - var(--wp--custom--frame) / 2 - 5px); } .is-style-rv-section::after { right: calc(50% - var(--wp--custom--frame) / 2 - 5px); } @media (max-width: 1260px) { .is-style-rv-section::before, .is-style-rv-section::after { display: none; } } .is-style-rv-section.rv-first { border-top: 0; } /* ============================================================ 2. Text styles (paragraph block styles) ============================================================ */ .is-style-rv-label { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 1.25rem; } .is-style-rv-label::before { content: "// "; color: var(--wp--preset--color--primary-text); } .is-style-rv-lede { font-family: var(--wp--preset--font-family--plus-jakarta-sans); font-weight: 500; font-size: var(--wp--preset--font-size--lg); line-height: 1.45; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast-2); max-width: 44rem; } .is-style-rv-fine { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); } .is-style-rv-pill { display: inline-block; font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--primary-text); background: var(--wp--preset--color--tint); padding: 0.45rem 0.6rem; border-radius: 999px; white-space: nowrap; } .is-style-rv-kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 500; color: var(--wp--preset--color--contrast-2); padding: 0.5rem 0.8rem 0.5rem 0.6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; background: var(--wp--preset--color--surface); } .is-style-rv-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px var(--wp--preset--color--tint); } .is-style-rv-price { font-family: var(--wp--preset--font-family--plus-jakarta-sans); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 1.25rem 0 0.35rem; } .is-style-rv-price small, .is-style-rv-price sub { font-family: var(--wp--preset--font-family--jetbrains-mono); font-weight: 400; font-size: 0.875rem; letter-spacing: 0; color: var(--wp--preset--color--muted); vertical-align: baseline; bottom: 0; } .is-style-rv-muted { color: var(--wp--preset--color--contrast-2); } .rv-article .is-style-rv-lede { max-width: none; } /* Heading block style: display (weight contrast, hero) */ .is-style-rv-display { font-weight: 500; letter-spacing: -0.045em; } .is-style-rv-display strong { font-weight: 800; } h1.is-style-rv-display { max-width: 20ch; } /* ============================================================ 3. Group styles ============================================================ */ /* ledger: direct child columns become hairline rows */ .is-style-rv-ledger { border-top: 1px solid var(--wp--preset--color--line); max-width: 1000px; } .is-style-rv-ledger > .wp-block-columns { border-bottom: 1px solid var(--wp--preset--color--line); padding: 1.9rem 0; margin: 0; gap: 1rem 3rem; } .is-style-rv-ledger h3 { font-size: 1.5rem; } .is-style-rv-ledger p { color: var(--wp--preset--color--contrast-2); font-size: 1.0625rem; line-height: 1.65; max-width: 56ch; } /* plan (pricing split) */ .is-style-rv-split { max-width: 1040px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); overflow: hidden; background: var(--wp--preset--color--surface); gap: 0; } .is-style-rv-split > .wp-block-column { padding: 2.25rem 2.25rem 2.5rem; position: relative; } .is-style-rv-split > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--line); } .is-style-rv-split > .wp-block-column.is-style-rv-hot { background: linear-gradient(180deg, var(--wp--preset--color--tint), transparent 40%); } .is-style-rv-split > .wp-block-column.is-style-rv-hot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wp--preset--color--primary); } .is-style-rv-split .is-style-rv-pill { position: absolute; top: 1.4rem; right: 1.4rem; } .is-style-rv-split .wp-block-buttons, .is-style-rv-split .wp-block-button, .is-style-rv-split .wp-block-button__link { width: 100%; } .is-style-rv-split .wp-block-button__link { text-align: center; } @media (max-width: 781px) { .is-style-rv-split > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); } } /* steps under the stream */ .is-style-rv-steps { border-top: 1px solid var(--wp--preset--color--line); gap: 0; } .is-style-rv-steps > .wp-block-column { padding: 1.75rem 1.5rem; } .is-style-rv-steps > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--line); } .is-style-rv-steps h3 { font-size: 1.375rem; margin-top: 0.75rem; } .is-style-rv-steps p { color: var(--wp--preset--color--contrast-2); font-size: 1rem; line-height: 1.6; } .is-style-rv-steps > .wp-block-column:last-child .is-style-rv-label { color: var(--wp--preset--color--primary-text); } @media (max-width: 781px) { .is-style-rv-steps > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); } } /* stream wrapper (how it works) */ .is-style-rv-stream { max-width: 1040px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--surface); overflow: hidden; margin-top: 3rem; } .is-style-rv-stream > * { margin: 0; } /* definition grid (features page) */ .is-style-rv-defs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3rem; max-width: 1040px; border-top: 1px solid var(--wp--preset--color--line); margin-top: 2.5rem; } .is-style-rv-defs > .wp-block-group { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--line); } .is-style-rv-defs > .wp-block-group > * + * { margin-top: 0.45rem; } @media (max-width: 781px) { .is-style-rv-defs { grid-template-columns: 1fr; } } .is-style-rv-defs h4 { display: flex; gap: 0.6rem; align-items: baseline; } .is-style-rv-defs h4::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--wp--preset--color--primary); flex: none; } .is-style-rv-defs p { font-size: 1rem; color: var(--wp--preset--color--contrast-2); line-height: 1.6; } /* feature row */ .is-style-rv-feature { padding-block: 3.5rem; gap: 3rem 4rem; } .is-style-rv-feature + .is-style-rv-feature { border-top: 1px solid var(--wp--preset--color--line); } .is-style-rv-feature h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-bottom: 1rem; } .is-style-rv-feature p { color: var(--wp--preset--color--contrast-2); font-size: 1.0625rem; line-height: 1.7; } /* note callout */ .is-style-rv-note { padding: 1rem 1.25rem; border: 1px solid var(--wp--preset--color--line); border-left: 2px solid var(--wp--preset--color--primary); border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0; background: var(--wp--preset--color--surface); } .is-style-rv-note p { color: var(--wp--preset--color--contrast-2); font-size: 1rem; } /* ============================================================ 4. Image frame (browser window) — core/image block style ============================================================ */ .wp-block-image.is-style-rv-frame { position: relative; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); overflow: hidden; padding-top: 36px; box-shadow: var(--wp--preset--shadow--soft); } .wp-block-image.is-style-rv-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 36px; border-bottom: 1px solid var(--wp--preset--color--line); background: radial-gradient(circle at 19px 18px, var(--wp--preset--color--line-2) 4.5px, transparent 5px), radial-gradient(circle at 34px 18px, var(--wp--preset--color--line-2) 4.5px, transparent 5px), radial-gradient(circle at 49px 18px, var(--wp--preset--color--line-2) 4.5px, transparent 5px), var(--wp--preset--color--surface-2); } .wp-block-image.is-style-rv-frame img { display: block; width: 100%; border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .wp-block-image.is-style-rv-frame img[src=""], .wp-block-image.is-style-rv-frame img:not([src]) { min-height: 320px; background: linear-gradient(160deg, var(--wp--preset--color--surface-2), var(--wp--preset--color--surface)); } .wp-block-image.is-style-rv-frame figcaption { padding: 0.75rem 1rem 1rem; margin: 0; text-align: left; } .wp-block-image.is-style-rv-frame figcaption strong { color: var(--wp--preset--color--contrast-2); font-weight: 500; } .wp-block-video.is-style-rv-frame { position: relative; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); overflow: hidden; padding-top: 36px; box-shadow: var(--wp--preset--shadow--soft); } .wp-block-video.is-style-rv-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 36px; border-bottom: 1px solid var(--wp--preset--color--line); background: radial-gradient(circle at 19px 18px, var(--wp--preset--color--line-2) 4.5px, transparent 5px), radial-gradient(circle at 34px 18px, var(--wp--preset--color--line-2) 4.5px, transparent 5px), radial-gradient(circle at 49px 18px, var(--wp--preset--color--line-2) 4.5px, transparent 5px), var(--wp--preset--color--surface-2); } .wp-block-video.is-style-rv-frame video { display: block; width: 100%; } /* hero visual bleeds past the right rail */ @media (min-width: 1001px) { .rv-bleed { margin-right: calc(50% - 50vw); margin-left: -1rem; } .rv-bleed .is-style-rv-frame { border-right: 0; border-radius: var(--wp--custom--radius--lg) 0 0 var(--wp--custom--radius--lg); } } /* ============================================================ 5. Lists, tables, details, buttons ============================================================ */ ul.is-style-rv-check { list-style: none; padding-left: 0; display: grid; gap: 0.6rem; } ul.is-style-rv-check li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 1rem; color: var(--wp--preset--color--contrast-2); } ul.is-style-rv-check li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--wp--preset--color--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fb35a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; } .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table th, .wp-block-table td { text-align: left; padding: 1rem 1.1rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; line-height: 1.5; } .wp-block-table thead th { font-family: var(--wp--preset--font-family--jetbrains-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); border-bottom: 1px solid var(--wp--preset--color--line-2); } .wp-block-table.is-style-rv-usecases td:first-child { font-family: var(--wp--preset--font-family--plus-jakarta-sans); font-weight: 600; width: 38%; letter-spacing: -0.01em; } .wp-block-table.is-style-rv-compare td:not(:first-child):not(:nth-child(2)), .wp-block-table.is-style-rv-compare th:not(:first-child):not(:nth-child(2)) { text-align: center; font-variant-numeric: tabular-nums; } .wp-block-table.is-style-rv-compare td:first-child { font-family: var(--wp--preset--font-family--jetbrains-mono); color: var(--wp--preset--color--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .wp-block-table.is-style-rv-compare, .wp-block-table.is-style-rv-usecases { max-width: 1040px; border-top: 1px solid var(--wp--preset--color--line-2); } .wp-block-table .has-text-color { font-weight: 600; } .wp-block-details { border-top: 1px solid var(--wp--preset--color--line); padding: 0; margin: 0; } .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); } .wp-block-details summary { cursor: pointer; list-style: none; padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem; } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: "+"; color: var(--wp--preset--color--primary); font: 400 1.5rem/1 var(--wp--preset--font-family--inter); } .wp-block-details[open] summary::after { content: "–"; } .wp-block-details > :not(summary) { font-family: var(--wp--preset--font-family--inter); font-weight: 400; font-size: 1.0625rem; color: var(--wp--preset--color--contrast-2); padding-bottom: 1.3rem; margin: 0; } .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--line-2); } .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--muted); background: var(--wp--preset--color--surface); box-shadow: none; } .wp-block-button__link { transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s, border-color .18s; } .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button.is-style-rv-small .wp-block-button__link { padding: 0.7rem 1.05rem; font-size: 0.875rem; } /* ============================================================ 6. Header / footer / nav / toggle ============================================================ */ .wp-block-template-part:has(> .rv-header) { position: sticky; top: 0; z-index: 20; } .rv-header { background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--wp--preset--color--line); } .rv-header .wp-block-site-logo img { height: 28px; width: auto; display: block; } [data-scheme="light"] .wp-block-site-logo img { content: url("assets/img/logo-black.png"); } .rv-toggle { width: 36px; height: 36px; border-radius: var(--wp--custom--radius--md); border: 1px solid var(--wp--preset--color--line); background: transparent; color: var(--wp--preset--color--muted); display: grid; place-items: center; cursor: pointer; padding: 0; } .rv-toggle:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--line-2); } .rv-toggle svg { width: 16px; height: 16px; } .wp-block-navigation .wp-block-navigation-item__content { padding: 0.25rem 0; } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); } .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); padding: 1.5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1rem; font-size: 1.25rem; } .rv-footer { border-top: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); } .rv-footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.8125rem; font-weight: 400; } .rv-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--contrast); } .rv-footer .rv-disclaimer { max-width: 720px; margin-inline: auto; text-align: center; font-size: 0.75rem; line-height: 1.6; } /* ============================================================ 7. Blog index, single, article content (block OR classic editor) ============================================================ */ .rv-tabs .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast-2); border-color: transparent; padding: 0.45rem 0.9rem; font-size: 0.875rem; font-weight: 500; font-family: var(--wp--preset--font-family--jetbrains-mono); } .rv-tabs .wp-block-button.is-active .wp-block-button__link { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--contrast); } .rv-tabs.wp-block-buttons { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); padding: 0.25rem; display: inline-flex; gap: 0.25rem; } .rv-tabs .wp-block-button__link:hover { transform: none; box-shadow: none; color: var(--wp--preset--color--contrast); } .rv-post { padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--line); display: grid; grid-template-columns: 160px 1fr auto; gap: 1rem; align-items: baseline; } .rv-post .wp-block-post-title { font-size: 1.375rem; margin: 0; letter-spacing: -0.02em; } .rv-post .wp-block-post-title a { color: var(--wp--preset--color--contrast); } .rv-post .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); text-decoration: none; } .rv-post .wp-block-post-terms a, .rv-meta .wp-block-post-terms a { color: var(--wp--preset--color--primary-text); background: var(--wp--preset--color--tint); padding: 0.3rem 0.45rem; border-radius: 5px; text-decoration: none; } @media (max-width: 781px) { .rv-post { grid-template-columns: 1fr; gap: 0.25rem; } } .wp-block-query-pagination { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.875rem; margin-top: 2rem; } .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding: 0.5rem 0.75rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm); color: var(--wp--preset--color--contrast-2); } .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--contrast); } .rv-meta { display: flex; gap: 0.75rem; align-items: center; } .rv-article .wp-block-post-title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.03em; line-height: 1.1; font-weight: 700; } /* article typography applies by tag, so classic-editor content matches block content */ .rv-article .wp-block-post-content > * + *, .rv-article .entry-content > * + * { margin-top: 1.15rem; } .rv-article .wp-block-post-content h2, .rv-article .entry-content h2 { font-size: 1.875rem; margin-top: 2.75rem; } .rv-article .wp-block-post-content h3, .rv-article .entry-content h3 { font-size: 1.375rem; margin-top: 2.25rem; } .rv-article .wp-block-post-content ul, .rv-article .wp-block-post-content ol { padding-left: 1.4rem; } .rv-article .wp-block-post-content li + li { margin-top: 0.35rem; } .rv-article .wp-block-post-content a:not(.wp-block-button__link) { color: var(--wp--preset--color--primary-text); } .rv-article .wp-block-post-content figure { margin: 2rem 0; } .rv-article .wp-block-post-content img { max-width: 100%; height: auto; border-radius: var(--wp--custom--radius--lg); } .rv-article .wp-block-post-content blockquote, .rv-article .entry-content blockquote { border-left: 2px solid var(--wp--preset--color--primary); padding: 0.35rem 0 0.35rem 1.5rem; margin: 2rem 0; font-family: var(--wp--preset--font-family--plus-jakarta-sans); font-weight: 500; font-size: 1.375rem; line-height: 1.4; letter-spacing: -0.015em; } .rv-article .wp-block-post-content blockquote cite { display: block; margin-top: 0.75rem; font: 400 0.8125rem/1 var(--wp--preset--font-family--jetbrains-mono); color: var(--wp--preset--color--muted); font-style: normal; } .rv-article .wp-block-post-content pre, .rv-article .entry-content pre { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); padding: 1.1rem 1.25rem; overflow-x: auto; font: 400 0.875rem/1.65 var(--wp--preset--font-family--jetbrains-mono); margin: 2rem 0; } .rv-article .wp-block-post-content pre code { background: none; border: 0; padding: 0; font: inherit; } .rv-article .wp-block-post-content code, .rv-article .entry-content code { font: 0.875em var(--wp--preset--font-family--jetbrains-mono); background: var(--wp--preset--color--surface-2); border: 1px solid var(--wp--preset--color--line); padding: 0.1em 0.4em; border-radius: 5px; } .rv-article .wp-block-post-content hr, .rv-article .entry-content hr { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 2.5rem 0; } .rv-article .wp-block-post-content table, .rv-article .entry-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; } .rv-article .entry-content th, .rv-article .entry-content td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; } .rv-article .entry-content thead th { font-family: var(--wp--preset--font-family--jetbrains-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); } .rv-article .wp-block-post-content figcaption, .rv-article .entry-content figcaption, .wp-element-caption { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); margin-top: 0.75rem; } .yoast-breadcrumbs, .rv-crumbs { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); margin-bottom: 1rem; } .yoast-breadcrumbs a { color: var(--wp--preset--color--muted); } .wp-block-post-navigation-link { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.875rem; } /* ============================================================ 8. The change → move stream (HTML block inside the how-it-works pattern) ============================================================ */ .rv-stream { position: relative; height: 148px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; font-family: var(--wp--preset--font-family--inter); } .rv-stream::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--wp--preset--color--line-2), var(--wp--preset--color--line-2) 62%, var(--wp--preset--color--primary)); } .rv-stream .zone { position: relative; height: 100%; } .rv-stream .zone + .zone { border-left: 1px dashed var(--wp--preset--color--line); } .rv-stream .chips { position: absolute; inset: 0; overflow: hidden; } .rv-stream .chip { position: absolute; top: 50%; left: 0; transform: translate(-110%, -50%); white-space: nowrap; font: 400 0.75rem/1 var(--wp--preset--font-family--jetbrains-mono); color: var(--wp--preset--color--contrast-2); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line-2); border-radius: 8px; padding: 0.55rem 0.7rem; display: inline-flex; gap: 0.5rem; align-items: center; box-shadow: 0 6px 20px -10px rgb(0 0 0 / .6); } .rv-stream .chip b { font-weight: 500; color: var(--wp--preset--color--contrast); } .rv-stream .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--muted); display: inline-block; } .rv-stream .chip.r i { background: var(--wp--preset--color--danger); } .rv-stream .chip.a i { background: var(--wp--preset--color--warning); } .rv-stream .chip.b i { background: var(--wp--preset--color--info); } @media (prefers-reduced-motion: no-preference) { .rv-stream .chip { animation: rv-drift 14s linear infinite; } .rv-stream .chip:nth-child(2) { animation-delay: -3.5s; top: 32%; } .rv-stream .chip:nth-child(3) { animation-delay: -7s; top: 68%; } .rv-stream .chip:nth-child(4) { animation-delay: -10.5s; } @keyframes rv-drift { from { transform: translate(-110%, -50%); } to { transform: translate(440px, -50%); } } } @media (prefers-reduced-motion: reduce) { .rv-stream .chip { transform: translate(6%, -50%); } .rv-stream .chip:nth-child(2) { transform: translate(40%, -50%); top: 30%; } .rv-stream .chip:nth-child(3) { transform: translate(70%, -50%); top: 70%; } .rv-stream .chip:nth-child(4) { display: none; } } .rv-stream .lens { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 180px; border-radius: 12px; border: 1px solid var(--wp--preset--color--line-2); background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent); backdrop-filter: blur(2px); padding: 0.7rem; text-align: center; font: 400 0.7rem/1.35 var(--wp--preset--font-family--jetbrains-mono); color: var(--wp--preset--color--contrast-2); } .rv-stream .lens b { display: block; font: 600 0.8125rem/1.2 var(--wp--preset--font-family--inter); color: var(--wp--preset--color--contrast); margin-bottom: 0.3rem; } .rv-stream .move { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86%, 300px); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--primary); border-radius: 12px; padding: 0.8rem 0.9rem; box-shadow: 0 0 0 6px var(--wp--preset--color--tint), 0 20px 50px -20px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); } .rv-stream .move .t { font: 500 0.7rem/1 var(--wp--preset--font-family--jetbrains-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--primary); display: flex; justify-content: space-between; margin-bottom: 0.45rem; } .rv-stream .move .t span { color: var(--wp--preset--color--muted); letter-spacing: 0; text-transform: none; } .rv-stream .move .h { font: 600 0.9375rem/1.3 var(--wp--preset--font-family--plus-jakarta-sans); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0; } .rv-stream .move p { font: 400 0.8rem/1.4 var(--wp--preset--font-family--inter); color: var(--wp--preset--color--contrast-2); margin: 0.3rem 0 0; max-width: none; } @media (max-width: 781px) { .rv-stream { display: none; } } /* ============================================================ 9. Hero load sequence (pattern classes, optional) ============================================================ */ @media (prefers-reduced-motion: no-preference) { .rv-rise { opacity: 0; transform: translateY(14px); animation: rv-rise .7s cubic-bezier(.2,.7,.2,1) forwards; } .rv-rise.d1 { animation-delay: .08s; } .rv-rise.d2 { animation-delay: .16s; } .rv-rise.d3 { animation-delay: .24s; } .rv-rise.d4 { animation-delay: .32s; } .rv-rise.d5 { animation-delay: .45s; } @keyframes rv-rise { to { opacity: 1; transform: none; } } } /* the editor must never hide content behind an animation */ .editor-styles-wrapper .rv-rise { opacity: 1; transform: none; animation: none; } .editor-styles-wrapper .rv-stream .chip { animation: none; transform: translate(6%, -50%); } /* CTA band text */ .is-style-rv-cta h2 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); letter-spacing: -0.035em; max-width: 16ch; margin-inline: auto; } .is-style-rv-cta p { margin-inline: auto; }