/* ========================================================================= repeatGROWTH — tokens and base The palette rule: exactly one saturated element per viewport. Lime means "click this", or one deliberate emphasis. Never both in the same view. ========================================================================= */ :root { /* Surfaces */ --rg-deep: #0C3427; --rg-deeper: #082620; --rg-light: #FBF9F3; --rg-band: #E8E2D1; --rg-white: #FFFFFF; /* Accent, used sparingly */ --rg-lime: #D6F25C; --rg-sage: #CBD5BA; /* Text */ --rg-ink: #101512; --rg-body: #2F332E; --rg-muted: #6A6A5E; --rg-line: #DED9CB; --rg-ondeep: #A9BFB4; --rg-ondeep-muted: #7A9186; /* Brand green ramp */ --rg-green-900: #0C3427; --rg-green-700: #13503C; --rg-green-500: #1C6B4F; --rg-green-300: #56A183; /* Type */ --rg-serif: "EB Garamond", Georgia, "Times New Roman", serif; --rg-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --rg-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Rhythm */ --rg-gutter: 20px; --rg-max: 1280px; --rg-pad-x: clamp(20px, 5vw, 80px); --rg-section: clamp(44px, 6vw, 80px); --rg-radius: 10px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--rg-light); color: var(--rg-body); font-family: var(--rg-sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* ---------- Type scale ---------------------------------------------- */ h1, h2, h3 { font-family: var(--rg-serif); font-weight: 500; color: var(--rg-ink); margin: 0 0 .5em; line-height: 1.12; letter-spacing: -0.01em; } h1 { font-size: clamp(30px, 4.4vw, 50px); } h2 { font-size: clamp(26px, 3vw, 38px); } h3 { font-size: clamp(20px, 2vw, 26px); } h4, h5, h6 { font-family: var(--rg-sans); font-weight: 600; color: var(--rg-ink); margin: 0 0 .4em; line-height: 1.32; } h4 { font-size: 19px; } p { margin: 0 0 1.1em; } /* The label style used above every section heading. */ .rg-eyebrow { font-family: var(--rg-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); margin: 0 0 14px; } .rg-mono { font-family: var(--rg-mono); } /* ---------- Layout --------------------------------------------------- */ .rg-section { padding: var(--rg-section) var(--rg-pad-x); } .rg-section--tight { padding-top: 0; } .rg-wrap { max-width: var(--rg-max); margin: 0 auto; } .rg-measure { max-width: 62ch; } .rg-measure--wide { max-width: 78ch; } .rg-grid { display: grid; gap: 22px; } .rg-grid--2 { grid-template-columns: repeat(2, 1fr); } .rg-grid--3 { grid-template-columns: repeat(3, 1fr); } .rg-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .rg-grid--3, .rg-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .rg-grid--2, .rg-grid--3, .rg-grid--4 { grid-template-columns: 1fr; } } /* ---------- Sections on dark ---------------------------------------- */ .rg-on-deep { background: var(--rg-deep); color: var(--rg-ondeep); } .rg-on-deep h1, .rg-on-deep h2, .rg-on-deep h3, .rg-on-deep h4 { color: var(--rg-light); } .rg-on-deep .rg-eyebrow { color: var(--rg-ondeep-muted); } .rg-on-band { background: var(--rg-band); } /* ---------- Buttons -------------------------------------------------- */ .rg-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--rg-sans); font-size: 15px; font-weight: 500; line-height: 1.4; padding: 15px 26px; border-radius: 6px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; } /* The only place lime appears by default. */ .rg-btn--primary { background: var(--rg-lime); color: var(--rg-deep); } .rg-btn--primary:hover { background: #c9e84a; } .rg-btn--dark { background: var(--rg-deep); color: var(--rg-light); } .rg-btn--dark:hover { background: var(--rg-green-700); } .rg-btn--ghost { background: transparent; color: var(--rg-ink); border-color: var(--rg-line); } .rg-on-deep .rg-btn--ghost { color: #C6D7CE; border-color: #2C574A; } /* ---------- Cards ---------------------------------------------------- */ .rg-card { background: var(--rg-white); border: 1px solid var(--rg-line); border-radius: var(--rg-radius); padding: 26px; } .rg-card--flat { background: #F3EFE4; } .rg-card--emphasis { border: 2px solid var(--rg-deep); } .rg-card--aside { border: 2px solid var(--rg-sage); } /* ---------- Chips ---------------------------------------------------- */ .rg-chip { display: inline-block; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 100px; background: var(--rg-sage); color: #2F3B2A; white-space: nowrap; } .rg-chip--outline { background: transparent; border: 1px solid var(--rg-line); color: var(--rg-muted); } .rg-chip--soon { background: transparent; border: 1px solid var(--rg-line); color: var(--rg-muted); } /* ---------- Win bar -------------------------------------------------- Wins are deep green against sage. Lime is not used here: it would make every surface card compete with the page's actual call to action. -------------------------------------------------------------------- */ .rg-winbar { display: flex; gap: 3px; margin: 4px 0 10px; } .rg-winbar span { flex: 1; height: 8px; border-radius: 2px; background: var(--rg-sage); } .rg-winbar span.is-won { background: var(--rg-deep); } .rg-on-deep .rg-winbar span { background: #2C574A; } .rg-on-deep .rg-winbar span.is-won { background: var(--rg-lime); } /* ---------- Stats ---------------------------------------------------- */ .rg-stat__value { font-family: var(--rg-mono); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; color: var(--rg-deep); } .rg-on-deep .rg-stat__value { color: var(--rg-light); } .rg-stat__value.is-emphasis { color: var(--rg-lime); } .rg-stat__label { font-family: var(--rg-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); margin-top: 4px; } .rg-on-deep .rg-stat__label { color: var(--rg-ondeep-muted); } /* ---------- Header / footer ------------------------------------------ */ .rg-header { background: var(--rg-light); padding: 22px var(--rg-pad-x); } .rg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: var(--rg-max); margin-inline: auto; } .rg-header__nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .rg-header__nav a { font-size: 14px; color: var(--rg-muted); text-decoration: none; } .rg-header__nav a:hover, .rg-header__nav .current-menu-item > a { color: var(--rg-ink); } .rg-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; } .rg-burger span { display: block; width: 22px; height: 2px; background: var(--rg-ink); border-radius: 1px; } .rg-burger span + span { margin-top: 5px; } @media (max-width: 860px) { .rg-header__nav { display: none; } .rg-header__nav.is-open { display: block; position: absolute; inset: 100% 0 auto; background: var(--rg-light); padding: 20px var(--rg-pad-x) 28px; border-bottom: 1px solid var(--rg-line); z-index: 20; } .rg-header__nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 14px; } .rg-burger { display: block; } .rg-header { position: relative; } } .rg-footer { background: var(--rg-deeper); color: var(--rg-ondeep-muted); padding: 44px var(--rg-pad-x); } .rg-footer a { color: var(--rg-ondeep-muted); text-decoration: none; font-size: 13px; } .rg-footer a:hover { color: var(--rg-light); } .rg-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: var(--rg-max); margin-inline: auto; } .rg-footer ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } @media (max-width: 620px) { .rg-footer__row { flex-direction: column; align-items: flex-start; } .rg-footer ul { flex-direction: column; gap: 10px; } } /* ---------- Accessibility -------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .rg-skip:focus { position: fixed; top: 10px; left: 10px; z-index: 999; background: var(--rg-lime); color: var(--rg-deep); padding: 12px 18px; border-radius: 6px; width: auto; height: auto; clip: auto; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--rg-green-500); outline-offset: 2px; } /* ========================================================================= Components ========================================================================= */ .rg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .rg-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; } .rg-chip--won { background: var(--rg-lime); } .rg-meta { margin-top: 26px; } .rg-meta__value { font-size: 16px; font-weight: 500; color: var(--rg-light); } .rg-section:not(.rg-on-deep) .rg-meta__value { color: var(--rg-ink); } .rg-note { font-size: 14px; color: var(--rg-muted); } .rg-on-deep .rg-note { color: var(--rg-ondeep-muted); } /* Logos: optically balanced by capping height, not by matching widths. */ .rg-logos { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .rg-logos img { max-height: 34px; width: auto; opacity: .62; filter: grayscale(1); } .rg-statbar { margin-top: 34px; } /* Hypothesis: each part gets a rule rather than a box, so it reads as one argument in three moves rather than three separate claims. */ .rg-hyp { display: grid; gap: 20px; max-width: 74ch; } .rg-hyp__item { border-left: 2px solid var(--rg-line); padding-left: 18px; } .rg-hyp__item p { font-family: var(--rg-serif); font-size: 21px; line-height: 1.42; color: var(--rg-ink); margin: 6px 0 0; } /* Control vs variation */ .rg-compare { display: grid; gap: 22px; margin-top: 20px; } .rg-schematic { margin: 0; background: var(--rg-white); border: 1px solid var(--rg-line); border-radius: var(--rg-radius); padding: 14px; } .rg-schematic__label { font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); margin-top: 10px; } .rg-sch-bg { fill: #FAF8F2; } .rg-sch-panel { fill: #F2EEE3; } .rg-sch-dim { fill: #EFEBE0; } .rg-sch-block { fill: #E7E3D7; } .rg-sch-field { fill: #FFFFFF; stroke: #DCD7C8; stroke-width: 1; } .rg-sch-line { fill: #DCD7C8; } .rg-sch-line--strong { fill: #C3BCA8; } .rg-sch-cta { fill: #CFCABA; } .rg-sch-highlight { fill: none; stroke: var(--rg-lime); stroke-width: 3; } .rg-difflist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .rg-difflist li { position: relative; padding-left: 20px; font-weight: 500; color: var(--rg-ink); } .rg-difflist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--rg-lime); } .rg-chain { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; } .rg-chain h4 { margin: 6px 0 4px; } .rg-chain a { text-decoration: none; } .rg-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; } .rg-cta h2 { margin: 0; } /* Cards in listings */ .rg-test-card { display: flex; flex-direction: column; gap: 9px; } .rg-test-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rg-test-card__title { font-family: var(--rg-sans); font-size: 19px; font-weight: 600; line-height: 1.32; margin: 0; } .rg-test-card__title a { text-decoration: none; } .rg-test-card__result { font-weight: 500; margin: 0; color: var(--rg-muted); } .rg-test-card__result.is-won { color: var(--rg-deep); } .rg-test-card__link { font-size: 14px; font-weight: 500; color: var(--rg-ink); text-decoration: none; margin-top: auto; } .rg-surface-card h3 { font-family: var(--rg-sans); font-size: 20px; font-weight: 600; } .rg-surface-card h3 a { text-decoration: none; } .rg-thinlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; } .rg-thinlist li { position: relative; padding-left: 16px; font-size: 15px; } .rg-thinlist li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--rg-deep); } .rg-thinlist a { text-decoration: none; } /* Article evidence tiers, ranked by visual weight: 1 card, 2 filled block, 3 plain text with a rule. */ .rg-keyfinding p { font-size: 19px; color: var(--rg-light); } .rg-evidence { margin: 26px 0; } .rg-evidence__result { font-weight: 500; color: var(--rg-ink); } .rg-pattern { background: var(--rg-band); border-radius: var(--rg-radius); margin: 26px 0; } .rg-pattern__inner { padding: 26px 28px 20px; } .rg-pattern__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .rg-pattern h3 { font-size: 24px; margin-bottom: .4em; } .rg-pattern__basis { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 16px 28px 22px; border-top: 1px solid #D8D0BE; } .rg-pattern__basis p { margin: 3px 0 0; font-weight: 500; color: var(--rg-ink); } @media (max-width: 620px) { .rg-pattern__basis { grid-template-columns: 1fr; } } .rg-external { margin: 26px 0; padding-left: 20px; border-left: 2px solid var(--rg-line); } .rg-external p { font-size: 16px; } .rg-external__ours { font-weight: 500; color: var(--rg-ink); } /* Steps */ .rg-steps { list-style: none; padding: 0; margin: 20px 0 0; } .rg-steps li { display: flex; gap: 24px; padding: 22px 0; border-top: 1px solid var(--rg-line); } .rg-steps__n { color: #A79C86; font-size: 13px; min-width: 40px; } /* Evaluation page: copy left, form right. On mobile the form comes first, because otherwise it sits three screens below the fold. */ .rg-eval { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: start; } .rg-eval__block { margin-bottom: 34px; } .rg-fact { font-size: 20px; font-weight: 500; color: var(--rg-lime); } @media (max-width: 900px) { .rg-eval { grid-template-columns: 1fr; gap: 34px; } .rg-eval__form { order: -1; } } .rg-bullets { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; } .rg-bullets li { position: relative; padding-left: 20px; } .rg-bullets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--rg-deep); } /* Pricing */ .rg-price { font-family: var(--rg-serif); font-size: 26px; color: var(--rg-deep); margin: 6px 0 10px; } .rg-included { border-top: 3px solid var(--rg-deep); padding-top: 12px; } .rg-consult { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .rg-consult__action { text-align: right; } .rg-consult__action .rg-price { margin-bottom: 10px; } /* FAQ */ .rg-faq details { border-top: 1px solid var(--rg-line); padding: 18px 0; } .rg-faq summary { cursor: pointer; font-size: 17px; color: var(--rg-ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; } .rg-faq summary::-webkit-details-marker { display: none; } .rg-faq summary::after { content: "+"; color: #A79C86; font-size: 20px; line-height: 1; } .rg-faq details[open] summary::after { content: "\2013"; } .rg-faq details > div { padding-top: 10px; color: var(--rg-muted); } /* Search results: a fixed tag column so every title starts at the same x regardless of whether the row is a test or an article. */ .rg-results { list-style: none; padding: 0; margin: 0; } .rg-result { display: flex; gap: 26px; padding: 24px 0; border-top: 1px solid var(--rg-line); align-items: flex-start; } .rg-result__tag { flex: 0 0 76px; } .rg-result h3 { font-family: var(--rg-sans); font-size: 20px; font-weight: 600; margin: 0 0 6px; } .rg-result h3 a { text-decoration: none; } .rg-result p { margin: 0; color: var(--rg-muted); font-size: 15px; } @media (max-width: 560px) { .rg-result { flex-direction: column; gap: 10px; } } /* Prose */ .rg-prose h2 { margin-top: 1.6em; } .rg-prose ul, .rg-prose ol { padding-left: 1.2em; } .rg-prose li { margin-bottom: .5em; } .rg-prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--rg-lime); font-family: var(--rg-serif); font-size: 22px; line-height: 1.4; color: var(--rg-ink); } /* Pagination */ .pagination, .nav-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; } .page-numbers { display: inline-block; padding: 9px 15px; border: 1px solid var(--rg-line); border-radius: 6px; text-decoration: none; font-size: 14px; color: var(--rg-muted); } .page-numbers.current { background: var(--rg-deep); border-color: var(--rg-deep); color: var(--rg-light); } /* Forms */ .rg-card input[type="text"], .rg-card input[type="email"], .rg-card input[type="tel"], .rg-card input[type="url"], .rg-card select, .rg-card textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--rg-line); border-radius: 6px; background: #FCFBF7; font-family: var(--rg-sans); font-size: 15px; } .rg-card button[type="submit"], .rg-card input[type="submit"] { background: var(--rg-lime); color: var(--rg-deep); border: 0; padding: 15px 24px; border-radius: 6px; font-family: var(--rg-sans); font-size: 16px; font-weight: 500; cursor: pointer; width: 100%; } /* Logo: a link, but not styled like body copy. */ .rg-header__logo { display: flex; align-items: center; flex: 0 0 auto; } .rg-header__logo .custom-logo-link { display: block; line-height: 0; } .rg-logo-text { font-family: var(--rg-sans); font-weight: 600; font-size: 20px; color: var(--rg-ink); letter-spacing: -0.01em; text-decoration: none; } .rg-footer__row > a { text-decoration: none; font-family: var(--rg-sans); font-weight: 600; font-size: 18px; color: var(--rg-light); } /* Headings must not pick up an italic face. If only an italic file is registered the browser will still use its glyphs, but this stops any synthetic slant on top of it. */ h1, h2, h3, .rg-price, .rg-hyp__item p { font-style: normal; font-synthesis: none; } /* Empty sections should not leave a hole while fields are unfilled. */ .rg-section:empty { display: none; } /* Hero texture: right two thirds, bottom aligned, low enough that it reads as surface rather than content. */ .rg-hero { position: relative; overflow: hidden; } .rg-hero > .rg-wrap { position: relative; z-index: 1; } /* Constrained to the same measure as .rg-wrap so the bars line up with the content grid rather than running to the viewport edge. */ .rg-texture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: min( calc(100% - (var(--rg-pad-x) * 2)), var(--rg-max) ); height: 58%; pointer-events: none; z-index: 0; display: flex; justify-content: flex-end; } .rg-texture svg { width: 66%; } .rg-texture rect { fill: var(--rg-light); opacity: .06; } @media (max-width: 860px) { /* Narrow screens have no room for it beside the copy, so it becomes a thin band along the bottom instead of sitting behind the buttons. */ .rg-texture { height: 30%; } .rg-texture svg { width: 100%; } } /* The stat bar takes however many stats it is given. A fixed 4 column grid wraps the fifth onto its own row and reads as an error. */ .rg-statbar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px 20px; } /* Logos: centred with a bounded gap rather than pushed to both edges. On a wide screen space-between separates them so far they stop reading as a set. */ .rg-logos { justify-content: center; gap: clamp(28px, 4vw, 64px); max-width: 1000px; margin: 0 auto; } .rg-logos img { max-height: 30px; opacity: .78; } /* Same treatment for the fit bar and meta rows, which can hold 4 or 5 items. */ .rg-section .rg-grid--4:has(> :nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* ========================================================================= Layout corrections ========================================================================= */ /* Header and footer: background spans the viewport, contents stop at the same measure as every section. Constraining the element itself insets the band. */ /* Texture: 60% of the content measure, pinned to its right edge. The earlier full-width svg rule was winning on source order. */ .rg-texture { display: block; } .rg-texture svg { width: 60%; height: 100%; display: block; margin-left: auto; } /* Logos sit on the same left edge as the stats below them, with spacing tuned rather than spread. Centring them broke the alignment with the stat bar. */ .rg-logos { justify-content: flex-start; gap: clamp(24px, 3.4vw, 52px); max-width: none; margin: 0; } @media (max-width: 860px) { .rg-texture svg { width: 100%; } .rg-logos { gap: 24px; row-gap: 18px; } } /* Hero copy stops short of the texture. At 40% this fought the measure classes and broke the headline onto 3 lines, so the reserve is smaller and the measure classes do the rest. */ .rg-hero > .rg-wrap { padding-right: 28%; } /* The headline gets a wider measure than body copy: a serif display line reads better at 2 long lines than 3 short ones. */ .rg-hero h1 { max-width: 20ch; } /* Buttons sit side by side wherever there is room for them. */ .rg-hero__actions { flex-wrap: nowrap; align-items: center; } .rg-hero__actions .rg-btn { white-space: nowrap; } @media (max-width: 1100px) { .rg-hero > .rg-wrap { padding-right: 18%; } } @media (max-width: 860px) { .rg-hero > .rg-wrap { padding-right: 0; } .rg-hero h1 { max-width: none; } .rg-hero__actions { flex-wrap: wrap; } } @media (max-width: 460px) { .rg-hero__actions { flex-direction: column; align-items: stretch; } .rg-hero__actions .rg-btn { text-align: center; } } /* ---------- Services hub ---------------------------------------------- */ .rg-svc { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin-top: 26px; } @media (max-width: 760px) { .rg-svc { grid-template-columns: 1fr; } } .rg-svc__card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .rg-svc__card h3 { font-family: var(--rg-sans); font-size: 21px; font-weight: 600; margin: 0; } .rg-svc__card .rg-note { margin: 0; } .rg-svc__card .rg-test-card__link { margin-top: 6px; } /* The two money pages lead. Everything else is a supporting service. */ .rg-svc--primary { grid-template-columns: repeat(2, 1fr); } .rg-svc--primary .rg-svc__card { border-width: 2px; border-color: var(--rg-deep); } .rg-svc--primary h3 { font-family: var(--rg-serif); font-weight: 500; font-size: 26px; } .rg-svc--support { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .rg-svc--support { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .rg-svc--support { grid-template-columns: 1fr; } } /* ---------- Logo ------------------------------------------------------ */ .rg-header__logo img, .custom-logo { max-height: 26px; width: auto; } .rg-footer__logo { text-decoration: none; display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 240px; } /* Belt and braces: whatever ends up inside the footer logo link is capped. An uncapped mark at its natural size dwarfs everything around it. */ .rg-footer__logo img, .rg-footer__logo-img, .rg-footer img { max-height: 26px; width: auto; height: auto; max-width: 100%; } .rg-footer__logo .rg-logo-text { color: var(--rg-light); font-size: 18px; } @media (max-width: 620px) { .rg-footer__logo img, .rg-footer__logo-img, .rg-footer img { max-height: 22px; } } @media (max-width: 620px) { .rg-header__logo img, .custom-logo { max-height: 22px; } } /* ---------- The analytics gap ----------------------------------------- */ .rg-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 10px; align-items: start; } @media (max-width: 900px) { .rg-gap { grid-template-columns: 1fr; gap: 26px; } } .rg-gap__problem p { font-size: 19px; line-height: 1.6; } .rg-gap__emphasis { color: var(--rg-light); font-weight: 500; } .rg-gap__resolution { border: 1px solid #2C574A; border-radius: var(--rg-radius); padding: 24px 26px; } .rg-gap__resolution p { margin: 8px 0 0; font-size: 16px; } /* ---------- The analytics gap ----------------------------------------- */ .rg-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 10px; align-items: start; } @media (max-width: 900px) { .rg-gap { grid-template-columns: 1fr; gap: 26px; } } .rg-gap__problem p { font-size: 19px; line-height: 1.6; } .rg-gap__emphasis { color: var(--rg-light); font-weight: 500; } .rg-gap__resolution { border: 1px solid #2C574A; border-radius: var(--rg-radius); padding: 24px 26px; } .rg-gap__resolution p { margin: 8px 0 0; font-size: 16px; } /* ---------- The analytics gap ----------------------------------------- */ .rg-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 10px; align-items: start; } @media (max-width: 900px) { .rg-gap { grid-template-columns: 1fr; gap: 26px; } } .rg-gap__problem p { font-size: 19px; line-height: 1.6; } .rg-gap__emphasis { color: var(--rg-light); font-weight: 500; } .rg-gap__resolution { border: 1px solid #2C574A; border-radius: var(--rg-radius); padding: 24px 26px; } .rg-gap__resolution p { margin: 8px 0 0; font-size: 16px; } /* ---------- The analytics gap ----------------------------------------- */ .rg-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 10px; align-items: start; } @media (max-width: 900px) { .rg-gap { grid-template-columns: 1fr; gap: 26px; } } .rg-gap__problem p { font-size: 19px; line-height: 1.6; } .rg-gap__emphasis { color: var(--rg-light); font-weight: 500; } .rg-gap__resolution { border: 1px solid #2C574A; border-radius: var(--rg-radius); padding: 24px 26px; } .rg-gap__resolution p { margin: 8px 0 0; font-size: 16px; } /* ---------- Result cards ---------------------------------------------- Bars are drawn from 2 numbers rather than an uploaded image, so a client can correct a figure without anyone opening a design tool. -------------------------------------------------------------------- */ .rg-result { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .rg-result__head { padding: 26px 26px 18px; display: grid; gap: 8px; } .rg-result__head h4 { margin: 0; } /* The plot spans the full card. Letting it size to its contents left each card's chart sitting at a different offset. */ .rg-result__plot { background: #FAF8F2; padding: 20px 26px 0; width: 100%; box-sizing: border-box; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); } /* Bars share the width equally rather than taking a fixed size, so the pair is balanced at any card width. */ .rg-result__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: end; height: 128px; } .rg-result__bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .rg-result__bar span { display: block; width: 100%; background: var(--rg-sage); border-radius: 3px 3px 0 0; min-height: 4px; } .rg-result__bar.is-variation span { background: var(--rg-deep); } .rg-result__bar em { font-family: var(--rg-mono); font-style: normal; font-size: 9px; letter-spacing: .06em; color: var(--rg-muted); padding-top: 9px; border-top: 1px solid #E2DCCC; margin-top: 0; } .rg-result__figure { padding: 22px 26px 26px; margin-top: auto; } .rg-result__figure .rg-stat__value { color: var(--rg-deep); } /* ---------- Testimonial ------------------------------------------------ */ .rg-quote { margin: 0; } .rg-quote p { font-family: var(--rg-serif); font-size: clamp(24px, 2.6vw, 33px); line-height: 1.32; color: var(--rg-ink); margin: 0 0 22px; } .rg-quote__by { display: flex; align-items: center; gap: 14px; } .rg-quote__by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .rg-quote__by span { display: grid; gap: 1px; } .rg-quote__by strong { font-size: 15px; font-weight: 600; color: var(--rg-ink); } .rg-quote__by em { font-style: normal; font-size: 14px; color: var(--rg-muted); } /* ---------- Founder ---------------------------------------------------- */ .rg-founder { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; } @media (max-width: 800px) { .rg-founder { grid-template-columns: 1fr; gap: 26px; } } .rg-founder__photo img { width: 100%; border-radius: var(--rg-radius); } .rg-founder__copy p { max-width: 62ch; } .rg-founder__by { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; } .rg-founder__by strong { font-size: 15px; font-weight: 600; color: var(--rg-ink); } .rg-founder__by span { font-size: 14px; color: var(--rg-muted); } /* ---------- Result cards: centred bars, payback line ------------------ */ .rg-result__payback { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rg-line); font-size: 14px; font-weight: 500; color: var(--rg-deep); } /* ---------- Named method ---------------------------------------------- A numbered ladder rather than 3 equal cards. The sequence is the point, and cards side by side read as options instead of steps. -------------------------------------------------------------------- */ .rg-method { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: step; } .rg-method__step { display: grid; grid-template-columns: 84px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid #D8D0BE; align-items: start; } .rg-method__step:last-child { border-bottom: 1px solid #D8D0BE; } .rg-method__n { font-family: var(--rg-mono); font-size: 34px; line-height: 1; color: #B6AB94; } .rg-method__step h4 { margin: 0 0 6px; font-size: 21px; } .rg-method__step p { margin: 0; max-width: 62ch; } @media (max-width: 620px) { .rg-method__step { grid-template-columns: 1fr; gap: 8px; } .rg-method__n { font-size: 24px; } } /* ---------- Fit, two columns ------------------------------------------ */ .rg-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; } @media (max-width: 760px) { .rg-fit { grid-template-columns: 1fr; } } .rg-fit__col { background: var(--rg-white); border: 1px solid var(--rg-line); border-radius: var(--rg-radius); padding: 28px; } /* The fit column leads. The not-a-fit column is honest, not equally weighted. */ .rg-fit__col h4 { margin: 0 0 14px; font-size: 19px; } .rg-fit__col--no { background: #F3EFE4; border-color: #E4DECE; } .rg-fit__col--no h4 { color: var(--rg-muted); } .rg-bullets--no li::before { background: #C3BCA8; } /* ---------- Result cards ---------------------------------------------- Horizontal bars, control above variation, with the increase drawn as its own segment. Two vertical bars made the reader estimate a difference; this shows the difference directly, which is what the card is about. All 3 cards share one scale, so the deep segments are comparable to each other even though the metrics are not. -------------------------------------------------------------------- */ .rg-result { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .rg-result__head { padding: 26px 26px 20px; display: grid; gap: 8px; } .rg-result__head h4 { margin: 0; } .rg-result__plot { background: #FAF8F2; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); padding: 22px 26px; display: grid; gap: 14px; width: 100%; box-sizing: border-box; } .rg-result__row { display: grid; gap: 7px; } .rg-result__tick { font-family: var(--rg-mono); font-size: 9px; letter-spacing: .08em; color: var(--rg-muted); text-transform: uppercase; } .rg-result__track { display: flex; height: 14px; width: 100%; } .rg-result__base { display: block; height: 100%; background: var(--rg-sage); border-radius: 2px 0 0 2px; } .rg-result__delta { display: block; height: 100%; background: var(--rg-deep); border-radius: 0 2px 2px 0; min-width: 3px; } /* A control bar with no increase beside it still needs both corners. */ .rg-result__row:first-child .rg-result__base { border-radius: 2px; } .rg-result__figure { padding: 22px 26px 26px; margin-top: auto; } .rg-result__figure .rg-stat__value { color: var(--rg-deep); } .rg-result__payback { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rg-line); font-size: 14px; font-weight: 500; color: var(--rg-deep); } /* Casing is presentation, not content. Labels are typed in sentence case and uppercased here, so the copy stays readable in the editor and screen readers do not spell out every word letter by letter. */ .rg-chip, .rg-steps__n, .rg-result__tick, .rg-stat__label, .rg-eyebrow { text-transform: uppercase; } /* ---------- Result cards ---------------------------------------------- Vertical bars, centred in the card. Each card scales against its own two numbers: these are different tests on different sites measuring different things, so a shared scale would imply a comparison that does not exist. -------------------------------------------------------------------- */ .rg-result { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .rg-result__head { padding: 26px 26px 20px; display: grid; gap: 8px; } .rg-result__head h4 { margin: 0; } .rg-result__plot { background: #FAF8F2; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); padding: 24px 26px 20px; width: 100%; box-sizing: border-box; display: flex; justify-content: center; } .rg-result__bars { display: flex; align-items: flex-end; justify-content: center; gap: 40px; height: 140px; } .rg-result__bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; width: 86px; } .rg-result__bar span { display: block; width: 100%; } /* One element holds the whole bar. Its children fill it, so the bar grows as a single piece instead of a base and a cap moving independently. */ .rg-result__stack { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 3px 3px 0 0; min-height: 4px; } .rg-result__base { background: var(--rg-sage); flex: 1 1 auto; } /* The increase sits on top of the control, so its height is the lift rather than something the reader has to work out by comparing two bars. */ .rg-result__delta { background: var(--rg-deep); min-height: 3px; } /* A losing test draws a shorter bar in the control colour, not a dark cap. */ .rg-result__bar.is-drop .rg-result__base { background: #C3BCA8; } .rg-result__bar em { font-family: var(--rg-mono); font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); width: 100%; text-align: center; padding-top: 9px; margin-top: 8px; border-top: 1px solid #E2DCCC; } .rg-result__figure { padding: 22px 26px 26px; margin-top: auto; } .rg-result__figure .rg-stat__value { color: var(--rg-deep); } .rg-result__payback { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rg-line); font-size: 14px; font-weight: 500; color: var(--rg-deep); } @media (max-width: 1000px) { .rg-result__bars { gap: 28px; } .rg-result__bar { width: 70px; } } /* ---------- Result cards: alignment, motion, hover -------------------- */ /* Subgrid keeps the head, plot and figure rows aligned across all 3 cards, so a 2 line title on one card does not push its chart out of step with the others. Browsers without subgrid fall back to independent cards. */ .rg-results { grid-template-rows: auto auto auto; align-items: stretch; } @supports (grid-template-rows: subgrid) { .rg-results .rg-result { grid-row: span 3; display: grid; grid-template-rows: subgrid; } } .rg-result { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .rg-result:hover { border-color: var(--rg-green-300); box-shadow: 0 6px 20px rgba(12, 52, 39, .09); transform: translateY(-2px); } .rg-result:hover .rg-result__delta { background: var(--rg-green-700); } /* Bars grow from the baseline when the section scrolls into view. Scaling rather than animating height keeps it off the layout path, so it stays smooth on a long page. */ .rg-result__stack { transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.22, .61, .36, 1); } .rg-result.is-visible .rg-result__stack { transform: scaleY(1); } /* The variation follows the control, so the eye reads the increase second. */ .rg-result.is-visible .rg-result__bar.is-variation .rg-result__stack { transition-delay: .18s; } /* Stagger across the row so it reads as 3 results, not one block. */ .rg-results .rg-result:nth-child(2) .rg-result__stack { transition-delay: .10s; } .rg-results .rg-result:nth-child(2) .is-variation .rg-result__stack { transition-delay: .28s; } .rg-results .rg-result:nth-child(3) .rg-result__stack { transition-delay: .20s; } .rg-results .rg-result:nth-child(3) .is-variation .rg-result__stack { transition-delay: .38s; } /* No script, or motion turned down: bars are simply drawn at full height. */ .no-js .rg-result__stack { transform: scaleY(1); } @media (prefers-reduced-motion: reduce) { .rg-result, .rg-result__stack { transition: none; } .rg-result__stack { transform: scaleY(1); } .rg-result:hover { transform: none; } } /* ---------- Inline call to action ------------------------------------- Sits inside the offer section rather than in its own band, so the cards and the ask read as one block. -------------------------------------------------------------------- */ .rg-offer__cta { margin-top: 34px; } .rg-cta--inline { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid #D8D0BE; } .rg-cta--inline h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); } @media (max-width: 620px) { .rg-cta--inline { flex-direction: column; align-items: flex-start; } .rg-cta--inline .rg-btn { width: 100%; text-align: center; } } /* ========================================================================= One-time motion Every animation here plays once, is skipped under reduced motion, and is drawn at its final state if scripts fail. Motion is reserved for places where it says something; the result charts stay the moment people remember. ========================================================================= */ /* ---- Hero texture rises on load ------------------------------------- The same ascending bar motif as the result charts, so the first thing a visitor sees is uneven growth, and the charts further down read as a callback rather than a new idea. */ @keyframes rg-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } .home .rg-texture rect { transform-box: fill-box; transform-origin: 50% 100%; animation: rg-rise .9s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 150ms); } /* ---- Stat bar --------------------------------------------------------- Values count up from zero in script. Tabular figures stop the row from jittering as digit widths change. */ .rg-statbar .rg-stat__value { font-variant-numeric: tabular-nums; } /* ---- Method ladder reveals in order ----------------------------------- The motion says it is a sequence, which is why it is a ladder not cards. */ .rg-method__step { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1); } .rg-method.is-visible .rg-method__step { opacity: 1; transform: none; } .rg-method.is-visible .rg-method__step:nth-child(2) { transition-delay: .14s; } .rg-method.is-visible .rg-method__step:nth-child(3) { transition-delay: .28s; } .rg-method.is-visible .rg-method__step:nth-child(4) { transition-delay: .42s; } .rg-method.is-visible .rg-method__step:nth-child(5) { transition-delay: .56s; } /* ---- Fallbacks -------------------------------------------------------- */ .no-js .rg-method__step { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .home .rg-texture rect { animation: none; } .rg-method__step { opacity: 1; transform: none; transition: none; } } /* ========================================================================= Button hover: a ring that separates from the button An outline with an offset gives a transparent gap between button and ring, so it works on cream and on deep green without matching the background. ========================================================================= */ .rg-btn { outline: 2px solid transparent; outline-offset: 0; transition: background .15s ease, border-color .15s ease, outline-color .18s ease, outline-offset .18s ease; } .rg-btn:hover { outline-offset: 3px; } .rg-btn--primary:hover { background: #c9e84a; outline-color: rgba(12, 52, 39, .28); } .rg-on-deep .rg-btn--primary:hover { outline-color: var(--rg-lime); } .rg-btn--dark:hover { outline-color: rgba(12, 52, 39, .22); } .rg-btn--ghost:hover { border-color: currentColor; outline-color: currentColor; } /* A pressed button tightens the ring, which reads as a click. */ .rg-btn:active { outline-offset: 1px; } /* The site focus ring uses :where(), which has no specificity, so the outline above would erase it. Buttons get their own, so keyboard users always see where they are. */ .rg-btn:focus-visible { outline: 2px solid var(--rg-green-500); outline-offset: 3px; } .rg-on-deep .rg-btn:focus-visible { outline-color: var(--rg-lime); } @media (prefers-reduced-motion: reduce) { .rg-btn { transition: background .15s ease, border-color .15s ease; } } /* ---------- Hero note -------------------------------------------------- What the free evaluation actually is, right where someone decides whether to click. Quieter than the subcopy so it reads as detail, not a pitch. */ .rg-hero__note { margin: 16px 0 0; max-width: 52ch; font-size: 14px; line-height: 1.55; color: var(--rg-ondeep-muted); } /* ---------- What we publish -------------------------------------------- Three outcomes, all published. The losses column is the one no competitor shows, so it carries the only accent in the section. */ .rg-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 32px; background: #2C574A; border: 1px solid #2C574A; border-radius: var(--rg-radius); overflow: hidden; } @media (max-width: 760px) { .rg-outcomes { grid-template-columns: 1fr; } } .rg-outcome { background: var(--rg-deep); padding: 26px 26px 28px; } .rg-outcome h3 { font-family: var(--rg-sans); font-size: 20px; font-weight: 600; color: var(--rg-light); margin: 12px 0 8px; } .rg-outcome p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rg-ondeep); } .rg-outcome__mark { display: block; width: 28px; height: 4px; border-radius: 2px; background: #3E6B5B; } .rg-outcome--1 .rg-outcome__mark { background: var(--rg-sage); } .rg-outcome--2 .rg-outcome__mark { background: var(--rg-lime); } .rg-outcome--2 { background: #0F3B2D; } .rg-outcome--3 .rg-outcome__mark { background: var(--rg-green-300); } .rg-publish__link { margin: 26px 0 0; } /* ---------- Result cards: relative performance chart (1.10.0) --------- Control is the same height on every card and each Variation is drawn at Control x (1 + lift), so all 3 charts share one true scale. Bar and gap widths live in variables so the connector can find the bar centres. */ .rg-result__plot { display: block; padding: 20px 26px 0; } .rg-result__plot-label { display: flex; align-items: center; gap: 6px; font-family: var(--rg-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .rg-result__info { position: relative; display: inline-flex; color: var(--rg-muted); cursor: help; border-radius: 50%; } .rg-result__info:focus-visible { outline: 2px solid var(--rg-green-700); outline-offset: 2px; } .rg-result__info::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: -8px; width: 220px; padding: 10px 12px; background: var(--rg-deep); color: #fff; font-family: var(--rg-sans, inherit); font-size: 12px; line-height: 1.45; letter-spacing: 0; text-transform: none; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 5; } .rg-result__info:hover::after, .rg-result__info:focus::after { opacity: 1; visibility: visible; } .rg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; } .rg-result__bars { --bar-w: 86px; --bar-gap: 44px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 0; width: calc(var(--bar-w) * 2 + var(--bar-gap)); height: 180px; margin: 22px auto 40px; } /* One continuous baseline under both bars. */ .rg-result__bars::after { content: ""; position: absolute; left: -28px; right: -28px; bottom: 0; height: 1px; background: #D8D0BE; } .rg-result__bar { position: relative; width: var(--bar-w); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .rg-result__stack { display: flex; } .rg-result__base { flex: 1 1 auto; background: var(--rg-sage); } .rg-result__bar.is-variation .rg-result__base { background: var(--rg-deep); } .rg-result__bar.is-drop .rg-result__base { background: #C3BCA8; } .rg-result:hover .rg-result__bar.is-variation:not(.is-drop) .rg-result__base { background: var(--rg-green-700); } /* Labels hang below the baseline so the bars sit exactly on it. */ .rg-result__bar em { position: absolute; top: 100%; left: 0; width: 100%; margin: 0; padding-top: 10px; border-top: 0; font-family: var(--rg-sans, inherit); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--rg-ink, #1F1F1A); text-align: center; } /* Dashed connector: up from Control, across, down to Variation. */ .rg-result__lift { position: absolute; bottom: 0; left: calc(var(--bar-w) / 2); width: calc(var(--bar-w) + var(--bar-gap)); border-top: 1.5px dashed var(--rg-deep); pointer-events: none; opacity: 0; transition: opacity .4s ease; } .rg-result__leg { position: absolute; top: 0; width: 0; } .rg-result__leg--from { left: -1px; border-left: 1.5px dashed var(--rg-deep); } .rg-result__leg--to { right: -1px; border-right: 1.5px dashed var(--rg-deep); } .rg-result__leg--to::after { content: ""; position: absolute; bottom: 0; right: -5px; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid var(--rg-deep); } .rg-result__lift-label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -54%); padding: 0 8px; background: #FAF8F2; font-family: var(--rg-sans, inherit); font-size: 22px; font-weight: 700; line-height: 1; color: var(--rg-deep); white-space: nowrap; } /* The connector appears once both bars have grown. */ .rg-result.is-visible .rg-result__lift { opacity: 1; transition-delay: .85s; } .rg-results .rg-result.is-visible:nth-child(2) .rg-result__lift { transition-delay: .95s; } .rg-results .rg-result.is-visible:nth-child(3) .rg-result__lift { transition-delay: 1.05s; } .no-js .rg-result__lift { opacity: 1; } @media (max-width: 1000px) { .rg-result__bars { --bar-w: 72px; --bar-gap: 50px; } } @media (prefers-reduced-motion: reduce) { .rg-result__lift { opacity: 1; transition: none; } } /* ---------- How we work: icon flow with progress (1.11.0) -------------- Icons joined by flow arrows, a segmented bar per step, and a dashed loop from the last step back to the first. The loop is the "repeat". */ .rg-flow { --flow-gap: 48px; --flow-icon: 72px; list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--flow-gap); } .rg-flow__step { position: relative; display: flex; flex-direction: column; gap: 20px; } .rg-flow__icon { width: var(--flow-icon); height: var(--flow-icon); border-radius: 50%; background: var(--rg-sage); color: var(--rg-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* Arrow from this icon to the next step's icon, with a gap at each end. */ .rg-flow__arrow { position: absolute; top: calc(var(--flow-icon) / 2 - 1px); left: calc(var(--flow-icon) + 16px); right: calc(var(--flow-gap) * -1 + 16px); height: 2px; background: var(--rg-green-700); border-radius: 1px; } .rg-flow__arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid var(--rg-green-700); } .rg-flow__progress { display: grid; gap: 10px; max-width: 300px; } .rg-flow__count { font-family: var(--rg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-muted); } .rg-flow__bar { display: flex; gap: 4px; } .rg-flow__bar span { flex: 1 1 0; height: 6px; border-radius: 3px; background: #E2DCCC; } .rg-flow__bar span.is-done { background: var(--rg-deep); } .rg-flow__title { margin: 2px 0 0; font-family: var(--rg-sans); font-size: 22px; font-weight: 600; } .rg-flow__copy { margin: -12px 0 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); max-width: 310px; } /* Loop: down from the last icon's column, back left, up to the first. */ .rg-flow__loop { --flow-gap: 48px; --flow-icon: 72px; --col: calc((100% - var(--flow-gap) * 2) / 3); position: relative; height: 36px; margin: 18px calc(var(--col) - var(--flow-icon) / 2) 0 calc(var(--flow-icon) / 2); border: 1.6px dashed var(--rg-deep); border-top: 0; border-radius: 0 0 16px 16px; } .rg-flow__loop::before { content: ""; position: absolute; left: -6.8px; top: -10px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--rg-deep); } .rg-flow__loop-label { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 12px; background: var(--rg-light); font-family: var(--rg-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-green-700); white-space: nowrap; } .rg-flow__loop { margin-bottom: 9px; } @media (max-width: 900px) { .rg-flow { grid-template-columns: 1fr; gap: 36px; } .rg-flow__arrow, .rg-flow__loop { display: none; } } /* ---------- Analytics gap: copy beside a Venn (1.11.0) ----------------- */ .rg-wrap.rg-gap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 0; } .rg-gap__text { display: grid; gap: 18px; max-width: 520px; } .rg-gap__text > * { margin: 0; } .rg-gap__text p:not(.rg-eyebrow) { font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-gap__text .rg-gap__emphasis { color: var(--rg-light); font-weight: 500; } .rg-gap__text .rg-eyebrow { color: var(--rg-ondeep); } .rg-venn { margin: 0; display: flex; justify-content: center; } .rg-venn svg { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; } .rg-venn text { font-family: var(--rg-sans); } .rg-venn__kicker { font-family: var(--rg-mono) !important; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; fill: var(--rg-green-700); } .rg-venn__kicker--qual { fill: #5E5A4C; } .rg-venn__name { font-size: 19px; font-weight: 600; fill: var(--rg-ink); } .rg-venn__item { font-size: 14px; fill: var(--rg-body); } .rg-venn__caption { font-size: 24px; font-weight: 400; fill: #FFFFFF; } @media (max-width: 900px) { .rg-wrap.rg-gap { grid-template-columns: 1fr; gap: 36px; } /* The diagram scales down on phones, so its type scales up to stay readable. */ .rg-venn__kicker { font-size: 14px; } .rg-venn__name { font-size: 23px; } .rg-venn__item { font-size: 18px; } .rg-venn__caption { font-size: 28px; } } /* ---------- Evaluation page (1.13.0) ------------------------------------ Hero: what the evaluation covers, with the form beside it. Below: what happens next, where versus why, and what the prospect leaves with. */ .rg-evhero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; } .rg-evhero__lead { display: grid; gap: 22px; } .rg-evhero__lead > * { margin: 0; } .rg-evhero h1 { max-width: 16ch; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; } .rg-evhero__lead p:not(.rg-eyebrow) { font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-evcheck { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--rg-sage); color: var(--rg-deep); display: inline-flex; align-items: center; justify-content: center; } .rg-evchecks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; } .rg-evchecks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.4; color: var(--rg-light); } .rg-evchecks--light { gap: 18px 48px; max-width: 980px; } .rg-evchecks--light li { font-size: 17px; line-height: 1.45; color: var(--rg-body); } .rg-evkeep { margin-top: 10px; padding-top: 24px; border-top: 1px solid #2C574A; display: grid; gap: 6px; } .rg-evkeep p { margin: 0; } .rg-evhero__lead .rg-evkeep__heading { font-size: 18px; font-weight: 600; color: var(--rg-light); } .rg-evhero__lead .rg-evkeep p:not(.rg-evkeep__heading) { font-size: 16px; color: #A9BFB4; max-width: 520px; } .rg-evalform { box-shadow: 0 18px 40px rgba(0, 0, 0, .22); padding: 32px; } .rg-evalform__heading { margin: 0 0 18px; font-family: var(--rg-sans); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--rg-ink); } .rg-evalform__note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--rg-muted); } /* The form card sits on the deep hero, so reset the inherited light text. */ .rg-on-deep .rg-evalform { color: var(--rg-body); } .rg-on-deep .rg-evalform h2.rg-evalform__heading, .rg-on-deep .rg-evalform label, .rg-on-deep .rg-evalform legend { color: var(--rg-ink); } .rg-on-deep .rg-evalform .rg-evalform__note { color: var(--rg-muted); } /* What happens next: heading beside 4 plain rows. */ .rg-evnext { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 72px; align-items: start; } .rg-evnext h2 { margin: 0; line-height: 1.1; } .rg-evnext__row { padding: 26px 0; border-top: 1px solid var(--rg-line); display: grid; gap: 6px; } .rg-evnext__row:last-child { border-bottom: 1px solid var(--rg-line); } .rg-evnext__row p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--rg-body); } .rg-evnext__row .rg-evnext__lead { font-size: 19px; font-weight: 600; color: var(--rg-ink); } /* Where versus why: copy beside 3 marked lines in the homepage Venn colors. */ .rg-evwhy { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 80px; align-items: center; } .rg-evwhy__text { display: grid; gap: 20px; } .rg-evwhy__text > * { margin: 0; } .rg-evwhy__text h2 { line-height: 1.1; } .rg-evwhy__text p { font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-evwhy__text .rg-evwhy__emphasis { color: var(--rg-light); font-weight: 500; } .rg-evwhy__rows { display: grid; gap: 14px; } .rg-evwhy__row { display: flex; gap: 20px; align-items: stretch; background: #13402F; border-radius: 10px; padding: 24px; } .rg-evwhy__row > div { display: grid; gap: 6px; } .rg-evwhy__bar { flex: 0 0 8px; border-radius: 4px; } .rg-evwhy__bar--sage { background: var(--rg-sage); } .rg-evwhy__bar--tan { background: #DCD2BA; } .rg-evwhy__bar--cream { background: #FAF8F2; } .rg-evwhy__label { font-family: var(--rg-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A9BFB4; } .rg-evwhy__line { font-family: var(--rg-serif); font-size: 27px; line-height: 1.15; color: var(--rg-light); } /* What you leave with. */ .rg-evleave { display: grid; gap: 22px; } .rg-evleave__intro { display: grid; gap: 14px; max-width: 760px; margin-bottom: 18px; } .rg-evleave__intro > * { margin: 0; } .rg-evleave__intro h2 { line-height: 1.1; } .rg-evleave__sub { font-size: 18px; line-height: 1.55; color: var(--rg-muted); } .rg-evleave .rg-eyebrow { margin: 0; } .rg-evleave__close { margin-top: 26px; background: var(--rg-band); border-radius: 10px; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 48px; } .rg-evleave__close p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--rg-body); max-width: 720px; } .rg-evleave__btn { flex: 0 0 auto; } @media (max-width: 1000px) { .rg-evhero__grid, .rg-evnext, .rg-evwhy { grid-template-columns: 1fr; gap: 36px; } .rg-evleave__close { flex-direction: column; align-items: flex-start; gap: 20px; } } @media (max-width: 600px) { .rg-evchecks, .rg-evchecks--light { grid-template-columns: 1fr; } .rg-evalform { padding: 24px; } .rg-evwhy__line { font-size: 23px; } } /* ---------- Service page (1.14.0) --------------------------------------- Shares the result card, flow progress bar, approach rows and check marks with the homepage and evaluation page. Everything else lives here. */ .rg-sv { display: grid; gap: 48px; } .rg-sv__head { display: grid; gap: 16px; } .rg-sv__head > * { margin: 0; } .rg-sv__head h2 { max-width: 22ch; line-height: 1.1; } .rg-sv__head p:not(.rg-eyebrow) { max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--rg-body); } .rg-svkicker { display: block; font-family: var(--rg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-muted); } .rg-svicon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--rg-sage); color: var(--rg-deep); display: inline-flex; align-items: center; justify-content: center; } .rg-svicon--white { background: #FFFFFF; width: 50px; height: 50px; } /* Hero */ .rg-svhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: center; } .rg-svhero__lead { display: grid; gap: 22px; } .rg-svhero__lead > * { margin: 0; } .rg-svhero h1 { max-width: 15ch; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; } .rg-svhero__lead p:not(.rg-eyebrow):not(.rg-svhero__actions):not(.rg-svhero__tagline) { font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-svhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px !important; } .rg-svhero__tagline { font-family: var(--rg-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #A9BFB4; } .rg-svhero__card { box-shadow: 0 18px 40px rgba(0, 0, 0, .22); border: 0; } .rg-on-deep .rg-svhero__card { color: var(--rg-body); } .rg-on-deep .rg-svhero__card h4 { color: var(--rg-ink); } .rg-on-deep .rg-svhero__card .rg-stat__label { color: var(--rg-muted); } /* Journey stages with flow arrows, then the cross-journey bars */ .rg-svstages { --st-gap: 88px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-gap); } .rg-svstages__item { position: relative; display: grid; gap: 14px; align-content: start; } .rg-svstages__item h3, .rg-svacross__item h3, .rg-svwork__card h3, .rg-svteam__col h3, .rg-svsteps__body h3, .rg-svfaq__item h3 { margin: 0; font-family: var(--rg-sans); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-svstages__item p, .rg-svacross__item p, .rg-svwork__card p, .rg-svteam__col p, .rg-svfaq__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-svstages__arrow { position: absolute; top: 27px; left: calc(56px + 18px); right: calc(var(--st-gap) * -1 + 18px); height: 2px; background: var(--rg-green-700); } .rg-svstages__arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid var(--rg-green-700); } .rg-svacross { display: grid; gap: 14px; } .rg-svacross__item { display: flex; gap: 20px; align-items: center; background: #EEF1E6; border: 1px solid var(--rg-line); border-radius: 10px; padding: 22px 28px; } .rg-svacross__item:nth-child(2n) { background: #F1ECE0; } .rg-svacross__item > div { display: grid; gap: 4px; } .rg-svacross__item h3 { font-size: 19px; } /* What makes a program work */ .rg-svwork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .rg-svwork__card { background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 10px; } .rg-svwork__instead { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rg-line); font-family: var(--rg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5E5E53; } /* How we work: vertical flow */ .rg-svhow { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; align-items: start; } .rg-svhow__head { display: grid; gap: 16px; } .rg-svhow__head > * { margin: 0; } .rg-svhow__head h2 { line-height: 1.1; } .rg-svsteps { list-style: none; margin: 0; padding: 0; } .rg-svsteps__item { position: relative; display: flex; gap: 28px; padding-bottom: 36px; } .rg-svsteps__item:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 64px; bottom: -8px; width: 2px; background: var(--rg-sage); } .rg-svsteps__body { display: grid; gap: 10px; padding-top: 4px; } .rg-svsteps__body .rg-flow__progress { max-width: 300px; } .rg-svsteps__body h3 { font-size: 22px; margin-top: 4px; } .rg-svsteps__body p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--rg-body); } /* Results footer */ .rg-svresults__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .rg-svresults__foot p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-muted); } /* Embedded team */ .rg-svteam { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 48px; } .rg-svteam__col { display: grid; gap: 14px; align-content: start; } .rg-svteam__line { margin: 0; padding-top: 28px; border-top: 1px solid #D3CAB4; font-family: var(--rg-serif); font-size: 30px; line-height: 1.2; color: var(--rg-deep); } /* Fit */ .rg-svfit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .rg-svfit__tile { background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; padding: 26px; display: grid; gap: 10px; } .rg-svfit__value { font-family: var(--rg-serif); font-size: 26px; line-height: 1.2; color: var(--rg-deep); } .rg-svfit__best { background: var(--rg-deep); border-radius: 10px; padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; } .rg-svfit__best .rg-svkicker { color: #A9BFB4; margin-bottom: 6px; } .rg-svfit__best p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--rg-light); } .rg-evcheck--lg { width: 28px; height: 28px; } .rg-svfit__note { margin: 0; max-width: 820px; font-size: 16px; line-height: 1.55; color: var(--rg-muted); } /* Pricing */ .rg-svprice { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start; } .rg-svprice__head { display: grid; gap: 16px; } .rg-svprice__head > * { margin: 0; } .rg-svprice__amount { font-size: 64px; font-weight: 600; line-height: 1; color: var(--rg-deep); } .rg-svprice__amount span { font-size: 22px; font-weight: 500; color: var(--rg-muted); } .rg-svprice__terms { list-style: none; margin: 8px 0 0 !important; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .rg-svprice__terms li { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--rg-line); background: #FFFFFF; font-size: 15px; font-weight: 500; } .rg-svprice__copy { display: grid; gap: 18px; padding-top: 34px; } .rg-svprice__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--rg-body); } .rg-svprice__copy .rg-svprice__note { font-size: 16px; color: var(--rg-muted); } /* Evaluation band */ .rg-sveval { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; align-items: center; } .rg-sveval__text { display: grid; gap: 18px; } .rg-sveval__text > * { margin: 0; } .rg-sveval__text h2 { line-height: 1.1; } .rg-sveval__text p:not(.rg-eyebrow) { font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-sveval__card { background: #13402F; border-radius: 10px; padding: 30px; display: grid; gap: 18px; justify-items: start; } .rg-sveval__keep { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.5; color: var(--rg-light); } /* FAQ */ .rg-svfaq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; } .rg-svfaq__item { padding: 24px 0; border-top: 1px solid var(--rg-line); display: grid; gap: 8px; align-content: start; } .rg-svfaq__item h3 { font-size: 19px; } /* Final CTA */ .rg-svfinal { display: grid; justify-items: center; text-align: center; gap: 20px; } .rg-svfinal > * { margin: 0; } .rg-svfinal h2 { max-width: 20ch; line-height: 1.1; } .rg-svfinal p { max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--rg-body); } .rg-svfinal .rg-svfinal__note { font-family: var(--rg-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } @media (max-width: 1000px) { .rg-svhero__grid, .rg-svhow, .rg-svprice, .rg-sveval { grid-template-columns: 1fr; gap: 40px; } .rg-svstages { grid-template-columns: 1fr; gap: 32px; } .rg-svstages__arrow { display: none; } .rg-svteam, .rg-svfit { grid-template-columns: 1fr; gap: 24px; } .rg-svprice__copy { padding-top: 0; } .rg-svresults__foot { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .rg-svwork, .rg-svfaq { grid-template-columns: 1fr; } .rg-svacross__item { flex-direction: column; align-items: flex-start; } .rg-svprice__amount { font-size: 48px; } } /* Stage grids that are not a 3-step flow simply wrap, with no arrows. */ .rg-svstages--wrap { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 56px; } /* Generic list sections: what we measure, what the work produces, and so on. */ .rg-svlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .rg-svlist__item { background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; padding: 26px; display: grid; gap: 10px; align-content: start; } .rg-svlist__item h3 { margin: 0; font-family: var(--rg-sans); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-svlist__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-svlist__note { margin: 0; font-family: var(--rg-serif); font-size: 26px; line-height: 1.25; color: var(--rg-deep); max-width: 30ch; } /* Hero without a result card uses the full width. */ .rg-svhero__grid--solo { grid-template-columns: minmax(0, 1fr); } .rg-svhero__grid--solo .rg-svhero__lead { max-width: 860px; } .rg-svhero__grid--solo h1 { max-width: 22ch; } @media (max-width: 1000px) { .rg-svlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .rg-svlist { grid-template-columns: 1fr; } } /* List items that are a single line, such as a deliverables list. */ .rg-svlist__item.is-compact { padding: 20px 22px; } .rg-svlist__item.is-compact h3 { font-size: 17px; font-weight: 500; } /* ---------- Services hub (1.16.0) --------------------------------------- */ .rg-hubhero h1 { max-width: 26ch; font-size: clamp(32px, 4vw, 50px); line-height: 1.06; } /* Wider measure here keeps the hero shorter than a narrow column would. */ .rg-hubhero > .rg-wrap { padding-right: 0; } .rg-hubhero .rg-hubhero__copy { max-width: 860px; margin-top: 16px; display: grid; gap: 12px; } .rg-hubhero .rg-hubhero__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-hubhero .rg-svhero__actions { margin-top: 24px; } .rg-hubhero .rg-svhero__tagline { margin-top: 18px; } .rg-hubgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .rg-hubcard { display: flex; flex-direction: column; gap: 10px; padding: 30px; background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } .rg-hubcard:hover { border-color: var(--rg-deep); transform: translateY(-2px); } .rg-hubcard h3 { margin: 0; font-family: var(--rg-sans); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-hubcard p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-hubcard__link { margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 600; color: var(--rg-green-700); } .rg-hubcard:hover .rg-hubcard__link { color: var(--rg-deep); } /* Routing rows: the situation on the left, the page to read on the right. */ .rg-hubroute { list-style: none; margin: 0; padding: 0; } .rg-hubroute__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--rg-line); } .rg-hubroute__row:last-child { border-bottom: 1px solid var(--rg-line); } .rg-hubroute__when { font-size: 18px; line-height: 1.5; color: var(--rg-body); } .rg-hubroute__go { font-size: 17px; font-weight: 600; } .rg-hubroute__go a { color: var(--rg-green-700); text-decoration: none; border-bottom: 1px solid #BFD3C8; } .rg-hubroute__go a:hover { color: var(--rg-deep); border-bottom-color: var(--rg-deep); } @media (max-width: 900px) { .rg-hubgrid, .rg-hubgrid--two { grid-template-columns: 1fr; } .rg-hubroute__row { grid-template-columns: 1fr; gap: 6px; } } /* ---------- About page (1.16.0) ----------------------------------------- */ .rg-abhero h1 { max-width: 20ch; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; } .rg-abhero .rg-abhero__sub { max-width: 640px; margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: #D5E0DA; } .rg-abfounder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 72px; align-items: start; } .rg-abfounder__portrait { margin: 0; border-radius: 10px; overflow: hidden; background: var(--rg-band); aspect-ratio: 17 / 20; } .rg-abfounder__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; } .rg-abfounder__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--rg-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-muted); } .rg-abfounder__text { display: grid; gap: 18px; max-width: 720px; } .rg-abfounder__text > * { margin: 0; } .rg-abfounder__text h2 { line-height: 1.1; } .rg-abfounder__text p { font-size: 18px; line-height: 1.6; color: var(--rg-body); } .rg-abfounder__text .rg-abfounder__sig { margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--rg-ink); } .rg-abfounder__sig span { font-weight: 400; color: var(--rg-muted); } .rg-abrules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .rg-abrules__item { display: grid; gap: 10px; align-content: start; } .rg-abrules__mark { width: 28px; height: 3px; border-radius: 2px; background: var(--rg-deep); } .rg-abrules__item h3 { margin: 6px 0 0; font-family: var(--rg-sans); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-abrules__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-abnumbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } .rg-abnumbers__item { display: grid; gap: 6px; align-content: start; } .rg-abnumbers__value { font-family: var(--rg-serif); font-size: 44px; line-height: 1; color: var(--rg-deep); } .rg-abclose { display: grid; justify-items: start; gap: 28px; } .rg-abclose h2 { margin: 0; max-width: 24ch; line-height: 1.15; } @media (max-width: 1000px) { .rg-abfounder { grid-template-columns: 1fr; gap: 36px; } .rg-abfounder__portrait { max-width: 340px; } .rg-abrules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .rg-abnumbers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } } @media (max-width: 600px) { .rg-abrules, .rg-abnumbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-abnumbers__value { font-size: 36px; } } /* ---------- Articles: index, topics, cards, author (1.17.0) ------------- */ .rg-topics { padding-top: 0 !important; padding-bottom: 0 !important; } .rg-topics__row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--rg-line); } .rg-topics__link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--rg-line); border-radius: 19px; background: #FFFFFF; font-size: 15px; color: var(--rg-body); text-decoration: none; } .rg-topics__link span { font-family: var(--rg-mono); font-size: 11px; color: var(--rg-muted); } .rg-topics__link:hover { border-color: var(--rg-deep); color: var(--rg-deep); } .rg-topics__link.is-current { background: var(--rg-deep); border-color: var(--rg-deep); color: var(--rg-light); } .rg-topics__link.is-current span { color: #A9BFB4; } .rg-artgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; } .rg-artcard { display: flex; flex-direction: column; gap: 14px; } .rg-artcard__media { display: block; border-radius: 10px; overflow: hidden; background: var(--rg-band); aspect-ratio: 16 / 9; } .rg-artcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .rg-artcard__body { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; } .rg-artcard__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .rg-artcard__cat { color: var(--rg-green-700); text-decoration: none; } .rg-artcard__cat:hover { color: var(--rg-deep); } .rg-artcard__title { margin: 0; font-family: var(--rg-sans); font-size: 20px; font-weight: 600; line-height: 1.32; } .rg-artcard__title a { color: var(--rg-ink); text-decoration: none; } .rg-artcard__title a:hover { color: var(--rg-green-700); } .rg-artcard__excerpt { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-artcard__foot { margin: auto 0 0; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--rg-muted); } .rg-artcard__link { font-weight: 600; color: var(--rg-green-700); text-decoration: none; } .rg-artcard__link:hover { color: var(--rg-deep); } /* The newest article, given the width of the page. */ .rg-artcard--lead { flex-direction: row; gap: 40px; align-items: stretch; margin-bottom: 44px; padding-bottom: 44px; border-bottom: 1px solid var(--rg-line); } .rg-artcard--lead .rg-artcard__media { flex: 0 0 40%; aspect-ratio: 4 / 3; align-self: center; } .rg-artcard--lead .rg-artcard__body { justify-content: center; } .rg-artcard--lead .rg-artcard__title { font-size: 30px; line-height: 1.2; } .rg-artcard--lead .rg-artcard__excerpt { font-size: 18px; } .rg-pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; } .rg-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--rg-line); border-radius: 6px; background: #FFFFFF; color: var(--rg-body); text-decoration: none; font-size: 15px; } .rg-pager .page-numbers:hover { border-color: var(--rg-deep); color: var(--rg-deep); } .rg-pager .page-numbers.current { background: var(--rg-deep); border-color: var(--rg-deep); color: var(--rg-light); } /* Author block */ .rg-authorbio { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; align-items: start; padding: 32px; background: var(--rg-band); border-radius: 10px; margin-bottom: 56px; } .rg-authorbio__photo { border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; background: #E0D9C6; } .rg-authorbio__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .rg-authorbio__text { display: grid; gap: 8px; } .rg-authorbio__text > * { margin: 0; } .rg-authorbio__text h3 { font-family: var(--rg-sans); font-size: 21px; font-weight: 600; color: var(--rg-ink); } .rg-authorbio__text h3 span { font-weight: 400; color: var(--rg-muted); } .rg-authorbio__role { margin: 0 !important; font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-green-700); } .rg-authorbio__text p { font-size: 16px; line-height: 1.6; color: var(--rg-body); } .rg-authorbio__links a { font-weight: 600; color: var(--rg-green-700); text-decoration: none; } .rg-related { display: grid; gap: 22px; } @media (max-width: 1000px) { .rg-artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-artcard--lead { flex-direction: column; gap: 20px; } .rg-artcard--lead .rg-artcard__media { flex: none; width: 100%; } .rg-artcard--lead .rg-artcard__title { font-size: 26px; } } @media (max-width: 640px) { .rg-artgrid { grid-template-columns: 1fr; } .rg-authorbio { grid-template-columns: 1fr; gap: 20px; padding: 24px; } .rg-authorbio__photo { max-width: 120px; } } /* Cards with no featured image keep the same tile, carrying the topic. */ .rg-artcard__media--empty { display: block; background: #F4F1E7; border: 1px solid var(--rg-line); overflow: hidden; } .rg-tile { position: relative; display: block; width: 100%; height: 100%; } .rg-tile svg { display: block; width: 100%; height: 100%; } .rg-tile em { position: absolute; left: 16px; bottom: 14px; font-family: var(--rg-mono); font-size: 11px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-green-700); } .rg-tile__mark { fill: #CBD5BA; opacity: .55; } .rg-tile__mark--solid { fill: var(--rg-deep); opacity: .85; } .rg-tile--v2 .rg-tile__mark { fill: #C9D3B8; } .rg-tile--v3 .rg-tile__mark { fill: #D6CDB4; } .rg-tile--v3 .rg-tile__mark--solid { fill: #13503C; } /* ---------- Article page: lead image and heading rail (1.18.0) ---------- */ /* Article hero: headline on the left, wireframe on the right, on the green. */ .rg-arthero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: center; } .rg-arthero__text { min-width: 0; } .rg-arthero__grid .rg-arthero__text h1 { max-width: 20ch; } .rg-arthero__art .rg-schematic { padding: 18px; border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); } .rg-arthero__art .rg-schematic svg { display: block; width: 100%; height: auto; } .rg-artbody { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 80px; align-items: start; } .rg-artmain { min-width: 0; } /* The rail itself sticks. Sticking the inner box does nothing, because its parent is exactly as tall as it is. */ .rg-rail { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; } .rg-rail__inner { display: grid; gap: 12px; } .rg-rail__summary { list-style: none; cursor: default; } .rg-rail__summary::-webkit-details-marker { display: none; } .rg-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-left: 2px solid var(--rg-line); } .rg-rail__list li { padding-left: 14px; } .rg-rail__list a { font-size: 15px; line-height: 1.4; color: var(--rg-body); text-decoration: none; } .rg-rail__list a:hover { color: var(--rg-deep); } .rg-rail__meta { margin: 6px 0 0; font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } /* Imported article content. Looser than the marketing pages: this is long reading, so lines get more air and headings get room to separate blocks. */ .rg-artbody .rg-artmain.rg-measure { max-width: 68ch; } .rg-artmain > * { margin-top: 0; } .rg-artmain p, .rg-artmain li { font-size: 19px; line-height: 1.78; color: var(--rg-body); } .rg-artmain p { margin: 0 0 28px; } .rg-artmain h2 { margin: 64px 0 18px; font-size: 32px; line-height: 1.22; scroll-margin-top: 100px; } .rg-artmain h2 strong { font-weight: inherit; } .rg-artmain h3 { margin: 44px 0 12px; font-family: var(--rg-sans); font-size: 21px; font-weight: 600; line-height: 1.35; } .rg-artmain h2 + p, .rg-artmain h3 + p { margin-top: 0; } .rg-artmain ul, .rg-artmain ol { margin: 0 0 30px; padding-left: 24px; display: grid; gap: 14px; } .rg-artmain li { padding-left: 4px; } .rg-artmain li strong { color: var(--rg-ink); } .rg-artmain img { max-width: 100%; height: auto; border-radius: 8px; margin: 36px 0; } .rg-artmain figure { margin: 36px 0; } .rg-artmain hr, .rg-artmain .wp-block-separator { margin: 56px 0; border: 0; border-top: 1px solid var(--rg-line); } .rg-artmain blockquote { margin: 40px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--rg-sage); } .rg-artmain blockquote p { font-family: var(--rg-serif); font-size: 24px; line-height: 1.45; color: var(--rg-ink); } .rg-artmain table { width: 100%; border-collapse: collapse; margin: 36px 0; font-size: 17px; } .rg-artmain th, .rg-artmain td { padding: 14px 16px; border-bottom: 1px solid var(--rg-line); text-align: left; line-height: 1.6; } .rg-artmain th { font-weight: 600; color: var(--rg-ink); } .rg-artmain a { color: var(--rg-green-700); text-decoration: underline; text-underline-offset: 3px; } .rg-artmain a:hover { color: var(--rg-deep); } .rg-artmain > *:last-child { margin-bottom: 0; } /* The plugin's own table of contents would duplicate the rail. */ .rg-artmain .wp-block-yoast-seo-table-of-contents { display: none; } @media (max-width: 1000px) { .rg-artbody { grid-template-columns: 1fr; gap: 24px; } .rg-arthero__grid { grid-template-columns: 1fr; gap: 28px; } .rg-arthero__art { max-width: 320px; } /* The rail collapses, so the article itself starts near the top. */ .rg-rail { position: static; max-height: none; overflow: visible; border: 1px solid var(--rg-line); border-radius: 10px; background: #FFFFFF; } .rg-rail__inner { position: static; gap: 0; padding: 16px 18px; } .rg-rail__summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rg-rail__summary::after { content: "+"; font-family: var(--rg-mono); font-size: 16px; color: var(--rg-muted); } .rg-rail__inner[open] .rg-rail__summary::after { content: "\2212"; } .rg-rail__inner[open] .rg-rail__list { margin-top: 14px; } .rg-rail__list { display: grid; gap: 10px; border-left: 2px solid var(--rg-line); } .rg-rail__list li { padding-left: 12px; } .rg-rail__meta { display: none; } /* CTA sits inline under the list rather than as a full-width panel. */ .rg-railcta { margin-top: 16px; padding-top: 16px; grid-template-columns: 1fr; } .rg-railcta__head { font-size: 15px; } .rg-railcta__copy { display: none; } } /* ---------- Article calls to action (1.19.0) ---------------------------- */ /* In the rail, under the headings. Follows the reader down the page. */ .rg-railcta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rg-line); display: grid; gap: 10px; justify-items: start; } .rg-railcta__head { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--rg-ink); } .rg-railcta .rg-btn { margin-top: 4px; } .rg-railcta__copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rg-muted); } .rg-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; } /* Inside the article, after the second section. */ .rg-inlinecta { margin: 48px 0; padding: 26px 28px; background: var(--rg-band); border-radius: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .rg-inlinecta__head { margin: 0 0 6px; font-family: var(--rg-sans); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-artmain .rg-inlinecta__copy { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-artmain .rg-inlinecta .rg-btn, .rg-inlinecta .rg-btn { flex: 0 0 auto; text-decoration: none; } /* Article link colour must not repaint button labels. */ .rg-artmain .rg-btn--dark, .rg-artmain .rg-btn--dark:hover { color: var(--rg-light); } .rg-artmain .rg-btn--primary, .rg-artmain .rg-btn--primary:hover { color: var(--rg-deep); } /* Article paragraph spacing must not push the panel apart. */ .rg-artmain .rg-inlinecta p { margin: 0; } .rg-artmain .rg-inlinecta .rg-inlinecta__head { margin: 0 0 8px; } .rg-inlinecta > div { display: grid; gap: 0; } @media (max-width: 760px) { .rg-inlinecta { padding: 22px 20px; } } /* Card art: a wireframe in the palette, or a typographic tile. */ .rg-artcard__media--sch { background: var(--rg-white); border: 1px solid var(--rg-line); display: flex; align-items: center; justify-content: center; padding: 14px; } .rg-artcard__media--sch .rg-schematic { border: 0; padding: 0; background: transparent; width: 100%; } .rg-artcard__media--sch .rg-schematic svg { display: block; width: 100%; height: auto; } .rg-artcard--lead .rg-artcard__media--sch { padding: 16px; } /* Article artwork uses the same wireframes in the green palette. Test entries keep the neutral fills, where the lime highlight carries the meaning. */ .rg-artcard__media--sch .rg-sch-bg, .rg-arthero__art .rg-sch-bg { fill: #FBF9F3; } .rg-artcard__media--sch .rg-sch-panel, .rg-arthero__art .rg-sch-panel { fill: #EDF1E6; } .rg-artcard__media--sch .rg-sch-dim, .rg-arthero__art .rg-sch-dim { fill: #F1F3EB; } .rg-artcard__media--sch .rg-sch-block, .rg-arthero__art .rg-sch-block { fill: #D8E2CA; } .rg-artcard__media--sch .rg-sch-line, .rg-arthero__art .rg-sch-line { fill: #C5D2B4; } .rg-artcard__media--sch .rg-sch-line--strong, .rg-arthero__art .rg-sch-line--strong { fill: #9FB394; } .rg-artcard__media--sch .rg-sch-cta, .rg-arthero__art .rg-sch-cta { fill: var(--rg-deep); } .rg-artcard__media--sch .rg-sch-field, .rg-arthero__art .rg-sch-field { fill: #FFFFFF; stroke: #C5D2B4; } /* Copy link. The only share control: people paste URLs. */ .rg-copylink { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid #2C574A; border-radius: 19px; background: transparent; color: #C6D7CE; font-family: var(--rg-sans); font-size: 14px; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .rg-copylink:hover { border-color: var(--rg-sage); color: var(--rg-light); } .rg-copylink.is-copied { border-color: var(--rg-lime); color: var(--rg-lime); } /* ---------- Legal pages (1.27.0) ---------------------------------------- */ .rg-legalhero h1 { max-width: 20ch; } .rg-legalhero .rg-note { margin-top: 14px; } /* Numbered sections, smaller than article headings: these are reference documents, so the hierarchy stays quiet. */ .rg-legalbody h2 { margin: 48px 0 14px; font-family: var(--rg-sans); font-size: 22px; font-weight: 600; line-height: 1.3; } .rg-legalbody h3 { margin: 32px 0 10px; font-size: 18px; font-weight: 600; } .rg-legalbody p, .rg-legalbody li { font-size: 17px; line-height: 1.7; } .rg-legalbody p { margin: 0 0 20px; } .rg-legalbody ul, .rg-legalbody ol { margin: 0 0 24px; gap: 10px; } .rg-legalbody strong { color: var(--rg-ink); } .rg-legalbody__contact { margin-top: 40px; padding: 22px 24px; background: var(--rg-band); border-radius: 10px; } .rg-legalbody .rg-legalbody__contact { font-size: 16px; } /* ---------- Contact page (1.28.0) --------------------------------------- */ .rg-contacthero h1 { max-width: 20ch; } .rg-contacthero .rg-contacthero__copy { max-width: 680px; margin-top: 18px; display: grid; gap: 12px; } .rg-contacthero .rg-contacthero__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } .rg-contact__card { background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; padding: 30px; display: grid; gap: 10px; align-content: start; } .rg-contact__card h2 { margin: 0; font-family: var(--rg-sans); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-contact__card h2 a { color: var(--rg-green-700); text-decoration: none; word-break: break-word; } .rg-contact__card h2 a:hover { color: var(--rg-deep); } .rg-contact__card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-contact__card .rg-btn { margin-top: 6px; justify-self: start; } .rg-contact__card--lead { background: var(--rg-band); border-color: #D9D0BA; } @media (max-width: 900px) { .rg-contact { grid-template-columns: 1fr; } } /* ---------- Pricing: 1 anchor, then the drivers (1.29.0) ---------------- */ .rg-pricehero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; } .rg-pricehero h1 { max-width: 18ch; } .rg-pricehero .rg-pricehero__copy { max-width: 620px; margin-top: 18px; display: grid; gap: 12px; } .rg-pricehero .rg-pricehero__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-priceanchor { background: #13402F; border-radius: 10px; padding: 30px; display: grid; gap: 4px; } .rg-priceanchor .rg-svkicker { color: #A9BFB4; } .rg-priceanchor__figure { font-size: 52px; font-weight: 600; line-height: 1.05; color: var(--rg-light); } .rg-priceanchor__unit { font-family: var(--rg-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #A9BFB4; } .rg-priceanchor__note { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #D5E0DA; } .rg-drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .rg-drivers__item { display: flex; gap: 20px; background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; padding: 28px; } .rg-drivers__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--rg-sage); color: var(--rg-deep); display: inline-flex; align-items: center; justify-content: center; font-family: var(--rg-mono); font-size: 14px; } .rg-drivers__item > div { display: grid; gap: 8px; } .rg-drivers__item h3 { margin: 0; font-family: var(--rg-sans); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--rg-ink); } .rg-drivers__item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-drivers__effect { font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-green-700) !important; } @media (max-width: 1000px) { .rg-pricehero__grid { grid-template-columns: 1fr; gap: 32px; } .rg-priceanchor { max-width: 340px; } } @media (max-width: 700px) { .rg-drivers { grid-template-columns: 1fr; } } /* ---------- Confirmation and share access (1.30.0) --------------------- */ .rg-cfhero h1 { max-width: 18ch; } .rg-cfhero .rg-cfhero__copy { max-width: 680px; margin-top: 18px; display: grid; gap: 12px; } .rg-cfhero .rg-cfhero__copy p { margin: 0; font-size: 19px; line-height: 1.6; color: #D5E0DA; } .rg-cfcards { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .rg-cfcard { background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; padding: 34px; display: flex; flex-direction: column; gap: 14px; } .rg-cfcard--primary { background: var(--rg-band); border-color: #D9D0BA; } .rg-cfcard h3 { margin: 0; font-family: var(--rg-sans); font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--rg-ink); } .rg-cfcard p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--rg-body); } .rg-cfcard .rg-btn { align-self: flex-start; } .rg-cfcard__note { font-family: var(--rg-mono); font-size: 12px; color: var(--rg-muted) !important; word-break: break-all; } .rg-cfplatforms { display: grid; gap: 8px; } .rg-cfplatforms ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rg-cfplatforms li { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid #D0C6AE; background: #FFFFFF; font-size: 14px; color: var(--rg-body); } .rg-cfassure { list-style: none; margin: 4px 0 0; padding: 18px; background: #FFFFFF; border: 1px solid #D9D0BA; border-radius: 8px; display: grid; gap: 10px; } .rg-cfassure li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--rg-body); } .rg-cfactions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .rg-cfemail { display: inline-flex; align-items: center; height: 50px; padding: 0 18px; border-radius: 6px; border: 1px solid #D0C6AE; background: #FFFFFF; font-family: var(--rg-mono); font-size: 14px; color: var(--rg-ink); text-decoration: none; } .rg-cfemail:hover { border-color: var(--rg-deep); } .rg-btn--ghost-light { background: transparent; color: var(--rg-deep); border: 1px solid var(--rg-line); } .rg-btn--ghost-light:hover { border-color: var(--rg-deep); } .rg-cftimeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid #D3CAB4; } .rg-cftimeline li { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid #D3CAB4; } .rg-cftimeline__when { font-family: var(--rg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-muted); padding-top: 4px; } .rg-cftimeline__title { display: block; font-size: 19px; font-weight: 600; color: var(--rg-ink); margin-bottom: 6px; } .rg-cftimeline p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--rg-body); } /* Share analytics */ .rg-sahero h1 { max-width: 20ch; } .rg-sahero .rg-sahero__copy { max-width: 680px; margin-top: 18px; display: grid; gap: 12px; } .rg-sahero .rg-sahero__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-saemail { margin: 26px 0 0; display: inline-grid; gap: 6px; padding: 18px 22px; background: #13402F; border-radius: 10px; } .rg-saemail .rg-svkicker { color: #A9BFB4; } .rg-saemail a { font-family: var(--rg-mono); font-size: 20px; color: var(--rg-lime); text-decoration: none; } .rg-sasteps { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: start; } .rg-sasteps__head { display: grid; gap: 10px; } .rg-sasteps__head > * { margin: 0; } .rg-sasteps__head h2 { font-size: 30px; line-height: 1.15; } .rg-sasteps__head p { font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-salist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .rg-salist li { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; line-height: 1.6; color: var(--rg-body); } .rg-salist__num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--rg-sage); color: var(--rg-deep); display: inline-flex; align-items: center; justify-content: center; font-family: var(--rg-mono); font-size: 13px; } .rg-sahelp { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 32px 36px; background: var(--rg-band); border-radius: 10px; } .rg-sahelp h2 { margin: 0 0 8px; font-family: var(--rg-sans); font-size: 22px; font-weight: 600; } .rg-sahelp p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--rg-body); } .rg-sahelp .rg-btn { flex: 0 0 auto; } @media (max-width: 1000px) { .rg-cfcards { grid-template-columns: 1fr; } .rg-cftimeline li { grid-template-columns: 1fr; gap: 8px; } .rg-sasteps { grid-template-columns: 1fr; gap: 24px; } .rg-sahelp { flex-direction: column; align-items: flex-start; gap: 20px; } } /* ---------- 404 (1.31.0) ------------------------------------------------ */ .rg-nf h1 { max-width: 20ch; } .rg-nf .rg-nf__copy { max-width: 620px; margin-top: 18px; } .rg-nf .rg-nf__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #D5E0DA; } .rg-nf__search { margin-top: 28px; max-width: 520px; } .rg-nf__search form { display: flex; gap: 10px; } .rg-nf__search input[type="search"], .rg-nf__search .rg-searchform__field, .rg-nf__search input[type="text"] { flex: 1 1 auto; height: 50px; padding: 0 16px; border-radius: 6px; border: 1px solid #2C574A; background: #13402F; color: var(--rg-light); font-family: var(--rg-sans); font-size: 16px; } .rg-nf__search input::placeholder { color: #8FA79B; } .rg-nf__search input[type="submit"], .rg-nf__search .rg-searchform__submit, .rg-nf__search button { height: 50px; padding: 0 22px; border: 0; border-radius: 6px; background: var(--rg-lime); color: var(--rg-deep); font-family: var(--rg-sans); font-size: 16px; font-weight: 600; cursor: pointer; } /* The label is visually hidden by .rg-sr, never by hiding the label element: WordPress' default form puts the field inside the label. */ .rg-searchform { display: flex; gap: 10px; width: 100%; } .rg-searchform__field { flex: 1 1 auto; min-width: 0; } .rg-searchform__submit { flex: 0 0 auto; } .rg-hubgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .rg-hubgrid--three { grid-template-columns: 1fr; } .rg-nf__search form { flex-direction: column; } } /* ---------- Search results (1.33.0) ------------------------------------ */ .rg-srhero__form { margin-top: 20px; max-width: 620px; } .rg-srhero__count { margin: 20px 0 0; font-family: var(--rg-mono); font-size: 13px; letter-spacing: .04em; color: #A9BFB4; } .rg-sresults { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rg-line); } .rg-sresult { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rg-line); } .rg-sresult__meta { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-muted); } .rg-sresult h3 { margin: 0 0 6px; font-family: var(--rg-sans); font-size: 21px; font-weight: 600; line-height: 1.3; } .rg-sresult h3 a { color: var(--rg-ink); text-decoration: none; } .rg-sresult h3 a:hover { color: var(--rg-green-700); } .rg-sresult__excerpt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--rg-body); max-width: 70ch; } .rg-sresult__aside { display: flex; justify-content: flex-end; } .rg-sresult__status { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; border: 1px solid var(--rg-line); background: #FFFFFF; font-family: var(--rg-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rg-green-700); white-space: nowrap; } @media (max-width: 800px) { .rg-sresult { grid-template-columns: 1fr; gap: 12px; } .rg-sresult__aside { justify-content: flex-start; } } /* ---------- Comparison page (1.36.0) ----------------------------------- The winning option varies by row and is marked with a tint, never an extra line, so all 3 cells in a row keep the same baseline. */ .rg-cphero h1 { max-width: 22ch; } .rg-cphero .rg-cphero__copy { max-width: 720px; margin-top: 18px; display: grid; gap: 12px; } .rg-cphero .rg-cphero__copy p { margin: 0; font-size: 19px; line-height: 1.6; color: #D5E0DA; } .rg-cplead { padding-bottom: 0 !important; } .rg-cplead h2 { margin: 14px 0 0; max-width: 24ch; line-height: 1.14; } .rg-cplead__copy { margin-top: 20px; display: grid; gap: 18px; max-width: 72ch; } .rg-cplead__copy p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--rg-body); } .rg-cptable { display: grid; } .rg-cptable__head, .rg-cptable__row { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .rg-cptable__head { padding: 0 14px 16px 0; border-bottom: 1px solid var(--rg-line); font-family: var(--rg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-muted); } .rg-cptable__head .is-us { color: var(--rg-green-700); } .rg-cptable__key { display: inline-flex; align-items: center; gap: 7px; } .rg-cptable__swatch { width: 10px; height: 10px; border-radius: 3px; background: #EDF1E6; border: 1px solid var(--rg-sage); } .rg-cptable__row { padding: 15px 0; border-bottom: 1px solid var(--rg-line); } .rg-cptable__label { padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--rg-ink); } .rg-cptable__cell { display: block; padding: 14px; font-size: 16px; line-height: 1.55; color: var(--rg-body); } .rg-cptable__cell.is-best { background: #EDF1E6; border-radius: 6px; color: var(--rg-ink); font-weight: 500; } .rg-cptable__mobilehead { display: none; } .rg-cptable__note { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--rg-muted); max-width: 78ch; } /* Where the money goes: quiet, and no call to action beside the numbers. */ .rg-cpmoney { padding-top: 0 !important; } .rg-cpmoney__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; border-top: 1px solid var(--rg-line); padding-top: 40px; } .rg-cpmoney__grid > div > * { margin: 0; } .rg-cpmoney__grid h2 { margin-top: 10px; font-size: 30px; line-height: 1.16; } .rg-cpmoney__copy { display: grid; gap: 16px; max-width: 70ch; } .rg-cpmoney__copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--rg-body); } @media (max-width: 900px) { /* The table becomes stacked rows, each cell carrying its own column name. */ .rg-cptable__head { display: none; } .rg-cptable__row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; } .rg-cptable__label { font-size: 18px; padding: 0 0 4px; } .rg-cpmoney__grid { grid-template-columns: 1fr; gap: 24px; } .rg-cptable__cell { display: grid; gap: 2px; padding: 4px 0 4px 14px; border-left: 2px solid var(--rg-line); background: none; border-radius: 0; } .rg-cptable__cell.is-best { border-left-color: var(--rg-sage); background: #EDF1E6; border-radius: 0 6px 6px 0; padding: 10px 12px 10px 14px; } .rg-cptable__mobilehead { display: block; font-family: var(--rg-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rg-muted); } } /* ---------- Nav dropdown and service page links (1.37.0) --------------- */ .rg-header__nav li { position: relative; } .rg-header__nav .sub-menu { position: absolute; top: calc(100% + 10px); left: -18px; z-index: 40; min-width: 260px; margin: 0; padding: 10px; list-style: none; background: #FFFFFF; border: 1px solid var(--rg-line); border-radius: 10px; box-shadow: 0 16px 34px rgba(12, 52, 39, .12); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; } .rg-header__nav li:hover > .sub-menu, .rg-header__nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .rg-header__nav .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 15px; color: var(--rg-body); text-decoration: none; white-space: nowrap; } .rg-header__nav .sub-menu a:hover, .rg-header__nav .sub-menu a:focus-visible { background: #F1F3EB; color: var(--rg-deep); } /* The parent keeps a hit area between it and the panel. */ .rg-header__nav .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; } .rg-svprice__links { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 20px; } .rg-svprice__links a { font-size: 16px; font-weight: 600; color: var(--rg-green-700); text-decoration: none; } .rg-svprice__links a:hover { color: var(--rg-deep); } @media (max-width: 900px) { /* In the mobile panel the submenu is always open, indented under its parent. */ .rg-header__nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; margin: 6px 0 6px 14px; padding: 0 0 0 12px; border: 0; border-left: 2px solid var(--rg-line); border-radius: 0; background: none; box-shadow: none; } .rg-header__nav .menu-item-has-children > a::after { display: none; } } /* ---------- Test entry: review blocks (1.38.0) ------------------------- */ .rg-chip--reviewed { background: var(--rg-sage); color: var(--rg-deep); border-color: var(--rg-sage); } .rg-reviewnote { background: var(--rg-band); border-radius: 10px; padding: 30px 32px; display: grid; gap: 10px; } .rg-reviewnote p:not(.rg-stat__label) { margin: 0; font-size: 17px; line-height: 1.7; color: var(--rg-body); } .rg-reviewtook { margin-top: 48px; display: grid; gap: 12px; } .rg-reviewtook h2 { margin: 0; line-height: 1.15; } .rg-reviewtook p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--rg-body); } /* --------------------------------------------------------------------------- Test entry, rebuilt against the Figma reference frames. The result section moved off the dark green, so the lime emphasis used on deep sections needs a readable counterpart on the light background. --------------------------------------------------------------------------- */ .rg-grid--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 980px) { .rg-grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .rg-grid--5 { grid-template-columns: repeat(2, 1fr); } } /* The flat claim that opens each section. */ .rg-lede { font-family: var(--rg-serif); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; font-weight: 500; color: var(--rg-ink); margin: 12px 0 14px; max-width: 46ch; } .rg-on-deep .rg-lede { color: var(--rg-light); } /* Result tiles. Direction is carried by colour as well as by the sign. */ .rg-kpis { margin-top: 18px; gap: 16px; } .rg-kpis .rg-stat { border: 1px solid var(--rg-line); border-radius: var(--rg-radius); padding: 18px 20px; background: var(--rg-white); } .rg-section:not(.rg-on-deep) .rg-stat__value.is-emphasis { color: var(--rg-green-700); } .rg-stat__value.is-up { color: var(--rg-green-700); } .rg-stat__value.is-down { color: #8A5A2B; } .rg-stat__value.is-flat { color: var(--rg-muted); } .rg-result__detail { margin-top: 26px; } .rg-result__detail p { font-size: 17px; line-height: 1.65; color: var(--rg-body); margin: 0 0 14px; } /* Comparison columns: 3 across, 2 from 680px, 1 from 480px. Fixed counts rather than auto-fit, so Control and the variations stay on one row at the widths where the diagrams are still readable. */ .rg-compare { grid-template-columns: repeat(3, 1fr); align-items: start; } @media (max-width: 679px) { .rg-compare { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .rg-compare { grid-template-columns: 1fr; } } /* A wireframe is a diagram, not a photograph. Past about 360px the blocks just get bigger without saying more, so the whole column caps and the bullets stay aligned to the card above them. */ .rg-panel { max-width: 392px; } .rg-wire { margin: 0; background: var(--rg-white); border: 1px solid var(--rg-line); border-radius: 10px; padding: 16px; } .rg-wire img { display: block; width: 100%; height: auto; border-radius: 6px; margin-top: 10px; } /* Each panel is one column: the wireframe and the changes that belong to it. The label lives on the card, so it is never repeated underneath. */ .rg-panel { display: flex; flex-direction: column; } .rg-panel .rg-difflist { margin-top: 16px; } .rg-panel .rg-difflist li { font-size: 15px; line-height: 1.5; } .rg-changed__body p { font-size: 17px; line-height: 1.65; color: var(--rg-body); margin: 0 0 14px; } /* The meta strip is its own band now, so it needs balanced padding of its own. The 26px top margin on .rg-meta dates from when it sat inside the hero and would otherwise fight the section padding. */ .rg-metaband { padding-top: 30px; padding-bottom: 30px; } .rg-metaband .rg-meta { margin-top: 0; } /* What we took from it. Previously it inherited the centred measure used by the body sections, which on 2 short lines read as a mistake. It is the conclusion of the entry, so it gets its own two-column arrangement: the claim on the left, the reasoning on the right, full width and left aligned. The rule above it separates it from Shane's note, which is a card and a different voice. */ .rg-took { display: grid; gap: 20px; } @media (min-width: 900px) { .rg-took { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } } .rg-took__head .rg-lede { margin: 10px 0 0; max-width: 22ch; } .rg-took__body p { font-size: 17px; line-height: 1.65; color: var(--rg-body); margin: 0 0 16px; max-width: 62ch; } .rg-took__body p:last-child { margin-bottom: 0; } @media (min-width: 900px) { .rg-took__body { padding-top: 34px; } }