/*
Theme Name: FusionCharts Theme
Theme URI: https://fusioncharts.com
Description: A modern Gutenberg-native WordPress theme featuring FusionCharts integration
Version: 1.0.0
Author: Your Name
Author URI: https://example.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fusioncharts-theme
Domain Path: /languages
Requires at least: 5.8
Requires PHP: 7.4
*/
/*
===========================================
ROOT VARIABLES - DESIGN TOKENS
=========================================== */
:root {
/* COLORS */
--color-primary-blue: #3971C0;
--color-primary-purple: #866dd0;
--color-medium-blue: #5E8DCF;
--color-teal-accent: #75C3BC;
--color-dark-footer: #071C21;
--color-light-beige: #F7F5F0;
--color-white: #FFFFFF;
--color-off-white: #FFFFFFF7;
--color-gray-light: #F5F5F5;
--color-text-dark: #000000;
--color-text-white: #FFFFFF;
--color-border-light: #FFFFFF4D;
--color-border-muted: #0000001A;
--color-theme-map-page: #66D6CC;
--color-theme-gannt-page: rgba(54, 59, 139, 1);
--color-theme-grid-page:#866dd0;
--color-theme-time-page: #FF9742;
--color-theme-time-page-secondary: #FFAE6B;
--color-theme-time-page-text-color:#000;
--color-theme-grid-page: #866dd0;
/* TYPOGRAPHY */
--font-family-primary: "GT Standard Trial-LMd", Helvetica;
/* FONT SIZES */
--font-size-xxs: 10px;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 18px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 30px;
--font-size-3xl: 54px;
--font-size-4xl: 62px;
--font-size-5xl: 76px;
/* FONT WEIGHTS */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* LINE HEIGHTS */
--line-height-tight: 1;
--line-height-normal: 1.3;
--line-height-relaxed: 1.4;
--line-height-loose: 1.5;
/* SPACING SCALE */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-lg-plus: 18px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
--space-3xl-plus: 64px;
--space-4xl: 72px;
--space-4xl-plus: 80px;
--space-5xl: 120px;
--space-6xl: 182px;
--space-7xl: 274px;
/* BORDER RADIUS */
--radius-sm: 3.5px;
--radius-md: 4px;
--radius-lg: 7px;
/* Z-INDEX SCALE */
--z-base: 0;
--z-dropdown: 1;
--z-overlay: 5;
--z-tooltip: 7;
/* LAYOUT WIDTHS */
--container-xs: 480px;
--container-sm: 768px;
--container-md: 1024px;
--container-md-plus: 1076px;
--container-lg: 1200px;
--container-xl: 1296px;
--container-2xl: 1440px;
--container-lr-padding: 40px;
/* ── SHARED LEGACY VARIABLES ──────────────────────────────────
Used by navbar, footer, and all page-specific stylesheets.
These map to the semantic tokens above so there is one
source of truth for each value.
────────────────────────────────────────────────────────────── */
/* Colours */
--dark-white: rgba(247, 245, 240, 1); /* = --color-light-beige */
--background: rgba(7, 28, 33, 1); /* = --color-dark-footer */
--blue: rgba(57, 113, 192, 1); /* = --color-primary-blue */
--medium-blue: rgba(94, 141, 207, 1); /* = --color-medium-blue */
--green: rgba(102, 214, 204, 1); /* = --color-theme-map-page */
--white: #FFFFFF;
--black: #000000;
--dark-blue: rgba(33, 38, 48, 1);
--purple: #866dd0;
--dark-white-2: rgba(244, 241, 232, 1);
--border: rgba(231, 225, 206, 1);
/* Cards shadow */
--cards-shadow:
0px 19px 43px rgba(0,0,0,0.08),
0px 76px 76px rgba(0,0,0,0.07),
0px 171px 103px rgba(0,0,0,0.04),
0px 304px 122px rgba(0,0,0,0.01);
/* Desktop typography — tags / nav text */
--desktop-tags-font-family: "GT Standard Trial", Helvetica;
--desktop-tags-font-weight: 400;
--desktop-tags-font-size: 14px;
--desktop-tags-letter-spacing: 0px;
--desktop-tags-line-height: 130%;
--desktop-tags-font-style: normal;
/* Desktop typography — headings */
--desktop-h1-font-family: "GT Standard Trial", Helvetica;
--desktop-h1-font-weight: 400;
--desktop-h1-font-size: 76px;
--desktop-h1-letter-spacing: -1.52px;
--desktop-h1-line-height: 100%;
--desktop-h1-font-style: normal;
--desktop-h2-font-family: "GT Standard Trial", Helvetica;
--desktop-h2-font-weight: 400;
--desktop-h2-font-size: 62px;
--desktop-h2-letter-spacing: -1.24px;
--desktop-h2-line-height: 100%;
--desktop-h2-font-style: normal;
--desktop-h3-font-family: "GT Standard Trial", Helvetica;
--desktop-h3-font-weight: 400;
--desktop-h3-font-size: 54px;
--desktop-h3-letter-spacing: -1.08px;
--desktop-h3-line-height: 100%;
--desktop-h3-font-style: normal;
--desktop-h4-font-family: "GT Standard Trial", Helvetica;
--desktop-h4-font-weight: 400;
--desktop-h4-font-size: 30px;
--desktop-h4-letter-spacing: -0.6px;
--desktop-h4-line-height: 100%;
--desktop-h4-font-style: normal;
--desktop-h5-font-family: "GT Standard Trial", Helvetica;
--desktop-h5-font-weight: 400;
--desktop-h5-font-size: 22px;
--desktop-h5-letter-spacing: -0.44px;
--desktop-h5-line-height: 120%;
--desktop-h5-font-style: normal;
/* Desktop typography — body */
--desktop-body-font-family: "GT Standard Trial", Helvetica;
--desktop-body-font-weight: 400;
--desktop-body-font-size: 18px;
--desktop-body-letter-spacing: 0px;
--desktop-body-line-height: 150%;
--desktop-body-font-style: normal;
--desktop-body-small-font-family: "GT Standard Trial", Helvetica;
--desktop-body-small-font-weight: 400;
--desktop-body-small-font-size: 16px;
--desktop-body-small-letter-spacing: 0px;
--desktop-body-small-line-height: 140%;
--desktop-body-small-font-style: normal;
}
/* ===========================================
RESET & BASE STYLES
=========================================== */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
color: var(--color-text-dark);
line-height: var(--line-height-relaxed);
background-color: var(--color-light-beige);
margin: 0;
padding: 0;
overflow-x: hidden; /* prevent horizontal scroll on all pages */
}
/* FSE site-blocks width constraint */
.wp-site-blocks {
/* max-width: 1440px;*/
margin: 0 auto;
}
.testimonial_clients, .cb-carousel-block, .made_with{
max-width: 1440px;
margin: 0 auto !important;
}
.custom-wp-block-template-part {
max-width: min(100%, var(--container-xl));
margin: 0 auto;
}
/* Remove border-right from last visible slick slide */
.testimonial-section .slick-initialized .slick-slide:last-child {
border-right: none !important;
}
/* Remove border-right from last visible slick slide */
.testimonial-section .slick-initialized .slick-slide:last-child {
border-right: none !important;
}
/* Add left spacing to first slide */
.testimonial-section .slick-initialized .slick-slide:first-child {
padding-left: 24px !important; /* adjust value as needed */
}
/* ===========================================
TYPOGRAPHY
=========================================== */
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
letter-spacing: -0.02em;
}
h1 {
font-size: var(--font-size-5xl);
}
h2 {
font-size: var(--font-size-4xl);
}
h3, .resource-hero .wp-block-post-title {
font-size: var(--font-size-3xl);
}
h4 {
font-size: var(--font-size-2xl);
}
h5 {
font-size: var(--font-size-xl);
}
h6 {
font-size: var(--font-size-lg);
}
p {
margin: 0;
font-size: var(--font-size-base);
line-height: var(--line-height-loose);
}
.text-center {
text-align: center;
}
.text-white {
color: var(--color-text-white);
}
.text-muted {
color: var(--color-border-muted);
}
.text-black {
color: var(--color-text-dark);
}
.text-blue {
color: var(--color-primary-blue);
}
.text-purple {
color: var(--color-primary-purple);
}
.text-teal {
color: var(--color-teal-accent);
}
.text-black-outline {
/* -webkit-text-stroke: 1px var(--color-text-dark);; border thickness + color */
}
/* ===========================================
BUTTONS
=========================================== */
.wp-block-button {
margin: 0;
}
.wp-block-button__link,
.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-family-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
padding: var(--space-md) var(--space-lg);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* Button: Primary (Teal) */
.wp-block-button--primary .wp-block-button__link,
.btn-primary {
background-color: var(--color-teal-accent);
color: var(--color-text-dark); border-radius: var(--radius-md);
}
.map-page .cta-section__btn-primary{
background-color: var(--color-text-dark) !important;
}
.map-page .cta-section__btn-primary .cta-section__btn-label{
color: var(--color-text-white) !important;
}
/* Button: Secondary (White) */
.wp-block-button--secondary .wp-block-button__link,
.btn-secondary {
background-color: var(--color-white) !important;
color: var(--color-text-dark) !important;
border: 1px solid var(--color-border-muted) !important; border-radius: var(--radius-md);
}
/* Button: Blue */
.btn-blue {
background-color: var(--color-primary-blue) !important;
color: var(--color-text-white);
}
/* ========================================
HERO BUTTON OVERRIDE
Reason: Override WP global-styles button color (#3971C0)
Scope: .fc-hero only
Added: 2026-03-01
======================================== */
.wp-block-button--secondary .wp-block-button__link .wp-block-button__link .wp-block-button__link ,
.btn-secondary .wp-block-button__link {
background-color: var(--color-white) !important;
color: var(--color-text-dark) !important;
padding: var(--space-sm) var(--space-md) !important;
}
wp-block-button--secondary .wp-block-button__link .wp-block-button__link .wp-block-button__link ,
.btn-primary .wp-block-button__link {
padding: var(--space-sm) var(--space-md) !important;
}
.btn-primary .wp-element-button:hover, .btn-primary.wp-block-button__link:hover {
background-color:var(--color-primary-blue) !important;;
}
/* ========================================
HERO BUTTON OVERRIDE ENDS HERE
Reason: Override WP global-styles button color (#3971C0)
Scope: .fc-hero only
Added: 2026-03-01
======================================== */
/* ===========================================
SECTIONS & LAYOUT
=========================================== */
.wp-block-group {
margin: 0;
padding: 0;
}
section,
.section {
width: 100%;
display: block;
}
/* Section backgrounds */
.bg-light {
background-color: var(--color-light-beige);
}
.bg-blue {
background-color: var(--color-primary-blue);
}
.bg-teal {
background-color: var(--color-teal-accent);
}
.bg-dark {
/* black color*/
background-color: var(--color-dark-footer);
}
/* Section padding */
.section-padding {
padding: var(--space-5xl) var(--space-4xl);
}
/* ===========================================
CONTAINER SECTIONS
=========================================== */
/* Header */
.site-header-wrapper {
background-color: var(--color-light-beige);
padding: var(--space-xl) var(--space-4xl);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: var(--z-dropdown);
min-height: 98px;
margin: 0 !important;
}
.header-logo-section {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
}
.site-logo {
width: 150px;
height: auto;
flex-shrink: 0;
}
.site-logo img {
display: block;
width: 100%;
height: auto;
}
.header-nav-section {
flex: 1;
display: flex;
gap: var(--space-2xl);
align-items: center;
justify-content: center;
padding: 0 var(--space-2xl);
}
.nav-item {
color: var(--color-text-dark);
font-size: var(--font-size-sm);
text-decoration: none;
transition: color 0.3s ease;
margin: 0;
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
}
.nav-item:hover {
color: var(--color-teal-accent);
}
.header-cta-section {
flex: 0 0 auto;
display: flex;
gap: var(--space-lg);
}
/* Footer */
.site-footer-wrapper {
background-color: var(--color-dark-footer);
color: var(--color-text-white);
padding: var(--space-5xl) var(--space-4xl);
width: 100%;
z-index: var(--z-base);
min-height: auto;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: var(--space-3xl);
}
.site-footer-wrapper.bg-dark {
background-color: var(--color-dark-footer);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3xl);
max-width: 1440px;
margin: 0 auto;
width: 100%;
}
.footer-section {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.footer-section h3 {
color: var(--color-text-white);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-md) 0;
}
.footer-link {
color: var(--color-text-white);
text-decoration: none;
font-size: var(--font-size-sm);
transition: color 0.3s ease;
margin: 0;
padding: var(--space-xs) 0;
}
.footer-link:hover {
color: var(--color-teal-accent);
}
.footer-bottom {
border-top: 1px solid var(--color-border-light);
margin-top: var(--space-3xl);
padding-top: var(--space-3xl);
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-white);
}
/* ===========================================
EXTRACTED FOOTER (ActualPage)
=========================================== */
.uich-7b97caea {
background-color: var(--color-dark-footer);
min-height: 820px;
margin: 0;
padding: 98px 0 318px;
overflow: hidden;
width: 100%;
position: relative;
z-index: 7;
}
.uich-75d7f93b {
min-height: 819.9999389648438px;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.uich-017f3462 {
background-color: var(--color-primary-blue);
min-height: 620.9999389648438px;
margin: 0;
padding: 31px 0 402px;
overflow: hidden;
z-index: 1;
}
.uich-f0549309 {
min-height: 188px;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 0;
}
.uich-f0da0b2c {
min-height: 134px;
margin: 0;
padding: 0;
width: 100%;
z-index: 0;
}
.uich-1060ba6c {
min-height: 102px;
margin: 0;
padding: 0;
width: 100%;
z-index: 1;
}
.uich-656df873 {
min-height: 134px;
margin: 0;
padding: 0;
width: 27.5%;
z-index: 1;
}
.uich-1302f9e1 {
min-height: 102px;
margin: 0;
padding: 0;
width: 100%;
z-index: 1;
}
.uich-b43d3ded {
background-color: var(--color-primary-blue);
min-height: 519.9999389648438px;
margin: 0;
padding: 46px 0 400px 35px;
overflow: hidden;
z-index: 2;
}
.uich-1814dc68 {
background-color: var(--color-primary-blue);
min-height: 819.9999389648438px;
margin: 0;
padding: 346px 0 343px 48px;
overflow: hidden;
z-index: 3;
}
.uich-2257fc65 {
min-height: 99px;
margin: 0;
padding: 0;
width: 67.95%;
z-index: 1;
}
.uich-1690f393 {
background-color: var(--color-white);
min-height: 33px;
margin: 0;
padding: 6px 13px;
border-radius: 4px;
width: 98.58%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.uich-5516f8e1 {
min-width: 97.59%;
height: 33px;
}
.uich-5516f8e1 div,
.uich-5516f8e1 div div,
.uich-5516f8e1 div a {
height: 100%;
place-content: center;
}
.uich-5516f8e1 .wp-block-button__link {
border-radius: 4px;
color: var(--color-text-white);
background-color: var(--color-text-dark);
padding: 6px 13px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
text-decoration: none;
text-transform: none;
}
.uich-0bf9a9b5,
.uich-a944818c,
.uich-23bbfdc1,
.uich-2411565f,
.uich-d66fe601,
.uich-e472d78a,
.uich-c225aa34,
.uich-7c5c0ec0,
.uich-6f5bff8f,
.uich-3ae08dfc,
.uich-a469a5d8,
.uich-b251c115,
.uich-775a2bc6 {
color: var(--color-text-white);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
text-decoration: none;
text-transform: none;
}
.uich-a469a5d8 {
margin: 0 0 56px;
width: 18.15%;
}
.uich-b251c115 {
width: 19.08%;
}
.uich-775a2bc6 {
width: 31.73%;
}
.uich-418f14b1 {
color: var(--color-text-white);
font-size: 22px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.2;
text-decoration: none;
text-transform: none;
}
.uich-2a2aaaa5 {
color: var(--color-dark-footer);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
text-decoration: none;
text-transform: none;
}
.uich-8d300f7d {
min-height: 151.93911743164062px;
margin: 0;
padding: 0;
overflow: hidden;
width: 96.74%;
position: absolute;
left: 22px;
top: 651px;
z-index: 6;
}
.uich-bfdf4148,
.uich-34320645,
.uich-565d4e32 {
min-height: 144.2830638885498px;
margin: 0;
padding: 0;
overflow: hidden;
}
.uich-bfdf4148 {
z-index: 0;
}
.uich-34320645,
.uich-565d4e32 {
z-index: 1;
}
figure.uich-01e5fdd3,
figure.uich-528a9a1c,
figure.uich-30ab5bfa,
figure.uich-a9e81cac,
figure.uich-ef9aeef2,
figure.uich-911f179c,
figure.uich-00cd52ea,
figure.uich-505035ee,
figure.uich-58880b16,
figure.uich-a217613c,
figure.uich-001ef914,
figure.uich-6575fe1e {
display: flex;
width: max-content;
}
figure.uich-01e5fdd3 img,
figure.uich-528a9a1c img,
figure.uich-30ab5bfa img,
figure.uich-a9e81cac img,
figure.uich-ef9aeef2 img {
width: 1440px;
height: 2px;
}
figure.uich-911f179c img {
width: 360px;
height: 318px;
}
figure.uich-00cd52ea img {
width: 1201.48px;
height: 151.94px;
}
figure.uich-a217613c {
margin: 14px 0 42px;
}
figure.uich-001ef914 {
margin: 56px 0 42px;
}
figure.uich-a217613c img {
width: 30.11px;
height: 87.82px;
}
figure.uich-001ef914 img {
width: 31.37px;
height: 45.17px;
}
figure.uich-505035ee img {
width: 30.11px;
height: 101.62px;
}
figure.uich-58880b16 img {
width: 30.11px;
height: 31.37px;
}
figure.uich-6575fe1e img {
width: 25px;
height: 25px;
object-fit: cover;
}
/* ===========================================
IMAGES
=========================================== */
img {
max-width: 100%;
height: auto;
display: block;
}
.wp-block-image {
margin: 0;
}
.wp-block-image img {
display: flex;
width: 100%;
}
/* ===========================================
CONTENT SECTIONS
=========================================== */
/* Hero / Banner */
.hero-section {
background-color: var(--color-primary-blue);
color: var(--color-text-white);
padding: var(--space-5xl) var(--space-7xl);
text-align: center;
}
.hero-title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-lg);
line-height: var(--line-height-tight);
}
.hero-subtitle {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
margin-bottom: var(--space-2xl);
opacity: 0.95;
line-height: var(--line-height-loose);
}
/* Features Grid */
.features-section {
padding: var(--space-5xl) var(--space-7xl);
/*background-color: var(--color-primary-blue);*/
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
max-width: 1440px;
margin: 0 auto;
}
.feature-card {
background-color: var(--color-off-white);
padding: var(--space-lg-plus);
border-radius: var(--radius-md);
text-align: left;
margin-top: var(--space-2xl) !important;
}
.feature-number {
color: var(--color-teal-accent);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-md);
}
.feature-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
color: var(--color-text-dark);
margin-bottom: var(--space-md);
}
.feature-description {
font-size: var(--font-size-base);
color: var(--color-text-dark);
line-height: var(--line-height-relaxed);
}
/* Use Cases Grid */
.use-cases-section {
padding: var(--space-5xl) var(--space-6xl);
background-color: var(--color-light-beige);
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-2xl);
max-width: 1440px;
margin: 0 auto;
}
.use-case-card {
background-color: var(--color-white);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-md);
padding: var(--space-2xl);
text-align: left;
}
.use-case-icon {
width: 32px;
height: 32px;
margin-bottom: var(--space-lg);
}
.use-case-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
color: var(--color-text-dark);
margin-bottom: var(--space-md);
}
.use-case-description {
font-size: var(--font-size-base);
color: var(--color-text-dark);
line-height: var(--line-height-relaxed);
}
/* Testimonials */
.testimonial_clients{
padding: var(--space-4xl-plus) 0px !important;
}
.testimonials-section {
padding: var(--space-5xl) 0;
background-color: var(--color-light-beige);
}
.testimonials-heading{
padding:14px 0px !important;
border-top: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted);
color:var(--color-text-dark);
font-size: 14px;;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-4xl);
}
.testimonial-card {
background-color: var(--color-white);
border: 1px solid var(--color-border-muted);
padding: var(--space-2xl);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.testimonial-quote {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
color: var(--color-text-dark);
margin-bottom: var(--space-lg);
line-height: var(--line-height-tight);
}
.testimonial-author {
font-size: var(--font-size-sm);
color: var(--color-text-dark);
font-weight: var(--font-weight-medium);
}
.testimonial-rating {
width: 88px;
height: 15px;
margin-bottom: var(--space-md);
}
/* Make testimonial cards equal height */
.testimonial-section {
height: 100%;
display: flex;
flex-direction: column;
}
.testimonial-section .uagb-tm__company{
display: none;
}
.testimonial-section .uagb-tm__image-content{
display: block;
}
.testimonial-section .uagb-tm__desc{
height: clamp(180px, 22vw, 170px);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 23px;
}
.testimonial-section .uagb-testimonial__wrap{
}
#testimonial_card{
text-align: center;
margin: 0px auto; padding-top: 0px;
}
.testimonial-section .slick-initialized .slick-slide{
flex-grow: 1;
}
/* Chart Examples Grid */
.examples-section {
padding: var(--space-5xl) var(--space-4xl);
background-color: var(--color-light-beige);
}
.examples-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-md);
max-width: 1440px;
margin: 0 auto;
}
.example-card {
background-color: var(--color-gray-light);
border-radius: var(--radius-sm);
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
}
.example-image {
width: 100%;
height: 200px;
object-fit: cover;
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
}
.example-label {
padding: var(--space-md);
font-size: var(--font-size-xs);
color: var(--color-text-dark);
background-color: var(--color-white);
}
/* ===========================================
UTILITY CLASSES
=========================================== */
.highlight {
color: var(--color-teal-accent);
}
.text-bold {
font-weight: var(--font-weight-bold);
}
.spacing-section {
margin-top: var(--space-5xl);
margin-bottom: var(--space-5xl);
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-4xl);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
/* ===========================================
RESPONSIVE DESIGN
=========================================== */
@media (max-width: 768px) {
:root {
--font-size-5xl: 48px;
--font-size-4xl: 42px;
--font-size-3xl: 32px;
--space-7xl: 36px;
--space-6xl: 24px;
--space-4xl: 32px;
}
body {
font-size: var(--font-size-sm);
}
/* Header responsive */
.site-header-wrapper {
flex-direction: column;
padding: var(--space-lg) var(--space-xl);
gap: var(--space-lg);
}
.header-nav-section {
flex-direction: column;
gap: var(--space-lg);
width: 100%;
order: 3;
}
.header-logo-section {
order: 1;
width: 100%;
}
.header-cta-section {
order: 2;
width: 100%;
justify-content: center;
}
/* Section padding */
.hero-section,
.features-section,
.use-cases-section {
padding: var(--space-3xl) var(--space-xl);
}
/* Grids */
.features-grid,
.use-cases-grid,
.testimonials-grid,
.examples-grid,
.footer-content {
grid-template-columns: 1fr;
}
/* Footer */
.site-footer-wrapper {
padding: var(--space-3xl) var(--space-xl);
}
}
@media (max-width: 480px) {
:root {
--font-size-5xl-plus: 42px;
--font-size-5xl: 36px;
--font-size-4xl: 32px;
--font-size-3xl: 28px;
--font-size-2xl: 20px;
--space-7xl: 16px;
--space-6xl: 16px;
--space-4xl: 16px;
}
body {
font-size: var(--font-size-xs);
}
h1 {
font-size: var(--font-size-5xl-plus);
}
h2 {
font-size: var(--font-size-5xl);
}
h3 {
font-size: var(--font-size-4xl);
}
.site-header-wrapper {
padding: var(--space-md) var(--space-lg);
min-height: auto;
}
.header-nav-section {
display: none;
}
.site-logo {
width: 120px;
}
.hero-section,
.features-section,
.use-cases-section {
padding: var(--space-2xl) var(--space-lg);
}
.hero-title {
font-size: var(--font-size-3xl);
}
.container {
padding: 0 var(--space-lg);
}
.site-footer-wrapper {
padding: var(--space-2xl) var(--space-lg);
}
}
/* ===========================================
ACCESSIBILITY
=========================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid var(--color-primary-blue);
outline-offset: 2px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ===========================================
PRINT STYLES
=========================================== */
@media print {
body {
background-color: white;
}
a {
text-decoration: underline;
}
a::after {
content: " (" attr(href) ")";
}
}
/* Mamta done */
.hero-chart-slider {
border-radius:10px ;
}
.btn-hover:hover {
background-color: #062A2E;
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.cta_why_fc{
padding-bottom: 80px !important;
}
.fc-hero {
padding: 189px 72px 112px 72px !important;
background: linear-gradient(135deg, #3b0066 0%, #0e3d91 60%, #1fb6a6 100%);
color: white;
}
@media (max-width: 768px) {
.fc-hero {
padding: 132px 16px 32px 16px !important;
}
}
@media (max-width: 768px) {
/* Stack vertically */
.fc-hero {
flex-direction: column;
}
/* Slider container (uagb-block-ad8fc9a6) */
.fc-hero .uagb-block-ad8fc9a6 {
order: 1;
width: 100%;
}
/* Text container (uagb-block-2d86474a) */
.fc-hero .uagb-block-2d86474a {
order: 2;
width: 100%;
}
}
@media (max-width: 768px) {
.fc-hero .uagb-container-inner-blocks-wrap {
display: flex;
flex-direction: column;
}
/* Text block first */
.fc-hero .uagb-block-2d86474a {
order: 1;
}
/* Chart slider goes to bottom */
.fc-hero .hero-chart-slider-section {
order: 2;
}
}
.hero-chart-slider {
height: 527px;
}
@media (max-width: 1024px) {
.hero-chart-slider {
height: 380px;
}
}
@media (max-width: 768px) {
.hero-chart-slider {
height: 300px;
}
}
/*.fc-hero h2{
font-size:48px;
font-weight:700;
line-height:1.2;
}*/
.made_with{
padding-bottom: 42px !important;
}
.made_with_desc_heading{
padding-bottom: 42px;
}
/* allow chart interaction inside swiper */
.hero-chart-slider .swiper-slide {
pointer-events: auto;
}
.hero-chart-slider .swiper-slide > div {
width: 100%;
height: 100%;
}
/* card by mamta*/
.feature-card > p:first-child{
color: #071C21;
font-size: 54px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
text-decoration: none;
text-transform: none;
}
.feature-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 300px; /* adjust as needed */
}
.feature-card .wp-block-group p{
color: #071C21;
font-size: 30px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
text-decoration: none;
text-transform: none;
}
.feature-card > p:last-child {
font-size: 16px;
line-height: 1.6; /* adjust */
}
.license-card{
border-color: #FFFFFF4D;
border-width: 1px;
}
.green
{
color: #75C3BC;
}
.license-card{
background-color: #FFFFFF;
padding: var( --space-2xl);
text-align: left;
}
.license-card-heading{
color: #071C21;
font-size: 22px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
text-decoration: none;
text-transform: none;
}
.license-card-description{
font-size: var(--space-lg);
}
.license-home {
max-width: var(--container-md-plus);
margin: 0 auto;
padding: var(--space-5xl) 0px !important;
}
.license-home .wp-block-columns{
margin-bottom: 0px !important;
}
/* Mamta done CTA ZIGZAG*/
.CTA, .whitepaper-CTA {
padding: 0px 72px;
display: flex;
justify-content: center;
}
.CTA .frame-21{
background: #75c3bc;
}
.whitepaper-CTA .frame-21{
background: var(--color-primary-blue);
}
.frame-21 {
position: relative;
width: 100%;
max-width: 1440px;
aspect-ratio: 1440 / 450;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.rectangle-5 {
position: absolute;
inset: 0;
width: 100%; /* ✅ responsive */
height: 100%;
margin: 0; /* ❌ remove negative margin */
background: #75c3bc;
}
.whitepaper-CTA .rectangle-5 {
background-color: var(--color-primary-blue);
}
/* ── Text content — always on top, always on teal ── */
.frame-22 {
position: absolute;
z-index: 10; /* well above bars */
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(10px, 1.5vw, 16px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
/* Teal bg patch so even if a bar somehow reaches here, text bg is teal
background: #75c3bc; */
padding: 20px 24px;
border-radius: 4px;
width: 700px;
max-width: 70%;
}
.whitepaper-CTA .frame-22{
left: 50%; color: white;
width: 100%;
top:50%
}
/* ── White bars — z-index BELOW content ── */
.group-4 {
position: absolute;
inset: 0;
z-index: 1; /* bars sit behind the z-index:10 text */
pointer-events: none;
}
.group-4 > div {
position: absolute;
background: #fff;
}
.whitepaper-CTA .group-4 > div{
background: var( --color-medium-blue);
}
/* Exact Figma % coords (card 1440×450, group offset top:105 left:-71) */
.rectangle-7 {left: 10.97%;
top: 79.2%;
width: 23.06%;
height: 138.7%; }
.rectangle-6 {left: -6.86%;
top: 28.9%;
width: 19.93%;
height: 179.6%; }
.rectangle-8 { left: 28.89%;
top: 91.7%;
width: 36.85%;
height: 121.3%; }
.rectangle-9 {left: 65.31%;
top: 77.6%;
width: 27.13%;
height: 146.4%; }
.rectangle-10 {left: 80.36%;
top: 60.2%;
width: 19.93%;
height: 135.1%; }
.whitepaper-CTA .rectangle-7 {
top: 24%; width: 23.06%;
}
.whitepaper-CTA .rectangle-6
{
top: 14.9%;
width: 19.93%;
}
.whitepaper-CTA .rectangle-9{
top: 19.6%;
width: 16.13%; left: 56%;
}
.whitepaper-CTA .rectangle-8{
top: 29.7%;
width: 27.85%;
}
.whitepaper-CTA .rectangle-10 {
left: 68.36%;
top: -19.8%;
width: 31.93%;
height: 20%;
}
@media (max-width: 700px) {
.frame-21 {
aspect-ratio: unset;
height: auto;
padding-bottom: 140px;
}
.frame-22 {
position: relative;
top: unset;
left: unset;
transform: none;
width: 100%;
max-width: 100%;
padding: 36px 24px 24px;
gap: 14px;
background: transparent;
}
.group-4 > div { top: unset; }
.rectangle-7 { left: 0%; bottom: 0; top: unset; width: 28%; height: 110px; }
.rectangle-6 { display: none; }
.rectangle-8 { left: 26%; bottom: 0; top: unset; width: 30%; height: 80px; }
.rectangle-9 { display: none; }
.rectangle-10 { left: 68%; bottom: 0; top: unset; width: 32%; height: 95px; }
.CTA {
padding: 0px;;
}
}
/* Mamta done CTA ZIGZAG*/
.testimonial-section .slick-initialized .slick-slide {
display: block;
border-right:1px solid var(--color-border-muted) ;
}
.testimonial-section .slick-track{
border-bottom:1px solid var(--color-border-muted) ;
}
.testimonial-section .slick-dots{
display: none !important;
}
/* commented by Mamta
.white_button{
background: white;
color: black;
border-radius: 5px;
}
.white_button a{
background: white;
color: black;
border-radius: 5px;
}
*/
/* Desktop */
@media (min-width: 1025px) {
.parallax_cards .subheading {
width: 41% !important
}
}
/* Tablet & Mobile */
@media (max-width: 1024px) {
.parallax_cards .subheading {
width: 100%;
}
}
.soft-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.parallax_cards_icon{
padding: 4px 0px;
}
.card-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 325px; transition: all 0.3s ease;
}
.card-flex:hover {
transform: rotateY(8deg) rotateX(-4deg) scale(1.03);
box-shadow: -5px 4px 12px rgba(0, 255, 200, 0.2);
border-color: rgba(0, 255, 200, 0.4);
}
.time-page .card-flex:hover, .time-page .integration-card:hover {
box-shadow: -5px 4px 12px rgba(200, 70, 10, 0.15) !important
}
/* Sticky Cards */
.card-sticky-container {
background: #F2F1ED;
padding: 180px 0;
position: relative;
}
/* We use a fixed height so the scroll space works */
.sticky-wrapper {
position: relative;
height: calc(100vh * 3); /* 3 cards → 3 screens tall */
}
/* Make cards sticky inside wrapper */
/* ===== Sticky Container ===== */
.card-sticky-container {
background: #F2F1ED;
padding: 150px 0;
overflow: visible;
}
/* Wrapper controls scroll height */
.sticky-wrapper {
position: relative;
height: 300vh; /* 3 cards = 300vh */
}
/* ===== Base Card ===== */
.sticky-wrapper .card {
position: sticky;
top: 120px;
border-radius: 36px;
padding: 100px;
background: #ffffff;
box-shadow: 0 40px 100px rgba(0,0,0,0.18);
opacity: 0;
transform: translateY(60px);
transition: all 0.6s ease;
}
/* ===== Correct Z-Index Order ===== */
/* LAST card should be highest */
/*.sticky-wrapper .card:nth-child(1) {
z-index: 1;
}
.sticky-wrapper .card:nth-child(2) {
z-index: 2;
}
.sticky-wrapper .card:nth-child(3) {
z-index: 3;
}
/* ===== Active Animation ===== */
/*.sticky-wrapper .card.active {
opacity: 1;
transform: translateY(0);
}
/* Sticky Cards */
.hover-card {
transition: all 0.4s ease;
}
.hover-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
/* */
/* ===== PARALLAX SECTION effects ===== */
.parallax_cards {
position: relative;
padding: 100px 0;
background: linear-gradient(135deg, #3f6db5, #2c4d8c);
overflow: hidden;
}
/* Better parallax effect */
.parallax_cards::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #3f6db5, #2c4d8c);
transform: translateZ(0);
background-attachment: fixed;
z-index: -1;
}
.parallax_cards {
background-attachment: fixed;
}
.parallax_cards-wrapper-div{
padding: 0px 19px !important;
gap: 16px !important;
}
/* ===== TYPEWRITER H2 ===== */
/* Subtitle fade */
.parallax_cards > p {
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1s ease forwards;
animation-delay: 2.5s;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== CARD INITIAL STATE ===== */
.feature-card {
opacity: 0;
transform: translateY(60px) scale(0.9);
transition: all 0.8s cubic-bezier(.2,.65,.3,1);
will-change: transform, opacity;
}
/* When visible */
.feature-card.show {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Hover effect */
.feature-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 25px 45px rgba(0,0,0,0.15);
}
.logos-subheading{
font-size: 14px;
line-height: 16px;
}
.no-btn{
color: var(--color-text-dark) !important;
}
/**** ****/
.is-layout-flow > * {
margin-block-start: 0;
}
.top_header {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 10;
background: transparent !important;
text-align: center;
}
.top_header .header_container {
display: flex;
align-items: center;
justify-content: space-between;
}
.top_header .wp-block-column {
flex: unset !important;
width: auto !important;
}
.header_navigation {
display: flex;
justify-content: center;
align-items: center;
background: white;
}
.header_navigation nav {
display: flex;
justify-content: center;
gap: 32px;
}
.top_header .wp-block-button__link {
border-radius: 8px;
padding: 10px 18px;
}
/* slider */
/* container */
/* MAIN WRAPPER */
.card-stack1{
width:100%;
height:460px;
position:relative;
}
/* card wrapper (changed from UL) */
.card-list{
position:relative;
height:100%;
}
/* cards */
.cardstack:first-child {
position: relative;
}
.cardstack{
position:absolute;
left:0;
right:0;
margin:auto;
border-radius:16px;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:bold;
cursor:pointer;
box-shadow:0 12px 30px rgba(0,0,0,.25);
transition:all .35s ease;
}
/* buttons */
.btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:#fff;
border-radius:50%;
cursor:pointer;
box-shadow:0 3px 10px rgba(0,0,0,.2);
user-select:none;
}
.prev{ left:-60px; }
.next{ right:-60px; }
/* Made with sldier */
/* Main slider wrapper */
.cb-wrapper .swiper-wrapper {
align-items: center;
}
/* made sith section */
/* Each slide */
/* Resources details page*/
.resource-hero{
padding:var(--space-3xl-plus) 0px;
background-color: var(--color-light-beige) ;
}
.resource-detail{
padding: 100px 72px 64px 72px;
}
.resource-hero-image-wrapper{
padding: var(--space-sm);
border-radius: var(--space-sm);
background-color: #F8FCFF;
}
.resource-details-wrapper .resource-detail .description p {
margin-bottom:var(--space-lg);
line-height: var(--line-height-normal);
font-size: var(--font-size-lg);
}
.resource-hero .res-category{
font-size: var(--font-size-sm) !important;
}
.resource-details-wrapper .resource-detail .description h4 {
margin-bottom:var(--space-lg);
}
/* Left hero column */
.resource-hero-heading-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.resource-main-container{
padding-top: var(--space-3xl) !important;
}
/* Category */
.resource-hero-heading-wrapper p {
margin-bottom: 12px;
font-size: var(--font-size-xxs) !important;
}
/* Heading */
.resource-hero-heading-wrapper .uagb-advanced-heading {
margin-bottom: 20px;
}
/* Date + read time container */
/* Make the column take full height */
.resource-hero-heading-wrapper{
display:flex;
flex-direction:column;
}
.resource-hero-heading-wrapper .wp-block-uagb-container:last-child{
margin-top:auto; margin-bottom: 0px;
}
.resource-hero-dt-wrapper{
margin-bottom: 0px !important;
font-size: var(--font-size-xxs) !important;
}
.resource-hero-dt-wrapper p {
margin-bottom: 0px !important; text-align: right;
}
/* resource-related-products */
.resource-related-products{
padding: var(--space-4xl) 0px;
margin-top: 20px;;
}
.is-layout-grid{
gap: var(--space-xs) !important;
}
.wp-block-post-title{
padding: 0px var(--font-size-sm) !important;
}
.wp-block-post-excerpt{
padding: 0px var(--font-size-sm) !important;
margin: 0px !important;
}
.wp-block-separator{
display: none;
}
.wp-block-post-date{
width: 100%; padding: 0px var(--font-size-sm) !important;
}
.type-resources{
position: relative;
align-self: start;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 6px 6px 16px;
background-color: #f8fcff;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--cards-shadow);
}
.wp-block-post-template li.wp-block-post {
display: flex;
flex-direction: column;
height: 100%;
}
.black-button, .black-button a{
background-color: black !important;
color:var(--color-white);
border-radius: var(--radius-sm);
padding: var(--space-sm);
font-size: var(--font-size-sm);
border: none;
}
.resources_lanidng_hero{
background-color: var(--color-light-beige) ;
padding: var(--space-3xl-plus) 0px;
}
/* ============================================
CTA Section (template-parts/cta-section.php)
============================================ */
.cta-section {
width: 100%;
/* padding: 40px 0; vertical only — horizontal gutter lives on __inner */
}
.cta-section__inner {
display: flex;
flex-direction: column;
min-height: 400px;
align-items: center;
justify-content: center;
gap: 20px;
padding: 76px 221px;
position: relative;
/* width + gutter controlled here — one place to change */
/* width: calc(100% - (2 * var(--space-4xl))); /* gutters: 72px each side */
max-width: var(--container-lg); /* cap: 1200px */
margin: 0 auto;
background-color: var(--blue);
border-radius: 3.65px;
overflow: hidden;
}
.map-page .cta-section__inner {
background-color: var(--green) !important;
}
.cta-section__heading {
position: relative;
z-index: 2;
width: max-content;
max-width: 100%;
margin-top: -0.91px;
font-family: var(--desktop-h2-font-family);
font-weight: var(--desktop-h2-font-weight);
color: transparent;
font-size: var(--desktop-h2-font-size);
text-align: center;
letter-spacing: var(--desktop-h2-letter-spacing);
line-height: var(--desktop-h2-line-height);
font-style: var(--desktop-h2-font-style);
}
.cta-section__heading-text {
color: #ffffff;
letter-spacing: var(--desktop-h2-letter-spacing);
font-family: var(--desktop-h2-font-family);
font-style: var(--desktop-h2-font-style);
font-weight: var(--desktop-h2-font-weight);
line-height: var(--desktop-h2-line-height);
font-size: var(--desktop-h2-font-size);
}
.map-page .cta-section__heading-text {
color: #000000 !important;
}
.cta-section__heading-highlight {
color: #071c21;
letter-spacing: var(--desktop-h2-letter-spacing);
font-family: var(--desktop-h2-font-family);
font-style: var(--desktop-h2-font-style);
font-weight: var(--desktop-h2-font-weight);
line-height: var(--desktop-h2-line-height);
font-size: var(--desktop-h2-font-size);
}
.cta-section__subheading {
position: relative;
z-index: 2;
width: 635px;
font-family: var(--desktop-body-font-family);
font-weight: var(--desktop-body-font-weight);
color: #ffffff;
font-size: var(--desktop-body-font-size);
text-align: center;
letter-spacing: var(--desktop-body-letter-spacing);
line-height: var(--desktop-body-line-height);
font-style: var(--desktop-body-font-style);
}
.cta-section__subheading {
color: #000000 !important;
}
.cta-section__btn {
all: unset;
box-sizing: border-box;
display: inline-flex;
position: relative;
z-index: 2;
cursor: pointer;
background-color: var(--white);
height: 33px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 13px;
border-radius: 4px;
}
.cta-section__btn-label {
position: relative;
width: fit-content;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #000000;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
font-style: var(--desktop-tags-font-style);
}
.cta-section__deco-bars {
position: absolute;
top: -644px;
left: -30px;
width: 1436px;
height: 1606px;
pointer-events: none;
z-index: 1;
}
.cta-section__bar-1 {
position: absolute;
top: 982px;
left: 286px;
width: 288px;
height: 624px;
background-color: var(--medium-blue);
}
.cta-section__bar-2 {
position: absolute;
top: 878px;
left: 1px;
width: 287px;
height: 728px;
background-color: var(--medium-blue);
}
.cta-section__bar-3 {
position: absolute;
top: 1036px;
left: 574px;
width: 287px;
height: 546px;
background-color: var(--medium-blue);
}
.cta-section__bar-4 {
position: absolute;
top: 947px;
left: 861px;
width: 288px;
height: 659px;
background-color: var(--medium-blue);
}
.cta-section__bar-5 {
position: absolute;
top: 1px;
left: 1059px;
width: 287px;
height: 707px;
background-color: var(--medium-blue);
}
.map-page.charting-page .cta-section__bar-1 , .charting-page.map-page .cta-section__bar-2, .charting-page.map-page .cta-section__bar-3, .charting-page.map-page .cta-section__bar-4, .charting-page.map-page .cta-section__bar-5 {
background-color: #8EE1D9 !important;
}
/* ============================================
End CTA Section
============================================ */
/* ===== OUTER SECTION ===== */
.capabilities-showcase-section {
padding: 80px 0px !important;
width: 100% !important;
gap:8px !important
}
/* ===== INNER CARD ===== */
.capabilities-showcase-card {
border-radius: 4px !important;
box-shadow:
42px 176px 72px rgba(0, 0, 0, 0.01),
23px 99px 61px rgba(0, 0, 0, 0.02),
10px 44px 45px rgba(0, 0, 0, 0.04),
3px 11px 25px rgba(0, 0, 0, 0.04) !important;
overflow: visible !important;
background-color: var(--color-white) !important;
}
.capabilities-showcase-card > .uagb-container-inner-blocks-wrap {
width: 100% !important;
padding: 0 !important;
}
/* ===== COLUMNS WRAPPER ===== */
.capabilities-showcase-card .wp-block-columns {
align-items: stretch !important;
}
/* ===== LEFT — CONTENT ===== */
.capabilities-showcase-card .wp-block-columns .wp-block-column:first-child {
padding: 0px 24px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 8px !important;
}
/* ===== RIGHT — VISUAL ===== */
.capabilities-showcase-card .wp-block-columns .wp-block-column:last-child {
}
/* Remove white background from chart wrapper */
.capabilities-showcase-card .fc-block-wrapper {
background-color: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* ===== TABLET ===== */
@media (max-width: 1024px) {
.capabilities-showcase-section {
padding: 60px 20px !important;
}
.capabilities-showcase-card .wp-block-columns .wp-block-column:last-child {
margin-top: -16px !important;
margin-bottom: -16px !important;
margin-right: -16px !important;
}
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
.capabilities-showcase-section {
padding: 40px 16px !important;
}
.capabilities-showcase-card .wp-block-columns {
flex-direction: column !important;
}
.capabilities-showcase-card .wp-block-columns .wp-block-column:first-child {
flex-basis: 100% !important;
padding: 32px 24px !important;
}
.capabilities-showcase-card .wp-block-columns .wp-block-column:last-child {
flex-basis: 100% !important;
margin: 0 !important;
border-radius: 0 0 4px 4px !important;
padding: 32px !important;
min-height: 300px !important;
}
}
/* ── Override root container ─────────────────────────── */
.chart-cards-full {
width: 100%;
max-width: 1440px;
height: auto !important;
min-height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 72px;
box-sizing: border-box;
background-color: var(--dark-white, #f5f5f5);
gap: 0;
}
/* ── Card track ──────────────────────────────────────── */
.card-stack-wrap { position: relative; width: 100%; max-width: 1296px; }
.card-stack {
position: relative;
width: 100%;
height: 450px;
overflow: visible;
margin-top: 32px; /* room for ghost strips peeking above */
margin-bottom: 40px;
}
/* Ghost strip 1 — peeks 14px above the active card */
/* z-index 2: behind active (4) but visible above it */
.card-stack::before {
content: '';
position: absolute;
top: -14px; /* negative = above the active card */
left: 8px; right: 8px;
height: 100%;
background: var(--ghost-1, #aacbc8);
border-radius: 3.66px;
z-index: 2;
pointer-events: none;
transition: background 0.5s ease;
}
/* Ghost strip 2 — peeks 26px above, narrower */
.card-stack::after {
content: '';
position: absolute;
top: -26px;
left: 16px; right: 16px;
height: 100%;
background: var(--ghost-2, #888);
border-radius: 3.66px;
z-index: 1;
pointer-events: none;
transition: background 0.5s ease;
}
/* ── Card slots ──────────────────────────────────────── */
.card-slot {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 3.66px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
box-sizing: border-box;
opacity: 0;
transform: translateY(-14px) scale(0.97); /* starts from behind/above */
pointer-events: none;
z-index: 3;
transition: opacity 0.35s ease, transform 0.38s cubic-bezier(0.22,1,0.36,1);
}
.card-slot[data-stack="0"] {
opacity: 1;
transform: translateY(0) scale(1);
z-index: 4;
pointer-events: all;
box-shadow: 0 10px 40px rgba(0,0,0,0.18);
cursor: pointer;
}
/* ── Animations ──────────────────────────────────────── */
@keyframes throwToBack {
0% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
40% { transform: scale(0.91) translateY(-30px) rotate(1.8deg); opacity: 0.5; }
100% { transform: scale(0.86) translateY(-50px) rotate(2.5deg); opacity: 0; }
}
@keyframes slideFromBack {
0% { transform: scale(0.86) translateY(-50px) rotate(-2.5deg); opacity: 0; }
100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}
.card-slot.is-exiting {
animation: throwToBack 0.38s cubic-bezier(0.4,0,0.6,1) forwards;
z-index: 5 !important;
pointer-events: none !important;
transition: none !important;
}
.card-slot.is-entering-back {
animation: slideFromBack 0.38s cubic-bezier(0.22,1,0.36,1) forwards;
z-index: 4 !important;
pointer-events: none !important;
transition: none !important;
}
/* ── Navigation ──────────────────────────────────────── */
.card-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.card-nav-btn {
all: unset;
cursor: pointer;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.09);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #333;
transition: background 0.2s;
line-height: 1;
}
.card-nav-btn:hover { background: rgba(0,0,0,0.18); }
.card-dots { display: flex; gap: 6px; align-items: center; }
.card-dot {
all: unset;
cursor: pointer;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(0,0,0,0.22);
transition: background 0.2s, width 0.2s;
display: block;
}
.card-dot.is-active { background: rgba(0,0,0,0.6); width: 22px; border-radius: 4px; }
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
.chart-cards-full {
padding: 40px 16px;
min-height: 100vh;
justify-content: flex-start;
}
.card-stack {
height: 560px;
margin-top: 28px;
margin-bottom: 32px;
}
/* Vertical layout: image on top, text below */
.card-slot {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
overflow: hidden;
}
/* ── Image panels — top, fixed height ────────────── */
.card-slot .card-charts-image-panel,
.card-slot .raphael-paper-wrapper,
.card-slot .card-grids-image-panel {
order: -1;
width: 100% !important;
height: 200px !important;
flex-shrink: 0;
border-radius: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* card-gantt-image is an ![]()
tag */
.card-slot .card-gantt-image {
order: -1;
width: 100% !important;
height: 200px !important;
flex-shrink: 0;
object-fit: cover;
border-radius: 0;
margin: 0 !important;
}
/* raphael paper inside group — keep centred */
.card-slot .raphael-paper {
top: auto; left: auto;
width: 100%; height: 100%;
}
/* images inside card-grids-image-panel */
.card-slot .image,
.card-slot .image-2 {
position: absolute;
}
/* ── Content panels — fill remaining space ────────── */
.card-slot .card-charts-content,
.card-slot .card-maps-content,
.card-slot .card-gantt-content,
.card-slot .card-grids-content {
width: 100% !important;
padding: 16px !important;
gap: 12px !important;
overflow: hidden;
flex: 1;
box-sizing: border-box;
}
/* Title text */
.card-slot .text-wrapper,
.card-slot .p,
.card-slot .link-text-6,
.card-slot .link-text-7 {
font-size: 18px !important;
line-height: 1.3 !important;
height: auto !important;
}
/* Bullet lists — limit to 3 lines, scroll hidden */
.card-slot .flexcontainer,
.card-slot .flexcontainer-2,
.card-slot .flexcontainer-3,
.card-slot .flexcontainer-4 {
width: 100% !important;
height: auto !important;
max-height: 120px;
overflow: hidden;
}
/* Hide extra bullets on mobile */
.card-slot .flexcontainer .text:nth-child(n+4),
.card-slot .flexcontainer-2 .text:nth-child(n+4),
.card-slot .flexcontainer-3 .span-wrapper:nth-child(n+4),
.card-slot .flexcontainer-4 .span-wrapper:nth-child(n+4) {
display: none;
}
}
@media (max-width: 480px) {
.card-stack { height: 520px; }
.card-slot .card-charts-image-panel,
.card-slot .raphael-paper-wrapper,
.card-slot .card-grids-image-panel { height: 170px !important; }
.card-slot .card-gantt-image { height: 170px !important; }
}
/* Mobile — better one-card visible style */
@media (max-width: 768px) {
.card-stack {
max-width: 100%;
min-height: 420px;
margin-top: 18px;
margin-bottom: 24px;
}
.card-stack::before,
.card-stack::after {
display: none;
}
.card-slot {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
overflow: hidden;
}
.card-nav {
width: 100%;
max-width: 444px;
margin: 0 auto 12px;
gap: 10px;
display: flex;
justify-content: center;
}
.card-nav-btn {
min-width: 36px;
min-height: 36px;
border-radius: 50%;
font-size: 22px;
}
.card-dots button {
width: 10px;
height: 10px;
}
.card-stack .card-slot[data-stack] {
min-height: 430px;
}
}
/* ================================================================
card-stack-style.css
All styles for the Chart Cards component — single source of truth
================================================================ */
/* ── Fonts ──────────────────────────────────────────────────── */
@font-face {
font-family: "GT Standard Trial-LRg";
src: local("GT Standard Trial-LRg");
}
@font-face {
font-family: "GT Standard Trial";
src: local("GT Standard Trial");
}
/* ── CSS Variables (scoped to component) ───────────────────── */
.chart-cards-full {
--dark-white: rgba(247, 245, 240, 1);
--dark-blue: rgba(33, 35, 68, 1);
--white: rgba(255, 255, 255, 1);
--border: rgba(231, 225, 206, 1);
--desktop-h3-font-family: "GT Standard Trial", Helvetica;
--desktop-h3-font-weight: 400;
--desktop-h3-font-size: 54px;
--desktop-h3-letter-spacing: -1.08px;
--desktop-h3-line-height: 100%;
--desktop-h3-font-style: normal;
--desktop-body-small-font-family: "GT Standard Trial", Helvetica;
--desktop-body-small-font-weight: 400;
--desktop-body-small-font-size: 16px;
--desktop-body-small-letter-spacing: -0.16px;
--desktop-body-small-line-height: 139.9999976158142%;
--desktop-body-small-font-style: normal;
--desktop-tags-font-family: "GT Standard Trial", Helvetica;
--desktop-tags-font-weight: 400;
--desktop-tags-font-size: 14px;
--desktop-tags-letter-spacing: 0px;
--desktop-tags-line-height: 129.99999523162842%;
--desktop-tags-font-style: normal;
-webkit-font-smoothing: antialiased;
}
/* Scoped box-sizing — only affects this component */
.chart-cards-full *,
.chart-cards-full *::before,
.chart-cards-full *::after {
box-sizing: border-box;
}
/* Scoped focus style for buttons inside this component */
.chart-cards-full button:focus-visible {
outline: 2px solid #4a90e2 !important;
outline: -webkit-focus-ring-color auto 5px !important;
}
/* ── Root container ─────────────────────────────────────────── */
.chart-cards-full {
width: 100%;
max-width: 1440px;
height: auto !important;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 72px;
background-color: var(--dark-white, #f5f5f5);
gap: 0;
}
/* ── Card track ──────────────────────────────────────────────── */
.card-stack-wrap { position: relative; width: 100%; max-width: 1296px; }
.card-stack {
position: relative;
width: 100%;
height: 450px;
overflow: visible;
margin-top: 32px;
margin-bottom: 40px;
}
/* Ghost strip 1 — peeks 14px above the active card */
.card-stack::before {
content: '';
position: absolute;
top: -14px;
left: 8px; right: 8px;
height: 100%;
background: var(--ghost-1, #aacbc8);
border-radius: 3.66px;
z-index: 2;
pointer-events: none;
transition: background 0.5s ease;
}
/* Ghost strip 2 — peeks 26px above, narrower */
.card-stack::after {
content: '';
position: absolute;
top: -26px;
left: 16px; right: 16px;
height: 100%;
background: var(--ghost-2, #888);
border-radius: 3.66px;
z-index: 1;
pointer-events: none;
transition: background 0.5s ease;
}
/* ── Card slots ──────────────────────────────────────────────── */
.card-slot {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 3.66px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
box-sizing: border-box;
opacity: 0;
transform: translateY(-14px) scale(0.97);
pointer-events: none;
z-index: 3;
transition: opacity 0.35s ease, transform 0.38s cubic-bezier(0.22,1,0.36,1);
}
.card-slot[data-stack="0"] {
opacity: 1;
transform: translateY(0) scale(1);
z-index: 4;
pointer-events: all;
box-shadow: 0 10px 40px rgba(0,0,0,0.18);
cursor: pointer;
}
/* ── Animations ──────────────────────────────────────────────── */
@keyframes throwToBack {
0% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
40% { transform: scale(0.91) translateY(-30px) rotate(1.8deg); opacity: 0.5; }
100% { transform: scale(0.86) translateY(-50px) rotate(2.5deg); opacity: 0; }
}
@keyframes slideFromBack {
0% { transform: scale(0.86) translateY(-50px) rotate(-2.5deg); opacity: 0; }
100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}
.card-slot.is-exiting {
animation: throwToBack 0.38s cubic-bezier(0.4,0,0.6,1) forwards;
z-index: 5 !important;
pointer-events: none !important;
transition: none !important;
}
.card-slot.is-entering-back {
animation: slideFromBack 0.38s cubic-bezier(0.22,1,0.36,1) forwards;
z-index: 4 !important;
pointer-events: none !important;
transition: none !important;
}
/* ── Navigation ──────────────────────────────────────────────── */
.card-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.card-nav-btn {
all: unset;
cursor: pointer;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.09);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #333;
transition: background 0.2s;
line-height: 1;
}
.card-nav-btn:hover { background: rgba(0,0,0,0.18); }
.card-dots { display: flex; gap: 6px; align-items: center; }
.card-dot {
all: unset;
cursor: pointer;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(0,0,0,0.22);
transition: background 0.2s, width 0.2s;
display: block;
}
.card-dot.is-active { background: rgba(0,0,0,0.6); width: 22px; border-radius: 4px; }
/* ── Card 1: Charts — content panel ─────────────────────────── */
.chart-cards-full .card-charts-content {
flex-direction: column;
width: 623.32px;
align-items: flex-start;
gap: 18px;
padding: 0px 16px;
display: flex;
position: relative;
}
.chart-cards-full .link-text {
align-self: stretch;
height: 15.67px;
margin-top: -1.00px;
font-family: "GT Standard Trial-LRg", Helvetica;
color: #000000;
font-size: 12px;
letter-spacing: 0;
line-height: 18px;
white-space: nowrap;
position: relative;
font-weight: 400;
}
.chart-cards-full .card-charts-text {
flex-direction: column;
align-items: flex-start;
gap: 7px;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
display: flex;
position: relative;
}
.chart-cards-full .text-wrapper {
align-self: stretch;
margin-top: -1.00px;
font-family: var(--desktop-h3-font-family);
color: #000000;
font-size: var(--desktop-h3-font-size);
letter-spacing: var(--desktop-h3-letter-spacing);
line-height: var(--desktop-h3-line-height);
position: relative;
font-weight: var(--desktop-h3-font-weight);
font-style: var(--desktop-h3-font-style);
}
.chart-cards-full .flexcontainer {
width: 518.19px;
height: 156px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.flexcontainer-2{
color: black;
}
.chart-cards-full .text {
position: relative;
align-self: stretch;
font-family: var(--desktop-body-small-font-family);
font-weight: var(--desktop-body-small-font-weight);
color: #000000;
font-size: var(--desktop-body-small-font-size);
letter-spacing: var(--desktop-body-small-letter-spacing);
line-height: var(--desktop-body-small-line-height);
font-style: var(--desktop-body-small-font-style);
}
.chart-cards-full .span {
letter-spacing: var(--desktop-body-small-letter-spacing);
font-family: var(--desktop-body-small-font-family);
font-style: var(--desktop-body-small-font-style);
font-weight: var(--desktop-body-small-font-weight);
line-height: var(--desktop-body-small-line-height);
font-size: var(--desktop-body-small-font-size);
}
.chart-cards-full .card-charts-cta {
width: 115.85px;
align-items: center;
justify-content: center;
gap: 7.32px;
padding: 5.49px 11.9px;
flex: 0 0 auto;
background-color: #3871bf;
border-radius: 3.66px;
display: flex;
position: relative;
}
.chart-cards-full .link-text-2 {
width: fit-content;
margin-top: -0.92px;
font-family: var(--desktop-tags-font-family);
color: #ffffff;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
position: relative;
font-weight: var(--desktop-tags-font-weight);
font-style: var(--desktop-tags-font-style);
border: none !important;
background: no-repeat;
}
/* ── Card 1: Charts — image panel ───────────────────────────── */
.chart-cards-full .card-charts-image-panel {
position: relative;
width: 468.83px;
height: 418px;
background-color: #3871bf;
border-radius: 3.66px;
}
.chart-cards-full .raphael-paper {
position: relative;
top: calc(50.00% - 162px);
left: calc(50.00% - 163px);
width: 325px;
height: 324px;
display: flex;
align-items: flex-start;
overflow: hidden;
}
.chart-cards-full .card-charts-inner-graphic {
width: 356px;
height: 363px;
position: relative;
margin-left: -31px;
margin-top: -39.27px;
}
.chart-cards-full .img {
position: absolute;
width: 91.20%;
height: 89.19%;
top: 10.81%;
left: 8.80%;
}
.chart-cards-full .card-charts-icon-wrap {
position: absolute;
width: 65px;
height: 65px;
top: 0;
left: 0;
}
.chart-cards-full .vector-wrapper {
width: 100%;
height: 100%;
display: flex;
}
.chart-cards-full .vector {
flex: 1;
width: 64.55px;
}
/* ── Card 2: Maps — content panel ───────────────────────────── */
.chart-cards-full .card-maps-content {
flex-direction: column;
width: 610.45px;
align-items: flex-start;
gap: 36px;
padding: 0px 16px;
display: flex;
position: relative;
}
.chart-cards-full .link-text-3 {
align-self: stretch;
height: 16px;
margin-top: -1.00px;
font-family: "GT Standard Trial-LRg", Helvetica;
color: #000000;
font-size: 12px;
letter-spacing: 0;
line-height: 18px;
white-space: nowrap;
position: relative;
font-weight: 400;
border: none;
background: no-repeat;
}
.chart-cards-full .card-text-group {
flex-direction: column;
align-items: flex-start;
gap: 25px;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
display: flex;
position: relative;
}
.chart-cards-full .p {
align-self: stretch;
height: 94px;
margin-top: -1.00px;
font-family: var(--desktop-h3-font-family);
color: #000000;
font-size: var(--desktop-h3-font-size);
letter-spacing: var(--desktop-h3-letter-spacing);
line-height: var(--desktop-h3-line-height);
position: relative;
font-weight: var(--desktop-h3-font-weight);
font-style: var(--desktop-h3-font-style);
}
.chart-cards-full .flexcontainer-2 {
width: 566.51px;
height: 118px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.chart-cards-full .card-maps-cta {
width: 109.96px;
align-items: center;
justify-content: center;
gap: 7.32px;
padding: 5.49px 11.9px;
flex: 0 0 auto;
background-color: #ffffff;
border-radius: 3.66px;
display: flex;
position: relative;
}
.chart-cards-full .link-text-4 {
position: relative;
width: fit-content;
margin-top: -0.92px;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #000000;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
font-style: var(--desktop-tags-font-style);
border: none;
background: no-repeat;
}
/* ── Card 2: Maps — image panel ─────────────────────────────── */
.chart-cards-full .raphael-paper-wrapper {
width: 468.83px;
height: 418px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 51px 84px;
background-color: #ffffff;
border-radius: 3.66px;
display: flex;
position: relative;
}
.chart-cards-full .raphael-paper-2 {
position: relative;
width: 364.59px;
height: 260.94px;
margin-left: -31.88px;
margin-right: -31.88px;
background-image: url(./img/raphael-paper-4001.png);
background-size: cover;
background-position: 50% 50%;
}
/* ── Card 3: Gantt — content panel ──────────────────────────── */
.chart-cards-full .card-gantt-content {
flex-direction: column;
width: 652.29px;
align-items: flex-start;
gap: 29px;
padding: 0px 16px;
display: flex;
position: relative;
}
.chart-cards-full .link-text-5 {
align-self: stretch;
height: 15.67px;
margin-top: -1.00px;
font-family: "GT Standard Trial-LRg", Helvetica;
color: #ffffff;
font-size: 12px;
letter-spacing: 0;
line-height: 18px;
white-space: nowrap;
position: relative;
font-weight: 400;
}
.chart-cards-full .link-text-6 {
align-self: stretch;
margin-top: -1.00px;
font-family: var(--desktop-h3-font-family);
color: #ffffff;
font-size: var(--desktop-h3-font-size);
letter-spacing: var(--desktop-h3-letter-spacing);
line-height: var(--desktop-h3-line-height);
position: relative;
font-weight: var(--desktop-h3-font-weight);
font-style: var(--desktop-h3-font-style);
}
.chart-cards-full .flexcontainer-3 {
width: 533.21px;
height: 118px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.flexcontainer-3 .span, .flexcontainer-4 .span {
color: white;
}
.chart-cards-full .span-wrapper {
position: relative;
align-self: stretch;
font-family: var(--desktop-body-small-font-family);
font-weight: var(--desktop-body-small-font-weight);
color: #ffffff;
font-size: var(--desktop-body-small-font-size);
letter-spacing: var(--desktop-body-small-letter-spacing);
line-height: var(--desktop-body-small-line-height);
font-style: var(--desktop-body-small-font-style);
}
.chart-cards-full .card-gantt-cta {
width: 109.96px;
align-items: center;
justify-content: center;
gap: 7.32px;
padding: 5.49px 11.9px;
flex: 0 0 auto;
background-color: white;
border-radius: 3.66px;
display: flex;
position: relative;
}
/* ── Card 3: Gantt — image ───────────────────────────────────── */
.chart-cards-full .card-gantt-image {
position: relative;
width: 468.83px;
height: 420px;
margin-top: -1.00px;
margin-bottom: -1.00px;
}
/* ── Card 4: Grids — content panel ──────────────────────────── */
.chart-cards-full .card-grids-content {
flex-direction: column;
width: 689.24px;
align-items: flex-start;
gap: 20px;
padding: 0px 16px;
display: flex;
position: relative;
}
.chart-cards-full .card-grids-text {
flex-direction: column;
align-items: flex-start;
gap: 26px;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
display: flex;
position: relative;
}
.chart-cards-full .link-text-7 {
align-self: stretch;
height: 142.03px;
margin-top: -1.00px;
font-family: var(--desktop-h3-font-family);
color: #ffffff;
font-size: var(--desktop-h3-font-size);
letter-spacing: var(--desktop-h3-letter-spacing);
line-height: var(--desktop-h3-line-height);
position: relative;
font-weight: var(--desktop-h3-font-weight);
font-style: var(--desktop-h3-font-style);
}
.chart-cards-full .flexcontainer-4 {
width: 566.46px;
height: 137px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.chart-cards-full .card-grids-cta {
width: 101.13px;
height: 27.84px;
align-items: center;
justify-content: center;
gap: 7.32px;
padding: 5.49px 11.9px;
background-color: #ffffff;
border-radius: 3.66px;
display: flex;
position: relative;
}
.chart-cards-full .link-text-8 {
width: fit-content;
margin-top: -1.48px;
font-family: var(--desktop-tags-font-family);
color: #000000;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
position: relative;
font-weight: var(--desktop-tags-font-weight);
font-style: var(--desktop-tags-font-style);
}
/* ── Card 4: Grids — image panel ────────────────────────────── */
.chart-cards-full .card-grids-image-panel {
position: relative;
align-self: stretch;
width: 468.83px;
background-color: #000207;
border-radius: 3.66px;
}
.chart-cards-full .image {
top: 201px;
height: 175px;
aspect-ratio: 2.09;
position: absolute;
left: 58px;
width: 365px;
object-fit: cover;
}
.chart-cards-full .image-2 {
top: 42px;
height: 149px;
aspect-ratio: 2.44;
position: absolute;
left: 58px;
width: 365px;
object-fit: cover;
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.chart-cards-full {
padding: 40px 16px;
min-height: 100vh;
justify-content: flex-start;
}
.card-stack {
height: 560px;
margin-top: 28px;
margin-bottom: 32px;
}
/* Vertical layout: image on top, text below */
.card-slot {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
overflow: hidden;
}
/* Image panels — top, fixed height */
.card-slot .card-charts-image-panel,
.card-slot .raphael-paper-wrapper,
.card-slot .card-grids-image-panel {
order: -1;
width: 100% !important;
height: 200px !important;
flex-shrink: 0;
border-radius: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* card-gantt-image is an ![]()
tag */
.card-slot .card-gantt-image {
order: -1;
width: 100% !important;
height: 200px !important;
flex-shrink: 0;
object-fit: cover;
border-radius: 0;
margin: 0 !important;
}
/* raphael paper inside image panel — keep centred */
.card-slot .raphael-paper {
top: auto; left: auto;
width: 100%; height: 100%;
}
/* images inside card-grids-image-panel */
.card-slot .image,
.card-slot .image-2 {
position: absolute;
}
/* Content panels — fill remaining space */
.card-slot .card-charts-content,
.card-slot .card-maps-content,
.card-slot .card-gantt-content,
.card-slot .card-grids-content {
width: 100% !important;
padding: 16px !important;
gap: 12px !important;
overflow: hidden;
flex: 1;
box-sizing: border-box;
}
/* Title text */
.card-slot .text-wrapper,
.card-slot .p,
.card-slot .link-text-6,
.card-slot .link-text-7 {
font-size: 18px !important;
line-height: 1.3 !important;
height: auto !important;
}
/* Bullet lists — limit to 3 lines */
.card-slot .flexcontainer,
.card-slot .flexcontainer-2,
.card-slot .flexcontainer-3,
.card-slot .flexcontainer-4 {
width: 100% !important;
height: auto !important;
max-height: 120px;
overflow: hidden;
}
/* Hide extra bullets on mobile */
.card-slot .flexcontainer .text:nth-child(n+4),
.card-slot .flexcontainer-2 .text:nth-child(n+4),
.card-slot .flexcontainer-3 .span-wrapper:nth-child(n+4),
.card-slot .flexcontainer-4 .span-wrapper:nth-child(n+4) {
display: none;
}
}
@media (max-width: 480px) {
.card-stack { height: 520px; }
.card-slot .card-charts-image-panel,
.card-slot .raphael-paper-wrapper,
.card-slot .card-grids-image-panel { height: 170px !important; }
.card-slot .card-gantt-image { height: 170px !important; }
}
/* ============================================
NAVBAR / HEADER STYLES
(global — works on any page)
Merged from: assets/css/navbar.css
============================================ */
/* ── Sticky wrapper ── */
header:has(.navbar),
.navbar_wrapper {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: transparent !important;
overflow: visible;
}
/* WordPress admin bar offset */
.admin-bar header:has(.navbar) {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar header:has(.navbar) {
top: 46px;
}
}
/* ── Navbar container — 3 column layout ── */
.navbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1440px;
height: 98px;
padding: 24px 72px;
position: relative;
z-index: 200;
margin: 0 auto;
background: transparent !important;
}
/* ── Logo left ── */
.nav-logo-wrap {
flex: 0 0 auto;
}
.nav-logo-img {
width: 187px;
height: auto;
display: block;
}
/* ── Center pill — perfectly centered via absolute ── */
.nav-pill {
display: inline-flex;
height: 50px;
align-items: center;
justify-content: center;
padding: 8px 16px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #ffffff;
border-radius: 7px;
box-shadow:
0px 15px 33px #0000001a,
0px 40px 35px #0000000f,
0px 80px 45px #00000007,
0px 120px 50px #00000002;
overflow: visible;
z-index: 1;
}
/* ── Nav links wrapper ── */
.nav-links-group {
display: inline-flex;
align-items: center;
gap: 0;
position: relative;
flex: 0 0 auto;
}
/* ── Individual nav link ── */
.nav-link {
position: relative;
width: fit-content;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #000000;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
font-style: var(--desktop-tags-font-style);
text-decoration: none;
cursor: pointer;
padding: 6px 12px;
display: inline-flex;
align-items: center;
}
/* ── CTA right ── */
.nav-cta-wrap {
flex: 0 0 auto;
}
/* ── Free Trial CTA button ── */
.nav-cta-btn {
all: unset;
box-sizing: border-box;
display: inline-flex;
position: relative;
flex: 0 0 auto;
background-color: var(--green);
height: 33px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0px 20px;
border-radius: 4px;
cursor: pointer;
}
.nav-cta-btn .wp-element-button, .nav-cta-btn .wp-element-wp-block-button__link {
background: no-repeat !important;
padding: 0px 20px !important;
color: #000;
}
.text-green {
color: var(--green) !important;
}
.nav-cta-text {
position: relative;
width: fit-content;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #000000;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
font-style: var(--desktop-tags-font-style);
}
/* ── Dropdown menu ── */
.nav-item {
position: relative;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
padding: 6px 12px;
}
.nav-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* CSS-only chevron arrow */
.nav-chevron {
display: inline-block;
width: 7px;
height: 7px;
border-right: 1.5px solid #000;
border-bottom: 1.5px solid #000;
transform: rotate(45deg);
margin-bottom: 3px;
flex-shrink: 0;
}
/* Dropdown panel wrapper */
.nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 10px;
min-width: 180px;
z-index: 100;
}
.nav-item.active .nav-dropdown {
display: block;
}
/* White card */
.nav-dropdown-inner {
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 8px 24px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.06);
padding: 6px 0;
position: relative;
}
/* Dropdown link items */
.nav-dropdown-item {
display: block;
padding: 12px 20px;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
color: #000000;
white-space: nowrap;
cursor: pointer;
border-radius: 6px;
margin: 2px 6px;
text-decoration: none;
}
.nav-dropdown-item:hover {
background-color: #f0f4ff;
color: var(--medium-blue);
}
.fc-poc-btn-text {
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #000000;
font-size: var(--desktop-tags-font-size);
white-space: nowrap;
}
.fc-poc-btn-text a {
text-decoration: none !important;
}
/* ── Mobile nav defaults (hidden until mobile) ── */
.nav-mobile-bar { display: none; }
.nav-overlay { display: none; }
@media (min-width: 769px) {
.nav-mobile-bar { display: none !important; }
.nav-overlay { display: none !important; }
}
@media (max-width: 768px) {
/* Hide desktop elements */
.nav-pill { display: none !important; }
.nav-logo-wrap { display: none !important; }
.nav-cta-wrap { display: none !important; }
/* Navbar container */
.navbar {
background-color: var(--background);
padding: 0;
height: auto;
justify-content: flex-start;
}
/* Mobile top bar (logo + Menu button) */
.nav-mobile-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 16px;
box-sizing: border-box;
background-color: var(--background);
}
.nav-logo-mobile {
height: 20px;
width: auto;
filter: brightness(0) invert(1);
}
.nav-hamburger-btn {
all: unset;
cursor: pointer;
background-color: var(--green);
color: #000;
font-family: var(--desktop-tags-font-family);
font-size: var(--desktop-tags-font-size);
font-weight: var(--desktop-tags-font-weight);
padding: 6px 16px;
border-radius: 4px;
white-space: nowrap;
}
/* Full-screen overlay backdrop */
.nav-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0,0,0,0.4);
}
.nav-overlay.open {
display: block;
}
/* White menu card (header + body) */
.nav-overlay-header,
.nav-overlay-body {
background: #fff;
}
.nav-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #e0e0e0;
}
/* Logo inside overlay (dark, not inverted) */
.nav-overlay .nav-logo-mobile {
filter: none;
}
/* Close button */
.nav-close-btn {
all: unset;
cursor: pointer;
font-family: var(--desktop-tags-font-family);
font-size: var(--desktop-tags-font-size);
font-weight: var(--desktop-tags-font-weight);
color: var(--background);
border: 1px solid var(--background);
padding: 5px 14px;
border-radius: 4px;
}
/* Scrollable menu body */
.nav-overlay-body {
padding: 8px 16px 24px;
overflow-y: auto;
max-height: calc(100vh - 60px);
}
/* Category section */
.nav-overlay-section {
padding: 16px 0 8px;
border-bottom: 1px solid #f0f0f0;
}
/* Section heading */
.nav-section-heading {
font-family: var(--desktop-tags-font-family);
font-size: var(--desktop-tags-font-size);
font-weight: var(--desktop-tags-font-weight);
color: var(--dark-blue);
opacity: 0.5;
margin-bottom: 10px;
text-transform: capitalize;
}
/* Menu link items */
.nav-overlay-link {
display: block;
text-decoration: none;
font-family: var(--desktop-h5-font-family);
font-weight: var(--desktop-h5-font-weight);
color: var(--background);
line-height: var(--desktop-h5-line-height);
padding: 6px 0;
cursor: pointer;
}
/* Free Trial CTA in overlay */
.nav-overlay-cta {
all: unset;
cursor: pointer;
display: block;
margin-top: 24px;
background-color: var(--green);
color: #000;
font-family: var(--desktop-tags-font-family);
font-size: var(--desktop-tags-font-size);
font-weight: var(--desktop-tags-font-weight);
padding: 8px 20px;
border-radius: 4px;
text-align: center;
width: fit-content;
}
}
/* ============================================
FOOTER STYLES
(global — works on any page)
Merged from: assets/css/footer.css
============================================ */
/* ── Footer container ── */
.footer {
position: relative;
width: 100%;
height: 773px;
background-color: var(--background);
align-self: stretch;
overflow: hidden;
max-width: 1440px;
margin: 0px auto;
}
/* ── Horizontal divider lines ── */
.footer-line {
position: absolute;
left: 0;
width: 100%;
height: 1px;
object-fit: cover;
pointer-events: none;
}
.footer-line-1 { top: 97px; }
.footer-line-2 { top: 198px; }
.footer-line-3 { top: 299px; }
.footer-line-4 { top: 400px; }
.footer-line-5 { top: 501px; }
/* ── Blue column blocks (decorative mosaic) ── */
.footer-col-block {
position: absolute;
background-color: var(--blue);
}
/* 360/1440=25%, 502/820=61.2%, 621/820=75.7% */
.footer-col-block-1 { top: 199px; left: 25%; width: 25%; height: 621px; }
.footer-col-block-2 { top: 502px; left: 0; width: 25%; height: 318px; }
.footer-col-block-3 { top: 300px; left: 50%; width: 25%; height: 520px; }
.footer-col-block-4 { top: 1px; left: 75%; width: 25%; height: 820px; }
/* ── Free Trial CTA button ── */
.footer-cta-btn {
all: unset;
box-sizing: border-box;
display: inline-flex;
position: absolute;
top: 474px;
left: 28%;
background-color: #000000;
height: 33px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 13px;
border-radius: 4px;
cursor: pointer;
}
.footer-cta-text {
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #ffffff;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
}
/* ── Product column ── */
.footer-products-col{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: absolute;
top: 230px;
left: 28%;
}
/* ── Developers column ── */
.footer-developers-col {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: absolute;
top: 230px;
left: 39.8%;
}
/* ── Compare column ── */
.footer-compare-col {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: absolute;
top: 346px;
left: 52.4%;
}
/* ── Company column ── */
.footer-poc-col {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: absolute;
top: 346px;
left: 65.3%;
}
/* ── Connect heading ── */
.footer-connect-heading {
position: absolute;
top: 346px;
left: 78.3%;
opacity: 0.5;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #ffffff;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
font-style: var(--desktop-tags-font-style);
}
/* ── Community column ── */
.footer-community-col {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: absolute;
top: 378px;
left: 78.3%;
}
/* ── Column links list ── */
.footer-col-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
/* ── Column heading ── */
.footer-col-heading {
position: relative;
align-self: stretch;
margin-top: -1px;
opacity: 0.5;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #ffffff;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
font-style: var(--desktop-tags-font-style);
}
/* ── First / highlighted link ── */
.footer-link-primary {
position: relative;
align-self: stretch;
margin-top: -1px;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #ffffff;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
font-style: var(--desktop-tags-font-style);
}
/* ── Regular link ── */
.footer-link {
position: relative;
align-self: stretch;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #ffffff;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
font-style: var(--desktop-tags-font-style);
}
/* ── Community title ── */
.footer-community-title {
position: relative;
max-width: 20%;
min-width: 160px;
margin-top: -1px;
font-family: var(--desktop-h5-font-family);
font-weight: var(--desktop-h5-font-weight);
color: #ffffff;
font-size: var(--desktop-h5-font-size);
letter-spacing: var(--desktop-h5-letter-spacing);
line-height: var(--desktop-h5-line-height);
font-style: var(--desktop-h5-font-style);
}
/* ── Discord button ── */
.footer-discord-btn {
display: inline-flex;
height: 33px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 13px;
position: relative;
background-color: #ffffff;
border-radius: 4px;
cursor: pointer;
}
/* ── Discord label ── */
.footer-discord-label {
position: relative;
width: fit-content;
font-family: var(--desktop-tags-font-family);
font-weight: var(--desktop-tags-font-weight);
color: #071c21;
font-size: var(--desktop-tags-font-size);
letter-spacing: var(--desktop-tags-letter-spacing);
line-height: var(--desktop-tags-line-height);
white-space: nowrap;
font-style: var(--desktop-tags-font-style);
}
/* ── Discord icon ── */
.footer-discord-icon {
position: relative;
width: 25px;
height: 25px;
margin-top: -2px;
margin-bottom: -2px;
aspect-ratio: 1;
object-fit: cover;
}
/* ── Footer logo watermark ── */
.footer-logo {
position: absolute;
top: 583px;
left: 1.5%;
width: 96.7%;
height: 152px;
object-position: left;
}
/* ── Footer mobile ── */
@media (max-width: 768px) {
.footer {
height: auto;
min-height: 801px;
padding: 40px 16px 32px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: start;
}
.footer-col-block,
.footer-logo,
.footer-line {
display: none;
}
.footer-cta-btn {
display: inline-flex;
position: relative;
margin: 0;
width: fit-content;
justify-self: start;
grid-column: 1 / 2;
top: 379px;
left: 23%;
}
.footer-products-col { grid-column: 1 / 2; }
.footer-developers-col { grid-column: 2 / 3; }
.footer-compare-col { grid-column: 1 / 2; }
.footer-poc-col { grid-column: 2 / 3; left: 40.3%;}
.footer-connect-heading,
.footer-community-col {
grid-column: 1 / -1;
}
.footer-community-col {
display: flex;
flex-direction: column;
gap: 16px;
top: 540px;
left: 11.3%;
}
}
/* scrol to tpp section*/
.page-id-1426 #scroll-to-top{
background: var(--color-theme-map-page) !important;
}
.page-id-1426 .footer-col-block{
background: var(--color-theme-map-page) !important;
}
/* gannt page footer*/
.page-id-1343 .footer-col-block{
background: rgba(54, 59, 139, 1) !important;
}
.page-id-1426 .footer, .page-id-1343 .footer{
background: #ffffff !important;
}
.page-id-1426 .footer-link, .page-id-1343 .footer-link, .page-id-1343 .footer-connect-heading, .page-id-1343 .footer-community-title {
color: #000;
}
/* time page footer */
.page-id-1648 .footer-col-block{
background: var(--color-theme-time-page)!important;
}
.page-id-1648 .footer, .page-id-1343 .footer{
background: #ffffff !important;
}
.page-id-1648 .footer-link, .page-id-1648 .footer-link, .page-id-1648 .footer-connect-heading, .page-id-1648 .footer-community-title, .page-id-1648 .footer-col-heading {
color: #000;
}
/* time page footer */
.page-id-1291 .footer-col-block{
background: var(--color-theme-grid-page)!important;
}
.page-id-1291 .footer{
background: #ffffff !important;
}
.page-id-1291 .footer-link, .page-id-1291 .footer-link, .page-id-1291 .footer-connect-heading, .page-id-1291 .footer-community-title, .page-id-1291 .footer-col-heading {
color: #000;
}
.page-id-1291 #scroll-to-top{
background: var(--color-theme-grid-page) !important;
}
.page-id-1648 #scroll-to-top{
background: var(--color-theme-time-page) !important;
}
.fusioncharts-charts-container svg text,
.fusioncharts-charts-container .fusioncharts-container svg text {
/*font-size: 6px !important;*/
}
/* ── Equal height for all chart cards in a row ── */
/* Make the columns row stretch to tallest card */
.chart-sunburst-charts .wp-block-columns {
align-items: stretch !important;
}
/* Each card column stretches full height */
/* ── Chart container height ── */
.chart-sunburst-charts-card .fusioncharts-charts-container {
flex: 1 !important;
min-height: 320px !important;
height: 320px !important;
}
/* Make sure wp-block-column and card pass height down */
.chart-sunburst-charts .wp-block-columns {
align-items: stretch !important;
}
.chart-sunburst-charts .wp-block-column {
display: flex !important;
flex-direction: column !important;
}
.chart-sunburst-charts-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Fix Sankey/blend legend overflow */
.chart-sunburst-charts-card svg {
overflow: visible !important;
}