/* =========================================================================
Santosh Engineering Works — premium UI layer
Loads after the child theme's Tailwind build (santengg-child).
Two pieces:
1. A premium testimonials band — the section the parent theme still
renders in its old pale-blue/brand palette, brought over to the Dehu
palette: a light, airy ground with white cards and client portraits.
2. A footer that curves over that band — rounded top corners, lifted, with
a gradient hairline along the edge.
The band is deliberately a shade deeper than the footer that follows it.
That difference is what makes the footer's rounded corners legible; if the
two are ever retoned, keep the band darker than the footer's top edge.
Colours are the child theme's (tailwind.config.js):
navy #04090F #0A1628 #12203A azure #7FBBEA #3D96DD #1479C9 #0B63AE
flame #FB923C #F97316 mist #F1F5F9 #E2E8F0
`!important` appears where a Tailwind utility on the same element sets the
same property — the parent markup cannot be edited from here, so the cascade
has to be won on specificity alone.
========================================================================= */
:root {
/* One knob: the corner radius, and how far the footer rides up over the
band above it. The two must stay equal or the corners stop reading. */
--sew-footer-radius: 44px;
}
@media (max-width: 640px) {
:root {
--sew-footer-radius: 26px;
}
}
/* =========================================================================
1. Testimonials band — light
========================================================================= */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(168deg, #f7fbff 0%, #e9f2fd 46%, #dceafa 100%) !important;
/* Bottom padding carries the footer overlap, so nothing is covered. The
radius allowance is the part the footer sits on and cannot be trimmed;
only the 2.5rem in front of it is real breathing room. */
padding-top: 2.75rem !important;
padding-bottom: calc(2.5rem + var(--sew-footer-radius)) !important;
}
/* Shop-floor photograph, almost invisible — it gives the flat wash a texture
without ever competing with the quotes. Multiply keeps it as a shadow in the
paper rather than a grey film over it, and the mask clears the bottom so the
footer's corners meet clean colour. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"]::before {
content: '';
position: absolute;
inset: 0;
z-index: -2;
background: url('shopfloor.jpg') center / cover no-repeat;
opacity: 0.09;
filter: grayscale(1) contrast(1.05);
mix-blend-mode: multiply;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
}
/* Two brand glows, echoing the pair of blurred orbs the footer already uses. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"]::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(46rem 30rem at 10% 0%, rgba(11, 99, 174, 0.16), transparent 62%),
radial-gradient(34rem 26rem at 92% 100%, rgba(249, 115, 22, 0.1), transparent 65%);
pointer-events: none;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] > div {
position: relative;
z-index: 1;
}
/* ------------------------------------------------------------- Heading */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] p[class*="uppercase"] {
color: #0b63ae !important;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11.5px !important;
font-weight: 600;
letter-spacing: 0.3em !important;
}
.santengg-dehu #santengg-testimonials-heading {
color: #0a1628 !important;
font-family: 'Sora', system-ui, sans-serif;
font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.5rem) !important;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.18;
}
/* The 3px rule under the heading, re-cut as a brand gradient. */
.santengg-dehu #santengg-testimonials-heading + span {
width: 5.5rem !important;
height: 3px !important;
background: linear-gradient(90deg, #0b63ae, #3d96dd 45%, #f97316) !important;
box-shadow: 0 6px 18px rgba(11, 99, 174, 0.35);
}
/* --------------------------------------------------------------- Cards */
/* The track clips on the y-axis because it scrolls on the x-axis, so the hover
lift needs breathing room inside it rather than outside. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-track] {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
/* The dots row is the last thing before the footer, so its own margin is part
of the section's bottom spacing too. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-dots] {
margin-top: 1.25rem !important;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figure {
position: relative;
overflow: hidden;
border: 1px solid rgba(10, 22, 40, 0.07) !important;
border-radius: 20px !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
box-shadow: 0 22px 45px -32px rgba(10, 22, 40, 0.55) !important;
padding: 1.9rem 1.75rem !important;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}
/* A hairline of brand colour along the top edge of every card, brighter on the
card under the pointer. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figure::before {
content: '';
position: absolute;
top: 0;
left: 1.75rem;
right: 1.75rem;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(11, 99, 174, 0.75), transparent);
opacity: 0.5;
transition: opacity 0.45s ease;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figure:hover {
transform: translateY(-6px);
border-color: rgba(61, 150, 221, 0.45) !important;
box-shadow: 0 30px 55px -30px rgba(11, 99, 174, 0.55) !important;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figure:hover::before {
opacity: 1;
}
/* Opening quote glyph — bigger, and filled with the brand gradient. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figure > span[aria-hidden="true"]:first-of-type {
font-family: 'Playfair Display', Georgia, serif;
font-size: 3.75rem !important;
line-height: 0.62 !important;
display: block;
background: linear-gradient(135deg, #f97316, #fb923c 45%, #3d96dd);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] blockquote p {
color: rgba(10, 22, 40, 0.74) !important;
font-size: 15px !important;
line-height: 1.75 !important;
}
/* ------------------------------------------------------------- Byline */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figcaption {
margin-top: 1.75rem !important;
padding-top: 1.25rem;
border-top: 1px solid rgba(10, 22, 40, 0.08);
gap: 0.9rem !important;
}
/* Portrait, where the testimonial has one. A white gap inside the azure ring
keeps the photograph from sitting straight on the ring on a light card. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figcaption img {
height: 3.25rem !important;
width: 3.25rem !important;
border-radius: 9999px !important;
object-fit: cover !important;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 4px rgba(11, 99, 174, 0.35),
0 8px 18px -10px rgba(10, 22, 40, 0.6);
}
/* Monogram tile, for the cards that do not — same silhouette, so a mixed row
still reads as one set. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figcaption > span[aria-hidden="true"] {
height: 3.25rem !important;
width: 3.25rem !important;
font-size: 1rem !important;
color: #0b63ae !important;
background: linear-gradient(150deg, #e8f2fb, #c8e1f7) !important;
box-shadow:
0 0 0 3px #ffffff,
0 0 0 4px rgba(11, 99, 174, 0.28),
0 8px 18px -10px rgba(10, 22, 40, 0.5);
}
/* Name, then role + company. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figcaption > span:last-child > span:first-child {
color: #0a1628 !important;
font-family: 'Sora', system-ui, sans-serif;
font-size: 14px !important;
letter-spacing: -0.01em;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] figcaption > span:last-child > span:last-child {
color: #084b85 !important;
font-size: 11.5px !important;
letter-spacing: 0.02em;
}
/* ------------------------------------------------------- Arrows & dots */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-prev],
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-next] {
border-color: rgba(10, 22, 40, 0.09) !important;
background: #ffffff !important;
color: #0a1628 !important;
box-shadow: 0 12px 26px -16px rgba(10, 22, 40, 0.7) !important;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-prev]:hover,
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-next]:hover {
background: #0b63ae !important;
border-color: #0b63ae !important;
color: #ffffff !important;
transform: translateY(-50%) scale(1.06);
}
/* The dots inherit `bg-current` at 40% from a brand-700 container, which is too
faint on this ground. Repaint both states. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-dots] button {
background: rgba(10, 22, 40, 0.2) !important;
opacity: 1 !important;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-dots] button:hover {
background: rgba(10, 22, 40, 0.4) !important;
}
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] [data-santengg-slider-dots] button[aria-current="true"] {
background: linear-gradient(90deg, #0b63ae, #f97316) !important;
}
/* =========================================================================
1b. Client logo wall — "Our Clients / Trusted by Leading Brands"
========================================================================= */
/* Same rhythm as the testimonials band above it — the parent's py-12/sm:py-16
leaves the two logo walls floating a long way from the sections they belong
to. There is no footer overlap to allow for here, so both sides are plain. */
.santengg-dehu section[aria-labelledby="santengg-clients-heading"] {
padding-top: 2.75rem !important;
padding-bottom: 2.5rem !important;
}
/* The heading-to-slider gap is the parent's mt-10; pull it in to match. */
.santengg-dehu section[aria-labelledby="santengg-clients-heading"] [data-santengg-slider] {
margin-top: 2rem !important;
}
.santengg-dehu section[aria-labelledby="santengg-clients-heading"] [data-santengg-slider-dots] {
margin-top: 1.25rem !important;
}
/* The wall shows six logos per view on a wide screen and there are seven
clients, so the slider had almost nothing to scroll and looked broken. Four
per view on desktop and three on tablet gives it real travel — and shows the
marks larger while it is at it. Add more clients and it keeps working. */
@media (min-width: 768px) {
.santengg-dehu section[aria-labelledby='santengg-clients-heading'] [data-santengg-slider-track] > div {
width: calc((100% - 2.5rem) / 3) !important;
}
}
@media (min-width: 1024px) {
.santengg-dehu section[aria-labelledby='santengg-clients-heading'] [data-santengg-slider-track] > div {
width: calc((100% - 3.75rem) / 4) !important;
}
}
/* The parent renders every client logo muted and desaturated, lifting it to
full colour only on hover — a convention that costs the brands their
recognition on a page nobody hovers on. Show them as supplied, and keep the
hover for the card lift alone. */
.santengg-dehu section[aria-labelledby="santengg-clients-heading"] img {
filter: none !important;
opacity: 1 !important;
}
/* =========================================================================
2. Footer
========================================================================= */
/* The lift is a transform rather than a negative margin so the child theme's
`mt-auto` sticky-footer behaviour survives; the matching negative bottom
margin takes the 44px back out of the document flow again.
Gated on :has() — the corners only read when there is a band behind them to
cut into. On a page without the testimonials band the footer keeps its
rounded top but stays exactly where it was.
The ground stays near-white against the band's deeper blue, which is what
draws the curve. */
.santengg-dehu #colophon {
border-top: 0 !important;
border-radius: var(--sew-footer-radius) var(--sew-footer-radius) 0 0 !important;
background: linear-gradient(172deg, #ffffff 0%, #fbfdff 46%, #f3f9ff 100%) !important;
padding-top: 4.25rem !important;
box-shadow: 0 -22px 45px -34px rgba(10, 22, 40, 0.55);
}
body.santengg-dehu:has(section[aria-labelledby="santengg-testimonials-heading"]) #colophon {
position: relative;
z-index: 1;
transform: translateY(calc(-1 * var(--sew-footer-radius)));
margin-bottom: calc(-1 * var(--sew-footer-radius));
}
/* Brand hairline along the curved top edge. */
.santengg-dehu #colophon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 2;
background: linear-gradient(90deg, transparent 4%, #0b63ae 22%, #3d96dd 50%, #f97316 78%, transparent 96%);
opacity: 0.9;
}
/* --------------------------------------------------------- Column heads */
.santengg-dehu #colophon h3 {
position: relative;
padding-bottom: 0.85rem;
color: #0a1628 !important;
letter-spacing: -0.01em;
}
.santengg-dehu #colophon h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 2.25rem;
height: 2px;
border-radius: 9999px;
background: linear-gradient(90deg, #0b63ae, #3d96dd);
}
/* ------------------------------------------------------------- Contents */
.santengg-dehu #colophon nav a,
.santengg-dehu #colophon ul a {
display: inline-block;
transition: color 0.3s ease, transform 0.3s ease;
}
.santengg-dehu #colophon nav a:hover,
.santengg-dehu #colophon ul a:hover {
transform: translateX(4px);
}
/* Address and body copy sit a shade darker than the links so the hierarchy
still holds on the lighter ground. */
.santengg-dehu #colophon address,
.santengg-dehu #colophon p {
color: rgba(10, 22, 40, 0.72);
}
/* Social pills: solid, so they lift off the pale gradient. */
.santengg-dehu #colophon a[class*="rounded-full"][class*="place-items-center"],
.santengg-dehu #colophon a[class*="rounded-full"][class*="grid"] {
background: #ffffff;
border-color: rgba(10, 22, 40, 0.1) !important;
box-shadow: 0 6px 16px -10px rgba(10, 22, 40, 0.55);
}
/* Bottom row — replace the flat rule with a gradient that fades at both ends. */
.santengg-dehu #colophon > div > div:last-child {
position: relative;
border-top-color: transparent !important;
}
.santengg-dehu #colophon > div > div:last-child::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10, 22, 40, 0.16) 22%, rgba(10, 22, 40, 0.16) 78%, transparent);
}
/* =========================================================================
3. Mobile — layout containment and navigation
========================================================================= */
/* ------------------------------------------------- Sideways scroll fix
The home and About pages could be dragged ~110px sideways on a phone. Cause:
grid and flex children default to `min-width: auto`, so a single stubborn
descendant sets the whole track's minimum and the one-column mobile grid
resolves wider than its own container (measured: a 358px container with a
464px track). Letting those children shrink to their real available width is
the standard fix and changes nothing at desktop widths, where the tracks
already fit. Items with an explicit width and `shrink-0` — the sliders — are
unaffected, because they do not shrink in the first place. */
.santengg-dehu .grid > *,
.santengg-dehu .flex > * {
min-width: 0;
}
.santengg-dehu img,
.santengg-dehu svg {
max-width: 100%;
}
@media (max-width: 1023.98px) {
/* The scroll-reveal animations slide content in from ±34px horizontally.
Mid-animation that is real horizontal scroll on a 390px screen — the page
twitches sideways as you scroll. Reveal vertically instead; the effect
survives, the sideways travel does not. */
html.santengg-js [data-reveal='left'],
html.santengg-js [data-reveal='right'] {
transform: translateY(24px);
}
/* Belt and braces for decorative overhangs (slider arrows sit a few px
outside their rail). `clip` rather than `hidden`, so the sticky header
keeps working. */
body.santengg-dehu {
overflow-x: clip;
}
}
/* ------------------------------------------------------ Mobile sub-nav
The theme's JS appends a chevron button to each parent menu row, and the
stylesheet positions it `absolute; right: .25rem; top: .25rem`. The row it
belongs to is not a positioned element, so the button escaped to the nearest
one — the sticky header — and rendered in the top-right corner beside the
close button. There was no visible control on the row itself, so tapping
"About Us" simply navigated and the sub-menu appeared unreachable.
One line fixes it. The rest makes the row a proper 44px tap target. */
#mobile-menu .menu-item-has-children {
position: relative;
}
#mobile-menu .santengg-submenu-toggle {
height: 2.75rem !important;
width: 2.75rem !important;
top: 0.1rem !important;
right: 0.1rem !important;
border-radius: 9999px !important;
color: #0b63ae !important;
}
#mobile-menu .santengg-submenu-toggle:hover,
#mobile-menu .santengg-submenu-toggle:focus-visible {
background: rgba(11, 99, 174, 0.08) !important;
}
/* Rows: bigger targets, a divider per item, and room on the right so the label
never runs under the chevron. */
#mobile-menu .menu-item > a {
display: block;
padding: 0.8rem 3.25rem 0.8rem 0.75rem !important;
font-size: 14px !important;
border-radius: 0.5rem !important;
}
#mobile-menu > div > nav > ul > .menu-item + .menu-item {
border-top: 1px solid rgba(10, 22, 40, 0.07);
}
#mobile-menu .current-menu-item > a,
#mobile-menu .current_page_item > a,
#mobile-menu .current-menu-ancestor > a {
color: #0b63ae !important;
background: rgba(11, 99, 174, 0.06);
}
/* Sub-menu: indented under its parent, on the brand rule. */
#mobile-menu .sub-menu {
margin: 0.15rem 0 0.6rem !important;
padding-left: 0.9rem !important;
border-left-color: rgba(11, 99, 174, 0.35) !important;
}
#mobile-menu .sub-menu > .menu-item > a {
padding: 0.6rem 0.5rem !important;
font-size: 13.5px !important;
}
/* =========================================================================
4. Ink — body copy in the same near-black as the headings
========================================================================= */
/* Both themes set body copy well below full strength: the child at 55–75%
navy, the parent on the slate scale (#475569, #64748B). Against the pale
grounds that reads washed out next to headings, which are solid #0A1628.
These are the utility classes doing it, measured across the home, About,
Products and Contact pages. Overriding the utilities rather than the
elements keeps one rule per shade and leaves anything explicitly coloured —
links in azure, the flame accents, white text on the dark hero — untouched. */
.santengg-dehu .text-navy-900\/50,
.santengg-dehu .text-navy-900\/55,
.santengg-dehu .text-navy-900\/60,
.santengg-dehu .text-navy-900\/65,
.santengg-dehu .text-navy-900\/70,
.santengg-dehu .text-navy-900\/72,
.santengg-dehu .text-navy-900\/75,
.santengg-dehu .text-navy-900\/80,
.santengg-dehu .text-slate-500,
.santengg-dehu .text-slate-600,
.santengg-dehu .text-slate-700 {
color: #0a1628 !important;
}
/* The two themes' near-blacks differ by a hair (#0B1B34 vs #0A1628). Align
them so headings set in either one match the copy underneath. */
.santengg-dehu .text-brand-950,
.santengg-dehu .text-slate-900 {
color: #0a1628 !important;
}
/* The footer inherits its base colour from an element-level utility rather
than a text-* class, so it needs saying separately. */
.santengg-dehu #colophon {
color: #0a1628 !important;
}
.santengg-dehu #colophon address,
.santengg-dehu #colophon p,
.santengg-dehu #colophon nav a,
.santengg-dehu #colophon ul a {
color: #0a1628 !important;
}
.santengg-dehu #colophon nav a:hover,
.santengg-dehu #colophon ul a:hover,
.santengg-dehu #colophon address a:hover {
color: #0b63ae !important;
}
/* Testimonial quotes were deliberately set back at 74%; bring them to the same
ink as everything else. The byline stays azure — that is a colour, not a
dimmed black. */
.santengg-dehu section[aria-labelledby="santengg-testimonials-heading"] blockquote p {
color: #0a1628 !important;
}
/* The breadcrumb bar sits inside the dark page-hero, but the theme paints it
on the slate scale — slate-500 links and a slate-700 current page. That was
already close to unreadable there (contrast 1.9:1) and darkening the ink
above would have finished the job. Light text is what belongs on that band. */
.santengg-dehu nav[aria-label='Breadcrumb'] ol,
.santengg-dehu nav[aria-label='Breadcrumb'] a,
.santengg-dehu nav[aria-label='Breadcrumb'] .text-slate-500,
.santengg-dehu nav[aria-label='Breadcrumb'] .text-slate-600 {
color: rgba(255, 255, 255, 0.75) !important;
}
.santengg-dehu nav[aria-label='Breadcrumb'] a:hover,
.santengg-dehu nav[aria-label='Breadcrumb'] .text-slate-700 {
color: #ffffff !important;
}
.santengg-dehu nav[aria-label='Breadcrumb'] .text-slate-300 {
color: rgba(255, 255, 255, 0.42) !important;
}
/* Anything white on the dark hero must stay white — the slate utilities above
are also used there. Restated after them so it wins. */
.santengg-dehu .santengg-slide .text-slate-200,
.santengg-dehu .santengg-slide .text-slate-300,
.santengg-dehu .santengg-slide .text-slate-400,
.santengg-dehu .santengg-slide .text-slate-500,
.santengg-dehu .santengg-slide .text-slate-600 {
color: #e2e8f0 !important;
}
/* =========================================================================
5. About page — Mission and Vision cards
========================================================================= */
/* New artwork for the two cards, and a much lighter treatment so the photos
are actually visible. The theme had them at 25% opacity under a near-solid
navy gradient, which read as texture rather than as a picture.
The photograph moves to the backing div as a background image and the
theme's is hidden — it is decorative (the card's own heading carries
the meaning), so nothing is lost to assistive tech. */
.santengg-dehu section[aria-labelledby='sew-mv'] article > div:first-child {
opacity: 1 !important;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.santengg-dehu section[aria-labelledby='sew-mv'] article > div:first-child img {
display: none !important;
}
.santengg-dehu section[aria-labelledby='sew-mv'] article:nth-child(1) > div:first-child {
background-image: url('mission-bg.jpg');
}
/* The vision artwork has the words "OUR VISION" set into the picture, and they
landed directly behind the card's own heading. Cropping into the right of
the frame keeps the pointing hand and the HUD ring and takes the duplicate
wording out of shot. */
.santengg-dehu section[aria-labelledby='sew-mv'] article:nth-child(2) > div:first-child {
background-image: url('vision-bg.jpg');
background-position: 88% center;
background-size: 190%;
}
/* The scrim. Kept dark enough at the top-left, where the icon, heading and
copy sit, for white text to stay legible over a photograph; it thins out
towards the bottom-right so the image reads as an image. */
.santengg-dehu section[aria-labelledby='sew-mv'] article > div:nth-child(2) {
background: linear-gradient(
135deg,
rgba(4, 9, 15, 0.72) 0%,
rgba(10, 22, 40, 0.58) 45%,
rgba(18, 32, 58, 0.42) 100%
) !important;
}
/* Body copy inside the cards was at 70% white over a near-solid ground; with a
photograph behind it, it needs to be brighter and to carry its own shadow. */
.santengg-dehu section[aria-labelledby='sew-mv'] article p {
color: rgba(255, 255, 255, 0.92) !important;
text-shadow: 0 1px 12px rgba(4, 9, 15, 0.65);
}
.santengg-dehu section[aria-labelledby='sew-mv'] article h3 {
text-shadow: 0 2px 16px rgba(4, 9, 15, 0.7);
}
/* =========================================================================
6. Inner pages — stats band, highlight cards, checklist
========================================================================= */
/* ------------------------------------------------------------ Stats band
The theme sizes each figure by its character count, so "46+" renders at 30px
next to "ISO 9001:2015" at 20px — four different type sizes sitting on four
different baselines, which is what makes the row look out of line. One size
for every figure, and a fixed-height cell they align inside, puts them back
on a line. */
.santengg-dehu section.bg-brand-900:has(dl) {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(135deg, #04090f 0%, #0a1628 45%, #12203a 100%) !important;
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.santengg-dehu section.bg-brand-900:has(dl)::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(38rem 22rem at 12% 0%, rgba(11, 99, 174, 0.4), transparent 60%),
radial-gradient(26rem 18rem at 90% 100%, rgba(249, 115, 22, 0.16), transparent 65%);
pointer-events: none;
}
.santengg-dehu section.bg-brand-900:has(dl) dl {
gap: 0 !important;
}
.santengg-dehu section.bg-brand-900:has(dl) dl > div {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.1rem 1rem;
}
/* Hairline separators, desktop only — on the two-column mobile grid they would
cut the row in half rather than divide it. */
@media (min-width: 1024px) {
.santengg-dehu section.bg-brand-900:has(dl) dl > div + div::before {
content: '';
position: absolute;
left: 0;
top: 14%;
bottom: 14%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
}
.santengg-dehu section.bg-brand-900:has(dl) dt {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
margin: 0;
font-family: 'Sora', system-ui, sans-serif;
font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem) !important;
font-weight: 700;
line-height: 1.15 !important;
letter-spacing: -0.02em;
text-align: center;
color: #ffffff !important;
}
.santengg-dehu section.bg-brand-900:has(dl) dd {
margin-top: 0.7rem !important;
font-size: 11.5px !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
line-height: 1.5;
text-align: center;
color: rgba(255, 255, 255, 0.62) !important;
}
/* --------------------------------------------- Stat cards on light grounds
The same figures appear as white cards inside the About sections. They get
the band's typography — one size for every figure, a fixed cell they align
inside, and the same tracked label — so the two read as one system rather
than two. Only the cards are targeted (the band's cells have no
`rounded-card`), so the dark band above keeps its own rules. */
.santengg-dehu dl > div[class*='rounded-card'] dt {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
font-family: 'Sora', system-ui, sans-serif;
font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem) !important;
font-weight: 700;
line-height: 1.15 !important;
letter-spacing: -0.02em;
text-align: center;
color: #0a1628 !important;
}
.santengg-dehu dl > div[class*='rounded-card'] dd {
margin-top: 0.55rem !important;
font-size: 11px !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1.5;
text-align: center;
color: rgba(10, 22, 40, 0.6) !important;
}
/* ------------------------------------------------- Key highlight cards */
.santengg-dehu section.bg-slate-50:has(.group.rounded-xl) {
padding-top: 2.25rem !important;
padding-bottom: 2.25rem !important;
background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%) !important;
}
/* The heading block sits tighter to the cards than the theme's mt-14. */
.santengg-dehu section.bg-slate-50:has(.group.rounded-xl) .mt-14 {
margin-top: 2rem !important;
}
/* Icons centred, and the card text with them — a centred icon over ranged-left
text reads as a mistake rather than a choice. */
.santengg-dehu section.bg-slate-50:has(.group.rounded-xl) .group.rounded-xl {
text-align: center;
border-color: rgba(10, 22, 40, 0.08) !important;
border-radius: 18px !important;
box-shadow: 0 18px 40px -34px rgba(10, 22, 40, 0.55);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.santengg-dehu section.bg-slate-50:has(.group.rounded-xl) .group.rounded-xl:hover {
transform: translateY(-4px);
border-color: rgba(61, 150, 221, 0.45) !important;
box-shadow: 0 26px 48px -30px rgba(11, 99, 174, 0.5);
}
.santengg-dehu section.bg-slate-50:has(.group.rounded-xl) .group.rounded-xl > span:first-child {
display: inline-flex;
margin-inline: auto;
background: linear-gradient(150deg, #e8f2fb, #c8e1f7) !important;
color: #0b63ae !important;
border-radius: 14px !important;
}
.santengg-dehu section.bg-slate-50:has(.group.rounded-xl) .group.rounded-xl:hover > span:first-child {
background: linear-gradient(150deg, #0b63ae, #12203a) !important;
color: #ffffff !important;
}
/* --------------------------------------------------- "What we machine"
Sits directly under the highlight cards, so it opens without a gap of its
own. Scoped to the template that renders it. */
.santengg-dehu.page-template-who-we-are section.bg-white:has(> div[class*='max-w-4xl']) {
padding-top: 0 !important;
padding-bottom: 2.5rem !important;
}
/* ------------------------------------------------- Site-wide section rhythm
The two themes space sections at py-12 / py-14 / py-16 / py-20 — 3rem to
5rem top and bottom. Tightened across the site to a single, shorter rhythm.
Only elements are touched, so the page hero (whose padding sits on
an inner div) keeps its height, and the sections with their own explicit
spacing above — testimonials, the clients wall, the stats band, the highlight
cards — keep theirs, since those rules are more specific. */
.santengg-dehu section[class*='py-'] {
padding-top: 2.25rem !important;
padding-bottom: 2.25rem !important;
}
@media (min-width: 640px) {
.santengg-dehu section[class*='py-'] {
padding-top: 2.75rem !important;
padding-bottom: 2.75rem !important;
}
}
/* ------------------------------------------------------- Intro page CTA */
.santengg-dehu .santengg-intro-cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 2.25rem !important;
}
/* The buttons are written into an editable field, which WordPress runs through
wp_kses_post() — and that strips