/* ============================================================================
GPS Modern - Front-end supplemental styles
Implements the SGG GPS purple/yellow rebrand from Claude Design.
Source: /sgg-gps-site/project/tokens.css
========================================================================== */
:root {
/* Aliased from theme.json so this file stays readable */
--sg-primary: var(--wp--preset--color--primary); /* #563F8E */
--sg-primary-deep:var(--wp--preset--color--primary-deep); /* #32243C */
--sg-primary-dk: var(--wp--preset--color--primary-darker); /* #2B0A59 */
--sg-primary-hero:var(--wp--preset--color--primary-light); /* #6B57B4 */
--sg-purple-bright:var(--wp--preset--color--purple-bright); /* #8B7AD2 */
--sg-lavender: var(--wp--preset--color--lavender); /* #B9ADE3 */
--sg-accent: var(--wp--preset--color--accent); /* #FFD600 */
--sg-accent-hover:var(--wp--preset--color--accent-hover); /* #FFE036 */
--sg-cream: var(--wp--preset--color--cream); /* #FAF7FF */
--sg-cool: var(--wp--preset--color--cool); /* #F5F2FF */
--sg-line: var(--wp--preset--color--line); /* #E5E0F0 */
--sg-text: var(--wp--preset--color--ink); /* #32243C */
--sg-text-muted: var(--wp--preset--color--text-muted); /* #67567B */
--sg-radius: 10px;
--sg-radius-lg: 20px;
--sg-radius-pill: 999px;
--sg-shadow-card: 0 1px 2px rgb(50 36 60 / 0.05), 0 12px 28px -16px rgb(50 36 60 / 0.22);
--sg-shadow-elev: 0 1px 2px rgb(50 36 60 / 0.06), 0 24px 60px -24px rgb(50 36 60 / 0.32);
--sg-transition: 200ms ease;
}
/* ---- Global type rendering --------------------------------------------- */
html { scroll-behavior: smooth; }
/* Decorative ring SVGs in full-width bands intentionally bleed past their
section. Clip horizontal overflow at the document root so they never create
a page-wide horizontal scrollbar. `clip` (not `hidden`) keeps this from
becoming a scroll container, so sticky positioning still works. Applied to
ONLY - putting it on forces body's overflow-y to compute as
`auto`, making body its own scroll container and leaving a scrollbar-gutter
"white border" alongside the html scrollbar. */
html { overflow-x: clip; }
body {
font-family: var(--wp--preset--font-family--sans);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-query-title { text-wrap: balance; }
/* Header sits flush against page content (no root block-gap above main) -
uniform on every template; first content section provides its own spacing. */
.wp-site-blocks > main { margin-block-start: 0; }
/* ...and the footer butts up against the last content section (no gap). */
.wp-site-blocks > footer { margin-block-start: 0; }
/* Full-bleed band sections on sectioned pages (homepage + page-canvas pages
like /why-gps/, /services/) butt up against each other - each band self-pads,
so the root block-gap between them just leaves stray white strips between the
coloured bands (and around the scroll-anchor markers). */
.home .wp-block-post-content > *,
.page-template-page-canvas .wp-block-post-content > * { margin-block-start: 0; }
/* Country archive (/countries/): butt the hero up against the directory map so
it isn't pushed down by a stray block-gap white strip. */
.post-type-archive-country main > * { margin-block-start: 0; }
/* Focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
outline: 2px solid var(--sg-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ---- Skip link --------------------------------------------------------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--sg-primary-deep);
color: var(--sg-accent);
padding: 0.75rem 1rem;
font-weight: 600;
z-index: 100000;
border-radius: 0 0 8px 8px;
}
.skip-link:focus { left: 0; }
/* ============================================================================
THE ARC RULE - signature underline (now lavender #8B7AD2 by default)
========================================================================== */
.arc-rule,
.wp-block-separator.is-style-arc-rule {
display: inline-block;
width: 64px;
height: 4px;
border-radius: 4px;
background: var(--sg-purple-bright);
border: 0;
margin: 0;
opacity: 1;
}
.arc-rule.yellow,
.wp-block-separator.is-style-arc-rule.is-style-yellow,
.has-primary-deep-background-color .arc-rule,
.has-primary-darker-background-color .arc-rule,
.has-primary-light-background-color .arc-rule,
.has-purple-hero-background-color .arc-rule,
.has-primary-gradient-gradient-background .arc-rule,
.has-petrol-gradient-background .arc-rule,
.has-primary-accent-gradient-background .arc-rule,
.has-primary-background-color .arc-rule {
background: var(--sg-accent);
}
/* ============================================================================
EYEBROW
========================================================================== */
.is-style-eyebrow {
font-family: var(--wp--preset--font-family--sans) !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sg-primary) !important;
margin-bottom: 1rem !important;
line-height: 1.2 !important;
}
.is-style-eyebrow.on-dark,
.has-primary-deep-background-color .is-style-eyebrow,
.has-primary-darker-background-color .is-style-eyebrow,
.has-primary-gradient-gradient-background .is-style-eyebrow,
.has-petrol-gradient-background .is-style-eyebrow { color: var(--sg-accent) !important; }
.has-primary-background-color .is-style-eyebrow,
.has-primary-light-background-color .is-style-eyebrow,
.has-purple-hero-background-color .is-style-eyebrow { color: var(--sg-purple-bright) !important; }
/* ============================================================================
BUTTONS - pill (yellow primary, purple secondary, etc.)
========================================================================== */
.wp-block-button .wp-block-button__link {
border-radius: var(--sg-radius-pill);
border: 1.5px solid transparent;
transition: transform var(--sg-transition), box-shadow var(--sg-transition), background var(--sg-transition), color var(--sg-transition), border-color var(--sg-transition);
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 10px;
}
.wp-block-button .wp-block-button__link:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgb(255 214 0 / 0.6);
}
/* Yellow primary (default) */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-accent-background-color {
background: var(--sg-accent) !important;
color: var(--sg-primary-deep) !important;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.has-accent-background-color:hover {
background: var(--sg-accent-hover) !important;
}
/* Purple */
.wp-block-button.is-style-purple .wp-block-button__link,
.wp-block-button.is-style-teal .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-primary-background-color {
background: var(--sg-primary) !important;
color: #fff !important;
}
.wp-block-button.is-style-purple .wp-block-button__link:hover,
.wp-block-button.is-style-teal .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.has-primary-background-color:hover {
background: #6E5AAF !important;
box-shadow: 0 8px 24px -8px rgb(86 63 142 / 0.55);
}
/* Outline (on light) */
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: var(--sg-primary-deep) !important;
border-color: var(--sg-primary-deep) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--sg-primary-deep) !important;
color: #fff !important;
}
/* Outline-light (on dark) */
.wp-block-button.is-style-outline-light .wp-block-button__link {
background: transparent !important;
color: #fff !important;
border-color: rgba(255,255,255,.6) !important;
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
background: #fff !important;
color: var(--sg-primary-deep) !important;
border-color: #fff !important;
}
/* Ghost (text + arrow) */
.wp-block-button.is-style-ghost .wp-block-button__link {
background: transparent !important;
color: var(--sg-primary) !important;
border: 0 !important;
padding: 10px 0 !important;
font-weight: 600;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
color: var(--sg-primary-deep) !important;
box-shadow: none;
transform: translateY(0);
}
/* Arrow suffix (animates on hover) */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
content: " →";
display: inline-block;
transition: transform var(--sg-transition);
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }
/* Pill (default) */
.wp-block-button.is-style-pill .wp-block-button__link { border-radius: var(--sg-radius-pill) !important; }
/* ============================================================================
CARDS & SECTIONS
========================================================================== */
.wp-block-group.is-style-card {
background: #fff;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-lg);
padding: 28px;
transition: transform var(--sg-transition), box-shadow var(--sg-transition), border-color var(--sg-transition);
}
.wp-block-group.is-style-card:hover {
transform: translateY(-2px);
box-shadow: var(--sg-shadow-card);
border-color: transparent;
}
.wp-block-group.is-style-card-bordered {
background: #fff;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-lg);
transition: transform var(--sg-transition), box-shadow var(--sg-transition), border-color var(--sg-transition);
}
.wp-block-group.is-style-card-bordered:hover {
border-color: var(--sg-primary);
box-shadow: var(--sg-shadow-card);
transform: translateY(-2px);
}
.wp-block-group.is-style-pillar-card {
background: var(--sg-cream);
border-radius: var(--sg-radius-lg);
padding: 40px;
position: relative;
overflow: hidden;
}
.wp-block-group.is-style-feature-box {
background: var(--sg-cool);
border-left: 4px solid var(--sg-primary);
padding: 24px 28px !important;
border-radius: 0 12px 12px 0;
}
.wp-block-group.is-style-section {
padding-top: var(--wp--preset--spacing--60);
padding-bottom: var(--wp--preset--spacing--60);
}
/* ============================================================================
HEADINGS w/ underline-accent (back-compat alias for arc-rule)
========================================================================== */
.is-style-underline-accent {
position: relative;
padding-bottom: 0.75rem;
}
.is-style-underline-accent::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 4px;
background: var(--sg-purple-bright);
border-radius: 4px;
}
.has-primary-deep-background-color .is-style-underline-accent::after,
.has-primary-darker-background-color .is-style-underline-accent::after,
.has-primary-light-background-color .is-style-underline-accent::after,
.has-purple-hero-background-color .is-style-underline-accent::after,
.has-primary-gradient-gradient-background .is-style-underline-accent::after,
.has-primary-background-color .is-style-underline-accent::after { background: var(--sg-accent); }
/* ============================================================================
IMAGES
========================================================================== */
.wp-block-image.is-style-rounded-lg img { border-radius: var(--sg-radius-lg); }
.wp-block-image.is-style-shadow-lift img {
box-shadow: var(--sg-shadow-elev);
border-radius: var(--sg-radius);
}
/* ============================================================================
SEPARATORS
========================================================================== */
.wp-block-separator.is-style-arc-rule,
.wp-block-separator.is-style-accent-mark {
border: 0;
height: 4px;
width: 64px;
background: var(--sg-purple-bright);
border-radius: 4px;
opacity: 1;
margin-left: 0;
}
.has-primary-background-color .wp-block-separator.is-style-arc-rule,
.has-primary-light-background-color .wp-block-separator.is-style-arc-rule,
.has-primary-deep-background-color .wp-block-separator.is-style-arc-rule,
.has-primary-darker-background-color .wp-block-separator.is-style-arc-rule,
.has-purple-hero-background-color .wp-block-separator.is-style-arc-rule,
.has-petrol-gradient-background .wp-block-separator.is-style-arc-rule,
.has-primary-gradient-gradient-background .wp-block-separator.is-style-arc-rule { background: var(--sg-accent); }
/* ============================================================================
QUOTES
========================================================================== */
.wp-block-quote.is-style-testimonial-card {
background: #fff;
border: 1px solid var(--sg-line) !important;
border-radius: var(--sg-radius-lg);
padding: 24px 28px !important;
box-shadow: 0 1px 2px rgb(50 36 60 / 0.05);
}
.wp-block-quote.is-style-testimonial-card cite {
display: block;
margin-top: 1rem;
font-style: normal;
font-size: 0.875rem;
color: var(--sg-text-muted);
}
.wp-block-quote.is-style-big-quote {
border: 0 !important;
padding: 0 !important;
}
.wp-block-quote.is-style-big-quote p {
font-size: clamp(1.75rem, 3vw, 3.25rem);
font-weight: 300;
line-height: 1.15;
letter-spacing: -0.02em;
}
/* ============================================================================
LISTS - check + arrows
========================================================================== */
.wp-block-list.is-style-check,
ul.is-style-check {
list-style: none;
padding-left: 0;
}
.wp-block-list.is-style-check li,
ul.is-style-check li {
position: relative;
padding-left: 1.75rem;
margin-bottom: 0.25rem;
}
.wp-block-list.is-style-check li::before,
ul.is-style-check li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--sg-primary);
font-weight: 700;
}
.wp-block-list.is-style-arrows,
ul.is-style-arrows { list-style: none; padding-left: 0; }
.wp-block-list.is-style-arrows li,
ul.is-style-arrows li { position: relative; padding-left: 1.5rem; }
.wp-block-list.is-style-arrows li::before,
ul.is-style-arrows li::before {
content: "→";
position: absolute;
left: 0;
color: var(--sg-primary);
font-weight: 700;
}
/* ============================================================================
LOGO TOGGLE - uploaded site logo wins; inline SVG/img is the fallback
========================================================================== */
.gps-brand { position: relative; }
body.has-custom-logo .gps-logo-fallback { display: none !important; }
body:not(.has-custom-logo) .gps-brand .wp-block-site-logo { display: none !important; }
.gps-brand .wp-block-site-logo img.custom-logo { display: block; max-height: 46px; width: auto; }
.gps-site-footer .gps-brand .wp-block-site-logo img.custom-logo { max-height: 56px; }
/* SVG logo helpers */
.gps-logo-img { display: block; height: 46px; width: auto; }
.gps-logo-img--light { filter: brightness(0) invert(1); }
/* ============================================================================
HEADER (now WHITE) + notch + chevron nav
========================================================================== */
.gps-site-header {
background: #fff;
position: relative;
z-index: 50;
overflow: visible;
}
.gps-site-header .gps-brand { position: relative; }
/* Nav links, dark on white */
.gps-site-header .wp-block-navigation { font-weight: 600; }
.gps-site-header .wp-block-navigation-item__content {
color: var(--sg-primary-deep);
transition: color var(--sg-transition);
display: inline-flex;
align-items: center;
gap: 8px;
}
.gps-site-header .wp-block-navigation-item__content:hover,
.gps-site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: var(--sg-primary); }
/* Add a small chevron after each top-level nav item label (matches the design) */
.gps-site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
content: "";
display: inline-block;
width: 10px;
height: 6px;
margin-left: 6px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: 0.7;
}
/* Submenu styling stays light */
.gps-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
background: #fff;
border: 1px solid var(--sg-line);
border-radius: 12px;
box-shadow: var(--sg-shadow-card);
padding: 8px;
min-width: 220px;
}
/* ============================================================================
STATS BAND tick
========================================================================== */
.gps-stat-tick {
border-left: 3px solid var(--sg-primary);
padding-left: 20px;
}
/* Quick-facts card - strong drop shadow lifts it off the petrol hero.
(Core block attrs can't express this custom box-shadow.) */
.gps-quickfacts-card {
box-shadow: 0 32px 80px -32px rgba(50, 36, 60, 0.5);
}
/* Quick-facts: hide a fact whose bound meta value is empty, and the expert
footer when there is no named expert. Block bindings can't self-hide, so the
value paragraph renders empty (:empty) and CSS removes its group. */
.gps-quickfacts-card .gps-fact:has(.gps-fact__val:empty) { display: none; }
.gps-quickfacts-card .gps-expert:has(.gps-expert__name:empty) { display: none; }
/* If a country has no facts at all, hide the whole card rather than show an empty box. */
.gps-quickfacts-card:not(:has(.gps-fact__val:not(:empty))) { display: none; }
/* ============================================================================
HEADER CTA - a normal nav menu item (class `gps-cta`) rendered as the yellow
pill button. Users edit its link/label in the same nav menu UI as the other
header links; the class drives the button styling.
========================================================================== */
.wp-block-navigation .wp-block-navigation-item.gps-cta {
margin-left: 8px;
}
.wp-block-navigation-item.gps-cta a.wp-block-navigation-item__content {
background: var(--sg-accent);
color: var(--sg-primary-deep);
padding: 12px 26px;
border-radius: 999px;
font-weight: 600;
transition: background-color 0.15s ease;
}
.wp-block-navigation-item.gps-cta a.wp-block-navigation-item__content:hover,
.wp-block-navigation-item.gps-cta a.wp-block-navigation-item__content:focus {
background: var(--sg-accent-hover);
color: var(--sg-primary-deep);
}
/* ============================================================================
LONG-FORM PROSE (migrated pages, posts, CPT article bodies)
Scoped to DIRECT children of post-content. Headings inside inserted patterns
are nested in groups/columns, so `>` keeps the brand prose treatment off them.
========================================================================== */
.wp-block-post-content > h2,
.wp-block-post-content > h3 {
color: var(--sg-primary);
line-height: 1.25;
margin-top: 2.75rem;
margin-bottom: 0.6rem;
text-wrap: balance;
}
.wp-block-post-content > h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.wp-block-post-content > h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.wp-block-post-content > h2:first-child,
.wp-block-post-content > h3:first-child { margin-top: 0; }
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--sg-text);
margin-top: 0;
margin-bottom: 1.15rem;
}
.wp-block-post-content > ul,
.wp-block-post-content > ol { padding-left: 1.4rem; }
.wp-block-post-content > ul > li,
.wp-block-post-content > ol > li { margin-bottom: 0.45rem; }
.wp-block-post-content > ul > li::marker,
.wp-block-post-content > ol > li::marker { color: var(--sg-primary); }
/* ============================================================================
FOOTER (purple-black #32243C)
========================================================================== */
.gps-site-footer { background: var(--sg-primary-deep); color: rgba(255,255,255,.78); }
.gps-site-footer a { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--sg-transition); }
.gps-site-footer a:hover { color: var(--sg-accent); }
.gps-footer-list { list-style: none; padding-left: 0; }
.gps-footer-list li { padding-left: 0; }
.gps-footer-col-heading {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sg-accent);
font-weight: 600;
margin-bottom: 18px;
}
.gps-footer-col-heading a { color: inherit; text-decoration: none; }
/* Footer columns rendered from the "Footer" nav menu (top-level item = column,
sub-items = links). See gps_modern_footer_nav() in inc/nav.php. */
.gps-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.gps-footer-list { font-size: 14px; line-height: 2.1; }
/* Footer legal / utility row (the "Legal" nav menu). */
.gps-footer-legal-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 28px;
font-size: 13px;
}
@media (max-width: 980px) { .gps-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gps-footer-cols { grid-template-columns: 1fr; } }
/* ============================================================================
BREADCRUMBS
========================================================================== */
.gps-breadcrumbs {
font-size: 0.8125rem;
color: var(--sg-text-muted);
}
.gps-breadcrumbs__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.gps-breadcrumbs__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.gps-breadcrumbs__item a { color: var(--sg-text-muted); text-decoration: none; }
.gps-breadcrumbs__item a:hover { color: var(--sg-primary); text-decoration: underline; }
.gps-breadcrumbs__item[aria-current="page"] { color: var(--sg-primary); font-weight: 500; }
.gps-breadcrumbs__sep { color: var(--sg-line); }
.has-primary-deep-background-color .gps-breadcrumbs,
.has-primary-darker-background-color .gps-breadcrumbs,
.has-purple-hero-background-color .gps-breadcrumbs,
.has-primary-gradient-gradient-background .gps-breadcrumbs,
.has-petrol-gradient-background .gps-breadcrumbs { color: rgba(255,255,255,.75); }
.has-primary-deep-background-color .gps-breadcrumbs a,
.has-primary-darker-background-color .gps-breadcrumbs a,
.has-purple-hero-background-color .gps-breadcrumbs a,
.has-primary-gradient-gradient-background .gps-breadcrumbs a,
.has-petrol-gradient-background .gps-breadcrumbs a { color: rgba(255,255,255,.88); }
.has-primary-deep-background-color .gps-breadcrumbs a:hover,
.has-primary-darker-background-color .gps-breadcrumbs a:hover,
.has-purple-hero-background-color .gps-breadcrumbs a:hover,
.has-primary-gradient-gradient-background .gps-breadcrumbs a:hover,
.has-petrol-gradient-background .gps-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
/* Country hero region tag (post-terms link, styled as the eyebrow): inherit the
eyebrow colour (accent yellow on the dark hero) and stay clean/underline-free. */
.gps-hero-region a { color: inherit; text-decoration: none; }
.gps-hero-region a:hover { text-decoration: underline; }
/* The quick-facts card is white but sits inside the dark hero, so the hero's
eyebrow override turns its heading yellow (fails contrast on white). Force
the card's eyebrow back to brand purple. */
.gps-quickfacts-card .is-style-eyebrow { color: var(--sg-primary) !important; }
.has-primary-deep-background-color .gps-breadcrumbs__item[aria-current="page"],
.has-primary-darker-background-color .gps-breadcrumbs__item[aria-current="page"],
.has-purple-hero-background-color .gps-breadcrumbs__item[aria-current="page"],
.has-primary-gradient-gradient-background .gps-breadcrumbs__item[aria-current="page"],
.has-petrol-gradient-background .gps-breadcrumbs__item[aria-current="page"] { color: var(--sg-accent); }
/* Blog post-meta (date · author) reads light on the canonical gradient hero. */
.has-primary-gradient-gradient-background .gps-post-meta,
.has-petrol-gradient-background .gps-post-meta { color: rgba(255,255,255,.78) !important; }
/* ============================================================================
NEWSLETTER FORM
========================================================================== */
.gps-newsletter {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: stretch;
}
.gps-newsletter--pill {
background: #fff;
border-radius: var(--sg-radius-pill);
padding: 8px;
}
.gps-newsletter__input {
flex: 1 1 220px;
min-width: 0;
padding: 0.85rem 1.25rem;
font: inherit;
color: var(--sg-text);
background: transparent;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius);
transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}
.gps-newsletter--pill .gps-newsletter__input {
border: 0;
padding-left: 1.25rem;
background: transparent;
}
.gps-newsletter__input:focus {
outline: none;
border-color: var(--sg-primary);
box-shadow: 0 0 0 3px rgb(86 63 142 / 0.18);
}
.gps-newsletter__input::placeholder { color: var(--sg-text-muted); }
.gps-newsletter__btn {
padding: 0.85rem 1.5rem;
font: inherit;
font-weight: 600;
color: var(--sg-primary-deep);
background: var(--sg-accent);
border: 0;
border-radius: var(--sg-radius-pill);
cursor: pointer;
transition: background var(--sg-transition);
display: inline-flex;
align-items: center;
gap: 8px;
}
.gps-newsletter__btn:hover { background: var(--sg-accent-hover); }
.gps-site-footer .gps-newsletter__input {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.18);
color: #fff;
}
.gps-site-footer .gps-newsletter__input::placeholder { color: rgba(255,255,255,.5); }
/* ============================================================================
PROCESS TIMELINE dot/line
========================================================================== */
.gps-step-dot {
width: 14px; height: 14px; border-radius: 50%; background: var(--sg-accent);
flex-shrink: 0;
}
.gps-step-line {
flex: 1; height: 2px; background: rgba(255,214,0,.35);
border-radius: 1px;
}
/* ============================================================================
COUNTRIES DIRECTORY (world map + region filter + grouped grid)
========================================================================== */
.gps-countries { --gps-map-dim: 0.28; }
/* --- World map --- */
.gps-worldmap {
position: relative;
border-radius: var(--sg-radius-lg);
overflow: hidden;
background: linear-gradient(180deg, #F5F2FF 0%, #FAF7FF 100%);
border: 1px solid var(--sg-line);
padding: clamp(8px, 2vw, 20px);
}
.gps-worldmap__svg {
display: block;
width: 100%;
height: auto;
}
.gps-cc { /* unserved landmass */
stroke: #fff;
stroke-width: 0.4;
vector-effect: non-scaling-stroke;
}
.gps-cc--served {
stroke: rgba(255,255,255,.85);
stroke-width: 0.5;
vector-effect: non-scaling-stroke;
transition: opacity 160ms ease, filter 160ms ease;
}
.gps-cc--served.is-hot {
filter: brightness(1.12);
stroke: var(--sg-accent);
stroke-width: 1.1;
}
/* When a region is active, dim everything that isn't it. */
.gps-countries:not([data-region="all"]) .gps-cc--served { opacity: var(--gps-map-dim); }
.gps-countries[data-region="north-america"] .gps-cc--served[data-region="north-america"],
.gps-countries[data-region="latin-america"] .gps-cc--served[data-region="latin-america"],
.gps-countries[data-region="europe"] .gps-cc--served[data-region="europe"],
.gps-countries[data-region="middle-east"] .gps-cc--served[data-region="middle-east"],
.gps-countries[data-region="africa"] .gps-cc--served[data-region="africa"],
.gps-countries[data-region="asia-pacific"] .gps-cc--served[data-region="asia-pacific"] { opacity: 1; }
.gps-worldmap__legend {
position: absolute;
left: clamp(12px, 2vw, 24px);
bottom: clamp(12px, 2vw, 20px);
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
max-width: min(72%, 560px);
padding: 10px 14px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(4px);
border-radius: var(--sg-radius);
box-shadow: var(--sg-shadow-card);
font-size: 0.75rem;
font-weight: 600;
color: var(--sg-text);
}
.gps-worldmap__key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gps-worldmap__swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* --- Region filter chips --- */
.gps-cfilter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 2rem;
}
.gps-cfilter__label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sg-text-muted);
margin-right: 4px;
}
.gps-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--sg-radius-pill);
background: #fff;
color: var(--sg-text);
border: 1px solid var(--sg-line);
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background var(--sg-transition), color var(--sg-transition), border-color var(--sg-transition);
}
.gps-chip:hover { border-color: var(--sg-primary); }
.gps-chip.is-active { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); }
.gps-chip__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.gps-chip.is-active .gps-chip__dot { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.gps-cfilter__count { margin-left: auto; font-size: 0.8125rem; color: var(--sg-text-muted); }
.gps-cfilter__count strong { color: var(--sg-primary); }
/* --- Search --- */
.gps-csearch {
display: flex;
align-items: center;
gap: 12px;
margin-top: 1.25rem;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius);
box-shadow: var(--sg-shadow-card);
}
.gps-csearch:focus-within { border-color: var(--sg-primary); }
.gps-csearch__input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 0.9375rem;
color: var(--sg-text);
}
/* --- Grouped grid --- */
.gps-cgroups { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 3.5rem; }
.gps-cgroup__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.gps-cgroup__title { font-size: 1.6rem; margin: 0; }
.gps-cgroup__count { color: var(--sg-text-muted); font-size: 0.875rem; }
.gps-cgroup__head .arc-rule { margin-left: auto; flex-shrink: 0; }
.gps-cgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.gps-country-card {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 18px;
border-radius: 12px;
background: var(--sg-cream);
border: 1px solid transparent;
text-decoration: none;
color: var(--sg-text);
transition: background var(--sg-transition), border-color var(--sg-transition), transform var(--sg-transition), box-shadow var(--sg-transition);
}
.gps-country-card:hover {
background: #fff;
border-color: var(--sg-primary);
transform: translateY(-2px);
box-shadow: var(--sg-shadow-card);
}
.gps-country-card__region { display: none; } /* region lives in the section header; kept in DOM for JS/a11y */
.gps-country-card__flag { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.gps-country-card__name { font-weight: 600; font-size: 0.9375rem; flex: 1; line-height: 1.25; }
.gps-country-card__arrow { color: var(--sg-primary); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity var(--sg-transition), transform var(--sg-transition); }
.gps-country-card:hover .gps-country-card__arrow { opacity: 1; transform: translateX(0); }
.gps-cnoresults { text-align: center; color: var(--sg-text-muted); padding: 2rem 0; font-size: 0.9375rem; }
.gps-cnoresults__reset { font: inherit; font-weight: 600; color: var(--sg-primary); background: none; border: 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 900px) {
.gps-cgrid { grid-template-columns: repeat(2, 1fr); }
.gps-cfilter__count { margin-left: 0; width: 100%; }
.gps-worldmap__legend { position: static; max-width: none; margin-top: 10px; box-shadow: none; background: transparent; backdrop-filter: none; padding: 10px 0 0; }
}
@media (max-width: 560px) {
.gps-cgrid { grid-template-columns: 1fr; }
}
/* ============================================================================
COUNTRY CHIPS (home "Borders become bridges" strip, native blocks)
========================================================================== */
.gps-country-chip {
margin: 0;
background: #fff;
border: 1px solid var(--sg-line);
border-radius: 10px;
padding: 14px;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
color: var(--sg-text);
transition: border-color var(--sg-transition), transform var(--sg-transition);
}
.gps-country-chip:hover { border-color: var(--sg-primary); transform: translateY(-2px); }
.gps-country-chip a { color: inherit; text-decoration: none; }
.gps-country-chip a:hover { color: var(--sg-primary); }
/* ============================================================================
SERVICES - branded panel tile (alternating rows)
========================================================================== */
.gps-service-tile {
position: relative;
min-height: 360px;
border-radius: var(--sg-radius-lg);
padding: 36px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
overflow: hidden;
text-decoration: none;
background: linear-gradient(150deg, var(--c, var(--sg-primary)) 0%, var(--sg-primary-deep) 100%);
box-shadow: var(--sg-shadow-elev);
transition: transform var(--sg-transition), box-shadow var(--sg-transition);
}
.gps-service-tile:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(50 36 60 / 0.08), 0 32px 70px -28px rgb(50 36 60 / 0.45); }
.gps-service-tile:hover .gps-service-tile__arc { opacity: 0.9; }
.gps-service-tile__arc { transition: opacity var(--sg-transition); }
.gps-service-tile__arc { position: absolute; top: -36px; right: -36px; width: 220px; height: 220px; pointer-events: none; }
.gps-service-tile__tag { position: relative; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.gps-service-tile__name { position: relative; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.gps-service-row { scroll-margin-top: 96px; }
/* ---- Services integrations strip ---- */
.gps-integrations { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.gps-integrations__item {
padding: 14px 26px;
background: #fff;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius);
font-size: 0.9375rem;
font-weight: 600;
color: var(--sg-text-muted);
}
/* ============================================================================
DETAILS / FAQ
========================================================================== */
.wp-block-details summary {
font-size: 1.0625rem;
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding-right: 0.5rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
content: "+";
font-size: 1.5rem;
font-weight: 300;
color: var(--sg-primary);
transition: transform var(--sg-transition);
line-height: 1;
}
.wp-block-details[open] summary::after { content: "−"; }
/* ============================================================================
PAGINATION
========================================================================== */
.wp-block-query-pagination {
gap: 0.5rem;
font-weight: 500;
}
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers .page-numbers {
padding: 0.5rem 0.95rem;
border-radius: var(--sg-radius-pill);
color: var(--sg-primary-deep);
text-decoration: none;
transition: background var(--sg-transition), color var(--sg-transition);
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination-numbers .page-numbers:hover { background: var(--sg-cream); }
.wp-block-query-pagination-numbers .page-numbers.current {
background: var(--sg-primary);
color: #fff;
}
/* ============================================================================
FORM PLUGIN COMPATIBILITY (CF7 / WPForms / Gravity)
========================================================================== */
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 select,
.wpcf7 textarea,
.wpforms-container .wpforms-field input[type=text],
.wpforms-container .wpforms-field input[type=email],
.wpforms-container .wpforms-field input[type=tel],
.wpforms-container .wpforms-field input[type=url],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea,
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper select,
.gform_wrapper textarea {
width: 100%;
padding: 0.75rem 1rem;
font: inherit;
color: var(--sg-text);
background: #fff;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius);
transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
outline: none;
border-color: var(--sg-primary);
box-shadow: 0 0 0 3px rgb(86 63 142 / 0.15);
}
.wpcf7 input[type=submit],
.wpforms-submit,
.gform_wrapper .gform_button {
padding: 13px 22px !important;
font: inherit !important;
font-weight: 600 !important;
color: var(--sg-primary-deep) !important;
background: var(--sg-accent) !important;
border: 0 !important;
border-radius: var(--sg-radius-pill) !important;
cursor: pointer !important;
transition: background var(--sg-transition) !important;
}
.wpcf7 input[type=submit]:hover,
.wpforms-submit:hover,
.gform_wrapper .gform_button:hover { background: var(--sg-accent-hover) !important; }
.gps-form-embed { min-height: 60px; }
.gps-form-embed .hbspt-form,
.gps-form-embed .mktoForm,
.gps-form-embed iframe { width: 100% !important; max-width: 100%; }
/* ============================================================================
TRUST BAR
========================================================================== */
.gps-trust-bar {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: nowrap;
}
.gps-trust-bar__label {
flex-shrink: 0;
color: var(--sg-text-muted);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
}
/* Auto-scrolling logo slider (marquee). Track holds the set twice; -50% = one set. */
.gps-trust-marquee {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gps-trust-track {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: gps-trust-scroll 38s linear infinite;
}
.gps-trust-marquee:hover .gps-trust-track { animation-play-state: paused; }
@keyframes gps-trust-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.gps-trust-track { animation: none; flex-wrap: wrap; }
}
.gps-trust-bar__brand {
color: var(--sg-primary-deep);
font-size: 18px;
font-weight: 600;
opacity: 0.75;
letter-spacing: -0.01em;
}
/* Client logos: normalise mixed-colour source art to a uniform muted
monochrome row (works whether the source logo is white or full-colour). */
.gps-trust-bar__logo {
height: 30px;
width: auto;
filter: brightness(0);
opacity: 0.5;
transition: opacity var(--sg-transition);
}
.gps-trust-bar__logo:hover { opacity: 0.8; }
/* ============================================================================
WHY PAGE - "In this guide" sticky section nav (scroll-spy)
========================================================================== */
.gps-why-subnav-band {
position: sticky;
top: 0;
z-index: 30;
}
.gps-why-subnav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 26px;
max-width: 1240px;
margin: 0 auto;
padding: 13px 40px;
}
.gps-why-subnav__label {
color: var(--wp--preset--color--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-right: 6px;
}
.gps-why-subnav a {
position: relative;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
padding: 8px 2px;
transition: color var(--sg-transition);
}
.gps-why-subnav a::after {
content: "";
position: absolute;
left: 2px;
right: 2px;
bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--wp--preset--color--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--sg-transition);
}
.gps-why-subnav a:hover { color: #fff; }
.gps-why-subnav a:hover::after,
.gps-why-subnav a.is-active::after { transform: scaleX(1); }
.gps-why-subnav a.is-active { color: #fff; }
/* Offset jump targets so section headings clear the sticky nav. */
.gps-anchor { scroll-margin-top: 80px; }
/* ============================================================================
COMPARISON TABLE (native core/table, editable)
========================================================================== */
.gps-compare-table { border-radius: 20px; overflow: hidden; border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow-elev); margin: 0; }
.gps-compare-table table { border-collapse: collapse; width: 100%; }
.gps-compare-table thead th {
background: var(--sg-primary-deep);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
padding: 18px 24px;
border: 0;
}
.gps-compare-table tbody td {
padding: 18px 24px;
border: 0;
border-top: 1px solid #EFEDF4;
font-size: 15px;
color: var(--sg-text-muted);
}
.gps-compare-table tbody tr:nth-child(even) { background: var(--sg-cream); }
.gps-compare-table tbody td:first-child { font-weight: 600; color: var(--sg-text); }
.gps-compare-table tbody td:nth-child(2) { color: var(--sg-primary); font-weight: 600; }
@media (max-width: 640px) {
.gps-compare-table thead th,
.gps-compare-table tbody td { padding: 12px 14px; font-size: 13px; }
}
@media (max-width: 640px) {
.gps-why-subnav {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0 18px;
padding: 11px 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gps-why-subnav::-webkit-scrollbar { display: none; }
.gps-why-subnav a { white-space: nowrap; font-size: 14px; }
.gps-why-subnav__label { display: none; }
}
/* ============================================================================
PROSE READING GUTTER (root side-padding is 0)
Root left/right padding is 0 so full-width bands are truly edge-to-edge.
The "minimal" templates (blog single, default/no-title/wide pages, resource)
render long-form prose in a constrained column with no self-padding, so they
need a side gutter once the viewport is narrower than the content width.
Excludes the homepage (shares .page-template-default) and the design
templates (canvas/country/service) which already pad themselves.
========================================================================== */
@media (max-width: 880px) {
/* Singular content prose (post-content column). */
.single-post .wp-block-post-content,
.single-resource .wp-block-post-content,
.page-template-default:not(.home) .wp-block-post-content,
.page-template-page-no-title .wp-block-post-content,
.page-template-page-wide .wp-block-post-content,
/* Taxonomy/date archives, search, 404, blog index - constrained .
(CPT archives country/service self-pad and aren't matched here.) */
.blog main.wp-block-group.is-layout-constrained,
.category main.wp-block-group.is-layout-constrained,
.tag main.wp-block-group.is-layout-constrained,
.author main.wp-block-group.is-layout-constrained,
.date main.wp-block-group.is-layout-constrained,
.search main.wp-block-group.is-layout-constrained,
.error404 main.wp-block-group.is-layout-constrained {
padding-left: 24px;
padding-right: 24px;
}
}
/* ============================================================================
SELECTION + PRINT + SR
========================================================================== */
::selection { background: var(--sg-accent); color: var(--sg-primary-deep); }
@media print {
.gps-site-header,
.gps-site-footer,
.wp-block-query-pagination,
.gps-newsletter,
.gps-form-embed { display: none !important; }
body { color: #000; background: #fff; }
a { color: #000; text-decoration: underline; }
}
.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px; width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
word-wrap: normal !important;
}
/* ============================================================================
PRIMARY NAV - classic wp_nav_menu (Appearance → Menus), editable by admins.
Replaces the Navigation block. Desktop: horizontal with hover dropdowns.
Mobile (<=980px): hamburger toggles a stacked menu with inline submenus.
========================================================================== */
.gps-nav { display: flex; align-items: center; }
.gps-menu {
display: flex;
align-items: center;
gap: 36px;
margin: 0;
padding: 0;
list-style: none;
}
.gps-menu li { position: relative; margin: 0; }
.gps-menu a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--sg-primary-deep);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: color var(--sg-transition);
}
.gps-menu > li > a:hover,
.gps-menu > li.current-menu-item > a,
.gps-menu > li.current-menu-ancestor > a { color: var(--sg-primary); }
/* Chevron on parent items (matches the design) */
.gps-menu .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 10px;
height: 6px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: 0.65;
}
/* Dropdown submenu */
.gps-menu .sub-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 232px;
margin: 0;
padding: 8px;
list-style: none;
background: #fff;
border: 1px solid var(--sg-line);
border-radius: 12px;
box-shadow: var(--sg-shadow-card);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
z-index: 60;
}
.gps-menu .menu-item-has-children:hover > .sub-menu,
.gps-menu .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.gps-menu .sub-menu li a {
display: block;
padding: 9px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
color: var(--sg-primary-deep);
}
.gps-menu .sub-menu li a:hover { background: #F0ECFA; color: var(--sg-primary); }
/* CTA pill (menu item with the `gps-cta` CSS class) */
.gps-menu li.gps-cta { margin-left: 4px; }
.gps-menu li.gps-cta > a {
background: var(--sg-accent);
color: var(--sg-primary-deep);
padding: 12px 24px;
border-radius: 999px;
transition: background-color 0.15s ease;
}
.gps-menu li.gps-cta > a:hover { background: var(--sg-accent-hover); color: var(--sg-primary-deep); }
.gps-menu li.gps-cta > a::after { display: none; }
/* Hamburger toggle (hidden on desktop) */
.gps-nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.gps-nav-toggle span {
display: block;
width: 24px;
height: 2px;
margin: 0 auto;
background: var(--sg-primary-deep);
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.gps-nav.is-open .gps-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gps-nav.is-open .gps-nav-toggle span:nth-child(2) { opacity: 0; }
.gps-nav.is-open .gps-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 980px) {
.gps-nav-toggle { display: flex; }
.gps-menu {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px 24px 22px;
background: #fff;
border-top: 1px solid var(--sg-line);
box-shadow: var(--sg-shadow-card);
z-index: 55;
}
.gps-nav.is-open .gps-menu { display: flex; }
.gps-menu > li { width: 100%; }
.gps-menu > li > a { padding: 13px 2px; }
.gps-menu .menu-item-has-children > a::after { margin-left: auto; }
/* Submenus render inline (expanded) on mobile - no JS needed */
.gps-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
padding: 0 0 6px 14px;
border: 0;
box-shadow: none;
}
.gps-menu .sub-menu li a { white-space: normal; padding: 8px 10px; }
.gps-menu li.gps-cta { margin: 10px 0 0; }
.gps-menu li.gps-cta > a { display: inline-block; }
}
/* ============================================================================
COUNTRY → HIRING GUIDE card (single-country sidebar)
========================================================================== */
.gps-guide-card {
margin-top: 20px;
padding: 28px;
border-radius: 20px;
background: var(--wp--preset--color--cream);
border: 1px solid var(--wp--preset--color--line);
}
.gps-guide-card__eyebrow {
display: block;
margin-bottom: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
}
.gps-guide-card__title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
line-height: 1.25;
color: var(--wp--preset--color--primary-deep);
}
.gps-guide-card__body {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.6;
color: var(--wp--preset--color--text-muted);
}
.gps-guide-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: var(--wp--preset--color--primary);
}
.gps-guide-link:hover { color: var(--wp--preset--color--primary-deep); }
/* Country sub-page navigation card (single-country sidebar) */
.gps-subnav-card {
margin-bottom: 20px;
padding: 22px 24px;
border-radius: 20px;
background: var(--wp--preset--color--primary);
color: #fff;
}
.gps-subnav-card__eyebrow {
display: block;
margin-bottom: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.gps-subnav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 0;
font-size: 15px;
font-weight: 600;
color: #fff;
text-decoration: none;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.gps-subnav-link:first-of-type { border-top: 0; }
.gps-subnav-link:hover { color: var(--wp--preset--color--accent); }
/* ============================================================================
KNOWLEDGE CENTER - publication index (featured + filters + grid)
========================================================================== */
.gps-kc { margin-top: 8px; }
/* Featured: a prominent horizontal lead story (left) + a compact 2-item list
(right). The lead is image-LEFT so it stays short, which keeps the side
cards short too - their thumbnails read as tidy landscape crops, never the
stretched-tall portraits the old 1-big + 2-stacked layout produced. */
.gps-kc-featured {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 28px;
align-items: stretch;
margin-bottom: 56px;
}
/* Lead story (image left, copy right) */
.gps-kc-featured .gps-kc-card--lead { flex-direction: row; }
.gps-kc-card--lead .gps-kc-card__img {
width: 46%;
flex-shrink: 0;
align-self: stretch;
min-height: 280px;
aspect-ratio: auto;
}
.gps-kc-card--lead .gps-kc-card__body { padding: 32px 34px; gap: 10px; justify-content: center; }
.gps-kc-card--lead .gps-kc-card__title { font-size: 23px; }
.gps-kc-card--lead .gps-kc-card__excerpt { margin-top: 2px; }
/* Side list: two equal cards that fill the lead's height (flex:1 gives them a
definite height, so the stretched thumbnail resolves instead of collapsing). */
.gps-kc-featured__side { display: flex; flex-direction: column; gap: 24px; }
.gps-kc-featured .gps-kc-card--mini { flex: 1; flex-direction: row; align-items: stretch; }
.gps-kc-card--mini .gps-kc-card__img {
width: 40%;
max-width: 160px;
flex-shrink: 0;
align-self: stretch;
min-height: 96px;
aspect-ratio: auto;
}
.gps-kc-card--mini .gps-kc-card__excerpt { display: none; }
.gps-kc-card--mini .gps-kc-card__body { padding: 16px 20px; gap: 6px; justify-content: center; }
.gps-kc-card--mini .gps-kc-card__title { font-size: 16px; }
.gps-kc-card--mini .gps-kc-card__date { margin-top: 0; }
/* Card (shared) */
.gps-kc-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--wp--preset--color--line);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gps-kc-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(50 36 60 / 0.05), 0 16px 36px -20px rgb(50 36 60 / 0.28); border-color: transparent; }
.gps-kc-card__img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
background-color: var(--wp--preset--color--cool);
}
.gps-kc-card__img--ph {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ECE6F8 0%, #D5C9F0 100%);
}
.gps-kc-card__img--ph span {
font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--primary);
background: rgba(255,255,255,0.85); padding: 6px 12px; border-radius: 999px;
}
.gps-kc-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; }
.gps-kc-card__type {
font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--wp--preset--color--primary);
}
.gps-kc-card__title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--wp--preset--color--primary-deep); }
.gps-kc-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--text-muted); }
.gps-kc-card__date { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--wp--preset--color--text-muted); }
/* Filter pills */
.gps-kc-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.gps-kc-pill {
border: 1px solid var(--wp--preset--color--line);
background: #fff;
color: var(--wp--preset--color--primary-deep);
font-size: 14px; font-weight: 600;
padding: 9px 18px; border-radius: 999px; cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gps-kc-pill:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.gps-kc-pill.is-active { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
/* Grid */
.gps-kc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 980px) {
.gps-kc-featured { grid-template-columns: 1fr; }
.gps-kc-featured .gps-kc-card--lead { flex-direction: column; }
.gps-kc-card--lead .gps-kc-card__img { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
.gps-kc-featured__side { flex-direction: row; }
.gps-kc-featured .gps-kc-card--mini { flex-direction: column; }
.gps-kc-card--mini .gps-kc-card__img { width: 100%; max-width: none; min-height: 0; aspect-ratio: 16 / 10; }
.gps-kc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.gps-kc-featured__side { flex-direction: column; }
.gps-kc-grid { grid-template-columns: 1fr; }
}
/* ============================================================================
SINGLE POST - hero image + sidebar (CTA card + related reading)
========================================================================== */
.gps-post-hero-img img { box-shadow: 0 24px 60px -30px rgba(50, 36, 60, 0.45); }
.gps-related__title { margin-bottom: 16px !important; }
.gps-related__list { list-style: none; margin: 0; padding: 0; }
.gps-related__item a {
display: block;
padding: 16px 0;
border-top: 1px solid var(--sg-line);
text-decoration: none;
color: inherit;
}
.gps-related__item:last-child a { border-bottom: 1px solid var(--sg-line); }
.gps-related__cat {
display: block;
font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--sg-primary); margin-bottom: 5px;
}
.gps-related__headline {
display: block;
font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
color: var(--sg-primary-deep);
transition: color var(--sg-transition);
}
.gps-related__item a:hover .gps-related__headline { color: var(--sg-primary); }
.gps-related__date { display: block; font-size: 13px; color: var(--sg-text-muted); margin-top: 5px; }
/* "Filed under" taxonomy chips (sidebar) — full category + tag list, moved out
of the blog hero. */
.gps-filed__label { margin-bottom: 12px !important; }
.gps-filed__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gps-filed__chip {
display: inline-block;
padding: 5px 12px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-pill);
background: var(--sg-cool);
color: var(--sg-text-muted);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: color var(--sg-transition), border-color var(--sg-transition), background-color var(--sg-transition);
}
.gps-filed__chip:hover {
color: var(--sg-primary);
border-color: var(--sg-primary);
background: #fff;
}
/* On mobile the sidebar drops below the article; give it breathing room. */
@media (max-width: 782px) {
.gps-post-cta { margin-top: var(--wp--preset--spacing--40); }
}
/* Why-GPS hero media: an editable Image block with the "21yrs" stat badge
overlaid (badge stays put; swap the image via the media library). */
.gps-whygps-media { position: relative; }
.gps-whygps-panel { margin: 0; }
.gps-whygps-panel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.gps-whygps-badge {
position: absolute; bottom: -24px; left: -24px;
background: var(--sg-accent); color: var(--sg-primary-deep);
padding: 20px 24px; border-radius: 14px; max-width: 240px;
box-shadow: 0 16px 36px -16px rgba(50, 36, 60, 0.4);
}
/* "Insights from the field" recent-posts teaser ([gps_recent_posts] shortcode -
stays dynamic even when the homepage is flattened to static blocks). */
.gps-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 32px; }
.gps-recent-card { display: flex; flex-direction: column; gap: 12px; }
.gps-recent-card__tile {
display: block; height: 200px; border-radius: 10px;
background-size: cover; background-position: center;
background-color: var(--sg-cool);
transition: transform var(--sg-transition), box-shadow var(--sg-transition);
}
.gps-recent-card__tile--ph { background-image: linear-gradient(135deg, #ECE6F8 0%, #D5C9F0 100%); }
.gps-recent-card:hover .gps-recent-card__tile { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(50, 36, 60, 0.28); }
.gps-recent-card__type { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-primary); margin: 8px 0 0; }
.gps-recent-card__title { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.gps-recent-card__title a { color: var(--sg-primary-deep); text-decoration: none; }
.gps-recent-card__title a:hover { color: var(--sg-primary); }
.gps-recent-card__date { font-size: 15px; color: var(--sg-text-muted); margin: 0; }
/* Full-bleed hero when used inside page content (post-content nests a
constrained layer that caps alignfull at content width). */
.gps-page-hero.alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ============================================================================
WHITEPAPER DOWNLOAD form (single-resource teaser)
========================================================================== */
.gps-download-form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.gps-download-form__input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 10px;
background: #fff;
font-size: 15px;
color: var(--wp--preset--color--primary-deep);
}
.gps-download-form__input:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--primary);
}
.gps-download-form__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px 18px;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--primary);
color: #fff;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.gps-download-form__btn:hover { background: var(--wp--preset--color--primary-deep); }
/* ============================================================================
CONTACT MODAL — /contact-us/ links open the CF7 form in a dialog
========================================================================== */
.gps-modal[hidden] { display: none; }
body.gps-modal-open { overflow: hidden; }
.gps-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(16px, 6vh, 64px) 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.gps-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(43, 10, 89, 0.55);
opacity: 0;
transition: opacity var(--sg-transition);
}
.gps-modal.is-open .gps-modal__backdrop { opacity: 1; }
.gps-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 600px;
margin: auto;
background: #fff;
border-radius: var(--sg-radius-lg);
box-shadow: var(--sg-shadow-elev);
padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 44px) clamp(28px, 4vw, 40px);
opacity: 0;
transform: translateY(12px) scale(0.985);
transition: opacity var(--sg-transition), transform var(--sg-transition);
}
.gps-modal.is-open .gps-modal__dialog { opacity: 1; transform: none; }
.gps-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--sg-radius-pill);
background: var(--sg-cool);
color: var(--sg-primary-deep);
cursor: pointer;
transition: background-color var(--sg-transition), color var(--sg-transition);
}
.gps-modal__close:hover { background: var(--sg-line); color: var(--sg-primary); }
.gps-modal__close:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
.gps-modal__eyebrow { margin-bottom: 8px !important; }
.gps-modal__title {
margin: 0 0 8px;
color: var(--sg-primary);
font-size: clamp(1.5rem, 3vw, 1.875rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.018em;
max-width: 30ch;
}
.gps-modal__intro {
margin: 0 0 22px;
color: var(--sg-text-muted);
font-size: 1rem;
line-height: 1.55;
max-width: 46ch;
}
/* CF7 fields, themed to match the brand controls */
.gps-modal__form p { margin: 0 0 14px; }
.gps-modal__form label { display: block; font-size: 14px; font-weight: 600; color: var(--sg-primary-deep); }
.gps-modal__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gps-modal__form textarea,
.gps-modal__form select {
width: 100%;
margin-top: 6px;
padding: 12px 14px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius);
background: #fff;
font-family: inherit;
font-size: 15px;
color: var(--sg-primary-deep);
transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}
.gps-modal__form textarea { min-height: 120px; resize: vertical; }
.gps-modal__form input:focus,
.gps-modal__form textarea:focus,
.gps-modal__form select:focus {
outline: none;
border-color: var(--sg-primary);
box-shadow: 0 0 0 3px rgba(86, 63, 142, 0.15);
}
.gps-modal__form input[type="submit"],
.gps-modal__form .wpcf7-submit {
width: auto;
margin-top: 4px;
padding: 13px 26px;
border: 0;
border-radius: var(--sg-radius-pill);
background: var(--sg-accent);
color: var(--sg-primary-deep);
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color var(--sg-transition);
}
.gps-modal__form input[type="submit"]:hover,
.gps-modal__form .wpcf7-submit:hover { background: var(--sg-accent-hover); }
.gps-modal__form .wpcf7-spinner { margin: 0 0 0 10px; }
.gps-modal__form .wpcf7-response-output {
margin: 14px 0 0;
padding: 12px 14px;
border-radius: var(--sg-radius);
font-size: 14px;
line-height: 1.45;
}
.gps-modal__form .wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; font-weight: 500; }
.gps-modal__form .wpcf7-form-control.wpcf7-not-valid { border-color: #c0392b; }
/* The legacy CF7 form ships Bootstrap-grid markup, a grey inner wrapper, and a
redundant dark heading band — all previously tamed by the now-stripped global
Bootstrap + inline