/* ==========================================================================
GOOD SHEPHERD GROUP — Premium monochrome design system
--------------------------------------------------------------------------
Built on the Crafto framework, this file is loaded LAST and re-skins the
theme into a clean, editorial black & white system inspired by the
CARBO / GOLDBACH reference (see /ui): big tight neo-grotesque type,
generous full-width layout, full-bleed imagery, accent via weight & scale
rather than colour.
Type: Geist (display / headings) + Plus Jakarta Sans (body).
========================================================================== */
:root {
/* monochrome system — the single "accent" is near-black */
--base-color: #161617; /* fills, buttons, gradients, marquee */
--base-color-dark: #000000; /* hover / pressed */
--base-color-rgb: 22, 22, 23;
--gs-ink: #111113; /* darkest text / emphasis */
--gs-charcoal: #131316; /* dark sections */
--gs-charcoal-2: #1b1b1f; /* slightly raised dark surface */
--gs-muted: #6c6c70; /* eyebrow / secondary on light */
--gs-muted-dark: #9a9aa0; /* eyebrow / secondary on dark */
--gs-line: #e7e7e4; /* hairlines on light */
--gs-paper: #f4f4f1; /* off-white alt sections */
/* premium type (loaded via in each page ) */
--primary-font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
--alt-font: "Geist", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}
/* ---------- global type polish ---------- */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: var(--primary-font);
color: #4a4a4e;
letter-spacing: -0.011em;
}
h1, h2, h3, h4, h5, h6, .alt-font { font-family: var(--alt-font); }
h1, h2, h3 { letter-spacing: -0.03em; }
h1 { letter-spacing: -0.04em; }
::selection { background: var(--gs-ink); color: #fff; }
/* refined surface tones */
.bg-very-light-gray { background-color: var(--gs-paper) !important; }
.bg-dark-gray, .section-dark.bg-dark-gray { background-color: var(--gs-charcoal) !important; }
.text-dark-gray { color: var(--gs-ink) !important; }
/* accent helpers follow the single var */
.bg-gradient-base-color-transparent {
background-image: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 100%) !important;
}
.btn-base-color, .bg-base-color { background-color: var(--base-color); }
.btn-base-color:not(:hover) { border-color: var(--base-color); }
/* `.text-base-color` is used as the eyebrow/label accent in many places.
In monochrome it reads ink on light surfaces and white on dark ones. */
.text-base-color { color: var(--gs-ink) !important; }
.bg-dark-gray .text-base-color,
.section-dark .text-base-color,
.gs-statband .text-base-color,
.gs-hero .text-base-color,
.cover-background .text-base-color,
.bg-base-color .text-base-color,
footer .text-base-color { color: #ffffff !important; }
/* ===========================================================
Layout — wider, more confident container ("full width" feel)
=========================================================== */
@media (min-width: 1200px) { .container { max-width: 1480px; } }
@media (min-width: 1600px) { .container { max-width: 1580px; } }
/* taller, more immersive default sections (utility padding still wins) */
section { padding-top: 8.5rem; padding-bottom: 8.5rem; }
@media (max-width: 991px) { section { padding-top: 5.5rem; padding-bottom: 5.5rem; } }
/* ===========================================================
Buttons — solid ink primary, crisp outline secondary
=========================================================== */
.btn-base-color,
.btn-base-color:active { background-color: var(--gs-ink); border-color: var(--gs-ink); color: #fff; }
.btn-base-color:hover { background-color: #000; border-color: #000; color: #fff; }
.btn.btn-rounded { border-radius: 100px; }
.btn-link { letter-spacing: -0.01em; }
.btn-transparent-dark-gray.border-1 { border-color: var(--gs-line); }
.btn-transparent-dark-gray.border-1:hover { background: var(--gs-ink); border-color: var(--gs-ink); color: #fff; }
/* ===========================================================
Header / brand wordmark
=========================================================== */
.navbar-brand { display: inline-flex; align-items: center; }
.brand-wordmark {
font-family: var(--alt-font);
font-weight: 800;
font-size: 23px;
line-height: 1;
letter-spacing: -0.03em;
color: #fff;
white-space: nowrap;
transition: color .3s ease;
}
.brand-wordmark .brand-sub {
display: block;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 3.4px;
margin-top: 5px;
opacity: .6;
}
.brand-wordmark .mark { color: inherit; opacity: 1; background: transparent !important; padding: 0 !important; }
/* kill the leftover ThemeForest demo/"purchase" floating panel injected by main.js */
.theme-demos, .theme-demos-main { display: none !important; }
header.sticky.sticky-active .brand-wordmark,
.header-light .brand-wordmark { color: var(--gs-ink); }
.header-dark .brand-wordmark,
.header-dark.sticky.sticky-active .brand-wordmark { color: #fff; }
.navbar-nav .nav-link { font-weight: 500; letter-spacing: -0.01em; }
/* header CTA — clean solid pill (replaces the glitchy switch-text button) */
.gs-header-cta {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 24px; border-radius: 100px;
background: var(--gs-ink); color: #fff !important;
font-family: var(--alt-font); font-weight: 600; font-size: 14px;
letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
transition: background .35s ease, transform .35s ease;
}
.gs-header-cta i { font-size: 13px; transition: transform .35s ease; }
.gs-header-cta:hover { background: #000; color: #fff !important; transform: translateY(-2px); }
.gs-header-cta:hover i { transform: translateX(3px); }
/* ===========================================================
Hero
=========================================================== */
.gs-hero .swiper-slide .hero-eyebrow { letter-spacing: 4px; text-transform: uppercase; font-size: 12px; }
.gs-hero-overlay { background: linear-gradient(90deg, rgba(8,8,9,.88) 0%, rgba(8,8,9,.58) 48%, rgba(8,8,9,.22) 100%); }
.gs-hero .swiper-pagination-bullet { background: #fff; opacity: .4; }
.gs-hero .swiper-pagination-bullet-active { background: #fff; opacity: 1; }
.gs-hero h1 { font-weight: 500; line-height: 1.0; letter-spacing: -0.045em; }
.gs-hero h1 .fw-700 { font-weight: 700; }
.gs-hero-content, .gs-hero-content > * { opacity: 1 !important; }
.gs-hero .swiper-slide-active .gs-hero-content > * { animation: gsHeroUp .9s cubic-bezier(.25,.6,.3,1) both; }
.gs-hero .swiper-slide-active .gs-hero-content > *:nth-child(2) { animation-delay: .10s; }
.gs-hero .swiper-slide-active .gs-hero-content > *:nth-child(3) { animation-delay: .20s; }
.gs-hero .swiper-slide-active .gs-hero-content > *:nth-child(4) { animation-delay: .30s; }
@keyframes gsHeroUp { from { opacity: .35; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.gs-hero .gs-watermark {
font-family: var(--alt-font);
font-weight: 700;
letter-spacing: -8px;
line-height: .8;
color: rgba(255,255,255,.10);
}
/* ===========================================================
Oversized "statement" type (CARBO-style big intro line)
Emphasis in monochrome: muted body + ink accent words.
=========================================================== */
.gs-statement {
font-family: var(--alt-font);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.07;
color: #5b5b5f;
font-size: clamp(1.9rem, 3vw, 3.1rem);
}
h2.gs-statement, .gs-statement { color: #5b5b5f; }
.gs-statement .accent { color: var(--gs-ink); font-weight: 600; }
/* on dark backgrounds (footer CTA) flip the tones */
footer .gs-statement, .bg-dark-gray .gs-statement { color: rgba(255,255,255,.42); }
footer .gs-statement .accent, .bg-dark-gray .gs-statement .accent { color: #fff; }
/* eyebrow / kicker */
.gs-eyebrow {
display: inline-block;
font-family: var(--alt-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gs-muted);
}
.gs-eyebrow.with-line::before {
content: "";
display: inline-block;
width: 30px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin-right: 14px;
margin-bottom: 4px;
}
.bg-dark-gray .gs-eyebrow, .section-dark .gs-eyebrow, .cover-background .gs-eyebrow, footer .gs-eyebrow { color: var(--gs-muted-dark); }
/* giant faint section watermark word */
.gs-bgword {
font-family: var(--alt-font);
font-weight: 700;
letter-spacing: -6px;
line-height: 1;
color: rgba(255,255,255,.05);
pointer-events: none;
user-select: none;
}
.gs-bgword.dark { color: rgba(17,17,19,.045); }
/* huge full-bleed display word (CARBO "SOLUTIONS" reference) */
.gs-display-word {
font-family: var(--alt-font); font-weight: 700;
font-size: clamp(3.5rem, 13vw, 15rem);
line-height: .9; letter-spacing: -0.06em; margin: 0;
}
/* section headings tightened to match reference */
h2.alt-font { letter-spacing: -0.035em; }
/* ===========================================================
Sector cards (home grid)
=========================================================== */
.gs-sector-tile { transition: transform .55s cubic-bezier(.25,.6,.3,1), box-shadow .55s ease; height: 500px; border-radius: 6px; }
.gs-sector-tile:hover { transform: translateY(-10px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.gs-sector-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.25,.6,.3,1); }
.gs-sector-tile:hover > img { transform: scale(1.07); }
.gs-sector-tile .image-content { position: absolute; inset: 0; }
.gs-sector-tile .label { background: rgba(255,255,255,.16); backdrop-filter: blur(4px); }
@media (max-width: 575px) { .gs-sector-tile { height: 440px; } }
.gs-sector-index { font-family: var(--alt-font); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--gs-ink); }
/* company badge (sectors page) */
.gs-company-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 18px;
border: 1px solid var(--gs-line);
border-radius: 100px;
font-size: 13px; font-weight: 600; letter-spacing: .2px;
color: var(--gs-ink); background: #fff;
}
.gs-company-badge i { color: var(--gs-ink); }
/* numbered "what we do" list rows */
.gs-deliver-row { border-top: 1px solid rgba(255,255,255,.12); transition: background .4s ease; }
.gs-deliver-row:hover { background: rgba(255,255,255,.05); }
.gs-deliver-row .gs-deliver-num { color: rgba(255,255,255,.55); }
/* ===========================================================
Stat band
=========================================================== */
.gs-statband { background: var(--gs-charcoal); }
.gs-statband .gs-stat-num { color: #fff; }
.gs-statband .gs-stat-label { color: rgba(255,255,255,.55); }
.gs-statband .vertical-counter { letter-spacing: -0.05em; }
/* dark numbered feature separators */
.icon-with-text-style-01 .separator-line-1px { background: rgba(255,255,255,.14) !important; opacity: 1 !important; }
/* ===========================================================
Inner page title (hero band)
=========================================================== */
.gs-page-title { position: relative; background-size: cover; background-position: center; }
.gs-page-title::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,9,.5) 0%, rgba(8,8,9,.85) 100%); }
.gs-page-title .container { position: relative; z-index: 2; }
.gs-page-title h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; line-height: 1; }
.gs-breadcrumb a, .gs-breadcrumb span { color: rgba(255,255,255,.7); font-size: 14px; letter-spacing: .3px; }
.gs-breadcrumb a { transition: color .3s ease; }
.gs-breadcrumb a:hover { color: #fff; }
.gs-breadcrumb .active { color: #fff; }
/* ===========================================================
Footer
=========================================================== */
.gs-footer-companies a {
display: block; color: rgba(255,255,255,.55);
padding: 5px 0; font-size: 15px;
transition: color .3s ease, padding-left .3s ease;
}
.gs-footer-companies a:hover { color: #fff; padding-left: 8px; }
footer .elements-social .medium-icon.light a { color: rgba(255,255,255,.6); }
footer .elements-social .medium-icon.light a:hover { color: #fff; }
.gs-label { font-family: var(--alt-font); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; }
/* ===========================================================
Sector detail rows (Sectors page)
=========================================================== */
.gs-sector-detail { scroll-margin-top: 90px; }
.gs-sector-detail .gs-sector-figure { position: relative; border-radius: 6px; overflow: hidden; }
.gs-sector-detail .gs-sector-figure img { transition: transform 1.4s cubic-bezier(.25,.6,.3,1); width: 100%; }
.gs-sector-detail .gs-sector-figure:hover img { transform: scale(1.05); }
.gs-sector-detail .gs-watermark-num {
font-family: var(--alt-font); font-weight: 700;
font-size: 150px; line-height: 1; letter-spacing: -8px;
color: rgba(17,17,19,.06);
}
/* offer checklist */
.gs-offer-list { list-style: none; padding: 0; margin: 0; }
.gs-offer-list li {
position: relative; padding: 11px 0 11px 34px;
border-bottom: 1px solid var(--gs-line);
font-weight: 500; color: #2a2b2d;
transition: padding-left .35s ease, color .35s ease;
}
.gs-offer-list li::before {
content: "\F26A"; font-family: "bootstrap-icons";
position: absolute; left: 0; top: 11px;
color: var(--gs-ink); font-size: 18px;
transition: transform .35s ease;
}
.gs-offer-list li:hover { padding-left: 42px; color: var(--gs-ink); }
.gs-offer-list li:hover::before { transform: translateX(4px); }
/* ===========================================================
NEW — Full-bleed editorial sector rows (Sectors page redesign)
=========================================================== */
.gs-fullsector { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.gs-fullsector .gs-fs-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
transition: transform 1.6s cubic-bezier(.22,.6,.3,1);
}
.gs-fullsector.appear .gs-fs-bg { transform: scale(1.06); }
.gs-fullsector::after { content: ""; position: absolute; inset: 0; }
.gs-fullsector.tone-dark::after { background: linear-gradient(105deg, rgba(8,8,9,.92) 0%, rgba(8,8,9,.66) 46%, rgba(8,8,9,.30) 100%); }
.gs-fullsector.tone-dark.flip::after { background: linear-gradient(255deg, rgba(8,8,9,.92) 0%, rgba(8,8,9,.66) 46%, rgba(8,8,9,.30) 100%); }
.gs-fullsector .container { position: relative; z-index: 2; }
.gs-fs-index {
font-family: var(--alt-font); font-weight: 700;
font-size: clamp(4rem, 9vw, 9.5rem); line-height: .85;
letter-spacing: -0.06em; color: rgba(255,255,255,.12);
display: block; margin-bottom: 10px;
}
.gs-fullsector h2 { color: #fff; font-weight: 600; letter-spacing: -0.04em; font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1.0; }
.gs-fullsector p { color: rgba(255,255,255,.78); }
.gs-fs-company {
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 20px; border-radius: 100px;
border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
backdrop-filter: blur(6px);
color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .2px;
}
.gs-fs-list { list-style: none; padding: 0; margin: 0; }
.gs-fs-list li {
position: relative; padding: 13px 0 13px 30px;
border-top: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.82); font-weight: 500;
transition: padding-left .35s ease, color .35s ease;
}
.gs-fs-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.gs-fs-list li::before {
content: ""; position: absolute; left: 0; top: 21px;
width: 12px; height: 1px; background: rgba(255,255,255,.6);
transition: width .35s ease;
}
.gs-fs-list li:hover { padding-left: 38px; color: #fff; }
.gs-fs-list li:hover::before { width: 22px; background: #fff; }
/* sticky sector progress index (left rail) */
.gs-sector-rail { position: sticky; top: 120px; }
.gs-sector-rail a {
display: flex; align-items: center; gap: 14px;
padding: 10px 0; color: var(--gs-muted); font-family: var(--alt-font);
font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
border-top: 1px solid var(--gs-line); transition: color .3s ease, padding-left .3s ease;
}
.gs-sector-rail a .num { font-size: 12px; color: #b6b6b3; min-width: 22px; }
.gs-sector-rail a:hover, .gs-sector-rail a.active { color: var(--gs-ink); padding-left: 6px; }
/* ===========================================================
NEW — Capability / approach cards
=========================================================== */
.gs-cap-card {
position: relative; padding: 46px 38px; border-radius: 8px; height: 100%;
background: #fff; border: 1px solid var(--gs-line);
overflow: hidden; transition: transform .5s cubic-bezier(.25,.6,.3,1), box-shadow .5s ease, border-color .5s ease;
}
.gs-cap-card:hover { transform: translateY(-8px); box-shadow: 0 38px 70px -34px rgba(0,0,0,.28); border-color: transparent; }
.gs-cap-card .gs-cap-num {
font-family: var(--alt-font); font-weight: 700; font-size: 15px;
letter-spacing: 1px; color: #c2c2bf; display: block; margin-bottom: 30px;
}
.gs-cap-card .gs-cap-icon { font-size: 30px; color: var(--gs-ink); margin-bottom: 22px; display: block; }
.gs-cap-card h4 { font-weight: 600; letter-spacing: -0.025em; color: var(--gs-ink); }
.gs-cap-card .gs-cap-line { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gs-ink); transition: width .5s ease; }
.gs-cap-card:hover .gs-cap-line { width: 100%; }
/* dark variant */
.gs-cap-card.dark { background: var(--gs-charcoal-2); border-color: rgba(255,255,255,.08); }
.gs-cap-card.dark h4 { color: #fff; }
.gs-cap-card.dark p { color: rgba(255,255,255,.62); }
.gs-cap-card.dark .gs-cap-icon { color: #fff; }
.gs-cap-card.dark .gs-cap-num { color: rgba(255,255,255,.4); }
.gs-cap-card.dark .gs-cap-line { background: #fff; }
/* ===========================================================
NEW — Marquee band
=========================================================== */
.marquee-slide .fs-50 { font-family: var(--alt-font); letter-spacing: -0.03em; font-weight: 400; }
/* ===========================================================
Testimonials
=========================================================== */
.testimonials-style-10 .swiper-slide h5 { font-family: var(--alt-font); letter-spacing: -0.02em; }
.gs-quote-mark { font-family: var(--alt-font); font-weight: 700; font-size: 90px; line-height: .6; color: var(--gs-ink); opacity: .12; }
/* team photos: editorial grayscale by default, colour on hover (reference feel) */
.team-style-10 figure img, .gs-team img { filter: grayscale(100%) contrast(1.02); transition: filter .6s ease, transform 1.2s ease; }
.team-style-10 figure:hover img, .gs-team li:hover img { filter: grayscale(0%); }
/* isotope filter buttons */
.gs-filter .nav a { cursor: pointer; }
/* ===========================================================
NEW — Scroll-reveal helpers (custom, IntersectionObserver-driven)
For premium elements that aren't using the theme's data-anime.
=========================================================== */
[data-gs-reveal] { opacity: 0; transform: translateY(46px); transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
[data-gs-reveal="fade"] { transform: none; }
[data-gs-reveal="left"] { transform: translateX(-46px); }
[data-gs-reveal="right"] { transform: translateX(46px); }
[data-gs-reveal="scale"] { transform: scale(.94); }
[data-gs-reveal].gs-in { opacity: 1; transform: none; }
[data-gs-reveal-delay="1"] { transition-delay: .12s; }
[data-gs-reveal-delay="2"] { transition-delay: .24s; }
[data-gs-reveal-delay="3"] { transition-delay: .36s; }
[data-gs-reveal-delay="4"] { transition-delay: .48s; }
[data-gs-reveal-delay="5"] { transition-delay: .60s; }
@media (prefers-reduced-motion: reduce) {
[data-gs-reveal] { opacity: 1 !important; transform: none !important; }
}
/* generic image zoom-on-hover utility */
.gs-zoom { overflow: hidden; }
.gs-zoom img { transition: transform 1.4s cubic-bezier(.25,.6,.3,1); }
.gs-zoom:hover img { transform: scale(1.06); }
/* hairline divider */
.gs-rule { height: 1px; background: var(--gs-line); border: 0; }
.bg-dark-gray .gs-rule { background: rgba(255,255,255,.12); }
/* numbered sector index row (sectors intro) */
.gs-index-item { display: block; padding: 22px 0; border-top: 2px solid var(--gs-ink); transition: padding-left .35s ease; }
.gs-index-item .n { font-family: var(--alt-font); font-weight: 700; font-size: 13px; color: #b6b6b3; display: block; margin-bottom: 10px; transition: color .35s ease; }
.gs-index-item .t { font-family: var(--alt-font); font-weight: 600; font-size: 16px; color: var(--gs-ink); letter-spacing: -0.02em; line-height: 1.2; display: block; }
.gs-index-item:hover { padding-left: 8px; }
.gs-index-item:hover .n { color: var(--gs-ink); }
@media (max-width: 991px) { .gs-index-row .col { margin-bottom: 4px; } }
/* full-bleed sector CTA — white pill on dark imagery */
.gs-fs-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 100px; background: #fff; color: var(--gs-ink) !important; font-family: var(--alt-font); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: transform .35s ease, box-shadow .35s ease; }
.gs-fs-cta i { transition: transform .35s ease; font-size: 13px; }
.gs-fs-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); color: #000 !important; }
.gs-fs-cta:hover i { transform: translateX(4px); }
.gs-hero-btn { padding: 16px 36px; font-size: 16px; }
/* value-chain flow band */
.gs-chain-step { position: relative; padding: 38px 30px; border-radius: 8px; background: var(--gs-charcoal-2); border: 1px solid rgba(255,255,255,.08); height: 100%; transition: transform .5s ease, background .5s ease; }
.gs-chain-step:hover { transform: translateY(-8px); background: #232328; }
.gs-chain-step .gs-chain-num { font-family: var(--alt-font); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,.4); display: block; margin-bottom: 18px; }
.gs-chain-step .gs-chain-ico { font-size: 26px; color: #fff; margin-bottom: 16px; display: block; }
.gs-chain-step h5 { color: #fff; font-weight: 600; letter-spacing: -0.02em; }
.gs-chain-arrow { color: rgba(255,255,255,.25); font-size: 20px; }
@media (max-width: 991px) { .gs-chain-arrow { display: none; } }
/* newsroom cards */
.gs-news-card { display: block; }
.gs-news-media { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.gs-news-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(28%); transition: transform 1.4s cubic-bezier(.25,.6,.3,1), filter .6s ease; }
.gs-news-card:hover .gs-news-media img { transform: scale(1.07); filter: grayscale(0%); }
.gs-news-arrow {
position: absolute; top: 16px; right: 16px; width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--gs-ink); border-radius: 10px; font-size: 14px;
transform: translateY(-6px); opacity: 0; transition: opacity .4s ease, transform .4s ease;
}
.gs-news-card:hover .gs-news-arrow { opacity: 1; transform: translateY(0); }
.gs-news-body { padding: 24px 4px 0; }
.gs-news-meta { display: flex; gap: 18px; font-family: var(--alt-font); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gs-muted); margin-bottom: 12px; }
.gs-news-title { font-family: var(--alt-font); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; color: var(--gs-ink); margin: 0; transition: color .3s ease; }
.gs-news-card:hover .gs-news-title { color: #000; }
/* scroll cue */
.gs-scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.6); font-family: var(--alt-font); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; }
.gs-scroll-cue .line { width: 1px; height: 46px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.gs-scroll-cue .line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: #fff; animation: gsScroll 1.8s cubic-bezier(.6,.1,.3,1) infinite; }
@keyframes gsScroll { 0% { top: -50%; } 100% { top: 100%; } }
/* ---------- responsive type tuning ---------- */
@media (max-width: 991px) {
.gs-statement { letter-spacing: -0.025em; }
.gs-fullsector { min-height: auto; padding-top: 6rem; padding-bottom: 6rem; }
.gs-fullsector.tone-dark::after,
.gs-fullsector.tone-dark.flip::after { background: linear-gradient(180deg, rgba(8,8,9,.78) 0%, rgba(8,8,9,.92) 100%); }
}
@media (max-width: 575px) { .gs-statement { letter-spacing: -0.02em; } .brand-wordmark { font-size: 20px; } }
/* ===========================================================
NEW — FULL-VIEWPORT SECTIONS (every major section = one screen)
-----------------------------------------------------------
Every top-level fills at least the full viewport and
centres its content vertically. min-height (not height) means
tall content grows instead of clipping. Opt out with .gs-no-vh;
the hero (.gs-hero) and self-sizing .gs-fullsector are excluded.
=========================================================== */
.box-layout > section:not(.gs-hero):not(.gs-no-vh):not(.gs-fullsector) {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-layout > section:not(.gs-hero):not(.gs-no-vh):not(.gs-fullsector) > .container,
.box-layout > section:not(.gs-hero):not(.gs-no-vh):not(.gs-fullsector) > .container-fluid {
width: 100%;
}
/* on phones/tablets let content set the height (avoids huge empty screens) */
@media (max-width: 991px) {
.box-layout > section:not(.gs-hero):not(.gs-no-vh):not(.gs-fullsector) {
min-height: auto;
}
}
/* wider, more full-bleed container at large sizes */
@media (min-width: 1800px) { .container { max-width: 1680px; } }
/* ===========================================================
NEW — WHOLE-SECTION SCROLL REVEAL (added by good-shepherd.js)
Each section gently rises + fades as it enters the viewport,
layered on top of the theme's per-element data-anime stagger.
=========================================================== */
.gs-sec-reveal {
opacity: 0;
transform: translateY(54px);
transition: opacity 1.05s cubic-bezier(.2,.6,.2,1), transform 1.05s cubic-bezier(.2,.6,.2,1);
will-change: opacity, transform;
}
.gs-sec-reveal.gs-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.gs-sec-reveal { opacity: 1 !important; transform: none !important; }
}
/* quote mark reads white on dark/immersive sections */
.bg-dark-gray .gs-quote-mark,
.cover-background .gs-quote-mark { color: #fff; opacity: .18; }
/* large pull-quote line (founder's note) */
.gs-pullquote { font-weight: 400; letter-spacing: -0.02em; line-height: 1.32; font-size: clamp(1.5rem, 2.6vw, 2.35rem); }