/* ========================================================================= GES Theme — craft layer (v2: one content column, bolder art direction) Every section is full-bleed; .ges-wrap imposes the single 1200px column so ALL content shares one left edge. Tokens come from theme.json. ========================================================================= */ :root { --ges-ease: cubic-bezier(0.16, 0.84, 0.24, 1); --ges-red: var(--wp--preset--color--accent); --ges-red-deep: #c8332f; --ges-ink: var(--wp--preset--color--contrast); --ges-pad: clamp(1.25rem, 5vw, 2.75rem); --ges-shadow-sm: 0 1px 2px rgba(20,22,26,.04), 0 4px 14px rgba(20,22,26,.06); --ges-shadow-md: 0 10px 24px rgba(20,22,26,.08), 0 24px 60px rgba(20,22,26,.10); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* ---- The one content column ------------------------------------------- */ .ges-wrap { width: min(100% - 2rem, 1200px); margin-inline: auto; } .ges-section { padding-block: clamp(4rem, 9vw, 8.5rem); } .ges-section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); } .ges-measure { max-width: 56ch; } .ges-lede { color: #2b2e34; font-size: clamp(1.12rem, 1.5vw, 1.4rem); line-height: 1.5; } /* Section header (left-aligned, capped) — NOT an eyebrow on every section */ .ges-shead { margin-bottom: clamp(2rem, 4vw, 3.25rem); } .ges-shead h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 1rem; } .ges-kicker { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ges-red); margin: 0 0 1rem; } .ges-kicker::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; border-radius: 2px; } /* ---- Buttons ----------------------------------------------------------- */ .wp-block-button__link { transition: transform .2s var(--ges-ease), background-color .2s var(--ges-ease), box-shadow .2s var(--ges-ease); will-change: transform; } .wp-block-button:not(.is-style-outline):not(.ges-btn-ghost):not(.ges-btn-ghost-ink) .wp-block-button__link { box-shadow: 0 2px 6px rgba(200,51,47,.28), 0 12px 28px rgba(200,51,47,.22); } .wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); } .ges-btn-ghost .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } .ges-btn-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,.10); } .ges-btn-ghost-ink .wp-block-button__link { background: transparent; color: var(--ges-ink); box-shadow: inset 0 0 0 1.5px rgba(20,22,26,.22); } .ges-btn-ghost-ink .wp-block-button__link:hover { box-shadow: inset 0 0 0 1.5px var(--ges-ink); background: rgba(20,22,26,.05); } /* ---- Header ------------------------------------------------------------ */ /* NB: no backdrop-filter/transform here — it would trap the nav's fixed overlay. */ .ges-header { background: rgba(255,255,255,.96) !important; z-index: 100; transition: padding .28s ease, box-shadow .28s ease; } .ges-header > .wp-block-group { transition: max-width .28s ease; } /* Make the header actually STICK. The header template-part wrapper is a direct child of the tall .wp-site-blocks; the inner .ges-header alone is hugged by this wrapper, so position:sticky on it has no room to travel. Stick the wrapper. */ .wp-block-template-part:has(> .ges-header), header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } /* Logo sizing + smooth shrink on scroll */ .ges-header .wp-block-site-logo img { width: 132px !important; height: auto !important; transition: width .28s ease; } /* Scrolled state (toggled by ges.js): compact bar + smaller logo + a lift shadow, and the content shrinks in a touch horizontally. */ .ges-header.is-scrolled { padding-top: .35rem !important; padding-bottom: .35rem !important; box-shadow: 0 6px 22px rgba(20,22,26,.10); } .ges-header.is-scrolled > .wp-block-group { max-width: 1040px; } .ges-header.is-scrolled .wp-block-site-logo img { width: 104px !important; } /* Primary nav links: uppercase + bolder, sized to sit neatly in the bar */ .ges-nav .wp-block-navigation-item__content { text-transform: uppercase; font-weight: 700; } .ges-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { font-size: .8rem; letter-spacing: .05em; } @media (prefers-reduced-motion: reduce) { .ges-header, .ges-header > .wp-block-group, .ges-header .wp-block-site-logo img { transition: none; } } /* Language switcher */ .ges-langsw { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; letter-spacing: .03em; } .ges-langsw a { color: var(--wp--preset--color--muted); text-decoration: none; } .ges-langsw a[aria-current="true"] { color: var(--ges-ink); } .ges-langsw span { color: var(--wp--preset--color--border); } /* Mobile nav overlay — full-screen dark panel, large tappable links */ .wp-block-navigation__responsive-container.is-menu-open { padding: clamp(1.5rem, 7vw, 3rem) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { justify-content: center; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .15rem; align-items: flex-start; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(1.7rem, 8vw, 2.5rem); letter-spacing: -0.02em; padding: .25rem 0; } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; } /* No white strip between the header and a full-bleed coloured hero: drop the root block-gap above the content when the first section spans the full width. */ main:has(> .wp-block-post-content > .alignfull:first-child) { margin-top: 0; } /* ========================================================================= HERO — cinematic, full column, slow zoom ========================================================================= */ .ges-hero { display: flex; align-items: center; min-height: clamp(36rem, 90vh, 60rem); } .ges-hero .wp-block-cover__inner-container { width: 100%; padding: 0; } .ges-hero .wp-block-cover__image-background { object-fit: cover; } .ges-hero .wp-block-cover__background { background: linear-gradient(98deg, rgba(13,15,19,.86) 0%, rgba(13,15,19,.66) 38%, rgba(13,15,19,.30) 70%, rgba(13,15,19,.10) 100%) !important; opacity: 1 !important; } @media (prefers-reduced-motion: no-preference) { .ges-hero .wp-block-cover__image-background { animation: ges-kenburns 24s ease-out both; } @keyframes ges-kenburns { from { transform: scale(1.02); } to { transform: scale(1.13); } } } .ges-hero__inner { max-width: 50rem; padding-block: clamp(3rem, 8vh, 6rem); } .ges-hero .ges-kicker { color: #fff; } .ges-hero .ges-kicker::before { background: var(--wp--preset--color--accent-2); } .ges-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.9rem, 6.6vw, 5.6rem); line-height: .98; letter-spacing: -0.032em; margin: 0 0 1.3rem; } .ges-hero h1 .ges-hl { color: var(--wp--preset--color--accent-2); } .ges-hero__sub { color: rgba(255,255,255,.9); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.5; max-width: 40ch; margin: 0 0 2.2rem; } .ges-hero__credit { position: absolute; right: var(--ges-pad); bottom: .7rem; margin: 0; color: rgba(255,255,255,.55); font-size: .7rem; } .ges-hero__credit a { color: inherit; } .ges-hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; } @media (prefers-reduced-motion: no-preference) { .ges-hero__scroll { animation: ges-bob 2.4s var(--ges-ease) infinite; } @keyframes ges-bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} } } @media (prefers-reduced-motion: no-preference) { .ges-hero__inner > * { animation: ges-rise .8s var(--ges-ease) both; } .ges-hero__inner > *:nth-child(1){animation-delay:.10s} .ges-hero__inner > *:nth-child(2){animation-delay:.18s} .ges-hero__inner > *:nth-child(3){animation-delay:.26s} .ges-hero__inner > *:nth-child(4){animation-delay:.34s} .ges-hero__inner > *:nth-child(5){animation-delay:.42s} @keyframes ges-rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } } /* ========================================================================= IMPACT BAND — the bold dark moment with animated numbers ========================================================================= */ .ges-impact { background: var(--ges-ink); color: #fff; position: relative; overflow: clip; padding-block: clamp(3rem, 6vw, 5rem); } .ges-impact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 88% -10%, rgba(232,66,63,.34), transparent 60%); pointer-events: none; } .ges-impact .ges-wrap { position: relative; } .ges-impact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .ges-stat__num { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; color: #fff; } .ges-stat__num .u { color: var(--wp--preset--color--accent-2); } .ges-stat__label { display: block; margin-top: .7rem; color: rgba(255,255,255,.72); font-size: .98rem; line-height: 1.4; max-width: 22ch; } .ges-impact__lead { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-family: var(--wp--preset--font-family--heading); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; max-width: 34ch; margin: 0 0 clamp(2.25rem, 4vw, 3.25rem); } /* ========================================================================= PATHS — two committed panels ========================================================================= */ .ges-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .ges-path { padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--wp--preset--color--border); border-radius: 18px; background: #fff; box-shadow: var(--ges-shadow-sm); transition: transform .22s var(--ges-ease), box-shadow .22s var(--ges-ease); } .ges-path:hover { transform: translateY(-5px); box-shadow: var(--ges-shadow-md); } .ges-path h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0 0 .8rem; letter-spacing: -0.01em; } .ges-path p { color: #34373d; margin: 0 0 1.2rem; } .ges-path--org { background: var(--ges-ink); color: #fff; border-color: transparent; } .ges-path--org h3, .ges-path--org p { color: #fff; } .ges-path--org p { color: rgba(255,255,255,.82); } .ges-price { display: inline-block; margin-top: .4rem; color: var(--wp--preset--color--accent-2); font-weight: 800; font-family: var(--wp--preset--font-family--heading); } .ges-path__link { font-weight: 700; color: var(--ges-red); text-decoration: none; } .ges-path--org .ges-path__link { color: var(--wp--preset--color--accent-2); } .ges-path__link:hover { text-decoration: underline; } /* ========================================================================= STAGES — oversized numbered lifecycle ========================================================================= */ .ges-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.75rem, 3.5vw, 3.25rem); } .ges-stage { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--ges-ink); } .ges-stage__num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(2.5rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--ges-red); margin: 0 0 .2rem; } .ges-stage__phase { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 1rem; } .ges-stage h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 0 0 1rem; } .ges-stage ul { list-style: none; margin: 0; padding: 0; } .ges-stage li { padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--border); color: #2b2e34; display: flex; gap: .65rem; } .ges-stage li::before { content: ""; margin-top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ges-red); flex: none; } /* ========================================================================= ABOUT — portrait on a tinted panel, layered ========================================================================= */ .ges-about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; background: var(--wp--preset--color--surface); border-radius: 24px; padding: clamp(1.75rem, 4vw, 3.5rem); } .ges-about__photo img { width: 100%; max-width: 300px; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; filter: drop-shadow(0 18px 40px rgba(20,22,26,.16)); } .ges-about .ges-creds { color: var(--ges-red); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .8rem; } .ges-about h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -0.02em; margin: 0 0 1.1rem; } @media (max-width: 781px) { .ges-about { grid-template-columns: 1fr; } .ges-about__photo img { max-width: 240px; } } /* ========================================================================= KNOWLEDGE HUB strip ========================================================================= */ .ges-kh { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; } .ges-kh h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -0.02em; margin: 0 0 1rem; } @media (max-width: 781px) { .ges-kh { grid-template-columns: 1fr; align-items: start; } } /* ========================================================================= CTA BAND — Committed: the surface IS the red ========================================================================= */ .ges-cta { background: var(--ges-red); color: #fff; position: relative; overflow: clip; text-align: center; } .ges-cta::after { content: ""; position: absolute; right: -6%; top: -60%; width: 50%; height: 220%; background: radial-gradient(closest-side, rgba(255,215,48,.34), transparent 70%); pointer-events: none; } .ges-cta .ges-wrap { position: relative; max-width: 880px; } .ges-cta h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.025em; margin: 0 0 1rem; } .ges-cta p { color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 46ch; margin-inline: auto; } .ges-cta .wp-block-buttons { justify-content: center; margin-top: 2rem; } .ges-cta .wp-block-button:not(.ges-btn-ghost) .wp-block-button__link { background: #fff; color: var(--ges-red); box-shadow: 0 10px 28px rgba(13,15,19,.2); } .ges-cta .wp-block-button:not(.ges-btn-ghost) .wp-block-button__link:hover { background: var(--ges-ink); color: #fff; } .ges-cta .ges-btn-ghost .wp-block-button__link { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65); } /* ---- Scroll-reveal (enhances an already-visible default) --------------- */ .js .ges-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ges-ease), transform .7s var(--ges-ease); } .js .ges-reveal.is-in { opacity: 1; transform: none; } /* ---- Hero cinematic depth: vignette + fine grain + trust chip ---------- */ .ges-hero { isolation: isolate; } .ges-hero .wp-block-cover__inner-container { z-index: 3; } .ges-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(130% 130% at 72% 26%, transparent 50%, rgba(8,9,12,.5) 100%); } .ges-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .ges-hero__chip { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 600; } .ges-hero__chip .ges-stars { color: var(--wp--preset--color--accent-2); letter-spacing: 2px; } /* ---- Knowledge Hub: real article cards -------------------------------- */ .ges-kh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 4vw, 3rem); } .ges-kh-card { display: block; border: 1px solid var(--wp--preset--color--border); border-radius: 16px; overflow: clip; background: #fff; box-shadow: var(--ges-shadow-sm); transition: transform .22s var(--ges-ease), box-shadow .22s var(--ges-ease); text-decoration: none; color: inherit; } .ges-kh-card:hover { transform: translateY(-4px); box-shadow: var(--ges-shadow-md); } .ges-kh-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .ges-kh-card__body { padding: 1.1rem 1.25rem 1.4rem; } .ges-kh-card__cat { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ges-red); } .ges-kh-card__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.18rem; line-height: 1.25; letter-spacing: -0.01em; margin: .5rem 0 0; } /* Knowledge Hub listing — Query Loop variant (post-template