/* ========================================================= Service - Reaction Biology Platform Template: templates/template-rb-platform.php ========================================================= */ /* Override the global `body { overflow-x: hidden }` (style.css) for this template only. `hidden` makes a scroll container, which silently breaks `position: sticky` (e.g. the Locations intro). `clip` still prevents horizontal scrollbars but does NOT establish a scroll container, so sticky works. Scoped via the page-template class WordPress puts on . */ body.page-template-template-rb-platform { overflow-x: clip; } /* ---------- Hero banner ---------- */ .page-template-template-rb-platform .service-hero-section { position: relative; } /* ---------- Headings ---------- */ .page-template-template-rb-platform h2 { font-size: 38px; line-height: 65px; font-weight: 300; margin-bottom: 30px; } /* ========================================================= Service About Section (Figma 14448-6645) ========================================================= */ .service-about { display: flex; align-items: center; gap: 80px; padding: 80px 140px; box-sizing: border-box; } .service-about__inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 929px; } .service-about__content { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; width: 100%; word-break: break-word; } /* Heading — scoped above the generic .page-template-template-rb-platform h2 rule so the Figma weight (500) and spacing win without !important. */ .page-template-template-rb-platform .service-about__title { margin: 0; font-family: 'Figtree', sans-serif; font-size: 38px; line-height: 65px; font-weight: 500; color: #252525; } .service-about__desc, .service-about__desc p { font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; font-weight: 400; color: #0f2318; } .service-about__desc { width: 100%; } /* Preserve CMS paragraph rhythm (Figma paragraph-spacing: 15px) without adding stray space before the first / after the last paragraph. */ .service-about__desc > :first-child { margin-top: 0; } .service-about__desc > :last-child { margin-bottom: 0; } .service-about__desc p { margin: 0 0 15px; } .service-about__desc p:last-child { margin-bottom: 0; } /* ---------- Responsive ---------- */ /* Laptop */ @media (max-width: 1440px) { .service-about { padding: 70px 80px; gap: 60px; } } /* Tablet */ @media (max-width: 1024px) { .service-about { padding: 60px 40px; gap: 40px; } .page-template-template-rb-platform .service-about__title { font-size: 32px; line-height: 1.3; } } /* Mobile */ @media (max-width: 767px) { .service-about { padding: 40px 20px; gap: 30px; } .service-about__content { gap: 20px; } .page-template-template-rb-platform .service-about__title { font-size: 26px; line-height: 1.3; } .service-about__desc, .service-about__desc p { font-size: 16px; line-height: 28px; } } /* ========================================================= Our Platform Section (Figma 14448-6677) ========================================================= */ .our-platform { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 140px; /* horizontal only — no vertical padding */ box-sizing: border-box; } /* Heading — scoped above the generic .page-template-template-rb-platform h2 rule so the Figma weight (500) wins without !important. */ .page-template-template-rb-platform .our-platform__title { margin: 0; font-family: 'Figtree', sans-serif; font-size: 38px; line-height: 65px; font-weight: 500; color: #252525; margin-bottom: 20px; } /* ---------- Scroll-driven capability timeline (Figma 14689-7207) ---------- Replaces the previous static diagram image. The 1396x632 canvas is scaled responsively by rb-platform-scroll.js. All generic class names below (.pill, .group, .phase, .panel, .rail, .cluster, .canvas, .scaler, .mobile-list, .m-*) are deliberately scoped under .our-platform so they can't collide with markup elsewhere in the theme. */ .our-platform { /* Design tokens scoped to the section so they don't leak globally. */ --op-green: #066938; --op-text: #0f2318; --op-panel-bg: radial-gradient(120% 130% at 0% 100%, #e7f1e9 0%, #f3f8f3 42%, #ffffff 72%); --op-hdr: linear-gradient(90deg, #11301c 0%, #1c4530 28%, #356046 55%, #5c8568 80%, #6ba587 100%); --op-cw: 1396px; --op-ch: 632px; } /* .rb-stage class is retained on the section as a JS/CSS hook but no longer forces a 100vh full-viewport pin — the sticky heading + scaler-only pin keep the section at natural content height, avoiding a layout shift when GSAP inserts its pin-spacer around the .scaler. Mobile padding tweak lives in the responsive block below. */ .our-platform .scaler { position: relative; width: 100%; overflow: hidden; } .our-platform .canvas { position: absolute; top: 0; left: 0; width: var(--op-cw); height: var(--op-ch); transform-origin: top left; } .our-platform .panel { position: absolute; left: 68px; top: 37px; right: 0; bottom: 0; background: var(--op-panel-bg); border-radius: 20px; } .our-platform .phases { position: absolute; left: 68px; top: 0; width: 1328px; display: flex; justify-content: space-between; align-items: center; padding: 20px 60px; border-radius: 999px; background: var(--op-hdr); color: #fff; font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 16px; line-height: 24px; margin: 0; } .our-platform .phase { position: relative; z-index: 1; margin: 0; } .our-platform .progress-track { position: absolute; left: 60px; right: 60px; bottom: 9px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); } .our-platform .progress-fill { position: absolute; left: 60px; bottom: 9px; height: 3px; width: calc(100% - 120px); border-radius: 2px; background: #fff; transform-origin: left center; } .our-platform .rail { position: absolute; left: 0; top: 100px; width: 50px; display: flex; flex-direction: column; gap: 5px; align-items: center; } .our-platform .railcell { width: 50px; display: flex; align-items: center; justify-content: center; } .our-platform .group { transform: rotate(-90deg); white-space: nowrap; border: 1px solid var(--op-green); border-radius: 99px; background: #fff; color: var(--op-green); padding: 6px 22px; font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; font-weight: 400; } .our-platform .cluster { position: absolute; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .our-platform .pill { display: flex; align-items: center; white-space: nowrap; border: 1px solid var(--op-green); border-radius: 99px; background: #fff; padding: 3px 25px; font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; color: var(--op-text); min-height: 38px; } .our-platform .pill .lead { font-weight: 700; margin-right: 4px; } .our-platform .pill.bold { font-weight: 700; } /* Reveal — pure CSS transitions, no GSAP/pinning. Hidden states apply only when JS is active, on desktop, and motion is allowed. rb-platform-scroll.js adds `.rb-in` to each element as page scroll crosses its point, so pills load in progressively AS YOU SCROLL (reversible), and the progress bar's scaleX is set inline from the same scroll progress. Progressive enhancement: content stays fully readable if the script is blocked (nothing is hidden without `.js`). */ @media (min-width: 768px) and (prefers-reduced-motion: no-preference) { /* Each pill slides in left -> right and fades up. rb-platform-scroll.js adds `.rb-in` to one more pill each time scroll progress crosses its point, so they come in one-by-one AS YOU SCROLL (reversible). The easeOutQuint curve gives a smooth, decelerating glide. */ .js .our-platform .pill { opacity: 0; transform: translateX(-48px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } .js .our-platform .pill.rb-in { opacity: 1; transform: none; } .js .our-platform .phase { opacity: 0.32; transition: opacity 0.5s ease; } .js .our-platform .phase.rb-in { opacity: 1; } .js .our-platform .group { opacity: 0.34; transition: opacity 0.5s ease; } .js .our-platform .group.rb-in { opacity: 1; } /* scaleX is set inline from scroll progress; short transition so the bar tracks the scroll instead of lagging. */ .js .our-platform .progress-fill { transform: scaleX(0); transition: transform 0.15s linear; } } /* Mobile reflow (populated by rb-platform-scroll.js from the .cluster DOM) */ .our-platform .mobile-list { display: none; } .our-platform .m-group { margin: 0 0 18px; } .our-platform .m-glabel { color: var(--op-green); font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; } .our-platform .m-pill { border: 1px solid var(--op-green); border-radius: 14px; background: #fff; padding: 10px 16px; margin: 8px 0; font-family: 'Figtree', sans-serif; font-size: 15px; line-height: 1.4; color: var(--op-text); } .our-platform .m-pill .lead { font-weight: 700; } /* Mobile reveal — each group fades/rises in as it enters (rb-platform-scroll.js adds `.is-in` to the .m-group). Staggered via the same `--d` custom property. */ @media (prefers-reduced-motion: no-preference) { .js .our-platform .m-pill, .js .our-platform .m-glabel { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: var(--d, 0s); } .js .our-platform .m-group.is-in .m-pill, .js .our-platform .m-group.is-in .m-glabel { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ /* Laptop */ @media (max-width: 1440px) { .our-platform { padding: 0 80px; gap: 0; } } /* Tablet */ @media (max-width: 1024px) { .our-platform { padding: 0 40px; gap: 0; } .page-template-template-rb-platform .our-platform__title { font-size: 32px; line-height: 1.3; } } /* Mobile — under 768px the canvas is hidden and the mobile-list stack takes over. Tablets (iPad, 768-1024px) keep the scaled canvas + scroll-linked reveal; only phones fall back to the stacked list. */ @media (max-width: 767px) { .our-platform.rb-stage { min-height: auto; padding: 8px 0 32px; } .our-platform .scaler { display: none; } .our-platform .mobile-list { display: block; } } @media (max-width: 767px) { .our-platform { padding: 0 20px 40px; gap: 30px; } .page-template-template-rb-platform .our-platform__title { font-size: 26px; line-height: 1.3; } } /* ========================================================= Locations Section (Figma 14689-6739) ========================================================= */ .locations { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 120px; background: linear-gradient(112.41deg, #ecf1f7 12.45%, #eaf3ec 72.34%); margin-top: 120px; } .locations__inner { display: flex; gap: 60px; align-items: flex-start; width: 100%; box-sizing: border-box; } /* ---- Left intro column (CMS WYSIWYG) — sticky alongside the cards ---- */ .locations__intro { flex-shrink: 0; align-self: flex-start; width: 606px; padding-top: 80px; position: sticky; top: 20px; } /* Heading — matches .our-platform__title font properties. Scoped above the generic .page-template-template-rb-platform h2 rule so weight 500 wins without !important. */ .page-template-template-rb-platform .locations__title { margin: 0 0 24px; font-family: 'Figtree', sans-serif; font-size: 38px; line-height: 65px; font-weight: 500; color: #252525; } .locations__description { font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; color: #2b2b2b; } .locations__description ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .locations__description li { position: relative; padding-left: 17px; } /* Brand-green dot marker (Figma point icon) */ .locations__description li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background-color: #066938; border-radius: 100px; } .locations__description p { margin: 0 0 20px; } .locations__description > :last-child, .locations__description li:last-child { margin-bottom: 0; } .locations__description strong, .locations__description b { font-weight: 700; } /* ---- Right column: stacked location cards ---- */ .locations__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; padding-top: 80px; } .location-card { display: flex; gap: 20px; align-items: flex-start; width: 100%; padding: 20px; background: #fff; border-radius: 8px; box-sizing: border-box; transition: transform 0.4s ease; } article.location-card:hover { filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1)); } .location-card__media { flex-shrink: 0; width: 188px; height: 188px; border-radius: 4px; overflow: hidden; } .location-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } article.location-card:hover img.location-card__image { transform: scale(1.06); } .location-card__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .location-card__head { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } /* Scoped above the generic template heading rules so the Figma type wins. */ .page-template-template-rb-platform .location-card__name { margin: 0; font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; font-weight: 700; color: #0f2318; } .location-card__address { font-family: 'Figtree', sans-serif; font-size: 16px; line-height: 24px; font-weight: 300; color: #0f2318; opacity: 0.6; } .location-card__capabilities { width: 100%; font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; color: #0f2318; } .location-card__capabilities ul { margin: 0; padding-left: 27px; list-style: disc; } .location-card__capabilities li { margin: 0; } .location-card__capabilities p { margin: 0 0 10px; } .location-card__capabilities > :last-child { margin-bottom: 0; } /* ---------- Responsive ---------- */ /* Laptop */ @media (max-width: 1440px) { .locations__inner { padding: 0 80px; gap: 40px; } .locations__intro { width: 480px; } } /* Tablet — collapse to a single column; intro is no longer sticky */ @media (max-width: 1280px) { .locations__inner { flex-direction: column; padding: 0 40px; gap: 40px; } .locations__intro { position: static; top: auto; width: 100%; padding-top: 60px; } .page-template-template-rb-platform .locations__title { font-size: 32px; line-height: 1.3; } .locations__list { width: 100%; padding-top: 0; } } /* Mobile — stack image above text inside each card */ @media (max-width: 767px) { .locations { padding-bottom: 60px; margin-top: 60px; } .locations__inner { padding: 0 20px; gap: 30px; } .locations__intro { padding-top: 40px; } .page-template-template-rb-platform .locations__title { font-size: 26px; line-height: 1.3; } .location-card { flex-direction: column; gap: 16px; padding: 16px; } .location-card__media { width: 100%; height: 200px; } .locations__description, .location-card__capabilities { font-size: 16px; line-height: 28px; } } /* ========================================================= Partner Section (Figma 14596-13832) ========================================================= */ .partner { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 80px 140px; background: #fff; } /* Keep content above the decorative blob */ .partner > * { position: relative; z-index: 1; } /* Tab panels live in a content container so accordion dividers stay flush on mobile. On desktop each item collapses to zero height unless its panel is the active one (others are [hidden]). */ .partner__content { width: 100%; } .partner__item { width: 100%; } /* Accordion trigger: desktop uses the tablist, so it's hidden here. */ .partner__acc-trigger { display: none; } /* Decorative gradient ellipse (Figma) — approximated in CSS, clipped by the section's overflow:hidden. Purely decorative, so kept out of the DOM. */ .partner::before { content: ""; position: absolute; left: -178px; bottom: -280px; width: 1005px; height: 1005px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(234, 243, 236, 0.7) 0%, rgba(236, 241, 247, 0.45) 45%, rgba(255, 255, 255, 0) 70%); pointer-events: none; z-index: 0; } .page-template-template-rb-platform .partner__title { margin: 0; font-family: 'Figtree', sans-serif; font-size: 38px; line-height: 65px; font-weight: 500; color: #252525; text-align: center; padding-bottom: 60px; } /* ---- Tab navigation ---- */ .partner__tabs { display: flex; gap: 48px; justify-content: center; align-items: flex-start; width: 100%; border-bottom: 1px solid #eaf3ec; } .partner__tab { -webkit-appearance: none; appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; /* overlap the 1px nav border with the 2px active border */ padding: 0 0 12px; cursor: pointer; font-family: 'Figtree', sans-serif; font-size: 16px; line-height: 22px; font-weight: 400; color: #646464; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease; } .partner__tab:hover { color: #066938; } .partner__tab.is-active { color: #066938; border-bottom-color: #066938; } .partner__tab:focus-visible { outline: 2px solid #066938; outline-offset: 3px; border-radius: 2px; } /* ---- Tab panels ---- */ .partner__panel { display: flex; gap: 80px; align-items: flex-start; width: 100%; } .partner__panel[hidden] { display: none; } .partner__panel.is-active { animation: partnerFade 0.25s ease; padding-top: 60px; } @keyframes partnerFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .partner__panel.is-active { animation: none; } } /* ---- Left column ---- */ .partner__left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .partner__icon img { display: block; width: 96px; height: 96px; max-width: 100%; max-height: 100%; object-fit: contain; } .page-template-template-rb-platform .partner__heading { margin: 0; font-family: 'Figtree', sans-serif; font-size: 28px; line-height: 34px; font-weight: 600; color: #0f2318; } .partner__desc { font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; color: #646464; } .partner__desc p { margin: 0 0 15px; } .partner__desc > :last-child { margin-bottom: 0; } /* ---- Right column (benefit items) ---- */ .partner__right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .partner-benefit { display: flex; flex-direction: column; gap: 8px; padding-bottom: 25px; border-bottom: 1px solid #eaf3ec; } .page-template-template-rb-platform .partner-benefit__title { margin: 0; font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; font-weight: 700; color: #0f2318; } .partner-benefit__subtitle { margin: 0; font-family: 'Figtree', sans-serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 22px; color: #646464; } .partner-benefit__desc { font-family: 'Figtree', sans-serif; font-size: 16px; line-height: 22px; color: #0f2318; } .partner-benefit__desc p { margin: 0 0 8px; } .partner-benefit__desc > :last-child { margin-bottom: 0; } /* ---- Responsive ---- */ /* Laptop */ @media (max-width: 1440px) { .partner { padding: 80px; gap: 48px; } .partner__panel { gap: 60px; } } /* Tablet + Mobile — switch tabs to an accordion and stack the columns */ @media (max-width: 1024px) { .partner { padding: 60px 40px; } /* Hide the tab strip; the per-item triggers take over */ .partner__tabs { display: none; } .partner__content { border-top: 1px solid #eaf3ec; } .partner__item { border-bottom: 1px solid #eaf3ec; } .partner__acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 0; background: none; border: 0; cursor: pointer; font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: #0f2318; text-align: left; transition: color 0.2s ease; } .partner__acc-trigger:hover, .partner__acc-trigger.is-active { color: #066938; } .partner__acc-trigger:focus-visible { outline: 2px solid #066938; outline-offset: 3px; border-radius: 2px; } /* Chevron — points down when collapsed, flips up when open */ .partner__acc-icon { flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .partner__acc-trigger.is-active .partner__acc-icon { transform: translateY(2px) rotate(-135deg); } /* Panel becomes the accordion body */ .partner__panel { flex-direction: column; gap: 40px; padding: 4px 0 28px; } } /* Mobile — tighten accordion type/spacing */ @media (max-width: 767px) { .partner { padding: 40px 20px; gap: 32px; } .page-template-template-rb-platform .partner__title { font-size: 26px; line-height: 1.3; } .page-template-template-rb-platform .partner__heading { font-size: 24px; line-height: 30px; } .partner__desc { font-size: 16px; line-height: 28px; } } /* ========================================================= CBC Network Section (Figma 14557-8207) ========================================================= */ .cbc-network { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 80px 0px; background: linear-gradient(130.32deg, #eaf3ec 45.63%, #ecf1f7 105.52%); } .cbc-network__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 998px; text-align: center; margin: auto; } .page-template-template-rb-platform .cbc-network__title { margin: 0; font-family: 'Figtree', sans-serif; font-size: 38px; line-height: 65px; font-weight: 500; color: #252525; } .cbc-network__desc { font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 30px; color: #0f2318; } .cbc-network__desc p { margin: 0 0 15px; } .cbc-network__desc > :last-child { margin-bottom: 0; } /* CTA pill button */ .cbc-network__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 10px 15px; border-radius: 99px; background: #066938; color: #fff; font-family: 'Figtree', sans-serif; font-size: 22px; line-height: 30px; font-weight: 400; text-decoration: none; cursor: pointer; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.15s ease; } .cbc-network__button:hover { background: #2395FF; color: #fff; } .cbc-network__button:focus-visible { outline: 2px solid #066938; outline-offset: 3px; } .cbc-network__button:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .cbc-network__button { transition: background-color 0.2s ease; } .cbc-network__button:active { transform: none; } } /* ---------- Responsive ---------- */ /* Laptop */ @media (max-width: 1440px) { .cbc-network { padding: 80px; } } /* Tablet */ @media (max-width: 1024px) { .cbc-network { padding: 60px 40px; } } /* Mobile */ @media (max-width: 767px) { .cbc-network { padding: 40px 20px; gap: 24px; } .page-template-template-rb-platform .cbc-network__title { font-size: 26px; line-height: 1.3; } .cbc-network__desc { font-size: 16px; line-height: 28px; } .cbc-network__button { font-size: 18px; line-height: 26px; padding: 10px 20px; } } /* ---------- Overview ---------- */ .rb-platform-overview { margin-bottom: 60px; } .rb-platform-overview .service-overview-text { font-size: 18px; line-height: 1.6; color: rgb(37, 37, 37); } /* ---------- CTA ---------- */ .rb-platform-cta { padding: 60px 0; background-color: #f4f7f8; } .rb-platform-cta__inner { max-width: 760px; margin: 0 auto; text-align: center; } .rb-platform-cta__title { margin-bottom: 20px; } .rb-platform-cta__desc { font-size: 18px; line-height: 1.6; margin-bottom: 30px; color: rgb(37, 37, 37); } .rb-platform-cta__link { display: inline-block; padding: 14px 32px; font-size: 16px; font-weight: 600; color: #fff; background-color: #00a3ad; border-radius: 4px; text-decoration: none; transition: background-color 0.2s ease; } .rb-platform-cta__link:hover { background-color: #007f87; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .page-template-template-rb-platform h2 { font-size: 30px; line-height: 1.3; } .rb-platform-cta { padding: 40px 0; } }