/* ===================================================================== LimeLight redesign (Studio revision 226) — scoped design system. Loaded ONLY on pages with `redesign: true`; every rule is scoped under `.rd` so retained pages are unaffected. Approved model: NAVY-default page with white + lime type, and warm-white rounded INSET PANELS (.rd-panel) for the Services grid and the Fleet + Loop group. No em/en dashes in copy. ===================================================================== */ @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; } .rd { --rd-navy: #11182E; --rd-blue: #263D60; --rd-lime: #6EC05C; --rd-paper: #F7F6F0; --rd-beige: #EBE8D6; --rd-green: #407732; /* dark green eyebrow on light */ --rd-onlight-body: #3a4a44; --rd-ondark-body: #d7dbe4; --rd-font: "Manrope", "Helvetica Neue", Arial, sans-serif; --rd-maxw: 1200px; } /* ---- base: DARK by default ---- */ .rd { background: var(--rd-navy); color: #fff; font-family: var(--rd-font); } .rd main { background: var(--rd-navy); } /* Inline padding only. The shorthand `padding: 0 24px` also set the BLOCK padding to zero, and at 0,2,0 it outranked `.rd-page section` at 0,1,1 - so every `section.rd-wrap` silently lost the page's vertical rhythm and sat flush against its neighbours. Several sections had a `padding-block` override added to win it back one at a time (home partners, home clients); those still win here on source order, so they keep the value they were tuned to. The ones that never got an override - the services testimonial among them - get the rhythm they always should have had. */ .rd .rd-wrap { max-width: var(--rd-maxw); margin: 0 auto; padding-inline: 24px; } .rd main h1, .rd main h2, .rd main h3 { font-family: var(--rd-font); color: #fff; line-height: 1.08; letter-spacing: -0.01em; } .rd main p { color: var(--rd-ondark-body); } /* QA r4 (site-wide vertical rhythm): the heading/paragraph margin reset lives at ZERO specificity (:where) so every component's own margin rule wins and the relationship-based rhythm applies on ALL redesign routes, not just the homepage. Previously `.rd main h1..h3 / p { margin:0 }` (0,1,2) outranked the components' own (0,1,1)/(0,1,0) margin declarations and collapsed every stacked text pair to line-height leading. This keeps the non-margin resets (font/colour/leading) at their original specificity and only relaxes margins. Retained (non-.rd) templates like team-member are unaffected. Eyebrows keep their explicit .rd .rd-eyebrow margin (0,2,0). */ :where(.rd main h1, .rd main h2, .rd main h3, .rd main p) { margin: 0; } .rd-page section { padding: clamp(56px, 8vw, 104px) 0; } /* eyebrow: lime on dark (default), dark green on light panels */ .rd .rd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.4; text-transform: uppercase; color: var(--rd-lime); margin: 0 0 14px; } /* ---- header (navy on redesign pages) ---- */ /* At rest the bar takes the colour the page opens on, via --header-bg (set per page type in styles.css). This used to be a flat `transparent`, which sounds like the same thing but is not: the bar sits ABOVE the hero in flow, not over it, so transparent showed the body navy rather than the gradient below it. Reading the variable here keeps the override in place for the nav link colours while letting the page choose the ground. */ .rd .site-header { background: var(--header-bg, transparent); } .rd .site-header.is-stuck { background: var(--rd-navy); } .rd .site-header .nav__list > li > a, .rd .site-header .nav__toggle-link { color: #fff; } /* Current section, green. The base rule (.nav__list a.is-active) is 0,2,0 and loses to the white above it at 0,3,0, which is why the top-level items never turned green on redesign pages while the submenu entries - not matched by `> li > a` - did. --green is already the lime, which is the accent that holds up on the navy and the blue. */ .rd .site-header .nav__list > li > a.is-active, .rd .site-header .nav__toggle-link.is-active { color: var(--rd-lime); } /* The header CTA is text and an arrow now (styles.css), so this no longer forces a fill - it just keeps the redesign's lime and casing on redesign pages. The drawer's filled treatment at <=1024px is deliberately left alone. */ .rd .site-header .nav__cta { color: var(--rd-lime); text-transform: none; font-weight: 700; } /* :not(.nav__cta) because the header CTA carries BOTH classes - without it this rule kept painting the fill back on at 0,3,0 over the text treatment at 0,1,1. */ .rd .site-header .btn--cta:not(.nav__cta) { background: var(--rd-lime); color: var(--rd-navy); text-transform: none; border-radius: 4px; font-weight: 700; } /* Footer is the explicit exception to the new Manrope type: the retained footer keeps its existing Montserrat. The redesign's .rd { font-family: Manrope } would otherwise cascade into it. Scope to the footer + its heading (whose own font-family: var(--sans) can be remapped to Manrope by body-level --sans overrides on some pages). Only the logo changed. */ .rd .site-footer, .rd .site-footer__heading { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---- CTA link + solid button ---- */ .rd .rd-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--rd-lime); } .rd .rd-cta .rd-arrow { text-decoration: none; display: inline-block; transition: transform .25s ease; } /* Arrow CTAs bounce on hover, in the direction the arrow points. The trigger is always the parent link, button or card, so hovering the words or the arrow itself both fire it. Pointer devices only: on touch a tap would leave the arrow mid-animation. The glyph itself is the site's approved vocabulary: an up-right arrow means the link takes you somewhere else, a down arrow means it moves you down this page, and a form submit carries no arrow at all. */ @keyframes rd-arrow-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } 55% { transform: translateY(0); } 78% { transform: translateY(-3px); } } @media (hover: hover) { .rd .rd-cta:hover .rd-arrow, .rd .rd-btn:hover .rd-arrow, .rd-work-card:hover .rd-arrow, .rd-service--link:hover .rd-cta .rd-arrow, .rd-team-card:hover .rd-arrow { animation: rd-arrow-bounce .6s ease; transform: none; } /* A down arrow bounces down, so the motion agrees with what the arrow is promising. */ .rd .rd-cta:hover .rd-arrow--down, .rd .rd-btn:hover .rd-arrow--down { animation-name: rd-arrow-bounce-down; } } @keyframes rd-arrow-bounce-down { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(6px); } 55% { transform: translateY(0); } 78% { transform: translateY(3px); } } .rd .rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--rd-lime); color: var(--rd-navy); font-family: var(--rd-font); font-weight: 700; font-size: 14px; text-decoration: none; padding: 12px 22px; border-radius: 4px; border: 0; cursor: pointer; transition: background-color .2s ease, transform .15s ease; } .rd .rd-btn:hover { background: #85CA74; } .rd .rd-btn:active { background: #5EAB4C; } .rd .rd-btn:focus-visible { outline: 2px solid var(--rd-navy); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(110, 192, 92, 0.85); } .rd .rd-btn .rd-arrow { text-decoration: none; display: inline-block; } /* closing CTA centered */ .rd .rd-cta-band { text-align: center; } .rd .rd-cta-band .rd-btn, .rd .rd-cta-band .rd-cta { margin-inline: auto; } /* ---- warm-white inset panel ---- */ .rd .rd-panel { background: var(--rd-paper); color: var(--rd-navy); border-radius: 44px; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); } .rd .rd-panel h1, .rd .rd-panel h2, .rd .rd-panel h3 { color: var(--rd-navy); } .rd .rd-panel p { color: var(--rd-onlight-body); } .rd .rd-panel .rd-eyebrow { color: var(--rd-green); } .rd .rd-panel .rd-cta { color: var(--rd-green); } .rd .rd-panel-section { padding-top: 0 !important; } /* ===================================================================== Approved LOOP animation component (option 1). ===================================================================== */ .ll-loop-figure { display: block; container-type: inline-size; width: 100%; margin: 0; background: transparent; color: var(--rd-navy); font-family: var(--rd-font); } .ll-loop-figure svg { display: block; width: 100%; height: auto; max-width: 1000px; margin: auto; } .ll-loop-mobile { display: none; } /* Text legend is the COMPACT-mobile counterpart: hidden on desktop (the full SVG already carries the four stage descriptions), shown only with the compact mobile SVG. */ /* Desktop: the SVG is role=img, so the four stage explanations are kept in the accessibility tree as a visually-hidden long description (not display:none). Mobile shows them visibly. */ .ll-loop-copy { margin: 0; padding: 0; list-style: none; gap: 20px; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ll-loop-copy li { font-size: 16px; line-height: 1.55; color: var(--rd-navy); } .ll-loop-copy strong { display: block; font-size: 18px; margin-bottom: 4px; } /* The pause glyph is off the block visually (Brandee: "these 2 green lines are still on this block") but the mechanism stays. Reduced-motion users never see motion at all - the inline SVG stops all of its own animation under that query - and everyone else can still reach the control by keyboard, where :focus-within reveals it. Same pattern as a skip link. */ .ll-loop-controls { display: flex; justify-content: flex-end; height: 0; padding: 0; overflow: hidden; } .ll-loop-controls:focus-within { height: auto; padding: 8px 0; overflow: visible; } /* Pause control: lime on navy (default surface), dark green on a warm-white panel. #407732 on navy was only 3.27:1; lime clears AA. Keyboard/touch target unchanged. */ .ll-loop-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--rd-lime); border: 0; background: transparent; padding: 6px; cursor: pointer; } /* Icon-only pause/play. The visible label was removed at Brandee's request; the control itself stays because the ring animates continuously, and its name is carried by aria-label, which main.js swaps between "Pause animation" and "Play animation". */ /* Needs .ll-loop-figure to outrank `.ll-loop-figure svg { width:100% }` above (0,1,1), which was stretching the control icon to the full figure width. */ .ll-loop-figure .ll-loop-ico { width: 16px; height: 16px; max-width: none; margin: 0; display: inline-block; fill: currentColor; } .ll-loop-controls button .ll-loop-ico--play { display: none; } .ll-loop-controls button[aria-pressed="true"] .ll-loop-ico--pause { display: none; } .ll-loop-controls button[aria-pressed="true"] .ll-loop-ico--play { display: inline-block; } .ll-loop-controls button:focus-visible { outline: 2px solid var(--rd-lime); outline-offset: 5px; } .rd-panel .ll-loop-controls button { color: var(--rd-green); } .rd-panel .ll-loop-controls button:focus-visible { outline-color: var(--rd-green); } .ll-loop-figure[data-loop-paused] svg * { animation-play-state: paused !important; } @container (max-width: 740px) { .ll-loop-desktop { display: none; } .ll-loop-mobile { display: block; } .ll-loop-copy { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin: 20px 0 0; display: grid; } } /* Mobile: Brandee asked not to show the stage copy under the animation. The cropped mobile ring renders none of the four stage descriptions, so this list is their only source on narrow screens - it therefore reverts to the same visually-hidden treatment desktop uses, off-screen but still announced, rather than display:none which would drop the content. */ @container (max-width: 740px) { .ll-loop-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; margin: 0; } } @media (prefers-reduced-motion: reduce) { .ll-loop-controls { display: none; } } /* ===================================================================== HOME (r226) ===================================================================== */ /* hero: continuous blue -> navy gradient (also covers intro + clients) */ .rd-home .rd-hero, .rd-home .rd-intro, .rd-home .rd-clients { background: transparent; } .rd-home .rd-topwrap { background: linear-gradient(180deg, #263D60, #11182E); } .rd-hero { padding-top: clamp(56px, 8vw, 110px) !important; padding-bottom: clamp(28px, 4vw, 56px) !important; position: relative; } .rd-hero__title { font-family: var(--rd-font); font-weight: 800; letter-spacing: -0.02em; line-height: 1.0; font-size: clamp(44px, 9vw, 104px); max-width: 14ch; color: #fff; } .rd-hero__accent { color: var(--rd-lime); } .rd-hero__lead { margin-top: 24px; font-size: 18px; line-height: 1.55; max-width: 48ch; color: var(--rd-ondark-body); } .rd-hero__cta { margin-top: 32px; } /* intro two-column, right copy aligns to first heading line */ .rd-intro { padding-top: clamp(28px,4vw,48px) !important; } .rd-intro__kicker { font-weight: 700; color: #fff; } /* clients: centered heading + one spaced row of white logos on navy */ .rd-clients { text-align: center; } .rd-clients__title { font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 40px; color: #fff; } .rd-logo-row { list-style: none; margin: 0; padding: 0; } /* Client logos: six equally-spaced slots that gently autoscroll (two identical tracks). Pause on hover/focus; reduced-motion falls back to a static single row of six. */ .rd-logo-marquee { display: flex; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .rd-logo-row--marquee { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: clamp(48px, 7vw, 96px); padding-right: clamp(48px, 7vw, 96px); animation: rd-logo-scroll 40s linear infinite; will-change: transform; } .rd-logo-row--marquee li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .rd-logo-row--marquee img { height: 46px; width: auto; max-width: 100%; object-fit: contain; } .rd-logo-marquee:hover .rd-logo-row--marquee, .rd-logo-marquee:focus-within .rd-logo-row--marquee { animation-play-state: paused; } @keyframes rd-logo-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (max-width: 760px) { .rd-logo-row--marquee img { height: 38px; } } @media (prefers-reduced-motion: reduce) { /* Reduced motion: keep ONE horizontal row (the rejected two-row wrap is gone). Stop the animation, hide the duplicate track, and allow safe manual horizontal scroll within the band so there is no document-level overflow; logo sizing and spacing stay normal. */ .rd-logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .rd-logo-row--marquee { animation: none; } .rd-logo-row--marquee[aria-hidden] { display: none; } } /* Tech-partners band (home): a deliberate 4-column x 2-row grid of the eight partner logos with consistent centred cells and a generous row gap (was 3/3/2, which left Google Partner + Microsoft reading as small outliers). The logos are OPTICALLY balanced, not height-normalised: the six wide wordmarks sit at ~38px, while the compact Google Partner badge and the Microsoft mark are sized taller so they carry similar visual weight. Aspect ratios are preserved (width:auto), nothing is cropped or distorted, and max-width keeps every mark inside its cell. Two columns on phones. */ .rd-logo-row--partners { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 44px; row-gap: 56px; align-items: center; justify-items: center; } .rd-logo-row--partners > li { display: flex; align-items: center; justify-content: center; width: 100%; } .rd-logo-row--partners img { height: 38px; width: auto; max-width: 100%; object-fit: contain; } .rd-logo-row--partners a { display: inline-flex; align-items: center; max-width: 100%; } .rd-logo-row--partners a:focus-visible { outline: 2px solid var(--rd-lime); outline-offset: 4px; } /* Optically enlarge the two compact marks so they match the wordmarks' visual weight rather than reading as tiny outliers. Google Partner is a near-square badge; Microsoft is a squarer wordmark. */ .rd-logo-row--partners img[alt="Google Partner"] { height: 56px; } .rd-logo-row--partners img[alt="Microsoft"] { height: 46px; } @media (max-width: 900px) { .rd-logo-row--partners { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } } /* featured trio: tall PORTRAIT photos, straight corners, on navy */ .rd-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* Three cards, so the tablet step stays one-up rather than two-up: two columns would leave the third card alone on its own row. The column was capped at 460px though, which marooned it in the middle of a 720px container around 768px; it now uses the width it has. */ @media (max-width: 900px) { .rd-featured__grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; } } /* Flex column at full row height so the "View case study" link sits on a common baseline across a row, however many lines each description runs to. Grid rows already stretch. */ .rd-work-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: #fff; } .rd-work-card__media { display: block; overflow: hidden; border-radius: 0; aspect-ratio: 3 / 4; } .rd-work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .rd-work-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 18px; } .rd-work-card .rd-cta { margin-top: auto; } .rd-work-card__brand { display: block; font-weight: 600; font-size: 24px; line-height: 1.25; color: #fff; margin: 0; } .rd-work-card__stat { display: block; margin: 6px 0 12px; color: var(--rd-ondark-body); } .rd-work-card .rd-cta { color: var(--rd-lime); } .rd-work-card .rd-arrow { transition: transform .25s ease; display: inline-block; } @media (hover: hover) { .rd-work-card:hover .rd-work-card__media img { transform: scale(1.03); } } /* services grid (inside warm-white panel) */ .rd-services__title { font-size: clamp(26px, 3.6vw, 42px); } .rd-services__lead { margin-top: 12px; font-size: 18px; max-width: 52ch; } .rd-services__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; } @media (max-width: 900px) { .rd-services__grid { grid-template-columns: 1fr; gap: 32px; } } .rd-service { } .rd-service__num { font-weight: 800; color: var(--rd-green); margin-bottom: 10px; font-size: 15px; } .rd-service h3 { font-size: 21px; margin-bottom: 10px; color: var(--rd-navy); } .rd-service p { color: var(--rd-onlight-body); line-height: 1.55; } .rd-service__tags { margin-top: 10px; font-size: 14px; color: var(--rd-green); } /* Homepage service cards link to their service page. Whole card is the hit area; aria-label gives the link the service name rather than the full card text. */ .rd-service--link { display: block; text-decoration: none; color: inherit; } .rd-service--link h3 { transition: color .2s ease; } @media (hover: hover) { .rd-service--link:hover h3 { color: var(--rd-green); } } .rd-panel .rd-service--link:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 6px; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .rd-service--link h3 { transition: none; } } /* "See service" affordance inside the card link. It is a span, not an anchor, because the whole card is already an and anchors cannot nest. Same pattern as .rd-work-card, which carries a inside its card anchor. The arrow's transition and its reduced-motion reset are already handled by the shared .rd-cta rules. */ .rd-service--link .rd-cta { margin-top: 16px; } /* Brandee asked for the label and arrow to read as body copy rather than green, so this takes the same --rd-onlight-body as `.rd-service p` directly above it. Needs four classes to beat `.rd .rd-panel .rd-cta` (0,3,0) at line 84, which paints every other panel CTA green; that rule is left alone so CTAs elsewhere on light panels are unchanged. The arrow sets no colour of its own, so it follows currentColor from here. */ .rd .rd-panel .rd-service--link .rd-cta { color: var(--rd-onlight-body); } /* detailed service cards (Services page) */ .rd-service--card { display: flex; flex-direction: column; } .rd-service__icon { width: 40px; height: 40px; margin-bottom: 14px; } .rd-service__list { margin: 12px 0 16px; padding-left: 18px; color: var(--rd-onlight-body); line-height: 1.5; } .rd-service__list li { margin-bottom: 4px; } .rd-service--card .rd-cta { margin-top: auto; } /* Martin Dingman work band (navy, two columns) */ .rd-workband__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .rd-workband__inner { grid-template-columns: 1fr; gap: 28px; } } .rd-workband__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: 3 / 4; } .rd-workband__body h2 { font-size: clamp(26px, 3.6vw, 42px); margin-bottom: 16px; } .rd-workband__body p { color: var(--rd-ondark-body); line-height: 1.6; margin-bottom: 12px; } .rd-workband__body p:last-child { margin-bottom: 0; } .rd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; } .rd-stats dt { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--rd-lime); } .rd-stats dd { margin: 4px 0 0; font-size: 14px; color: var(--rd-ondark-body); } .rd-workband__note { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; } /* single testimonial (navy, oversized white marks, no portrait/carousel) */ .rd-quote-single { max-width: 62ch; margin: 0 auto; text-align: center; } .rd-quote-single blockquote { position: relative; margin: 0; } .rd-quote-single p { position: relative; margin: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 600; line-height: 1.4; color: #fff; padding: 56px 8px 52px; } .rd-quote-single p::before, .rd-quote-single p::after { content: ""; position: absolute; width: 52px; height: 40px; background-repeat: no-repeat; background-size: contain; } .rd-quote-single p::before { top: 0; left: 0; background-image: url("/assets/img/r226/quote-open.svg"); background-position: left top; } .rd-quote-single p::after { right: 0; bottom: 0; background-image: url("/assets/img/r226/quote-close.svg"); background-position: right bottom; } .rd-quote-single cite { display: block; margin-top: 8px; font-size: 15px; font-style: normal; font-weight: 700; color: var(--rd-ondark-body); } @media (max-width: 640px) { .rd-quote-single p { padding: 48px 4px 44px; } .rd-quote-single p::before, .rd-quote-single p::after { width: 40px; height: 31px; } } /* fleet + loop combined warm-white panel */ .rd-fleetloop .rd-panel { display: block; } .rd-fleetloop__fleet { max-width: 68ch; } .rd-fleetloop__fleet h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 16px; } .rd-fleetloop__fleet p { font-size: 18px; line-height: 1.6; margin-bottom: 24px; } .rd-fleetloop__loop { margin-top: 56px; } .rd-fleetloop__loop h3 { font-size: clamp(22px, 3vw, 32px); color: var(--rd-navy); margin-bottom: 24px; } /* priorities / engagement: bordered cards on navy */ .rd-priorities__title { font-size: clamp(26px, 3.6vw, 42px); } .rd-priorities__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .rd-priorities__grid { grid-template-columns: 1fr; } } .rd-priority { border: 1px solid rgba(255,255,255,.22); border-radius: 0; padding: 28px 24px; } .rd-priority h3 { font-size: 20px; margin: 8px 0 10px; color: #fff; } .rd-priority p { color: var(--rd-ondark-body); line-height: 1.55; } .rd-service__num, .rd-priority .rd-service__num { color: var(--rd-lime); } .rd-panel .rd-service__num { color: var(--rd-green); } /* closing / cta bands */ .rd-closing__title { font-size: clamp(26px, 3.6vw, 42px); margin: 12px auto 24px; } .rd-closing__lead { max-width: 60ch; margin: 0 auto 24px; color: var(--rd-ondark-body); } .rd-closing__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; } .rd-fleet__title, .rd-fleet__lead { } .rd-fleet__lead { margin: 16px 0 24px; color: var(--rd-ondark-body); line-height: 1.6; font-size: 18px; max-width: 62ch; } .rd-loop__title { margin-bottom: 28px; } /* partners */ .rd-partners { text-align: center; } .rd-partners__title { font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 36px; } /* Homepage tech-partners rhythm: .rd-wrap zeroes the section's vertical padding and .rd main h1..h3{margin:0} defeats the title's own margin, so the heading sat flush on the logo row (.rd-clients escapes this via its explicit padding-top + taller marquee). Restore the section padding and a real heading-to-logos gap using the same tokens as .rd-clients. */ .rd-home .rd-partners { padding-block: clamp(28px, 4vw, 48px); } .rd-home .rd-partners__title { margin-bottom: 28px; } /* Clients strip: separate it from the intro above and the work band below. The section previously carried padding-top only (and needed !important to beat `.rd .rd-wrap`s `padding: 0 24px`), so the logo row sat flush against the following section. Uses the same `.rd-home` + padding-block approach as .rd-partners above, which outranks `.rd .rd-wrap` on source order at equal specificity, so no !important is needed. */ /* More air above the eyebrow so the clients strip separates from the intro copy; the space beneath it is unchanged. */ .rd-home .rd-clients { padding-block: clamp(72px, 9vw, 128px) clamp(40px, 5vw, 72px); } /* ===================================================================== HOME vertical rhythm (r226 QA round 2) Root cause: `.rd main h1,h2,h3 { margin:0 }` and `.rd main p { margin:0 }` (specificity 0,1,2) zero every heading/paragraph margin a component declares with a single class (0,1,0) or a `.block el` rule (0,1,1). Grids are
s so they keep their margins; headings, body copy and CTAs lost theirs, so every stacked text relationship collapsed to line-height leading (~5-6px) with no hierarchy, and the partners heading physically touched the logos. Eyebrows are exempt because `.rd .rd-eyebrow` is already 0,2,0. The reset is shared by every redesign page, so rather than weaken it we reinstate the intended spacing BY RELATIONSHIP, scoped under `.rd-home` (0,2,x) so it outranks the reset, reusing the values the components already intended. Spacing only: no copy, colour, grid, font or layout change. `.rd-clients` already reads correctly and is left untouched; the partners rule above is part of the same system (section heading -> content block = largest gap). --} /* number / kicker -> heading : tight, deliberate */ .rd-home .rd-service__num { margin-bottom: 10px; } /* heading -> body copy : medium (varies by context, hero is the most generous) */ .rd-home .rd-services__lead { margin-top: 12px; } .rd-home .rd-service h3, .rd-home .rd-insight__title { margin-bottom: 10px; } .rd-home .rd-priority h3 { margin: 8px 0 10px; } .rd-home .rd-workband__body h2, .rd-home .rd-fleetloop__fleet h2 { margin-bottom: 16px; } .rd-home .rd-fleetloop__loop h3 { margin-bottom: 24px; } .rd-home .rd-splithead__body p { margin-bottom: 14px; } .rd-home .rd-splithead__body p:last-child { margin-bottom: 0; } /* body copy -> CTA / solid button : generous (buttons carry their own fill) */ .rd-home .rd-hero__lead { margin-top: 24px; } .rd-home .rd-hero__cta { margin-top: 32px; } .rd-home .rd-fleetloop__fleet p { margin-bottom: 24px; } .rd-home .rd-insight__desc { margin-bottom: 20px; } .rd-home .rd-service__tags { margin-top: 10px; } /* centered closing band: eyebrow -> title -> button */ .rd-home .rd-closing__title { margin: 12px auto 24px; } /* insights: bordered TEXT cards with descriptions, no images */ .rd-insights__title { font-size: clamp(26px, 3.6vw, 42px); } .rd-insights__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .rd-insights__grid { grid-template-columns: 1fr; } } .rd-insight { border: 1px solid rgba(255,255,255,.22); padding: 28px 24px; display: flex; flex-direction: column; } .rd-insight__title { font-size: 19px; margin-bottom: 10px; color: #fff; } .rd-insight__desc { color: var(--rd-ondark-body); line-height: 1.5; margin-bottom: 16px; } .rd-insight .rd-cta { margin-top: auto; } /* ===================================================================== Internal style-guide reference page ===================================================================== */ .rd-styleguide { background: var(--rd-paper); color: var(--rd-navy); } .rd-styleguide main { background: var(--rd-paper); } .rd-styleguide h1, .rd-styleguide h2, .rd-styleguide h3 { color: var(--rd-navy); } .rd-styleguide p { color: var(--rd-onlight-body); } .rd-styleguide .rd-eyebrow { color: var(--rd-green); } .rd-styleguide .sg-hero { padding: 72px 0 24px; } .rd-styleguide .sg-hero h1 { font-size: clamp(32px, 6vw, 56px); } .rd-styleguide .sg-section { padding: 32px 0; border-top: 1px solid rgba(17,24,46,.12); } .rd-styleguide h2.sg-h { font-size: 24px; margin-bottom: 18px; } .rd-styleguide .sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .rd-styleguide .sg-swatch { border-radius: 12px; overflow: hidden; border: 1px solid rgba(17,24,46,.1); background: #fff; } .rd-styleguide .sg-swatch .chip { height: 84px; } .rd-styleguide .sg-swatch .meta { padding: 10px 12px; font-size: 13px; } .rd-styleguide .sg-swatch .meta b { display: block; } .rd-styleguide .sg-loop { max-width: 1000px; } /* ===================================================================== About / Services / SEO shared components (retain earlier structure; inherit the dark base. Light content sits inside .rd-panel where used). ===================================================================== */ /* The services hero closes straight into the services panel: the "Find you -> Choose you -> Come back" sequence was removed at Brandee's request, and the hero's tail is tightened with it so the CTA does not sit over a hole. Other .rd-hero users keep the standard tail. */ .rd-services .rd-hero { padding-bottom: clamp(20px, 2.6vw, 36px) !important; } /* Breadcrumb. One line, because a path stacked over two lines reads as two separate labels rather than a trail. Real