/* ==========================================================================
Msindaha — Modern theme layer
Loads AFTER css/style.css. Additive only: re-establishes the brand palette,
adds a design-token layer, and skins existing components. No selector here
is ever a bare element (h1, a, .btn, .card, ...) so it cannot leak into the
#chatbot widget, which uses its own Tailwind-utility markup.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens — executive/corporate palette
-------------------------------------------------------------------------- */
:root {
/* Re-assert brand identity: index.html, countries.html and blog.html each
carry a body-level :root override (old --primary/--secondary values)
that loads after — !important is the only reliable way to win
regardless of DOM position. Same treatment extended to --text/--muted/
--border below, which index.html also re-declares locally (unused on
that page, but harmless to guard against). */
--primary: #0f3b68 !important;
--secondary: #184e8a !important;
--accent: #d4af37 !important;
/* style.css itself references var(--bg-light)/var(--card) (site-wide
scrollbar rules) but never defines them in its own :root — only 3 pages
happened to define them locally. Defining them here fixes all 16. */
--bg-light: #f8fafc;
--surface: #ffffff;
--card: #ffffff;
--text: #0f172a !important;
--muted: #64748b !important;
--border: #e2e8f0 !important;
/* Derived tints/shades — every one built only from the confirmed brand
hexes above, kept as a small ramp so components can reach for a lighter
or darker step without inventing one-off colors. */
--tm-primary-50: #e9eff4;
--tm-primary-100: #d6e1eb;
--tm-primary-700: #0b2c4e;
--tm-primary-800: #0a2440;
--tm-primary-900: #071a2c;
--tm-primary-950: #040d17;
--tm-secondary-light: #5d8fc7;
--tm-accent-light: #e4c878;
--tm-accent-dark: #b8952e;
--tm-gradient-primary: linear-gradient(
135deg,
var(--primary) 0%,
var(--secondary) 100%
);
--tm-gradient-hero: linear-gradient(
160deg,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.6) 55%,
rgba(0, 0, 0, 0.72) 100%
);
--tm-gradient-accent: linear-gradient(
135deg,
var(--accent) 0%,
var(--tm-accent-light) 100%
);
--tm-gradient-section: linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%);
--tm-shadow-sm: 0 2px 8px rgba(15, 59, 104, 0.08);
--tm-shadow-md: 0 10px 30px -8px rgba(15, 59, 104, 0.18);
--tm-shadow-lg: 0 20px 45px -12px rgba(15, 59, 104, 0.28);
--tm-shadow-gold: 0 10px 24px -6px rgba(212, 175, 55, 0.35);
--tm-radius-sm: 8px;
--tm-radius-md: 14px;
--tm-radius-lg: 22px;
--tm-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* --------------------------------------------------------------------------
1.5. Typography hierarchy
--------------------------------------------------------------------------
style.css sets `body { font-family:"Montserrat"; font-size:15px;
line-height:1.8; color:gray }` (style.css:10561-10568) — Montserrat is
already a solid, premium-appropriate typeface across 200-800 weights (see
the Google Fonts import in every page's ), so no new font is loaded
here. Two real problems instead: `color:gray` (#808080) under-contrasts
against the new #F8FAFC/#FFFFFF surfaces, and heading weight/spacing is
inconsistent page-to-page. Fixed here without touching font-family.
These selectors necessarily touch bare elements (h1-h6, p) that the file's
own convention normally avoids — #chatbot renders a real and injects
-like message content via chatbot.js with only partial Tailwind color
coverage (confirmed: its header
has no margin utility of its own, so
an unguarded `h2{margin-bottom}` here would visibly shift its flex row).
Every rule is therefore scoped with `:not(:where(#chatbot) *)` to exclude
the whole widget subtree; `body` itself is left unscoped since #chatbot
can never match `body`.
IMPORTANT: the `:where()` wrapper is load-bearing, not decorative.
`:not()`'s own specificity is normally the specificity of its argument —
a plain `:not(#chatbot *)` would inject an ID's worth of specificity into
*every* heading selector below, so e.g. `h1:not(#chatbot *)` would then
outrank `.hero-wrap .slider-text h1{color:#fff}` and
`.footer .footer-heading{color:#fff}` (both plain classes, no
!important), silently repainting those white headings back to
var(--text) — near-invisible dark text on a dark background. This
actually happened and was reported as headings/footer text "not
showing." `:where()` always contributes zero specificity regardless of
what's inside it, so wrapping the ID there keeps every rule below at
ordinary element-level specificity while still excluding #chatbot's
subtree from matching. */
body {
color: var(--text);
}
p:not(:where(#chatbot) *) {
color: var(--text);
line-height: 1.75;
}
.text-muted,
.subheading {
color: var(--muted) !important;
}
small:not(:where(#chatbot) *) {
color: var(--muted);
}
h1:not(:where(#chatbot) *),
h2:not(:where(#chatbot) *),
h3:not(:where(#chatbot) *),
h4:not(:where(#chatbot) *),
h5:not(:where(#chatbot) *),
h6:not(:where(#chatbot) *) {
color: var(--text);
letter-spacing: -0.01em;
}
h1:not(:where(#chatbot) *) {
font-weight: 800;
line-height: 1.15;
}
h2:not(:where(#chatbot) *) {
font-weight: 800;
line-height: 1.25;
margin-bottom: 0.65em;
}
h3:not(:where(#chatbot) *) {
font-weight: 700;
line-height: 1.3;
}
h4:not(:where(#chatbot) *) {
font-weight: 700;
line-height: 1.35;
}
.heading-section .subheading {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent) !important;
}
/* --------------------------------------------------------------------------
2. Navbar — hover + active-state redesign
--------------------------------------------------------------------------
HOVER (applies to every nav link):
- Text color changes to brand blue (var(--primary)) — no underline, no
bar, no background fill. Clean and modern.
- 250ms ease-out transition keeps it smooth.
- style.css's own `:before` underline hover effect is explicitly disabled
so the underline never appears on hover.
ACTIVE (current page indicator):
- Active link text: brand blue + font-weight 800 for emphasis.
- Desktop: a 3px rounded underline (var(--primary)) sits just below the
text.
- Mobile: 3px left-side bar that works with the stacked layout.
-------------------------------------------------------------------------- */
/* --- Hover: text-color only, no underline --- */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
color: var(--primary);
}
/* Disable style.css's hover underline — we only want text-color change */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover:before {
visibility: hidden;
transform: scaleX(0);
}
/* --- Active state: blue text + subtle underline --- */
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
background: transparent;
color: var(--primary);
font-weight: 800;
position: relative;
}
.ftco-navbar-light .navbar-nav > .nav-item.active > a:before {
content: "";
position: absolute;
visibility: visible;
left: 14px;
right: 14px;
width: auto;
top: auto;
bottom: 4px;
height: 3px;
transform: scaleX(1);
background-color: var(--accent);
border-radius: 3px;
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* On mobile: left-side accent bar for stacked layout */
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
color: var(--primary);
font-weight: 800;
}
.ftco-navbar-light .navbar-nav > .nav-item.active > a:before {
display: block;
visibility: visible;
left: 0;
right: auto;
top: 4px;
bottom: 4px;
width: 3px;
height: auto;
transform: none;
background-color: var(--accent);
border-radius: 3px;
}
}
/* The dropdown skin below is the selector that actually wins at this
breakpoint (style.css:8250 outranks style.css:9920's older dark skin via
specificity), so this is the rule that reaches the screen. */
@media (max-width: 991.98px) {
/* style.css:10845-10851 forces `display: block !important` on every
mobile nav dropdown (Services AND the Countries mega-menu, both match
this same selector) completely unconditionally — not gated on
Bootstrap's own `.show` class at all. That's why both dumped fully
open the instant the hamburger menu opened, before either was ever
tapped. Bootstrap's dropdown JS already toggles `.show` correctly on
click (confirmed: no other JS touches these dropdowns) — the bug is
purely this CSS ignoring that class.
First fix here animated this via `max-height` + `overflow:hidden`
transitions. That broke page scrolling on real mobile Safari (a
known class of iOS bug: a `max-height`-transitioning, `overflow:
hidden` block near the bottom of a page can leave the visual
viewport's scrollable extent miscalculated until a resize/reflow).
Plain `display:none/block` is what Bootstrap's dropdown CSS expects
and is reflowed reliably everywhere, so that's the toggle now; the
"smooth" open is a plain mount animation on `.show` instead of a
transition between two toggled states. */
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu {
display: none !important;
background: var(--tm-primary-800);
border-radius: var(--tm-radius-sm);
margin: 4px 0 8px;
padding: 6px 0;
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu.show {
display: block !important;
animation: tmMobileDropdownIn 0.25s var(--tm-ease, ease) both;
}
@keyframes tmMobileDropdownIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu.show {
animation: none;
}
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item {
color: #fff;
}
.ftco-navbar-light
.navbar-nav
> .nav-item
.dropdown-menu
.dropdown-item:hover,
.ftco-navbar-light
.navbar-nav
> .nav-item
.dropdown-menu
.dropdown-item:focus {
background: var(--accent);
color: var(--text);
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
min-height: 44px;
display: flex;
align-items: center;
}
}
/* --------------------------------------------------------------------------
2.0.1 Mobile menu panel — scrolls itself, not the page
--------------------------------------------------------------------------
The collapse used to open in normal document flow, pushing the page
taller — so "scrolling" scrolled the whole page (and, if you scrolled
past 80px, handed the header to main.js's sticky-header logic mid-open,
which then clipped whatever was open since that fixed header has no
overflow of its own). Instead the open menu is now its own fixed-height,
internally-scrollable panel anchored under the always-visible brand/
toggler row; the page behind is frozen (`:has()` is already used
elsewhere in this file for the sticky header, so it's a safe baseline)
so the only thing that scrolls while the menu is open is the menu. */
@media (max-width: 991.98px) {
#ftco-navbar .container {
position: relative;
}
#ftco-nav.show {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.25);
z-index: 1050;
padding: 0 15px 20px;
}
body:has(#ftco-nav.show) {
overflow: hidden;
}
}
/* --------------------------------------------------------------------------
2.1 Mobile header — logo + hamburger
--------------------------------------------------------------------------
style.css has three separate, conflicting mobile rules for
`.navbar-brand img` (an unscoped 28px, a 991.98px 24px, and a later
991.98px `35px !important`) written at different times without removing
the earlier ones — the last !important one wins today, leaving the logo
noticeably small. The toggler ("MENU") is untouched dated Bootstrap:
uppercase, 0.1em letter-spacing, no flex alignment between its icon and
text, and its own box ends up taller than the logo — so even though the
row itself is `align-items:center`, the two visually read as offset.
This block is the single source of truth for both from here on: a
bigger logo, and a compact pill-style toggler whose icon+label are
flex-centered and height-matched to the logo so their visual centers
line up. */
@media (max-width: 991.98px) {
.navbar-brand {
display: flex !important;
align-items: center;
margin-right: 0;
/* style.css adds margin-bottom:20px to the brand at <=767.98px
(meant to give the logo breathing room above the expanded mobile
menu), but it fires unconditionally — including while the header
is closed, where it inflates the brand's margin box to the full
row height and pins it to the top instead of letting it center
against the toggler. Zeroed here; the expanded menu already gets
enough separation from .navbar-nav .nav-link's own padding. */
margin-bottom: 0 !important;
}
.navbar-brand img {
height: 42px !important;
width: auto;
}
.navbar-toggler {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
padding: 0 16px !important;
border-radius: 999px;
background: var(--tm-primary-50, rgba(15, 59, 104, 0.06));
text-transform: none !important;
letter-spacing: normal !important;
font-size: 13.5px !important;
font-weight: 700;
color: var(--primary, #0f3b68) !important;
transition: background 0.2s var(--tm-ease, ease);
}
.navbar-toggler:hover,
.navbar-toggler:focus {
background: var(--tm-primary-100, rgba(15, 59, 104, 0.12));
}
.navbar-toggler .fa-bars {
font-size: 15px !important;
line-height: 1;
}
}
/* --------------------------------------------------------------------------
3. Hero banners (about/services/contact/hr/payroll/peo/countries/our-staff/
schedule-meeting/staff pages all use hero-wrap.hero-wrap-2)
-------------------------------------------------------------------------- */
.hero-wrap.hero-wrap-2 .overlay {
background: var(--tm-gradient-hero);
opacity: 1;
}
.hero-wrap.hero-wrap-2:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: var(--tm-gradient-accent);
}
.hero-wrap.hero-wrap-2 .slider-text h1 {
font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}
/* style.css's home-slider h1 jumps straight from 50px to a fixed 40px at
991.98px with +3px letter-spacing added on top, then never shrinks
further — on phones (~375-400px) the longer slide titles ("Scale your
team: fast, simple, legal") overflow the viewport width and get visually
clipped. A fluid size removes the hard floor. */
.owl-carousel.home-slider .slider-item .slider-text h1 {
font-size: clamp(1.75rem, 1.2rem + 3vw, 3.125rem) !important;
}
@media (max-width: 991.98px) {
.owl-carousel.home-slider .slider-item .slider-text h1 {
letter-spacing: 1px !important;
}
}
/* --------------------------------------------------------------------------
3.1 Hero depth — layered gradient wash, hairline grid texture, two
slow-drifting glow shapes, and a one-time entrance rise on the text.
Both real hero patterns route through their own `.overlay` child div,
which style.css already positions `absolute; inset:0` and paints
above the background photo / below the text container in both cases
(confirmed via style.css:10946-10965 and :11085-11095) — so every
layer below composites correctly with zero markup changes. `.overlay`
is itself `position:absolute`, which already establishes the
containing block its own ::before/::after position against, and
`overflow:hidden` on the outer wrapper keeps every shape safely
cropped to the hero's own bounds.
-------------------------------------------------------------------------- */
.hero-wrap.hero-wrap-2 {
overflow: hidden;
}
.hero-wrap.hero-wrap-2 .overlay {
/* Diagonal hairline texture layer removed (same fix as the home-slider
overlay above) — it read as visible diagonal lines across the photo.
Base tint switched from --tm-gradient-hero's navy wash to solid black
at the token itself (see :root), so this composites as black here too. */
background:
radial-gradient(
circle at 15% 20%,
rgba(212, 175, 55, 0.12) 0%,
transparent 45%
),
radial-gradient(
circle at 85% 78%,
rgba(255, 255, 255, 0.08) 0%,
transparent 40%
),
var(--tm-gradient-hero);
background-size:
140% 140%,
140% 140%,
100% 100%;
background-position:
0% 0%,
100% 100%,
center;
/* tmHeroDriftSlider (defined below, alongside the home-slider's own
overlay) — both overlays are now the same 3-layer shape (the hairline
layer that the original 4-layer tmHeroDrift was built for is gone
from both), so they share one keyframe instead of keeping a second,
now-identical one around. */
animation: tmHeroDriftSlider 26s var(--tm-ease) infinite alternate;
}
.hero-wrap.hero-wrap-2 .overlay:before,
.hero-wrap.hero-wrap-2 .overlay:after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(2px);
}
.hero-wrap.hero-wrap-2 .overlay:before {
width: 180px;
height: 180px;
right: 8%;
top: -50px;
background: radial-gradient(
circle,
rgba(212, 175, 55, 0.2) 0%,
transparent 70%
);
animation: tmFloat1 9s ease-in-out infinite;
}
.hero-wrap.hero-wrap-2 .overlay:after {
width: 120px;
height: 120px;
left: 6%;
bottom: -30px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.14) 0%,
transparent 70%
);
animation: tmFloat2 11s ease-in-out infinite;
}
.hero-wrap.hero-wrap-2 .slider-text .breadcrumbs,
.hero-wrap.hero-wrap-2 .slider-text h1 {
animation: tmHeroRise 0.8s var(--tm-ease) both;
}
.hero-wrap.hero-wrap-2 .slider-text h1 {
animation-delay: 0.12s;
}
/* Home slider: same treatment, kept lighter so the slide photos stay the
focal point — style.css's own overlay here is a flat 20%-opacity black
(style.css:11085-11095), which this replaces with rgba layers that carry
their own alpha instead of one blanket element-opacity, so the glows
keep independent, precise strength. The diagonal hairline texture layer
that used to sit on top (a repeating 45deg white line pattern) has been
removed — it read as visible diagonal lines across the photos. */
.owl-carousel.home-slider .slider-item .overlay {
background:
radial-gradient(
circle at 18% 22%,
rgba(212, 175, 55, 0.12) 0%,
transparent 45%
),
radial-gradient(
circle at 88% 82%,
rgba(24, 78, 138, 0.3) 0%,
transparent 45%
),
linear-gradient(
160deg,
rgba(7, 26, 44, 0.55) 0%,
rgba(10, 36, 64, 0.22) 55%,
rgba(7, 26, 44, 0.5) 100%
);
background-size:
150% 150%,
150% 150%,
100% 100%;
background-position:
0% 0%,
100% 100%,
center;
/* Shared with .hero-wrap.hero-wrap-2 .overlay — both lost their hairline
layer and are now the same 3-layer shape. */
animation: tmHeroDriftSlider 30s var(--tm-ease) infinite alternate;
opacity: 1;
}
.owl-carousel.home-slider .slider-item .overlay:before,
.owl-carousel.home-slider .slider-item .overlay:after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(3px);
}
.owl-carousel.home-slider .slider-item .overlay:before {
width: 260px;
height: 260px;
right: 6%;
top: -80px;
background: radial-gradient(
circle,
rgba(212, 175, 55, 0.18) 0%,
transparent 70%
);
animation: tmFloat1 13s ease-in-out infinite;
}
.owl-carousel.home-slider .slider-item .overlay:after {
width: 180px;
height: 180px;
left: 8%;
bottom: -40px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.1) 0%,
transparent 70%
);
animation: tmFloat2 16s ease-in-out infinite;
}
/* style.css sets this eyebrow label to an off-brand green (#58e36b,
style.css:11128) — jarring against the new navy/gold palette. */
.owl-carousel.home-slider .slider-item .slider-text h2 {
color: var(--accent) !important;
}
.owl-carousel.home-slider .slider-item .slider-text h2,
.owl-carousel.home-slider .slider-item .slider-text h1 {
animation: tmHeroRise 0.9s var(--tm-ease) both;
}
.owl-carousel.home-slider .slider-item .slider-text h1 {
animation-delay: 0.14s;
}
.owl-carousel.home-slider .slider-item .slider-text .btn {
animation: tmHeroRise 0.9s var(--tm-ease) both;
animation-delay: 0.26s;
}
/* Shared by both real hero overlays (home-slider and hero-wrap-2) — see
the comments on their respective `animation` declarations. */
@keyframes tmHeroDriftSlider {
from {
background-position:
0% 0%,
100% 100%,
center;
}
to {
background-position:
8% 6%,
92% 94%,
center;
}
}
@keyframes tmFloat1 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(18px);
}
}
@keyframes tmFloat2 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-14px);
}
}
@keyframes tmHeroRise {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-wrap.hero-wrap-2 .overlay,
.owl-carousel.home-slider .slider-item .overlay,
.hero-wrap.hero-wrap-2 .overlay:before,
.hero-wrap.hero-wrap-2 .overlay:after,
.owl-carousel.home-slider .slider-item .overlay:before,
.owl-carousel.home-slider .slider-item .overlay:after,
.hero-wrap.hero-wrap-2 .slider-text .breadcrumbs,
.hero-wrap.hero-wrap-2 .slider-text h1,
.owl-carousel.home-slider .slider-item .slider-text h2,
.owl-carousel.home-slider .slider-item .slider-text h1,
.owl-carousel.home-slider .slider-item .slider-text .btn {
animation: none;
}
}
/* --------------------------------------------------------------------------
3.2 Contact page hero — dedicated banner for the Jerash-columns photo
--------------------------------------------------------------------------
Scoped to `.hero-wrap-contact`, an extra class added alongside contact.
html's existing `hero-wrap hero-wrap-2` (contact.html:223) — every
selector below stacks all three classes so it always outranks the
general hero-wrap-2 rules above without touching services.html, which
shares the same hero-wrap-2 markup pattern and must stay untouched.
The photo itself (imgs/pexels-francesco-ungaro-15997234.jpg) was already
wired into that section's inline background-image; nothing here changes
which image loads, only how the banner around it is presented — a
calmer single flat overlay instead of §3.1's busier multi-layer texture/
glow treatment, since a single portrait photo stretched this wide reads
better with one restrained wash than competing decoration on top of it.
-------------------------------------------------------------------------- */
.hero-wrap.hero-wrap-2.hero-wrap-contact {
background-size: cover;
background-position: center;
height: 460px; /* desktop: middle of the requested 420-500px */
animation: tmContactHeroFadeIn 0.9s var(--tm-ease) both;
}
@media (max-width: 991.98px) {
.hero-wrap.hero-wrap-2.hero-wrap-contact {
height: 360px; /* tablet */
}
}
@media (max-width: 767.98px) {
.hero-wrap.hero-wrap-2.hero-wrap-contact {
height: 280px; /* mobile */
}
}
/* general rule hardcodes height:400px; match this variant's own height at
each breakpoint instead — a plain 100% doesn't resolve here since the
.container ancestor between this row and .hero-wrap-contact has no
explicit height of its own for the percentage to resolve against, which
left the row shrunk to its content's height and sitting flush under the
navbar instead of being pushed to the bottom by align-items-end. */
.hero-wrap.hero-wrap-2.hero-wrap-contact .slider-text {
height: 460px;
}
@media (max-width: 991.98px) {
.hero-wrap.hero-wrap-2.hero-wrap-contact .slider-text {
height: 360px;
}
}
@media (max-width: 767.98px) {
.hero-wrap.hero-wrap-2.hero-wrap-contact .slider-text {
height: 280px;
}
}
/* Flat premium navy wash at the exact requested tone, layered with a soft
fade at the bottom that blends into the next section's --bg-light for a
seamless seam instead of a hard cut. */
.hero-wrap.hero-wrap-2.hero-wrap-contact .overlay {
background:
linear-gradient(
to bottom,
transparent 0%,
transparent 78%,
rgba(248, 250, 252, 0.96) 100%
),
rgba(15, 59, 104, 0.55);
animation: none;
}
.hero-wrap.hero-wrap-2.hero-wrap-contact .overlay:before,
.hero-wrap.hero-wrap-2.hero-wrap-contact .overlay:after {
content: none;
}
/* §3.1's per-element text rise is replaced by one unified fade+rise on the
whole banner below, so it isn't disabled here — it's simply not layered
with a second, redundant motion on the text alone. */
.hero-wrap.hero-wrap-2.hero-wrap-contact .slider-text .breadcrumbs,
.hero-wrap.hero-wrap-2.hero-wrap-contact .slider-text h1 {
animation: none;
}
@keyframes tmContactHeroFadeIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-wrap.hero-wrap-2.hero-wrap-contact {
animation: none;
}
}
/* --------------------------------------------------------------------------
3.3 Insights page hero — lighter wash, no diagonal hairline texture
--------------------------------------------------------------------------
Scoped to `.hero-wrap-insights` (insights.html:236 only), same pattern as
§3.2's `.hero-wrap-contact`: drops §3.1's 45deg repeating-linear-gradient
texture and lightens the dark wash, without touching the general
hero-wrap-2 rules every other page sharing that markup still uses.
-------------------------------------------------------------------------- */
.hero-wrap.hero-wrap-2.hero-wrap-insights .overlay {
background:
radial-gradient(
circle at 15% 20%,
rgba(212, 175, 55, 0.12) 0%,
transparent 45%
),
radial-gradient(
circle at 85% 78%,
rgba(255, 255, 255, 0.08) 0%,
transparent 40%
),
linear-gradient(
160deg,
rgba(15, 59, 104, 0.55) 0%,
rgba(24, 78, 138, 0.45) 55%,
rgba(10, 36, 64, 0.35) 100%
);
background-size:
140% 140%,
140% 140%,
100% 100%;
background-position:
0% 0%,
100% 100%,
center;
animation: none;
}
/* --------------------------------------------------------------------------
4. Section rhythm — recolor the existing bg-light / bg-secondary bands
-------------------------------------------------------------------------- */
.ftco-section {
padding: clamp(3rem, 2.2rem + 3vw, 7em) 0;
}
/* Plain .bg-light (not just .ftco-section.bg-light) so .ftco-counter.bg-light
— which carries no ftco-section class — gets the same tone instead of the
vendor's near-identical-but-different flat #f8f9fd. Flat, not a gradient:
a top-to-bottom gradient repeats independently on every .bg-light section,
so each one fades dark at its own bottom edge then resets to light again
at the next section's top — stacked sections (about.html chains 4 back to
back) showed a repeating light/dark "pinch" at every seam that read as
overlapping shadows. One flat tone removes that entirely; the hairline
below still marks the boundary. */
.bg-light {
background: var(
--tm-primary-50
) !important; /* style.css .bg-light is !important */
}
/* #section-counter (index.html, about.html) is .ftco-no-pt on top of its
already-zero base — the stat numbers sit flush against the hairline with
no cushion at all, reading as cramped even though the *previous* section's
own bottom padding still separates it from that section's content. A
small top cushion here fixes the counter band itself without reopening a
full double-gap against the section above. */
#section-counter {
padding-top: 2.5rem !important;
}
/* index.html: the plain white services-card grid right after the "Meet
Msindaha HRM" gradient card (.hrm-section) had its own top padding
zeroed by .ftco-no-pt, so its content (the cards) started flush at the
section's own top edge — no breathing room before the cards themselves.
Scoped via the general sibling combinator (~, not + — a