/* Brevon → Renatus palette and typography overrides.
*
* Loaded AFTER the skin's main.css on / (home_v2.html) only.
*
* Per brief (replit_brief_home_reskin):
* --theme F94D00 → FF00AA (Renatus pink)
* --header 0B0D17 → 1B2230
* --text 534F5A → 475569
* --bg EFEDE5 → F2F3F4
*
* The Renatus brand gradient is held in reserve for hero highlights,
* CTA hovers, and divider treatments — placement decided in design
* review after the first build is up.
*
* Typography: Inter site-wide, matching the rest of the platform.
*/
/* All selectors are scoped under body.home-v2 so this stylesheet is a
* hard no-op on any other route, even if it's accidentally linked
* from a shared base template in the future.
*
* EXCEPTION (Christine 2026-05-28): the rule below intentionally
* targets bare `body` because it has to neutralise a vendor rule that
* also targets bare `body`. See comment for details. */
/* ----------------------------------------------------------------------
* STICKY-KILLER NEUTRALISER (Christine 2026-05-28)
*
* Brevon's main.css L52 sets `body { overflow-x: hidden; }`. Per the
* CSS overflow spec, when one axis is `hidden|auto|scroll`, the OTHER
* axis computes to `auto` — so `overflow-x: hidden` silently turns
* into the scroll container. Once is the scroll
* container, every `position: sticky` descendant sticks relative to
* the body (which is huge) instead of the viewport — visually
* indistinguishable from "sticky is broken".
*
* This is exactly the failure mode base.css L20-26 already documents
* and fixes on via `overflow-x: clip`. The vendor CSS was
* silently re-introducing the same bug on , killing sticky on
* /work, /free, /explore preview panes. `clip` prevents horizontal
* overflow WITHOUT creating a scroll container, so the viewport
* remains the scroller and sticky works normally.
*
* Loaded globally via partials/navbar.html — applies on every page.
* -------------------------------------------------------------------- */
body {
overflow-x: clip !important;
}
/* Note (Christine 2026-05-28): the earlier :root neutraliser that
remapped --text and --header to var(--navy) has been removed.
The actual root cause was that Brevon main.css was being loaded
on every page via partials/navbar.html (scaffolding from the v2
reskin that was never meant to be a permanent global dep). That
global load is now gone — Brevon only ships on home_v2.html — so
the leak is fixed at source and no neutraliser is needed. */
/* ── Home page navbar: always fixed ────────────────────────
*
* The base .top-bar.v2-nav is position:absolute on desktop and
* position:relative (in-flow) on mobile (navbar-v2.css mobile
* block). Both scroll out of the viewport before the JS sticky
* listener adds position:fixed at scrollTop > 250px — leaving
* a dead zone where the navbar is invisible.
*
* Additionally, when ScrollSmoother fires (~1-2s after load) it
* sets #smooth-wrapper to position:fixed, which can cause a
* brief layout recalculation and content shift if the navbar
* position is still being managed by JS timing.
*
* Fixing position:fixed from CSS means:
* 1. No layout shift — navbar position is the same before
* and after ScrollSmoother initialises.
* 2. No dead zone — navbar is always visible regardless of
* scroll position.
* 3. The sticky JS class still fires (adds white bg + shadow),
* but no longer controls whether the navbar is visible.
*
* Scoped to body.home-v2 to avoid side-effects on other pages
* that manage their own navbar positioning.
*
* No !important needed — the ID selector (#header-sticky) carries
* specificity 1-0-0, which beats the mobile block's 2-class rule
* (.top-bar.v2-nav = 0-2-0) without any override flag. ────────── */
body.home-v2 #header-sticky {
position: fixed;
top: 0;
z-index: 99999;
}
/* On mobile the navbar is white and fixed (position override above).
The hero section needs a top margin equal to the navbar height so it
starts below the bar rather than behind it.
Navbar height = 46px logo + 2×10px padding = 66px. */
@media (max-width: 1199px) {
body.home-v2 .hero-section.hero-1 {
margin-top: 66px;
}
}
body.home-v2 .header-1 .header-main .header-left .header-logo img,
body.home-v2 .header-1 .header-main .header-left .header-logo-2 img {
height: 46px;
width: auto;
max-width: none;
}
/* Vendor main.css swaps to the wordmark-only logo (.header-logo-2) when
.sticky.header-1 fires. Keep the full icon+wordmark logo on desktop home
page. Scoped to ≥768px so mobile's own logo swap is untouched. */
@media (min-width: 768px) {
body.home-v2 .sticky.header-1 .header-main .header-left .header-logo { display: block; }
body.home-v2 .sticky.header-1 .header-main .header-left .header-logo-2 { display: none; }
}
/* The navbar is already fixed on the home page, so the vendor fly-in
animation (translateY -12px) looks like a jump. Suppress it; the
box-shadow and background still transition in naturally. */
body.home-v2 .v2-nav.sticky { animation: none; }
/* ----------------------------------------------------------------------
* SWIPER FOUC FIX (Christine 2026-05-28)
*
* Before Swiper's JS runs, .swiper-slide elements are bare divs with
* no margins — so the service-slider (and every other carousel)
* rendered with cards flush against each other for ~150ms after page
* load, then "jumped" into their 30px gap once swiper-bundle.min.js
* fired Swiper init. Visible flicker, looked broken.
*
* Swiper adds class `.swiper-initialized` to the root element the
* instant init completes. We hide each slider until that class is
* present, then fade it in over 200ms. Padding-bottom reservation
* prevents the surrounding layout from collapsing/jumping while the
* slider is invisible.
*
* Belt-and-braces: even if JS fails entirely, the slider becomes
* visible after a 1.5s safety timeout (via the `@keyframes` fallback
* below) so users never see a permanently blank section.
* -------------------------------------------------------------------- */
body.home-v2 .brand-slider,
body.home-v2 .service-slider,
body.home-v2 .testimonial-slider,
body.home-v2 .news-slider {
visibility: hidden;
opacity: 0;
transition: opacity 200ms ease;
animation: brevonSwiperFailsafe 0s linear 3s forwards;
}
/* Pre-init: slides flow horizontally so the fallback state looks
intentional rather than a stacked block. Swiper overwrites these
once .swiper-initialized is added. */
body.home-v2 .brand-slider:not(.swiper-initialized) .swiper-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 20px;
overflow: hidden;
}
body.home-v2 .brand-slider:not(.swiper-initialized) .swiper-slide {
flex-shrink: 0;
}
body.home-v2 .brand-slider.swiper-initialized,
body.home-v2 .service-slider.swiper-initialized,
body.home-v2 .testimonial-slider.swiper-initialized,
body.home-v2 .news-slider.swiper-initialized {
visibility: visible;
opacity: 1;
animation: none;
}
@keyframes brevonSwiperFailsafe {
to { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 .brand-slider,
body.home-v2 .service-slider,
body.home-v2 .testimonial-slider,
body.home-v2 .news-slider {
transition: none;
}
}
body.home-v2 {
--theme: #FF11DF;
/* Christine 2026-05-28: was #1B2230 (from the original Brevon→
Renatus reskin brief, which predates the brand spec lock-in).
All h1–h6 + .sec_title / .tx-title classes in vendor main.css
paint via var(--header), so this single token controls every
heading colour on the home page. Bound to the brand --black
token (#0F1E41) so it tracks any future brand updates. */
--header: var(--navy);
--text: #475569;
--bg: #F2F3F4;
/* Renatus brand gradient — opt-in via .renatus-gradient utility. */
--renatus-gradient: linear-gradient(
135deg,
#FF11DF 10%,
#FF9898 70%,
#FFD38E 120%
);
}
/* ----------------------------------------------------------------------
* Body background — vendor-beat scoped to NON-home-v2 (Christine 2026-05-24).
* Brevon's main.css sets `body { background-color: var(--bg); }` and is
* loaded on EVERY page through partials/navbar.html (including in-app
* pages via templates/pages/app/base.html). With our overrides setting
* --bg to #F2F3F4, this leaked a warm gray onto every page background,
* showing through any container that doesn't paint its own background
* (e.g. spaContent gutters, sections without their own surface fill).
* For app pages and other non-home surfaces our canonical body
* background is white — per-section warm/cool surfaces are painted by
* the section's own container, not by body. Home v2 is the deliberate
* exception: its design relies on the warm `--bg` token (#F2F3F4)
* showing through between hero / brand-carousel / use-card sections,
* so the override must skip `body.home-v2` to preserve that look.
* `:not(.home-v2)` keeps the override at the same specificity as the
* Brevon rule but still wins via source order + !important.
* -------------------------------------------------------------------- */
body:not(.home-v2) {
background-color: #FFFFFF !important;
}
/* Brand-carousel use-case cards. Eight tiles sit in the brand-slider
* slot under the hero, each a white rounded card with a centered icon
* over a two-line title. Default state: icon and title both render in
* gray. Hover: both swap to solid black and the card lifts. The pink
* Renatus SVGs are flattened to gray/black via CSS filter so we don't
* need separate gray/black icon files. Whole card is one anchor. */
body.home-v2 .brand-section {
margin-left: 0;
margin-right: 0;
background: #f4f7fb;
}
body.home-v2 .brand-section .swiper-slide {
height: auto;
display: flex;
width: auto; /* let card sizing drive slide width */
}
body.home-v2 .renatus-use-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
background: #ffffff !important;
border-radius: 14px;
padding: 20px 64px;
min-height: 120px;
min-width: 440px; /* baseline width; grows for longer labels */
width: auto;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
text-decoration: none;
transition: transform 220ms ease, box-shadow 220ms ease;
}
body.home-v2 .renatus-use-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
body.home-v2 .renatus-use-icon {
width: 2em;
height: 2em;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.home-v2 .renatus-use-icon img {
width: 100%;
height: 100%;
object-fit: contain;
/* Dark icons on white card background. */
filter: brightness(0);
transition: filter 180ms ease;
}
body.home-v2 .renatus-use-card:hover .renatus-use-icon img {
filter: brightness(0);
}
/* Test cards using the paired gray/colour SVG assets (icons_*-g + icons_*-c).
The artwork is already coloured, so we DON'T want the brightness/opacity
filter — we just cross-fade the two stacked images on hover. */
body.home-v2 .renatus-use-card--swap .renatus-use-icon {
position: relative;
}
/* --swap cards: white background — show the coloured artwork directly,
no filter. Gray base image hidden; colour image always visible. */
body.home-v2 .renatus-use-card--swap .renatus-use-icon img,
body.home-v2 .renatus-use-card--swap:hover .renatus-use-icon img {
filter: none;
transition: filter 180ms ease;
}
body.home-v2 .renatus-use-card--swap .renatus-use-icon-gray {
opacity: 0;
}
body.home-v2 .renatus-use-card--swap .renatus-use-icon-color {
position: absolute;
inset: 0;
opacity: 1 !important;
}
body.home-v2 .renatus-use-card--swap:hover .renatus-use-icon-gray {
opacity: 0;
}
body.home-v2 .renatus-use-card--swap:hover .renatus-use-icon-color {
opacity: 1 !important;
}
/* The tough-conversations SVG has more internal padding inside its
512x512 viewBox than the other three, so it reads ~15% smaller at
the same container size. Scale it up here instead of re-exporting
the artwork (Christine: TEST ONLY — do not recreate the icons). */
body.home-v2 .renatus-use-icon img[src*="icons_tough"] {
transform: scale(1.18);
transform-origin: center;
}
/* Section heading size — Brevon's default h2 (48px desktop) reads
heavier than the Neotix reference. Trim ~16% on home v2 only so
other pages keep the original Brevon scale. */
body.home-v2 .section-title h2 {
font-size: 40px;
line-height: 1.18;
font-weight: 500;
letter-spacing: -0.01em;
}
@media (max-width: 1399px) {
body.home-v2 .section-title h2 { font-size: 36px; }
}
@media (max-width: 1199px) {
body.home-v2 .section-title h2 { font-size: 34px; }
}
@media (max-width: 991px) {
body.home-v2 .section-title h2 { font-size: 30px; }
}
@media (max-width: 575px) {
body.home-v2 .section-title h2 { font-size: 26px; }
}
/* "55%" stat — recolor to pink, overriding the Brevon
blue→purple gradient that ships with .count-item. */
body.home-v2 .count-item h2,
body.home-v2 .count-item h2 .count,
body.home-v2 .count-item h2 sup {
color: #ff11df !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #ff11df !important;
}
body.home-v2 .renatus-use-title {
margin: 0;
font-size: 17px;
line-height: 1.4;
font-weight: 600;
white-space: nowrap; /* widen the card, never wrap the label */
color: var(--header);
transition: color 180ms ease;
}
body.home-v2 .renatus-use-card:hover .renatus-use-title {
color: var(--header);
}
/* Touch devices — carousel cards: show the "revealed" state permanently
since hover never fires. Dark navy title + colour icon always visible.
Card lift skipped (not meaningful on a scrolling carousel row). */
@media (hover: none) and (pointer: coarse) {
body.home-v2 .renatus-use-title {
color: var(--header);
}
body.home-v2 .renatus-use-icon img {
filter: brightness(0);
}
}
/* Counter ("BY THE NUMBERS") section — solid navy, no background image. */
body.home-v2 .counter-section {
background-image: none !important;
background-color: #0A1530;
}
/* Solutions/project cards: tighter heading line-height, extra right and
* bottom padding so the copy doesn't crowd the image or the card edge. */
body.home-v2 .project-card-items {
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
background-color: var(--white) !important;
box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.07);
}
/* Per-card top borders — yellow at 50% opacity, desktop/iPad only. */
@media (min-width: 768px) {
body.home-v2 .project-card-items[data-panel="1"],
body.home-v2 .project-card-items[data-panel="2"],
body.home-v2 .project-card-items[data-panel="3"] { border-top: 6px solid rgba(255, 212, 0, 0.5); }
}
body.home-v2 .project-card-items .project-content h3 {
font-size: 40px;
line-height: 0.95;
margin-bottom: 20px;
}
/* Christine: the standards cards had crept up to the hero's 80px and the
* two headings looked swapped. Drop the card titles to a sub-heading
* scale so the hero headline clearly reads as the page's largest type. */
@media (max-width: 1399px) {
body.home-v2 .project-card-items .project-content h3 { font-size: 36px; }
}
@media (max-width: 991px) {
body.home-v2 .project-card-items .project-content h3 { font-size: 32px; }
}
@media (max-width: 575px) {
body.home-v2 .project-card-items .project-content h3 { font-size: 26px; }
}
/* Scroll-triggered gradient sweep on card headings — mobile only.
Gradient is 300% wide: left=navy, mid=pink→yellow, right=navy.
Animation sweeps: 0%(navy) → 50%(pink-yellow) → 0%(navy). */
@media (max-width: 767px) {
@keyframes hp-grad-sweep {
0% { background-position: 100% 0; }
55% { background-position: 0% 0; }
85% { background-position: 0% 0; }
85.1% { background-position: 100% 0; }
100% { background-position: 100% 0; }
}
body.home-v2 .project-card-items .project-content h3 {
background: linear-gradient(90deg, var(--pink) 0%, var(--yellow) 33%, var(--navy) 37%, var(--navy) 100%);
background-size: 300% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.home-v2 .project-card-items .project-content h3.hp-sweep-active {
animation: hp-grad-sweep 2.8s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* Fixed-size thumbnails so all three project cards match. */
body.home-v2 .project-card-items .project-thumb {
width: 517px;
height: 496px;
flex: 0 0 517px;
overflow: hidden;
}
@media (min-width: 992px) {
body.home-v2 .project-card-items .project-thumb {
height: 416px;
box-shadow: none;
}
}
body.home-v2 .project-card-items .project-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Report-excerpt thumbnail (used by all three project cards). */
body.home-v2 .renatus-thumb-report {
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
border-radius: 12px;
box-sizing: border-box;
}
/* Inner mock cards are constrained so they cannot exceed the fixed
* 517×496 thumbnail frame. */
body.home-v2 .renatus-thumb-report > .renatus-dimension-card,
body.home-v2 .renatus-thumb-report > .renatus-summary-card,
body.home-v2 .renatus-thumb-report > .renatus-source-card {
width: 100%;
max-height: 100%;
box-sizing: border-box;
overflow: hidden;
}
body.home-v2 .renatus-dimension-card {
background: #ffffff;
border-radius: 10px;
box-shadow: none;
padding: 24px 26px;
font-family: Inter, system-ui, -apple-system, sans-serif;
color: #0F1E41;
}
body.home-v2 .renatus-dimension-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
color: #6B7385;
margin-bottom: 10px;
}
body.home-v2 .renatus-dimension-title {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: #0F1E41;
margin-bottom: 18px;
}
body.home-v2 .renatus-dimension-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
body.home-v2 .renatus-dimension-list .dim-row-top {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
margin-bottom: 6px;
}
body.home-v2 .renatus-dimension-list .dim-label {
font-weight: 500;
color: #0F1E41;
}
body.home-v2 .renatus-dimension-list .dim-score {
font-size: 13px;
color: #6B7385;
}
body.home-v2 .renatus-dimension-list .dim-score strong {
color: #0F1E41;
font-weight: 600;
margin-right: 2px;
}
body.home-v2 .renatus-dimension-list .dim-bar {
position: relative;
height: 4px;
background: #ECEEF2;
border-radius: 999px;
overflow: hidden;
}
body.home-v2 .renatus-dimension-list .dim-bar-fill {
display: block;
height: 100%;
border-radius: 999px;
}
body.home-v2 .renatus-dimension-list .dim-bar-green {
background: #2BC4A0;
}
body.home-v2 .renatus-dimension-list .dim-bar-amber {
background: #E8B14B;
}
body.home-v2 .renatus-dimension-list .dim-bar-purple {
background: #8011FA;
}
body.home-v2 .renatus-dimension-list .dim-bar-cyan {
background: #3bc0ff;
}
body.home-v2 .renatus-dimension-list .dim-bar-orange {
background: #FF6D24;
}
body.home-v2 .renatus-dimension-list .dim-bar-yellow {
background: #FFD400;
}
body.home-v2 .renatus-dimension-list .dim-bar-amberorange {
background: #ff11df;
}
/* Executive summary thumbnail (Un-gameable assessments card). */
body.home-v2 .renatus-summary-card {
width: 100%;
background: #ffffff;
border-radius: 10px;
box-shadow: none;
padding: 28px 30px 30px;
font-family: Inter, system-ui, -apple-system, sans-serif;
color: #0F1E41;
text-align: center;
}
body.home-v2 .renatus-gauge {
position: relative;
width: 220px;
max-width: 100%;
margin: 0 auto;
}
body.home-v2 .renatus-gauge svg {
display: block;
width: 100%;
height: auto;
}
body.home-v2 .renatus-gauge-value {
position: absolute;
left: 0;
right: 0;
bottom: 6px;
text-align: center;
line-height: 1;
}
body.home-v2 .renatus-gauge-value strong {
font-size: 38px;
font-weight: 700;
color: #0F1E41;
}
body.home-v2 .renatus-gauge-value span {
font-size: 15px;
color: #6B7385;
margin-left: 2px;
}
body.home-v2 .renatus-gauge-label {
margin-top: 14px;
font-size: 15px;
font-weight: 600;
color: #0F1E41;
}
body.home-v2 .renatus-summary-para {
margin: 22px 0 0;
font-size: 14px;
line-height: 1.55;
color: #1F2A3E;
text-align: left;
}
/* Live source check thumbnail (Zero hallucinations card). */
body.home-v2 .renatus-source-card {
width: 100%;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 18px rgba(15, 30, 65, 0.08);
padding: 20px 22px;
font-family: Inter, system-ui, -apple-system, sans-serif;
color: #0F1E41;
}
@media (min-width: 992px) {
body.home-v2 .renatus-source-card {
box-shadow: none;
}
}
body.home-v2 .renatus-source-eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
color: #6B7385;
}
body.home-v2 .renatus-source-eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #FFD400;
}
body.home-v2 .renatus-source-quote {
margin-top: 12px;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: #0F1E41;
}
body.home-v2 .renatus-source-divider {
height: 1px;
background: #ECEEF2;
margin: 14px 0;
}
body.home-v2 .renatus-source-subhead {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
color: #6B7385;
margin-bottom: 10px;
}
body.home-v2 .renatus-source-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body.home-v2 .renatus-source-list li {
display: flex;
align-items: center;
gap: 12px;
}
body.home-v2 .renatus-source-list .src-badge {
flex: 0 0 38px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #F4F6FA;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
color: #0F1E41;
}
body.home-v2 .renatus-source-list .src-meta {
flex: 1 1 auto;
min-width: 0;
}
body.home-v2 .renatus-source-list .src-name {
font-size: 13px;
font-weight: 600;
color: #0F1E41;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.home-v2 .renatus-source-list .src-sub {
font-size: 11px;
color: #6B7385;
margin-top: 2px;
}
body.home-v2 .renatus-source-list .src-check {
flex: 0 0 22px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: #2BC4A0;
color: #ffffff;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
}
body.home-v2 .renatus-source-verdict {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2px;
}
body.home-v2 .renatus-source-verdict .verdict-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
color: #6B7385;
}
body.home-v2 .renatus-source-verdict .verdict-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: #EFE2FE;
color: #4A0A95;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 6px 12px;
border-radius: 999px;
}
body.home-v2 .renatus-source-verdict .verdict-pill .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #8011FA;
}
@media (min-width: 992px) {
body.home-v2 .renatus-source-verdict .verdict-pill {
background: var(--green-soft, rgba(0, 200, 120, 0.12));
color: var(--green);
}
body.home-v2 .renatus-source-verdict .verdict-pill .dot {
background: var(--green);
}
}
body.home-v2 .renatus-source-list .src-check--cyan { background: #8011FA; color: #ffffff; }
body.home-v2 .renatus-source-list .src-check--yellow { background: #8011FA; color: #ffffff; }
body.home-v2 .renatus-source-list .src-check--pink { background: #8011FA; color: #ffffff; }
@media (min-width: 992px) {
body.home-v2 .renatus-source-list .src-check--cyan,
body.home-v2 .renatus-source-list .src-check--yellow,
body.home-v2 .renatus-source-list .src-check--pink { background: var(--green); }
}
@media (max-width: 575px) {
body.home-v2 .renatus-use-card {
padding: 14px 20px;
min-height: 80px;
min-width: 180px;
gap: 6px;
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
body.home-v2 .renatus-use-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
body.home-v2 .renatus-use-icon {
width: 1.4em;
height: 1.4em;
}
body.home-v2 .renatus-use-title {
font-size: 14px;
}
}
/* Service slider — equal-height cards so translations don't break alignment.
* Swiper sets swiper-wrapper to display:flex; align-items must be stretch
* (not center/flex-start) so every slide grows to the tallest card's height. */
body.home-v2 .service-section .service-slider .swiper-wrapper {
align-items: stretch;
}
body.home-v2 .service-section .service-slider .swiper-slide {
height: auto;
}
body.home-v2 .service-section .service-slider .service-box-item {
height: 100%;
display: flex;
flex-direction: column;
}
body.home-v2 .service-section .service-slider .service-box-item .content {
flex: 1;
display: flex;
flex-direction: column;
}
body.home-v2 .service-section .service-slider .service-box-item .content p {
flex: 1;
}
/* ── Header top bar ────────────────────────────────────────────────────────
* Christine 2026-06-02: background set to --black; text stays white. */
body.home-v2 .header-top-section {
background: var(--navy) !important;
}
/* All text in the bar: white, light weight */
body.home-v2 .header-top-wrapper .header-left .list li,
body.home-v2 .header-top-wrapper .header-left .list li a,
body.home-v2 .header-top-wrapper .header-left .announce-marquee__item,
body.home-v2 .header-top-wrapper .header-right span {
color: var(--white) !important;
font-weight: 400 !important;
}
/* Christine 2026-06-02: announcement strip scrolls as a seamless marquee. Two
identical copies sit end to end and the track translates -50%, so the loop is
gapless. Pauses on hover; holds still for reduced-motion users. */
body.home-v2 .header-top-wrapper .header-left {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
margin-right: 24px;
}
body.home-v2 .header-top-wrapper .header-left .announce-marquee {
overflow: hidden;
width: 100%;
}
body.home-v2 .header-top-wrapper .header-left .announce-marquee__track {
display: flex;
width: max-content;
animation: announce-scroll 24s linear infinite;
}
body.home-v2 .header-top-wrapper .header-left .announce-marquee:hover .announce-marquee__track,
body.home-v2 .header-top-wrapper .header-left .announce-marquee:focus-within .announce-marquee__track {
animation-play-state: paused;
}
body.home-v2 .header-top-wrapper .header-left .announce-marquee__item {
white-space: nowrap;
padding-right: 56px;
text-decoration: none;
font-size: 12px;
}
@keyframes announce-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 .header-top-wrapper .header-left .announce-marquee__track {
animation: none;
}
}
/* Browse icon circle: transparent white, white icon */
body.home-v2 .browse-icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.5) !important;
border-radius: 100px;
font-size: 14px;
margin-right: 4px;
vertical-align: middle;
opacity: 1 !important;
}
body.home-v2 .browse-icon-circle i {
color: #8011FA !important;
font-size: 11px !important;
line-height: 1 !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Social icon circles: transparent white | icons: #0F1E41 */
body.home-v2 .header-top-wrapper .header-right .social-icon a {
background-color: rgba(255, 255, 255, 0.65) !important;
color: #3bc0ff !important;
opacity: 1 !important;
}
body.home-v2 .header-top-wrapper .header-right .social-icon a:hover {
background-color: rgba(255, 255, 255, 0.85) !important;
color: #3bc0ff !important;
}
/* ── Language switcher in the brevon navbar ─────────────────────────
* The partial uses the same HTML as the standard navbar but navbar.css
* is not loaded here, so we supply self-contained styles scoped under
* body.home-v2. */
body.home-v2 .nav-language-switcher {
position: relative;
display: inline-flex;
align-items: center;
}
body.home-v2 .nav-lang-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
color: #0F1E41;
font-size: 16px;
font-weight: 400;
padding: 4px 8px;
border-radius: 6px;
transition: color 0.2s ease;
}
body.home-v2 .nav-lang-trigger:hover {
color: #FF11DF;
}
body.home-v2 .nav-lang-trigger svg {
flex-shrink: 0;
}
body.home-v2 .sticky .nav-lang-trigger {
color: #0F1E41;
}
body.home-v2 .sticky .nav-lang-trigger:hover {
color: #FF11DF;
}
body.home-v2 .nav-lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 240px;
max-height: min(75vh, 540px);
overflow-y: auto;
z-index: 9999;
padding: 6px 0;
}
body.home-v2 .nav-lang-dropdown.open {
display: block;
}
body.home-v2 .nav-lang-option {
display: block;
width: 100%;
background: none;
border: none;
text-align: left;
padding: var(--space-1-5) 16px;
font-size: var(--text-15);
font-weight: var(--font-normal);
line-height: var(--lh-nav);
color: #1B2230;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
body.home-v2 .nav-lang-option:hover {
background: #F2F3F4;
color: #FF11DF;
}
body.home-v2 .nav-lang-option.active {
color: #FF11DF;
font-weight: 600;
}
body.home-v2 .nav-lang-divider {
height: 1px;
background: #e5e7eb;
margin: 4px 0;
}
/* Primary CTA buttons stay solid pink (var(--theme) = #FF11DF),
* which is what the skin's .theme-btn defaults to. The skin's ::before
* hover wipe (to --header navy) still works as designed. */
/* Secondary CTA (.theme-btn.style-2): white pill with a 1px navy
* border and dark text — clearly distinct from the page gray bg
* (#F2F3F4), and visibly secondary to the solid black primary.
* Hover: fill with navy, text flips to white. Pink is reserved
* for the primary CTA's reward state, so the secondary stays
* understated on hover. */
body.home-v2 .theme-btn.style-2 {
background-color: var(--white) !important;
color: var(--header) !important;
border: 1px solid var(--header) !important;
}
body.home-v2 .theme-btn.style-2::before {
background-color: var(--header) !important;
}
body.home-v2 .theme-btn.style-2::after {
background-color: transparent !important;
}
body.home-v2 .theme-btn.style-2:hover {
color: var(--white) !important;
}
/* Hero rating block */
body.home-v2 .renatus-rating-block {
display: inline-flex;
align-items: center;
margin-top: 12px;
}
body.home-v2 .renatus-rating-inner {
display: inline-flex;
flex-direction: column;
gap: 4px;
}
body.home-v2 .renatus-rating-score {
font-size: 34px;
font-weight: 700;
color: #0f1e41;
line-height: 1.1;
}
body.home-v2 .renatus-rating-denom {
font-size: 18px;
font-weight: 400;
color: #6b7280;
}
body.home-v2 .renatus-rating-label {
font-size: 13px;
font-weight: 400;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
/* Row of 5 small dots sitting left of the rating label. Keeps the
* horizontal cadence the original 5 stars had (which read elegantly)
* but without the "5/5 score" semantics that don't apply to a
* research library. Yellow tone preserved from the icon experiment. */
body.home-v2 .renatus-rating-dots {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
body.home-v2 .renatus-rating-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FFB800;
display: inline-block;
}
/* Arrow link replacing the old three-dot flourish — sends people
to the methodology page where the 135 frameworks are documented.
Pink to match the rest of the hero's accent system, slight slide
on hover so it reads as a clickable affordance. Christine
2026-05-24. */
body.home-v2 .renatus-rating-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 4px;
color: var(--navy);
text-decoration: none;
font-size: 14px;
line-height: 1;
transition: transform 0.2s ease, color 0.2s ease;
flex: 0 0 auto;
}
body.home-v2 .renatus-rating-link:hover,
body.home-v2 .renatus-rating-link:focus-visible {
color: var(--navy);
transform: translateX(3px);
outline: none;
}
body.home-v2 .renatus-rating-stars {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 13px;
}
body.home-v2 .renatus-rating-stars i {
color: #FFB800;
}
/* Testimonial star colors per slide. */
body.home-v2 .testimonial-box-item .star.star-yellow i { color: #FFD400; }
body.home-v2 .testimonial-box-item .star.star-cyan i { color: #3bc0ff; }
body.home-v2 .testimonial-box-item .star.star-purple i { color: #8011FA; }
body.home-v2 .testimonial-box-item .star.star-pink i { color: #FF11DF; }
/* Partial-fill star: overlay a solid star clipped to --fill width on
* top of an empty outline star. Used for fractional ratings (e.g. the
* 5th star at 60% for a 4.6 score). */
body.home-v2 .renatus-rating-star-partial {
position: relative;
display: inline-block;
line-height: 1;
}
body.home-v2 .renatus-rating-star-partial .renatus-rating-star-bg {
color: #FFB800;
}
body.home-v2 .renatus-rating-star-partial .renatus-rating-star-fg {
position: absolute;
top: 0;
left: 0;
width: var(--fill, 50%);
overflow: hidden;
color: #FFB800;
}
/* Hero video play circle: pink to match the primary brand color. */
body.home-v2 .hero-1 .hero-image .video-circle .video-btn {
background-color: #FF11DF !important;
}
/* Service-section cards are painted in --theme pink, so a pink button
* inside one is invisible. On those cards the CTA is a white pill with
* dark text — the hover wipe still reveals navy + white text. */
@media (min-width: 992px) {
body.home-v2 .service-box-item {
background-color: #f4f7fb;
}
}
@media (min-width: 992px) {
body.home-v2 .service-section.section-padding {
padding-top: 30px;
padding-bottom: 30px;
}
body.home-v2 .service-box-item {
min-height: 0 !important;
padding: 20px !important;
background-color: #f4f7fb;
}
body.home-v2 .service-box-item .icon {
width: 48px !important;
height: 48px !important;
line-height: 48px !important;
margin-bottom: 14px !important;
}
body.home-v2 .service-box-item .icon img {
width: 24px !important;
height: 24px !important;
}
body.home-v2 .service-box-item .content h3 {
margin-bottom: 6px !important;
}
body.home-v2 .service-box-item .content p {
min-height: 0 !important;
margin-bottom: 12px !important;
}
body.home-v2 .project-section .section-title .sub-title {
margin-top: 50px !important;
margin-bottom: 0 !important;
background: transparent !important;
}
body.home-v2 .project-section {
background: linear-gradient(to bottom, #f4f7fb 0%, #ffffff 100%) !important;
margin-top: 0;
padding-top: 30px;
padding-bottom: 15px !important;
}
body.home-v2 .project-section .project-card-items {
background-color: var(--white) !important;
}
body.home-v2 .project-box-wrapper .project-card-items {
background-color: var(--white) !important;
}
}
body.home-v2 .service-box-item .theme-btn {
background: var(--accent-cyan) !important;
color: var(--white) !important;
border-color: transparent !important;
}
/* Reserve a fixed block for the card paragraph so cards stay the same
* height across copy lengths (and across translations). Using
* min-height rather than a hard height so unusually long copy can
* still grow without clipping. */
body.home-v2 .service-box-item .content p {
min-height: 200px;
}
/* Mobile: keep the circle-wipe; fill it navy so active-slide looks correct.
Desktop: hide it entirely — text-only pink highlight on hover instead. */
body.home-v2 .service-box-item .theme-btn::before,
body.home-v2 .service-box-item .theme-btn::after {
background-color: var(--navy) !important;
}
@media (min-width: 992px) {
body.home-v2 .service-box-item .theme-btn::before,
body.home-v2 .service-box-item .theme-btn::after {
display: none !important;
}
}
/* Renatus accent palette — reusable across the platform.
* Use via `data-accent="yellow|orange|pink|purple|blue|cyan"`. */
:root {
--accent-yellow: #ffd400;
--accent-orange: #ff6d24;
--accent-pink: #ff11df;
--accent-purple: #8011fa;
--accent-blue: #3b78ff;
--accent-cyan: #3bc0ff;
}
/* Persona cards: every card uses cyan for the icon disc, the
* full-card hover wipe, and the h3 link's pre-hover underline. The
* per-card `data-accent` attribute is preserved for future use but
* does not currently colour anything on the v2 home. */
/* New persona icons ship with viewBox 0 0 512 512 and no width/height
attribute, so they render tiny inside the 72px circle. Force the
image to fill ~58% of the circle (≈42px), matching the visual
weight of the old 36px Brevon glyphs. */
body.home-v2 .service-box-item .icon {
display: flex;
align-items: center;
justify-content: center;
}
body.home-v2 .service-box-item .icon img {
width: 32px;
height: 32px;
object-fit: contain;
}
body.home-v2 .service-box-item .icon {
background-color: var(--accent-cyan) !important;
}
body.home-v2 .service-box-item::before {
background-color: var(--accent-cyan) !important;
}
body.home-v2 .service-box-item .content h3 a:hover {
color: var(--pink);
background-image: linear-gradient(180deg, var(--pink) 0%, var(--pink) 100%);
}
@media (min-width: 992px) {
/* Card-hover: icon flips black, text/CTA flip white against cyan swipe. */
body.home-v2 .service-box-item[data-accent]:hover .icon,
body.home-v2 .service-box-item:hover .icon {
background-color: var(--navy) !important;
}
body.home-v2 .service-box-item:hover .icon img {
filter: brightness(0) invert(1);
}
body.home-v2 .service-box-item[data-accent]:hover .content h3 a,
body.home-v2 .service-box-item[data-accent]:hover .content h3 a:hover {
color: var(--navy);
background-image: linear-gradient(180deg, var(--navy) 0%, var(--navy) 100%);
}
body.home-v2 .service-box-item:hover .content p,
body.home-v2 .service-box-item:active .content p {
color: var(--white);
}
body.home-v2 .service-box-item:hover .content h3 a,
body.home-v2 .service-box-item:hover .content h3 a:hover {
color: var(--white) !important;
background-image: linear-gradient(180deg, var(--white) 0%, var(--white) 100%);
}
body.home-v2 .service-box-item:hover .theme-btn,
body.home-v2 .service-box-item:active .theme-btn {
background: var(--white) !important;
color: var(--pink) !important;
border-color: var(--white) !important;
}
body.home-v2 .service-box-item .theme-btn:hover,
body.home-v2 .service-box-item .theme-btn:focus {
color: var(--pink) !important;
}
}
/* Mobile tap: snap the card button to solid black immediately so the
text is readable even if the ::before wipe animation doesn't complete. */
@media (hover: none) {
body.home-v2 .service-box-item .theme-btn:active {
background-color: var(--navy) !important;
color: var(--white) !important;
transition: none;
}
body.home-v2 .service-box-item[data-accent]:active .icon {
background-color: var(--header);
}
body.home-v2 .service-box-item[data-accent]:active .content h3 a {
color: var(--white);
}
body.home-v2 .project-section .renatus-card-cta:active {
background-color: var(--navy) !important;
color: var(--white) !important;
transition: none;
}
}
/* Project section CTAs — plain text link style. */
body.home-v2 .project-section .renatus-card-cta {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
color: var(--navy) !important;
font-weight: 600;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
body.home-v2 .project-section .renatus-card-cta:hover,
body.home-v2 .project-section .renatus-card-cta:focus {
background: none !important;
border: none !important;
color: var(--navy) !important;
text-decoration: none !important;
}
/* Solutions section: keep the skin's white inset card so the section
* stands out against the page background. The default skin pins the
* card at 1860px wide with a 30px left offset, which leaves uneven
* right padding on wide viewports — stretch it to the section width
* minus matching 30px gutters on both sides. */
@media (min-width: 992px) {
body.home-v2 .service-section {
background: #f4f7fb !important;
overflow: visible !important;
}
body.home-v2 .service-section::before {
background-color: var(--white);
width: calc(100% - 60px);
left: 30px;
right: 30px;
box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.07);
}
body.home-v2 .service-section .section-title h2,
body.home-v2 .service-section .section-title-area > p {
color: var(--navy);
}
body.home-v2 .service-section .section-title h2 .persona-title-sub {
font-size: 0.55em;
font-weight: 300;
display: inline;
color: var(--navy);
}
body.home-v2 .service-section .section-title .sub-title.style-3 {
color: var(--navy);
margin-bottom: 0 !important;
}
body.home-v2 .service-section .renatus-eyebrow-stars {
filter: none;
}
/* Grid layout: subtitle under heading (tight), arrows centred on heading. */
body.home-v2 .service-section .section-title-area {
display: grid !important;
grid-template-columns: 1fr auto;
grid-template-areas:
"title arrows"
"sub arrows";
align-items: start;
gap: 0 40px;
margin-bottom: 12px !important;
}
body.home-v2 .service-section .section-title-area .section-title {
grid-area: title;
}
body.home-v2 .service-section .section-title-area > p {
grid-area: sub;
margin-top: 6px !important;
margin-bottom: 0 !important;
}
body.home-v2 .service-section .section-title-area .array-button {
grid-area: arrows;
align-self: center;
margin-top: 30px;
}
/* Recolour the small SOLUTIONS pill icon to brand purple. The source
* PNG is monochrome, so we hide the original ![]()
and draw a masked
* pseudo-element in its place — CSS mask doesn't repaint ![]()
pixels,
* but it works on a normal element with a background colour.
* Scoped to the service-section sub-title only. */
body.home-v2 .service-section .section-title .sub-title img {
display: none;
}
body.home-v2 .service-section .section-title .sub-title.style-3 {
background: transparent;
backdrop-filter: none;
margin-left: -7px;
}
}
/* About section: recolour the big stat number to brand pink. */
body.home-v2 .about-wrapper .about-content .about-item .count-item h2,
body.home-v2 .about-wrapper .about-content .about-item .count-item h2 sup {
color: var(--accent-pink);
}
/* The skin force-capitalises every h1–h6. Our headings are written
* in sentence case on purpose, so undo the transform on the v2 home. */
body.home-v2 h1,
body.home-v2 h2,
body.home-v2 h3,
body.home-v2 h4,
body.home-v2 h5,
body.home-v2 h6 {
text-transform: none;
}
/* Small source attribution line under the stat subhead. */
body.home-v2 .renatus-stat-source {
margin-top: 10px;
font-size: 13px;
color: rgba(15, 23, 42, 0.55);
font-style: italic;
}
/* Primary CTA paint — applied site-wide on the v2 home page.
* Default skin paints .theme-btn pink with a navy hover swipe; we
* flip that so the resting state is brand navy (#0F1E41) and pink
* becomes the reward state on hover.
* Excludes the swiper cards (.service-box-item .theme-btn) which keep
* their own white-on-accent treatment, and the .style-2 secondary. */
body.home-v2 .theme-btn:not(.style-2) {
background-color: #0F1E41;
color: var(--white);
}
body.home-v2 .theme-btn:not(.style-2)::before {
background-color: #ff2cd7;
}
body.home-v2 .theme-btn:not(.style-2)::after {
background-color: transparent;
}
body.home-v2 .theme-btn:not(.style-2):hover {
color: var(--white);
}
@media (min-width: 992px) {
body.home-v2 .hero-btn .theme-btn:not(.style-2) {
background: linear-gradient(to bottom left, var(--purple) -20%, var(--cyan) 120%) !important;
color: var(--white);
}
}
/* The service-card CTA override (white pill, dark text) still wins
* because its selector is more specific than the global one above. */
/* About-section left column now hosts the Ren chat stream animation
* (driven by static/js/hp-ren-chat.js). The panel reuses the
* .about-image grid cell; we restyle it as a soft card and lay out
* the streamed bubbles flex-column. Colours are inlined here so the
* panel works without home.css being loaded. */
body.home-v2 .about-image.hp-ren-chat-panel {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
height: 100%;
min-height: 480px;
overflow: visible;
display: flex;
align-items: center;
box-shadow: none;
position: relative;
z-index: 1;
}
body.home-v2 .hp-ren-chat-stream {
height: auto;
}
/* Large speech-bubble silhouette — hidden per design; animation kept. */
body.home-v2 .about-wrapper .row > .col-lg-5::before {
display: none;
}
body.home-v2 .about-wrapper .row > .col-lg-5 {
padding-top: 60px;
}
/* Reduce column gap by 20px (g-5 = 48px → 28px). */
body.home-v2 .about-wrapper .row {
--bs-gutter-x: 1.75rem;
}
/* Trim the about-section top padding from Brevon's 120px to 30px,
and bottom from 80px to 40px on mobile. */
body.home-v2 .about-section.section-padding {
padding-top: 30px;
}
/* Section 2: gradient background — white until 70%, then fades to #f4f7fb at 90%.
Hard-coded hex instead of #f4f7fb because home_v2 does not load base.css
where that token is defined; var() would resolve to nothing and invalidate the gradient. */
body.home-v2 .about-section.section-padding {
background: linear-gradient(to bottom, #ffffff 70%, #f4f7fb 90%) !important;
}
@media (max-width: 991px) {
body.home-v2 .about-section.section-padding {
padding-bottom: 40px;
}
}
/* Kill any background on the about-section heading (and on whatever
* wrapper spans the SplitText/GSAP animation injects around the
* lines/chars). Something upstream is painting a gray rectangle
* behind the text. */
body.home-v2 .about-section .section-title h2,
body.home-v2 .about-section .section-title h2 * {
background: transparent !important;
}
/* Lay out the about-section title as a 2-column grid that matches
* the chat panel + content row below it:
* - column 1 = 33.333% (col-lg-4) holds the pill, left-aligned
* to natural width so it doesn't stretch
* - column 2 = 1fr holds the headline
* - column gap = 1.5rem (Bootstrap g-4 gutter)
* The hidden spacer span in the markup is no longer needed but is
* harmless and kept for backwards compatibility. */
body.home-v2 .about-section .section-title {
display: block;
padding-top: 30px;
}
body.home-v2 .about-section .section-title .sub-title {
/* block + fit-content so margin-bottom isn't absorbed by the
inline-block's line-box strut (which is what made the 48px
visually collapse to ~25px). */
display: block;
width: fit-content;
margin-bottom: 15px;
margin-left: -9px; /* offset the pill's internal padding so its
text reads flush-left with the heading */
}
/* Brevon adds margin-left:25px on .about-content at >=1400px which
indents the body copy past the heading. Zero it on home-v2 so the
eyebrow, heading and body copy share a left edge. */
body.home-v2 .about-wrapper .about-content {
margin-left: 0;
}
body.home-v2 .renatus-section-title-spacer {
display: none;
}
/* Renatus logo used as the eyebrow-pill icon — keep it small and
* tightly aligned with the uppercase pill text. */
body.home-v2 .renatus-eyebrow-icon {
width: 14px;
height: 14px;
margin-right: 6px;
margin-top: -2px;
vertical-align: middle;
display: inline-block;
}
/* Nested submenu (level-3) overflow fix. The skin opens nested
* submenus to the right of their parent (inset-inline-start: 100%),
* which falls off-screen at narrower widths. Below 1400px we flip
* the nested submenu to open leftward; the parent submenu is at
* least 260px wide so there's room. */
@media (max-width: 1799px) {
body.home-v2 .header-main .main-menu ul li .submenu li .submenu {
inset-inline-start: auto;
inset-inline-end: 100%;
}
}
/* Eyebrow accent — Ren stars mark. The SVG paints its three stars
* directly (pink main, yellow + cyan supporting), so we render it
* as a background-image rather than a CSS mask. The viewBox is
* roughly square (16.36 × 17.35). */
body.home-v2 .renatus-eyebrow-stars {
display: inline-block;
width: 1.6em;
height: 1.6em;
margin-left: -10px;
margin-right: 4px;
vertical-align: -0.4em;
background: url('/static/images/icons/RenStars.svg') center / contain no-repeat;
}
/* Vertically center the about-content (stat + card) against the
* taller chat panel on the left. The skin defaults to
* align-items:start + margin-top:30px, which leaves a big empty
* band below the right card when the left column is tall. */
body.home-v2 .about-wrapper .row {
align-items: center;
}
/* Body copy card — strip the white background so the chat panel
is the only boxed element in the section. Keep the button. */
body.home-v2 .about-wrapper .about-content .about-item .content-box {
background-color: transparent;
padding: 0;
border-radius: 0;
}
/* col-lg-5 stays position: relative as the anchor for the
decorative speech-bubble ::before. */
body.home-v2 .about-wrapper .row > .col-lg-5 {
position: relative;
padding-top: 35px;
}
/* Variant: standard rounded-rectangle card, but filled with the
* purple → cyan brand gradient instead of plain white. Bubbles
* read on the saturated background: Ren in solid white text, user
* as a frosted-glass white bubble. */
body.home-v2 .about-image.hp-ren-chat-panel--gradient {
background: linear-gradient(160deg, #0F1E41 0%, #1B2A4E 100%);
border: none;
padding: 32px 24px;
min-height: 480px;
box-shadow: 0 20px 40px -10px rgba(15, 30, 65, 0.35);
}
body.home-v2 .hp-ren-chat-panel--gradient .hp-ren-chat-msg--ren {
background: transparent;
color: var(--white);
}
body.home-v2 .hp-ren-chat-panel--gradient .hp-ren-chat-msg--user {
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--white);
border: none;
}
body.home-v2 .hp-ren-chat-panel--gradient .hp-ren-chat-typing {
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.home-v2 .hp-ren-chat-panel--gradient .hp-ren-chat-typing span {
background: rgba(255, 255, 255, 0.85);
}
body.home-v2 .hp-ren-chat-stream {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
align-self: center;
}
body.home-v2 .hp-ren-chat-msg {
max-width: 88%;
padding: 10px 14px;
border-radius: 18px;
font-size: 14px;
line-height: 1.45;
font-weight: 400;
color: var(--header);
opacity: 0;
transform: translateY(6px);
animation: hpRenChatIn 220ms ease forwards;
}
body.home-v2 .hp-ren-chat-msg--user {
align-self: flex-end;
background: var(--gray-light);
color: var(--navy);
border-bottom-right-radius: 6px;
}
body.home-v2 .hp-ren-chat-msg--ren {
align-self: flex-start;
background: transparent;
border-bottom-left-radius: 6px;
}
body.home-v2 .hp-ren-chat-typing {
align-self: flex-start;
background: #F2F3F4;
border-radius: 18px;
border-bottom-left-radius: 6px;
padding: 12px 14px;
display: inline-flex;
gap: 4px;
}
body.home-v2 .hp-ren-chat-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #94a3b8;
animation: hpRenChatTyping 0.8s infinite ease-in-out;
}
body.home-v2 .hp-ren-chat-typing span:nth-child(2) { animation-delay: 0.1s; }
body.home-v2 .hp-ren-chat-typing span:nth-child(3) { animation-delay: 0.2s; }
body.home-v2 .visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes hpRenChatIn { to { opacity: 1; transform: translateY(0); } }
@keyframes hpRenChatTyping {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
body.home-v2 .hp-ren-chat-msg,
body.home-v2 .hp-ren-chat-typing span {
animation: none;
opacity: 1;
transform: none;
}
}
/* Brand carousel — grab cursor + drag/swipe support. */
@media (min-width: 992px) {
body.home-v2 #bare-test-track-wrap {
background-color: #f4f7fb;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
}
/* Brand carousel cards — default + hover states.
background/color removed from inline styles so :hover can override. */
body.home-v2 .hp-bare-card {
background: #fff;
color: var(--navy);
transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
body.home-v2 .hp-bare-card-icon {
opacity: 0.7;
transition: background 180ms ease, opacity 180ms ease;
}
body.home-v2 .hp-bare-card[data-ci="0"] .hp-bare-card-icon { background: var(--cyan); }
body.home-v2 .hp-bare-card[data-ci="1"] .hp-bare-card-icon { background: var(--pink); }
body.home-v2 .hp-bare-card[data-ci="2"] .hp-bare-card-icon { background: var(--yellow); }
body.home-v2 .hp-bare-card[data-ci="3"] .hp-bare-card-icon { background: var(--purple); }
body.home-v2 .hp-bare-card:hover {
color: #fff;
}
body.home-v2 .hp-bare-card:hover .hp-bare-card-icon {
background: #fff;
opacity: 1;
}
body.home-v2 .hp-bare-card[data-ci="0"]:hover {
background: var(--cyan);
box-shadow: 0 6px 24px rgba(59, 192, 255, 0.28);
}
body.home-v2 .hp-bare-card[data-ci="1"]:hover {
background: rgba(255, 17, 223, 0.8);
box-shadow: 0 6px 24px rgba(255, 17, 223, 0.22);
}
body.home-v2 .hp-bare-card[data-ci="2"]:hover {
background: rgba(255, 212, 0, 0.8);
box-shadow: 0 6px 24px rgba(255, 212, 0, 0.28);
color: var(--navy);
}
body.home-v2 .hp-bare-card[data-ci="2"]:hover .hp-bare-card-icon {
background: var(--white);
}
body.home-v2 .hp-bare-card[data-ci="3"]:hover {
background: rgba(120, 80, 220, 0.8);
box-shadow: 0 6px 24px rgba(120, 80, 220, 0.28);
}
/* Service section pagination dots — black inactive, cyan active. */
@media (min-width: 992px) {
body.home-v2 .service-section .swiper-dot .swiper-pagination-bullet {
background-color: var(--navy);
opacity: 1;
}
body.home-v2 .service-section .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: var(--accent-cyan);
opacity: 1;
}
/* Service section slider arrows.
* array-prev (left) = inactive: navy outline, navy icon.
* array-next (right) = active: solid navy fill, white icon. */
body.home-v2 .service-section .array-button .array-prev {
background-color: transparent !important;
border: 2px solid var(--navy) !important;
color: var(--navy) !important;
}
body.home-v2 .service-section .array-button .array-next {
background-color: var(--navy) !important;
border: 2px solid var(--navy) !important;
color: var(--white) !important;
}
}
/* Inter site-wide on the preview page. The skin's main.css sets the
* body font; this override wins on cascade order because the override
* stylesheet loads after main.css. !important is used only on the
* heading + body font-family rules where the skin uses !important
* itself. */
body.home-v2,
body.home-v2 p,
body.home-v2 input,
body.home-v2 textarea,
body.home-v2 select,
body.home-v2 button,
body.home-v2 .btn,
body.home-v2 .nav-link,
body.home-v2 .menu-list a {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif !important;
}
body.home-v2 h1, body.home-v2 h2, body.home-v2 h3,
body.home-v2 h4, body.home-v2 h5, body.home-v2 h6,
body.home-v2 .h1, body.home-v2 .h2, body.home-v2 .h3,
body.home-v2 .h4, body.home-v2 .h5, body.home-v2 .h6 {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif !important;
}
/* Hero background: fit the full image rather than cropping to centre. */
body.home-v2 .hero-section.hero-1 {
background-size: 100% 100% !important;
background-position: center center !important;
}
/* Hero image container — relative so the brand bg can be absolutely placed. */
body.home-v2 .hero-1 .hero-image {
position: relative;
}
/* Hero persona slideshow — transparent cut-out portraits cross-fade on the
plain hero (no background blob). Holds the same footprint the old placeholder
used (527x602) to keep the layout steady. */
body.home-v2 .hero-1 .hero-people-slider {
position: relative;
z-index: 1;
width: 659px;
height: auto;
aspect-ratio: 1000 / 800;
max-width: 100%;
/* Christine 2026-06-02: let the widened landscape shots spill past the slot.
Safe because the cross-fade keeps inactive slides at opacity 0. */
overflow: visible;
--persona-global: 1;
}
/* Christine 2026-06-02: kill the refresh "ghosting". Before Swiper boots (the
container has no .swiper-initialized class yet) the wrapper is a plain flex
row, so all seven personas render stacked/trailing through the
overflow:visible slot. Hold on the first slide until Swiper takes over the
cross-fade and starts driving each slide's inline opacity. */
body.home-v2 .hero-1 .hero-people-slider:not(.swiper-initialized) .swiper-slide {
opacity: 0;
}
body.home-v2 .hero-1 .hero-people-slider:not(.swiper-initialized) .swiper-slide:first-child {
opacity: 1;
}
body.home-v2 .hero-1 .hero-people-slider .swiper-slide {
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
}
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
/* Christine 2026-06-02: final size = global multiplier × per-image factor;
anchored bottom-centre so figures stay seated on the baseline as they scale. */
transform: scale(calc(var(--persona-global, 1) * var(--persona-scale, 1)));
transform-origin: center bottom;
}
/* Desktop: all images cover the full slot height so square and tall
portraits render at the same height (602px). Square images clip ~37px
per side which is safe for centred subjects. */
@media (min-width: 768px) {
/* Landscape images (1000×800 = same ratio as frame): cover fills exactly, no crop. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img {
object-fit: cover;
object-position: right bottom;
}
/* Portrait/square images (800×800): contain so the full person is visible.
They sit 527px tall centred in the wider 659px frame. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img.hero-people-img--lg {
object-fit: contain;
object-position: left bottom;
}
}
/* Christine 2026-06-02: per-persona audience pill. Fill cycles pink → yellow →
cyan → purple (the colour modifier classes below carry the bg + text colour);
position modifiers place each one in empty space complementing the figure.
The layered shadow keeps it legible on the plain (blob-free) hero. */
body.home-v2 .hero-1 .hero-people-pill {
position: absolute;
z-index: 2;
padding: 11px 24px;
border-radius: 999px;
font-size: 18px;
font-weight: 600;
font-style: italic;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
background-color: transparent;
color: var(--navy);
box-shadow: none;
}
/* Teachers, teams and practitioners pills rendered larger to give
them more visual presence on the hero image. */
body.home-v2 .hero-1 .hero-people-pill--top-right-low,
body.home-v2 .hero-1 .hero-people-pill--top-right-mid,
body.home-v2 .hero-1 .hero-people-pill--top-right-researchers,
body.home-v2 .hero-1 .hero-people-pill--top-left-2,
body.home-v2 .hero-1 .hero-people-pill--top-left-leaders,
body.home-v2 .hero-1 .hero-people-pill--mid-left {
font-size: 18px;
padding: 14px 30px;
}
/* All colour variants unified: white fill, black text, no shadow. */
body.home-v2 .hero-1 .hero-people-pill--c-pink,
body.home-v2 .hero-1 .hero-people-pill--c-yellow,
body.home-v2 .hero-1 .hero-people-pill--c-cyan,
body.home-v2 .hero-1 .hero-people-pill--c-purple,
body.home-v2 .hero-1 .hero-people-pill--c-orange {
background-color: transparent;
color: var(--navy);
}
body.home-v2 .hero-1 .hero-people-pill--top-left {
top: 156px;
left: -28px;
}
/* Christine 2026-06-02: practitioners pill — top-left dropped 30px (its own
slot so founders, which keeps base top-left, is unaffected). */
body.home-v2 .hero-1 .hero-people-pill--top-left-2 {
top: 56px;
left: -28px;
}
/* Christine 2026-06-02: consultants pill — top-left dropped 50px to sit lower
in the empty top-left (its own slot; founders keeps base top-left). */
body.home-v2 .hero-1 .hero-people-pill--top-left-3 {
top: 126px;
left: -38px;
}
/* Christine 2026-06-02: a lower top-left variant — the researchers (teen +
laptop) image is landscape and sits low, so its pill drops well down to
nestle nearer the figure instead of floating high in the empty top-left. */
body.home-v2 .hero-1 .hero-people-pill--top-left-low {
top: 196px;
left: 302px;
}
/* Christine 2026-06-02: investors pill dropped 50px from the base top-right. */
body.home-v2 .hero-1 .hero-people-pill--top-right {
top: 196px;
right: 17px;
}
/* Christine 2026-06-02: a lower top-right variant — the teachers (landscape
group) pill drops 200px to sit nearer the figure rather than high in the
empty top-right. */
body.home-v2 .hero-1 .hero-people-pill--top-right-low {
top: 56px;
right: 12px;
}
/* Christine 2026-06-02: teams sits 50px above the low variant (its own slot so
teachers, which shares top-right-low, is unaffected). */
body.home-v2 .hero-1 .hero-people-pill--top-right-mid {
top: 96px;
right: 22px;
}
body.home-v2 .hero-1 .hero-people-pill--bottom-left {
bottom: 26px;
left: 22px;
}
body.home-v2 .hero-1 .hero-people-pill--bottom-right {
bottom: 26px;
right: 22px;
}
/* leaders — above her left shoulder (left side, shoulder height). */
body.home-v2 .hero-1 .hero-people-pill--top-left-leaders {
top: 140px;
left: -8px;
}
/* parents — to the left of the boy's shoulder (left side, mid-height). */
body.home-v2 .hero-1 .hero-people-pill--mid-left {
top: 180px;
left: -63px;
}
/* researchers — above the laptop (right side, lower half). */
body.home-v2 .hero-1 .hero-people-pill--top-right-researchers {
top: 140px;
right: 282px;
}
@media (max-width: 991px) {
/* Break the hero image out of its container/col padding so it bleeds
edge to edge. Inset = custom-container padding (16px / --space-4)
+ Bootstrap g-4 col padding (12px) = 28px each side.
overflow-x: clip on the section stops the -28px right margin from
expanding the page width and causing horizontal overflow. */
body.home-v2 .hero-section.hero-1 { overflow-x: clip; }
/* Clip GSAP translateX animations inside team-section so they
don't expand the page width during entrance.
Using overflow-x: hidden (not clip) for broader Safari/WebKit support. */
body.home-v2 .team-section { overflow-x: hidden; }
}
body.home-v2 .testimonial-section.section-padding {
padding-top: 40px;
padding-bottom: 30px;
background: #f4f7fb !important;
}
body.home-v2 .testimonial-section .section-title,
body.home-v2 .testimonial-section .section-title.text-center {
margin-bottom: 15px;
}
body.home-v2 .testimonial-section .section-title .sub-title {
display: inline-block;
background: transparent !important;
margin-left: auto;
margin-right: auto;
}
body.home-v2 .testimonial-section .testimonial-box-item {
margin-top: 0;
}
@media (max-width: 991px) {
body.home-v2 .team-section.section-padding {
padding-top: 0;
padding-bottom: 24px;
margin-top: 0;
}
body.home-v2 .renatus-pricing-eyebrow-wrap {
display: inline-flex !important;
padding-bottom: 12px;
background: transparent !important;
color: #ffffff !important;
}
body.home-v2 .renatus-pricing-cta-mobile {
margin-top: 24px;
text-align: center;
}
body.home-v2 .theme-btn.theme-btn--white-black {
background-color: var(--white);
color: var(--navy);
border-color: var(--white);
width: 100%;
border-radius: 8px;
}
body.home-v2 .theme-btn.theme-btn--white-black::before,
body.home-v2 .theme-btn.theme-btn--white-black::after {
background-color: var(--navy);
border-radius: 8px;
}
body.home-v2 .theme-btn.theme-btn--white-black:hover,
body.home-v2 .theme-btn.theme-btn--white-black:active {
color: var(--white);
border-color: var(--navy);
}
}
@media (max-width: 767px) {
/* PRICING — hide the desktop team-section on mobile; the new
renatus-pricing-mobile-section (d-md-none) handles this size. */
body.home-v2 .team-section {
display: none !important;
}
body.home-v2 .team-section .section-title h2,
body.home-v2 .team-section .counter-content > p.text {
display: none;
}
body.home-v2 .testimonial-section .section-title h2 {
display: none;
}
body.home-v2 .testimonial-section .section-title {
text-align: left !important;
margin-bottom: 15px;
}
body.home-v2 .testimonial-section .section-title .sub-title {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 991px) {
body.home-v2 .hero-1 .hero-image {
margin-top: -24px;
margin-left: -28px;
margin-right: -28px;
width: calc(100% + 56px);
overflow: hidden;
}
/* Smaller slot = smaller images; object-fit:cover fills it completely
so there is never a gap between the image and the wrapper. */
body.home-v2 .hero-1 .hero-people-slider {
height: 370px;
margin: 0 auto;
width: 100%;
}
body.home-v2 .hero-1 .hero-people-slider .swiper-slide {
align-items: flex-end;
}
/* Portrait (square) shots: contain so the full person is visible.
93% size reduces without affecting landscape slides. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img.hero-people-img--lg {
object-fit: contain;
object-position: center bottom;
transform-origin: center bottom;
width: 93%;
height: 93%;
}
/* Landscape shots: fill slot height, overflow left and right. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img.hero-people-img--wide {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform-origin: center center;
}
/* Researchers: landscape with empty sky at top — scale up and anchor right
so the subject stays visible and the crop falls on the left. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img[src*="for-researchers"] {
object-position: right center;
transform: scale(1.2);
transform-origin: right center;
}
/* Educators: shift down to lower the head without shrinking below the slot. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img[src*="for-educators"] {
object-position: center 20%;
}
/* Training: modest scale so the hat aligns with the shared head baseline. */
body.home-v2 .hero-1 .hero-people-slider .swiper-slide img[src*="for-training"] {
transform: scale(1.0);
transform-origin: center center;
}
body.home-v2 .hero-1 .hero-people-pill {
padding: 4px 10px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.5);
}
/* founders — above his left shoulder */
body.home-v2 .hero-1 .hero-people-pill--top-left {
top: 155px;
left: 14px;
}
/* investors — just above her shoulder */
body.home-v2 .hero-1 .hero-people-pill--top-right {
top: 100px;
right: 14px;
}
/* practitioners — just above the boy's head */
body.home-v2 .hero-1 .hero-people-pill--top-left-2 {
top: 60px;
left: 14px;
}
/* consultants — above his left shoulder */
body.home-v2 .hero-1 .hero-people-pill--top-left-3 {
top: 145px;
left: 14px;
}
/* training — above the desk */
body.home-v2 .hero-1 .hero-people-pill--top-left-low {
top: 185px;
left: 264px;
}
/* educators — above the little girl's head */
body.home-v2 .hero-1 .hero-people-pill--top-right-low {
top: 70px;
right: 29px;
}
/* teams — right of the man's head */
body.home-v2 .hero-1 .hero-people-pill--top-right-mid {
top: 60px;
right: 34px;
}
/* assessors — above her left shoulder */
body.home-v2 .hero-1 .hero-people-pill--top-left-leaders {
top: 145px;
left: 34px;
}
/* parents — to the left of the boy's shoulder */
body.home-v2 .hero-1 .hero-people-pill--mid-left {
top: 175px;
left: 14px;
}
/* researchers — above the laptop */
body.home-v2 .hero-1 .hero-people-pill--top-right-researchers {
top: 145px;
right: 254px;
}
body.home-v2 .hero-1 .hero-people-pill--bottom-left,
body.home-v2 .hero-1 .hero-people-pill--bottom-right {
bottom: 14px;
}
body.home-v2 .hero-1 .hero-people-pill--bottom-left {
left: 14px;
}
body.home-v2 .hero-1 .hero-people-pill--bottom-right {
right: 14px;
}
}
/* Offcanvas close button — vendor main.css paints div.offcanvas__close
as a pink circle; strip it here (loads after main.css so we win). */
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
width: auto;
height: auto;
line-height: normal;
border-radius: 0;
background-color: transparent;
position: static;
}
@media (max-width: 767px) {
.offcanvas__info {
width: calc(75vw - 20px);
}
.offcanvas__close {
display: none;
}
}
/* Navbar — white background. */
body.home-v2 #header-sticky {
background: #ffffff !important;
}
/* Navbar links — black. */
body.home-v2 .header-1 .main-menu nav > ul > li > a {
color: #0F1E41 !important;
}
/* Navbar login icon + text — dark navy. */
body.home-v2 .header-btn h6,
body.home-v2 .header-btn h6 i,
body.home-v2 .header-btn h6 a {
color: #0F1E41 !important;
}
body.home-v2 .header-btn h6 a:hover {
color: #FF11DF !important;
}
/* Right cluster: tighten spacing between language, pricing, sign-in,
* and the Get Started CTA. Brevon's default uses gap:100px on
* .header-right and gap:40px on .header-btn, which leaves the cluster
* sprawling on wide screens and overlapping the main menu on mid widths.
* Also override Brevon's @media (max-width:1600px) rule that hides h6
* labels — we need Pricing + Sign in visible down to the mobile breakpoint. */
body.home-v2 .header-main .header-right {
gap: 20px;
}
body.home-v2 .header-main .header-right .header-btn {
gap: 20px;
}
@media (max-width: 1199px) {
body.home-v2 .header-main .header-right {
gap: 8px;
}
body.home-v2 .header-main .header-right .header-btn {
gap: 8px;
}
}
@media (max-width: 1600px) {
body.home-v2 .header-main .header-right .header-btn h6 {
display: inline-flex !important;
}
}
/* Hero section — white background. */
body.home-v2 .hero-section.hero-1 {
background-color: #ffffff !important;
}
/* Navbar "Get started" button — #0F1E41 base, pink hover wipe to
* match the hero CTA. ::after overlay zeroed out so the wipe lands
* on a clean pink fill instead of a tinted overlay. */
body.home-v2 .header-button .theme-btn {
background-color: #0F1E41 !important;
background-image: none !important;
}
body.home-v2 .header-button .theme-btn::before {
background-color: #ff2cd7 !important;
}
body.home-v2 .header-button .theme-btn::after {
background-color: transparent !important;
}
/* Hero CTA text: "Get started" on desktop, "Begin" on mobile. */
body.home-v2 .hero-1 .hero-cta-mobile { display: none; }
@media (max-width: 991px) {
body.home-v2 .hero-1 .hero-cta-desktop { display: none; }
body.home-v2 .hero-1 .hero-cta-mobile { display: inline; }
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2) i { display: none; }
}
/* Hero "Get started" button — cyan base, black hover swipe. */
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2) {
background: linear-gradient(225deg, var(--purple) 0%, var(--cyan) 100%) !important;
color: var(--white) !important;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2)::before {
background-color: #0F1E41 !important;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2)::after {
background-color: transparent !important;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2):hover {
color: var(--white) !important;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2) i {
color: var(--white) !important;
}
/* Hero text — black. */
body.home-v2 .hero-1 .hero-content h1,
body.home-v2 .hero-1 .hero-content h6,
body.home-v2 .hero-1 .hero-content p {
color: #0F1E41 !important;
}
@media (min-width: 768px) {
body.home-v2 .hero-1 .hero-content {
padding-left: 10px;
margin-bottom: 60px;
}
}
@media (min-width: 992px) and (max-width: 1099px) {
body.home-v2 .hero-section.hero-1 {
padding-top: 80px;
padding-bottom: 60px;
}
body.home-v2 .hero-1 .hero-content,
body.home-v2 .hero-1 .renatus-rating-block {
padding-left: 30px;
}
body.home-v2 .project-section .project-thumb {
display: block;
width: 260px !important;
flex: 0 0 260px !important;
height: 260px !important;
}
/* Always-coloured icons on the desktop strip carousel (no hover needed on touch). */
body.home-v2 .hp-bare-card[data-ci="0"] .hp-bare-card-icon { background: var(--cyan) !important; opacity: 1; }
body.home-v2 .hp-bare-card[data-ci="1"] .hp-bare-card-icon { background: var(--pink) !important; opacity: 1; }
body.home-v2 .hp-bare-card[data-ci="2"] .hp-bare-card-icon { background: var(--yellow) !important; opacity: 1; }
body.home-v2 .hp-bare-card[data-ci="3"] .hp-bare-card-icon { background: var(--purple) !important; opacity: 1; }
body.home-v2 .hp-bare-card { color: var(--navy) !important; width: 190px !important; height: 90px !important; font-size: 13px !important; }
body.home-v2 .hp-bare-card-icon { width: 28px !important; height: 28px !important; }
body.home-v2 .about-section.section-padding { padding-top: 0 !important; padding-bottom: 85px !important; margin-top: -20px !important; }
body.home-v2 .news-section .row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
scrollbar-width: none;
}
body.home-v2 .news-section .row::-webkit-scrollbar {
display: none;
}
body.home-v2 .news-section .row > [class*="col-"] {
flex: 0 0 calc(50% - 8px);
max-width: calc(50% - 8px);
scroll-snap-align: start;
}
}
@media (min-width: 768px) and (max-width: 991px) {
body.home-v2 .news-section .row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
scrollbar-width: none;
}
body.home-v2 .news-section .row::-webkit-scrollbar {
display: none;
}
body.home-v2 .news-section .row > [class*="col-"] {
flex: 0 0 calc(50% - 8px);
max-width: calc(50% - 8px);
scroll-snap-align: start;
}
}
/* Hero headline — pin to the big scale so it stays the page's largest
* type. Christine: this and the standards-card title size were reading
* as swapped (hero small, cards huge); the cards are shrunk to a
* sub-heading size in the project-card block above. */
body.home-v2 .hero-1 .hero-content h1 {
font-size: 80px;
line-height: 0.95;
}
@media (max-width: 1399px) {
body.home-v2 .hero-1 .hero-content h1 { font-size: 60px; }
}
@media (max-width: 991px) {
body.home-v2 .hero-1 .hero-content h1 {
font-size: 36px;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
body.home-v2 .hero-1 .hero-content p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 575px) {
body.home-v2 .hero-1 .hero-content h1 { font-size: 42px; font-weight: 800; margin-bottom: 0; }
}
/* Hero sub-headline: bump size + weight so it holds its own beneath the
* giant headline. The skin's 16px/400 reads as a footnote on a light bg;
* Neotix gets away with small text because dark-on-light contrast does
* the heavy lifting for them. We compensate with scale. */
body.home-v2 .hero-1 .hero-content p {
font-size: 22px;
font-weight: 500;
line-height: 1.5;
max-width: 420px;
margin-top: 8px;
}
body.home-v2 .hero-1 .hero-content .hero-btn {
margin-top: 30px;
}
@media (max-width: 575px) {
body.home-v2 .hero-1 .hero-content p {
font-size: 18px;
}
}
@media (min-width: 992px) {
body.home-v2 .about-section .section-title h2 .renatus-about-title-suffix {
color: var(--navy) !important;
font-weight: 300 !important;
opacity: 1;
}
}
@media (max-width: 991px) {
body.home-v2 .renatus-about-title-suffix {
display: none;
}
body.home-v2 .renatus-eyebrow-stars {
margin-left: 6px;
}
}
/* Reserved gradient utility — paint as a background fill or as text. */
body.home-v2 .renatus-gradient { background: var(--renatus-gradient); }
body.home-v2 .renatus-gradient-text {
background: var(--renatus-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Testimonial card — clamp quote to 5 lines */
body.home-v2 .testimonial-box-item > p {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: calc(1.6em * 5);
max-height: calc(1.6em * 5);
line-height: 1.6;
}
/* Testimonial card — hide brand logo slot, style portrait avatar */
body.home-v2 .testimonial-box-item .client-info-item .logo-image {
display: none !important;
}
body.home-v2 .testimonial-box-item .info-item > img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
object-position: center 20%;
flex-shrink: 0;
}
/* Two-card pricing block (replaces team grid) */
body.home-v2 .renatus-twocard-row { margin-top: 8px; }
body.home-v2 .renatus-pricing-card {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 10px;
padding: 36px 32px;
min-height: 260px;
text-decoration: none;
color: #ffffff;
height: 100%;
transition: background 0.2s ease, transform 0.2s ease;
}
body.home-v2 .renatus-pricing-card:hover {
background: rgba(255, 255, 255, 0.35);
transform: translateY(-3px);
color: #ffffff;
}
body.home-v2 .renatus-pricing-card:focus-visible {
outline: 2px solid #FF11DF;
outline-offset: 3px;
}
body.home-v2 .renatus-pricing-card__eyebrow {
font-size: 15px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
}
body.home-v2 .renatus-pricing-card__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
color: #ffffff;
line-height: 1.1;
margin-bottom: 16px;
}
body.home-v2 .renatus-pricing-card__from {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
body.home-v2 .renatus-pricing-card__amount {
font-size: 52px;
font-weight: 800;
color: #ffffff;
line-height: 1;
}
body.home-v2 .renatus-pricing-card__suffix {
font-size: 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
body.home-v2 .renatus-pricing-card__body {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
/* Cyan theme-btn variant */
body.home-v2 .theme-btn.theme-btn--cyan {
background-color: #3bc0ff;
color: #0F1E41;
border-color: #3bc0ff;
}
body.home-v2 .theme-btn.theme-btn--cyan::before,
body.home-v2 .theme-btn.theme-btn--cyan::after {
background-color: #1FBDEA;
}
body.home-v2 .theme-btn.theme-btn--cyan:hover {
color: #0F1E41;
}
body.home-v2 .theme-btn.theme-btn--cyan i { color: #0F1E41; }
body.home-v2 .theme-btn.theme-btn--black-pink {
background-color: var(--navy);
color: var(--white);
border-color: var(--navy);
}
body.home-v2 .theme-btn.theme-btn--black-pink::before,
body.home-v2 .theme-btn.theme-btn--black-pink::after {
background-color: #ff2cd7;
}
body.home-v2 .theme-btn.theme-btn--black-pink:hover,
body.home-v2 .theme-btn.theme-btn--black-pink:active {
color: var(--white);
border-color: #ff2cd7;
}
/* ─── Mobile-only pricing section ───────────────────────────────────────────
Shown only at <768 px (d-md-none). The desktop team-section is hidden on
mobile via CSS so there is no duplicate content. */
body.home-v2 .renatus-pricing-mobile-section {
background: linear-gradient(to bottom, #ffffff 0%, #f4f7fb 50%, #ffffff 100%);
padding-top: 15px;
padding-bottom: 20px;
}
/* Eyebrow pill — dark text on the gray background; strip the default
sub-title margin-bottom so the gap to the pink card is exactly 15px. */
body.home-v2 .renatus-pricing-mobile-section .renatus-pricing-eyebrow-mobile {
display: inline-flex !important;
color: var(--navy) !important;
background: transparent !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
/* Tight gap between eyebrow row and pink card row — override Bootstrap mt-3. */
body.home-v2 .renatus-pricing-mobile-section .row + .row {
margin-top: 8px !important;
}
/* Pink gradient wrapper for row 2 cards. */
body.home-v2 .renatus-pricing-mobile-wrap {
background: linear-gradient(to bottom left, var(--pink), var(--yellow) 220%);
border-radius: 20px;
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* CTA button inside the pink wrap — full width white/dark. */
body.home-v2 .renatus-pricing-mobile-cta-btn {
width: 100%;
border-radius: 8px;
background-color: var(--white);
color: var(--navy);
border-color: var(--white);
justify-content: center;
margin-top: 8px;
}
body.home-v2 .team-section.section-padding {
background: linear-gradient(to bottom, #ffffff 0%, #f4f7fb 100%) !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.home-v2 .team-section .team-wrapper {
background: linear-gradient(to bottom left, var(--pink), var(--yellow) 220%);
border-radius: 20px;
padding: 56px 48px;
}
body.home-v2 .team-section .counter-wrapper .counter-box-item {
background: var(--white) !important;
}
/* Pricing intro — spacing between body copy and CTA */
body.home-v2 .team-section .counter-content > p.text {
margin-bottom: 30px;
}
/* Eyebrow pills — more breathing room on the sides */
body.home-v2 .section-title .sub-title {
padding: 8px 22px;
margin-bottom: 15px !important;
}
/* Pricing intro — mirror counter-content spacing so heading wraps like the section above */
body.home-v2 .team-section .team-wrapper .counter-content {
margin-right: 150px;
}
@media (max-width: 1399px) {
body.home-v2 .team-section .team-wrapper .counter-content {
margin-right: 80px;
}
}
@media (max-width: 1199px) {
body.home-v2 .team-section .team-wrapper .counter-content {
margin-right: 0;
}
}
/* Pricing CTA — transparent with white border, fills white on hover */
body.home-v2 .team-section .theme-btn {
background-color: transparent;
border: 1.5px solid #ffffff;
color: #ffffff;
}
body.home-v2 .team-section .theme-btn::before,
body.home-v2 .team-section .theme-btn::after {
background-color: #ffffff;
}
body.home-v2 .team-section .theme-btn i { color: #ffffff; }
body.home-v2 .team-section .theme-btn:hover {
background-color: #ffffff;
color: #0F1E41;
}
body.home-v2 .team-section .theme-btn:hover i { color: #0F1E41; }
body.home-v2 .team-section .theme-btn.theme-btn--white-black {
background-color: #ffffff;
color: #0F1E41;
border: none;
}
body.home-v2 .team-section .theme-btn.theme-btn--white-black::before,
body.home-v2 .team-section .theme-btn.theme-btn--white-black::after {
background-color: var(--navy);
}
/* Expand radius to 150% so the circle covers the full width of a
wide button (100% only reaches the centre-edge, leaving corners) */
body.home-v2 .team-section .theme-btn.theme-btn--white-black:hover::before {
clip-path: circle(150% at 50% 50%);
}
body.home-v2 .team-section .theme-btn.theme-btn--white-black:hover::after {
clip-path: circle(150% at 50% 50%);
}
body.home-v2 .team-section .theme-btn.theme-btn--white-black:hover,
body.home-v2 .team-section .theme-btn.theme-btn--white-black:active {
background-color: var(--navy);
color: #ffffff;
}
body.home-v2 .team-section .theme-btn.theme-btn--white-black:hover i,
body.home-v2 .team-section .theme-btn.theme-btn--white-black:active i {
color: #ffffff;
}
/* Pricing intro typography — match the stats (counter) intro recipe exactly */
body.home-v2 .team-section .team-wrapper .counter-content .text {
color: #ffffff;
opacity: 0.8;
font-weight: 400;
margin-top: 20px;
margin-bottom: 30px;
max-width: 299px;
}
/* Customers section — per-slide star color. Each testimonial uses a
* different brand fill: Sara=yellow, Peter=cyan, Terrence=purple,
* Jenny=pink. Selectors include .testimonial-section so they outrank
* the base .testimonial-box-item .star rule from main.css. */
body.home-v2 .testimonial-section .star.star-yellow i { color: #FFD400; -webkit-text-stroke: 0; text-stroke: 0; }
body.home-v2 .testimonial-section .star.star-cyan i { color: #3bc0ff; -webkit-text-stroke: 0; text-stroke: 0; }
body.home-v2 .testimonial-section .star.star-purple i { color: #8011FA; -webkit-text-stroke: 0; text-stroke: 0; }
body.home-v2 .testimonial-section .star.star-pink i{ color: #FF11DF; -webkit-text-stroke: 0; text-stroke: 0; }
/* Customer carousel arrows: match the Solutions section treatment
exactly — prev = 1px light-grey outline with navy chevron;
next = navy fill with white chevron; both flip to pink on
hover. Selectors include .array-button so they outrank the base
.testimonial-section .array-button .array-prev rules (0,3,0). */
body.home-v2 .testimonial-section .array-button .array-prev {
background-color: #ffffff;
border: 1px solid #E6E8EB;
color: #0A1530;
}
body.home-v2 .testimonial-section .array-button .array-prev i {
color: #0A1530;
}
body.home-v2 .testimonial-section .array-button .array-prev:hover {
background-color: #00c3ff;
border-color: #00c3ff;
color: #ffffff;
}
body.home-v2 .testimonial-section .array-button .array-prev:hover i {
color: #ffffff;
}
body.home-v2 .testimonial-section .array-button .array-next {
background-color: #0F1E41;
border: 1px solid #0F1E41;
color: #ffffff;
}
body.home-v2 .testimonial-section .array-button .array-next i {
color: #ffffff;
}
body.home-v2 .testimonial-section .array-button .array-next:hover {
background-color: #00c3ff;
border-color: #00c3ff;
}
/* FAQ section — open header + collapsed toggle circle in brand blue */
body.home-v2 .faq-section .faq-items .accordion .accordion-button {
background-color: #3b78ff;
color: #ffffff !important;
}
body.home-v2 .faq-section .faq-items .accordion .accordion-button::before {
color: #3b78ff;
background-color: #ffffff;
}
body.home-v2 .faq-section .faq-items .accordion .accordion-button.collapsed {
background-color: transparent;
color: #0F1E41 !important;
}
body.home-v2 .faq-section .faq-items .accordion .accordion-button.collapsed::before {
color: #ffffff;
background-color: #3b78ff;
}
body.home-v2 .faq-section .faq-items .accordion .accordion-body p {
margin-bottom: 1em;
}
body.home-v2 .faq-section .faq-items .accordion .accordion-body p:last-child {
margin-bottom: 0;
}
/* Swiper pagination — active dot in cyan instead of pink. */
body.home-v2 .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #3bc0ff;
}
/* Marquee section — yellow → pink gradient (yellow holds to 30%,
then transitions to pink by 100%). Text + stars in navy for
legibility across the lighter half. */
body.home-v2 .marquee-section {
display: none;
}
body.home-v2 .marquee-section .marquee .text,
body.home-v2 .marquee-section .marquee .text * {
color: #ffffff;
}
/* Marquee lives INSIDE the dark-navy team-section so the panel's
20px border-radius clips its edges. Two requirements:
1. team-section must clip overflow so the corners actually mask.
2. team-section's section-padding-bottom is dropped so the marquee
sits flush against the rounded bottom edge; the marquee provides
its own top breathing room from the pricing cards above.
Per Christine 2026-05-24. */
body.home-v2 .team-section {
overflow: hidden;
padding-bottom: 0;
background: linear-gradient(to bottom, var(--purple) 0%, var(--cyan) 80%) !important;
}
@media (min-width: 992px) {
body.home-v2 .team-section {
background: linear-gradient(to bottom, var(--purple) 0%, var(--cyan) 80%) !important;
padding-bottom: 120px !important;
}
body.home-v2 .counter-section {
display: none !important;
}
body.home-v2 .team-section .renatus-pricing-eyebrow-wrap {
background: transparent !important;
color: #ffffff !important;
margin-left: -12px;
margin-bottom: 15px !important;
}
body.home-v2 .team-section .renatus-eyebrow-stars {
filter: brightness(0) invert(1);
}
}
body.home-v2 .team-section .marquee-section {
margin-top: 80px;
}
@media (max-width: 767px) {
body.home-v2 .team-section .marquee-section {
margin-top: 48px;
}
}
@media (max-width: 991px) {
body.home-v2 .marquee-section .marquee {
padding: 12px 0;
}
body.home-v2 .marquee-section .marquee .text {
font-size: 16px;
gap: 12px;
}
body.home-v2 .marquee-section .marquee .text img {
width: 16px;
height: 16px;
}
}
/* Kill the Brevon-default `.marquee { margin-bottom: 120px }` so the
marquee sits flush against the team-section's rounded bottom edge.
Without this, 120px of navy bleeds below the marquee and the news-
section's eyebrow falls inside the navy panel. Per Christine 2026-05-24. */
body.home-v2 .team-section .marquee-section .marquee {
margin-bottom: 0;
}
/* 120px breathing room above the news-section eyebrow ("For Facilitators
and Teams"). The news-section ships with Bootstrap's `pt-0` (which
uses !important), so we need !important to win. Per Christine 2026-05-24. */
body.home-v2 .news-section {
padding-top: 80px !important;
background: #ffffff !important;
}
body.home-v2 .news-section .section-title .sub-title {
background: transparent !important;
margin-left: -10px;
}
@media (max-width: 1199px) {
body.home-v2 .news-section { padding-top: 100px !important; }
}
@media (max-width: 991px) {
body.home-v2 .news-section { padding-top: 80px !important; }
}
/* News card "See Plans / Read more" links: black (navy) instead of
pink so the cards read calmer. Hover stays pink for affordance. */
body.home-v2 .news-section .news-card-items .link-btn,
body.home-v2 .news-section .news-card-items .link-btn i {
color: #0A1530;
}
body.home-v2 .news-section .news-card-items .link-btn:hover,
body.home-v2 .news-section .news-card-items .link-btn:hover i {
color: #ff11df;
}
/* News cards — lock image area to a fixed 250px height and cover-fit
the image so the photo fills the slot without distortion. Matches
the 420x250 placeholder dimensions in the mockup. */
body.home-v2 .news-section .news-card-items {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
body.home-v2 .news-section .news-card-items .news-image {
height: 250px;
}
body.home-v2 .news-section .news-card-items .news-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Prevent ScrollSmoother from cropping the footer. GSAP clips
#smooth-content at exactly the viewport height; a padding-bottom
on the content element increases the calculated scroll distance
so the footer is fully in view at maximum scroll. */
body.home-v2 #smooth-content {
padding-bottom: 60px;
}
/* ============================================
Shared partial footer — scoped styles
The home_v2 page can't load global base.css without breaking the
Brevon layout (yellow Q&A bleed, hero gradient loss, etc.), so we
inline the footer styles here scoped under body.home-v2 .footer.
Values mirror static/css/base.css with literal fallbacks for the
tokens that base.css would normally provide. /home-preview triggers
the collapsed (one-row) footer variant.
============================================ */
body.home-v2 .footer {
/* Match the other dark-navy sections (team-section, etc.) which use
--black (#0f1e41). Was #071126 — too dark, broke the palette.
Per Christine 2026-05-24. */
background: #0f1e41;
color: #ffffff;
padding: 96px 32px 64px;
font-family: 'Inter', sans-serif;
}
body.home-v2 .footer-inner {
max-width: 1425px;
margin: 0 auto;
}
body.home-v2 .footer-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
margin-bottom: 40px;
}
body.home-v2 .footer-logo { display: block; flex: 0 0 auto; }
body.home-v2 .footer-logo-img { height: 56px; width: auto; }
body.home-v2 .footer-columns { display: flex; gap: 64px; }
body.home-v2 .footer-social { display: flex; align-items: center; gap: 16px; }
body.home-v2 .footer-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
color: rgba(255,255,255,0.6);
transition: color .2s ease;
}
body.home-v2 .footer-social a:hover { color: #ffffff; }
body.home-v2 .footer-social a svg { display: block; width: 20px; height: 20px; }
body.home-v2 .footer-social-placeholder { cursor: default; color: rgba(255,255,255,0.6); }
body.home-v2 .footer-col h4 {
font-size: 20px; font-weight: 600; line-height: 28px;
margin-bottom: 18px; color: #ffffff;
cursor: default; display: flex; align-items: center;
justify-content: flex-start; gap: 0;
}
body.home-v2 .footer-chevron {
display: none; flex-shrink: 0; transition: transform .25s ease;
stroke: #ffffff; stroke-width: 3; opacity: 1; margin-left: 8px;
}
body.home-v2 .footer-col.open .footer-chevron { transform: rotate(180deg); }
body.home-v2 .footer-col ul {
list-style: none; display: flex; flex-direction: column;
gap: 12px; padding: 0; margin: 0;
}
@media (min-width: 768px) {
body.home-v2 .footer-main:not(.footer-main--collapsed) .footer-col:last-child ul {
column-count: 2;
column-gap: 32px;
display: block;
}
body.home-v2 .footer-main:not(.footer-main--collapsed) .footer-col:last-child ul li {
margin-bottom: 12px;
}
body.home-v2 .footer-main:not(.footer-main--collapsed) .footer-col:last-child ul li:last-child {
margin-bottom: 0;
}
}
body.home-v2 .footer-col a {
font-size: 17px; line-height: 22px;
color: rgba(255,255,255,0.75); text-decoration: none;
transition: color .2s ease;
}
body.home-v2 .footer-col a:hover { color: #ffffff; }
body.home-v2 .footer-bottom {
margin-top: 32px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.2);
display: flex; justify-content: flex-start; align-items: center;
gap: 30px; font-size: 14px; line-height: 19px;
color: rgba(255,255,255,0.7);
}
body.home-v2 .footer-copyright--mobile { display: none; }
@media (max-width: 767px) {
body.home-v2 .footer-copyright--desktop { display: none; }
body.home-v2 .footer-copyright--mobile { display: inline; }
}
/* Desktop footer — reduce height by 30px vs vendor default (80px → 50px) */
@media (min-width: 768px) {
body.home-v2 .footer-section {
padding-bottom: 50px !important;
}
}
/* Collapsed (one-row) footer variant — used on every non-root path,
including /home-preview. */
body.home-v2 .footer--collapsed { padding: 20px 32px; }
body.home-v2 .footer--collapsed .footer-inner {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
body.home-v2 .footer--collapsed .footer-main--collapsed {
margin: 0; flex: 0 0 auto; order: 2;
}
body.home-v2 .footer--collapsed .footer-bottom {
order: 1; flex: 1 1 auto;
display: flex; align-items: center; justify-content: flex-start; gap: 30px;
margin: 0; padding: 0; border-top: 0;
}
body.home-v2 .footer--collapsed .footer-bottom > span { flex: 0 0 auto; }
body.home-v2 .footer--collapsed .footer-columns { gap: 32px; align-items: center; }
body.home-v2 .footer--collapsed .footer-col { position: relative; }
body.home-v2 .footer--collapsed .footer-col h4 {
font-size: 14px; font-weight: 600; line-height: 1; margin: 0; cursor: pointer;
}
body.home-v2 .footer--collapsed .footer-col h4 .footer-chevron {
display: inline-block; width: 10px; height: 10px; margin-left: 6px;
}
body.home-v2 .footer--collapsed .footer-col ul {
position: absolute; bottom: calc(100% + 12px); left: 0;
min-width: 220px; max-width: calc(100vw - 24px);
padding: 14px 18px;
background: #0F1E41;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index: 20;
}
body.home-v2 .footer--collapsed .footer-col:last-child ul { left: auto; right: 0; }
body.home-v2 .footer--collapsed .footer-col.open ul {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* Per-card object-position override for the news cards. The puzzle
photo on the "Run cohorts at scale" card needs to be anchored to
the right edge so the focal puzzle pieces stay in frame. */
body.home-v2 .news-section .news-card-items .news-image--align-right img {
object-position: right center;
}
/* Q&A / FAQ section hidden on /home-preview — Glenn is relocating the
copy elsewhere on the site. Markup left in place so it's easy to
re-enable by removing this rule. */
body.home-v2 .faq-section { display: none !important; }
/* ── Avatar dropdown collapse rules (home / home_v2 only) ──────────
The v2 navbar partial (templates/partials/navbar.html) expects its
`.top-bar-user-menu` to start hidden and open on click via
navbar.js. Those defaults live in static/css/base.css, which is NOT
loaded on this self-contained brevon page. Without them the menu
renders permanently expanded and covers the hero.
Mirrors base.css lines 376–415 (positioning anchor + collapse) so
the brevon page gets the same toggle behaviour as every other
page. */
body.home-v2 .top-bar-user { position: relative; }
body.home-v2 .top-bar-user-trigger { cursor: pointer; display: flex; align-items: center; }
body.home-v2 .top-bar-user-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1001;
}
body.home-v2 .top-bar-user-menu.open { display: block; }
/* ── Font smoothing parity with the rest of the app ───────────────
Every other page loads base.css which sets
`-webkit-font-smoothing: antialiased` on the body. The brevon
bundle never does, so Inter renders with subpixel smoothing on
home_v2 only — which makes the v2 navbar look heavier and
slightly denser than the same navbar on /work, /pricing, etc.
Match the rest of the app so the navbar typography is consistent. */
body.home-v2 {
background-color: #f4f7fb !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Scrollbar colour — neutral grey, not brand pink ───────────────
The brevon main.css styles the global `::-webkit-scrollbar-thumb`
with var(--theme), which the override block above sets to #FF11DF
(pink). That painted every scrollbar on the home page (and its
dropdown menus) bright pink. Repaint the thumb a subtle grey. This
sheet loads after main.css, so the later equal-specificity rule
wins. Christine 2026-06-25. */
::-webkit-scrollbar-thumb {
background: var(--gray-light);
}
/* ══════════════════════════════════════════════════════════════════
MOBILE — home-v2 responsive overrides
──────────────────────────────────────────────────────────────────
All rules scoped to body.home-v2. Breakpoints follow the existing
Brevon scale: 991 / 767 / 575px. No new breakpoints introduced.
Spacing uses --space-* tokens throughout; raw px only where no
token maps (image max-height). Existing scattered @media queries
above remain in place — this block handles the gaps.
══════════════════════════════════════════════════════════════════ */
/* TOPPER — navbar-v2.css hides .header-top-section at ≤1399px globally.
Override here to keep the scrolling announcement bar visible on mobile
for the home page. The sticky rule (.v2-nav.sticky = 0-3-0) beats this
rule (0-2-1) so the bar correctly disappears on scroll without !important. */
body.home-v2 .header-top-section {
display: block;
}
/* ── ≤ 991px ───────────────────────────────────────────────────── */
@media (max-width: 991px) {
/* COUNTERS — (1) heading before stats, (2) 2×2 grid, (3) compact
cards, (4) edge-to-edge (remove vendor inset margin + radius). */
body.home-v2 .counter-section {
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 0 !important;
}
body.home-v2 .counter-wrapper .row > div:nth-child(2) {
order: -1;
}
body.home-v2 .counter-wrapper .row .col-md-6 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
body.home-v2 .counter-wrapper .counter-box-item {
padding: 16px;
}
body.home-v2 .counter-wrapper .counter-box-item .counter-top-item {
margin-bottom: 12px;
}
body.home-v2 .counter-wrapper .counter-box-item .counter-top-item h2 {
font-size: 40px;
}
body.home-v2 .counter-section .section-title .sub-title { display: none; }
body.home-v2 .counter-section .video-circle { display: none; }
body.home-v2 .counter-wrapper .counter-content .text {
width: 90%;
}
/* HERO → CAROUSEL — remove the hero section's bottom padding and the
brand-section's top margin so the images butt directly up against
the carousel with no gap. */
body.home-v2 .hero-section.hero-1 { padding-top: 24px !important; padding-bottom: 0 !important; }
body.home-v2 .brand-section { margin-top: 0 !important; padding-top: 20px; margin-bottom: 20px; background: #f4f7fb; }
/* HERO — .custom-container has no Bootstrap padding, so the hero
content sits flush against the screen edge on mobile. Add a
16px (--space-4) horizontal gutter to match Bootstrap's
.container behaviour at this width. */
body.home-v2 .hero-section .custom-container {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
/* HERO — hide the eyebrow pill, frameworks count block, and secondary CTA on mobile. */
body.home-v2 .hero-content h6,
body.home-v2 .renatus-rating-block,
body.home-v2 .hero-1 .hero-btn .theme-btn.style-2,
body.home-v2 .news-section,
body.home-v2 .counter-section {
display: none;
}
/* HERO — centre the remaining "Get Started" button and reduce its
size so it sits proportionally under the 50px centred headline.
Black base, cyan hover swipe on mobile (matches desktop). */
body.home-v2 .hero-1 .hero-content .hero-btn {
justify-content: center;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2) {
font-size: 14px;
padding: 12px 24px;
background-color: transparent !important;
background-image: linear-gradient(225deg, var(--purple) 0%, var(--cyan) 100%) !important;
color: var(--white) !important;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2)::before {
background-color: #ff2cd7 !important;
}
body.home-v2 .hero-1 .hero-btn .theme-btn:not(.style-2):hover {
color: var(--white) !important;
}
/* ABOUT — Chat panel desktop padding (35px 84px 110px 56px) is
too wide for a phone column: the 84px right and 56px left
reduce the usable interior to ~200px. Bring both sides to 24px
(--space-6) and bottom to 48px (--space-12). The decorative
speech-bubble ::before is absolutely sized at calc(140% – 250px)
and bleeds off-screen at narrow widths — hide it, and replace
with a plain frosted card so the bubbles have a visible frame. */
/* ABOUT — gradient background (matches all screens, hardcoded hex for home_v2 token safety). */
body.home-v2 .about-section {
background: linear-gradient(to bottom, #ffffff 70%, #f4f7fb 90%) !important;
}
/* ABOUT — extra breathing room under the "Our difference" h2. */
body.home-v2 .about-section .section-title h2 {
margin-bottom: 24px;
}
/* SOLUTIONS — reduce the default 80px section-padding top/bottom. */
body.home-v2 .service-section.section-padding {
padding-top: 40px;
padding-bottom: 20px;
}
/* STANDARDS — hide card thumbnails on tablet/mobile (copy only). */
body.home-v2 .project-section .project-thumb {
display: none !important;
}
/* CTA buttons — auto-width, left-aligned. */
body.home-v2 .project-section .renatus-card-cta {
display: inline-block;
margin-top: 16px;
}
/* STANDARDS / product section — remove top padding, tighten heading gap,
and match the desktop gray-hover background on mobile. */
body.home-v2 .project-section.section-padding {
padding-top: 30px;
padding-bottom: 50px;
margin-top: 0;
background-color: #f4f7fb !important;
}
body.home-v2 .project-section .section-title {
margin-bottom: 0;
}
body.home-v2 .project-section .section-title h2 {
display: none;
}
body.home-v2 .project-section .project-box-wrapper {
margin-top: 15px;
}
body.home-v2 .project-section .section-title,
body.home-v2 .project-section .section-title.text-center,
body.home-v2 .project-section .section-title h2 {
text-align: left;
}
body.home-v2 .project-section .section-title .sub-title {
display: block;
text-align: left;
margin-top: 30px;
background: transparent !important;
}
/* SOLUTIONS — match the eyebrow bottom-margin of the section above,
and correct the 3px rightward offset vs the heading text below. */
body.home-v2 .service-section .renatus-eyebrow-stars {
filter: none;
}
body.home-v2 .service-section .section-title .sub-title {
margin-bottom: 30px;
margin-left: -6px;
color: var(--navy) !important;
}
body.home-v2 .service-section .section-title h2,
body.home-v2 .service-section .section-title-area > p {
color: var(--navy);
}
/* SOLUTIONS — hide prev/next carousel arrows on mobile. */
body.home-v2 .service-section .array-button {
display: none;
}
/* SOLUTIONS — tighten gap above dots. */
body.home-v2 .service-section .swiper-dot {
margin-top: 22px;
}
/* SOLUTIONS — black inactive, cyan active. */
body.home-v2 .service-section .swiper-dot .swiper-pagination-bullet {
background-color: var(--navy);
opacity: 1;
}
body.home-v2 .service-section .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: var(--accent-cyan);
opacity: 1;
}
/* EYEBROWS — strip pill chrome on mobile; keep text only. */
body.home-v2 .section-title .sub-title,
body.home-v2 .section-title .sub-title.style-2,
body.home-v2 .section-title .sub-title.style-3 {
background: transparent !important;
backdrop-filter: none !important;
padding: 0 !important;
border-radius: 0 !important;
margin-bottom: 12px;
}
body.home-v2 .section-title .sub-title img,
body.home-v2 .section-title .sub-title::before {
display: none !important;
}
/* SOLUTIONS CARDS — lock hover state permanently on touch/mobile.
::before is z-index 0; icon + content sit above it at z-index 1. */
body.home-v2 .service-box-item::before {
opacity: 1;
transform: scale(1, 1);
z-index: 0;
transition: background 0.3s ease;
}
body.home-v2 .service-box-item .icon {
position: relative;
z-index: 1;
background-color: var(--accent-cyan) !important;
transition: background-color 0.3s ease;
}
body.home-v2 .service-box-item .icon img {
filter: none;
transition: filter 0.3s ease;
}
body.home-v2 .service-box-item .content {
position: relative;
z-index: 1;
}
body.home-v2 .service-box-item .content h3 {
color: var(--navy) !important;
transition: color 0.3s ease;
}
body.home-v2 .service-box-item .content h3 a,
body.home-v2 .service-box-item .content h3 a:hover {
color: var(--navy) !important;
transition: color 0.3s ease;
}
body.home-v2 .service-box-item .content p {
color: var(--navy);
font-size: 17px;
min-height: 0;
transition: color 0.3s ease;
}
body.home-v2 .service-box-item .theme-btn {
background: var(--white) !important;
color: var(--navy) !important;
border-color: transparent !important;
transition: color 0.3s ease;
}
body.home-v2 .service-box-item::before {
background: var(--white) !important;
}
/* Active swiper slide snaps to the full hover/cyan state automatically. */
body.home-v2 .service-section .swiper-slide-active .service-box-item::before {
background: var(--accent-cyan) !important;
}
body.home-v2 .service-section .swiper-slide-active .service-box-item .icon {
background-color: var(--navy) !important;
}
body.home-v2 .service-section .swiper-slide-active .service-box-item .icon img {
filter: brightness(0) invert(1);
}
body.home-v2 .service-section .swiper-slide-active .service-box-item .content h3,
body.home-v2 .service-section .swiper-slide-active .service-box-item .content h3 a {
color: var(--white) !important;
}
body.home-v2 .service-section .swiper-slide-active .service-box-item .content p {
color: var(--white);
}
/* Active slide: trigger the vendor's circle-wipe (clip-path expands from
centre outward) and flip text white so it reads against the navy fill. */
body.home-v2 .service-section .swiper-slide-active .service-box-item .theme-btn {
color: var(--white) !important;
}
body.home-v2 .service-section .swiper-slide-active .service-box-item .theme-btn::before {
clip-path: circle(100% at 50% 50%) !important;
}
/* ::before/::after swipe is globally hidden — no rule needed here. */
body.home-v2 .service-box-item:active .icon {
background-color: var(--navy) !important;
}
body.home-v2 .service-box-item:active .theme-btn {
background: var(--navy) !important;
color: var(--white) !important;
border-color: var(--navy) !important;
}
/* SOLUTIONS — match desktop: flat gray-hover background on mobile.
Hide the ::before card-shape entirely; section bg does the job. */
body.home-v2 .service-section {
background: #f4f7fb !important;
}
body.home-v2 .service-section::before {
content: none !important;
display: none !important;
background: #f4f7fb !important;
z-index: -1;
}
body.home-v2 .service-section .section-title .sub-title {
background: transparent !important;
}
body.home-v2 .about-wrapper .row > .col-lg-5 {
display: none;
}
body.home-v2 .about-wrapper .row > .col-lg-6 {
margin-top: 0;
padding-left: 28px;
padding-right: 28px;
}
/* BUTTONS — standardise all CTAs to the same size as the hero button. */
body.home-v2 .theme-btn {
font-size: 14px !important;
padding: 12px 24px !important;
}
/* PRICING CARDS — scale down the large price amount and tighten padding. */
body.home-v2 .renatus-pricing-card {
padding: 24px 20px;
min-height: unset;
}
body.home-v2 .renatus-pricing-card__amount {
font-size: 36px;
}
body.home-v2 .renatus-pricing-card__eyebrow {
font-size: 13px;
margin-bottom: 8px;
}
body.home-v2 .renatus-pricing-card__suffix {
font-size: 14px;
}
body.home-v2 .renatus-pricing-card__body {
font-size: 13px;
}
/* STANDARDS CARDS — Overrides above pin .project-thumb to
width: 517px; height: 496px; flex: 0 0 517px (needed to match
the desktop design). At mobile this 517px element causes
horizontal overflow across the whole page. Release the fixed
sizing, let the thumb fill its column, and cap height so the
decorative card thumbnail doesn't balloon.
Stack order follows markup order: copy first, image below. */
body.home-v2 .project-box-wrapper .project-card-items {
flex-direction: column;
gap: var(--space-6); /* 24px between copy and thumbnail */
}
body.home-v2 .project-card-items .project-thumb {
width: 100%;
flex: none;
height: auto;
max-height: none;
overflow: visible;
}
}
/* ── iPad: project-section thumbnails — visible at 768–1366px ──────────────
The ≤991px block above hides thumbs to keep mobile lean. This carve-out
re-shows them on iPad in a tighter side-by-side layout, covering both
portrait (1024px) and landscape (1366px) for iPad Pro 12.9".
True desktop (≥1400px) and mobile (≤767px) are untouched. */
@media (min-width: 768px) and (max-width: 1366px) {
body.home-v2 .project-section .project-thumb {
display: flex !important;
width: 280px !important;
flex: 0 0 280px !important;
height: 280px !important;
overflow: hidden;
}
body.home-v2 .project-box-wrapper .project-card-items {
flex-direction: row !important;
align-items: center;
flex-wrap: nowrap !important;
gap: 24px;
}
body.home-v2 .project-card-items .project-content {
flex: 1 1 0;
min-width: 0;
}
}
@media (min-width: 992px) {
body.home-v2 .project-section .renatus-card-cta {
width: fit-content;
margin-left: 0;
margin-right: auto;
}
}
/* ── ≤ 767px ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* FOOTER — compact collapsible 3-column strip on mobile.
Logo hidden; headings become tappable; links collapse by default. */
body.home-v2 .footer {
padding: 8px 12px;
}
body.home-v2 .footer-logo {
display: none;
}
body.home-v2 .footer-main {
flex-direction: column;
gap: 0;
margin-bottom: 0;
}
body.home-v2 .footer-columns {
display: flex;
gap: 10px;
align-items: flex-start;
}
body.home-v2 .footer-col {
text-align: left;
}
body.home-v2 .footer-col h4 {
font-size: 12px;
font-weight: 500;
padding: 8px 4px;
margin: 0;
justify-content: flex-start;
cursor: pointer;
white-space: nowrap;
}
body.home-v2 .footer-chevron {
display: none;
}
body.home-v2 .footer-col ul {
display: none;
}
body.home-v2 .footer-bottom {
margin-top: 8px;
padding-top: 8px;
font-size: 10px;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
text-align: left;
}
body.home-v2 .footer-reg-num {
font-size: 8px;
opacity: 0.7;
}
body.home-v2 .footer-social {
gap: 8px;
}
body.home-v2 .footer-social a svg {
width: 14px;
height: 14px;
}
}
/* Home page restores the 3px offset that its navbar overrides compensate for. */
@media (max-width: 767px) {
body.home-v2 .v2-nav .nav-mob-login {
top: 3px;
}
}
/* ── ≤ 575px ───────────────────────────────────────────────────── */
@media (max-width: 575px) {
/* NAVBAR — A rule above forces .header-btn h6 labels (Pricing,
Sign in) visible at ≤1600px. On phones the full header-right
cluster (those two labels + Get Started button + hamburger)
is too wide for the header-main flex row and items compress or
overlap. Hide the text labels at phone width — both items are
reachable via the offcanvas drawer — leaving only the CTA and
hamburger in the header-right. */
body.home-v2 .header-main .header-right .header-btn h6 {
display: none !important;
}
}
/* Explore focused row — pinned to position 0 by ?focus= deep-link.
A bottom margin creates a clear visual break between this product
and the rest of the list. Only applies when active_focus is set
(server stamps the class); normal page loads are unaffected. */
.free-page .home-list-col .activity-item.explore-item--focused {
margin-bottom: 24px !important;
border-bottom: none !important;
box-shadow: 0 1px 0 0 var(--free-hairline) !important;
}
.free-page .home-list-col .activity-item.explore-item--focused::after {
content: '';
display: block;
position: absolute;
bottom: -25px;
left: 0;
right: 0;
height: 1px;
background: var(--free-hairline);
}
/* Explore row selected state — set by JS when a product's preview pane
is active (carousel deep-link or hover). Matches hover-active aesthetics
but persists: white card, big shadow, cyan left accent, clipped right
edge so the shadow meets the preview pane cleanly. */
.free-page .home-list-col .activity-item.explore-item.is-selected,
.free-page .home-list-col .activity-item.explore-item.is-selected:hover {
background: var(--white) !important;
box-shadow: var(--shadow-xl) !important;
border-bottom-color: transparent !important;
border-left: 3px solid var(--cyan) !important;
position: relative;
z-index: 10;
clip-path: inset(-50px 0 -50px -50px);
}
/* ── iPad / tablet (768–1199px) nav + section fixes ───────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
/* LOGO — scale down from 46px to match the proportionally smaller nav
text at tablet width. */
body.home-v2 .header-1 .header-main .header-left .header-logo img,
body.home-v2 .header-1 .header-main .header-left .header-logo-2 img {
height: 36px;
}
/* NAV — switch from hamburger to desktop horizontal nav.
navbar-v2.css hides .main-menu/.mean__menu-wrapper at ≤1199px;
override that here for home-v2 so the full bar shows on tablet. */
body.home-v2 .header__hamburger { display: none !important; }
body.home-v2 .v2-nav .mean__menu-wrapper,
body.home-v2 .v2-nav .main-menu { display: block !important; }
/* NAV — show only Free Reports + Products; hide Solutions + Methodology.
Dropdowns on both visible items are kept (no override on submenu). */
body.home-v2 .v2-nav .main-menu ul > li.nav-solutions,
body.home-v2 .v2-nav .main-menu ul > li.nav-methodology {
display: none !important;
}
/* TESTIMONIALS / FAQ — WOW.js sets visibility:hidden on .wow elements
and reveals them on scroll. On tablet its scroll detection can misfire,
leaving sections invisible. Force all .wow children visible so the
sections never collapse to zero height. */
body.home-v2 .testimonial-section .wow,
body.home-v2 .faq-section .wow {
visibility: visible !important;
animation-name: none !important;
}
}