/* css/global.css */
:root {
/* Brand blues */
--c-title: #308dc4; /* Content Titles + Section Titles */
--c-client-title: #2a88b5; /* Our client Titles */
--card-bg: #f6f6f8; /* Grayed Cards */
/* Your palette (from the other image you sent earlier) */
--c-sky-100: #9be3f9;
--c-sky-200: #5ec3ea;
--c-blue-500: #48a0f6;
--c-blue-800: #1b71a3;
--c-green-500: #16a34a; /* "after" / validated state, pairs with the blues */
/* Text */
--text: #000000; /* headings in that design look basically black */
--text-muted: #505355; /* body text looks like a dark gray (approx) */
--bg: #ffffff; /* white background */
/* Horizontal page column. Every section container uses these two, so all
content lines up on one grid regardless of viewport. */
--page-max: 1400px;
--page-gutter: clamp(1.25rem, 4vw, 4rem);
/* Vertical rhythm between page sections. Every section applies this as
padding-block, so the gap between any two is exactly twice this value. */
--section-space: clamp(2.25rem, 4.5vh, 3.25rem);
/* Typography */
--font-main: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
sans-serif;
}
[hidden] {
display: none !important;
}
/* Inter is loaded from Google Fonts in each page .
The family is set once in --font-main above — never hard-code it. */
body {
font-family: var(--font-main);
margin: 0;
padding: 0;
padding-top: 90px; /* Space for fixed navbar */
background: var(--bg);
color: var(--text);
}
html {
scroll-padding-top: 100px; /* Offset for anchor links with fixed navbar */
}
/* reusable single line */
.sectionLine {
width: 100%;
height: 2px;
background: #000;
opacity: 0.12;
display: flex;
align-items: center; /* centers the line vertically */
}
/* the actual line */
.sectionLine::before {
content: "";
width: 100%;
height: 2px;
background: #000;
opacity: 0.12;
display: block;
}
.primary-button {
background-color: var(--c-blue-500);
color: var(--bg);
border: none;
font-weight: 600;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.primary-accent-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(90deg, #4193bd 0%, #80cbe7 100%);
color: var(--bg);
border: none;
font-weight: 600;
padding: 10px 14px;
border-radius: 999px;
cursor: pointer;
font-size: 1rem;
line-height: 1;
box-shadow: 0 10px 20px rgba(27, 113, 163, 0.25);
}
#bookDemo img,
#bookDemoFooter img{
width: 1.65rem;
}
#sendresume{
padding: .5rem 2rem !important;
}
#sendresume img {
width: 2rem;
transform: rotate(45deg);
}
.footerLinks {
width: max-content;
}
main.page-main {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sectionHeader2col {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
padding: 0 4vw 0rem 4vw;
border-top: 1px solid #19638e25;
border-bottom: 1px solid #19638e25;
width: 100%;
align-self: stretch;
box-sizing: border-box;
padding: 2.5rem 8vw;
}
/* left block: bar + title */
.sectionHeaderLeft {
display: flex;
align-items: flex-start;
gap: 18px; /* matches .clientsTitle gap vibe */
}
.f-aligned-items-center {
display: flex;
align-items: center;
}
/* IMPORTANT: your .titleBar is already styled in .clientsHeader;
this makes sure it still works here too */
.titleBar {
width: 10px;
height: 90px;
background: var(--c-blue-500);
flex: 0 0 auto;
}
/* title */
.sectionHeaderTitle {
margin: 0;
font-size: clamp(2.4rem, 4.2vw, 3.6rem);
line-height: 0.95;
color: var(--text);
font-weight: 800;
}
/* blue word */
.blueTitle {
color: var(--c-blue-800);
}
/* subtitle on the right */
.sectionHeaderSubtitle {
margin: 0;
max-width: 30%; /* gives line breaks like your image */
color: var(--text-muted);
font-size: 1.2rem;
}
/* responsive stack */
@media (max-width: 900px) {
.sectionHeader2col{
flex-direction: row;
align-items: start;
padding: .75rem 1rem !important;
}
.sectionHeaderSubtitle{
max-width: 100%;
display: none;
}
.sectionHeaderLeft{
margin-left: 2rem;
align-items: center;
}
}
@media (max-width: 450px) {
.solutionsHeadline{
font-size: 2rem !important;
}
.heroTitle h3{
font-size: 1.3rem !important;
width: 60% !important;
}
.sectionHeaderTitle{
font-size: 1.9rem !important;
}
.titleBar{
height: 70px !important;
}
}
blue-title{
color: #1b71a3 !important;
}
/* ===================================================== */
/* Responsive breakpoints */
/* ===================================================== */
/* @media (max-width: 1400px) {
.homeHero {
align-items: flex-start;
}
.sectionTitle.leftTitle {
width: 65%;
}
.clientsDetail {
width: 75%;
}
.clientTextBlock {
width: 90%;
}
.clientsGraphic {
width: 35%;
background-size: contain;
}
.aboutHero .heroTitle h2 {
font-size: 2.5rem;
}
.featuresList {
padding: 2.5rem 2.5rem 3rem 3rem;
}
}
@media (max-width: 1200px) {
#navbar {
width: 95%;
}
.linksNavbar {
width: 40%;
}
.featuresSolutions {
flex-direction: column;
height: auto;
}
.featuresList,
.featuresGraphic {
width: 100%;
}
.featuresGraphic img {
max-width: 480px;
margin: 0 auto;
display: block;
}
.howItWorksSolutionsGraphic,
.howItWorksSolutionsSteps {
width: 100%;
}
}
@media (max-width: 1024px) {
#navbar {
flex-wrap: wrap;
gap: 1rem;
}
.logoNavbar,
.linksNavbar,
.supportButtonsNavbar {
width: auto;
}
.howItWorksSolutionsGraphic {
width: 60%;
margin: 0 auto 2rem auto;
}
.howItWorksSolutionsGraphic img {
transform: none;
width: 100%;
}
.howItWorksSolutionsContainer {
flex-direction: column;
gap: 2rem;
}
.howItWorksSolutionsSteps {
display: flex;
flex-direction: column;
width: 100%;
}
.hiwStep {
width: 100%;
}
.career-descriptions {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.careersSection {
padding: 3rem 0;
}
.foundersTeam {
grid-template-columns: repeat(2, 1fr);
}
.developmentTeam {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.content.contact-grid {
grid-template-columns: 1fr;
}
.form-row.two {
flex-direction: column;
}
.footerInfo {
flex-direction: column;
gap: 2rem;
align-items: center;
text-align: center;
}
.footer-c,
.footer-r,
.footer-buttons {
width: 100%;
align-items: center;
}
.footerLinks ul {
margin-left: 0;
}
}
@media (max-width: 768px) {
#navbar {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}
.logoNavbar,
.linksNavbar,
.supportButtonsNavbar {
width: 100%;
justify-content: flex-start;
}
#navbar ul {
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-start;
}
.sectionTitle.rightTitle,
.sectionTitle.leftTitle,
.sectionTitle.centerTitle {
width: 100%;
text-align: left;
align-items: flex-start;
}
.sectionTitle.centerTitle p {
text-align: left;
}
.heroGraphics {
flex-direction: column;
gap: 1.5rem;
}
.heroGifContainer,
.heroGifContainer:nth-of-type(2) {
width: 80%;
transform: none;
animation: none;
}
.featuresList {
border-radius: 2rem;
padding: 2rem;
}
.featuresList ul {
margin-left: 0;
}
.aboutValuesContainer {
grid-template-columns: 1fr;
}
.expertiseContainer {
flex-direction: column;
gap: 2rem;
}
.verticalHR {
display: none;
}
.career-desc {
padding: 1.5rem 1rem;
}
.teamContainer {
padding: 1rem 0;
}
}
@media (max-width: 600px) {
.homeHero .sectionTitle {
position: relative;
width: 100%;
margin-left: 0;
}
.featuresList {
padding: 1.75rem;
}
.howItWorksSolutionsGraphic {
width: 100%;
}
.content.contact-grid,
main.page-main {
padding: 0 1rem;
}
.foundersTeam,
.developmentTeam {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.contact-wrap {
margin-top: 6rem;
}
}
@media (max-width: 480px) {
#navbar {
padding: 0.75rem 1rem;
}
.logoNavbar img {
width: 45%;
}
.featuresList {
border-radius: 1.5rem;
}
.contact-map iframe.gmap-frame {
height: 220px;
}
main.page-main {
padding: 2rem 0;
}
}
@media (max-width: 768px) {
.aboutHero {
height: auto;
align-items: flex-start;
}
.aboutHero .heroTitle {
width: 100%;
align-items: flex-start;
}
.aboutHero .heroTitle h2 {
width: 100%;
font-size: 2.2rem;
}
.aboutHero .heroTitle p {
width: 100%;
font-size: 1rem;
}
}
@media (max-width: 950px){
.clientsHeader{
grid-template-columns: 1fr;
row-gap: 1.25rem;
}
.clientsRadarPlaceholder{
width: min(420px, 95%);
}
}
*/
/* css/page-bg.css */
/* ==========================================================================
Page background layer
One continuous decorative layer behind the whole page — rings and curves in
the comp cross section boundaries, so it cannot live inside the sections.
Purely decorative: no pointer events, hidden from assistive tech.
Positions are percentages of total page height, so the composition keeps its
proportions as content changes rather than drifting out of place.
========================================================================== */
body.home-page,
body.resources-page {
position: relative; /* containing block for .pageBg — full document height */
overflow-x: clip;
}
.pageBg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* The pale wash: strongest top and bottom, so white cards read as raised. */
background:
linear-gradient(180deg, rgba(233, 243, 250, 0.75) 0%, rgba(255, 255, 255, 0) 18%,
rgba(255, 255, 255, 0) 78%, rgba(233, 243, 250, 0.6) 100%);
}
/* Content sits above the layer. Listed explicitly rather than with a child
selector so the fixed video overlay keeps its own positioning. */
#homeHeroSection,
#whyColosoSection,
#howItWorksSection,
#ourClientsSection,
#benefitsSection,
.ctaBand,
.resourcesHero,
.resourcesSection,
.rdArticle,
.rdBanner,
.rdBody,
.rdNotFound {
position: relative;
z-index: 1;
}
/* ---------- Concentric rings ---------- */
.pageBg__rings {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(48, 141, 196, 0.16);
}
.pageBg__rings::before,
.pageBg__rings::after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px solid rgba(48, 141, 196, 0.13);
}
.pageBg__rings::before {
inset: 11%;
}
.pageBg__rings::after {
inset: -13%;
border-color: rgba(48, 141, 196, 0.09);
}
/* The hero's own rings live in .heroBg (home-hero.css) — a second family here
read as clutter behind the same copy. */
/* Very large arc behind Why Coloso — only its shoulders are visible. */
.pageBg__rings--why {
width: 72rem;
height: 72rem;
left: 50%;
translate: -50% 0;
top: 17%;
border-color: rgba(48, 141, 196, 0.11);
}
.pageBg__rings--why::before {
inset: 7%;
}
.pageBg__rings--why::after {
inset: -8%;
}
/* ---------- Contour curves along the margins ---------- */
.pageBg__curves {
position: absolute;
width: 26rem;
height: 44%;
overflow: visible;
}
.pageBg__curves path {
fill: none;
stroke: rgba(48, 141, 196, 0.16);
stroke-width: 1.1;
vector-effect: non-scaling-stroke;
}
.pageBg__curves circle {
fill: rgba(48, 141, 196, 0.3);
}
.pageBg__curves--left {
left: -6rem;
top: 27%;
}
.pageBg__curves--right {
right: -6rem;
top: 22%;
transform: scaleX(-1);
}
/* ---------- Dot matrices ---------- */
.pageBg__grid {
position: absolute;
background-image: radial-gradient(rgba(48, 141, 196, 0.3) 1.3px, transparent 1.4px);
background-size: 17px 17px;
}
/* Tucked into the corner: the hero graphic fills the right column, and a
larger patch reads as noise between its cards rather than as texture. */
.pageBg__grid--heroRight {
width: 9rem;
height: 9rem;
right: -1%;
top: 1.5%;
opacity: 0.38;
}
.pageBg__grid--clients {
width: 9rem;
height: 11rem;
right: 3%;
top: 55%;
opacity: 0.55;
}
.pageBg__grid--benefits {
width: 8rem;
height: 9rem;
right: 6%;
top: 71%;
opacity: 0.45;
}
.pageBg__grid--cta {
width: 8rem;
height: 8rem;
left: 2%;
bottom: 7%;
opacity: 0.5;
}
/* ---------- Loose accent dots ---------- */
.pageBg__dot {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(48, 141, 196, 0.28);
}
.pageBg__dot--1 { left: 17%; top: 9%; }
.pageBg__dot--2 { right: 21%; top: 25%; width: 6px; height: 6px; }
.pageBg__dot--3 { left: 8%; top: 39%; }
.pageBg__dot--4 { right: 12%; top: 47%; width: 6px; height: 6px; }
.pageBg__dot--5 { left: 21%; top: 63%; width: 7px; height: 7px; }
.pageBg__dot--6 { right: 26%; bottom: 12%; }
/* ---------- Small screens ---------- */
@media (max-width: 900px) {
/* Keep the wash and the dot fields; the large geometry crowds a narrow page. */
.pageBg__rings,
.pageBg__curves,
.pageBg__grid--benefits,
.pageBg__dot {
display: none;
}
.pageBg__grid--heroRight,
.pageBg__grid--clients,
.pageBg__grid--cta {
width: 6rem;
height: 7rem;
opacity: 0.4;
}
}
/* css/index.css */
body.home-page{
padding-top: 0;
}
.homeHero{
height: max-content;
background-size: auto 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: clip;
}
blue-hero-1{
color: #1b658e;
}
blue-hero-2{
color: #2a88b5;
}
blue-hero-3{
color: #33a3d0;
}
blue-hero-4{
color: #19648e;
}
.homeHero .sectionTitle{
width: 100% !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: absolute;
}
.homeHero .sectionTitle h1{
color: var(--text);
}
/* Make sure this area is NOT centered */
.sectionTitle.leftTitle{
text-align: left !important;
}
/* Title styling */
.automationTitle{
margin: 0;
font-weight: 550 !important;
line-height: 1.1 !important;
color: #0F5E8B;
}
/* IMPORTANT: keep spans inline (prevents weird stacking) */
.automationTitle span{
display: inline;
}
/* Accent colors + italic like your reference */
.automationTitle .accent{
color: var(--c-blue-800);
font-style: italic;
font-weight: 800;
}
.automationTitle .accentLight{
color: var(--c-sky-200);
font-style: italic;
font-weight: 800;
}
/* If you still have the old gradient class somewhere, neutralize it */
.gradient-text{
background: none !important;
-webkit-text-fill-color: initial !important;
color: inherit !important;
display: inline !important;
}
/* Poster headline look */
.posterTitle{
margin: 0;
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.05em;
color: var(--text);
font-size: clamp(2.8rem, 6.2vw, 5.4rem);
}
.posterTitle .line{
display: block;
}
.automationTitle.posterTitle{
font-family: var(--font-main);
font-weight: 700;
line-height: 0.92;
letter-spacing: -0.04em;
}
/* Underline "Accelerate" like the image */
.posterTitle .u{
position: relative;
display: inline-block;
}
.posterTitle .u::after{
content: "";
position: absolute;
left: 0;
width: 100%;
/* thinner + closer to baseline */
height: 0.15em;
bottom: 0.06em;
/* less rounded (image is almost square ends) */
border-radius: 2px;
background: var(--c-blue-500);
}
/* Highlight "Eliminate" like the image (flatter + less padding) */
.posterTitle .hl{
display: inline-block;
background: var(--c-sky-100);
/* reduce the “pill” look */
padding: 0.04em 0.14em;
border-radius: 0.06em;
/* reduce extra height compared to your screenshot */
line-height: 1;
}
#whyColosoSection {
height: max-content;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-block: var(--section-space);
}
.sectionTitle{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 2.5rem 0;
border: 1px solid #E0E0E0;
}
.titleContent{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.titlePleca{
width: 10px;
height: 100%;
background: #1b71a3;
margin-right: 1rem;
}
.subtitleContent{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.subtitleContent p{
width: 40%;
font-size: 1.1rem;
}
.sectionTitle.rightTitle {
width: 90%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.sectionTitle h2{
color: var(--text);
margin: 0;
font-size: 3rem;
font-weight: 600;
}
.sectionTitle.rightTitle p{
color: var(--text-muted);
font-size: 1.2rem;
margin: 0.5rem 0 0 0;
max-width: 40rem;
text-align: right;
}
.sectionTitle.leftTitle {
width: 90%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.sectionTitle.leftTitle p{
color: var(--text-muted);
font-size: 1.2rem;
margin: 0.5rem 0 0 0;
max-width: 40rem;
text-align: left;
}
.sectionTitle.centerTitle {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.sectionTitle.centerTitle p{
color: var(--text-muted);
font-size: 1.2rem;
margin: 0.5rem 0 0 0;
max-width: 70rem;
text-align: center;
}
/* smaller gifs */
.video-wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.video-label {
position: absolute;
bottom: 75px;
left: 50%;
transform: translateX(-50%);
background: #C1DCEB;
border: 1px solid #C1DCEB;
color: #19638e;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
z-index: 10;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.video-label-secondary {
background: #f6f6f8;
border: 1px solid #9c9d9d;
color: #9c9d9d;
}
.sectionHeader2col{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
padding: 0 4vw 0rem 4vw;
border-top: 1px solid #19638e25;
border-bottom: 1px solid #19638e25;
}
/* left block: bar + title */
.sectionHeaderLeft{
display: flex;
align-items: center;
gap: 18px; /* matches .clientsTitle gap vibe */
}
/* IMPORTANT: your .titleBar is already styled in .clientsHeader;
this makes sure it still works here too */
.titleBar{
width: 10px;
height: 90px;
background: var(--c-blue-500);
flex: 0 0 auto;
}
/* title */
.sectionHeaderTitle{
margin: 0;
font-size: clamp(2.4rem, 4.2vw, 3.6rem);
line-height: 0.95;
color: var(--text);
font-weight: 800;
}
/* blue word */
.blueTitle{
color: var(--c-blue-800);
}
/* subtitle on the right */
.sectionHeaderSubtitle{
margin: 0;
max-width: 30%; /* gives line breaks like your image */
color: var(--text-muted);
font-size: 1.2rem;
}
.homeHero__logo{
display: none !important;
}
@media (min-width: 1800px) and (min-height: 1000px){
.solutionsHeadline{
font-size: clamp(3.6rem, 4vw, 5.2rem);
}
}
/* responsive stack */
@media (max-width: 450px){
.homeHero{
background: linear-gradient(180deg, #c4e0ee 0%, #ffffff 100%);
}
.homeHero__logo{
width: 120px;
margin-bottom: 1.5rem;
display: block !important;
position: absolute;
bottom: 1rem;
right: -50%;
opacity: .25;
}
.solutionsHeadline{
font-size: 2rem !important;
}
.sectionHeaderTitle{
font-size: 1.5rem !important;
}
.titleBar{
height: 60px !important;
}
.ourClientsSection{
margin-bottom: 0 !important;
padding-bottom: .5rem !important;
}
}
#howItWorksSection {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding-block: var(--section-space);
}
#ourClientsSection{
width: 100%;
overflow: hidden;
padding: 3.5rem 0;
}
/* --------------------------------
HEADER: bar + title + single line
-------------------------------- */
.clientsHeader{
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 34px;
padding: 0 4vw 0rem 4vw;
}
.clientsTitle{
display: flex;
align-items: flex-start;
gap: 18px;
}
.clientsHeader .titleBar{
width: 10px;
height: 90px;
background: var(--c-blue-500);
}
.clientsHeader h2{
margin: 0;
font-size: clamp(2.4rem, 4.2vw, 3.6rem);
line-height: 0.95;
color: var(--text);
margin-bottom: 15px;
margin-top: 15px;
font-weight: 800;
}
.sectionHeader2col{
width: 100%;
align-self: stretch;
box-sizing: border-box;
padding: 2.5rem 8vw;
}
.clientsRadarPlaceholder{
width: min(640px, 95%);
aspect-ratio: 1 / 1;
border-radius: 50%;
position: relative;
overflow: visible;
background:
radial-gradient(circle at center, transparent 0 33%, rgba(15,94,139,0.22) 33.4% 33.6%, transparent 34%),
radial-gradient(circle at center, transparent 0 52%, rgba(15,94,139,0.18) 52.4% 52.6%, transparent 53%),
radial-gradient(circle at center, transparent 0 70%, rgba(15,94,139,0.14) 70.4% 70.6%, transparent 71%),
radial-gradient(circle at center, transparent 0 86%, rgba(15,94,139,0.10) 86.4% 86.6%, transparent 87%);
box-shadow: none;
background-color: transparent;
}
.clientsRadarPlaceholder::before{
content: "";
position: absolute;
inset: 22%;
border-radius: 50%;
background: rgba(245, 245, 245, 0.95);
box-shadow: 0 16px 30px rgba(0,0,0,0.12);
}
.clientsRadarPlaceholder::after{
content: "";
position: absolute;
inset: 29%;
border-radius: 50%;
border: 2px solid rgba(15,94,139,0.28);
opacity: 0.9;
}
.clientsLogo{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: auto;
z-index: 2;
}
.solutionsHeadline{
margin: 0;
font-size: clamp(2.6rem, 4vw, 3.6rem);
line-height: 1.11;
font-weight: 700;
color: var(--text);
text-align: left;
}
.solutionsHeadline .dark-blue{
color: var(--c-blue-800);
font-weight: 500;
}
.solutionsHeadline .blue{
color: var( --c-blue-500);
font-weight: 500;
}
.solutionsHeadline .light-blue{
color: var(--c-sky-200);
font-weight: 500;
}
.hero-underlined{
text-decoration: underline;
text-decoration-color: #48a0f6;
text-underline-offset: 2px;
text-decoration-thickness: 10px;
}
.hero-higlighted{
background: #5ec2ea9d;
padding: 0 !important;
}
/* Hero Play Button & Text Styles */
.hero-play-container {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: auto;
margin-right: 8rem;
position: relative;
z-index: 10;
cursor: pointer;
user-select: none;
}
/* Play button neumorphic design */
.hero-play-circle-outer {
width: 140px;
height: 140px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow:
0 12px 35px rgba(37, 99, 235, 0.08),
0 2px 5px rgba(37, 99, 235, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-play-circle-outer::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(37, 99, 235, 0.08) 100%);
z-index: -1;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-play-circle-outer::after {
content: '';
position: absolute;
top: -40px;
left: -40px;
right: -40px;
bottom: -40px;
border-radius: 50%;
border: 1px solid rgba(37, 99, 235, 0.08);
z-index: -2;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hero-play-circle-inner {
width: 96px;
height: 96px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f3f7ff 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 5px 12px rgba(37, 99, 235, 0.06),
inset 0 2px 4px rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.hero-play-triangle {
width: 0;
height: 0;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-left: 28px solid #2563eb;
margin-left: 8px;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Hover effects */
.hero-play-container:hover .hero-play-circle-outer {
transform: scale(1.05);
box-shadow:
0 15px 35px rgba(37, 99, 235, 0.12),
0 3px 8px rgba(37, 99, 235, 0.08);
}
.hero-play-container:hover .hero-play-circle-outer::before {
transform: scale(1.08);
opacity: 0.8;
}
.hero-play-container:hover .hero-play-circle-outer::after {
transform: scale(1.05);
border-color: rgba(37, 99, 235, 0.15);
}
.hero-play-container:hover .hero-play-triangle {
transform: scale(1.1);
border-left-color: #1d4ed8;
}
/* Play button text */
.hero-play-text {
display: flex;
flex-direction: column;
max-width: 260px;
position: relative;
}
.hero-play-title {
color: #2563eb;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.25rem;
font-family: inherit;
}
.hero-play-subtitle {
color: #6b7280;
font-size: 0.95rem;
line-height: 1.4;
font-weight: 400;
}
/* Arrow svg curve */
.hero-play-arrow {
position: absolute;
width: 80px;
height: 40px;
bottom: -40px;
left: -90px;
pointer-events: none;
}
/* Responsive adjustment */
@media (max-width: 1024px) {
.hero-play-container {
margin-left: 0;
margin-right: 0;
margin-top: 2rem;
}
.hero-play-arrow {
display: none;
}
}
@media (max-width: 768px) {
.hero-play-container {
margin-top: 1.25rem;
gap: 0.85rem;
}
.hero-play-circle-outer {
width: 64px;
height: 64px;
}
.hero-play-circle-outer::before,
.hero-play-circle-outer::after {
display: none;
}
.hero-play-circle-inner {
width: 48px;
height: 48px;
}
.hero-play-triangle {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 13px solid #2563eb;
margin-left: 3px;
}
.hero-play-title {
font-size: 1rem;
margin-bottom: 0.1rem;
}
.hero-play-subtitle {
font-size: 0.78rem;
max-width: 220px;
line-height: 1.35;
}
}
/* VIDEO OVERLAY CSS */
.video-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.video-overlay.active {
opacity: 1;
pointer-events: auto;
}
.video-overlay-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(12px);
}
.video-overlay-container {
position: relative;
width: 90%;
max-width: 1000px;
aspect-ratio: 16/9;
background: #000000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
z-index: 10000;
}
.video-overlay.active .video-overlay-container {
transform: scale(1);
}
.video-overlay-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #ffffff;
font-size: 2rem;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease, opacity 0.3s ease;
z-index: 10002;
line-height: 1;
}
.video-overlay-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.video-overlay-container .video-wrapper {
width: 100%;
height: 100%;
transition: opacity 0.4s ease;
}
.video-overlay-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
/* BOOK A DEMO CARD */
.book-demo-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 90%;
max-width: 500px;
background: #0b1329;
border-radius: 20px;
padding: 3rem 2.5rem 2.5rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 10001;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.book-demo-card.visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
/* Card Close button */
.card-close-btn {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
font-size: 1.5rem;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1;
}
.card-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
/* Success Checkmark & Sparkles */
.card-success-icon-wrapper {
position: relative;
margin-bottom: 1.5rem;
width: 140px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.success-checkmark {
width: 60px;
height: 60px;
border-radius: 50%;
background: #1e70eb;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 0 20px rgba(30, 112, 235, 0.4);
}
.success-checkmark svg {
width: 30px;
height: 30px;
}
/* Sparkles/dots decoration */
.sparkles-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.sparkle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #1e70eb;
}
.sparkle.dot-1 { top: 15px; left: 10px; background: #60a5fa; width: 8px; height: 8px; }
.sparkle.dot-2 { top: 35px; left: 20px; background: #1e70eb; width: 4px; height: 4px; }
.sparkle.dot-3 { top: 50px; left: 5px; background: #3b82f6; width: 6px; height: 6px; }
.sparkle.dot-4 { top: 10px; left: 45px; background: #93c5fd; width: 5px; height: 5px; }
.sparkle.dot-5 { top: 20px; right: 15px; background: #3b82f6; width: 7px; height: 7px; }
.sparkle.dot-6 { top: 40px; right: 25px; background: #1e70eb; width: 4px; height: 4px; }
.sparkle.dot-7 { top: 52px; right: 8px; background: #60a5fa; width: 6px; height: 6px; }
.sparkle.dot-8 { top: 12px; right: 48px; background: #bfdbfe; width: 5px; height: 5px; }
/* Text styles */
.book-demo-card h2 {
font-size: 1.85rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 0.5rem 0;
letter-spacing: -0.01em;
}
.book-demo-card p {
font-size: 1.05rem;
color: #94a3b8;
margin: 0 0 2rem 0;
line-height: 1.5;
max-width: 320px;
}
/* Vertical Button Stack */
.card-buttons-stack {
display: flex;
flex-direction: column;
gap: 0.85rem;
width: 100%;
}
.btn-book-demo-solid {
background: #1e70eb;
color: #ffffff;
font-size: 1.05rem;
font-weight: 600;
padding: 0.95rem;
border-radius: 12px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.25s ease;
width: 100%;
}
.btn-book-demo-solid:hover {
background: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 112, 235, 0.35);
}
.arrow-up-right {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.btn-book-demo-solid:hover .arrow-up-right {
transform: translate(2px, -2px);
}
.btn-close-outline {
background: transparent;
color: #cbd5e1;
font-size: 1.05rem;
font-weight: 600;
padding: 0.95rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
transition: all 0.25s ease;
width: 100%;
}
.btn-close-outline:hover {
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
}
/* css/footer.css */
/* =========================
FOOTER
========================= */
footer {
width: 100%;
margin-top: 4rem;
background: transparent;
color: var(--text);
}
.footerInfo {
width: 100%;
margin: 0;
padding: 3rem clamp(1.5rem, 6vw, 5rem) 2rem;
border-radius: 0;
background: #f3f5f7;
box-shadow: none;
filter: none;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
/* TOP ROW: 4 columns */
.footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 3rem;
align-items: start;
}
/* col 1: brand */
.footer-c {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.footer-c .footer-brand img {
width: 220px;
margin: 0;
}
.footer-c p {
margin: 0;
max-width: 36ch;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.55;
color: var(--text);
}
.footer-c .primary-accent-button {
align-self: flex-start;
margin-top: 0.5rem;
}
/* link columns */
.footerLinks h4,
.footer-contact h4 {
margin: 0 0 1.25rem;
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.footerLinks ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.85rem;
}
.footerLinks a {
text-decoration: none;
color: #2a8fd0;
font-weight: 500;
font-size: 0.95rem;
}
.footerLinks a:hover {
text-decoration: underline;
}
/* col 4: contact */
.footer-contact {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footerData {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.95rem;
font-weight: 500;
color: var(--text);
line-height: 1.4;
}
.footerData img {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
}
.footerSocials {
display: flex;
gap: 0.6rem;
margin-top: 0.5rem;
}
.footerSocials a {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid #cbd5dd;
background: #fff;
color: #2a8fd0;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footerSocials a:hover {
background: #eaf2fc;
border-color: #2a8fd0;
transform: translateY(-1px);
}
/* DIVIDER */
.footer-divider {
border: none;
border-top: 1px solid #d8dde2;
margin: 2.5rem 0 1.25rem;
}
/* BOTTOM ROW */
.footer-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.footer-bottom-row p {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
}
.patent-badge {
height: auto;
width: 140px;
max-width: 100%;
display: block;
}
.footer-badge {
margin: 0;
flex-shrink: 0;
}
.cookie-preferences-link {
border: 0;
background: transparent;
color: #236ea3;
font-size: 0.9rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.cookie-consent {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: min(920px, calc(100% - 24px));
background: #ffffff;
border: 1px solid #d7e0e8;
border-radius: 14px;
box-shadow: 0 14px 40px rgba(18, 47, 73, 0.2);
padding: 1rem 1.1rem;
z-index: 1200;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 1rem;
}
/* Ensure hidden elements are strictly hidden and do not override display */
.cookie-consent[hidden],
.cookie-consent__groups[hidden],
.cookie-consent__btn[hidden],
[hidden] {
display: none !important;
}
.cookie-consent.is-visible {
animation: cookieSlideUp 0.25s ease-out;
}
.cookie-consent__text {
margin: 0;
color: #1c364a;
font-size: 0.94rem;
line-height: 1.5;
}
.cookie-consent__text a {
color: #1a79b8;
font-weight: 600;
}
.cookie-consent__actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.cookie-consent__groups {
display: grid;
gap: 0.6rem;
}
.cookie-toggle {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.8rem;
padding: 0.65rem 0.7rem;
border: 1px solid #d7e0e8;
border-radius: 10px;
background: #f8fbfd;
}
.cookie-toggle__text {
display: grid;
gap: 0.15rem;
}
.cookie-toggle__text strong {
color: #17364a;
font-size: 0.92rem;
}
.cookie-toggle__text small {
color: #4e6575;
font-size: 0.82rem;
line-height: 1.35;
}
.cookie-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #1f7bb8;
cursor: pointer;
}
.cookie-toggle--locked {
background: #f1f4f7;
}
.cookie-toggle--locked input[type="checkbox"] {
cursor: not-allowed;
}
.cookie-consent__btn {
border-radius: 10px;
border: 1px solid transparent;
padding: 0.56rem 1rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.cookie-consent__btn--primary {
background: #1f7bb8;
border-color: #1f7bb8;
color: #ffffff;
}
.cookie-consent__btn--secondary {
background: #f4f7fa;
border-color: #c3d1dc;
color: #1b3b52;
}
.cookie-consent__btn--neutral {
background: #ffffff;
border-color: #9eb4c5;
color: #1f567a;
}
@keyframes cookieSlideUp {
from {
opacity: 0;
transform: translate(-50%, 14px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* legacy hides */
.footerGraphic { display: none; }
.footerCopyright { display: none; }
.footerInfo__soc2-badge {
width: 7rem;
position: absolute;
right: 30px;
top: 14px;
opacity: .65;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 1100px) {
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.footer-c {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.footerInfo {
padding: 2.5rem 1.25rem 1.5rem;
}
.footer-top {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom-row {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.cookie-consent {
width: calc(100% - 16px);
bottom: 8px;
padding: 0.85rem;
align-items: stretch;
}
.cookie-consent__actions {
width: 100%;
justify-content: stretch;
}
.cookie-consent__btn {
flex: 1;
}
.cookie-toggle {
grid-template-columns: 1fr;
}
}
/* css/navbar.css */
/* NAVBAR CONTAINER */
:root{
--navbar-height: 80px;
}
#navbar{
position: fixed;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
top: 0;
padding: 1rem 0;
background: rgba(255, 255, 255, 0.10);
border-radius: 0;
/* box-shadow: 0 4px 30px rgba(10, 10, 10, 0.20); */
backdrop-filter: blur(14.8px);
-webkit-backdrop-filter: blur(14.8px);
border-bottom: 1px solid rgba(15, 94, 139, 0.10);
z-index: 999;
}
/* LOGO */
.logoNavbar{
width: 15%;
display: flex;
align-items: center;
justify-content: center;
}
.logoNavbar img{
width: 55%;
}
/* LINKS */
.linksNavbar{
/* Six page links at 1.1rem need ~410px plus gaps; 30% was too narrow
below ~1400px and the labels ran together. */
width: 44%;
display: flex;
align-items: center;
justify-content: center;
}
#navbar ul{
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;
gap: clamp(0.5rem, 1vw, 1.25rem);
width: 100%;
max-width: 720px;
margin: 0;
padding: 0;
font-size: 1.1rem;
}
#navbar li{
padding: 0;
position: relative;
}
/* Hover sections dropdown (desktop navbar only) */
#navbar .linksNavbar li .sectionsMenu{
display: none;
position: absolute;
top: 100%;
/* Left-aligned with the link text: pull back by the menu padding plus
the item padding so the first item's text lines up with the link. */
left: calc(-0.5rem - 0.75rem);
transform: none;
min-width: 200px;
padding: 0.5rem;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(15, 94, 139, 0.10);
border-radius: 12px;
backdrop-filter: blur(14.8px);
-webkit-backdrop-filter: blur(14.8px);
z-index: 2000;
}
/* JS-controlled close state (used after clicking a section on the same page) */
#navbar .linksNavbar li.sectionsMenuForceClosed .sectionsMenu{
display: none !important;
}
/* Invisible hover-bridge so moving from link -> menu doesn't drop :hover */
#navbar .linksNavbar li .sectionsMenu::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
#navbar .linksNavbar li:hover .sectionsMenu,
#navbar .linksNavbar li:focus-within .sectionsMenu{
display: flex;
flex-direction: column;
gap: 0;
}
/* If hover is briefly lost on the parent li, keep menu open while hovering it */
#navbar .linksNavbar li .sectionsMenu:hover{
display: flex;
flex-direction: column;
}
#navbar .linksNavbar li .sectionsMenuItem{
display: block;
padding: 0.5rem 0.75rem;
border-radius: 10px;
text-decoration: none;
color: var(--text);
font-family: var(--font-main);
font-weight: 500;
white-space: nowrap;
}
#navbar .linksNavbar li .sectionsMenuItem:hover{
background: rgba(255, 255, 255, 0.08);
}
/* NORMAL LINKS (NO PILL) */
#navbar li a{
text-decoration: none;
color: var(--text);
font-weight: 600;
/* padding: 8px 16px; */
border-radius: 999px;
transition: color .15s ease;
}
/* ACTIVE PAGE ONLY (THE BUBBLE) */
/* ACTIVE PAGE ONLY (underline) */
#navbar li.active a{
background: transparent;
border: none;
box-shadow: none;
color: var(--text);
border-radius: 0;
position: relative;
}
/* underline */
#navbar li.active a:not(.sectionsMenuItem)::after{
content: "";
position: absolute;
left: -5px; /* matches your link padding */
right: -5px; /* matches your link padding */
bottom: -6px; /* distance under text */
height: 5px;
/* border-radius: 999px; */
background: #2a88b5; /* your blue */
}
.linksNavbarMenu{
display: none;
}
#navbar .mobile-careers-link{
display: none;
}
.hidden{
display: none !important;
}
.linksNavbarMenu{
width: 10%;
position: relative;
}
#hamburgerBtn{
background-color: #ffffff;
border: 1px solid rgba(157, 157, 157, 0.25);
border-radius: .015rem;
}
/* HAMBURGER ICON LINES */
#hamburgerBtn svg rect{
fill: rgb(157, 157, 157);
transition: fill .15s ease;
}
#mobileMenu{
background: rgba(255, 255, 255, 0.16);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12.4px);
-webkit-backdrop-filter: blur(12.4px);
padding: .5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
position: fixed;
width: 100dvw;
height: 100dvh;
left: 0;
top: 0;
z-index: 1000;
}
/* Controlled by JS via the `hidden` attribute */
#mobileMenu[hidden]{
display: none;
}
#mobileMenu ul{
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
font-size: 1.5rem;
width: 40%;
padding: 2rem 1rem;
}
#mobileMenu li{
width: 100%;
text-align: right;
padding: 2rem;
position: relative;
}
#mobileMenu li::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(15,94,139,0) 0%, rgba(15,94,139,0.335) 100%);
pointer-events: none;
}
#mobileMenu ul a{
text-decoration: none;
color: var(--text);
}
@media (max-width: 450px) or (max-width: 1100px) {
:root{
--navbar-height: 72px;
}
#navbar{
justify-content: space-between;
width: 100% !important;
display: flex;
}
.logoNavbar{
margin-left: 1rem;
}
.logoNavbar{
width: 40%;
}
.linksNavbarMenu{
position: relative;
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
.supportButtonsNavbar{
display: none;
}
.linksNavbar{
display: none !important;
}
.linksNavbarMenu{
display: flex;
}
}
/* css/news-templates.css */
/* ================================================================
* news-templates.css — Shared styles for all news popup templates
* Loaded by any page that uses the news popup (via in ).
* ================================================================ */
/* ─── Shared template components ──────────────────────────────── */
.nt-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1d75cf;
background: #e8f3fd;
padding: 0.2em 0.7em;
border-radius: 999px;
margin-bottom: 0.85rem;
}
.nt-title {
font-size: 1.25rem;
font-weight: 800;
color: #0a2b51;
margin: 0 0 0.75rem;
line-height: 1.3;
}
.nt-body {
font-size: 0.95rem;
color: #475569;
line-height: 1.65;
margin: 0 0 1.5rem;
}
.nt-footer {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.nt-cta {
display: inline-flex;
align-items: center;
padding: 0.65rem 1.4rem;
background: #1d75cf;
color: #ffffff;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: background 0.18s;
}
.nt-cta:hover { background: #1166c8; }
.nt-cta--outline {
background: transparent;
border: 1.5px solid #0a2b51;
color: #0a2b51;
}
.nt-cta--outline:hover { background: #f1f5f9; }
/* ─── Template 1: Go-Live / Split Hero ────────────────────────── */
/* Widen the modal card when T1 split is inside it */
.news-modal__card:has(.nt-t1-split) {
max-width: 800px !important;
width: 92vw !important;
}
.nt-t1-split {
display: flex;
min-height: 340px;
}
.nt-t1-left {
flex: 1 1 0;
min-width: 0;
padding: 2rem 2rem 1.75rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.nt-t1-right {
flex: 0 0 320px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nt-t1-graphic {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin-right: 1rem;
}
/* Tag row: dot + label, no pill background */
.nt-t1-tag-row {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.85rem;
}
.nt-t1-split .nt-tag {
background: none;
padding: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 0.72rem;
}
.nt-t1-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #1d75cf;
flex-shrink: 0;
}
/* Headline — larger for the wider layout */
.nt-t1-headline {
font-size: 1.65rem;
line-height: 1.2;
margin-bottom: 0.85rem;
}
/* Short blue divider */
.nt-t1-rule {
width: 2rem;
height: 2.5px;
background: transparent;
border-radius: 2px;
}
.nt-t1-body {
font-size: 0.88rem;
margin-bottom: 1.25rem;
}
/* CTA row */
.nt-t1-actions { margin-bottom: 1.5rem; }
/* Brand footer */
.nt-t1-brand {
display: flex;
align-items: center;
gap: 0.55rem;
}
.nt-t1-brand-logo {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.18em;
color: #0a2b51;
}
.nt-t1-brand-pipe {
width: 1px;
height: 0.9rem;
background: #cbd5e1;
flex-shrink: 0;
}
.nt-t1-brand-tag {
font-size: 1rem;
color: #94a3b8;
}
/* ─── Template 2: Image Hero + Text ───────────────────────────── */
.nt-t2-hero {
margin: 0;
line-height: 0;
}
.nt-t2-hero img {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
}
.nt-t2-wrap {
padding: 1.5rem 2rem 2rem;
}
/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
.news-modal__card:has(.nt-t1-split) {
max-width: none !important;
width: 95vw !important;
}
.nt-t1-split { flex-direction: column; }
.nt-t1-right {
flex: 0 0 auto;
height: 180px;
width: 100%;
}
.nt-t1-headline { font-size: 1.3rem; }
.nt-t1-left { padding: 1.5rem 1.25rem; }
}
@media (max-width: 480px) {
.nt-t2-wrap { padding: 1.5rem 1.25rem; }
.nt-title { font-size: 1.1rem; }
.nt-t2-hero img { height: 160px; }
}
/* css/home-hero.css */
/* ==========================================================================
Home hero — stacked layout
Structure: full-width centred headline, then a two-column body
(left = subheadline / CTAs, right = graphic), then the trust bar.
Visual language (font, blues, pill CTA, shadows) is inherited from
global.css + index.css so marketing's restyle stays a token-level change.
========================================================================== */
.homeHero--stacked {
box-sizing: border-box;
position: relative; /* contains the decorative .homeHero__logo watermark */
height: auto;
margin-top: var(--navbar-height, 80px);
/* Own the fold as a whole: the copy, the graphic and the trust bar are all
on the first screen. .homeHero (index.css) is already a flex column, so
the container below flexes and the bar sits under it. */
min-height: calc(100dvh - var(--navbar-height, 80px));
justify-content: center;
}
/* ---------- Backdrop ---------- */
.heroBg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: radial-gradient(58% 46% at 46% 2%, rgba(214, 234, 248, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
}
.heroBg__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Hairlines stay hairlines however far the artwork is scaled. */
.heroBg__art path,
.heroBg__art circle {
vector-effect: non-scaling-stroke;
}
/* Below the fold the backdrop is mostly off-frame; the arc families are the
expensive part and buy nothing on a phone. */
@media (max-width: 720px) {
.heroBg__art {
display: none;
}
}
/* ---------- Content sits above it ---------- */
.homeHero__container,
.trustBand {
position: relative;
z-index: 1;
}
.homeHero__container {
box-sizing: border-box;
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding: clamp(1rem, 2.6dvh, 2rem) var(--page-gutter);
/* Takes the space the trust bar does not need, and centres its content. */
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ---------- Headline: full width, centred ---------- */
.homeHero__title {
max-width: 34ch;
margin: 0 auto;
text-align: center;
text-wrap: balance;
}
/* ---------- Body: copy left, graphic right ---------- */
.homeHero__body {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
margin-top: clamp(1rem, 2.6dvh, 2rem);
}
/* The <=450px watermark: index.css sizes it 120px, but `.homeHero img`
wins on specificity and stretches it full width. Pin it here. */
.homeHero--stacked .homeHero__logo {
width: 120px;
max-width: 120px;
}
/* ---------- Left column ---------- */
/* The centred headline above is two lines of display type, which reads fine
centred. This is a 50-word paragraph: a ragged left edge would move the
return sweep on every line, so the column is left-aligned and its measure
kept near 55 characters. */
.homeHero__copy {
text-align: left;
min-width: 0;
}
.homeHero__subtitle {
margin: 0;
max-width: 54ch;
font-size: clamp(1rem, 1.2vw, 1.25rem);
font-weight: 400;
line-height: 1.6;
color: var(--text-muted);
}
.homeHero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: clamp(0.75rem, 2vw, 1.75rem);
margin-top: clamp(1.5rem, 3.5dvh, 2.5rem);
}
.homeHero__cta {
padding: 14px 26px;
font-size: 1.05rem;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.homeHero__cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(27, 113, 163, 0.32);
}
.homeHero__ctaArrow {
width: 1em;
height: 1em;
flex: 0 0 auto;
}
/* Secondary CTA — text link through to the how-it-works page. */
.homeHero__cta--link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 10px 2px;
background: transparent;
border: none;
font: inherit;
cursor: pointer;
color: var(--text);
font-size: 1.05rem;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(72, 160, 246, 0.55);
text-decoration-thickness: 2px;
text-underline-offset: 7px;
transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.homeHero__cta--link:hover {
color: var(--c-blue-800);
text-decoration-color: var(--c-blue-500);
}
.homeHero__cta--link:focus-visible {
outline: 2px solid var(--c-blue-500);
outline-offset: 4px;
border-radius: 4px;
}
.homeHero__ctaPlay {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1em;
height: 2.1em;
flex-shrink: 0;
border-radius: 50%;
color: #ffffff;
background: var(--c-blue-500);
box-shadow: 0 0 0 4px rgba(72, 160, 246, 0.18), 0 6px 14px -6px rgba(22, 104, 214, 0.55);
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.homeHero__ctaPlay svg {
width: 0.95em;
height: 0.95em;
display: block;
/* Nudge right so the triangle's visual mass sits in the centre of the circle. */
transform: translateX(8%);
}
.homeHero__cta--link:hover .homeHero__ctaPlay {
transform: scale(1.08);
background: var(--c-blue-800);
box-shadow: 0 0 0 6px rgba(72, 160, 246, 0.22), 0 8px 18px -6px rgba(22, 104, 214, 0.6);
}
/* Kept for the video overlay trigger elsewhere on the site. */
.homeHero__cta--ghost {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 10px 4px;
background: transparent;
border: none;
border-radius: 999px;
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
color: var(--c-blue-800);
cursor: pointer;
}
.homeHero__playIcon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.homeHero__playIcon::before {
content: "";
width: 0;
height: 0;
margin-left: 3px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 11px solid var(--c-blue-500);
}
.homeHero__cta--ghost:hover .homeHero__playIcon {
transform: scale(1.08);
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
}
/* ---------- Right column ---------- */
@media (min-width: 961px) {
/* Keep the whole hero — bar included — on the first screen. The graphic is
the only elastic piece, and aspect-ratio means its height follows its
width, so the width is what gets capped. --fold-cost is everything else
competing for the fold: navbar, padding, headline, gaps, trust bar.
The 560px floor stops the dashboard shrinking into illegibility; below
that height the bar is allowed to run past the fold instead. */
.homeHero__visual > .heroGraphic {
max-width: min(780px, max(var(--graphic-floor, 560px), calc((100dvh - var(--fold-cost, 443px)) * 1318 / 899)));
}
}
.homeHero__visual {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.homeHero__visual > img {
display: block;
width: 100%;
max-width: 780px;
height: auto;
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
/* Stacked on one column the content is taller than the fold anyway, so
forcing a viewport height only adds dead space. */
.homeHero--stacked {
min-height: 0;
}
.homeHero__container {
flex: 0 1 auto;
padding-block: clamp(1.5rem, 4dvh, 3rem);
}
.homeHero__body {
grid-template-columns: minmax(0, 1fr);
gap: 2.25rem;
}
.homeHero__title,
.homeHero__subtitle {
max-width: none;
}
/* One narrow column: a centred headline wraps to four ragged lines above
left-aligned body copy. Everything shares one left edge instead. */
.homeHero__title {
text-align: left;
margin-inline: 0;
}
.homeHero__visual > img {
max-width: 620px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.homeHero__actions {
gap: 0.75rem;
}
.homeHero__cta {
justify-content: center;
width: 100%;
}
}
/* ---------- Trust band ---------- */
.trustBand {
box-sizing: border-box;
width: 100%;
max-width: var(--page-max);
/* Bottom spacing matches a section's own padding so the gap into
#whyColosoSection is the same 2 x --section-space as everywhere else. */
margin: clamp(0.75rem, 2dvh, 1.5rem) auto var(--section-space);
padding-inline: var(--page-gutter);
flex-shrink: 0;
}
.trustBand__eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0 0 0.6rem;
color: var(--c-blue-500);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.trustBand__eyebrow svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
.trustBar {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: clamp(1rem, 1.7vw, 1.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid rgba(48, 141, 196, 0.14);
border-radius: 26px;
background: linear-gradient(180deg, #f7fafd 0%, #f2f6fb 100%);
}
.trustBar__item {
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.2vw, 1.1rem);
min-width: 0;
padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
}
.trustBar__item + .trustBar__item {
border-left: 1px solid rgba(48, 141, 196, 0.16);
}
/* White disc lifts each mark off the tinted panel. */
.trustBar__icon {
display: flex;
align-items: center;
justify-content: center;
width: clamp(48px, 4vw, 62px);
height: clamp(48px, 4vw, 62px);
flex: 0 0 auto;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px rgba(15, 43, 61, 0.05), 0 10px 22px rgba(15, 43, 61, 0.08);
color: var(--c-blue-500);
}
.trustBar__icon svg {
width: 52%;
height: 52%;
}
/* The AICPA seal is a full circular mark with its own margin and a TM outside
the ring, so it is contained rather than cropped to the disc. */
.trustBar__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.trustBar__text {
min-width: 0;
}
.trustBar__text b {
display: block;
font-size: clamp(0.92rem, 1vw, 1.02rem);
font-weight: 700;
line-height: 1.25;
color: #12303f;
}
.trustBar__text i {
display: block;
margin-top: 0.2rem;
font-style: normal;
font-size: clamp(0.8rem, 0.85vw, 0.88rem);
line-height: 1.35;
color: var(--text-muted);
}
@media (max-width: 1100px) {
.trustBar {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: clamp(1rem, 2vw, 1.5rem);
}
/* Dividers follow the 2-up grid: only between columns. */
.trustBar__item + .trustBar__item {
border-left: none;
}
.trustBar__item:nth-child(even) {
border-left: 1px solid rgba(48, 141, 196, 0.16);
}
}
@media (max-width: 620px) {
.trustBar {
grid-template-columns: minmax(0, 1fr);
padding: 1.25rem;
row-gap: 1.25rem;
}
.trustBar__item {
padding-inline: 0;
}
.trustBar__item:nth-child(even) {
border-left: none;
}
/* Tighten so the label and its icon stay on one line; wrapped, the icon
detaches to the left of a two-line block. */
.trustBand__eyebrow {
font-size: 0.72rem;
letter-spacing: 0.07em;
}
.trustBand__eyebrow svg {
width: 15px;
height: 15px;
}
}
/* Laptop-height screens: compact the bar rather than crushing the graphic. */
@media (min-width: 961px) and (max-height: 880px) {
.homeHero--stacked {
/* Bar compacts (~36px) and the headline steps down (~17px) below, so the
graphic gets that budget back rather than the fold simply going slack. */
--fold-cost: 375px;
}
.trustBar {
padding-block: 0.8rem;
}
.trustBar__icon {
width: clamp(40px, 3.1vw, 48px);
height: clamp(40px, 3.1vw, 48px);
}
.trustBand__eyebrow {
margin-bottom: 0.4rem;
font-size: 0.74rem;
}
}
/* Short viewports: step the headline down so the trust bar still clears the
fold. index.css sets .solutionsHeadline to clamp(2.6rem, 4vw, 3.6rem) and
this file loads after it, so these override at equal specificity.
34ch is font-relative, so the headline keeps its two-line wrap as it shrinks. */
@media (min-width: 961px) and (max-height: 880px) {
.homeHero__title {
font-size: clamp(2.35rem, 3.6vw, 3.2rem);
line-height: 1.08;
}
}
@media (min-width: 961px) and (max-height: 780px) {
.homeHero__title {
font-size: clamp(2rem, 2.9vw, 2.6rem);
line-height: 1.06;
}
/* The graphic is on its floor at these heights, so the floor comes down a
little too — 20px of width buys the bar real clearance instead of the
few pixels a font-metric change could swallow. */
.homeHero--stacked {
--fold-cost: 352px;
--graphic-floor: 540px;
}
}
/* css/hero-graphic.css */
/* ==========================================================================
Hero graphic — Coloso workflow illustration
Built as live markup rather than a flat export: stays crisp at any size,
scales with its column, and restyles from the same tokens as the rest of
the site. Sized in cqw so every proportion tracks the container width.
========================================================================== */
.heroGraphic {
container-type: inline-size;
position: relative;
width: 100%;
max-width: 780px;
aspect-ratio: 1318 / 899;
font-family: var(--font-main);
color: #0f2b3d;
--hg-line: rgba(48, 141, 196, 0.16);
--hg-muted: #7c8b98;
--hg-ok: #22c55e;
--hg-card: #ffffff;
}
.heroGraphic__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.heroGraphic__wires path {
fill: none;
stroke: rgba(72, 160, 246, 0.45);
stroke-width: 0.35;
}
.heroGraphic__wires circle {
fill: #48a0f6;
}
/* ---------- Main app panel ---------- */
.hg-app {
position: absolute;
left: 4%;
top: 1.5%;
width: 60%;
height: 71%;
display: flex;
border-radius: 2.2cqw;
background: var(--hg-card);
box-shadow: 0 2.2cqw 5cqw rgba(15, 43, 61, 0.1);
overflow: hidden;
}
.hg-app__rail {
width: 8.5%;
padding: 3.2cqw 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4cqw;
border-right: 1px solid var(--hg-line);
}
.hg-app__rail span {
width: 1.7cqw;
height: 1.7cqw;
border-radius: 0.35cqw;
background: rgba(48, 141, 196, 0.3);
}
.hg-app__rail span:nth-child(2) {
background: #1b71a3;
}
.hg-app__body {
flex: 1;
min-width: 0;
padding: 2.4cqw 2.6cqw;
}
.hg-app__brand {
display: flex;
align-items: center;
gap: 0.7cqw;
margin-bottom: 2.4cqw;
}
.hg-app__brand img {
width: 2.4cqw;
height: 2.4cqw;
}
.hg-app__brand b {
font-size: 1.5cqw;
font-weight: 800;
letter-spacing: 0.06em;
color: #1b71a3;
}
.hg-app__title {
margin: 0 0 1.6cqw;
font-size: 1.55cqw;
font-weight: 700;
}
/* Stat tiles */
.hg-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1cqw;
margin-bottom: 2cqw;
}
.hg-stat {
padding: 1.2cqw;
border: 1px solid var(--hg-line);
border-radius: 0.9cqw;
}
.hg-stat i {
display: block;
font-style: normal;
font-size: 0.92cqw;
color: var(--hg-muted);
}
.hg-stat b {
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
display: block;
margin: 0.5cqw 0 0.4cqw;
font-size: 2.1cqw;
font-weight: 800;
letter-spacing: -0.01em;
}
.hg-stat b em {
font-style: normal;
font-size: 0.5em;
font-weight: 700;
color: var(--hg-muted);
margin-left: 0.25em;
}
.hg-stat u {
display: block;
text-decoration: none;
font-size: 0.8cqw;
color: var(--hg-muted);
}
.hg-stat svg {
display: block;
width: 100%;
height: 2.2cqw;
margin-top: 0.3cqw;
}
.hg-stat svg polyline {
fill: none;
stroke: #48a0f6;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* Active workflows */
.hg-work {
padding-top: 1.4cqw;
border-top: 1px solid var(--hg-line);
}
.hg-work h5 {
margin: 0 0 1.2cqw;
font-size: 1.25cqw;
font-weight: 700;
}
.hg-row {
display: grid;
grid-template-columns: 34% 22% 1fr auto;
align-items: center;
gap: 0.8cqw;
padding: 0.75cqw 0;
}
.hg-row + .hg-row {
border-top: 1px solid rgba(48, 141, 196, 0.08);
}
.hg-row b {
font-size: 1cqw;
font-weight: 700;
}
.hg-row i {
font-style: normal;
font-size: 0.9cqw;
color: var(--hg-muted);
}
.hg-row s {
text-decoration: none;
height: 0.55cqw;
border-radius: 999px;
background: rgba(48, 141, 196, 0.15);
overflow: hidden;
}
.hg-row s::before {
content: "";
display: block;
width: var(--pct, 50%);
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #2f6fe0, #48a0f6);
}
.hg-row u {
text-decoration: none;
font-size: 0.9cqw;
color: var(--hg-muted);
min-width: 3cqw;
text-align: right;
}
/* ---------- Overlapping document card ---------- */
.hg-doc {
position: absolute;
left: 0;
bottom: 1.5%;
width: 51%;
display: grid;
grid-template-columns: 47% 1fr;
gap: 2cqw;
padding: 2cqw;
border-radius: 1.8cqw;
background: var(--hg-card);
box-shadow: 0 2cqw 4.5cqw rgba(15, 43, 61, 0.12);
}
.hg-doc h5 {
margin: 0 0 1.1cqw;
font-size: 1.35cqw;
font-weight: 700;
}
.hg-doc__left {
border-right: 1px solid var(--hg-line);
padding-right: 1.6cqw;
}
.hg-doc__left h5 {
font-size: 1.15cqw;
}
/* Abstracted table rows — the real document renders here. */
.hg-sheet span {
display: block;
height: 0.5cqw;
margin-bottom: 0.62cqw;
border-radius: 999px;
background: rgba(15, 43, 61, 0.09);
}
.hg-sheet span:nth-child(3n) {
width: 72%;
}
.hg-sheet span:nth-child(4n) {
width: 86%;
}
.hg-kv {
display: flex;
align-items: center;
gap: 0.8cqw;
padding: 0.72cqw 0;
font-size: 1.05cqw;
}
.hg-kv + .hg-kv {
border-top: 1px solid rgba(48, 141, 196, 0.1);
}
.hg-kv i {
font-style: normal;
flex: 1;
color: #33465a;
}
.hg-kv b {
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.hg-kv--conf b {
color: var(--hg-ok);
}
.hg-check {
width: 1.5cqw;
height: 1.5cqw;
flex: 0 0 auto;
}
.hg-doc__pdf {
position: absolute;
left: 2cqw;
bottom: -1.4cqw;
padding: 0.6cqw 1.1cqw;
border-radius: 0.7cqw;
background: #2f6fe0;
color: #fff;
font-size: 1cqw;
font-weight: 800;
letter-spacing: 0.04em;
}
/* ---------- Right-hand flow ---------- */
.hg-flow {
position: absolute;
right: 0;
top: 4%;
width: 30.5%;
height: 88%;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hg-node {
position: relative;
padding: 1.5cqw 1.6cqw;
border-radius: 1.5cqw;
background: var(--hg-card);
box-shadow: 0 1.4cqw 3.4cqw rgba(15, 43, 61, 0.1);
}
.hg-node--accent {
display: flex;
align-items: center;
gap: 1.1cqw;
border: 1px solid rgba(72, 160, 246, 0.5);
box-shadow: 0 1.4cqw 3.4cqw rgba(72, 160, 246, 0.22);
}
.hg-node h5 {
margin: 0 0 0.4cqw;
font-size: 1.35cqw;
font-weight: 700;
}
.hg-node p {
margin: 0;
font-size: 1cqw;
line-height: 1.35;
color: var(--hg-muted);
}
.hg-node__logo {
display: flex;
align-items: center;
justify-content: center;
width: 3.6cqw;
height: 3.6cqw;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(72, 160, 246, 0.12);
}
.hg-node__logo img {
width: 62%;
height: 62%;
}
.hg-node__check {
position: absolute;
right: 1.2cqw;
bottom: -0.8cqw;
width: 2cqw;
height: 2cqw;
}
/* Chips, avatars, platform labels */
.hg-chips {
display: flex;
align-items: center;
gap: 0.7cqw;
margin-top: 1.1cqw;
}
.hg-chip {
display: flex;
align-items: center;
justify-content: center;
width: 2.6cqw;
height: 2.6cqw;
border-radius: 0.6cqw;
font-size: 0.85cqw;
font-weight: 800;
color: #fff;
}
.hg-chip--pdf { background: #e2493a; }
.hg-chip--xls { background: #1f9d55; }
.hg-chip--mail { background: #5aa9e6; }
.hg-chip--more,
.hg-more {
background: rgba(15, 43, 61, 0.07);
color: var(--hg-muted);
border-radius: 999px;
min-width: 2.6cqw;
}
.hg-avatars {
display: flex;
align-items: center;
margin-top: 1.1cqw;
}
.hg-avatars span {
width: 2.6cqw;
height: 2.6cqw;
border-radius: 50%;
border: 0.28cqw solid #fff;
background: linear-gradient(140deg, #9fc6e8, #5b87a8);
}
.hg-avatars span + span {
margin-left: -0.8cqw;
}
.hg-avatars .hg-more {
display: flex;
align-items: center;
justify-content: center;
height: 2.6cqw;
margin-left: 0.6cqw;
padding: 0 0.7cqw;
border: none;
background: rgba(15, 43, 61, 0.07);
font-size: 0.85cqw;
font-weight: 700;
}
.hg-platforms {
display: flex;
align-items: center;
gap: 1.2cqw;
margin-top: 1.2cqw;
font-size: 1.15cqw;
font-weight: 800;
color: #1f3d52;
}
.hg-platforms i {
font-style: normal;
color: var(--hg-muted);
font-weight: 700;
letter-spacing: 0.12em;
}
/* ---------- Small screens: drop the finest detail ---------- */
@container (max-width: 420px) {
.hg-stat u,
.hg-row i {
display: none;
}
}
/* css/section-header.css */
/* ==========================================================================
Centred section header — eyebrow pill + two-tone title + optional subtitle.
Shared by #whyColosoSection and #ourClientsSection; add the classes to any
further section that adopts the same structure.
Palette and type come from global.css / index.css tokens.
========================================================================== */
.sectionHeaderCentered {
box-sizing: border-box;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding-inline: clamp(1.25rem, 4vw, 3rem);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.sectionEyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 7px 16px;
border-radius: 999px;
background: rgba(94, 195, 234, 0.16);
color: var(--c-blue-800);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.sectionEyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-blue-500);
}
.sectionHeaderTitle--centered {
line-height: 1.12;
font-size: clamp(2rem, 3.4vw, 3rem);
max-width: 26ch;
}
/* For one-line statement titles that should not wrap at 26ch. */
.sectionHeaderTitle--wide {
max-width: none;
}
.sectionHeaderSubtitle--centered {
max-width: 46ch;
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.5;
}
/* global.css hides .sectionHeaderSubtitle below 900px — that suited the old
two-column header where it sat in a side column. In a centred header it
carries the section's copy, so keep it. */
@media (max-width: 900px) {
/* For one-line statement titles that should not wrap at 26ch. */
.sectionHeaderTitle--wide {
max-width: none;
}
.sectionHeaderSubtitle--centered {
display: block;
max-width: 46ch;
}
}
@media (max-width: 640px) {
.sectionHeaderTitle--centered,
/* For one-line statement titles that should not wrap at 26ch. */
.sectionHeaderTitle--wide {
max-width: none;
}
.sectionHeaderSubtitle--centered {
max-width: none;
}
}
/* css/feature-cards.css */
/* ==========================================================================
Feature cards — icon tile, title, copy, 16:9 image
Shared by #whyColosoSection and #ourClientsSection. Both grids are 3-up, so
one component covers them; add .featureCardsGrid + .featureCard to any
further section that adopts the pattern.
Surfaces and palette come from global.css / index.css tokens.
========================================================================== */
.featureCardsGrid {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: clamp(1rem, 1.5vw, 1.75rem);
width: 100%;
max-width: var(--page-max);
margin: clamp(2rem, 4vh, 3rem) auto 0;
padding-inline: var(--page-gutter);
}
.featureCard {
display: flex;
flex-direction: column;
border-radius: 14px;
background: var(--bg);
border: 1px solid rgba(48, 141, 196, 0.11);
box-shadow: 0 1px 2px rgba(15, 43, 61, 0.04), 0 12px 28px rgba(15, 43, 61, 0.06);
padding: 1.5rem;
overflow: hidden;
}
.featureCard__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
flex: 0 0 auto;
border-radius: 50%;
background: #f1f5f9;
}
/* Halo bleeding past the disc, as in the mockup. */
.featureCard__icon::before {
content: "";
position: absolute;
inset: -30%;
border-radius: 50%;
background: radial-gradient(circle, rgba(48, 141, 196, 0.13) 0%, rgba(48, 141, 196, 0) 68%);
pointer-events: none;
}
.featureCard__icon img {
position: relative;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 16px;
box-sizing: border-box;
}
.featureCard h3 {
margin: 1.1rem 0 0.6rem;
font-size: 1.45rem;
font-weight: 700;
color: var(--c-title);
/* Reserve two lines so every card's body copy starts on the same baseline. */
min-height: 2.4em;
display: flex;
align-items: flex-end;
}
.featureCard p {
margin: 0;
color: var(--text-muted);
font-size: 1rem;
line-height: 1.45;
}
/* Image sits inset at the foot of the card. The fixed ratio means dropping in
the real artwork will not reflow anything around it. */
.featureCard__media {
margin-top: auto;
padding-top: 1.5rem;
}
/* The photo itself is styled by .featureCard__frame in media-panels.css. */
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.featureCardsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.featureCardsGrid {
grid-template-columns: minmax(0, 1fr);
}
/* Single column: nothing to align across, so drop the two-line reserve. */
.featureCard h3 {
min-height: 0;
margin-top: 0.9rem;
display: block;
}
}
/* ==========================================================================
Numbered variant — step number, tag line and a CTA instead of an image.
Used by #howItWorksSection.
========================================================================== */
.featureCard--numbered {
position: relative;
}
.featureCard__number {
position: absolute;
top: 1.15rem;
right: 1.5rem;
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
color: rgba(48, 141, 196, 0.22);
pointer-events: none;
}
/* Keep the title clear of the number. */
.featureCard--numbered h3 {
padding-right: 3.5rem;
}
.featureCard p.featureCard__tags {
margin-top: 1.35rem;
text-align: center;
font-size: 0.9rem;
line-height: 1.45;
color: var(--c-blue-800);
}
.featureCard__cta {
margin: 1.75rem auto 0;
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: 1px solid var(--c-blue-800);
border-radius: 999px;
background: transparent;
color: var(--c-blue-800);
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.featureCard__cta:hover {
background: var(--c-blue-800);
color: var(--bg);
transform: translateY(-1px);
}
/* Push the CTA to the foot of the card the way __media does elsewhere. */
.featureCard--numbered p.featureCard__tags {
margin-bottom: auto;
}
/* css/media-panels.css */
/* ==========================================================================
Media panels — the product-UI overlays that float on the feature-card
photography (#whyColosoSection).
These are live markup, not part of the artwork. The photo behind them is a
plain ![]()
that can be swapped at any time, and every label, value and
status below is ordinary HTML a front-end dev can edit in place.
All sizes are in cqw of .featureCard__frame, so the overlays track the
photo exactly as the column resizes.
========================================================================== */
.featureCard__frame {
container-type: inline-size;
position: relative;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(48, 141, 196, 0.1);
}
.featureCard__frame > img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* The overlays sit on the left ~half of every frame, so a photo whose
subjects run edge to edge is cropped from the right to keep the faces
clear of the panel. */
.featureCard__frame > img.is-anchored-right {
object-position: right center;
}
/* ---------- Shared surface ---------- */
.mediaChip,
.mediaPanel {
box-sizing: border-box;
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-shadow: 0 1.2cqw 3cqw rgba(15, 43, 61, 0.16);
color: #12303f;
font-family: var(--font-main);
font-size: 2.9cqw;
line-height: 1.3;
}
.mediaChip svg,
.mediaPanel svg {
flex: 0 0 auto;
}
/* ---------- Card 1: stacked status chips ---------- */
.mediaChips {
position: absolute;
left: 4%;
top: 14%;
width: 46%;
display: flex;
flex-direction: column;
gap: 1.8cqw;
}
.mediaChip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5cqw;
padding: 2.2cqw 2.6cqw;
border-radius: 2cqw;
}
.mediaChip > span {
color: #33505f;
}
.mediaChip > b {
display: inline-flex;
align-items: center;
gap: 0.9cqw;
font-weight: 600;
white-space: nowrap;
}
.mediaChip > b svg {
width: 3cqw;
height: 3cqw;
}
.mediaChip .is-done {
color: #16a34a;
}
.mediaChip .is-active {
color: #1668d6;
}
/* ---------- Cards 2 & 3: single panel ---------- */
.mediaPanel {
position: absolute;
left: 3.5%;
top: 50%;
transform: translateY(-50%);
padding: 2.6cqw;
border-radius: 2.4cqw;
}
.mediaPanel--verify {
width: 43%;
}
.mediaPanel--volume {
width: 53%;
font-size: 2.7cqw;
}
.mediaPanel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2cqw;
}
.mediaPanel__title {
margin: 0;
font-weight: 700;
line-height: 1.2;
}
.mediaPanel__seal {
display: flex;
align-items: center;
justify-content: center;
width: 5.4cqw;
height: 5.4cqw;
border-radius: 50%;
background: #16a34a;
}
.mediaPanel__seal svg {
width: 62%;
height: 62%;
}
.mediaPanel__list {
list-style: none;
margin: 2cqw 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.5cqw;
}
.mediaPanel__list li {
display: flex;
align-items: center;
gap: 1.4cqw;
}
.mediaPanel__list li > span {
flex: 1 1 auto;
min-width: 0;
color: #33505f;
}
.mediaPanel__list li > b {
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
font-weight: 600;
text-align: right;
white-space: nowrap;
}
.mediaPanel__list li > b i {
display: block;
font-style: normal;
font-weight: 400;
font-size: 2.4cqw;
color: #8b9aa6;
}
.mediaPanel__list svg {
width: 3.2cqw;
height: 3.2cqw;
color: #16a34a;
}
/* Row icons on the volume panel are square tiles rather than ticks. */
.mediaPanel__tile {
display: flex;
align-items: center;
justify-content: center;
width: 4.2cqw;
height: 4.2cqw;
flex: 0 0 auto;
border-radius: 1.1cqw;
background: rgba(72, 160, 246, 0.14);
color: #1668d6;
}
.mediaPanel__tile svg {
width: 62%;
height: 62%;
color: inherit;
}
.mediaPanel__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2cqw;
margin-top: 2cqw;
padding-top: 1.8cqw;
border-top: 1px solid rgba(48, 141, 196, 0.16);
font-weight: 600;
}
.mediaPanel__foot svg {
width: 2.8cqw;
height: 2.8cqw;
color: #8b9aa6;
}
/* ---------- Volume panel: headline figure and trend ---------- */
.mediaPanel__figure {
text-align: right;
line-height: 1;
}
.mediaPanel__figure b {
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 0.8cqw;
font-size: 5cqw;
font-weight: 800;
color: #1668d6;
}
.mediaPanel__figure b svg {
width: 3.4cqw;
height: 3.4cqw;
}
.mediaPanel__figure i {
display: block;
margin-top: 0.8cqw;
font-style: normal;
font-size: 2.4cqw;
color: #8b9aa6;
}
.mediaPanel__spark {
display: block;
width: 100%;
height: 7cqw;
margin-top: 1.2cqw;
}
.mediaPanel__spark path {
fill: none;
stroke: #1668d6;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.mediaPanel__spark polygon {
fill: #1668d6;
}
.mediaPanel__list--plain {
margin-top: 2cqw;
padding-top: 1.8cqw;
border-top: 1px solid rgba(48, 141, 196, 0.16);
}
.mediaPanel__up {
color: #16a34a;
}
/* css/clients-split.css */
/* ==========================================================================
Our Clients — circular visual left, audience list right
Header comes from section-header.css.
========================================================================== */
#ourClientsSection {
box-sizing: border-box;
width: 100%;
overflow: hidden;
padding-block: var(--section-space);
}
/* Statement title wants one line — give it more room than the 900px default. */
#ourClientsSection .sectionHeaderCentered {
max-width: 1150px;
}
.clientsSplit {
box-sizing: border-box;
width: 100%;
max-width: var(--page-max);
margin: clamp(1.5rem, 4vh, 3rem) auto 0;
padding-inline: var(--page-gutter);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
}
/* ---------- Circular visual: photo, rings and floating metric cards ---------- */
.clientsOrbit {
container-type: inline-size;
position: relative;
width: min(100%, 500px);
margin: 0 auto;
aspect-ratio: 1;
font-family: var(--font-main);
}
/* Rings, drawn outward from the photo. */
.clientsOrbit__ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(48, 141, 196, 0.16);
pointer-events: none;
}
.clientsOrbit__ring--1 { inset: 12%; border-color: rgba(48, 141, 196, 0.22); }
.clientsOrbit__ring--2 { inset: 2%; border-color: rgba(48, 141, 196, 0.16); }
.clientsOrbit__ring--3 { inset: -7%; border-color: rgba(48, 141, 196, 0.1); }
/* Soft halo between the photo edge and the first ring. */
.clientsOrbit__halo {
position: absolute;
inset: 16%;
border-radius: 50%;
background: rgba(72, 160, 246, 0.06);
}
.clientsOrbit__photo {
position: absolute;
inset: 22%;
border-radius: 50%;
overflow: hidden;
}
.clientsOrbit__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dots sitting on the ring paths, with short leader lines. */
.clientsOrbit__dot {
position: absolute;
width: 2cqw;
height: 2cqw;
border-radius: 50%;
background: #48a0f6;
opacity: 0.55;
}
.clientsOrbit__dot--a { right: 1%; top: 24%; }
.clientsOrbit__dot--b { right: -6%; top: 50%; }
.clientsOrbit__dot--c { right: 4%; bottom: 22%; }
.clientsOrbit__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.clientsOrbit__wires path {
fill: none;
stroke: rgba(72, 160, 246, 0.32);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
/* ---------- Floating metric cards ---------- */
.orbitCard {
position: absolute;
margin: 0;
padding: 3cqw;
border-radius: 2.6cqw;
background: #fff;
box-shadow: 0 3cqw 6cqw rgba(15, 43, 61, 0.13);
color: #12303f;
}
.orbitCard__label {
display: flex;
align-items: center;
gap: 0.9cqw;
font-size: 2.6cqw;
font-weight: 700;
color: #1b4a63;
}
.orbitCard__label svg {
width: 3cqw;
height: 3cqw;
flex: 0 0 auto;
}
.orbitCard b {
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
display: block;
margin: 1.4cqw 0 0.8cqw;
font-size: 5.8cqw;
font-weight: 800;
line-height: 1;
color: #1668d6;
letter-spacing: -0.01em;
}
.orbitCard u {
display: block;
text-decoration: none;
font-size: 2.3cqw;
font-weight: 700;
color: #22c55e;
}
.orbitCard u.is-muted {
color: #8b9aa6;
font-weight: 500;
}
/* Left card: documents processed, with two sparklines. */
.orbitCard--docs {
left: 2%;
top: 25%;
width: 37%;
}
.orbitCard__sparks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.6cqw;
margin-top: 2cqw;
}
.orbitCard__sparks span {
display: block;
padding: 1.2cqw;
border-radius: 1.4cqw;
background: rgba(34, 197, 94, 0.08);
}
.orbitCard__sparks svg {
display: block;
width: 100%;
height: 5cqw;
}
.orbitCard__sparks path {
fill: none;
stroke: #22c55e;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.orbitCard__sparks polygon {
fill: #22c55e;
}
/* Right card: accuracy, with a shield badge. */
.orbitCard--accuracy {
right: 2%;
top: 61%;
width: 35%;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2cqw;
}
.orbitCard__eyebrow {
display: block;
font-size: 2.8cqw;
font-weight: 800;
color: #12303f;
}
.orbitCard__sub {
display: block;
margin-top: 0.4cqw;
font-size: 2.3cqw;
color: #7c8b98;
}
.orbitCard__badge {
display: flex;
align-items: center;
justify-content: center;
width: 6.4cqw;
height: 6.4cqw;
flex: 0 0 auto;
border-radius: 1.8cqw;
background: #1668d6;
}
.orbitCard__badge svg {
width: 60%;
height: 60%;
}
/* ---------- Audience list ---------- */
.clientsList {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 1.5vh, 1rem);
}
.clientsList__item {
display: flex;
align-items: flex-start;
gap: 1.15rem;
padding: 1.25rem;
border-radius: 14px;
background: transparent;
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* The mockup shows one item on a raised surface; as a hover state it reads as
intent rather than an arbitrary highlight. */
.clientsList__item:hover {
background: var(--card-bg);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.08);
}
.clientsList__icon {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
flex: 0 0 auto;
}
.clientsList__icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.clientsList h3 {
margin: 0 0 0.4rem;
font-size: 1.3rem;
font-weight: 700;
color: var(--c-client-title);
}
.clientsList p {
margin: 0;
color: var(--text-muted);
font-size: 1rem;
line-height: 1.5;
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.clientsSplit {
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
}
.clientsOrbit {
width: min(100%, 400px);
}
/* Leader lines run off the frame once the column is full-width. */
.clientsOrbit__wires,
.clientsOrbit__dot {
display: none;
}
}
@media (max-width: 520px) {
.clientsList__item {
padding: 1rem 0.25rem;
gap: 0.9rem;
}
.clientsList__icon {
width: 44px;
height: 44px;
}
}
/* css/benefits.css */
/* ==========================================================================
Benefits + proof stats
Layout differs from the supplied mockup on purpose (see notes below):
the intro and the stat band share one grid, and the figures — the section's
actual evidence — are the largest thing in it rather than the smallest.
========================================================================== */
#benefitsSection {
box-sizing: border-box;
width: 100%;
overflow: hidden;
padding-block: var(--section-space);
}
#benefitsSection > * {
box-sizing: border-box;
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding-inline: var(--page-gutter);
}
/* ---------- Intro: copy left, image right ---------- */
.benefits__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
}
.benefits__copy .sectionHeaderTitle {
margin: 0;
font-size: clamp(1.9rem, 3vw, 2.7rem);
line-height: 1.15;
text-align: left;
}
.benefits__lead {
margin: clamp(1rem, 2.5vh, 1.6rem) 0 0;
max-width: 46ch;
color: var(--text-muted);
font-size: clamp(1rem, 1.15vw, 1.15rem);
line-height: 1.55;
}
.benefits__visual {
filter: drop-shadow(0 18px 40px rgba(27, 113, 163, 0.12));
}
/* ---------- Stat band ---------- */
.statBand {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 1.5vw, 1.75rem);
margin-top: clamp(2.5rem, 5vh, 4rem);
}
.statCard {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(1.5rem, 2.5vw, 2.25rem);
border-radius: 14px;
background: var(--card-bg);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}
.statCard__figure {
margin: 0;
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
font-size: clamp(3rem, 5vw, 4.25rem);
font-weight: 800;
line-height: 1;
color: var(--c-blue-500);
letter-spacing: -0.02em;
}
.statCard__unit {
font-size: 0.45em;
font-weight: 700;
margin-left: 0.1em;
vertical-align: baseline;
}
.statCard h3 {
margin: 0.9rem 0 0.5rem;
font-size: clamp(1.15rem, 1.5vw, 1.4rem);
font-weight: 700;
color: var(--text);
}
.statCard__copy {
margin: 0 0 1.5rem;
color: var(--text-muted);
font-size: 1rem;
line-height: 1.5;
}
.statCard__proof {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 8px 16px;
border-radius: 999px;
background: rgba(94, 195, 234, 0.16);
color: var(--c-blue-800);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.statCard__proof:hover {
background: rgba(94, 195, 234, 0.3);
transform: translateY(-1px);
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.benefits__intro {
grid-template-columns: minmax(0, 1fr);
gap: 2.25rem;
}
.benefits__lead {
max-width: none;
}
}
@media (max-width: 640px) {
.statBand {
grid-template-columns: minmax(0, 1fr);
}
}
/* css/benefits-graphic.css */
/* ==========================================================================
Benefits illustration: scattered inputs converge, pass through Coloso,
and leave as ordered, verified streams.
Drawn live (SVG + HTML chips) so it stays sharp and scales with the column.
========================================================================== */
.orderFlow {
container-type: inline-size;
position: relative;
width: 100%;
aspect-ratio: 830 / 500;
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(120% 90% at 82% 8%, rgba(72, 160, 246, 0.07) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(135deg, #fbfcfe 0%, #f3f7fc 100%);
}
/* Faint dot fields in the corners, matching the page background layer. */
.orderFlow::before,
.orderFlow::after {
content: "";
position: absolute;
width: 30%;
height: 40%;
background-image: radial-gradient(rgba(48, 141, 196, 0.42) 1.2px, transparent 1.3px);
background-size: 13px 13px;
opacity: 0.7;
pointer-events: none;
}
.orderFlow::before {
right: 0;
top: 0;
-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 68%);
mask-image: linear-gradient(225deg, #000 0%, transparent 68%);
}
.orderFlow::after {
right: 0;
bottom: 0;
-webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 68%);
mask-image: linear-gradient(315deg, #000 0%, transparent 68%);
}
.orderFlow__scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ---------- Chips ---------- */
.orderFlow__chip {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 9cqw;
height: 9cqw;
border-radius: 2cqw;
background: #fff;
box-shadow: 0 1.4cqw 3cqw rgba(15, 43, 61, 0.12);
}
.orderFlow__chip svg {
width: 50%;
height: 50%;
}
.orderFlow__chip--check { left: 76%; top: 13.5%; }
.orderFlow__chip--chart { left: 74.5%; top: 39%; }
.orderFlow__chip--shield { left: 74.5%; top: 66%; }
.orderFlow__chip--clock { left: 26%; top: 76%; }
@container (max-width: 380px) {
.orderFlow__chip {
width: 12cqw;
height: 12cqw;
border-radius: 2.6cqw;
}
}
/* css/cta-band.css */
/* ==========================================================================
Closing CTA band — copy left, tilted product view bleeding off the right.
Sits directly above the footer. Dashboard mock is live markup sized in cqw,
same approach as the hero graphic.
========================================================================== */
.ctaBand {
box-sizing: border-box;
width: 100%;
max-width: var(--page-max);
margin-inline: auto;
padding-block: var(--section-space);
padding-inline: var(--page-gutter);
}
.ctaBand__inner {
position: relative;
width: 100%;
border-radius: 24px;
overflow: hidden;
background:
radial-gradient(120% 140% at 82% 30%, rgba(94, 195, 234, 0.16) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(115deg, #f7fafd 0%, #eef5fa 55%, #f4f9fc 100%);
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: center;
min-height: 320px;
}
/* Dot field, left edge — matches the mockup's texture. */
.ctaBand__inner::before {
content: "";
position: absolute;
left: 1.6%;
top: 12%;
width: 8%;
height: 76%;
background-image: radial-gradient(rgba(48, 141, 196, 0.32) 1.4px, transparent 1.5px);
background-size: 14px 18px;
opacity: 0.65;
pointer-events: none;
}
.ctaBand__blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.ctaBand__blob--a {
width: 14px;
height: 14px;
right: 5%;
top: 22%;
background: #a78bfa;
opacity: 0.55;
}
.ctaBand__blob--b {
width: 10px;
height: 10px;
left: 52%;
top: 55%;
background: #5ec3ea;
opacity: 0.5;
}
.ctaBand__blob--c {
width: 26px;
height: 26px;
left: 56%;
bottom: 16%;
background: rgba(94, 195, 234, 0.35);
filter: blur(3px);
}
/* ---------- Copy ---------- */
.ctaBand__copy {
position: relative;
z-index: 2;
padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5.5rem);
}
.ctaBand__eyebrow {
display: inline-block;
padding: 7px 14px;
border-radius: 8px;
background: rgba(94, 195, 234, 0.22);
color: var(--c-blue-800);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ctaBand__title {
margin: 1.1rem 0 0;
font-size: clamp(2rem, 3.4vw, 3.1rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--text);
}
.ctaBand__lead {
margin: 1rem 0 0;
max-width: 40ch;
color: var(--text-muted);
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.55;
}
.ctaBand__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(1rem, 2vw, 2rem);
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.ctaBand__primary {
display: inline-flex;
align-items: center;
gap: 0.9rem;
padding: 12px 12px 12px 26px;
border-radius: 999px;
background: #1668d6;
color: #fff;
font-size: 1.05rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 12px 24px rgba(22, 104, 214, 0.28);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ctaBand__primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(22, 104, 214, 0.34);
}
.ctaBand__primary span {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
}
.ctaBand__primary svg {
width: 15px;
height: 15px;
}
.ctaBand__secondary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #1f3d52;
font-size: 1.02rem;
font-weight: 700;
text-decoration: none;
transition: gap 0.25s ease, color 0.25s ease;
}
.ctaBand__secondary:hover {
gap: 0.8rem;
color: var(--c-blue-800);
}
.ctaBand__secondary svg {
width: 14px;
height: 14px;
}
/* ---------- Tilted dashboard ---------- */
.ctaBand__visual {
position: absolute;
right: -5%;
top: 20%;
width: 55%;
container-type: inline-size;
perspective: 1400px;
pointer-events: none;
}
.cd {
/* Scaled past the card's bottom edge so it bleeds, as in the mockup. */
transform: rotateY(-13deg) rotateX(4deg) rotate(-1.2deg) scale(1.1);
transform-origin: left top;
display: grid;
grid-template-columns: 26% 1fr;
border-radius: 2cqw;
background: #fff;
box-shadow: -1.5cqw 2.5cqw 6cqw rgba(15, 43, 61, 0.16);
overflow: hidden;
font-family: var(--font-main);
color: #12303f;
}
.cd__nav {
padding: 2.2cqw 1.6cqw;
border-right: 1px solid rgba(48, 141, 196, 0.14);
background: #fcfdfe;
}
.cd__brand {
display: flex;
align-items: center;
gap: 0.6cqw;
margin-bottom: 2.4cqw;
}
.cd__brand img {
width: 2.2cqw;
height: 2.2cqw;
}
.cd__brand b {
font-size: 1.3cqw;
font-weight: 800;
letter-spacing: 0.05em;
color: #1b71a3;
}
.cd__nav li {
display: flex;
align-items: center;
gap: 0.8cqw;
padding: 0.85cqw 0.9cqw;
border-radius: 0.7cqw;
font-size: 1.05cqw;
color: #5d6f7c;
list-style: none;
}
.cd__nav ul {
margin: 0;
padding: 0;
}
.cd__nav li i {
width: 1.3cqw;
height: 1.3cqw;
border-radius: 0.3cqw;
background: rgba(48, 141, 196, 0.28);
flex: 0 0 auto;
}
/* Mirrors the real app's sidebar: the current item is a navy pill, and
sections with children (Process, Administration) carry a chevron. */
.cd__nav li.is-active {
background: #0d2a52;
color: #fff;
font-weight: 700;
}
.cd__nav li.is-active i {
background: rgba(255, 255, 255, 0.85);
}
.cd__nav li.has-sub::after {
content: "";
width: 0.55cqw;
height: 0.55cqw;
margin-left: auto;
margin-right: 0.2cqw;
border-right: 0.16cqw solid currentColor;
border-bottom: 0.16cqw solid currentColor;
transform: translateY(-0.15cqw) rotate(45deg);
flex: 0 0 auto;
}
.cd__main {
padding: 2.2cqw 2.2cqw 0;
min-width: 0;
}
.cd__title {
margin: 0 0 1.6cqw;
font-size: 1.6cqw;
font-weight: 700;
}
.cd__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1cqw;
margin-bottom: 1.6cqw;
}
.cd__stat {
padding: 1.1cqw;
border: 1px solid rgba(48, 141, 196, 0.14);
border-radius: 0.9cqw;
}
.cd__stat i {
display: block;
font-style: normal;
font-size: 0.85cqw;
color: #8b9aa6;
}
.cd__stat b {
/* Digits keep one width while the number counts up (include.js). */
font-variant-numeric: tabular-nums;
display: block;
margin: 0.45cqw 0 0.4cqw;
font-size: 2cqw;
font-weight: 800;
}
.cd__stat u {
text-decoration: none;
font-size: 0.78cqw;
color: #22c55e;
font-weight: 700;
}
.cd__stat u s {
text-decoration: none;
color: #9aa8b3;
font-weight: 400;
margin-left: 0.3em;
}
.cd__chart {
padding: 1.2cqw;
border: 1px solid rgba(48, 141, 196, 0.14);
border-radius: 0.9cqw 0.9cqw 0 0;
border-bottom: none;
}
.cd__chart header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1cqw;
font-size: 1.05cqw;
font-weight: 700;
}
.cd__chart header span {
padding: 0.4cqw 0.8cqw;
border: 1px solid rgba(48, 141, 196, 0.18);
border-radius: 0.6cqw;
font-size: 0.8cqw;
font-weight: 500;
color: #7c8b98;
}
.cd__chart svg {
display: block;
width: 100%;
height: 15cqw;
}
.cd__chart path.line {
fill: none;
stroke: #1668d6;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.cd__chart path.area {
fill: url(#cdFill);
stroke: none;
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.ctaBand__inner {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.ctaBand__copy {
padding: clamp(2rem, 5vw, 3rem);
}
.ctaBand__visual {
position: relative;
right: auto;
top: auto;
width: 92%;
margin: 0 auto;
padding-bottom: clamp(2rem, 5vw, 3rem);
perspective: none;
}
.cd {
transform: none;
}
.ctaBand__inner::before {
display: none;
}
}
@media (max-width: 520px) {
/* Long label — keep the pill from becoming a two-line block. */
.ctaBand__eyebrow {
font-size: 0.68rem;
letter-spacing: 0.06em;
}
.ctaBand__actions {
gap: 0.9rem;
}
.ctaBand__primary {
width: 100%;
justify-content: space-between;
}
}
/* css/reveal.css */
/* ==========================================================================
Entrance animations.
Elements marked [data-reveal] start offset and transparent, then settle
when they scroll into view (reveal.js). Everything here is gated on
html.has-reveal, which reveal.js only adds when JavaScript runs AND the
visitor has not asked for reduced motion — so with JS off, or motion
turned down, the page renders fully visible with no animation at all.
Only opacity/transform are animated, so every reveal stays on the
compositor and never triggers layout.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
html.has-reveal [data-reveal] {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition:
opacity var(--reveal-duration, 720ms) cubic-bezier(.22, .68, .28, 1) var(--reveal-delay, 0ms),
transform var(--reveal-duration, 720ms) cubic-bezier(.22, .68, .28, 1) var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
/* ---------- Direction variants ---------- */
html.has-reveal [data-reveal="fade"] { transform: none; }
html.has-reveal [data-reveal="left"] { transform: translate3d(-26px, 0, 0); }
html.has-reveal [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
html.has-reveal [data-reveal="zoom"] { transform: scale(.94); }
/* A longer, softer entrance for the big decorative pieces. */
html.has-reveal [data-reveal="art"] {
transform: translate3d(0, 26px, 0) scale(.97);
--reveal-duration: 1000ms;
}
html.has-reveal [data-reveal].is-in {
opacity: 1;
transform: none;
will-change: auto;
}
/* ---------- Hero backdrop ---------- */
/* The arc field washes in on its own slower clock, behind the copy. */
html.has-reveal .heroBg {
opacity: 0;
transform: scale(1.04);
transition: opacity 1500ms ease-out, transform 2200ms cubic-bezier(.16, .8, .3, 1);
}
html.has-reveal .heroBg.is-in {
opacity: 1;
transform: none;
}
/* ---------- Drawn lines ---------- */
/* [data-draw] on an