/* Resources page — Figma Resource Page.pdf (scoped `#siteMain > .page-resources` only; do not put `page-resources` on ). */ #siteMain > .page-resources { --res-accent: #f3124e; --res-bg: transparent; --res-panel: rgba(26, 31, 43, 0.78); --res-cell: #0d1425; position: relative; z-index: 2; padding-bottom: 40px; overflow-x: clip; } /* Resources hero uses shared viva-figma-hero markup (.homeHero__*). */ .page-resources #homeHeroSec.homeHero--figma .homeHero__heading { max-width: min(92vw, 900px); margin: 0 auto clamp(10px, 1.2vw, 16px); } .page-resources #homeHeroSec.homeHero--figma .homeHero__headingLine1, .page-resources #homeHeroSec.homeHero--figma .homeHero__headingLine2 { white-space: nowrap; } .page-resources #homeHeroSec.homeHero--figma .homeHero__desc { max-width: min(900px, 94vw); margin: 30px auto 44px; text-align: justify; text-justify: inter-word; text-align-last: center; } /* Navbar spacing matches all pages via header.css (#mainNavbar: margin-top 48px, sticky top 48px). */ /* ─── Hero: global #pageParticles (animated rings + particles); subtle mesh only ─── */ #resResourcesHeroSec.resHero { position: relative; min-height: min(760px, 92vh); display: flex; align-items: center; justify-content: center; margin-top: -92px; padding: 170px 20px 48px; overflow: visible; background: transparent; } /* Light mesh only — heavy overlays hid the animated particle canvas */ .resHero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(80, 60, 200, 0.04) 0%, transparent 55%), repeating-linear-gradient( -12deg, transparent, transparent 42px, rgba(120, 140, 255, 0.025) 42px, rgba(120, 140, 255, 0.025) 43px ); pointer-events: none; z-index: 0; } .resHero::after { display: none; } .resHero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; padding: 0 20px; } .resHero__heading { margin: 0 0 20px; line-height: 1.1; } .resHero__headingAccent { display: block; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(26px, 3.2vw, 52px); color: #ffffff; margin-bottom: 6px; letter-spacing: 0.2px; line-height: 1.2; } .resHero__headingBold { display: block; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(32px, 5vw, 72px); color: #ffffff; letter-spacing: -0.5px; line-height: 1.12; } .resHero__desc { margin: 0 auto 32px; max-width: 720px; font-family: "Outfit", sans-serif; font-size: clamp(15px, 1.6vw, 17px); font-weight: 400; line-height: 1.7; color: #a7adbe; } .resHero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; } .page-resources .resHero__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; background: #f3124e; border: 1px solid #f3124e; color: #fff; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; box-shadow: 0 8px 22px rgba(243, 18, 78, 0.3); } .page-resources .resHero__btn:hover { background: #d9104a; border-color: #d9104a; transform: translateY(-2px); color: #fff; } .page-resources .resHero__btnIcon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; } /* Feature cards — reuse home structure; stack above hero orb boundary */ .page-resources #resFeatureCards { position: relative; z-index: 2; padding: 0 20px 36px; background: transparent; } /* Home-style overview stats + staff card; Related Services — match staff card body scale */ .page-resources #homeResultsSec .homeResults__relatedTitle { margin: 18px 0 10px; font-family: "Outfit", sans-serif; font-size: clamp(18px, 1.35vw, 21px); font-weight: 700; color: rgba(255, 255, 255, 0.96); letter-spacing: 0.02em; line-height: 1.35; } .page-resources #homeResultsSec .homeResults__relatedList { margin: 0; padding-left: 1.25em; font-family: "Outfit", sans-serif; font-size: clamp(17px, 1.4vw, 20px); font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.92); } .page-resources #homeResultsSec .homeResults__relatedList li + li { margin-top: 8px; } /* Figma / PDF: Related Services with leading asterisks */ .page-resources #homeResultsSec .homeResults__relatedList--figmaAsterisk { list-style: none; margin: 0; padding: 0; } .page-resources #homeResultsSec .homeResults__relatedList--figmaAsterisk li { position: relative; padding-left: 1.1em; } .page-resources #homeResultsSec .homeResults__relatedList--figmaAsterisk li::before { content: '*'; position: absolute; left: 0; top: 0; font-weight: 700; color: rgba(255, 255, 255, 0.85); } .page-resources #homeResultsSec .homeResults__relatedList a { color: var(--viva-pink, #f3124e); text-decoration: none; } .page-resources #homeResultsSec .homeResults__relatedList a:hover, .page-resources #homeResultsSec .homeResults__relatedList a:focus-visible { color: #ffffff; } /* Override site.css global li/a font-size lock — match staff card paragraph exactly */ body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList, body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList li, body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList a { font-family: "Outfit", sans-serif !important; font-size: clamp(18px, 1.5vw, 21px) !important; font-weight: 400 !important; line-height: 1.68 !important; } @media (max-width: 768px) { body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList, body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList li, body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList a { font-size: 16px !important; line-height: 1.55 !important; } } /* Featured strip copy — PDF bold phrases on card titles */ #siteMain > .page-resources .resFeatured .resCard__label--rich strong { color: #ffffff; font-weight: 800; } .page-resources #homeCapabilitiesSec { position: relative; z-index: 2; } /* Intro strip */ .resIntro { padding: 0 20px 48px; } .resIntro__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(160px, 220px) 1fr minmax(220px, 280px); gap: 24px; align-items: stretch; } .resIntro__visual { border-radius: 16px; overflow: hidden; min-height: 200px; } .resIntro__visual img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; } .resIntro__copy { display: flex; align-items: center; background: rgba(26, 31, 43, 0.72); backdrop-filter: blur(10px); border-radius: 14px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, 0.08); } .resIntro__copy p { margin: 0; color: #fff; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.65; } .resIntro__stats { background: #f3124e; border-radius: 16px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 18px; } .resIntro__stat { display: flex; flex-direction: column; gap: 6px; } .resIntro__statLine { display: block; height: 1px; background: rgba(255, 255, 255, 0.35); margin-bottom: 4px; } .resIntro__stat:first-child .resIntro__statLine { display: none; } .resIntro__statNum { font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px, 3vw, 36px); color: #fff; } .resIntro__statLabel { font-size: 13px; color: rgba(255, 255, 255, 0.92); } /* Trusted — infinite marquee from home.css (same as industries / services) */ .page-resources #homeTrustedSec { background: transparent; border-top: 1px solid rgba(243, 18, 78, 0.35); } .page-resources #homeTrustedSec .homeTrusted__inner { max-width: min(1600px, 100%); } .page-resources #homeMarquee { padding: 14px 0; } .page-resources #homeFeatureBanner { padding: clamp(16px, 3vw, 40px) 20px 0; position: relative; } /* Figma: stacked eyebrow + main (sentence case) */ .page-resources .resFeatured__pre, .page-resources .resBlog__pre, .page-resources .resLead__pre { text-transform: none; letter-spacing: 0.04em; font-size: clamp(18px, 2vw, 26px) !important; } .page-resources .resFeatured__title, .page-resources .resBlog__title { font-size: clamp(36px, 4.2vw, 56px) !important; } .page-resources .resLead__title { font-size: clamp(36px, 4.2vw, 56px) !important; } /* Trusted typography + logo scale: shared with Home via home.css (do not lock 18px here) */ /* Featured */ .resFeatured { padding: 56px 20px 40px; background: transparent; } .resFeatured__inner { max-width: 1200px; margin: 0 auto; } .resFeatured__head { text-align: center; margin-bottom: 36px; } .resFeatured__ctaTop { text-align: center; margin-bottom: 20px; } .resFeatured__pillLink { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 14px; border-radius: 999px; background: #f3124e; color: #fff !important; font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 6px 20px rgba(243, 18, 78, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .resFeatured__pillLink:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(243, 18, 78, 0.42); } .resFeatured__pillIcon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; } .resFeatured__bottomCta { text-align: center; margin-top: 28px; } .resFeatured__figmaBarCta { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px 14px 26px; border-radius: 999px; background: rgba(8, 12, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff !important; font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; } .resFeatured__figmaBarCta:hover { background: rgba(18, 24, 44, 0.95); border-color: rgba(255, 255, 255, 0.32); color: #fff !important; } .resFeatured__figmaBarCta--outline { background: rgba(5, 8, 20, 0.55); } .resFeatured__figmaBarCtaIcon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f3124e; color: #fff; } .resFeatured a.resCard--featuredRich { display: block; text-decoration: none; color: inherit; } .resFeatured .resCard--featuredFigma .resCard__body { padding-top: 28px; padding-bottom: 20px; } .resFeatured .resCard--featuredFigma .resCard__label { font-size: clamp(17px, 1.45vw, 22px); margin: 0; } .resFeatured__badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(243, 18, 78, 0.45); color: #fff; font-family: "Outfit", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .resFeatured__badgeIcon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--res-accent); color: #fff; } .resFeatured__pre { margin: 0 0 6px; font-family: "Outfit", sans-serif; font-weight: 800 !important; font-size: var(--viva-overview-eyebrow-fs, clamp(22px, 1.85vw, 30px)) !important; color: #f3124e !important; line-height: 1.25 !important; letter-spacing: 0.14em; text-transform: uppercase; } .resFeatured__title { margin: 0 0 12px; font-family: "Outfit", sans-serif; font-weight: 800 !important; font-size: var(--viva-overview-heading-fs, clamp(44px, 5.2vw, 76px)) !important; color: #fff; letter-spacing: -0.04em !important; line-height: 1.02 !important; } .resFeatured__trackWrap { position: relative; overflow: hidden; border-radius: 20px; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding-bottom: 52px; } .resFeatured__track { display: flex; gap: 10px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .resFeatured__track::-webkit-scrollbar { height: 6px; } .resFeatured__track::-webkit-scrollbar-thumb { background: rgba(243, 18, 78, 0.45); border-radius: 4px; } .resCard { position: relative; flex: 0 0 min(100%, 280px); min-height: 320px; border-radius: 18px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, 0.08); } .resCard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); } .resCard__tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243, 18, 78, 0.15) 0%, rgba(80, 20, 60, 0.75) 100%); mix-blend-mode: multiply; pointer-events: none; } .resCard__network { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; } .resCard__label { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; margin: 0; font-family: "Outfit", sans-serif; font-weight: 700; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .resFeatured__nav { position: absolute; right: 14px; bottom: 6px; z-index: 4; display: flex; gap: 8px; margin-top: 0; } .resFeatured__navBtn { width: 40px; height: 40px; border: none; border-radius: 8px; background: #f3124e; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s; } .resFeatured__navBtn:hover { opacity: 0.9; } .resFeatured__cta { text-align: center; margin-top: 28px; } .resFeatured__ctaBtn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; font-family: "Outfit", sans-serif; } .resFeatured__ctaBtn:hover { border-color: rgba(243, 18, 78, 0.5); color: #fff; } .resFeatured__ctaIcon { width: 36px; height: 36px; border-radius: 50%; background: #f3124e; display: inline-flex; align-items: center; justify-content: center; } /* Blog */ .resBlog { padding: 28px 20px 10px; background: transparent; } .resBlog__inner { max-width: 1120px; margin: 0 auto; } .resBlog__head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); } .resBlog__pre { margin: 0 0 8px; font-family: "Outfit", sans-serif; font-weight: 800 !important; font-size: var(--viva-overview-eyebrow-fs, clamp(22px, 1.85vw, 30px)) !important; color: #f3124e !important; line-height: 1.25 !important; letter-spacing: 0.14em; text-transform: uppercase; } .resBlog__title { margin: 0; font-family: "Outfit", sans-serif; font-weight: 800 !important; font-size: var(--viva-overview-heading-fs, clamp(44px, 5.2vw, 76px)) !important; color: #fff; letter-spacing: -0.04em !important; line-height: 1.02 !important; } .resBlog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } /* Stay updated — Resources: strict 3-col grid + gap (scoped so nothing fights .resCard flex) */ #siteMain > .page-resources .resBlog__featuredRow, .page-resources .resBlog__featuredRow { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 3vw, 40px) !important; column-gap: clamp(20px, 3vw, 40px) !important; row-gap: clamp(20px, 3vw, 40px) !important; margin-bottom: clamp(36px, 5vw, 52px); width: 100%; max-width: 100%; box-sizing: border-box; isolation: isolate; overflow: visible; align-items: stretch; } #siteMain > .page-resources .resBlog__featuredRow > .resBlog__featuredCard.resCard, .page-resources .resBlog__featuredRow > .resBlog__featuredCard.resCard { display: block !important; box-sizing: border-box !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; position: relative; z-index: 1; transform: none; } /* Wide landscape art was cropped to “half” by object-fit:cover in a short card — show full graphic */ #siteMain > .page-resources .resBlog__featuredRow .resCard__img, .page-resources .resBlog__featuredRow .resCard__img { object-fit: contain !important; object-position: center !important; background: #050810; } .resBlog__featuredCard { flex: none; min-height: min(320px, 42vw); scroll-snap-align: unset; border-radius: 14px; } .resBlog__featuredCard .resCard__label { font-size: clamp(16px, 1.35vw, 20px); } /* “Stay updated” titles: room for 2+ lines + readable over image (esp. first card) */ body.page-resources #siteMain .resBlog__featuredRow h3.resCard__label, #siteMain > .page-resources .resBlog__featuredRow h3.resCard__label { left: clamp(12px, 2vw, 20px) !important; right: clamp(12px, 2vw, 20px) !important; bottom: clamp(22px, 3.5vw, 36px) !important; padding: 12px 14px 16px !important; box-sizing: border-box !important; font-size: clamp(14px, 1.12vw, 17px) !important; line-height: 1.32 !important; font-weight: 700 !important; overflow-wrap: break-word; text-wrap: balance; border-radius: 12px; background: linear-gradient( 180deg, rgba(5, 8, 20, 0) 0%, rgba(5, 8, 20, 0.45) 28%, rgba(5, 8, 20, 0.88) 100% ); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); } /* Blog strip not clipped by page horizontal clip while cards animate */ #siteMain > .page-resources .resBlog { overflow-x: visible; overflow: visible; } .resBlog__split { display: grid; grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; align-items: start; } .resBlog__listCol .resBlog__recentLabel { text-align: left; margin: 0 0 16px; max-width: none; } .resBlog__articleList { display: flex; flex-direction: column; gap: 14px; } .resBlog__articleRow { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; color: inherit; transition: border-color 0.2s ease, background 0.2s ease; } .resBlog__articleRow:hover { border-color: rgba(243, 18, 78, 0.35); background: rgba(255, 255, 255, 0.06); } .resBlog__articleThumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.08); } .resBlog__articleThumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); } .resBlog__articleText { min-width: 0; } .resBlog__articleTitle { margin: 0 0 6px; font-family: "Outfit", sans-serif; font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; line-height: 1.35; color: #f3124e; } .resBlog__articleExcerpt { margin: 0; font-family: "Outfit", sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); } .resBlog__aside { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); } .resBlog__popularHeading { margin: 0 0 18px; font-family: "Outfit", sans-serif; font-size: 18px; font-weight: 800; color: #fff; } .resBlog__popularList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .resBlog__popularLink { display: flex; align-items: center; gap: 12px; font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.92) !important; text-decoration: none; } .resBlog__popularLink:hover { color: #fff !important; } .resBlog__popularIcon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #f3124e; color: #fff; } .resBlog__card { position: relative; min-height: 206px; border-radius: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.04); } .resBlog__card .resCard__tint { background: linear-gradient(0deg, rgba(5, 8, 20, 0.85) 0%, transparent 55%); mix-blend-mode: normal; } /* Guides + sidebar — same 3×2 grid + column; glass cards, larger thumbs, tighter rhythm */ .resGuides { padding: 10px 20px clamp(48px, 6vw, 72px); } .resGuides__inner { max-width: 1120px; margin: 0 auto; display: block; } .resGuides__popularHeading { margin: 0 0 clamp(16px, 2vw, 22px); font-family: "Outfit", sans-serif; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; color: #fff; } .resGuides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px) clamp(8px, 1.1vw, 12px); } .resGuides__item { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; overflow: hidden; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .resGuides__item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(243, 18, 78, 0.22); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); } .resGuides__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 14px 16px 18px; } .resGuides__thumb { flex-shrink: 0; width: 100%; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(145deg, #1a1f2e 0%, #0f121c 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .resGuides__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; } .resGuides__title { margin: 0; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.4vw, 20px); font-weight: 800; /* site.css h3,h4 { color: #fff !important } — must tie or beat on specificity */ color: #f3124e !important; -webkit-text-fill-color: #f3124e !important; line-height: 1.28; letter-spacing: -0.02em; } .resGuides__excerpt { margin: 0; font-family: "Outfit", sans-serif; font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; color: rgba(255, 255, 255, 0.9); line-height: 1.55; } .resGuides__side { padding: 22px 24px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); } .resGuides__side h3 { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(243, 18, 78, 0.28); font-family: "Outfit", sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.03em; } .resGuides__link { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 4px 0; text-decoration: none; font-family: "Outfit", sans-serif; color: rgba(255, 255, 255, 0.96); font-weight: 600; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.35; border-radius: 8px; transition: color 0.2s ease, transform 0.2s ease; } .resGuides__link:hover { color: #fff; transform: translateX(3px); } .resGuides__link:last-child { margin-bottom: 0; } .resGuides__linkIcon { width: 36px; height: 36px; border-radius: 50%; background: #f3124e; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; box-shadow: 0 4px 14px rgba(243, 18, 78, 0.35); transition: box-shadow 0.2s ease, transform 0.2s ease; } .resGuides__link:hover .resGuides__linkIcon { box-shadow: 0 6px 20px rgba(243, 18, 78, 0.45); } /* Resource FAQ section — gray pills scaled to match Home FAQ readability (was 12px/11px) */ .resFaqSec .homeFaqContact__inner { max-width: 1200px; } .resFaqSec .homeFaqContact__body { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: clamp(28px, 4vw, 48px); align-items: start; } .resFaqSec--faqOnly .homeFaqContact__body { grid-template-columns: 1fr; max-width: 960px; margin-left: auto; margin-right: auto; } /* Resources #homeResultsSec — match Home (Real Results + solid red stats); grid overrides about.css */ body.page-resources #homeResultsSec .homeResults__inner { max-width: 1160px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 0; align-items: stretch; } body.page-resources #homeResultsSec .homeResults__content { border-left: none; padding-left: 0; box-sizing: border-box; } body.page-resources #homeResultsSec .homeResults__headBlock { margin-bottom: 36px !important; } /* Stats: Home-style solid panel + yellow rules (about.css is close; enforce center + no glass) */ body.page-resources #homeResultsSec .homeResults__statsPanel { background: linear-gradient(180deg, #F3124E 0%, #be0c3c 100%) !important; border-radius: 0 0 18px 18px !important; border: none !important; box-shadow: 0 22px 56px rgba(0, 0, 0, 0.35) !important; padding: 32px 28px !important; text-align: center !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; --stats-divider-yellow: rgba(255, 255, 255, 0.38); --stats-divider-inset: 12px; } body.page-resources #homeResultsSec .homeResults__statItem { display: block !important; padding: 18px 0 20px !important; } body.page-resources #homeResultsSec .homeResults__statItem:not(:last-child)::after { left: 12px !important; right: 12px !important; background: rgba(255, 255, 255, 0.38) !important; height: 1px; } body.page-resources #homeResultsSec .homeResults__statNumber { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; font-size: clamp(36px, 3.6vw, 48px) !important; margin-bottom: 4px !important; } body.page-resources #homeResultsSec .homeResults__statLabel { color: rgba(255, 255, 255, 0.72) !important; font-size: 16px !important; max-width: none !important; } .resFaqSec .homeFaqContact__faqCol { min-width: 0; } .resFaqSec .homeFaqContact__faqBtn, .resFaqSec .homeFaqContact__faqBtn span:first-child { color: #ffffff !important; } .resFaqSec .homeFaqContact__faqBtn::-webkit-details-marker { display: none; } .resFaqSec .homeFaqContact__faqBtn::marker { content: ""; } .resFaqSec .homeFaqContact__faqItem[open] .homeFaqContact__faqBtn, .resFaqSec .homeFaqContact__faqItem[open] .homeFaqContact__faqBtn span:first-child { color: var(--viva-pink, #f3124e) !important; } .resFaqSec .homeFaqContact__faqItem[open] .homeFaqContact__faqArrow { color: var(--viva-pink, #f3124e) !important; transform: rotate(180deg); } .resFaqSec__accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } .resFaqSec__faqItem { background: rgba(176, 185, 215, 0.68); border-radius: 999px; overflow: hidden; } .resFaqSec__faqBtn { width: 100%; border: none; background: transparent; min-height: 52px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(9, 13, 32, 0.94); font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.15vw, 18px); font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; } .resFaqSec__faqIcon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(9, 13, 32, 0.14); color: rgba(9, 13, 32, 0.92); font-weight: 800; font-size: 15px; flex-shrink: 0; } .resFaqSec__faqBtn:not(.collapsed) .resFaqSec__faqIcon { color: #fff; background: #f3124e; } .resFaqSec__faqBtn:not(.collapsed) .resFaqSec__faqIcon::before { content: "-"; } .resFaqSec__faqBtn.collapsed .resFaqSec__faqIcon::before { content: "+"; } .resFaqSec__faqIcon { color: transparent; } .resFaqSec__faqBody { padding: 0 22px 18px; color: rgba(9, 13, 32, 0.88); font-family: "Outfit", sans-serif; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; } .resFaqSec .homeFaqContact__formCol { padding: 28px 30px; border: 1px solid rgba(255, 255, 255, 0.08); } .resFaqSec .homeFaqContact__form { gap: 14px; } /* Labels + fields: inherit #homeFaqContactSec scale from site.css — do not force 12px */ .resFaqSec .homeFaqContact__formGroup input, .resFaqSec .homeFaqContact__formGroup select, .resFaqSec .homeFaqContact__formGroup textarea { background: rgba(9, 14, 39, 0.95); border-color: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 14px 18px; } .resFaqSec .homeFaqContact__formGroup textarea { min-height: 96px; } .resFaqSec .homeFaqContact__formCheck label { font-size: 14px; } .resFaqSec .homeFaqContact__submitBtn { background: #f3124e; color: #fff; border: 1px solid #f3124e; } .resFaqSec .homeFaqContact__submitBtn:hover { background: #d9104a; border-color: #d9104a; color: #fff; } @media (max-width: 992px) { .resFaqSec .homeFaqContact__body { grid-template-columns: 1fr; gap: 40px; } } /* Lead magnets */ .resLead { padding: 48px 20px 56px; } .resLead__inner { max-width: 1200px; margin: 0 auto; } .resLead__head { text-align: center; margin-bottom: 36px; } .resLead__pre { margin: 0 0 8px; font-family: "Outfit", sans-serif; font-weight: 800 !important; font-size: var(--viva-overview-eyebrow-fs, clamp(22px, 1.85vw, 30px)) !important; color: #f3124e !important; letter-spacing: 0.14em; line-height: 1.25 !important; text-transform: uppercase; } .resLead__title { margin: 0; font-family: "Outfit", sans-serif; font-weight: 800 !important; font-size: var(--viva-overview-heading-fs, clamp(44px, 5.2vw, 76px)) !important; color: #fff; letter-spacing: -0.04em !important; line-height: 1.02 !important; } .resLead__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .resLead__card { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } a.resLead__cardLink.resLead__card { text-decoration: none; color: inherit; cursor: pointer; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .resLead__card .resCard__tint { background: rgba(200, 30, 100, 0.45); mix-blend-mode: multiply; } .resLead__label { position: absolute; left: clamp(16px, 2.5vw, 24px); bottom: clamp(16px, 2.5vw, 24px); right: 12px; z-index: 2; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(20px, 2.35vw, 30px); line-height: 1.15; letter-spacing: -0.03em; color: #ffffff; -webkit-text-fill-color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.65), 0 6px 28px rgba(0, 0, 0, 0.45); } /* Featured resources — rich cards (title + excerpt + CTA) */ .resFeatured__intro { max-width: 720px; margin: 0 auto 8px; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.88); text-align: center; } .resFeatured .resCard--featuredRich { flex: 0 0 clamp(260px, 28vw, 360px); width: clamp(260px, 28vw, 360px); max-width: clamp(260px, 28vw, 360px); min-height: 450px; } .resFeatured .resCard--featuredRich .resCard__label { position: static; margin: 0 0 8px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .resFeatured .resCard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px 18px; background: linear-gradient(180deg, transparent 0%, rgba(5, 8, 20, 0.55) 35%, rgba(5, 8, 20, 0.92) 100%); } .resFeatured .resCard__excerpt { margin: 0 0 12px; font-family: "Outfit", sans-serif; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.45; color: rgba(255, 255, 255, 0.9); } .resFeatured .resCard__cta { display: inline-flex; align-items: center; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; border-bottom: 2px solid rgba(243, 18, 78, 0.85); padding-bottom: 2px; } .resFeatured .resCard__cta:hover { color: #ff6b9d; border-bottom-color: #ff6b9d; } /* Blog / insights — intro + topic links */ .resBlog__intro, .resBlog__recentLabel { max-width: 820px; margin-left: auto; margin-right: auto; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.88); text-align: center; } .resBlog__recentLabel { margin-top: 20px; margin-bottom: 8px; font-weight: 700; color: rgba(255, 255, 255, 0.95); } .resBlog__topics { max-width: 820px; margin: 16px auto 0; font-family: "Outfit", sans-serif; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, 0.85); text-align: center; } .resBlog__topicsLabel { display: inline-block; margin-right: 8px; font-weight: 700; color: rgba(255, 255, 255, 0.95); } .resBlog__topics a { color: #f3124e; text-decoration: none; font-weight: 600; } .resBlog__topics a:hover { text-decoration: underline; } .resBlog__topicsSep { margin: 0 8px; color: rgba(255, 255, 255, 0.75); } .resBlog__cardLink { text-decoration: none; color: inherit; display: block; } .resBlog__cardLink:hover .resCard__label { color: #fff; } .resBlog__footerCta { text-align: center; margin-top: 28px; } /* Guides */ .resGuides__intro { max-width: 820px; margin: 0 0 24px; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.88); } .resGuides__itemLink { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .resGuides__itemLink:hover .resGuides__title { color: #f3124e; } .resGuides__grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .resGuides__viewAll { text-align: center; margin-top: 28px; } @media (max-width: 991px) { .resGuides__grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .resGuides__grid--five { grid-template-columns: 1fr; } } /* Lead magnets — four-up */ .resLead__intro { max-width: 720px; margin: 0 auto 8px; text-align: center; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.88); } .resLead__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .resLead__viewportWrap { position: relative; } .resLead__viewport { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; margin: 0 -6px; padding: 0 6px 6px; scrollbar-width: thin; } .resLead__grid--six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; } .resLead__toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .resLead__cardLink:hover, .resLead__cardLink:focus-visible { transform: translateY(-3px); border-color: rgba(243, 18, 78, 0.45); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42); } @media (max-width: 1064px) { .resLead__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .resLead__grid--four { grid-template-columns: 1fr; } } .resLead__footerCta { text-align: center; margin-top: 28px; } /* Audit offers */ .resAudits { padding: clamp(48px, 6vw, 88px) 20px; position: relative; z-index: 2; } .resAudits__inner { max-width: 1120px; margin: 0 auto; } .resAudits__head { text-align: center; max-width: 820px; margin: 0 auto clamp(32px, 4vw, 44px); } .resAudits__title { margin: 12px 0 16px; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; color: #fff; letter-spacing: -0.03em; } .resAudits__lead { margin: 0; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, 0.9); } .resAudits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(32px, 4vw, 48px); } .resAudits__card { display: block; padding: clamp(22px, 2.5vw, 30px); border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; color: inherit; transition: border-color 0.2s ease, background 0.2s ease; } .resAudits__card:hover { border-color: rgba(243, 18, 78, 0.45); background: rgba(255, 255, 255, 0.08); } .resAudits__cardTitle { margin: 0 0 10px; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); color: #f3124e; } .resAudits__cardDesc { margin: 0; font-family: "Outfit", sans-serif; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, 0.9); } .resAudits__get { max-width: 640px; margin: 0 auto; text-align: center; } .resAudits__getTitle { margin: 0 0 14px; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); color: #fff; } .resAudits__getList { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; display: inline-block; } .resAudits__getList li { position: relative; padding-left: 22px; margin-bottom: 10px; font-family: "Outfit", sans-serif; font-size: clamp(15px, 1.2vw, 17px); color: rgba(255, 255, 255, 0.9); } .resAudits__getList li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: #f3124e; } .resAudits__ctaBtn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; background: #f3124e; border: 1px solid #f3124e; color: #fff; box-shadow: 0 8px 22px rgba(243, 18, 78, 0.35); } .resAudits__ctaBtn:hover { color: #fff; background: #d9104a; border-color: #d9104a; } @media (max-width: 768px) { .resAudits__grid { grid-template-columns: 1fr; } } /* Resource categories */ .resCategories { padding: clamp(40px, 5vw, 72px) 20px; position: relative; z-index: 2; } .resCategories__inner { max-width: 960px; margin: 0 auto; text-align: center; } .resCategories__title { margin: 0 0 10px; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); color: #fff; letter-spacing: -0.02em; } .resCategories__sub { margin: 0 0 28px; font-family: "Outfit", sans-serif; font-size: clamp(15px, 1.3vw, 17px); color: rgba(255, 255, 255, 0.85); } .resCategories__block { margin-bottom: 22px; text-align: left; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .resCategories__label { margin: 0 0 10px; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #f3124e; } .resCategories__links { margin: 0; font-family: "Outfit", sans-serif; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; color: rgba(255, 255, 255, 0.92); } .resCategories__links a { color: #fff; text-decoration: none; font-weight: 600; } .resCategories__links a:hover { color: #f3124e; text-decoration: underline; } .resCategories__sep { margin: 0 10px; color: rgba(255, 255, 255, 0.75); } /* Bottom CTAs */ .resBottomCta { padding: 32px 20px 48px; text-align: center; } .resBottomCta--dualOnly { padding: 24px 20px 32px; } .resBottomCta--dualOnly .resBottomCta__inner { max-width: none; } .resBottomCta__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 720px; margin: 0 auto; } .resBottomCta__heading { margin: 0; font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; color: #fff; letter-spacing: -0.02em; } .resBottomCta__text { margin: 0; font-family: "Outfit", sans-serif; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.88); } .resBottomCta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .page-resources .resBottomCta__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: 999px; font-family: "Outfit", sans-serif; font-size: 17px; font-weight: 700; line-height: 1; text-decoration: none; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; } .page-resources .resBottomCta__btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .page-resources .resBottomCta__btn span.resHero__btnIcon { background: #f3124e; width: 36px; height: 36px; } .page-resources #homeTestimonialsSec { background: transparent; } .page-resources .industriesFaqSec { padding-top: 20px; padding-bottom: 28px; } .page-resources .resBottomCta--dualOnly { padding-top: 8px; padding-bottom: 20px; } @media (max-width: 1064px) { .resIntro__inner { grid-template-columns: 1fr 1fr; grid-template-areas: "visual stats" "copy copy"; } .resIntro__visual { grid-area: visual; } .resIntro__stats { grid-area: stats; } .resIntro__copy { grid-area: copy; } .resFeatured__track .resCard { flex: 0 0 320px; } .resBlog__grid { grid-template-columns: 1fr; } #siteMain > .page-resources .resBlog__featuredRow, .page-resources .resBlog__featuredRow { grid-template-columns: 1fr !important; } .resBlog__split { grid-template-columns: 1fr; } .resGuides__inner { grid-template-columns: 1fr; } .resGuides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resLead__grid { grid-template-columns: repeat(2, 1fr); } .resLead__grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 520px; } } @media (max-width: 768px) { /* Resources overview: force single-column stack on phones */ body.page-resources #homeResultsSec .homeResults__inner { grid-template-columns: 1fr !important; gap: 24px !important; } body.page-resources #homeResultsSec .homeResults__content { padding-top: 0 !important; padding-right: 0 !important; } body.page-resources #homeResultsSec .homeResults__stats { width: 100%; max-width: 360px; margin-inline: auto; } body.page-resources #homeResultsSec .homeResults__statsPanel { border-radius: 18px !important; } #siteMain > .page-resources { padding-top: 72px; /* horizontal inset comes from global #siteMain padding (mobile-hotfix.css) */ } .resHero { margin-top: -60px; padding-top: 130px; } .resIntro__inner { grid-template-columns: 1fr; grid-template-areas: none; } .resGuides__body { padding: 12px 14px 16px; } .resGuides__side { padding: 18px 18px; } .resGuides__grid { grid-template-columns: 1fr; } .resFaqSec__accordion { grid-template-columns: 1fr; } .resLead__grid { grid-template-columns: 1fr; } .resLead__grid--six { grid-template-columns: 1fr; min-width: 0; } /* Mobile typography + overflow guard */ .resHero__headingAccent { font-size: 30px; line-height: 1.12; } .resHero__headingBold { font-size: 42px; line-height: 1.1; } .page-resources #homeCapabilitiesSec .homeCap__preHeading, .resFeatured__pre, .resBlog__pre, .resLead__pre { font-size: var(--viva-overview-eyebrow-fs, clamp(22px, 1.85vw, 30px)) !important; line-height: 1.25 !important; letter-spacing: 0.14em !important; } .page-resources #homeCapabilitiesSec .homeCap__heading, .resFeatured__title, .resBlog__title, .resLead__title { font-size: var(--viva-overview-heading-fs, clamp(44px, 5.2vw, 76px)) !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; } .resGuides__side h3 { font-size: clamp(20px, 5.2vw, 28px); } .resGuides__link { font-size: clamp(15px, 3.6vw, 17px); } .resHero__heading, .resFeatured__head, .resBlog__head, .resLead__head, .homeFaqContact__heading { overflow-wrap: anywhere; word-break: break-word; } .page-resources #homeHeroSec.homeHero--figma .homeHero__headingLine1, .page-resources #homeHeroSec.homeHero--figma .homeHero__headingLine2 { white-space: normal; } /* Keep image-overlay titles visually centered and balanced on mobile cards */ .page-resources .resBlog__featuredRow .resCard__label, .page-resources .resFeatured .resCard--featuredFigma .resCard__label { left: 12px !important; right: 12px !important; bottom: 12px !important; padding: 10px 12px !important; text-align: center !important; line-height: 1.35 !important; text-wrap: balance; margin: 0 !important; } } /* Resources + Contact consistency lock: Keep typography, spacing, and alignment in the same professional system. */ body.page-resources { --viva-page-h1: clamp(34px, 4.3vw, 56px); --viva-page-h2: clamp(28px, 3.2vw, 44px); --viva-page-body: clamp(16px, 1.05vw, 18px); --viva-page-meta: clamp(14px, 0.95vw, 16px); } body.page-resources #siteMain h1, body.page-resources #siteMain h2, body.page-resources #siteMain h3, body.page-resources #siteMain h4, body.page-resources #siteMain p, body.page-resources #siteMain li, body.page-resources #siteMain a, body.page-resources #siteMain label, body.page-resources #siteMain input, body.page-resources #siteMain select, body.page-resources #siteMain textarea, body.page-resources #siteMain button { font-family: "Outfit", sans-serif !important; } body.page-resources .resHero__headingAccent, body.page-resources .resHero__headingBold, body.page-resources .resFeatured__title, body.page-resources .resBlog__title, body.page-resources .resLead__title, body.page-resources #homeFaqContactSec .homeFaqContact__heading { letter-spacing: -0.02em !important; line-height: 1.12 !important; } body.page-resources .resHero__desc, body.page-resources .resBlog__articleExcerpt, body.page-resources .resBottomCta__text, body.page-resources #homeFaqContactSec .homeFaqContact__subDesc, body.page-resources #homeFaqContactSec .homeFaqContact__faqBody { font-size: var(--viva-page-body) !important; line-height: 1.65 !important; } body.page-resources #homeFaqContactSec .homeFaqContact__faqBtn, body.page-resources #homeFaqContactSec .homeFaqContact__formGroup label { font-size: var(--viva-page-meta) !important; line-height: 1.45 !important; } body.page-resources #homeFaqContactSec .homeFaqContact__formGroup input, body.page-resources #homeFaqContactSec .homeFaqContact__formGroup select, body.page-resources #homeFaqContactSec .homeFaqContact__formGroup textarea, body.page-resources #homeFaqContactSec .homeFaqContact__submitBtn { font-size: var(--viva-page-body) !important; line-height: 1.45 !important; } @media (max-width: 768px) { body.page-resources #resResourcesHeroSec, body.page-resources #homeResultsSec, body.page-resources .resFeatured, body.page-resources .resBlog, body.page-resources .resLead, body.page-resources #homeFaqContactSec, body.page-resources .resBottomCta { padding-left: 16px !important; padding-right: 16px !important; } body.page-resources .resHero__inner, body.page-resources .resFeatured__inner, body.page-resources .resBlog__inner, body.page-resources .resLead__inner, body.page-resources #homeFaqContactSec .homeFaqContact__inner { width: 100% !important; max-width: 100% !important; } body.page-resources .resHero__headingBold, body.page-resources .resFeatured__title, body.page-resources .resBlog__title, body.page-resources .resLead__title, body.page-resources #homeFaqContactSec .homeFaqContact__heading { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.14 !important; text-align: center !important; } body.page-resources .resHero__desc, body.page-resources .resBlog__articleExcerpt, body.page-resources #homeFaqContactSec .homeFaqContact__subDesc, body.page-resources #homeFaqContactSec .homeFaqContact__faqBody { font-size: 16px !important; line-height: 1.62 !important; text-align: center !important; } body.page-resources #homeFaqContactSec .homeFaqContact__faqBtn, body.page-resources #homeFaqContactSec .homeFaqContact__faqBody, body.page-resources #homeFaqContactSec .homeFaqContact__formGroup label { text-align: left !important; } } /* Premium polish pass: section rhythm + CTA consistency */ body.page-resources .resFeatured, body.page-resources .resBlog, body.page-resources .resLead, body.page-resources #homeFaqContactSec, body.page-resources .resBottomCta { padding-top: clamp(26px, 3.2vw, 44px) !important; padding-bottom: clamp(26px, 3.2vw, 44px) !important; } body.page-resources .resFeatured__inner, body.page-resources .resBlog__inner, body.page-resources .resLead__inner { max-width: 1200px !important; } body.page-resources .resHero__btn, body.page-resources .resBottomCta__btn, body.page-resources .resFeatured__figmaBarCta, body.page-resources .homeFaqContact__submitBtn { min-height: 50px !important; padding: 12px 24px !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; text-transform: none !important; } body.page-resources .resHero__btnIcon, body.page-resources .resBottomCta__btn .resHero__btnIcon, body.page-resources .resFeatured__figmaBarCtaIcon { width: 34px !important; height: 34px !important; } body.page-resources .resBlog__articleRow, body.page-resources .resFeatured .resCard--featuredRich, body.page-resources .resLead__card { border-radius: 16px !important; } @media (max-width: 768px) { body.page-resources .resHero__actions, body.page-resources .resBottomCta__actions { width: 100% !important; flex-direction: column !important; align-items: stretch !important; } body.page-resources .resHero__btn, body.page-resources .resBottomCta__btn, body.page-resources .resFeatured__figmaBarCta, body.page-resources .homeFaqContact__submitBtn { width: 100% !important; justify-content: center !important; } } /* Final client polish lock: heading hierarchy + cleaner reading rhythm */ body.page-resources #siteMain { --viva-headline-tight: -0.025em; } body.page-resources .resHero__headingBold, body.page-resources .resFeatured__title, body.page-resources .resBlog__title, body.page-resources .resLead__title, body.page-resources #homeFaqContactSec .homeFaqContact__heading, body.page-resources #homeResultsSec .homeResults__heading { letter-spacing: var(--viva-headline-tight) !important; font-weight: 800 !important; } body.page-resources .resHero__desc, body.page-resources #homeResultsSec .homeResults__desc, body.page-resources .resBlog__articleExcerpt, body.page-resources #homeFaqContactSec .homeFaqContact__subDesc, body.page-resources #homeFaqContactSec .homeFaqContact__faqBody { color: rgba(255, 255, 255, 0.9) !important; } body.page-resources .resFeatured .resCard--featuredRich, body.page-resources .resBlog__articleRow, body.page-resources .resLead__card, body.page-resources #homeFaqContactSec .homeFaqContact__formCol { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important; } /* Absolute final alignment lock (requested): tighter body copy + tighter card spacing */ body.page-resources .resHero__desc, body.page-resources #homeResultsSec .homeResults__desc, body.page-resources .resBlog__articleExcerpt, body.page-resources #homeFaqContactSec .homeFaqContact__subDesc, body.page-resources #homeFaqContactSec .homeFaqContact__faqBody { font-size: 16px !important; line-height: 1.5 !important; margin-top: 0 !important; margin-bottom: 10px !important; } body.page-resources #homeResultsSec .homeResults__inner, body.page-resources .resBlog__split, body.page-resources .resFaqSec .homeFaqContact__body { gap: 24px !important; } body.page-resources .resFeatured__track { gap: 12px !important; } body.page-resources .resFeatured .resCard--featuredRich, body.page-resources .resLead__card, body.page-resources .resBlog__featuredCard { border-radius: 14px !important; } body.page-resources .resBlog__articleRow { padding: 10px 12px !important; } @media (max-width: 768px) { body.page-resources .resHero__desc, body.page-resources #homeResultsSec .homeResults__desc, body.page-resources .resBlog__articleExcerpt, body.page-resources #homeFaqContactSec .homeFaqContact__subDesc, body.page-resources #homeFaqContactSec .homeFaqContact__faqBody { font-size: 15px !important; line-height: 1.45 !important; margin-bottom: 8px !important; } body.page-resources #homeResultsSec .homeResults__inner, body.page-resources .resBlog__split, body.page-resources .resFaqSec .homeFaqContact__body { gap: 14px !important; } body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList, body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList li, body.site-body--inner.page-resources #homeResultsSec .homeResults__staffCardText .homeResults__relatedList a { font-size: 16px !important; line-height: 1.55 !important; } } /* Final lock: Related Services links must match staff card paragraph copy */ body.site-body--inner.page-resources #siteMain #homeResultsSec .homeResults__staffCardText .homeResults__relatedList, body.site-body--inner.page-resources #siteMain #homeResultsSec .homeResults__staffCardText .homeResults__relatedList li, body.site-body--inner.page-resources #siteMain #homeResultsSec .homeResults__staffCardText .homeResults__relatedList a { font-family: "Outfit", sans-serif !important; font-size: clamp(18px, 1.5vw, 21px) !important; font-weight: 400 !important; line-height: 1.68 !important; }