/*
Theme Name: Talexes Child
Theme URI: https://talexes.com/
Description: Child theme for GeneratePress with custom navigation and hero tweaks.
Author: Talexes
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: talexes-child
*/
/* Put your site CSS here instead of Customizer > Additional CSS */
/**********************
* TOKENS
*********************/
:root{
--container: 1400px;
--smaller-container: 1200px;
--hero-min-h: 70vh;
--overlay: rgba(0,0,0,.60);
--nav-gap: 22px;
--header-pad-x: 40px;
--header-pad-y: 40px;
--header-max:1500px;
--text-max: 1600px;
--text-gutter: clamp(16px, 3vw, 32px); /* left/right page padding */
--orange-color: rgba(253, 172, 59, 1);
--light-green-color: rgba(162, 222, 222, 1);
--offwhite-color: #F8F7F6;
--red-color: #ff3b30; /* red used for 3rd avatar bg */
--blue-color: rgba(45, 66, 121, 1);
--light-brown-color: #F6F5F4; /* light brown color used sometimes as background */
--c-black: #0d0e10; /* main dark bg (footer) */
--c-black-2: #121316; /* darker surface/alt */
--c-white: #ffffff;
--c-text: #e9eaee; /* primary text on dark */
--c-text-muted: #cfd3db; /* secondary text on dark */
--c-text-subtle: #8b919a; /* legal / copyright */
--c-divider: #1f2127; /* borders/dividers on dark */
--c-border: #2a2c31; /* button borders on dark */
--c-accent: #ff6a2a; /* brand highlight (orange) */
--c-link: #cfd3db; /* footer link default */
--c-link-hover: #ffffff; /* footer link hover */
--btn-bg: #90DAD3;
--btn-fg: #0b122a;
--btn-bg-hover: rgba(253, 172, 59, 1);
--btn-fg-hover: #050a1c;
--btn-radius: 5px;
--btn-pad-y: 12px;
--btn-pad-x: 13px;
--btn-shadow: 0 6px 16px rgba(0,0,0,.12);
--btn-ring: inset 0 0 0 2px rgba(255,255,255,.18); /* faint edge like your footer btn */
/* icon tile */
--btn-icon-size: 30px;
--btn-icon-radius: 5px;
--btn-icon-bg: #fff;
--btn-icon-fg: var(--btn-fg);
--btn-icon-left: 10px;
--grid-inset: clamp(18px, 3.5vw, 56px); /* space from panel edges */
--overlap-depth: clamp(36px, 5vw, 72px);
--mesh-grid-img: url('https://talexesstg.wpenginepowered.com/wp-content/uploads/2025/11/Vector.png');
--mesh-panel-max-w: 1100px; /* max width of the mesh panel */
--mesh-panel-h: clamp(140px, 22vw, 260px); /* height of the mesh panel */
--page-gutter: clamp(16px, 3vw, 32px); /* left/right padding fallback */
--site-container: 1400px; /* container fallback */
/* Visuals */
--mesh-panel-opacity: 1; /* lower to soften the mesh */
--black-bg: #0d0e10; /* section background (black) */
--stories-card-min-h: 220px;
--assessment-blue: #2D4279; /* Blue (Accent Color) */
--assessment-green: #4CAA49; /* Green (Accent Color) */
--assessment-black: #1E1E1E; /* Black (Primary) */
--assessment-offwhite: #F8F7F6; /* Off-white (Primary) */
--assessment-orange: #FF5B23; /* Orange (Secondary) */
--assessment-yellow: #FDAC3B; /* Yellow (Accent Color) */
--assessment-lightteal: #A2DEDE; /* Light teal (Secondary)*/
}
.one-container .site-content{
padding:0px !important;
}
/* Body + form controls → DM Sans */
body,
button,
input,
select,
textarea {
font-family: var(--font-sans);
font-optical-sizing: auto; /* DM Sans variable opsz */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings → Epilogue */
h1, h2, h3, h4, h5, h6,
.tg-h1, .tg-h2, .tg-h3,
.tg-split__title,
.tg-centered .tg-h1 {
font-family: var(--font-head);
font-optical-sizing: auto; /* safe even if opsz not present */
font-weight: 700; /* adjust per design */
}
.container.grid-container {
max-width: 100% !important;
}
h2{
font-weight: 600 !important;
}
.single-post .site-header{
background: #1E1E1E !important;
}
.single-post .site-header a{
color: #fff !important
}
/**********************
* HERO (full-bleed)
*********************/
.tg-container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.tg-hero{
position:relative; display:flex; align-items:center;
min-height:var(--hero-min-h);
padding:140px 0 10px; /* space under overlaying header */
color:#fff; width:100%;
}
.tg-hero__bg{
position:absolute; inset:0;
background-image:var(--tg-hero); /* set by your PHP */
background-size:cover; background-position:center; background-repeat:no-repeat;
}
.tg-hero::before{ content:""; position:absolute; inset:0; background:var(--overlay); }
.tg-hero .tg-container{ position:relative; z-index:1; }
.
{ font-size:clamp(34px,6vw,72px); line-height:1.1; margin:0 0 16px; }
.tg-hero__deck{ max-width:640px; font-size:18px; margin:0; opacity:.95; }
/* hide the default WP page H1 under the hero */
.tg-has-hero .entry-title{ display:none; }
/**********************
* HEADER over hero (white links)
*********************/
.tg-has-hero .site-header{
position:absolute; top:0; left:0; right:0;
background:transparent !important; box-shadow:none !important; z-index:10;
}
.tg-has-hero .site-header a,
.tg-has-hero .main-navigation .main-nav ul li > a,
.tg-has-hero .main-navigation .menu-bar-items a,
.tg-has-hero .menu-toggle{ color:#fff !important; }
.tg-has-hero .site-logo img, .tg-has-hero .site-logo svg{
filter:brightness(100%) contrast(105%);
}
/* admin bar offset */
.admin-bar.tg-has-hero .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar.tg-has-hero .site-header{ top:46px; } }
/********************************************
* DESKTOP header (≥1025px)
* Perfectly centered menu + CTAs on the right
********************************************/
@media (min-width:1025px){
/* header row = positioning context for absolute centering */
.site-header .inside-header{
position:relative;
padding:var(--header-pad-y) var(--header-pad-x);
}
.site-header .main-navigation{ background:transparent; position:static; }
.main-navigation .inside-navigation{ position:static; }
.main-navigation .main-nav{ width:100%; }
/* center the menu UL vertically & horizontally within header row */
.main-navigation .main-nav > ul{
position:absolute;
left:50%; top:50%;
transform:translate(-50%, -50%);
display:flex; gap:var(--nav-gap);
margin:0; padding:0; list-style:none; white-space:nowrap;
z-index:10;
}
.main-navigation .main-nav > ul > li > a{
padding:6px 0; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
}
/* right-side CTAs from snippet */
.tg-header-ctas{
position:absolute; right:var(--header-pad-x); top:50%;
transform:translateY(-50%);
display:flex; align-items:center; gap:12px;
z-index:11;
}
}
/**********************
* CTA look
*********************/
.tg-link-login{ color:#fff; text-decoration:none; opacity:.9; letter-spacing:.02em; }
.tg-link-login:hover{ opacity:1; }
.tg-btn{
display:inline-flex; align-items:center; gap:8px;
padding:10px 14px; border-radius:9999px; font-weight:600; text-decoration:none;
}
.tg-btn--nav{
background:rgba(178,235,228,.95);
color:#0b1b2a;
backdrop-filter:saturate(140%) blur(2px);
}
.tg-btn--nav:hover{ filter:brightness(.96); }
.tg-btn__icon{ transform:translateY(-1px); }
/**********************
* Responsive
*********************/
@media (max-width:1024px){
.tg-hero{ padding:110px 0 56px; min-height: 50vh; }
.tg-header-ctas{ position:static; transform:none; margin-top:8px; }
}
/* ==== CTAs: keep LOGIN + Try Talassure Now on one line (desktop) ==== */
@media (min-width:1025px){
.tg-header-ctas{
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:14px; /* space between LOGIN and the pill */
white-space:nowrap; /* never wrap to a second line */
position:absolute; /* keep pinned to right */
right:var(--header-pad-x);
top:50%;
transform:translateY(-50%);
z-index:11;
}
.tg-header-ctas a{ display:inline-flex; align-items:center; line-height:1; }
/* If a LOGIN item still exists inside the main menu UL, hide it on desktop */
.main-navigation .main-nav > ul > li > a[href*="login"]{
display:none !important;
}
}
/* (Optional) If the CTAs ever wrap at smaller desktop widths, tighten the pill */
@media (min-width:1025px) and (max-width:1200px){
.tg-btn--nav{ padding:8px 12px; }
}
/* === 1) Darker hero overlay (override) === */
.tg-hero::before{
/* bump opacity; tweak .70–.80 if you want even darker */
background: rgba(0,0,0,.72) !important;
}
/* Optional: subtle gradient just behind the header for readability */
.tg-has-hero .site-header::before{
content:""; position:absolute; inset:0 0 auto 0; height:88px;
background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
pointer-events:none; z-index:0;
}
/* === 2) Keep LOGIN + Try Talassure Now side-by-side (desktop) === */
@media (min-width:1025px){
.tg-header-ctas{
position:absolute; right:var(--header-pad-x); top:50%;
transform:translateY(-50%);
display:flex !important;
flex-direction:row !important;
align-items:center; gap:14px;
white-space:nowrap; /* no wrapping to a new line */
inline-size:max-content; /* shrink-wrap container */
z-index:11;
}
.tg-header-ctas > *{ flex:0 0 auto; }
.tg-header-ctas a{ display:inline-flex !important; line-height:1; }
/* If a LOGIN item still exists in the main menu UL, hide that duplicate */
.main-navigation .main-nav > ul > li > a[href*="login"]{ display:none !important; }
}
/* Narrow desktop: slightly tighter pill so both CTAs always fit */
@media (min-width:1025px) and (max-width:1280px){
.tg-btn--nav{ padding:8px 12px; }
}
/***** Darken the hero overlay a touch more *****/
.tg-hero::before{
/* adjust .78 → .70/.85 to taste */
background: rgba(0,0,0,.78) !important;
}
/***** Keep LOGIN + Try Talassure Now on ONE LINE (desktop) *****/
@media (min-width:1025px){
/* The CTA wrapper itself */
.tg-header-ctas{
position:absolute; right:var(--header-pad-x); top:50%;
transform:translateY(-50%);
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:14px; /* spacing between the two */
white-space:nowrap; /* no line breaks */
flex-wrap:nowrap !important; /* belt + suspenders */
inline-size:max-content; /* shrink-wrap to its contents */
z-index:11;
}
/* Force the anchors to be inline items (GP sets them block) */
.tg-header-ctas a,
.tg-header-ctas .tg-link-login,
.tg-header-ctas .tg-btn--nav{
display:inline-flex !important;
align-items:center;
line-height:1;
width:auto !important; /* avoid any block/100% width inheritance */
max-width:none !important;
}
/* If a LOGIN item still exists inside the main menu UL, hide it on desktop */
.main-navigation .main-nav > ul > li > a[href*="login"]{
display:none !important;
}
}
/* Slightly tighter pill on narrow desktops so both CTAs always fit */
@media (min-width:1025px) and (max-width:1280px){
.tg-btn--nav{ padding:8px 12px; }
}
/* HERO: darker, left-weighted vignette + soft top fade */
.tg-hero::before{
background:
linear-gradient(
90deg,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.78) 22%,
rgba(0,0,0,.58) 40%,
rgba(0,0,0,.34) 62%,
rgba(0,0,0,.18) 78%,
rgba(0,0,0,0) 100%
),
linear-gradient(
180deg,
rgba(0,0,0,.28) 0%,
rgba(0,0,0,0) 42%
) !important;
}
/* Subtle header fade for nav legibility */
.tg-has-hero .site-header::before{
content:"";
position:absolute; left:0; right:0; top:0; height:92px;
background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
pointer-events:none; z-index:0;
}
/* Figma-like hero type */
.tg-hero__deck{
max-width:620px;
font-size:clamp(16px, 1.15vw, 19px);
line-height:1.5;
color:rgba(255,255,255,.94);
text-shadow:0 1px 10px rgba(0,0,0,.35);
}
/* CTAs on one line, side-by-side (desktop) */
@media (min-width:1025px){
.tg-header-ctas{
position:absolute;
right:var(--header-pad-x);
top:50%;
transform:translateY(-50%);
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:14px;
white-space:nowrap;
flex-wrap:nowrap !important;
inline-size:max-content;
z-index:11;
}
/* Force anchors to be inline items (GP makes them block) */
.tg-header-ctas a,
.tg-header-ctas .tg-link-login,
.tg-header-ctas .tg-btn--nav{
display:inline-flex !important;
align-items:center;
line-height:1;
width:auto !important;
max-width:none !important;
}
/* Hide any duplicate LOGIN that still lives in the main UL */
.main-navigation .main-nav > ul > li > a[href*="login"]{
display:none !important;
}
}
/* Narrow desktop: tighten pill padding so both CTAs never wrap */
@media (min-width:1025px) and (max-width:1280px){
.tg-btn--nav{ padding:8px 12px; }
}
/* Nudge the copy to the right a touch and keep generous inner spacing */
.tg-hero .tg-container{
padding-left: clamp(40px, 6vw, 160px); /* move copy to the right */
padding-right: clamp(24px, 5vw, 56px);
}
/* Headline: slightly smaller cap and lighter weight */
.tg-hero__title{
font-size: clamp(20px, 6.0vw, 55px); /* cap the max so it doesn’t shout */
font-weight: 600; /* lighter than the 800 look */
letter-spacing: -0.01em;
line-height: 1.08;
margin: 0 0 16px;
max-width: 560px;
text-shadow:0 2px 16px rgba(0,0,0,.45);
}
/* Deck/paragraph: same column width + tidy spacing */
.tg-hero__deck{
max-width: 560px;
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.5;
margin: 0 0 8px;
}
/* If you want even more breathing room on big screens,
bump the left padding a bit more */
@media (min-width: 1440px){
.tg-hero .tg-container{ padding-left: 10vw; }
}
/* Mobile: let the copy use the default page gutters again */
@media (max-width: 768px){
.tg-hero .tg-container{ padding-left: 24px; padding-right: 24px; }
.tg-hero__title, .tg-hero__deck{ max-width: none; }
}
/***** HERO — force left-aligned layout (no centering anywhere) *****/
.tg-hero .tg-container{
/* make the hero content a left-aligned vertical stack */
display:flex;
flex-direction:column;
align-items:flex-start; /* left edge */
gap:12px;
padding-left:clamp(40px, 6vw, 160px); /* position from the left */
padding-right:clamp(24px, 5vw, 56px);
margin-left:0; /* never centered */
margin-right:auto;
text-align:left !important;
}
.tg-hero__title,
.tg-hero__deck{
text-align:left !important;
margin-left:0 !important;
margin-right:0 !important;
max-width:560px; /* controlled column width */
}
/* safety net: if any template wraps the hero in a centered container */
.tg-has-hero .inside-article,
.tg-has-hero .entry-content{
text-align:left !important;
}
.entry-content{
padding-left:10px !important;
padding-right: 10px !important;
}
/* Darker hero overlay – tweak the alphas up to darken */
.tg-hero::before{
background:
linear-gradient(
90deg,
rgba(0,0,0,.92) 0%, /* was ~.88 */
rgba(0,0,0,.86) 22%, /* was ~.78 */
rgba(0,0,0,.66) 40%, /* was ~.58 */
rgba(0,0,0,.42) 62%, /* was ~.34 */
rgba(0,0,0,.24) 78%, /* was ~.18 */
rgba(0,0,0,0) 100%
),
linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 42%)
!important;
}
/* Brandable colors */
:root{
--cta-bg: #90DAD3; /* teal like image 1 */
--cta-hover: #F5A623; /* orange like image 2 */
--cta-text: #0b1b2a; /* dark label color */
}
/* Pill look */
.tg-btn{
display:inline-flex; align-items:center; gap:12px;
border-radius:9999px; font-weight:700;
text-decoration:none; line-height:1;
transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* Default (image 1) */
.tg-btn--nav{
background:var(--cta-bg);
color:var(--cta-text);
box-shadow:0 6px 16px rgba(0,0,0,.12);
}
/* White square icon on the left */
.tg-btn__icon{
display:inline-grid; place-items:center;
width:32px; height:32px;
background:#fff; color:var(--cta-text);
border-radius:10px; font-weight:800;
box-shadow:0 1px 2px rgba(0,0,0,.10) inset, 0 1px 1px rgba(0,0,0,.08);
transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
/* Hover → orange (image 2) */
.tg-btn--nav:hover{
background:var(--cta-hover);
color:var(--cta-text);
box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.tg-btn--nav:hover .tg-btn__icon{ transform:translateX(2px); }
/* Focus ring (keyboard) */
.tg-btn--nav:focus-visible{
outline:3px solid rgba(255,255,255,.9);
outline-offset:2px;
}
/* Ensure anchor stays inline so LOGIN + CTA sit side-by-side */
.tg-header-ctas a.tg-btn--nav{ display:inline-flex !important; width:auto !important; }
/* Flatten the CTA corners to match image 1 */
.tg-header-ctas .tg-btn--nav{
background: #90DAD3;
color: #0b1b2a;
box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
/* Icon box: small rounded square (not a circle) */
.tg-header-ctas .tg-btn__icon{
width: 28px; height: 28px;
background: #fff; color:#0b1b2a;
display: inline-grid; place-items: center;
}
/* HERO layering: image -> overlay -> content */
.tg-hero{ position:relative; }
.tg-hero__bg{
position:absolute; inset:0;
background-image: var(--tg-hero);
background-size: cover; background-position: center; background-repeat: no-repeat;
z-index:0; /* photo at the bottom */
}
/* Dark-from-right overlay ABOVE the image */
.tg-hero::before{
content:"";
position:absolute; inset:0;
pointer-events:none;
z-index:1; /* overlay over the photo */
/* right-heavy darkening + subtle top fade */
background:
linear-gradient(
to left, /* dark on the RIGHT */
rgba(0,0,0,.85) 0%,
rgba(0,0,0,.65) 22%,
rgba(0,0,0,.40) 44%,
rgba(0,0,0,.18) 66%,
rgba(0,0,0,0) 100%
),
linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 42%);
}
/* Your hero copy on top of everything */
.tg-hero .tg-container{ position:relative; z-index:2; }
/* Constrain the header row + nav container and center them */
@media (min-width:1025px){
.site-header .inside-header,
.main-navigation .inside-navigation{
max-width: var(--header-max);
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--header-pad-x);
padding-right: var(--header-pad-x);
}
}
.m-width{
width:100% !important;
max-width: var(--text-max) !important;
margin:auto;
}
/* Visibility helpers */
@media (min-width:1150px){ .tg-only-mobile{ display:none !important; } } /* hide extra menu items on desktop */
@media (max-width:1149px){ .tg-only-desktop{ display:none !important; } } /* hide button block on tablet/mobile */
/* Ensure header stays transparent over hero on all sizes */
.tg-has-hero .site-header,
.tg-has-hero .main-navigation,
.tg-has-hero .main-navigation .inside-navigation{
background: transparent !important;
box-shadow: none !important;
}
/* Mobile/tablet header row ordering (logo | menu items | hamburger on right) */
@media (max-width:1150px){
.main-navigation .inside-navigation{
display:flex; align-items:center; gap:10px;
padding-left: var(--header-pad-x); padding-right: var(--header-pad-x);
background: transparent !important;
}
/* Keep hamburger at far right */
.main-navigation .menu-toggle{ margin-left:auto; }
}
/* Hero CTA uses the same pill styles as the header CTA */
.tg-btn--hero{
margin-top: 14px; /* space under paragraph */
padding: 10px 16px; /* same padding */
}
.tg-btn--hero .tg-btn__icon{
width: 28px; height: 28px;
}
/* Optional: slightly larger on big screens */
@media (min-width: 1200px){
.tg-btn--hero{ margin-top: 18px; }
}
.tg-header-ctas .tg-btn__text{
color: #0b1b2a !important;
font-size:17px !important;
}
.tg-btn--hero .tg-btn__text{
font-weight: 400 !important;
}
/* === NAV FIX after switching to the child theme === */
/* Desktop only */
@media (min-width:1151px){
/* keep nav container static */
.main-navigation .inside-navigation{ position: static; }
.main-navigation .main-nav{ width:100%; }
/* CENTER the UL and use flex (kill GP floats) */
.main-navigation .main-nav > ul{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: flex; /* <- key */
align-items: center;
gap: var(--nav-gap); /* spacing between items */
margin: 0; padding: 0; list-style: none; white-space: nowrap;
z-index: 10;
}
.main-navigation .main-nav > ul > li{ float: none; } /* <- kill floats */
/* give links horizontal breathing room */
.main-navigation .main-nav > ul > li > a{
display: block;
padding: 6px 6p;
font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.main-navigation .dropdown-menu-toggle{
padding-right:2px;
}
/* keep CTAs pinned right if you use them */
.tg-header-ctas{
position:absolute; right:var(--header-pad-x); top:50%;
transform:translateY(-50%);
display:flex; align-items:center; gap:12px; z-index:11;
}
}
/* Keep header overlay style */
.tg-has-hero .site-header,
.tg-has-hero .main-navigation,
.tg-has-hero .main-navigation .inside-navigation{
background: transparent !important;
box-shadow: none !important;
}
/* === Desktop dropdown: dark transparent panel === */
@media (min-width:769px){
/* The dropdown panel */
.main-navigation .main-nav ul ul{
background: transparent !important;
backdrop-filter: saturate(140%) blur(4px); /* subtle glass effect (safe to drop if not wanted) */
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
padding: 8px;
box-shadow: 0 12px 28px rgba(0,0,0,.35);
/* optional: soft slide/fade */
transform: translateY(6px);
opacity: 0;
transition: opacity .18s ease, transform .18s ease;
}
/* Show animation on hover/focus */
.main-navigation .main-nav li:hover > ul,
.main-navigation .main-nav li:focus-within > ul{
opacity: 1;
transform: translateY(0);
}
/* Items */
.main-navigation .main-nav ul ul li{ border: 0; }
.main-navigation .main-nav ul ul li a{
color: rgba(255,255,255,.96) !important;
padding: 10px 14px;
white-space: nowrap;
text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
/* Hover/active state */
.main-navigation .main-nav ul ul li > a:hover,
.main-navigation .main-nav ul ul li > a:focus{
background: rgba(255,255,255,.08);
color: #fff !important;
border-radius: 8px;
}
/* Optional: light separators between items */
.main-navigation .main-nav ul ul li + li a{
border-top: 1px solid rgba(255,255,255,.06);
}
/* Optional: hide any default little arrow/triangle bg if GP adds one */
.main-navigation .main-nav ul ul:before{ display:none; }
}
.menu-toggle {
font-size:25px !important;
}
.tg-client-logos-wrap{ padding: 24px 0; }
.logos-grid{
display:grid; gap:28px; align-items:center; justify-items:center;
grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1200px){ .logos-grid{grid-template-columns:repeat(5,1fr);} }
@media (max-width:992px){ .logos-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:768px){ .logos-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:480px){ .logos-grid{grid-template-columns:repeat(2,1fr);} }
.logos-grid .logo img{
max-height:50px; width:auto; height:auto;
filter:grayscale(100%); opacity:.75;
transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.logos-grid .logo:hover img{ filter:none; opacity:1; transform:translateY(-1px); }
/* ===========================
TALENT: Leaders split section
=========================== */
.tg-split__inner{
display:grid;
grid-template-columns:minmax(320px,560px) 1fr;
gap:clamp(32px,5vw,88px);
align-items:start !important;
max-width:var(--container);
margin-inline:auto;
padding-inline:clamp(16px,4vw,32px);
}
/* ===========================
Left media stack (GRID)
- small photo LEFT, big photo RIGHT
- badge sits below the small photo
=========================== */
.img-stack{
position:relative;
display:grid;
grid-template-columns: 38% 62%;
column-gap:26px;
row-gap:16px;
align-items:start;
width:100%;
max-width:560px;
margin-inline:auto;
}
.img-stack figure{ margin:0; }
.img-stack img{ display:block; width:100%; height:auto; border-radius:12px; }
/* small photo (col 1) — slightly lifted */
.img-stack__small{
grid-column:1; grid-row:1;
position:static !important; top:auto !important; left:auto !important; /* neutralize old rules */
transform:translateY(-14px);
box-shadow:0 14px 32px rgba(0,0,0,.18);
border-radius:12px;
overflow:hidden;
}
/* yellow badge under small image (col 1, row 2) */
.img-stack__badge{
grid-column:1; grid-row:2;
align-self:start; justify-self:start;
background-color: var(--orange-color) ; color:#000;
width:230px; padding:18px 20px;
border-radius:10px;
box-shadow:0 16px 36px rgba(0,0,0,.22);
}
/* ===========================
Right copy column
=========================== */
.tg-split__copy .tg-h1{ font-size:clamp(30px,5vw,50px); line-height:1.1; margin:0 0 10px;font-weight:600 !important; }
.tg-split__copy .tg-lead{ color:#5e5e5e; font-weight:600; margin:0 0 16px; font-size:26px; max-width: 400px;line-height: 33px; letter-spacing: -1px; }
.tg-split__copy .tg-body{ color:#333; margin:0 0 18px; max-width:62ch; }
.tg-split__copy .tg-body p{ font-weight: 500; font-size:20px }
/* bullets with IMAGE icons */
.copy-bullets{ list-style:none; margin:18px 0 0; padding:0; }
.copy-bullets li{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.copy-bullets .ico-img{ width:18px; height:18px; object-fit:contain; display:block; }
/* ===========================
Responsive tweaks
=========================== */
@media (max-width:1024px){
.tg-split__inner{ grid-template-columns:1fr; gap:36px; }
.img-stack{ grid-template-columns:46% 54%; }
}
@media (max-width:640px){
.img-stack{ grid-template-columns:1fr; }
.img-stack__small{ transform:none; }
.img-stack__frame{ top:-10px; right:-10px; bottom:10px; left:10px; border-width:5px; }
.img-stack__badge{ width:190px; margin-top:10px; }
}
/* ===========================
(Optional) Center the page if a sidebar is enabled on Home
=========================== */
body.home #right-sidebar{ display:none; }
body.home .site-content .content-area{ width:100%; }
/* ===== Left media stack (final) ===== */
.img-stack{
position:relative;
display:grid;
grid-template-columns: 44% 56%; /* A) small larger */
grid-template-rows: auto auto; /* row1: small, row2: badge */
column-gap:26px;
row-gap:16px;
align-items:start;
max-width:560px;
margin-inline:auto;
}
.img-stack figure{ margin:0; }
.img-stack img{ display:block; width:100%; height:auto; border-radius:14px; }
/* small photo: row 1 / col 1, slightly lifted */
.img-stack__small{
grid-column:1; grid-row:1;
box-shadow:0 14px 32px rgba(0,0,0,.18);
border-radius:14px;
overflow:hidden;
}
/* big photo spans BOTH rows: row 1→3 / col 2 */
.img-stack__main{
grid-column:2; grid-row:1 / 3; /* C) lets badge sit under small */
position:relative;
overflow:visible;
border-radius:18px;
box-shadow:0 22px 46px rgba(0,0,0,.22);
}
.img-stack__badge .badge__percent{font-weight:800;font-size:clamp(36px,4.6vw,60px);line-height:1.05}
.img-stack__badge .badge__label{margin-top:4px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase}
/* Responsive tweaks */
@media (max-width:1024px){
.img-stack{ grid-template-columns:48% 52%; }
}
@media (max-width:640px){
.img-stack{ grid-template-columns:1fr; }
.img-stack__small{ transform:none; }
.img-stack__main{ grid-column:1; grid-row:auto; }
.img-stack__badge{ width:190px; margin-top:10px; }
}
/* BIG IMAGE + BEHIND-FRAME (clean, crisp, offset) */
.img-stack__main{
position: relative;
overflow: visible; /* let the frame extend outside */
border-radius: 16px;
}
.img-stack__main > img{
display: block;
width: 90%;
border-radius: 16px; /* same radius as the frame’s inner corner */
position: relative; /* create stacking context for z-index */
z-index: 2; /* ALWAYS above the frame */
box-shadow: 0 22px 46px rgba(0,0,0,.18); /* soft image shadow */
}
/* (optional) tune on smaller screens so it stays elegant */
@media (max-width: 640px){
.img-stack__frame{
top: -9px; right: -9px; bottom: 9px; left: 9px;
border-width: 2px; border-radius: 18px;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
}
/* tighten left column + make small photo cover its box */
.img-stack{
grid-template-columns: 45% 55%; /* a touch wider small image */
row-gap: 0; /* remove space between small img and badge */
}
/* small image: consistent tall ratio + cover */
.img-stack__small{
transform: none !important;
aspect-ratio: 4 / 5; /* tall card; tweak to 3/4 or 5/7 if you prefer */
}
.img-stack__small img{
width: 100%;
height: 100%;
object-fit: cover; /* fill the card without letterboxing */
border-radius: inherit;
}
/* badge should sit flush under the small image */
.img-stack__badge{
margin-top: 0; /* ensure no extra gap */
align-self: start;
justify-self: start;
}
/* Size the big-image CARD (not the ![]()
) so you don't get double lines */
.img-stack__main{
position: relative;
width: 90%; /* tweak to taste; or set 100% */
justify-self: start;
overflow: visible; /* let the frame extend outside */
}
/* Image fills the card and stays above the frame */
.img-stack__main > img{
display: block;
width: 100%;
height: auto;
border-radius: 16px;
position: relative;
z-index: 2; /* image above frame */
box-shadow: 0 22px 46px rgba(0,0,0,.18);
}
/* Single white offset frame BEHIND the image */
.img-stack__frame{
position: absolute;
top: -12px;
right: -12px;
bottom: 12px;
left: 12px; /* offsets create the top-right shift */
border: 3px solid #fff;
border-radius: 20px; /* a touch larger than img radius for clean corners */
background: transparent;
box-shadow: 0 10px 24px rgba(0,0,0,.10);
z-index: 1; /* behind image */
pointer-events: none;
}
/* Optional: slightly lighter offsets on small screens */
@media (max-width: 640px){
.img-stack__frame{
top: -9px; right: -9px; bottom: 9px; left: 9px;
border-width: 2px; border-radius: 18px;
}
}
/**********************
* CLIENT LOGOS (grid + marquee)
* uses your existing :root tokens
*********************/
:root{
/* tweakables */
--logos-gap: clamp(24px, 4vw, 48px);
--logos-row-gap: clamp(18px, 3vw, 32px);
--logos-opacity: .9;
--logos-speed: 38s; /* marquee loop duration */
}
/* Section + heading */
.tg-logos{ padding-block: clamp(36px, 6vw, 84px); }
.tg-logos__heading{
margin: 0 0 clamp(20px, 3vw, 28px);
text-align: center;
font-size: clamp(18px, 2.1vw, 24px);
font-weight: 700;
}
/* Reset list styles */
.tg-logos__list{ list-style: none; margin: 0; padding: 0; }
/* Each item centers its logo */
.tg-logos__item{
display: flex;
align-items: center;
justify-content: center;
}
.tg-logos__link,
.tg-logos__imgwrap{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-decoration: none;
}
/* Images: height is set inline from ACF; keep aspect and add subtle treatment */
.tg-logos img{
max-width: 100%;
height: auto; /* keep ACF height but prevent overflow */
filter: grayscale(100%);
opacity: var(--logos-opacity);
transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.tg-logos a:hover img{
filter: none;
opacity: 1;
transform: translateY(-2px);
}
/* -------- GRID MODE -------- */
.tg-logos__grid .tg-logos__list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
column-gap: var(--logos-gap);
row-gap: var(--logos-row-gap);
align-items: center;
justify-items: center;
}
/* -------- MARQUEE MODE -------- */
.tg-logos__marquee{ overflow: hidden; }
.tg-logos__track{
display: flex;
width: max-content; /* shrink to its content so translate works cleanly */
gap: var(--logos-gap);
animation: tg-logos-marquee var(--logos-speed) linear infinite;
}
/* Pause on hover so users can click comfortably */
.tg-logos__marquee:hover .tg-logos__track{ animation-play-state: paused; }
/* The lists inside the track sit side-by-side for a seamless loop */
.tg-logos__marquee .tg-logos__list{
display: flex;
gap: var(--logos-gap);
align-items: center;
padding: 0;
margin: 0;
}
@keyframes tg-logos-marquee{
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* one list width (we duplicated it) */
}
/* Small screens: make columns a bit narrower so more fit per row */
@media (max-width: 640px){
.tg-logos__grid .tg-logos__list{
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
/* the list */
.copy-bullets{
list-style: none;
margin: 0;
padding: 0;
}
/* one row: icon + text */
.copy-bullets li{
display: flex;
align-items: center; /* <- vertically center icon with the text */
gap: 10px;
}
/* the icon box (optional fixed size) */
.copy-bullets .ico{
height: 18px;
display: grid;
place-items: center;
}
/* remove baseline spacing from images */
.copy-bullets .ico img{
display: block;
width: 100%;
height: auto;
}
/* ===== Mobile: stack media vertically ===== */
@media (max-width: 560px){
.img-stack{
display:block; /* cancel any grid/flex used on desktop */
position:relative;
}
/* Small image on top, centered */
.img-stack__small{
display:none;
}
/* Big image below, centered */
.img-stack__main{
position:relative; /* for the white frame inside */
width:92%;
max-width:520px;
margin:0 auto; /* center */
}
.img-stack__main img{ width:100%; height:auto; border-radius:14px; display:block; z-index:1; position:relative; }
/* Keep the white offset frame behind the big image */
.img-stack__main .img-stack__frame{
position:absolute;
z-index:0; pointer-events:none;
top:-10px; left:10px; right:-10px; bottom:10px;
border:5px solid #fff; border-radius:16px;
box-shadow:0 18px 40px rgba(0,0,0,.14);
}
/* Badge goes UNDER the images on mobile */
.img-stack__badge{
position:relative; /* override desktop absolute */
left:auto; bottom:auto; /* reset offsets */
width:clamp(180px, 80%, 260px);
margin:12px auto 0; /* centered under images */
padding:14px 16px;
border-radius:10px;
background-color : var(--orange-color); color:#000;
box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.img-stack__badge .badge__percent{ font-weight:800; font-size:clamp(20px,6vw,30px); line-height:1.05; }
.img-stack__badge .badge__label{ margin-top:4px; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
}
/* optionally tighten a bit further on very narrow phones */
@media (max-width: 400px){
.img-stack__main{ width:94%; }
.img-stack__main .img-stack__frame{ top:-8px; left:8px; right:-8px; bottom:8px; border-width:4px; }
}
/* Force the pre-footer CTA to drop below any floats from the content */
.tg-prefooter-cta{ clear: both; width:100%; display:block; }
.tg-prefooter-cta::after{ content:""; display:block; clear:both; }
/* Footer related */
/* layout helper if you use --container */
.tg-container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
/* footer */
.tg-footer{ background: var(--c-black); color: var(--c-text); padding:200px 0 24px; }
.tg-footer--compact { padding-top: 50px; }
.tg-footer__grid > *:not(:first-child){ border-left:1px solid var(--c-divider); padding-left:40px; }
.tg-footer__claim-sub{ color: var(--c-accent); font-weight: 600; }
.tg-footer__claim-title{ font-weight: 600; margin-bottom:10px !important;}
.tg-footer__col-title{ color:#cdd1d6; }
.tg-footer__menu a, .tg-footer__list a{ color: var(--c-link); }
.tg-footer__menu a:hover, .tg-footer__list a:hover{ color: var(--c-link-hover); }
.tg-footer__address{ color: var(--c-text-muted); white-space:pre-line; }
.tg-footer__bottom{ border-top:1px solid var(--c-divider); }
.tg-footer__copy{ color: var(--c-text-subtle); }
/* button */
.tg-btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; font-weight:600; text-decoration:none; }
.tg-btn--light{ background: var(--c-black-2); color: var(--c-white); border:1px solid var(--c-border); }
.tg-btn--light:hover{ transform: translateY(-1px); }
.tg-footer__bottom{
border-top:1px solid var(--c-divider);
margin-top:36px; padding-top:16px;
display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.tg-footer__copy{ color:var(--c-text-subtle); font-size:14px; }
/* Navigation block in Footer Bar widget */
.tg-footer__social .wp-block-navigation__container{
display:flex; gap:18px; align-items:center;
}
.tg-footer__social .wp-block-navigation a{ color:var(--c-link); text-decoration:none; }
.tg-footer__social .wp-block-navigation a:hover{ color:#fff; }
/* Menu fallback (wp_nav_menu) */
.tg-footer__social-menu,
.tg-footer__social-menu li{ list-style:none; margin:0; padding:0; }
.tg-footer__social-menu{ display:flex; gap:18px; }
.tg-footer__social-menu a{ color:var(--c-link); text-decoration:none; }
.tg-footer__social-menu a:hover{ color:#fff; }
.tg-footer__bottom{
border-top:1px solid var(--c-divider);
margin-top:36px; padding-top:16px;
display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.tg-footer__copy{ color:var(--c-text-subtle); font-size:14px; }
/* Navigation block in Footer Bar widget */
.tg-footer__social .wp-block-navigation__container{
display:flex; gap:18px; align-items:center;
}
.tg-footer__social .wp-block-navigation a{ color:var(--c-link); text-decoration:none; }
.tg-footer__social .wp-block-navigation a:hover{ color:#fff; }
/* Menu fallback (wp_nav_menu) */
.tg-footer__social-menu,
.tg-footer__social-menu li{ list-style:none; margin:0; padding:0; }
.tg-footer__social-menu{ display:flex; gap:18px; }
.tg-footer__social-menu a{ color:var(--c-link); text-decoration:none; }
.tg-footer__social-menu a:hover{ color:#fff; }
/* === Footer grid: 3 columns (brand / links / contact+address) === */
.tg-footer__grid{
display:grid;
grid-template-columns: 1.35fr 1fr 1fr; /* left wider */
gap: 56px;
}
/* Vertical dividers between columns (not on the first column) */
.tg-footer__grid > *:not(:first-child){
border-left: 1px solid var(--c-divider);
padding-left: 56px;
}
/* When Contact + Address are stacked in same col, space them a bit */
.tg-footer__col--stack > * + *{ margin-top: 28px; }
/* Footer titles & text */
.tg-footer__col .wp-block-heading,
.tg-footer__col h4.tg-footer__col-title{
letter-spacing: .06em;
color: #ffffff;
text-transform: uppercase;
margin: 2px 0 14px;
font-size:20px;
}
/* Links list (Quick Links) */
.tg-footer__col .tg-footer__menu li a,
.tg-footer__col .wp-block-navigation__container a{
display:inline-block;
padding: 6px 0;
}
/* >>> Link colors & states (no blue, no underline) <<< */
.tg-footer a,
.tg-footer__social-menu a,
.tg-footer__social .wp-block-navigation__container a{
color: var(--c-link); /* your footer link color token */
text-decoration: none;
}
.tg-footer .tg-btn a{
color: var(--btn-fg) !important;
}
.tg-footer__social-menu a:hover,
.tg-footer__social .wp-block-navigation__container a:hover{
color: #fff; /* hover = white */
text-decoration: none;
}
.tg-footer a:visited,
.tg-footer__social-menu a:visited,
.tg-footer__social .wp-block-navigation__container a:visited{
color: var(--c-link); /* keep same as normal (no blue) */
text-decoration: none;
}
/* Bottom bar */
.tg-footer__bottom{
border-top: 1px solid var(--c-divider);
margin-top: 40px; padding-top: 18px;
display:flex; justify-content:space-between; align-items:center;
gap: 16px; flex-wrap:wrap;
}
.tg-footer__copy{ color: var(--c-text-subtle); font-size: 14px; }
/* Social pipes */
.tg-footer__social .wp-block-navigation__container{ display:flex; gap:18px; }
.tg-footer__social .wp-block-navigation__container > li + li::before,
.tg-footer__social-menu li + li::before{
content:"|"; color: var(--c-text-subtle); opacity:.7; margin:0 10px 0 6px;
}
/* Responsive stacking */
@media (max-width: 980px){
.tg-footer__grid{ grid-template-columns: 1fr 1fr; }
.tg-footer__grid > *:nth-child(3){ border-left:none; padding-left:0; }
.tg-footer__grid > *:nth-child(1){ border-left:none; padding-left:0; }
.tg-footer__grid > *:nth-child(2){ border-left:none; padding-left:0; }
}
@media (max-width: 640px){
.tg-footer__grid{ grid-template-columns: 1fr; }
.tg-footer__grid > *{ border-left:none; padding-left:0; }
}
/* Footer social — horizontal + pipes */
.tg-footer__social .menu,
.tg-footer__social .wp-block-navigation__container,
.tg-footer__social-menu{
display:flex;
align-items:center;
gap:18px; /* spacing between items (pipes add a little too) */
margin:0; padding:0; list-style:none;
}
/* Pipes */
.tg-footer__social .menu > li + li::before,
.tg-footer__social .wp-block-navigation__container > li + li::before,
.tg-footer__social-menu li + li::before{
content:"|";
color: var(--c-text-subtle);
opacity:.7;
margin:0 10px 0 6px;
}
/* Links (no underline/blue, hover = white) */
.tg-footer__social a{
color: var(--c-link);
text-decoration:none;
}
.tg-footer__social a:hover{ color:#fff; text-decoration:none; }
.tg-footer__social a:visited{ color: var(--c-link); }
.tg-footer__bottom{
display:flex;
align-items:center;
gap:16px;
border-top:1px solid var(--c-divider);
padding-top:18px;
margin-top:40px;
}
.tg-footer__social{ margin-left:auto; } /* <— pushes social to far right */
/* =========================
Base button — applies almost everywhere
========================= */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button,
.wp-block-button__link,
.button,
a.button,
.tg-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding: var(--btn-pad-y) var(--btn-pad-x);
border-radius: var(--btn-radius);
background: var(--btn-bg);
color: var(--btn-fg);
border: 0;
box-shadow: var(--btn-shadow), var(--btn-ring);
line-height: 1.1;
font-weight: 600;
text-decoration: none;
cursor: pointer;
/* the blur/saturation you copied */
-webkit-backdrop-filter: saturate(140%) blur(2px);
backdrop-filter: saturate(140%) blur(2px);
transition: background .15s ease, color .15s ease, transform .02s ease-in-out;
text-transform: none; /* keep normal case */
}
/* Hover / active */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.button:hover,
a.button:hover,
.tg-btn:hover{
background: var(--btn-bg-hover);
color: var(--btn-fg-hover);
text-decoration: none;
}
button:active,
input[type="submit"]:active,
.wp-element-button:active,
.wp-block-button__link:active,
.button:active,
a.button:active,
.tg-btn:active{
transform: translateY(1px);
}
/* =========================
Left icon tile
-------------------------
By default we add it on anchor/buttons that can host ::before.
Add .no-icon if you need to opt out for a specific case.
========================= */
.wp-element-button:not(.no-icon),
.wp-block-button__link:not(.no-icon),
.tg-btn:not(.no-icon),
a.button:not(.no-icon){
position: relative;
padding-left: calc(var(--btn-pad-x) + var(--btn-icon-size) + 14px);
}
.wp-element-button:not(.no-icon)::before,
.wp-block-button__link:not(.no-icon)::before,
.tg-btn:not(.no-icon)::before,
a.button:not(.no-icon)::before{
content: "→"; /* change to "›" if you prefer */
display:inline-grid;
place-items:center;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
border-radius: var(--btn-icon-radius);
background: var(--btn-icon-bg);
color: var(--btn-icon-fg);
font-weight: 700;
position: absolute;
left: var(--btn-icon-left);
top: 50%;
transform: translateY(-50%);
}
/* Inputs (submit/button) can’t have ::before reliably; keep them styled but iconless */
input[type="submit"],
input[type="button"],
input[type="reset"]{
padding-left: var(--btn-pad-x);
}
/* Optional: footer contrast ring looks good on dark background */
.tg-footer .wp-element-button,
.tg-footer .wp-block-button__link,
.tg-footer .button,
.tg-footer .tg-btn{
box-shadow: var(--btn-shadow), inset 0 0 0 2px rgba(255,255,255,.20);
}
/********************
* Pre-footer section (vector mesh panel)
* Uses global tokens:
* --mesh-grid-img (PNG URL), --mesh-panel-max-w, --mesh-panel-h,
* --mesh-panel-opacity, --page-gutter, --site-container
********************/
.tg-prefooter-cta{
position: relative;
z-index: 2; /* sit above the footer */
padding: clamp(28px, 4vw, 44px) 0 0; /* top spacing only */
}
.tg-prefooter-cta__card{
position: relative;
background: var(--offwhite-color);
border-radius: 0px;
padding: clamp(32px, 5vw, 72px);
box-shadow: 0 8px 28px rgba(0,0,0,.06);
--prefooter-mesh-opacity: .60;
/* Make the card sit “over” the footer edge */
transform: translateY(var(--overlap-depth));
margin-bottom: calc(var(--overlap-depth) * -1);
/* Needed so the image panel never overflows rounded edges */
overflow: hidden;
/* Content centered (unchanged) */
text-align: center;
}
/* === Vector image panel behind the copy/button ===
Replaces the old linear-gradient grid.
The PNG carries its own fade so we just place it centered.
*/
.tg-prefooter-cta__card::after{
content: "";
position: absolute;
z-index: 0; /* behind title/sub/button */
pointer-events: none;
/* center a “panel” with a clean inset */
left: 50%;
top: 50%;
width: min(var(--prefooter-mesh-max-w, var(--mesh-panel-max-w)),
calc(100% - (var(--grid-inset) * 2)));
height: var(--prefooter-mesh-h, var(--mesh-panel-h));
transform: translate(-50%, -50%);
border-radius: inherit;
/* draw the reusable mesh image */
background-image: var(--mesh-grid-img);
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* preserve image aspect */
opacity: var(--prefooter-mesh-opacity, var(--mesh-panel-opacity));
}
/* Keep the real content above the panel */
.tg-prefooter-cta__card > *{
position: relative;
z-index: 1;
}
/* Footer should stay under the overlapping card */
.tg-footer{ position: relative; z-index: 1; }
/* Typography (unchanged) */
.tg-prefooter-cta__title{
margin: 0 0 .35em;
line-height: 1.1;
font-weight: 600;
font-size: 50px;
}
.tg-prefooter-cta__sub{
max-width: 45ch; /* keep the line length readable */
margin: 0 auto 1.2rem; /* center horizontally */
}
.tg-prefooter-cta__card .tg-btn{
display: inline-flex; /* keep your icon+label layout */
margin: .25rem auto 0; /* center the button */
}
/**********************************************************
* HOME ONLY — Centered Message layout
* Targets the section rendered by tg_render_centered_message_layout()
* without impacting other pages.
*
* Notes:
* - Works whether your homepage is the blog index (body.home)
* or a static page (body.front-page).
* - If you want to scope to a single page only, replace the
* `.home, .front-page` prefix with `.page-id-123`.
**********************************************************/
/* Section vertical rhythm (home only) */
.home .tg-centered,
.front-page .tg-centered{
/* Safe, responsive spacing (tweak as needed) */
--space-tight: clamp(24px, 6vw, 48px);
--space-normal: clamp(48px, 8vw, 40px);
--space-loose: clamp(72px, 12vw, 140px);
padding-block: var(--space-normal); /* default = "normal" */
}
/* Spacing variants from ACF: tight | normal | loose */
.home .tg-centered.is-tight,
.front-page .tg-centered.is-tight{
padding-block: var(--space-tight);
}
.home .tg-centered.is-loose,
.front-page .tg-centered.is-loose{
padding-block: var(--space-loose);
}
/* Inner wrapper: centered and width-limited like your reference */
.home .tg-centered .tg-centered__inner,
.front-page .tg-centered .tg-centered__inner{
max-width: var(--text-max, 720px); /* use your token if defined */
margin-inline: auto;
text-align: center;
}
/* Optional eyebrow */
.home .tg-centered .tg-eyebrow,
.front-page .tg-centered .tg-eyebrow{
display: inline-block;
margin-bottom: 8px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #6b7280; /* neutral-500 */
}
/* Heading */
.home .tg-centered .tg-h1,
.front-page .tg-centered .tg-h1{
margin: 0 0 12px;
font-weight: 700;
line-height: 1.2;
color: #111;
}
/* Body copy */
.home .tg-centered .tg-body,
.front-page .tg-centered .tg-body{
max-width: 60ch; /* ensure readable line length */
margin-inline: auto; /* keep centered */
}
.home .tg-centered .tg-body p,
.front-page .tg-centered .tg-body p{
margin: 0;
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.65;
color: #1f2937; /* neutral-800 */
}
.home .tg-centered .tg-body p + p,
.front-page .tg-centered .tg-body p + p{
margin-top: .75em; /* spacing between paragraphs */
}
/* (Optional) If you want a slightly tighter stack on very small screens */
@media (max-width: 420px){
.home .tg-centered,
.front-page .tg-centered{
padding-block: clamp(32px, 9vw, 64px);
}
}
/* ================================
Split Features (homepage only)
Markup: .tg-split-features …
================================ */
.tg-split-features{
--gap: clamp(24px, 3vw, 40px); /* col gap */
--row-gap: clamp(20px, 7vw, 50px); /* space between rows */
--pad-y: clamp(20px, 2.8vw, 32px);
--pad-x: clamp(24px, 3.5vw, 40px);
--max-width: 1200px;
}
/* spacing modifiers (tight|normal|loose) */
.tg-split-features--tight { --row-gap: clamp(36px, 5vw, 64px); }
.tg-split-features--loose { --row-gap: clamp(72px, 9vw, 120px); }
.tg-split-features .tg-container{
max-width: var(--max-width) !important;
}
.tg-split-features__row{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
margin-bottom: var(--row-gap);
}
.tg-split-features__row:last-child{ margin-bottom: 0; }
/* alternate sides */
.tg-split-features__row--img-left { grid-template-areas: "media card"; }
.tg-split-features__row--img-right { grid-template-areas: "card media"; }
.tg-split-features__media{ grid-area: media; border-radius: var(--radius); overflow: hidden; }
.tg-split-features__img{
display:block; width:100%; height:100%;
object-fit: cover;
/* ensure pleasant height even if the image is narrow */
aspect-ratio: 16/10; /* remove if you prefer natural height */
}
.tg-split-features__card{
grid-area: card;
background: #fff;
border-radius: var(--radius);
padding: var(--pad-y) var(--pad-x);
display:flex; flex-direction:column; justify-content:center;
}
/* tinted/plain variants */
.tg-split-features__card--tinted { background: var(--light-brown-color); }
.tg-split-features__card--plain { background: #fff; }
/* title + list */
.tg-split-features__title{
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(22px, 2.1vw, 28px);
margin: 0 0 12px;
}
.tg-split-features__list{
margin: 0;
padding-left: 1.25rem; /* bullets */
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.7;
}
.tg-split-features__item{ margin: 0 0 8px; }
.tg-split-features__item:last-child{ margin-bottom: 0; }
/* Responsive: stack on tablet/phone */
@media (max-width: 900px){
.tg-split-features__row{
grid-template-columns: 1fr;
grid-template-areas:
"media"
"card"; /* image first, then text on small screens */
}
.tg-split-features__img{ aspect-ratio: 16/11; }
.tg-split-features__card{ padding: clamp(18px, 4vw, 28px); }
}
/*************************************************
* Black CTA panel — mesh via PNG (reusable token)
* Markup:
*************************************************/
.tg-blackgrid{
position: relative;
background: var(--black-bg);
color: var(--c-text, #e9eaee);
text-align: center;
overflow: hidden; /* clip the mesh panel */
}
/* Content container */
.tg-blackgrid__inner{
position: relative;
max-width: var(--container, var(--site-container));
margin-inline: auto;
padding-inline: var(--text-gutter, var(--page-gutter));
padding-block: clamp(48px, 9vw, 70px);
}
/* Optional spacing variants */
.tg-blackgrid--tight .tg-blackgrid__inner{ padding-block: clamp(32px, 6vw, 100px); }
.tg-blackgrid--loose .tg-blackgrid__inner{ padding-block: clamp(72px,12vw,180px); }
/* ========= Image “panel” behind the text =========
- The PNG already carries its own subtle fade.
- You can override the image per section via --tg-mesh-img if needed.
*/
.tg-blackgrid.has-lines .tg-blackgrid__inner::before{
content: "";
position: absolute;
z-index: 0; /* sit under the text/button */
pointer-events: none;
/* center the panel behind the content */
left: 50%;
top: 50%;
width: min(var(--mesh-panel-max-w),
calc(100% - (var(--text-gutter, var(--page-gutter)) * 2)));
height: var(--mesh-panel-h);
transform: translate(-50%, -50%);
/* draw the mesh image */
background-image: var(--tg-mesh-img, var(--mesh-grid-img));
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* preserve image aspect */
opacity: var(--mesh-panel-opacity);
}
/* Scale the panel with spacing modifiers */
.tg-blackgrid--tight .tg-blackgrid__inner::before{ height: calc(var(--mesh-panel-h) * .78); }
.tg-blackgrid--loose .tg-blackgrid__inner::before{ height: calc(var(--mesh-panel-h) * 1.25); }
/* Hide the panel when you don’t want lines */
.tg-blackgrid.no-lines .tg-blackgrid__inner::before{ display: none; }
/* Keep all content above the mesh */
.tg-blackgrid__inner > *{ position: relative; z-index: 1; }
/* (Optional) Typography – keep yours or adjust */
.tg-blackgrid__title{
font-weight: 800;
font-size: clamp(50px, 6vw, 105px);
line-height: 1.1;
margin: 0 0 12px;
color: var(--c-white, #fff);
}
.tg-blackgrid__lead{
color: var(--c-text-muted, #cfd3db);
font-size: clamp(14px, 2.2vw, 25px);
margin: 0 0 24px;
}
/*************************************************
* Results section
* Markup classes: .tg-results, __head, __title, __sub,
* __grid, __card, __value, __label,
* __accessory, __launch, __img, __cta
*************************************************/
:root{
/* Tunables (palette + rhythm) */
--results-teal: #AFE7E2; /* card 1 & 3 border */
--results-orange: #F2633B; /* card 2 border */
--results-card-bg:#F7F8F8; /* inner card background */
--results-muted: #6B7078; /* small text */
--results-gap: clamp(18px, 3vw, 28px);
--results-radius: 4px;
--results-brd: 3px; /* border thickness */
}
/* Heading block */
.tg-results__head{
max-width: 74ch;
margin: 0 auto clamp(22px, 3.5vw, 36px);
}
.tg-results__sub{
margin: 0;
color: var(--results-muted);
font-size: clamp(14px, 1.6vw, 20px);
}
/* Three cards */
.tg-results__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--results-gap);
align-items: stretch;
margin-top: clamp(20px, 4vw, 32px);
}
@media (max-width: 900px){
.tg-results__grid{ grid-template-columns: 1fr; }
}
/* Card shell */
.tg-results__card{
position: relative;
background: var(--results-card-bg);
border: var(--results-brd) solid transparent;
border-radius: var(--results-radius);
padding: clamp(18px, 3.2vw, 28px);
min-height: 150px;
display: grid;
grid-template-columns: 1fr auto;
grid-auto-rows: min-content;
align-items: center;
column-gap: 16px;
row-gap: 10px;
text-align: left;
}
.tg-results__card.is-teal{ border-color: var(--results-teal); }
.tg-results__card.is-orange{ border-color: var(--results-orange); }
/* Big number on the left */
.tg-results__value{
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
font-size: clamp(32px, 6.2vw, 60px);
}
/* Accessory on the right (arrow dot or portrait) */
.tg-results__accessory{
grid-row: 1 / span 2; /* vertically center alongside number + label */
justify-self: end;
}
.tg-results__launch{
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 999px;
background: #111; color: #fff;
font-size: 16px; line-height: 1;
}
.tg-results__img{
width: 58px; height: 90px;
object-fit: cover;
border-radius: 18px; /* “pill” portrait */
display: block;
}
/* Small uppercase label under number (spans full width) */
.tg-results__label{
padding-bottom: 30px;
grid-column: 1 / -1;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--results-muted);
}
/* CTA under the grid */
.tg-results__cta{ margin-top: clamp(16px, 3vw, 28px); }
.tg-results{
/* local tunables (no new globals) */
--_border-teal: var(--light-green-color);
--_border-orange: var(--orange-color);
--_card-bg: var(--offwhite-color, #F8F7F6);
--_muted: #6B7078;
--_gap: clamp(18px, 3vw, 28px);
--_radius: 4px;
--_border-w: 3px;
padding: clamp(10px, 9vw, 20px) 0;
text-align: center;
}
.tg-results .tg-container{
max-width: var(--smaller-container);
margin-inline: auto;
padding-inline: var(--text-gutter, clamp(16px, 3vw, 32px));
}
/* Headings */
.tg-results__head{
max-width: 74ch;
margin: 0 auto clamp(22px, 3.5vw, 36px);
}
.tg-results__title{
margin: 0 0 8px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
font-size: clamp(28px, 5vw, 50px);
}
/* Grid */
.tg-results__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--_gap);
align-items: stretch;
margin-top: clamp(20px, 4vw, 32px);
}
@media (max-width: 900px){
.tg-results__grid{ grid-template-columns: 1fr; }
}
/* Card */
.tg-results__card{
position: relative;
background: var(--_card-bg);
border: var(--_border-w) solid transparent;
border-radius: var(--_radius);
padding: clamp(18px, 3.2vw, 28px);
min-height: 150px;
display: grid;
grid-template-columns: 1fr auto;
grid-auto-rows: min-content;
align-items: center;
column-gap: 16px;
row-gap: 10px;
text-align: left;
}
.tg-results__card.is-teal{ border-color: var(--_border-teal); }
.tg-results__card.is-orange{ border-color: var(--_border-orange); }
/* Big number */
.tg-results__value{
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
font-size: clamp(32px, 6.2vw, 60px);
}
/* Right accessory: arrow or portrait */
.tg-results__accessory{
grid-row: 1 / span 2; /* vertically center */
justify-self: end;
}
.tg-results__launch{
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 999px;
background: #111; color: #fff;
font-size: 16px; line-height: 1;
}
.tg-results__img{
width: 58px; height: 90px;
object-fit: cover;
border-radius: 18px; /* pill portrait */
display: block;
}
/* Small uppercase label */
.tg-results__label{
grid-column: 1 / -1;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--_muted);
}
.tg-results__cta{ margin-top: clamp(16px, 3vw, 28px); }
.tg-results__grid{
gap: clamp(22px, 3vw, 32px); /* a touch more breathing room */
}
/* all cards: deeper padding, equal height, nicer corner */
.tg-results__card{
padding: clamp(24px, 4vw, 36px);
min-height: 190px;
border-radius: 6px;
column-gap: clamp(18px, 2.6vw, 32px);
}
/* middle card specifically (also works if you keep .is-orange) */
.tg-results__card.is-orange{
border-color: var(--_border-orange);
padding-right: clamp(28px, 5vw, 44px); /* keeps portrait off the border */
}
/* number & label rhythm */
.tg-results__value{
font-size: clamp(36px, 6.4vw, 64px);
letter-spacing: -0.02em;
}
.tg-results__label{
margin-top: 8px;
font-size: 12px;
letter-spacing: .16em;
}
/* keep the right accessory perfectly centered */
.tg-results__accessory{ align-self: center; }
/* portrait “pill”: scale, rounded corners, subtle border & shadow */
.tg-results__img{
width: 64px;
height: 96px;
object-fit: cover;
border-radius: 22px; /* pill shape like the mock */
box-shadow: 0 6px 16px rgba(0,0,0,.12);
border: 1px solid rgba(0,0,0,.06);
display: block;
}
/* arrow-dot size to match mock */
.tg-results__launch{
width: 32px;
height: 32px;
font-size: 14px;
}
/**********************************************
* RESULTS — force left value / right accessory
* Works for all cards; especially fixes middle one
**********************************************/
/* Define explicit grid areas so order can’t drift */
.tg-results__card{
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"value accessory"
"label accessory";
}
/* Place each element into its area */
.tg-results__value{ grid-area: value; }
.tg-results__label{ grid-area: label; }
.tg-results__accessory{
grid-area: accessory;
justify-self: end; /* push to the right edge within padding */
align-self: center; /* vertically centered beside value/label */
}
/* Middle card spacing so the portrait never feels cramped */
.tg-results__card.is-orange{
padding-right: clamp(28px, 5vw, 44px);
}
/* Portrait “pill” (keeps it neat on the right) */
.tg-results__img{
width: 64px;
height: 96px;
object-fit: cover;
border-radius: 22px;
box-shadow: 0 6px 16px rgba(0,0,0,.12);
border: 1px solid rgba(0,0,0,.06);
display: block;
}
/* Responsive tweak: on narrow screens, keep image right but let label span full width */
@media (max-width: 640px){
.tg-results__card{
grid-template-areas:
"value accessory"
"label label";
}
}
/*************************************
* Hotline CTA (scoped)
*************************************/
/* Limit width just for this block */
.tg-hotline .tg-container{
max-width: 1500px;
margin-inline: auto;
padding-inline: var(--text-gutter, 16px);
}
/* The “pill” row */
.tg-hotline__row{
display: flex;
align-items: center;
justify-content: flex-start; /* keep avatars close to the text */
gap: 12px; /* small, consistent spacing */
background: var(--offwhite-color, #F8F7F6);
border-radius: 12px;
padding: 14px 16px;
}
/* Message */
.tg-hotline__msg{
margin: 0;
line-height: 1.35;
font-size: clamp(15px, 1.4vw, 26px);
flex: 1 1 auto;
letter-spacing: -1px;
font-weight:600;
}
/* Avatars (stacked, tight to the text) */
.tg-hotline__avatars{
display: flex;
align-items: center;
gap: 0; /* we’ll overlap instead of gap */
margin-left: 6px;
}
/* Each avatar: circle, white border, overlap slightly */
.tg-hotline__avatars > img.tg-hotline__avatar{
width: 50px;
height: 50px;
border-radius: 9999px;
object-fit: cover;
border: 3px solid #fff; /* white ring as requested */
box-shadow: 0 1px 4px rgba(0,0,0,.06);
margin-left: -8px; /* stack/overlap */
background: #fff; /* fallback behind transparent PNGs */
}
/* Background colors for transparent avatars in order: black, orange, red */
.tg-hotline__avatars > img.tg-hotline__avatar:nth-child(1){
background: var(--c-black, #0d0e10);
}
.tg-hotline__avatars > img.tg-hotline__avatar:nth-child(2){
background: var(--c-accent, #ff6a2a);
}
.tg-hotline__avatars > img.tg-hotline__avatar:nth-child(3){
background: var(--red-color, #ff3b30);
}
/* CTA button sits right after avatars */
.tg-hotline__cta{
margin-left: 12px;
}
/* Mobile: allow wrap but keep a tidy layout */
@media (max-width: 640px){
.tg-hotline__row{
flex-wrap: wrap;
gap: 10px 12px;
}
.tg-hotline__avatars{ order: 2; }
.tg-hotline__cta{ order: 3; margin-left: auto; }
}
/*******************************
* Client Stories Slider (global)
* Layout: left header column + right scrollable rail
*******************************/
.tg-stories{
padding-block: clamp(10px, 6vw, 20px);
background: transparent;
}
/* container safety (supports either wrapper) */
.tg-stories > .tg-stories__container,
.tg-stories > .tg-container{
max-width: var(--container, 1200px);
margin-inline: auto;
}
/* Two-column row: left header / right rail */
.tg-stories__wrap{
display: grid;
grid-template-columns: minmax(260px, 360px) 1fr; /* left column stays compact like the comp */
align-items: start;
gap: clamp(20px, 4vw, 48px);
}
/* Stack on small screens (header above rail) */
@media (max-width: 900px){
.tg-stories__wrap{ display:block; }
}
/* =================
Left header stack
================= */
.tg-stories__head{ margin: 0 0 clamp(14px, 2vw, 18px); }
.tg-stories__title{
margin: 0 0 14px;
font-weight: 700;
line-height: 1.15;
font-size: clamp(24px, 2.6vw, 34px);
color: var(--c-text, #111);
}
.tg-stories__meta{
display: flex;
align-items: center;
gap: 14px;
}
/* Lead avatars: small, overlapped, white ring + colored backer for transparent PNGs */
.tg-stories__lead-avatars{
display: inline-flex;
align-items: center;
}
.tg-stories__lead-avatar{
width: 40px; height: 40px;
border-radius: 999px;
overflow: hidden;
object-fit: cover;
display: block;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
border: 3px solid #fff;
background: #000; /* fallback if avatar is transparent */
}
.tg-stories__lead-avatars .tg-stories__lead-avatar + .tg-stories__lead-avatar{ margin-left: -8px; }
.tg-stories__lead-avatars .tg-stories__lead-avatar:nth-child(1){ background: var(--blue-color); } /* blue */
.tg-stories__lead-avatars .tg-stories__lead-avatar:nth-child(2){ background: var(--orange-color); } /* orange */
.tg-stories__lead-avatars .tg-stories__lead-avatar:nth-child(3){ background: var(--red-color); } /* red */
/* Stat: “100+ Nationwide clients” */
.tg-stories__stat{ display:flex; align-items:center; gap:6px; }
.tg-stories__stat-count{ font-weight:700}
.tg-stories__stat-label{
font-size: 12px;
letter-spacing:.06em;
text-transform: uppercase;
color: var(--c-text-subtle, #8b919a);
}
/* ============================
Right rail: horizontal scroll
============================ */
.tg-stories__rail{
display: flex;
gap: clamp(16px, 2.2vw, 22px);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 16px;
/* Edge-to-edge feel on phones */
margin-inline: calc(var(--text-gutter, 24px) * -1);
padding-inline: var(--text-gutter, 24px);
}
/* Keep rail aligned with container on desktop */
@media (min-width: 900px){
.tg-stories__rail{
margin-inline: 0;
padding-inline: 0;
}
}
/* Hide scrollbars (safe) */
.tg-stories__rail::-webkit-scrollbar{ display:none; }
.tg-stories__rail{ scrollbar-width: none; }
/* Cards */
.tg-stories__card{
scroll-snap-align: start;
min-width: clamp(280px, 45vw, 300px);
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 26px rgba(0,0,0,.08);
padding: clamp(16px, 2.4vw, 22px);
}
/* Rating row */
.tg-stories__rating{
display:flex; align-items:center; gap:8px;
margin-bottom: 10px;
}
.tg-stories__rating-text{ font-weight:600; font-size: 13px;}
.tg-stories__stars .star{
width:16px; height:16px;
display:inline-block;
fill:#FDB022; /* star color */
}
.tg-stories__stars .star.half stop:first-child{ stop-color:#FDB022; }
/* Quote (with subtle left rule like the comp) */
.tg-stories__quote{
margin: 6px 0 16px;
padding-left: 14px;
border-left: 3px solid rgba(17, 24, 39, .08); /* #111827 @ 8% */
color: #333;
font-size: 12px;
line-height: 1.6;
}
/* Byline */
.tg-stories__footer{ display:flex; align-items:center; gap:10px; }
.tg-stories__avatar{
width:36px; height:36px;
border-radius:999px;
object-fit:cover;
display:block;
}
.tg-stories__byline{ line-height: 1.2; }
.tg-stories__name{ font-weight:600}
.tg-stories__title{ font-size: 12px; color: var(--c-text-subtle, #8b919a); }
.tg-stories__head .tg-stories__title {font-size:32px !important; color: #222222}
/* Small polish on larger screens */
@media (min-width: 992px){
.tg-stories__head{ margin-bottom: 0; }
}
.tg-stories__rail { overscroll-behavior-x: contain; cursor: grab; }
.tg-stories__rail.is-dragging { cursor: grabbing; }
/* Make every card a vertical flex stack and pin footer to bottom */
.tg-stories__card{
display: flex;
flex-direction: column;
min-height: var(--stories-card-min-h, 320px); /* tweak if you want taller cards */
}
.tg-stories__footer{
margin-top: auto; /* this is the pin-to-bottom */
padding-top: 10px; /* comfy spacing from the quote */
}
/* --- Stories footer alignment fix --- */
.tg-stories__footer{
/* put avatar + text on one row, perfectly aligned */
display: grid;
grid-template-columns: 44px 1fr; /* avatar width, then text */
align-items: center; /* vertical centering */
column-gap: 12px;
margin-top: auto; /* keep footer stuck to bottom */
}
.tg-stories__avatar{
width: 44px;
height: 44px;
border-radius: 999px;
object-fit: cover;
display: block; /* remove inline-image baseline gap */
flex: 0 0 44px; /* if any flex parent applies */
}
.tg-stories__byline{
display: flex;
flex-direction: column;
justify-content: center; /* center the two lines vs the avatar */
min-height: 44px; /* same height as avatar for perfect centering */
line-height: 1.2;
}
.tg-stories__title{
margin: 0;
font-size: 12px;
color: var(--c-text-subtle, #8b919a);
line-height: 1.1;
}
/* Eyebrow with leading rule (stories header) */
.tg-stories__eyebrow{
display: inline-flex; /* let the rule sit inline with the text */
align-items: center;
gap: 12px; /* space between the rule and the label */
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-text-subtle, #8b919a);
margin: 0 0 8px;
}
/* the small line before “HAPPY TO SAY” */
.tg-stories__eyebrow::before{
content: "";
display: inline-block;
width: 28px; /* tweak length to taste */
height: 2px; /* line thickness */
background: var(--c-divider, #E6E7EB);/* use your token if you have one */
border-radius: 2px; /* softer ends */
transform: translateY(.5px); /* optical alignment with text baseline */
}
/* (Optional) make the rule a touch longer on wide screens */
@media (min-width: 992px){
.tg-stories__eyebrow::before{ width: 32px; }
}
/******************************
* For Leaders (image + copy)
* Markup classes:
* .tg-forleaders
* .tg-container
* .tg-forleaders__grid
* .tg-forleaders__copy
* .tg-forleaders__title
* .tg-forleaders__tagline
* .tg-forleaders__body
* .tg-forleaders__actions (optional CTA)
* .tg-forleaders__media
* .tg-forleaders__figure
* .tg-forleaders__img
******************************/
/* Section wrapper */
.tg-forleaders{
padding: clamp(40px, 8vw, 50px) 0;
background: #fff;
}
/* Constrain to your smaller container */
.tg-forleaders .tg-container{
max-width: var(--smaller-container);
margin: 0 auto;
padding: 0 var(--text-gutter);
}
/* Two-column layout (copy left, image right) */
.tg-forleaders__grid{
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(480px, 1fr);
align-items: start;
gap: clamp(24px, 5vw, 64px);
}
/* Left column — headings & text */
.tg-forleaders__title{
margin: 0 0 10px 0;
line-height: 1.05;
font-weight: 700;
font-size: clamp(34px, 5.4vw, 50px);
letter-spacing: -0.01em;
color: #0d0e10; /* dark text */
}
.tg-forleaders__tagline{
margin: 0 0 10px 0;
font-weight: 600;
font-size: clamp(15px, 1.6vw, 26px);
color: #0d0e10;
}
.tg-forleaders__body{
max-width: 48ch;
color: #222;
font-size: clamp(14px, 1.3vw, 20px);
line-height: 1.65;
}
.tg-forleaders__body p{ margin: 0 0 14px; }
/* Right column — image (the badge is baked into the image) */
.tg-forleaders__media{ align-self: start; }
.tg-forleaders__figure{
margin: 0;
position: relative;
border-radius: 0; /* keep square corners like the screenshot */
overflow: hidden;
}
/* The image itself */
.tg-forleaders__img{
display: block;
width: 100%;
height: auto; /* preserve aspect ratio */
-webkit-user-drag: none;
user-select: none;
}
/* Optional CTA row under the copy */
.tg-forleaders__actions{ margin-top: 20px; }
/* ------------------------------
Responsive behavior
------------------------------ */
@media (max-width: 1024px){
.tg-forleaders__grid{
grid-template-columns: 1fr; /* stack */
}
.tg-forleaders__media{
order: 2; /* keep copy above image on mobile */
}
.tg-forleaders__body{ max-width: 60ch; }
}
/* For Leaders — container width */
.tg-forleaders .tg-container{
max-width: var(--smaller-container);
}
/* Grid & spacing */
.tg-forleaders__grid{
display: grid;
grid-template-columns: 1fr 1.15fr; /* text | image */
gap: clamp(28px, 4vw, 56px);
align-items: center; /* center items in the row */
}
/* Desktop: vertically center the whole text stack */
@media (min-width: 992px){
.tg-forleaders__copy{
display: flex;
flex-direction: column;
justify-content: center; /* ⟵ vertical centering */
min-height: 100%; /* ensure full track height for reliable centering */
align-self: center; /* safeguard if parent alignment changes */
}
}
/* Mobile: single column, keep natural (top) flow */
@media (max-width: 991.98px){
.tg-forleaders__grid{ grid-template-columns: 1fr; }
.tg-forleaders__copy{ justify-content: flex-start; }
}
/* ===========================
Three Posts (scoped styles)
Root section: .tg-threeposts
=========================== */
/* Section + container */
.tg-threeposts{
padding: clamp(20px, 6vw, 20px) 0 20px;
}
.tg-threeposts .tg-container{
max-width: var(--container) !important;
margin-inline: auto;
padding-inline: var(--text-gutter);
}
/* Centered subtitle/kicker */
.tg-threeposts .tg-threeposts__subtitle{
text-align: center;
font-weight: 700;
font-size: clamp(26px, 3.4vw, 40px);
line-height: 1.15;
margin: 10px 0 28px;
color: var(--c-black, #0d0e10);
}
/* Grid */
.tg-threeposts .tg-threeposts__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 32px);
align-items: stretch;
}
/* Card */
.tg-threeposts .tg-card{
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0,0,0,.08);
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease;
}
.tg-threeposts .tg-card:hover{
transform: translateY(-4px);
box-shadow: 0 26px 60px rgba(0,0,0,.12);
}
/* Media (consistent ratio) */
.tg-threeposts .tg-card__media{
display:block;
position:relative;
aspect-ratio: 3/2;
background: #f3f4f6;
}
.tg-threeposts .tg-card__media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
/* Body */
.tg-threeposts .tg-card__body{
padding: 16px 20px 22px;
}
/* Category chips (simple, inline text) */
.tg-threeposts .tg-card__cats{
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-text-subtle, #8b919a);
margin: 6px 0 10px;
}
/* Title */
.tg-threeposts .tg-card__title{
margin: 0 0 10px;
font-size: clamp(18px, 2.2vw, 22px);
line-height: 1.25;
color: var(--c-black, #0d0e10);
}
.tg-threeposts .tg-card__title a{
text-decoration: none;
color: inherit;
}
.tg-threeposts .tg-card__title a:hover{
text-decoration: underline;
}
/* Meta + CTA */
.tg-threeposts .tg-card__meta{
font-size: 14px;
color: var(--c-text-subtle, #8b919a);
margin: 0 0 16px;
}
.tg-threeposts .tg-card__cta{
display:inline-flex;
align-items:center;
gap:.45rem;
font-size: 13px;
letter-spacing:.06em;
text-transform: uppercase;
text-decoration:none;
color: var(--c-black, #0d0e10);
}
.tg-threeposts .tg-card__cta::after{
content:'↗';
transform: translate(0,0);
transition: transform .18s ease;
}
.tg-threeposts .tg-card__cta:hover::after{
transform: translate(2px,-2px);
}
/* Responsive */
@media (max-width: 980px){
.tg-threeposts .tg-threeposts__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
.tg-threeposts .tg-threeposts__grid{ grid-template-columns: 1fr; }
}
/* ===== Three-posts heading area ===== */
.tg-threeposts .tg-threeposts__head{
text-align:center;
margin: 0 auto clamp(24px, 4vw, 56px);
max-width: min(980px, 92%);
}
/* Eyebrow: small, uppercase, with divider lines */
.tg-threeposts .tg-threeposts__eyebrow{
display:inline-block;
position:relative;
padding: 0 1rem;
font-size:12px;
line-height:1;
font-weight:600;
text-transform:uppercase;
letter-spacing:.16em;
color: rgba(0,0,0,.55); /* tweak if you need it darker/lighter */
}
/* the short lines left/right of the eyebrow */
.tg-threeposts .tg-threeposts__eyebrow::before,
.tg-threeposts .tg-threeposts__eyebrow::after{
content:"";
display:inline-block;
width: 24px;
height: 1px;
background: currentColor;
opacity:.35;
vertical-align: middle;
margin: 0 .75rem .2rem;
transform: translateY(-.15em);
}
/* Main title */
.tg-threeposts .tg-threeposts__title{
margin: .75rem auto 0;
font-weight: 700;
line-height: 1.1;
letter-spacing: -.015em;
font-size: clamp(28px, 3.2vw, 44px); /* scales like your reference */
color: #111; /* adjust to brand if needed */
}
/* Center the heading block and remove its previous width cap */
.tg-threeposts .tg-threeposts__head{
text-align: center;
max-width: unset; /* override earlier min(980px, 92%) */
margin: 0 auto clamp(20px, 3.5vw, 40px);
}
/* Title centered with a 700px max width */
.tg-threeposts .tg-threeposts__title{
max-width: 700px;
margin: .6rem auto 0; /* centers the block */
/* optional: keep the same size/line-height you already set */
/* font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; */
}
.tg-threeposts .tg-threeposts__header{
max-width:700px;
margin:auto;
text-align:center;
}
.tg-threeposts .tg-threeposts__eyebrow{
margin-bottom:20px;
}
/* ----- Container helper (keeps consistent page width) ----- */
.tg-container{
max-width: var(--text-max, 1200px);
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 28px);
}
/* ----- Post hero band ----- */
.tg-posthero{
position: relative;
background: #111; /* dark band */
color: #fff;
padding: clamp(56px, 7vw, 110px) 0 0; /* top only; image sits below */
overflow: visible;
}
/* subtle grid overlay like your comps */
.tg-posthero__bg{
position: absolute;
inset: 0;
pointer-events: none;
opacity: .22;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 56px 56px, 56px 56px; /* grid size */
background-position: -1px -1px, -1px -1px;
}
/* the big headline */
.tg-posthero__title{
max-width: 700px; /* per your note */
margin: 0 auto; /* centered */
text-align: center;
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.02em;
font-size: clamp(28px, 6.2vw, 64px);
}
/* the featured image block below the title */
.tg-posthero__figure{
width: min(990px, calc(100% - 48px));
margin: clamp(24px, 4vw, 40px) auto -24px; /* pulls image closer to content */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 28px 60px rgba(0,0,0,.35);
background: #000; /* avoids flash on slow loads */
}
.tg-posthero__figure img{
display: block;
width: 100%;
height: auto;
}
/* Give the first content section a bit of breathing room after the image */
.tg-posthero + .inside-article,
.tg-posthero + .site-content .inside-article{
padding-top: clamp(18px, 2.5vw, 28px);
}
/* Ensure GP’s default title area doesn’t leave stray spacing on single posts */
.single-post .entry-header{ display:none; }
/* ===== Single Post Header (scoped) ===== */
.tg-postheader{
color:#fff;
padding: 0px; /* top space; no bottom because white area holds content */
}
.tg-postheader__wrap{
width:min( var(--container, 1200px), 92vw );
margin:0 auto;
text-align:center;
}
/* Title */
.tg-postheader__title{
max-width:700px;
margin:0 auto clamp(24px, 4vw, 40px);
font-size:clamp(28px, 4vw, 48px);
line-height:1.1;
letter-spacing:-.02em;
color:#fff; /* sits on dark top */
}
.tg-postheader__media{
margin:0 auto;
max-width: 1000px; /* feel free to tweak */
width: min(1000px, 92vw);
}
/* Author + categories row */
.tg-postmeta{
display:flex;
align-items:center;
justify-content:center;
gap:16px 28px;
flex-wrap:wrap;
padding: clamp(16px, 3vw, 24px) 0 clamp(8px, 2vw, 16px);
color:#111; /* now on white */
}
.tg-postmeta__avatar{
width:48px; height:48px; border-radius:50%;
object-fit:cover; flex:0 0 48px;
}
.tg-postmeta__who{ text-align:left; }
.tg-postmeta__author{ font-weight:600; }
.tg-postmeta__role{ font-size:.9rem; opacity:.75; }
.tg-postmeta__cats{
text-transform:uppercase;
letter-spacing:.06em;
font-size:.85rem;
opacity:.8;
}
/* Optional: keep article body nicely centered */
.single .inside-article{
max-width: var(--container, 1200px);
margin: 0 auto;
}
/* === Single Post: hero/title + image + meta === */
/* Wrapper is white; the dark/vector band is painted with ::before */
.tg-postheader{
position: relative;
margin: 0 0 18px;
}
.tg-postheader__wrap{ position: relative; z-index: 1; }
/* Top band with vector lines */
.tg-postheader::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height: clamp(240px, 30vw, 360px); /* height of the dark band */
background-color: rgba(30, 30, 30, 1);
background-image:url('https://talexesstg.wpenginepowered.com/wp-content/uploads/2025/11/Vector.png');
background-repeat:repeat;
background-position:center top;
background-size:1200px auto; /* tweak if you want denser/sparser lines */
z-index:0;
}
/* Title */
.tg-postheader__title{
max-width:1000px; /* same as image max width */
margin:0 auto;
padding: clamp(40px, 7vw, 80px) 16px clamp(18px, 3.5vw, 32px);
text-align:center;
color:#fff;
}
/* Featured image – sharp, centered, 1000px cap */
.tg-postheader__media{
display:flex; justify-content:center;
margin:0 auto;
}
.tg-postheader__media img{
max-height:400px;
width:auto;
display:block;
border-radius:0; /* no rounded corners */
box-shadow:none;
}
/* Meta row under the image (author/role left, categories right) */
.tg-postmeta{
max-width: var(--container);
margin: 16px auto 0;
padding: 0 clamp(12px, 2vw, 20px);
display:flex; align-items:center; gap:14px;
}
.tg-postmeta__avatar{
width:48px; height:48px; border-radius:50%; display:block;
}
.tg-postmeta__who{ display:flex; flex-direction:column; line-height:1.2; }
.tg-postmeta__author{ font-weight:600; }
.tg-postmeta__role{ font-size:.875rem; color:#6b7280; } /* muted */
.tg-postmeta__cats{
text-transform:uppercase;
letter-spacing:.02em;
font-size:.875rem;
color:#6b7280;
}
.tg-related {
padding: 10px 0 96px;
background: #fff;
}
.tg-related__inner {
max-width: var(--container, 1200px);
margin: 0 auto;
padding: 0 24px;
}
.tg-related__title {
margin: 0 0 48px;
text-align: center;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.25;
font-weight: 600;
}
.tg-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
@media (max-width: 900px) {
.tg-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.tg-related__grid { grid-template-columns: 1fr; }
}
.tg-related__card {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Card / related images
- full width
- consistent height via aspect-ratio
- crops overflow using object-fit: cover
*/
/* main blog grid */
.tg-blog-card__media {
position: relative;
display: block;
width: 100%;
/* tweak this ratio as you like (e.g. 3/2, 4/3, 16/9) */
aspect-ratio: 16 / 10;
overflow: hidden;
}
.tg-blog-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* related posts grid */
.tg-related__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10; /* keep same ratio for a clean grid */
overflow: hidden;
}
.tg-related__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.tg-related__body {
display: flex;
flex-direction: column;
gap: 6px;
}
.tg-related__cats {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9a9a9a;
}
.tg-related__headline {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: 600;
}
.tg-related__headline a {
color: #111;
text-decoration: none;
}
.tg-related__headline a:hover {
text-decoration: underline;
}
.tg-related__cta {
margin-top: 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #111;
text-decoration: none;
}
.tg-related__cta:hover {
text-decoration: underline;
}
/* =========================================================
BLOG ARCHIVE ( /blog ) – CARD GRID USING EXISTING MARKUP
========================================================= */
/* Wrap posts in a 3-column grid */
.blog .site-main {
max-width: var(--container, 1200px);
margin: 0 auto 80px;
padding: 56px 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
.blog .site-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.blog .site-main {
grid-template-columns: 1fr;
}
}
/* Reset default article spacing inside the grid */
.blog .site-main article {
margin: 0;
}
/* Turn each post into a card */
.blog .site-main article .inside-article {
height: 100%;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
border-radius: 0; /* sharp corners */
padding: 22px 24px 24px;
}
/* Header / title */
.blog .entry-header {
margin: 0 0 10px;
}
.blog .entry-title {
font-size: 22px;
line-height: 1.25;
font-weight: 600;
margin: 0 0 6px;
color: #111827;
}
.blog .entry-title a {
color: inherit;
text-decoration: none;
}
.blog .entry-title a:hover {
text-decoration: underline;
}
/* Top meta: keep date style subtle, remove author */
.blog .entry-header .entry-meta {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9ca3af;
margin: 0;
}
/* Hide author on blog archive */
.blog .entry-header .entry-meta .byline {
display: none;
}
/* Excerpt */
.blog .entry-summary {
margin: 0;
}
.blog .entry-summary p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #6b7280;
}
/* "Read more" as CTA */
.blog .entry-summary .read-more {
display: inline-block;
margin-top: 10px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #111827;
text-decoration: none;
}
.blog .entry-summary .read-more:hover {
text-decoration: underline;
}
/* Bottom meta (categories) – styled, no icon */
.blog footer.entry-meta {
margin-top: auto; /* stick to bottom of card */
padding-top: 16px;
}
.blog footer.entry-meta .gp-icon {
display: none;
}
.blog footer.entry-meta .cat-links {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9ca3af;
}
/* Optional: if you don't want categories here at all, uncomment:
.blog footer.entry-meta { display:none; }
*/
/* =========================================
PAGINATION (default nav-below structure)
========================================= */
.blog .paging-navigation {
max-width: var(--container, 1200px);
margin: 40px auto 0;
text-align: center;
}
.blog .paging-navigation .nav-links {
display: inline-flex;
gap: 10px;
align-items: center;
font-size: 13px;
}
.blog .paging-navigation a,
.blog .paging-navigation span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid transparent;
color: #4b5563;
text-decoration: none;
}
.blog .paging-navigation a:hover {
border-color: #111827;
color: #111827;
}
.blog .paging-navigation .current {
background: #111827;
color: #ffffff;
border-color: #111827;
}
/* Blog archive grid wrapper (using default GP markup) */
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
max-width: var(--container, 1200px);
margin: 0 auto;
}
body.blog .inside-article,
body.archive .inside-article,
body.search .inside-article {
background: #fff;
border-radius: 0;
box-shadow: 0 18px 55px rgba(15, 23, 42, 0.06);
padding: 24px;
margin: 0 0 32px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.blog .inside-article:hover,
body.archive .inside-article:hover,
body.search .inside-article:hover {
transform: translateY(-4px);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}
/* 3-column layout on wide screens */
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
@media (max-width: 1024px) {
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
grid-template-columns: 1fr;
}
}
/* Image injected via tg_blog_archive_card_image() */
.tg-blog-card__media {
display: block;
margin: -24px -24px 18px; /* full-bleed image, like design */
overflow: hidden;
}
.tg-blog-card__media img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
/* Typography inside the card */
body.blog .entry-header,
body.archive .entry-header,
body.search .entry-header {
margin: 0 0 8px;
border: 0;
padding: 0;
}
body.blog .entry-title,
body.archive .entry-title,
body.search .entry-title {
font-size: 22px;
line-height: 1.25;
margin: 0 0 6px;
}
body.blog .entry-title a,
body.archive .entry-title a,
body.search .entry-title a {
text-decoration: none;
color: #111827;
}
body.blog .entry-title a:hover,
body.archive .entry-title a:hover,
body.search .entry-title a:hover {
text-decoration: underline;
}
body.blog .entry-summary,
body.archive .entry-summary,
body.search .entry-summary {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.6;
color: #6b7280;
}
/* Hide byline / meta on archive cards if you don't want them */
body.blog .entry-header .entry-meta,
body.archive .entry-header .entry-meta,
body.search .entry-header .entry-meta,
body.blog .inside-article > .entry-meta,
body.archive .inside-article > .entry-meta,
body.search .inside-article > .entry-meta {
display: none;
}
/* Grid container on blog-like archives */
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
max-width: var(--container, 1200px);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
@media (max-width: 1024px) {
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
grid-template-columns: 1fr;
}
}
/* Card shell */
body.blog .inside-article,
body.archive .inside-article,
body.search .inside-article {
background: #fff;
border-radius: 0;
box-shadow: 0 18px 55px rgba(15, 23, 42, 0.06);
padding: 24px;
margin: 0;
display: flex;
flex-direction: column;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.blog .inside-article:hover,
body.archive .inside-article:hover,
body.search .inside-article:hover {
transform: translateY(-4px);
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}
/* Full-width image on top (from tg_blog_archive_card_image) */
.tg-blog-card__media {
display: block;
margin: -24px -24px 20px;
overflow: hidden;
}
.tg-blog-card__media img {
width: 100%;
height: 230px;
object-fit: cover;
display: block;
}
/* Body (cats → title → text → CTA) */
.tg-blog-card__body {
display: flex;
flex-direction: column;
gap: 8px;
}
.tg-blog-card__cats {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9ca3af;
}
.tg-blog-card__title {
margin: 0;
font-size: 22px;
line-height: 1.25;
font-weight: 600;
color: #111827;
}
.tg-blog-card__title a {
color: inherit;
text-decoration: none;
}
.tg-blog-card__title a:hover {
text-decoration: underline;
}
.tg-blog-card__excerpt {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #6b7280;
}
.tg-blog-card__cta {
margin-top: 10px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #111827;
text-decoration: none;
}
.tg-blog-card__cta:hover {
text-decoration: underline;
}
/* 1. Make sure headers are visible again on archives */
body.blog .entry-header,
body.archive .entry-header,
body.search .entry-header {
display: block;
}
/* 2. Hide the default title + meta inside header (we're replacing them) */
body.blog .entry-header .entry-title,
body.blog .entry-header .entry-meta,
body.archive .entry-header .entry-title,
body.archive .entry-header .entry-meta,
body.search .entry-header .entry-title,
body.search .entry-header .entry-meta {
display: none;
}
/* 3. Hide the default excerpt/footer meta below; we use our custom body instead */
body.blog .entry-summary,
body.archive .entry-summary,
body.search .entry-summary,
body.blog .inside-article > .entry-meta,
body.archive .inside-article > .entry-meta,
body.search .inside-article > .entry-meta {
display: none;
}
.single-post .inside-article .featured-image{
display: none !important;
}
body.blog article .post-image{
display:none !important;
}
.blog .tg-blog-card__media{
width:auto !important;
}
/* Hide default nav as a fallback if it still appears for any reason */
body.blog #nav-below.paging-navigation,
body.archive #nav-below.paging-navigation,
body.search #nav-below.paging-navigation {
display: none !important;
}
/* Make our custom nav a full-width row inside the .site-main grid */
body.blog .tg-blog-nav,
body.archive .tg-blog-nav,
body.search .tg-blog-nav {
grid-column: 1 / -1; /* span all 3 columns */
margin: 32px 0 0;
text-align: left;
font-size: 14px;
}
/* Simple pagination link styling */
.tg-blog-nav .page-numbers {
display: inline-block;
margin-right: 8px;
padding: 4px 8px;
text-decoration: none;
}
.tg-blog-nav .page-numbers.current {
font-weight: 600;
}
/* Blog pagination: full-width row under grid */
body.blog .tg-blog-nav,
body.archive .tg-blog-nav,
body.search .tg-blog-nav {
padding-bottom: 30px;
grid-column: 1 / -1;
margin: 32px 0 72px;
padding-top: 8px;
text-align: left;
font-size: 14px;
}
/* Base page number style */
.tg-blog-nav .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
margin-right: 6px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid transparent;
color: #5B6370;
text-decoration: none;
transition: all 0.2s ease;
}
/* Hover */
.tg-blog-nav .page-numbers:hover {
background: #F5F6F8;
border-color: #E3E6EA;
color: #111827;
}
/* Active page */
.tg-blog-nav .page-numbers.current {
background: #111827; /* swap to your brand color if needed */
border-color: #111827;
color: #FFFFFF;
font-weight: 600;
}
/* Prev / Next labels */
.tg-blog-nav .page-numbers.prev,
.tg-blog-nav .page-numbers.next {
padding: 0 14px;
font-size: 13px;
}
.page-id-36822 .tg-hotline{
margin-top:40px !important;
margin-bottom: 40px !important
}
/* =========================
Contact page: image + form
========================= */
.tg-contact {
max-width: var(--container, 1200px);
margin: 72px auto 120px;
padding: 0 24px;
}
.tg-contact__inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
gap: 64px;
align-items: flex-start;
}
/* Left column image */
.tg-contact__col--media {
display: flex;
justify-content: flex-start;
}
.tg-contact__image {
width: 100%;
height: 543px;
object-fit: cover;
border-radius: 4px;
}
/* Right column: CF7 form wrapper */
.tg-contact__col--form .wpcf7,
.tg-contact__col--form .wpcf7 form {
margin: 0;
padding: 0;
}
.tg-contact__col--form .tg-contact-form {
max-width: 520px;
margin: 0;
}
/* Rows & fields */
.tg-contact-row {
display: flex;
gap: 32px;
margin-bottom: 24px;
}
.tg-contact-row--full {
flex-direction: column;
}
.tg-contact-row--submit {
margin-top: 16px;
}
.tg-field {
flex: 1 1 0;
}
.tg-field label {
display: block;
font-size: 12px;
font-weight: 500;
color: #6b7280;
margin-bottom: 4px;
}
/* Underline input style */
.tg-contact__col--form input[type="text"],
.tg-contact__col--form input[type="email"],
.tg-contact__col--form input[type="tel"],
.tg-contact__col--form input[type="url"],
.tg-contact__col--form textarea {
width: 100%;
border: none;
border-bottom: 1px solid #e5e7eb;
padding: 6px 0 8px;
font-size: 14px;
background: transparent;
border-radius: 0;
outline: none;
box-shadow: none;
transition: border-color .2s ease, color .2s ease;
}
.tg-contact__col--form input:focus,
.tg-contact__col--form textarea:focus {
border-bottom-color: #111827;
}
/* Checkboxes inline */
.tg-checkbox-inline .wpcf7-list-item {
display: inline-flex;
align-items: center;
margin-right: 18px;
margin-left: 0px;
font-size: 13px;
}
.tg-contact-submit__icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #ffffff;
color: #37c6af;
font-size: 13px;
}
.tg-contact-submit:hover {
background: #2ba08d;
transform: translateY(-1px);
}
/* Hide default CF7 submit if still present */
.tg-contact__col--form input[type="submit"] {
display: none;
}
/* Responsive: stack on mobile */
@media (max-width: 767px) {
.tg-contact {
margin: 48px auto 80px;
padding: 0 16px;
}
.tg-contact__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.tg-contact__col--media {
justify-content: center;
}
.tg-contact__col--form .tg-contact-form {
max-width: 100%;
}
}
.tg-contact-form p {
margin-bottom:0px;
}
.tg-contact-form .wpcf7-not-valid-tip{
font-size: 13px;
}
.tg-contact-form .tg-checkbox-inline{
margin-top: 15px !important;
}
.page-id-36951 .tg-hero__bg{
background-position: top !important;
}
.tg-calc-marquee {
position: absolute;
inset: 0;
display: flex;
align-items: center;
font-weight: 500;
font-size: 180px;
text-transform: uppercase;
white-space: nowrap;
opacity: 0.04;
pointer-events: none;
animation: tg-calc-marquee 24s linear infinite;
}
.tg-calc-marquee span { margin-right: 4rem; }
@keyframes tg-calc-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tg-calc-inner {
position: relative;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 18px 40px rgba(0,0,0,0.04);
padding: 40px 40px 32px;
}
.tg-calc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 22px 40px;
}
@media (max-width: 768px) {
.tg-calc-grid { grid-template-columns: 1fr; }
}
.tg-calc-field label {
display: block;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;
color: #666;
}
.tg-calc-input {
width: 100%;
padding: 10px 14px;
border: 1px solid #e2e2e2;
background: #fafafa;
font-size: 14px;
transition: border-color .18s, background-color .18s;
}
.tg-calc-input:focus {
outline: none;
border-color: #00bfa5;
background: #fff;
}
.tg-calc-input[readonly] { background: #f5f5f5; }
.tg-calc-input.tg-calc-error {
border-color: #e53935;
background: #fff6f6;
}
.tg-calc-actions { margin-top: 26px; }
.tg-calc-note {
margin-top: 22px;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #777;
}
.tg-calc-result {
margin-top: 14px;
font-size: 18px;
font-weight: 500;
color: #111;
}
.tg-calc-result strong {
margin-left: 6px;
font-size: 22px;
}
/* Outer wrapper: full width section */
.tg-calc-wrap {
position: relative;
padding: 80px 0;
margin: 80px auto 0;
max-width: none; /* remove the 1140px constraint */
overflow: hidden;
}
/* White card constrained + centered */
.tg-calc-inner {
position: relative;
max-width: 1140px;
margin: 0 auto;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 18px 40px rgba(0,0,0,0.04);
padding: 40px 40px 32px;
z-index: 2;
}
/* Marquee now runs full width behind */
.tg-calc-marquee {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
font-weight: 500;
font-size: 180px;
text-transform: uppercase;
white-space: nowrap;
opacity: 0.04;
pointer-events: none;
animation: tg-calc-marquee 24s linear infinite;
z-index: 1;
}
.tg-calc-marquee span { margin-right: 4rem; }
@keyframes tg-calc-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tg-calc-wrap{
padding-top: 0px !important;
}
.post-26866 h2{
font-size:20px !important;
}
/* Talent Solutions – scrolling marquee */
.tg-ts-marquee {
position: relative;
width: 100%;
overflow: hidden;
margin: 0 0 60px;
}
.tg-ts-marquee__inner {
display: inline-flex;
align-items: center;
white-space: nowrap;
animation: tg-ts-marquee 18s linear infinite;
font-weight: 500;
font-size: clamp(4rem, 9vw, 100px);
letter-spacing: -0.03em;
color: #111;
pointer-events: none;
}
.tg-ts-marquee__inner span {
padding-right: 4rem;
}
@keyframes tg-ts-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ================================
Talent Solutions – Solutions Grid
================================ */
.tg-solutions-grid {
padding: 5rem 0 0;
background-color: #fff;
}
/* Intro (eyebrow + big heading) */
.tg-solutions-grid__intro {
text-align: center;
margin-bottom: 3.5rem;
}
.tg-solutions-grid__eyebrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.75rem;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #9b9b9b;
margin-bottom: 1.6rem;
}
/* lines left/right of "Talent Solutions" */
.tg-solutions-grid__eyebrow::before,
.tg-solutions-grid__eyebrow::after {
content: '';
display: block;
width: 40px;
height: 1px;
background-color: #dcdcdc;
}
.tg-solutions-grid__title {
margin: 0;
font-weight: 500;
line-height: 1.2;
color: #111;
font-size: clamp(2.3rem, 2.8vw + 1.4rem, 3rem);
max-width: 800px;
margin: auto;
}
/* Grid wrapper */
.tg-solutions-grid__items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
/* Individual column */
.tg-solutions-grid__item {
padding: 2.75rem 2.25rem 3rem;
border-left: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
gap: 0.85rem;
background-color: #fff;
color: #111;
transition:
background-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
.tg-solutions-grid__item:first-child {
border-left: none;
}
/* Icon (can be image or inline icon) */
.tg-solutions-grid__icon {
font-size: 1.4rem;
line-height: 1;
margin-bottom: 0.35rem;
}
.tg-solutions-grid__icon-img {
max-width: 24px;
max-height: 24px;
display: block;
}
/* Column title */
.tg-solutions-grid__item-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: #111;
}
/* Column body text */
.tg-solutions-grid__item-body {
font-size: 0.88rem;
line-height: 1.6;
color: #444;
}
/* Bullets */
.tg-solutions-grid__list {
margin: 0.4rem 0 0;
padding-left: 1.1rem;
list-style: disc;
font-size: 0.86rem;
line-height: 1.6;
color: #444;
}
.tg-solutions-grid__list-item + .tg-solutions-grid__list-item {
margin-top: 0.2rem;
}
/* Hover: orange column */
.tg-solutions-grid__item:hover,
.tg-solutions-grid__item:focus-within {
background-color: var(--orange-color);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
/* Keep content readable on orange */
.tg-solutions-grid__item:hover .tg-solutions-grid__item-title,
.tg-solutions-grid__item:hover .tg-solutions-grid__item-body,
.tg-solutions-grid__item:hover .tg-solutions-grid__list,
.tg-solutions-grid__item:hover .tg-solutions-grid__list-item,
.tg-solutions-grid__item:hover .tg-solutions-grid__icon {
color: #111;
}
/* ================================
Responsive
================================ */
@media (max-width: 1024px) {
.tg-solutions-grid__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.tg-solutions-grid__items {
grid-template-columns: 1fr;
}
.tg-solutions-grid__item {
border-left: none;
border-top: 1px solid #e5e5e5;
}
.tg-solutions-grid__item:first-child {
border-top: none;
}
}
/* TS variant typography (keeps home styles intact) */
.tg-blackgrid--ts .tg-blackgrid__title{
font-weight:800;
letter-spacing:-.02em;
line-height:1.05;
font-size:clamp(34px,7.5vw,72px);
max-width: 1000px;
margin: auto;
margin-bottom: 20px;
}
/* Eyebrow with dashes before/after (— text —) */
.tg-blackgrid__eyebrow--ts{
display:inline-flex;
align-items:center;
gap:16px;
margin:0 0 18px;
opacity:.9;
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
white-space:nowrap;
}
.tg-blackgrid__eyebrow--ts::before,
.tg-blackgrid__eyebrow--ts::after{
content:"";
display:block;
width:56px;
height:1px;
background:rgba(255,255,255,.35);
}
.tg-blackgrid--ts{
margin-bottom:0px !important;
}
/************************************************************
* Talent Solutions – Image + Accordion section
* Wrapper: .tg-ts-accordion (safe scope)
************************************************************/
/* Section background + vertical rhythm */
.tg-ts-accordion{
background: var(--light-brown-color, #F6F5F4);
padding-block: clamp(48px, 7vw, 96px);
}
/* Two-column layout (image left / copy right) */
.tg-ts-accordion__grid{
max-width: var(--container);
display:grid;
grid-template-columns: 1.1fr 1fr; /* slightly larger image column */
gap: clamp(20px, 4vw, 56px);
align-items:start;
}
/* Media (image) */
.tg-ts-accordion__media .tg-acc__img{
width:100%; height:auto; display:block;
border-radius: 6px;
object-fit: cover;
}
/* Headline + intro copy */
.tg-ts-accordion__heading{
margin: 0 0 .5rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.15;
font-size: clamp(26px, 3vw, 40px);
}
.tg-ts-accordion__intro{
margin: 0 0 1.25rem;
color: rgba(0,0,0,.75);
font-size: clamp(14px, 1.3vw, 16px);
line-height: 1.6;
}
/* Small label above the list */
.tg-ts-accordion__label{
margin: 0 0 .75rem;
font-size: 14px;
color: rgba(0,0,0,.70);
}
/* Accordion container */
.tg-acc{
border-top: 1px solid rgba(0,0,0,.12);
}
/* Each item row */
.tg-acc__item{
border-bottom: 1px solid rgba(0,0,0,.12);
background: transparent;
}
/* Clickable row (title + chevron) */
.tg-acc__trigger{
width:100%;
display:flex; align-items:center; justify-content:space-between;
gap: 16px;
padding: 14px 12px;
background: transparent; border:0; cursor:pointer;
font-weight: 700;
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.4;
}
/* Title inherits color; keep it crisp */
.tg-acc__title{ color:#111; }
/* Chevron (pure CSS) */
.tg-acc__chev{
width: 10px; height: 10px; flex: 0 0 10px;
border-right: 2px solid #0E1522;
border-bottom: 2px solid #0E1522;
transform: rotate(45deg); /* “down” by default */
transition: transform .2s ease;
}
/* Rotate chevron up when open */
.tg-acc__trigger[aria-expanded="true"] .tg-acc__chev{
transform: rotate(-135deg);
}
/* Panel body */
.tg-acc__panel{
padding: 10px 12px 18px;
}
/* The short paragraph above bullets (class `tg-acc__intro` in PHP) */
.tg-acc__panel .tg-acc__intro{
margin: 0 0 10px;
color: #2B2B2B;
font-size: 16px;
line-height: 1.6;
}
/* Bullets */
.tg-acc__bullets{
margin: 0; padding: 0 0 0 20px;
display: grid; gap: .55rem;
color: #111;
font-size: 16px;
line-height: 1.55;
}
/* Hover/focus affordance */
.tg-acc__trigger:hover,
.tg-acc__trigger:focus-visible{
background: rgba(0,0,0,.035);
outline: none;
border-radius: 4px;
}
/* Responsive: stack on narrow screens */
@media (max-width: 900px){
.tg-ts-accordion__grid{
grid-template-columns: 1fr;
}
}
/* Kill theme button background within TS accordion */
.tg-ts-accordion .tg-acc__item,
.tg-ts-accordion .tg-acc__item.active,
.tg-ts-accordion .tg-acc__item.is-active{
background: transparent !important;
}
.tg-ts-accordion .tg-acc__trigger{
-webkit-appearance: none;
appearance: none;
background: transparent !important; /* override GP */
border: 0;
color: inherit;
box-shadow: none;
}
/* Keep a subtle hover if you like (or delete this line to remove hover tint) */
.tg-ts-accordion .tg-acc__trigger:hover{
background: rgba(0,0,0,.035);
}
/* Remove dark focus/active state from theme */
.tg-ts-accordion .tg-acc__trigger:focus,
.tg-ts-accordion .tg-acc__trigger:active{
background: transparent !important;
outline: none;
box-shadow: none;
}
/* Optional: accessible focus ring without fill */
.tg-ts-accordion .tg-acc__trigger:focus-visible{
outline: 2px dotted currentColor;
outline-offset: 2px;
}
/* Tokens assumed:
--light-brown-color: #F6F5F4;
--orange-color: rgba(253, 172, 59, 1);
*/
.tg-pills { padding: 32px 0 12px; background: var(--page-bg, transparent); }
.tg-pills__container { max-width: var(--container); margin: 0 auto; padding: 0 var(--text-gutter, 24px); }
.tg-pills__head { text-align: center; margin: 0 auto 24px; max-width: 900px; }
.tg-pills__eyebrow { letter-spacing:.12em; text-transform:uppercase; font-size:12px; opacity:.7; }
.tg-pills__title { margin:.25rem 0 .5rem; font-size: clamp(26px, 3.2vw, 40px); line-height:1.1; }
.tg-pills__sub { margin:0 0 8px; font-size: clamp(15px, 1.6vw, 18px); opacity:.8; }
.tg-pills__helper { font-size:12px; letter-spacing:.08em; opacity:.6; }
.tg-pills__grid {
display:flex; flex-wrap:wrap; gap: 16px 18px;
justify-content:center; align-items:flex-start;
margin-top: 14px;
max-width: 1000px;
margin: auto;
}
/* The pill itself */
.tg-pill{
position:relative;
display:inline-flex; align-items:center; justify-content:center;
min-height: 44px; padding: 10px 18px;
background: var(--light-brown-color);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.06);
cursor: default;
transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
text-align:center;
}
/* Section spacing */
.tg-about-intro--tight { padding: 32px 0; }
.tg-about-intro--normal { padding: 64px 0; }
.tg-about-intro--loose { padding: 96px 0; }
/* Two-column grid */
.tg-about-intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 5vw, 48px);
align-items: center;
max-width: var(--container);
}
/* Copy column */
.tg-about-intro__eyebrow {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
margin-bottom: 12px; position: relative;
}
.tg-about-intro__title {
font-size: clamp(28px, 4.6vw, 56px);
line-height: 1.08;
margin: 8px 0 16px;
}
.tg-about-intro__body { font-size: clamp(15px, 1.6vw, 18px); opacity: .9; }
/* Media column: two images with a gentle gap */
.tg-about-intro__media {
display: grid;
grid-template-columns: 0.8fr 1fr;
gap: clamp(12px, 2vw, 20px);
align-items: end;
}
.tg-about-intro__figure { margin: 0; }
.tg-about-intro__img { width: 100%; height: auto; display: block; border-radius: 8px;max-width:300px;max-height:607px }
/* Flip order when images are on the left */
.tg-about-intro--img-left .tg-about-intro__grid { direction: rtl; }
.tg-about-intro--img-left .tg-about-intro__copy,
.tg-about-intro--img-left .tg-about-intro__media { direction: ltr; }
/* Responsive: stack on narrow screens */
@media (max-width: 900px){
.tg-about-intro__grid { grid-template-columns: 1fr; }
.tg-about-intro--img-left .tg-about-intro__grid { direction: ltr; }
}
/* Two labels: default + hover. We simply toggle visibility on hover/focus. */
.tg-pill__text{ white-space:nowrap; }
.tg-pill__text--hover{ display:none; }
.tg-pill:hover,
.tg-pill:focus-visible{
background: var(--orange-color);
border-color: transparent;
box-shadow: 0 4px 16px rgba(0,0,0,.10);
color: #111; /* ensure good contrast on orange */
}
.tg-pill:hover .tg-pill__text--default,
.tg-pill:focus-visible .tg-pill__text--default{ display:none; }
.tg-pill:hover .tg-pill__text--hover,
.tg-pill:focus-visible .tg-pill__text--hover{ display:inline; }
/* Only the About eyebrow */
.tg-eyebrow--about{
display:inline-flex;
align-items:center;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:600;
font-size:12px;
color:#7a7f86;
}
/* The short line before it */
.tg-eyebrow--about::before{
content:"";
width:44px; /* line length */
height:2px; /* thickness */
background:#b8bec7; /* line color */
border-radius:1px;
margin-right:14px; /* gap before text */
display:inline-block;
transform:translateY(-1px);
}
/******************************************************
* TEAM – Cards and CSS-only modal (About page)
******************************************************/
/* --- Section & header --- */
/* .tg-team { padding: clamp(36px, 6vw, 72px) 0; } */
.tg-team__header { text-align:center; margin-bottom:28px; }
.tg-team__eyebrow{
font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
text-transform: uppercase; letter-spacing: .14em; color:#777; margin-bottom:10px;
}
.tg-team__title{ font-weight:800; margin:0 0 8px; }
.tg-team__intro{ max-width:900px; margin:0 auto; color:#555; }
/* --- Responsive grid (column count via --cols class) --- */
.tg-team__grid{ display:grid; gap:clamp(16px,2.5vw,28px); }
.tg-team--cols-2 .tg-team__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.tg-team--cols-3 .tg-team__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); max-width: 1000px ; margin: auto; }
.tg-team--cols-4 .tg-team__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:980px){ .tg-team__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .tg-team__grid{ grid-template-columns:1fr; } }
/* --- Card --- */
.tg-team__card{
position:relative; background:#fff;
border:1px solid rgba(0,0,0,.07); border-radius:14px;
box-shadow:0 10px 26px rgba(0,0,0,.06); overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.tg-team__card:has(.tg-team__open:hover){
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
/* Whole card is the trigger (anchor) */
.tg-team__open{ display:block; color:inherit; text-decoration:none; }
/* Photo frame with white border and fixed 300×300 crop */
.tg-team__media{
position:relative; padding:14px;
}
.tg-team__media::before{
content:""; position:absolute; inset:14px; border-radius:12px; background:#fff; z-index:0;
}
.tg-team__media img.tg-team__photo{
position:relative; z-index:1; display:block;
width:100%; max-width:300px; height:300px; max-height:300px;
object-fit:cover; margin:0 auto; border-radius:12px;
box-shadow:0 1px 0 rgba(0,0,0,.04);
transition: transform .25s ease;
}
.tg-team__open:hover .tg-team__media img{ transform:scale(1.02); }
/* White “notch” behind the arrow (top-right) */
.tg-team__media::after{
content:""; position:absolute; top:8px; right:8px;
width:56px; height:56px; background:#fff; border:1px solid #e8e8e8;
border-top-right-radius:12px; border-bottom-left-radius:18px; z-index:2;
}
/* Arrow chip */
.tg-team__badge{
position:absolute; top:14px; right:14px; z-index:3;
width:40px; height:40px; border-radius:50%;
display:grid; place-items:center;
background:#fff; color:var(--orange-color, #FDAC3B); font-weight:800; font-size:16px;
border:1px solid #e8e8e8; box-shadow:0 8px 18px rgba(0,0,0,.12);
pointer-events:none; /* decorative; card click opens modal */
}
/* Meta */
.tg-team__meta{ text-align:center; padding:0px 12px 18px; }
.tg-team__name{ margin:8px 0 4px; font-weight:800; font-size:20px; }
.tg-team__role{ color:#666; font-size:14px; }
.tg-team__teaser{ color:#7a7a7a; font-size:14px; margin-top:6px; }
/* --- CSS-only Modal (shown via :target) --- */
/* Hidden by default */
.tg-team-modal{
display:none; opacity:0; visibility:hidden;
position:fixed; inset:0; z-index:9999;
}
/* When the element is the URL hash → show */
.tg-team-modal:target{
display:block; opacity:1; visibility:visible;
}
/* Backdrop (clicking it closes by linking to #close) */
.tg-team-modal__backdrop{
position:absolute; inset:0; background:rgba(0,0,0,.55); display:block;
}
/* Panel */
.tg-team-modal__panel{
position:relative; z-index:1;
width:min(1100px, 92vw);
margin:min(8vh, 80px) auto;
background:#232323; color:#fff;
border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.35);
display:grid; grid-template-columns: 360px 1fr;
gap:clamp(18px,2.5vw,36px); padding:clamp(18px,2.8vw,36px);
}
@media (max-width:900px){ .tg-team-modal__panel{ grid-template-columns:1fr; } }
/* Media: fixed box, no black matte */
.tg-team-modal__media{
width:clamp(260px, 30vw, 360px);
height:clamp(320px, 40vw, 500px);
border-radius:10px; overflow:hidden; background:transparent;
}
.tg-team-modal__media img{
width:100%; height:100%; object-fit:cover; display:block;
}
/* Text */
.tg-team-modal__eyebrow{
letter-spacing:.12em; font-size:.78rem; color:#cfcfcf; margin-bottom:8px;
}
.tg-team-modal__title{
font-size:clamp(28px,4vw,56px); line-height:1.05; margin:0 0 12px; font-weight:800;
}
.tg-team-modal__content{ color:#e8e8e8; line-height:1.65; }
.tg-team-modal__content p{ margin:0 0 12px; }
/* Contact list (neutral links, not blue/underlined) */
.tg-team-modal__contact{ list-style:none; padding:0; margin:16px 0 0; }
.tg-team-modal__contact li{ display:flex; align-items:center; gap:12px; margin:.45rem 0; }
.tg-contact__icon{
width:32px; height:32px; flex:0 0 32px; border-radius:8px;
background:#2e2e2e; color:#e6e6e6; display:inline-flex; align-items:center; justify-content:center;
}
.tg-team-modal__contact a{ color:#e6e6e6; text-decoration:none; }
.tg-team-modal__contact a:hover{ color:#fff; text-decoration:none; }
/* Close “×” (anchor to #close) */
.tg-team-modal__close{
position:absolute; top:10px; right:12px;
width:36px; height:36px; border-radius:50%; border:0;
background:transparent; color:#fff; font-size:28px; line-height:1; text-decoration:none;
}
.tg-team-modal__close:hover{ color:var(--orange-color, #FDAC3B); }
/* Prevent page jump when closing (anchor stays at fixed 1px) */
#close{
position:fixed; top:0; left:0; width:1px; height:1px; overflow:hidden;
}
/* === TEAM: fix card widths without touching the modal === */
/* center items and handle leftover space gracefully */
.tg-team__grid{
justify-items: center; /* center each card in its grid cell */
justify-content: center; /* center the whole grid if extra space */
}
/* cards shouldn’t stretch to 1fr; cap them and center */
.tg-team__card{
width: 100%;
max-width: 360px; /* ← tune to 340–380 to taste */
margin: 0 auto;
}
/* make the CARD photo fill the card width (remove 300px cap only for cards) */
.tg-team__card .tg-team__media img.tg-team__photo{
max-width: none !important; /* override earlier 300px cap */
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5; /* consistent portrait box */
object-fit: cover;
border-radius: 12px;
}
/* keep the corner notch + arrow above the image */
.tg-team__card .tg-team__media::after{ z-index: 2; }
.tg-team__card .tg-team__badge{ z-index: 3; }
/* the MODAL image keeps its strict, fixed box (no change needed) */
/* =========================
TEAM — Mobile fixes
Put this at the very end
========================= */
/* avoid letter-by-letter wrapping from global styles */
.tg-team__name,
.tg-team__role,
.tg-team__teaser{
word-break: normal;
overflow-wrap: break-word; /* wrap long words if needed, not single letters */
}
/* <= 480px : one card per row, full width */
@media (max-width: 480px){
.tg-team__grid{
grid-template-columns: 1fr !important; /* force single column */
gap: 18px;
justify-items: stretch; /* card spans full width */
}
.tg-team__card{
max-width: 100% !important;
margin: 0; /* remove auto centering on mobile */
}
/* photo fills card width, keep nice portrait box */
.tg-team__media{ padding: 10px; }
.tg-team__media img.tg-team__photo{
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5; /* consistent height without squish */
object-fit: cover;
}
.tg-team__name{ font-size: 18px; }
.tg-team__role,
.tg-team__teaser{ font-size: 13px; }
/* shrink the corner chip so it doesn't crowd the image */
.tg-team__media::after{ width: 44px; height: 44px; top: 6px; right: 6px; }
.tg-team__badge{
width: 32px; height: 32px; top: 10px; right: 10px;
font-size: 14px;
}
}
/* 481–900px : two cards per row, comfortable sizing */
@media (min-width: 481px) and (max-width: 900px){
.tg-team__grid{
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap: 22px;
}
.tg-team__card{ max-width: 420px; margin: 0 auto; }
}
/* About → team intro width */
.tg-team .tg-team__intro{
max-width: 700px !important;
margin-left: auto;
margin-right: auto; /* keep it centered */
}
.about-accordion__media img{
max-height: 700px !important;
max-width: 600px !important;
}
.tg-ts-accordion--about .tg-ts-accordion__label{
font-size: 26px !important;
color: rgba(255, 255, 255, 1) !important;
font-weight: 600 !important;
}
.tg-ts-accordion--about{
background-color: var(--c-black) !important;
color: rgba(255, 255, 255, 1) !important;
}
.tg-ts-accordion--about .tg-ts-accordion__intro{
max-width: 600px !important
}
/* About: center the right column vertically beside the image */
.tg-ts-accordion--about .tg-ts-accordion__grid{
align-items: center; /* was start */
}
/* If you prefer to only center the copy (not the image), use this instead: */
.tg-ts-accordion--about .tg-ts-accordion__copy{
align-self: center;
}
/* Keep mobile stacked layout starting at the top */
@media (max-width: 900px){
.tg-ts-accordion--about .tg-ts-accordion__grid{ align-items: start; }
.tg-ts-accordion--about .tg-ts-accordion__copy{ align-self: auto; }
}
.tg-ts-accordion--about .tg-acc__title,
.tg-ts-accordion--about .tg-acc__chev{
color: rgba(255, 255, 255, 1) !important;
}
.tg-ts-accordion--about .tg-acc__item{
border-bottom: 2px solid rgba(255, 255, 255, 1) !important;;
}
.tg-ts-accordion--about .tg-acc{
border-top: 0px !important;
border-color: rgba(255, 255, 255, 1) !important;
}
.tg-ts-accordion--about .tg-acc__chev{
border-right: 2px solid rgba(255, 255, 255, 1) !important;
border-bottom: 2px solid rgba(255, 255, 255, 1) !important;
}
.tg-ts-accordion--about .tg-acc__serving-label{
font-size:13px !important;
}
/****************************************************
* Talexes Alliance Partner layout
* Markup:
*
****************************************************/
/* Generic container used by the TAP layouts */
.tap-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Section spacing */
.tap-alliance.tap-alliance--about {
padding-top: 80px;
}
/* Two-column grid: left = text, right = image */
.tap-alliance--about .tap-alliance__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
column-gap: 72px;
align-items: center;
}
/* ==========================
* LEFT COLUMN (copy + bullets)
* ========================== */
/* Main H2 heading */
.tap-alliance__title {
font-size: clamp(32px, 3vw, 40px);
line-height: 1.1;
margin: 0 0 12px;
}
/* Small intro paragraph under H2 */
.tap-alliance__intro {
max-width: 420px;
margin: 0 0 24px;
font-size: 15px;
line-height: 1.6;
color: #333;
}
/* "As a Talexes Partner, you can:" line */
.tap-alliance__bullets-title {
font-size: 14px;
letter-spacing: 0.04em;
text-transform: none;
margin: 0 0 12px;
}
/* Bullet list wrapper (remove default dots) */
.tap-alliance__list {
list-style: none;
margin: 0;
padding: 0;
}
/* Single bullet row: icon + text */
.tap-alliance__item {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 10px;
}
/* Icon column */
.tap-alliance__icon-wrap {
flex: 0 0 32px;
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: 4px; /* vertically centers icon vs text */
}
/* Icon image / SVG */
.tap-alliance__icon {
display: block;
width: 28px;
height: 28px;
}
/* Fallback SVG dot (no uploaded icon) */
.tap-alliance__icon--fallback {
width: 18px;
height: 18px;
fill: #000;
}
/* Bullet text */
.tap-alliance__text {
font-size: 15px;
line-height: 1.6;
}
/* ==========================
* RIGHT COLUMN (composite image)
* ========================== */
.tap-alliance__media {
margin: 0;
max-width: 500px;
margin-left: auto; /* pushes image to the right edge like the design */
}
/* Single composite image (your Figma export) */
.tap-alliance__img {
display: block;
width: 100%;
height: auto;
}
/* ==========================
* RESPONSIVE BEHAVIOR
* ========================== */
@media (max-width: 991px) {
.tap-alliance.tap-alliance--about {
padding: 56px 0;
}
/* Stack text and image vertically on tablets/mobile */
.tap-alliance--about .tap-alliance__grid {
grid-template-columns: 1fr;
row-gap: 40px;
}
.tap-alliance__media {
margin: 0 auto; /* center image when stacked */
}
.tap-alliance__intro {
max-width: none;
}
}
@media (max-width: 600px) {
.tap-alliance__title {
font-size: 28px;
}
}
/* Mobile menu: use a solid background when the hamburger menu is open */
@media (max-width: 1024px) {
/* Navigation container when menu is toggled open */
.tg-has-hero .main-navigation.toggled,
.tg-has-hero .main-navigation.toggled .inside-navigation,
.tg-has-hero .main-navigation.toggled .main-nav ul {
background-color: #050608 !important; /* pick your header color */
}
/* Make sure links stay readable on the dark background */
.tg-has-hero .main-navigation.toggled .main-nav ul li a {
color: #ffffff;
}
}
.about-we-partner-with {
padding-bottom: 50px;
text-align: center;
}
.about-we-partner-with__title {
font-size: 35px;
line-height: 1.2;
margin-bottom: 32px;
}
/* Grid wrapper */
.about-we-partner-with__grid {
display: grid;
gap: 32px;
justify-content: center;
}
/* Column counts */
.about-we-partner-with--cols-2 .about-we-partner-with__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-we-partner-with--cols-3 .about-we-partner-with__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-we-partner-with--cols-4 .about-we-partner-with__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Individual item text */
.about-we-partner-with__item p {
max-width: 260px;
margin: 0 auto;
line-height: 1.5;
}
.about-we-partner-with .tg-container{
max-width: var(--smaller-container);
}
.about-we-partner-with__grid{
max-width:800px;
margin:auto;
}
/**********************
* Assessments chooser
**********************/
/* Outer section spacing */
.assessments-chooser {
padding: 80px 0;
padding-bottom: 20px;
}
/* Inner container uses the smaller width token */
.assessments-chooser__inner {
max-width: var(--smaller-container);
margin: 0 auto;
}
/* 1) Title centered w/ max-width 600px */
.assessments-chooser__heading {
font-size: 50px;
line-height: 1.2;
max-width: 600px;
margin: 0 auto 48px; /* center */
text-align: center;
}
/* Desktop-first layout */
.assessments-chooser__layout--desktop {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 40px;
position: relative;
}
/* vertical divider line */
.assessments-chooser__layout--desktop::before {
content: "";
position: absolute;
left: 260px;
top: 0;
bottom: 0;
width: 1px;
background: var(--light-green-color, rgba(162, 222, 222, 1));
}
/* Mobile layout is hidden by default on large screens */
.assessments-chooser__layout--mobile {
display: none;
}
/* Left column (tabs) */
.assessments-chooser__nav {
display: flex;
flex-direction: column;
gap: 10px;
}
.assessments-chooser__nav-item {
border: 0;
background: none;
padding: 4px 0;
text-align: left;
font-size: 26px;
line-height: 1.4;
color: #c7c7c7;
cursor: pointer;
box-shadow: none;
}
.assessments-chooser__nav-item.is-active {
color: #f25b23; /* Talexes orange */
}
/* 4) Right column with vertical mint line */
.assessments-chooser__panels {
position: relative;
padding-left: clamp(48px, 6vw, 72px);
}
/* Panels switching */
.assessments-chooser__panel {
display: none;
}
.assessments-chooser__panel.is-active {
display: block;
}
.assessments-chooser__panel-inner {
position: relative;
}
/* Badge (MX / TSS / etc.) */
.assessments-chooser__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
border: 2px solid #111;
margin-bottom: 40px;
font-size: 30px;
font-weight: 600;
}
/* 3) Background icon on the right */
.assessments-chooser__bg-wrap {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0.06;
pointer-events: none;
}
.assessments-chooser__bg {
display: block;
max-width: 360px;
height: auto;
}
/* Content text */
.assessments-chooser__title {
font-size: 26px;
margin-bottom: 18px;
}
.assessments-chooser__text {
max-width: 640px;
line-height: 1.6;
font-size: 16px;
}
/* Assessments nav – make items look like plain text links */
.assessments-chooser__nav-item {
display: block;
width: 100%;
padding: 6px 0;
/* reset all button styling */
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
outline: none;
-webkit-appearance: none;
appearance: none;
text-align: left;
font-size: 22px;
line-height: 1.3;
font-weight: 600;
cursor: pointer;
color: rgba(188, 188, 188, 1); /* light grey text for inactive */
}
/* remove bg on hover/focus/active & just change text color if you want */
.assessments-chooser__nav-item:hover,
.assessments-chooser__nav-item:focus,
.assessments-chooser__nav-item:active {
background: none !important;
box-shadow: none !important;
outline: none;
color: #ff5c1c; /* or your brand orange */
}
/* active item – only text color, no background */
.assessments-chooser__nav-item.is-active {
background: none !important;
box-shadow: none !important;
color: #ff5c1c; /* active orange/red text */
}
/* Assessments badge – keep text centered even on 2 lines */
.assessments-chooser__badge {
width: 100px;
height: 100px;
border: 2px solid #111;
display: flex;
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
flex-shrink: 0;
margin-bottom: 32px;
}
.assessments-chooser__badge span {
display: block;
width: 100%;
text-align: center; /* center multi-line text */
line-height: 1.1; /* tighten a bit so two lines look nice */
word-break: break-word; /* allow "TLA 360" etc. to wrap cleanly */
}
.assessments-chooser__content{
padding-top:50px;
}
.assessments-chooser__bg{
opacity: 0.05;
}
.assessments-chooser__bg-wrap {
position: absolute;
top: 150px;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
justify-content: center;
pointer-events: none;
z-index: 0;
}
.assessments-chooser__bg {
max-width: 280px;
opacity: 0.04; /* slightly lighter than before */
transform: translateY(-10%); /* a bit above the text block */
}
/* =======================
* Mobile layout: accordion
* ======================= */
@media (max-width: 900px) {
/* Hide desktop layout, show mobile layout */
.assessments-chooser__layout--desktop {
display: none;
}
.assessments-chooser__layout--desktop::before {
display: none;
}
.assessments-chooser__layout--mobile {
display: block;
}
.assessments-chooser {
padding-block: 56px;
}
.assessments-chooser__heading {
margin-bottom: 32px;
}
/* Each item = label + panel directly under it */
.assessments-chooser__accordion-item {
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding-block: 8px 0;
}
.assessments-chooser__accordion-item:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.assessments-chooser__nav-item--mobile {
width: 100%;
padding: 10px 0;
}
/* Panel right under its own label */
.assessments-chooser__panel--mobile {
display: none;
padding: 12px 0 20px;
}
.assessments-chooser__panel--mobile.is-active {
display: block;
}
.assessments-chooser__panel-inner {
flex-direction: row;
gap: 24px;
}
.assessments-chooser__badge {
width: 96px;
height: 96px;
}
/* Background icon smaller, a bit higher, lighter */
.assessments-chooser__bg-wrap {
align-items: flex-start;
justify-content: flex-end;
}
.assessments-chooser__bg {
max-width: 180px;
opacity: 0.04;
transform: translateY(-25%);
}
.assessments-chooser__content {
max-width: none;
padding-top:40px !important;
}
.assessments-chooser__title {
font-size: 22px;
margin-bottom: 10px;
}
}
/****************************
* Assessments marquee
****************************/
/* Outer section wrapper */
.assessments-marquee {
padding-block: 24px;
overflow: hidden; /* hide the overflow while scrolling */
background: #ffffff;
}
/* Scrolling track – we animate this leftwards */
.assessments-marquee__track {
display: inline-flex;
gap: 4rem; /* space between items */
white-space: nowrap;
animation: assessments-marquee-scroll 22s linear infinite;
}
/* Individual codes */
.assessments-marquee__item {
font-size: clamp(32px, 4vw, 54px);
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #222222;
}
/* Keyframes for the marquee effect */
@keyframes assessments-marquee-scroll {
from {
transform: translateX(0);
}
to {
/* -50% because we duplicated the items list twice in PHP */
transform: translateX(-50%);
}
}
/* Optional: slightly tighter on smaller screens */
@media (max-width: 768px) {
.assessments-marquee {
padding-block: 18px;
}
.assessments-marquee__track {
gap: 3rem;
animation-duration: 18s; /* a bit faster on mobile */
}
}
/****************************
* Assessments marquee
****************************/
/* Outer section wrapper */
.assessments-marquee {
padding-block: 24px;
overflow: hidden; /* hide the overflow while scrolling */
background: #ffffff;
}
/* Scrolling track – we animate this leftwards */
.assessments-marquee__track {
display: inline-flex;
gap: 4rem; /* space between items */
white-space: nowrap;
animation: assessments-marquee-scroll 22s linear infinite;
}
/* Individual codes */
.assessments-marquee__item {
font-size: clamp(32px, 4vw, 54px);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #222222;
}
/* Keyframes for the marquee effect */
@keyframes assessments-marquee-scroll {
from {
transform: translateX(0);
}
to {
/* -50% because we duplicated the items list twice in PHP */
transform: translateX(-50%);
}
}
/* Optional: slightly tighter on smaller screens */
@media (max-width: 768px) {
.assessments-marquee {
padding-block: 18px;
}
.assessments-marquee__track {
gap: 3rem;
animation-duration: 18s; /* a bit faster on mobile */
}
}
/****************************************************
* Assessments – Comparison image section
****************************************************/
.tg-compare {
padding: 60px 0;
background-color: #ffffff;
}
.tg-compare__title {
text-align: center;
font-size: clamp(32px, 3.2vw, 40px);
line-height: 1.1;
margin: 0 0 10px;
}
/* Wrap around the big comparison image */
.tg-compare__image {
max-width: 1300px; /* controls how wide the table can get */
margin: 0 auto; /* center in page */
}
/* Make the image responsive */
.tg-compare__img {
display: block;
width: 100%; /* full width of the container */
height: auto;
border-radius: 4px;
}
/* Slightly tighter on mobile */
@media (max-width: 640px) {
.tg-compare {
padding: 56px 0;
}
.tg-compare__title {
font-size: 28px;
margin-bottom: 28px;
}
}
.assessment-black_grid h2{
font-size: clamp(30px, 6vw, 54px) !important;
max-width: 700px;
margin: auto;
}
/****************************************************
* History – Story section (assessment namespace)
****************************************************/
/* Generic container for this section */
.assessment-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Section wrapper */
.assessment-history {
padding: 90px 0;
background-color: #ffffff;
}
/* Two-column grid: text (left) / image (right) */
.assessment-history__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
column-gap: 72px;
align-items: stretch;
}
/* Left card with grey background */
.assessment-history__card {
padding: 48px 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Eyebrow "OUR HISTORY" with line */
.assessment-history__eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #777;
margin: 0 0 18px;
display: inline-flex;
align-items: center;
gap: 16px;
}
.assessment-history__eyebrow::before {
content: "";
display: block;
width: 42px;
height: 1px;
background: #c3c1bc;
}
/****************************************************
* Case Study – 349% layout
****************************************************/
.assessment-case {
padding-top: 0px;
padding-bottom: 50px;
background-color: #ffffff;
}
.assessment-case__header {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
/* Eyebrow: — RESOURCES — */
.assessment-case__eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #777;
margin-bottom: 18px;
}
.assessment-case__eyebrow-line {
width: 42px;
height: 1px;
background: #c3c1bc;
}
.assessment-case__title {
font-size: clamp(30px, 3vw, 38px);
line-height: 1.2;
margin: 0 0 16px;
}
.assessment-case__intro {
font-size: 15px;
line-height: 1.7;
color: #333;
margin: 0 0 18px;
}
.assessment-case__subtitle {
font-size: 16px;
font-weight: 600;
margin: 0;
}
/* Image block (single composite image) */
.assessment-case__image {
max-width: 1100px;
margin: 40px auto 0;
}
.assessment-case__img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}
/* Responsive tweaks */
@media (max-width: 768px) {
.assessment-case {
padding: 64px 0;
}
.assessment-case__header {
margin-bottom: 32px;
padding: 0 8px;
}
.assessment-case__title {
font-size: 26px;
}
}
/* Main heading */
.assessment-history__title {
font-size: clamp(32px, 3vw, 40px);
line-height: 1.1;
margin: 0 0 12px;
}
/* Subheading */
.assessment-history__subtitle {
font-size: 16px;
font-weight: 600;
margin: 0 0 18px;
}
/* Body copy */
.assessment-history__body {
font-size: 15px;
line-height: 1.7;
color: #333;
}
/* Right-hand image column */
.assessment-history__media {
margin: 0;
display: flex;
justify-content: flex-end;
align-items: stretch;
}
/* The image (already includes the orange 4x badge) */
.assessment-history__img {
display: block;
width: 100%;
height: auto;
max-width: 480px; /* tweak to match design */
}
/* Responsive behaviour */
@media (max-width: 991px) {
.assessment-history {
padding: 64px 0;
}
.assessment-history__grid {
grid-template-columns: 1fr;
row-gap: 40px;
}
.assessment-history__media {
justify-content: flex-start;
}
.assessment-history__img {
max-width: 100%;
}
}
@media (max-width: 640px) {
.assessment-history__card {
padding: 32px 24px;
}
.assessment-history__title {
font-size: 28px;
}
}
/* =========================
* Whitepaper hero section
* ======================= */
.wp-whitepaper {
padding: 80px 0;
}
.wp-whitepaper__inner {
max-width: var(--smaller-container, 1200px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
.wp-whitepaper__media {
position: relative;
}
.wp-whitepaper__image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
max-width: 550px;
}
.wp-whitepaper__content {
max-width: 560px;
}
.wp-whitepaper__eyebrow {
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 12px;
color: #888;
}
.wp-whitepaper__heading {
font-size: clamp(32px, 3.1vw, 40px);
line-height: 1.2;
margin: 0 0 20px;
}
.wp-whitepaper__body {
font-size: 16px;
line-height: 1.7;
color: #333;
margin-bottom: 28px;
}
.wp-whitepaper__btn:hover {
background: #28a0a6;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
/* =========================
* Modal
* ======================= */
.wp-whitepaper-modal-open {
overflow: hidden;
}
.wp-whitepaper-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.wp-whitepaper-modal.is-open {
display: flex;
}
.wp-whitepaper-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.85);
}
.wp-whitepaper-modal__dialog {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
max-width: var(--smaller-container);
width: 100%;
background: #111;
color: #fff;
border-radius: 6px;
overflow: hidden;
}
.wp-whitepaper-modal__close {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.35);
background: transparent;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.wp-whitepaper-modal__media {
background: #000;
}
.wp-whitepaper-modal__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.wp-whitepaper-modal__content {
padding: 48px 48px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Basic CF7 styling inside modal */
.wpw-form .wpw-form__row {
margin-bottom: 16px;
}
.wpw-form label {
font-size: 13px;
text-transform: none;
display: block;
color: rgba(255,255,255,.74);
}
.wpw-form input[type="text"],
.wpw-form input[type="email"] {
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.25);
background: transparent;
color: #fff;
font-size: 14px;
}
.wpw-form input[type="text"]::placeholder,
.wpw-form input[type="email"]::placeholder {
color: rgba(255,255,255,.45);
}
.wpw-form__actions {
margin-top: 20px;
}
/* .wpw-form input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 24px;
border-radius: 999px;
background: #33b3b9;
border: none;
color: #111;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
} */
/* .wpw-form input[type="submit"]:hover {
background: #2aa0a6;
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(0,0,0,.25);
} */
/* Responsive */
@media (max-width: 960px) {
.wp-whitepaper__inner {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.wp-whitepaper-modal__dialog {
grid-template-columns: minmax(0, 1fr);
max-width: 90%;
}
.wp-whitepaper-modal__content {
padding: 28px 20px 24px;
}
.wp-whitepaper-modal__media {
display: none; /* hide left image on very small screens if needed */
}
}
/* ===== Whitepaper modal layout & image sizing ===== */
/* Fullscreen overlay */
.wp-whitepaper-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.8);
}
.wp-whitepaper-modal.is-open {
display: flex;
}
/* Dialog – two columns like the Figma (image + form) */
.wp-whitepaper-modal__dialog {
position: relative;
display: grid;
grid-template-columns: minmax(0, 380px) minmax(0, 520px);
max-width: 980px;
width: 100%;
background: #101010;
color: #fff;
overflow: hidden;
}
/* Close button */
.wp-whitepaper-modal__close {
position: absolute;
top: 18px;
right: 22px;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
}
/* Left side: image */
.wp-whitepaper-modal__media {
background: #101010;
overflow: hidden;
}
.wp-whitepaper-modal__media img.wp-whitepaper-modal__image {
display: block;
width: 100%;
height: auto; /* important: DO NOT force full height */
max-height: 520px; /* keeps it similar to Figma */
object-fit: cover;
}
/* Right side: form content */
.wp-whitepaper-modal__content {
padding: 56px 48px 48px;
display: flex;
flex-direction: column;
gap: 18px;
}
.wpw-form-eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
opacity: 0.7;
margin: 0 0 4px;
}
.wpw-form-title {
font-size: 26px;
line-height: 1.3;
margin: 0 0 24px;
}
/* Make the CF7 fields stretch nicely */
.wp-whitepaper-modal__content .wpcf7-form p {
margin-bottom: 16px;
}
.wp-whitepaper-modal__content input[type="text"],
.wp-whitepaper-modal__content input[type="email"] {
width: 100%;
}
/* Submit button inherits tg-btn styles but we tweak placement */
.wp-whitepaper-modal__content .wpcf7-submit.tg-btn {
margin-top: 8px;
}
/* Mobile: stack image above form */
@media (max-width: 768px) {
.wp-whitepaper-modal__dialog {
grid-template-columns: minmax(0, 1fr);
max-width: 90vw;
}
.wp-whitepaper-modal__content {
padding: 32px 24px 28px;
}
}
/* Left column: keep image centered and not full-height */
.wp-whitepaper-modal__media {
flex: 0 0 auto;
padding: 40px 32px 40px 40px; /* tweak if you want more/less margin */
display: flex;
align-items: center;
justify-content: center;
}
/* Image itself – limit both width and height */
.wp-whitepaper-modal__media img.wp-whitepaper-modal__image {
display: block;
width: auto; /* no forced full width */
height: auto;
max-width: 380px; /* adjust to match Figma width */
max-height: 520px; /* adjust to match Figma height */
object-fit: cover; /* keeps it nicely cropped if needed */
}
/* On small screens, let it be responsive again */
@media (max-width: 900px) {
.wp-whitepaper-modal__media img.wp-whitepaper-modal__image {
max-width: 100%;
max-height: 60vh;
}
}
/*************************************************
* WHITEPAPERS – CARDS GRID
*************************************************/
/* Outer section spacing */
.wp-whitepapers-grid {
padding: 80px 0 120px;
}
/* 3-column grid like Figma */
.wp-whitepapers-grid__inner {
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
row-gap: 72px;
}
/* Card container */
.wpw-card {
display: flex;
flex-direction: column;
/* this keeps each card from stretching too wide */
max-width: 320px;
}
/* Image wrapper – constrain to ~300×300 */
.wpw-card__media {
margin-bottom: 24px;
}
/* Actual card image */
.wpw-card__media img.wpw-card__image {
display: block;
width: 100%; /* fill the card width */
max-width: 300px; /* but never wider than 300px */
max-height: 300px; /* and never taller than 300px */
object-fit: cover;
width:300px;
height:200px;
}
/* Card title */
.wpw-card__title {
font-size: 18px;
line-height: 1.3;
font-weight: 600;
margin: 0 0 10px;
}
/* Card excerpt */
.wpw-card__excerpt {
font-size: 13px;
line-height: 1.6;
color: #555;
}
/* Download button on each card */
.wpw-card__link {
margin-top: 5px;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
color: #000;
position: relative;
box-shadow: none;
}
/* Small arrow spacing (if your label is "Download ↗") */
.wpw-card__link::after {
content: '';
}
/* Optional: add a subtle underline on hover */
.wpw-card__link:hover {
text-decoration: underline;
}
/* ------------ Responsive tweaks ------------ */
/* On tablets – 2 columns */
@media (max-width: 1024px) {
.wp-whitepapers-grid__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 56px;
}
}
/* On mobile – single column */
@media (max-width: 700px) {
.wp-whitepapers-grid__inner {
grid-template-columns: 1fr;
}
.wpw-card {
max-width: 100%;
}
.wpw-card__media img.wpw-card__image {
max-width: 100%;
max-height: 260px;
}
}
/* HOVER: keep style identical, only change cursor */
.wpw-card__link:hover,
.wp-whitepaper__btn.tg-btn:hover {
background: #f9a63a; /* same as normal */
color: #111;
box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
text-decoration: none;
transform: none;
cursor: pointer;
}
.tg-footer .bbb-logo img{
background-color: white;
}
/*************************************************
* Talent Audit – hero + form layout (v2)
*************************************************/
/* Section background */
.ta-hero {
background-color: var(--light-brown-color);
padding: 80px 0 96px;
margin-bottom:0px;
}
/* Inner container */
.ta-container {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
/* Two-column grid: left image / right form */
.ta-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
column-gap: 56px;
align-items: center;
}
/* Left image card */
.ta-hero__panel {
align-self: stretch;
}
.ta-hero__figure {
margin: 0;
}
.ta-hero__image {
display: block;
width: 100%;
height: auto;
border-radius: 26px;
box-shadow: 0 20px 60px rgba(8, 12, 24, 0.65);
object-fit: cover;
}
/* Right column wrapper */
.ta-hero__form {
align-self: stretch;
}
/* ===============================================
* Form card – ONE layer only (on wpcf7-form)
* =============================================== */
.ta-hero__form .wpcf7-form {
background-color: #ffffff;
border-radius: 32px;
padding: 40px 40px 32px;
box-shadow: 0 22px 70px rgba(15, 21, 36, 0.16);
margin: 0;
}
/* Remove extra border/padding from CF7's hidden fieldset */
.ta-hero__form fieldset.hidden-fields-container {
border: none;
padding: 0;
margin: 0;
}
/* Inner .ta-form wrapper: no card styles – just layout */
.ta-hero__form .ta-form {
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
}
/* ===============================================
* Typography inside form
* =============================================== */
.ta-hero__form h3,
.ta-hero__form .ta-form__title {
font-size: 18px;
font-weight: 600;
margin: 0 0 10px;
color: #191716;
}
.ta-hero__form .ta-form__label {
font-size: 13px;
font-weight: 600;
margin: 18px 0 6px;
color: #3a3630;
}
.ta-hero__form p {
margin: 0 0 8px;
font-size: 14px;
color: #403a30;
}
/* ===============================================
* Checkboxes
* =============================================== */
.ta-hero__form .ta-checkbox-group .wpcf7-list-item {
display: inline-flex;
align-items: center;
margin: 0 18px 6px 0;
}
.ta-hero__form .ta-checkbox-group input[type="checkbox"] {
margin-right: 6px;
}
.ta-hero__form .ta-checkbox-group label {
font-size: 14px;
color: #36312a;
}
/* ===============================================
* Form rows (First/Last, Email/Phone, etc.)
* CF7 wraps them as:
*
* We make the the flex container and hide the
.
* =============================================== */
/* Outer row container – just spacing */
.ta-form-row {
margin-bottom: 10px;
}
/* Make the inner
the flex row */
.ta-form-row > p {
display: flex;
gap: 6px; /* horizontal space between the two halves */
margin: 0;
}
/* Hide unwanted line break CF7 injects */
.ta-form-row br {
display: none;
}
/* Flex behaviour for the two halves */
.ta-form-row .ta-form-field--half {
flex: 1 1 0;
}
/* Ensure fields behave as blocks inside flex */
.ta-form-row .ta-form-field {
display: block;
width: 100%;
}
/* ===============================================
* Input styles
* =============================================== */
.ta-hero__form input[type="text"],
.ta-hero__form input[type="email"],
.ta-hero__form input[type="tel"],
.ta-hero__form input[type="url"],
.ta-hero__form textarea {
width: 100%;
border-radius: 9px;
border: 1px solid #e3ded6;
background-color: var(--light-brown-color);
padding: 8px 12px; /* slightly slimmer fields */
font-size: 14px;
line-height: 1.4;
color: #211f1b;
box-sizing: border-box;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;
}
.ta-hero__form input::placeholder,
.ta-hero__form textarea::placeholder {
color: #a29b90;
opacity: 1;
}
.ta-hero__form input[type="text"]:focus,
.ta-hero__form input[type="email"]:focus,
.ta-hero__form input[type="tel"]:focus,
.ta-hero__form input[type="url"]:focus,
.ta-hero__form textarea:focus {
outline: none;
border-color: #d2c8ba;
box-shadow: 0 0 0 2px rgba(210, 200, 186, 0.4);
background-color: #ffffff;
}
/* ===============================================
* Submit button
* =============================================== */
.ta-form-actions {
margin-top: 18px;
}
.ta-form-actions input[type="submit"] {
display: inline-block;
border: none;
border-radius: 9px;
background-color: #111111;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 11px 34px;
cursor: pointer;
transition:
background-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.05s ease;
}
.ta-form-actions input[type="submit"]:hover {
background-color: #1f1f1f;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
transform: translateY(-1px);
}
.ta-form-actions input[type="submit"]:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* ===============================================
* Responsive tweaks
* =============================================== */
@media (max-width: 900px) {
.ta-hero {
padding: 56px 0 72px;
}
.ta-hero__grid {
grid-template-columns: 1fr;
row-gap: 32px;
}
.ta-hero__panel { order: 1; }
.ta-hero__form { order: 2; }
}
@media (max-width: 600px) {
/* Stack fields vertically on small screens */
.ta-form-row > p {
flex-direction: column;
gap: 8px;
}
.ta-hero__form .wpcf7-form {
padding: 24px 20px 22px;
border-radius: 22px;
}
}
/* Left image panel – vertically center the image relative to the form */
.ta-hero__panel {
align-self: stretch; /* keep same height as the form column */
display: flex; /* make the column a flex container */
align-items: center; /* center the image vertically */
justify-content: flex-start; /* keep it aligned to the left */
}
/* Make sure the figure/image behaves nicely inside the flex container */
.ta-hero__figure {
margin: 0;
width: 100%;
}
.ta-hero__image {
display: block;
width: 100%;
height: auto;
}
/* Base badge styles */
.assessments-chooser__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
min-height: 72px;
padding: 0.5rem;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.12);
background-color: #ffffff; /* default if no color chosen */
}
.assessments-chooser__badge span {
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Color variants – linked directly to the ACF select values */
.assessments-chooser__badge--blue {
background-color: var(--assessment-blue);
}
.assessments-chooser__badge--blue span {
color: #ffffff;
}
.assessments-chooser__badge--green {
background-color: var(--assessment-green);
}
.assessments-chooser__badge--green span {
color: #ffffff;
}
.assessments-chooser__badge--black {
background-color: var(--assessment-black);
}
.assessments-chooser__badge--black span {
color: #ffffff;
}
.assessments-chooser__badge--offwhite {
background-color: var(--assessment-offwhite);
}
.assessments-chooser__badge--offwhite span {
color: #1E1E1E;
}
.assessments-chooser__badge--orange {
background-color: var(--assessment-orange);
}
.assessments-chooser__badge--orange span {
color: #ffffff;
}
.assessments-chooser__badge--yellow {
background-color: var(--assessment-yellow);
}
.assessments-chooser__badge--yellow span {
color: #1E1E1E;
}
.assessments-chooser__badge--lightteal {
background-color: var(--assessment-lightteal);
}
.assessments-chooser__badge--lightteal span {
color: #1E1E1E;
}
/* ---------------------------------------
* Stories rail – visible scrollbar + soft snapping
* ------------------------------------- */
.tg-stories__rail {
display: flex;
gap: clamp(1.5rem, 3vw, 2rem);
overflow-x: auto;
overflow-y: hidden;
padding-block: clamp(1.5rem, 3vw, 2rem);
margin-inline: -1.5rem;
padding-inline: 1.5rem;
/* Smooth horizontal scroll */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* Soft snap instead of hard “jump” */
scroll-snap-type: x proximity;
position: relative;
/* Show a thin scrollbar (Firefox) */
scrollbar-width: thin;
}
/* WebKit scrollbar styling (Chrome, Edge, Safari) */
.tg-stories__rail::-webkit-scrollbar {
height: 6px; /* horizontal scrollbar height */
}
.tg-stories__rail::-webkit-scrollbar-track {
background: transparent;
}
.tg-stories__rail::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 999px;
}
/* Each card acts as a snap point, but scrolling stays smooth */
.tg-stories__card {
flex: 0 0 min(320px, 80vw);
scroll-snap-align: start;
}
/* Optional: right-edge fade hint that there is more content */
.tg-stories__rail::after {
content: "";
position: sticky;
right: 0;
top: 0;
bottom: 0;
width: 40px;
pointer-events: none;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
}
.tg-calc-intro {
max-width: 100%;
text-align: left; /* or center if you prefer */
}
.tg-calc-intro p {
font-size: 17px;
line-height: 1.6;
color: #111;
}
/* Allow eyebrow text to wrap on small screens so it doesn't get cut */
@media (max-width: 600px) {
.tg-blackgrid__eyebrow--ts {
white-space: normal; /* enable wrapping */
flex-wrap: wrap; /* allow inline-flex to go to multiple lines */
}
}
.tg-logos .tg-container{
max-width:2000px;
}
/* Ensure the rail is horizontally scrollable */
.tg-stories__rail {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
/* If you *previously* hid scrollbars globally, override for this rail */
.tg-stories__rail::-webkit-scrollbar {
height: 4px;
}
.tg-stories__rail::-webkit-scrollbar-track {
background: rgba(0,0,0,.06);
border-radius: 999px;
}
.tg-stories__rail::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.45);
border-radius: 999px;
}