/* ==========================================================================
PRIMARIUS TECHNOLOGIES — Premium Upgrade Layer
This file loads AFTER style.css (+ products.css) to refine the
existing design system without breaking any component or functionality.
Scope of changes:
1. Refined design tokens (premium palette, elevation, focus ring)
2. Typography tightening
3. Gradient buttons with shimmer + refined shadow
4. Polished mega-menu preview card
5. Homepage: featured products strip, trust bar, client logos marquee,
stronger hero reveal, premium CTA panel
6. Product listing: category chips toolbar, skeleton loader, card hover lift
7. Product detail: feature highlights, certification strip, split CTA, skeleton
8. Multi-column premium footer extensions
9. Reveal-on-scroll micro interactions
========================================================================== */
/* ---------- 1. DESIGN TOKENS (unified palette) ----------
Single source of truth for the whole site. All existing
component rules that reference var(--primary), --secondary,
--gradient-primary etc. automatically pick up the new hues.
*/
:root {
/* ---- Core brand palette ---- */
--primary: #4c2c92; /* Deep purple — core brand */
--primary-light: #7b2cbf; /* Mid purple — hover / hero accents */
--primary-dark: #371f66; /* Deepest purple — depth / gradients */
--secondary: #7b2cbf; /* Mid purple — gradient partner */
--secondary-light:#a259e0;
--accent: #d62828; /* Red — use sparingly as accent only */
--accent-light: #e85555;
/* ---- Neutral greys (text + surfaces) ---- */
--dark: #1f2937; /* Primary text */
--dark-light: #374151; /* Secondary text */
--white: #ffffff;
/* ---- Primary gradients ---- */
--gradient-primary: linear-gradient(135deg, #4c2c92 0%, #7b2cbf 55%, #d62828 100%);
--gradient-dark: linear-gradient(135deg, #0f0a1f 0%, #371f66 60%, #7b2cbf 100%);
--gradient-accent: linear-gradient(135deg, #7b2cbf 0%, #d62828 100%);
/* ---- Supporting tokens (used by premium layer) ---- */
--brand-600: #4c2c92;
--brand-500: #7b2cbf;
--brand-400: #a259e0;
--brand-50: #f4edfb;
--ink-900: #111827;
--ink-700: #1f2937;
--ink-500: #4b5563;
--surface: #ffffff;
--surface-muted: #f8fafc;
--hair: #e5e7eb;
--focus-ring: 0 0 0 4px rgba(76, 44, 146, 0.28);
/* ---- Elevation ---- */
--elev-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
--elev-2: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--elev-3: 0 16px 40px -8px rgba(15,23,42,.16), 0 8px 16px -8px rgba(15,23,42,.06);
--elev-4: 0 28px 64px -16px rgba(15,23,42,.25), 0 12px 20px -8px rgba(15,23,42,.06);
/* ---- Gradients used internally by premium layer ---- */
--g-sheen: linear-gradient(135deg, #4c2c92 0%, #7b2cbf 50%, #d62828 100%);
--g-deep: linear-gradient(135deg, #0f0a1f 0%, #371f66 45%, #4c2c92 100%);
--g-soft: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
/* ---- Standard motion token ---- */
--t-fast: 0.2s ease;
--t-std: 0.3s ease;
--t-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
/* ---- Typography refinements ---- */
--lead-size: clamp(1.05rem, 1.05vw + .7rem, 1.2rem);
}
/* Global typography polish */
html { scroll-padding-top: 92px; }
body { letter-spacing: -0.003em; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
p { color: var(--gray-600); }
::selection { background: rgba(123, 44, 191,.2); }
/* Accessible focus ring (keyboard only) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 8px;
}
/* ---------- 2. BUTTONS (shimmer + refined elevation) ---------- */
.btn {
padding: 13px 28px;
font-weight: 600;
letter-spacing: -0.005em;
border-radius: 999px;
transition: transform .25s cubic-bezier(.4,0,.2,1),
box-shadow .25s cubic-bezier(.4,0,.2,1),
background-position .5s ease;
position: relative;
overflow: hidden;
background-size: 200% 100%;
}
.btn-primary {
background: linear-gradient(100deg, #4c2c92 0%, #7b2cbf 50%, #d62828 100%) 0% 0%/200% 100%;
color: #fff;
box-shadow: 0 10px 24px -10px rgba(76, 44, 146,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover {
background-position: 100% 0;
transform: translateY(-2px);
box-shadow: 0 18px 36px -14px rgba(76, 44, 146,.65);
}
.btn-secondary {
background: #fff;
color: var(--brand-600);
border: 1.5px solid var(--hair);
box-shadow: var(--elev-1);
}
.btn-secondary:hover {
border-color: var(--brand-500);
color: var(--brand-600);
box-shadow: var(--elev-2);
transform: translateY(-2px);
}
.btn-outline-white:hover { transform: translateY(-2px); }
.btn-pill { padding: 10px 20px; font-size: .9rem; }
/* Micro "pulse" on icon inside btn */
.btn i { transition: transform .3s ease; }
.btn:hover i { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
/* ---------- 3. HERO: stronger reveal + accent glow ---------- */
.hero-slider .slide h1 {
font-weight: 800;
letter-spacing: -0.03em;
text-shadow: 0 6px 40px rgba(0,0,0,.35);
}
.hero-slider .slide .slide-accent-line {
background: linear-gradient(90deg, #d62828, transparent);
}
.slide-overlay {
background: linear-gradient(120deg, rgba(7,12,27,.82) 0%, rgba(7,12,27,.55) 45%, rgba(7,12,27,.25) 100%);
}
/* ---------- 4. MEGA MENU — preview panel polish ---------- */
.nav-megamenu {
border-radius: 18px;
box-shadow: 0 30px 70px -20px rgba(15,23,42,.3), 0 12px 24px -8px rgba(15,23,42,.08);
border: 1px solid var(--hair);
}
.mega-menu-header {
background: var(--g-soft);
}
.mega-cat-item:hover > .mega-cat-link {
background: linear-gradient(90deg, rgba(123, 44, 191,.08), rgba(123, 44, 191,.05));
}
.mega-sub-preview {
background: var(--g-soft);
}
.mega-sub-preview .msp-label {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: 2px;
color: var(--brand-500);
text-transform: uppercase;
background: var(--brand-50);
padding: 4px 10px;
border-radius: 999px;
}
.mega-sub-preview .msp-cta {
background: var(--g-sheen);
color: #fff;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform .25s ease, box-shadow .25s ease;
}
.mega-sub-preview .msp-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(123, 44, 191,.6);
}
.mega-sub-preview .msp-img {
transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.mega-sub-preview:hover .msp-img { transform: scale(1.04); }
/* Mega menu — section heading (inside .mega-sub-list after main.js
wraps) separates subcategory groups within a single category flyout. */
.mega-sub-list .mega-sub-heading {
padding: 10px 16px 4px !important;
margin: 4px 0 0 !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.11em !important;
color: #94a3b8 !important;
border-top: 1px solid rgba(226,232,240,0.7) !important;
}
.mega-sub-list .mega-sub-heading:first-child {
border-top: 0 !important;
margin-top: 0 !important;
}
.mega-sub-list .mega-sub-heading .mega-sub-heading-link {
color: #64748b !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
}
.mega-sub-list .mega-sub-heading .mega-sub-heading-link i {
color: var(--brand-500);
font-size: 0.72rem;
width: 14px;
text-align: center;
}
.mega-sub-list .mega-sub-heading .mega-sub-heading-link:hover {
color: var(--brand-600) !important;
}
/* If a flyout has many products, allow scroll without breaking layout */
.mega-sub-list {
max-height: 70vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(148,163,184,0.4) transparent;
}
.mega-sub-list::-webkit-scrollbar { width: 6px; }
.mega-sub-list::-webkit-scrollbar-track { background: transparent; }
.mega-sub-list::-webkit-scrollbar-thumb {
background: rgba(148,163,184,0.4);
border-radius: 3px;
}
/* ---------- 5. FEATURED PRODUCTS STRIP (home) ---------- */
.featured-products { padding: 100px 0 40px; background: var(--g-soft); }
.featured-track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
gap: 24px;
margin-top: 40px;
}
.featured-card {
background: #fff;
border: 1px solid var(--hair);
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--elev-1);
transition: transform .3s cubic-bezier(.19,1,.22,1),
box-shadow .3s ease,
border-color .3s ease;
position: relative;
}
.featured-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(76, 44, 146,.05));
pointer-events: none;
opacity: 0;
transition: opacity .3s ease;
}
.featured-card:hover {
transform: translateY(-8px);
box-shadow: var(--elev-3);
border-color: rgba(123, 44, 191,.25);
}
.featured-card:hover::after { opacity: 1; }
.featured-card-img {
aspect-ratio: 4/3;
background: linear-gradient(180deg, #eef3ff 0%, #f6f8fc 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow: hidden;
}
.featured-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.featured-card:hover .featured-card-img img { transform: scale(1.08); }
.featured-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.featured-card-body .subcat {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--brand-500);
}
.featured-card-body h4 { font-size: 1.15rem; color: var(--ink-900); }
.featured-card-body p { font-size: .92rem; color: var(--ink-500); line-height: 1.6; flex: 1; }
.featured-card-body .featured-cta {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--brand-600);
font-weight: 600;
font-size: .92rem;
}
.featured-card-body .featured-cta i { transition: transform .25s ease; }
.featured-card:hover .featured-cta i { transform: translateX(4px); }
/* ---------- 6. TRUST BAR (certifications / standards) ---------- */
.trust-bar {
padding: 60px 0;
background: #fff;
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.trust-bar-inner {
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center;
}
.trust-bar-title {
font-size: .75rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ink-500);
max-width: 180px;
line-height: 1.5;
}
.trust-items {
display: flex;
flex-wrap: wrap;
gap: 18px 32px;
align-items: center;
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: var(--surface-muted);
border: 1px solid var(--hair);
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
color: var(--ink-700);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.trust-item i { color: var(--brand-500); }
.trust-item:hover {
transform: translateY(-2px);
border-color: rgba(123, 44, 191,.35);
box-shadow: var(--elev-1);
}
@media (max-width: 720px) {
.trust-bar-inner { grid-template-columns: 1fr; gap: 20px; }
.trust-bar-title { max-width: none; }
}
/* ---------- 7. CLIENT LOGOS MARQUEE ---------- */
.logos-marquee {
padding: 70px 0;
background: var(--surface-muted);
overflow: hidden;
}
.logos-marquee .section-header { margin-bottom: 36px; }
.logos-track-wrapper {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos-track {
display: inline-flex;
gap: 56px;
padding: 10px 28px;
animation: logo-scroll 38s linear infinite;
will-change: transform;
}
.logos-track:hover { animation-play-state: paused; }
.logo-pill {
flex: 0 0 auto;
height: 64px;
min-width: 160px;
padding: 0 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #fff;
border: 1px solid var(--hair);
border-radius: 16px;
box-shadow: var(--elev-1);
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: -0.01em;
font-size: 1.05rem;
color: var(--ink-700);
transition: transform .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.logo-pill i { color: var(--brand-500); font-size: 1.2rem; }
.logo-pill:hover {
color: var(--brand-600);
transform: translateY(-3px);
border-color: rgba(123, 44, 191,.35);
box-shadow: var(--elev-2);
}
@keyframes logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------- 8. PRODUCT LISTING — Category chips + skeleton ---------- */
.products-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #fff;
border: 1.5px solid var(--hair);
border-radius: 999px;
color: var(--ink-500);
font-size: .88rem;
font-weight: 600;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover {
color: var(--brand-600);
border-color: rgba(123, 44, 191,.45);
}
.chip.active {
color: #fff;
background: var(--g-sheen);
border-color: transparent;
box-shadow: 0 6px 16px -6px rgba(123, 44, 191,.55);
}
.chip i { font-size: .85rem; }
/* Card image zoom for listing */
.product-listing-card { overflow: hidden; transition: transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease; }
.product-listing-card .plc-image img { transition: transform .7s cubic-bezier(.19,1,.22,1); }
.product-listing-card:hover { transform: translateY(-6px); box-shadow: var(--elev-3); }
.product-listing-card:hover .plc-image img { transform: scale(1.08); }
/* Skeleton loader */
.skeleton-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.skel-card {
background: #fff;
border: 1px solid var(--hair);
border-radius: 16px;
overflow: hidden;
padding: 0;
}
.skel {
background: linear-gradient(90deg,#eef1f6 0%,#f6f8fc 50%,#eef1f6 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 6px;
}
.skel-img { aspect-ratio: 4/3; border-radius: 0; }
.skel-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.skel-line { height: 12px; }
.skel-line.w-80 { width: 80%; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-40 { width: 40%; }
.skel-btn { height: 36px; width: 120px; border-radius: 999px; margin-top: 6px; }
@keyframes skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Wider sidebar + smaller label so long category names sit on one line */
.products-layout {
grid-template-columns: minmax(310px, 340px) minmax(0, 1fr) !important;
gap: 28px !important;
}
.sidebar-cat-main {
padding: 11px 10px 11px 12px !important;
gap: 10px !important;
font-size: 0.86rem !important;
}
.sidebar-cat-label {
font-size: 0.86rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
/* Allow the category name to wrap to a second line instead of
being truncated with an ellipsis. Long names like
"Differential pressure (DP-SURE)" and "Flow Measurement
(Flo-SURE)" now display in full. We clamp to 2 lines so the
row height stays predictable; on the rare 3-line name we
fall back to a soft ellipsis on line 3.
`overflow-wrap: anywhere` lets very long single tokens like
"Hyperspectral" break onto the next line if the sidebar is
narrow. */
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.sidebar-cat-meta {
font-size: 0.7rem !important;
}
.sidebar-cat-icon {
width: 30px !important;
height: 30px !important;
border-radius: 9px !important;
font-size: 0.85rem !important;
}
.sidebar-cat-count {
display: inline-flex;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
color: var(--ink-700);
font-weight: 700;
font-size: 0.7rem;
margin-right: 0;
}
.sidebar-cat-main.active {
color: var(--ink-900) !important;
}
/* Sidebar narrows on smaller laptops */
@media (max-width: 1100px) {
.products-layout {
grid-template-columns: minmax(290px, 320px) minmax(0, 1fr) !important;
}
.sidebar-cat-label { font-size: 0.84rem !important; }
}
/* Tablet — narrower 2-col so cards don't crush */
@media (max-width: 1024px) {
.products-layout {
grid-template-columns: minmax(232px, 270px) minmax(0, 1fr) !important;
gap: 24px !important;
}
}
/* Mobile — collapse to single column; sidebar becomes the drawer
defined in products.css. The earlier !important rules above were
leaking into mobile and forcing 2 columns; this restores the
drawer layout at ≤ 768px. */
@media (max-width: 768px) {
.products-layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
.sidebar-subcat-btn {
gap: 10px !important;
padding-left: 12px !important;
}
.sidebar-subcat-btn.sidebar-leaf-btn {
/* Align direct-leaf items (e.g. "Gas Sampling System") with the
regular subcategory buttons; no extra indent. */
padding-left: 12px !important;
}
/* Remove the small dash glyph that products.css adds before
sidebar leaf labels — direct-leaf items now read like normal
subcategories. */
.sidebar-leaf-btn .sidebar-subcat-label::before {
display: none !important;
content: none !important;
}
/* Breadcrumb-style heading on products.html */
.products-section-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink-500);
margin-bottom: 18px;
}
.products-section-heading strong {
color: var(--ink-900);
font-weight: 700;
font-size: 1.05rem;
}
.products-section-heading .crumb a {
color: var(--ink-500);
text-decoration: none;
transition: color .2s ease;
}
.products-section-heading .crumb a:hover {
color: var(--brand-600);
}
.products-section-heading > i {
font-size: 0.7rem;
color: var(--gray-400);
margin: 0 2px;
}
/* Empty state polish */
.products-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 80px 24px;
background: var(--surface-muted);
border: 1px dashed var(--hair);
border-radius: 18px;
color: var(--ink-500);
}
.products-empty i { font-size: 2.2rem; color: var(--brand-500); }
.products-empty h5 { color: var(--ink-900); font-size: 1.1rem; margin: 4px 0 0; }
.products-empty p { max-width: 360px; text-align: center; }
/* ---------- 9. PRODUCT DETAIL — feature highlights + cert strip + skeleton ---------- */
.pd-feature-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap: 18px;
margin: 36px 0 24px;
}
.pd-feature {
padding: 22px 20px;
background: #fff;
border: 1px solid var(--hair);
border-radius: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
box-shadow: var(--elev-1);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pd-feature:hover {
transform: translateY(-3px);
border-color: rgba(123, 44, 191,.25);
box-shadow: var(--elev-2);
}
.pd-feature .pd-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--brand-50);
color: var(--brand-600);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.pd-feature h6 { color: var(--ink-900); font-size: 1rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.pd-feature p { color: var(--ink-500); font-size: .88rem; margin: 0; line-height: 1.55; }
/* Certification strip */
.pd-cert-strip {
margin: 36px 0 16px;
padding: 22px 24px;
background: var(--g-soft);
border: 1px solid var(--hair);
border-radius: 16px;
display: flex;
flex-wrap: wrap;
gap: 14px 28px;
align-items: center;
justify-content: space-between;
}
.pd-cert-label {
font-size: .72rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ink-500);
}
.pd-cert-icons {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
}
.pd-cert-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--hair);
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
color: var(--ink-700);
letter-spacing: .01em;
}
.pd-cert-badge i { color: var(--brand-500); }
/* Split CTA */
.pd-split-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.pd-split-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 520px) { .pd-split-cta { grid-template-columns: 1fr; } }
/* Detail page skeleton (used while JS populates) */
.pd-skel-hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 40px;
padding: 40px 0;
}
.pd-skel-hero .skel-main {
aspect-ratio: 1/1;
border-radius: 18px;
}
.pd-skel-lines { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
@media (max-width: 860px) { .pd-skel-hero { grid-template-columns: 1fr; } }
/* ---------- 10. CTA SECTION — deep gradient accent ---------- */
.cta.section {
background: var(--g-deep);
position: relative;
overflow: hidden;
}
.cta.section::before {
content: '';
position: absolute; inset: -40%;
background: radial-gradient(60% 60% at 30% 40%, rgba(214, 40, 40,.22), transparent 70%),
radial-gradient(55% 55% at 70% 60%, rgba(123, 44, 191,.22), transparent 70%);
pointer-events: none;
}
.cta.section .cta-content { position: relative; }
.cta.section h2 { color: #fff; }
.cta.section p { color: rgba(255,255,255,.82); }
/* ---------- 11. FOOTER — newsletter strip + cert ribbon ---------- */
.footer-newsletter {
padding: 34px 0;
background: linear-gradient(180deg,#0b1220 0%,#0e1a34 100%);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-newsletter .newsletter-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 30px;
align-items: center;
}
.footer-newsletter h4 {
color: #fff;
font-size: 1.25rem;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.footer-newsletter p {
color: rgba(255,255,255,.7);
font-size: .92rem;
margin: 0;
}
.newsletter-form {
display: flex;
gap: 0;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
padding: 6px;
overflow: hidden;
backdrop-filter: blur(4px);
}
.newsletter-form input {
flex: 1;
border: 0;
outline: none;
background: transparent;
color: #fff;
padding: 10px 16px;
font-size: .95rem;
font-family: inherit;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-form button {
border: 0;
background: var(--g-sheen);
color: #fff;
font-weight: 600;
padding: 10px 22px;
border-radius: 999px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: transform .2s ease, box-shadow .2s ease;
}
.newsletter-form button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -8px rgba(123, 44, 191,.65);
}
@media (max-width: 760px) {
.footer-newsletter .newsletter-grid { grid-template-columns: 1fr; }
}
/* Certification ribbon above copyright */
.footer-cert-ribbon {
padding: 18px 0;
border-top: 1px solid rgba(255,255,255,.07);
border-bottom: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.02);
}
.footer-cert-ribbon .ribbon-inner {
display: flex;
flex-wrap: wrap;
gap: 14px 26px;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.72);
font-size: .82rem;
letter-spacing: .02em;
}
.footer-cert-ribbon .ribbon-inner i { color: #e85555; margin-right: 6px; }
/* Richer footer brand + spacing tweak */
.footer-brand p { line-height: 1.75; }
.footer-col h5 { letter-spacing: -0.01em; }
.footer-social a {
transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.footer-social a:hover { transform: translateY(-3px); }
/* ---------- 12. SCROLL REVEAL — addition ---------- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.19,1,.22,1),
transform .7s cubic-bezier(.19,1,.22,1);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
/* No-JS fallback: if scripts are disabled, always show reveal elements */
.no-js .reveal, html.no-js .reveal { opacity: 1; transform: none; }
/* ---------- 13. HERO text micro-reveal (existing uses .slide-anim-*) ---------- */
.hero-badge { backdrop-filter: blur(10px); }
/* ---------- 14. MISC polish ---------- */
.section-header .subtitle {
background: var(--brand-50);
border-color: rgba(123, 44, 191,0.18);
}
/* Page hero (products, solutions, services, about, contact) polish */
.page-hero {
background: var(--g-deep);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute; inset: -40%;
background: radial-gradient(60% 60% at 25% 35%, rgba(214, 40, 40,.2), transparent 70%),
radial-gradient(55% 55% at 75% 65%, rgba(123, 44, 191,.2), transparent 70%);
}
/* Breadcrumb refinement on product detail */
.product-breadcrumb {
border-bottom: 1px solid var(--hair);
}
/* Tabs — active pill indicator */
.product-tabs-nav {
border-bottom: 1px solid var(--hair);
}
.product-tab-btn {
position: relative;
padding: 18px 22px;
font-weight: 600;
color: var(--ink-500);
background: transparent;
border: 0;
cursor: pointer;
transition: color .2s ease;
}
.product-tab-btn.active { color: var(--brand-600); }
.product-tab-btn::after {
content: '';
position: absolute;
left: 20px; right: 20px; bottom: -1px;
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--g-sheen);
transform: scaleX(0);
transform-origin: center;
transition: transform .3s ease;
}
.product-tab-btn.active::after { transform: scaleX(1); }
/* Related products card hover */
.related-card {
transition: transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease;
}
.related-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
/* Scroll top + whatsapp float polish */
.whatsapp-float, .scroll-top {
box-shadow: 0 12px 28px -10px rgba(15,23,42,.35);
}
/* Print-friendly tweak */
@media print {
.header, .footer, .scroll-top, .whatsapp-float, .cta { display: none !important; }
}
/* ==========================================================================
16. MICRO-ANIMATIONS LAYER
Subtle, professional. All animations run on GPU (opacity + transform only).
Durations ≤ 500ms. Easing: standard cubic-bezier(.4,0,.2,1) for UI
interactions, cubic-bezier(.19,1,.22,1) for "slow-out" reveals.
========================================================================== */
/* --- 16.1 PAGE LOAD — whole-document gentle fade-in --------------------
Uses a CSS @keyframes animation that auto-plays on load with
`animation-fill-mode: both`. No JS dependency → body is always
visible at the end of the animation, even if scripts fail. */
body {
animation: primarius-body-fade .4s ease-out both;
}
@keyframes primarius-body-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* --- 16.2 STAGGERED TEXT REVEAL ----------------------------------------
Section headers inside a .reveal container get a slight per-child stagger
so the subtitle → h2 → p cascade reads "in sequence" without being showy. */
.section-header.reveal > * {
opacity: 0;
transform: translateY(10px);
transition: opacity .55s cubic-bezier(.19,1,.22,1),
transform .55s cubic-bezier(.19,1,.22,1);
}
.section-header.reveal.is-visible > * { opacity: 1; transform: none; }
.section-header.reveal.is-visible > *:nth-child(1) { transition-delay: .00s; }
.section-header.reveal.is-visible > *:nth-child(2) { transition-delay: .07s; }
.section-header.reveal.is-visible > *:nth-child(3) { transition-delay: .14s; }
/* Same stagger idea for any container marked .stagger */
.stagger > * {
opacity: 0;
transform: translateY(10px);
transition: opacity .5s cubic-bezier(.19,1,.22,1),
transform .5s cubic-bezier(.19,1,.22,1);
}
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .06s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .12s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .18s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: .24s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: .30s; }
.stagger.is-visible > *:nth-child(n+7) { transition-delay: .36s; }
/* --- 16.3 BUTTON: lift + glow ring ------------------------------------- */
/* Soft coloured glow behind primary buttons, appears on hover. */
.btn-primary {
position: relative;
isolation: isolate;
}
.btn-primary::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 999px;
background: radial-gradient(closest-side, rgba(123, 44, 191,.45), transparent 70%);
opacity: 0;
z-index: -1;
transition: opacity .3s ease;
pointer-events: none;
}
.btn-primary:hover::after { opacity: .9; }
/* Secondary button: subtle inset glow on hover (no colour shift) */
.btn-secondary {
position: relative;
isolation: isolate;
}
.btn-secondary::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 4px rgba(123, 44, 191,.10);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.btn-secondary:hover::after { opacity: 1; }
/* Ghost "white" button on dark CTA */
.btn-outline-white {
transition: transform .25s cubic-bezier(.4,0,.2,1),
background .25s ease,
border-color .25s ease;
}
/* --- 16.4 CARDS: subtle scale + shadow deepen -------------------------- */
.service-card,
.industry-card,
.product-card,
.featured-card,
.product-listing-card,
.related-card,
.testimonial-card {
transition: transform .35s cubic-bezier(.19,1,.22,1),
box-shadow .35s cubic-bezier(.19,1,.22,1),
border-color .25s ease;
will-change: transform;
}
.service-card:hover,
.industry-card:hover,
.testimonial-card:hover {
transform: translateY(-4px) scale(1.008);
}
/* (Product / featured / listing cards already get -6px lift — keep that
primary motion and just gently tighten the scale) */
.product-card:hover,
.featured-card:hover,
.product-listing-card:hover {
transform: translateY(-6px) scale(1.006);
}
/* --- 16.5 IMAGES: zoom on hover (for any wrapped zoom target) ---------- */
.zoom-wrap { overflow: hidden; border-radius: inherit; }
.zoom-wrap img,
.featured-card-img img,
.plc-image img,
.product-image img,
.product-main-image img {
transition: transform .6s cubic-bezier(.19,1,.22,1);
}
/* The featured & listing cards already transform their img on :hover —
add a fallback for any direct .zoom-wrap. */
.zoom-wrap:hover img { transform: scale(1.06); }
/* --- 16.6 PRODUCT GALLERY — crossfade on thumbnail change -------------
The existing JS replaces ![]()
inside #mainImageWrap every click.
Every freshly-inserted img plays this subtle fade/scale-in keyframe. */
@keyframes primarius-img-swap {
from { opacity: 0; transform: scale(.985); }
to { opacity: 1; transform: none; }
}
.product-main-image img {
animation: primarius-img-swap .35s cubic-bezier(.4,0,.2,1) both;
}
/* Thumbnails: active indicator pulse on select */
.product-thumb {
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.product-thumb.active {
animation: primarius-thumb-pop .35s cubic-bezier(.19,1,.22,1) both;
}
@keyframes primarius-thumb-pop {
0% { transform: scale(1); }
55% { transform: scale(1.06); }
100% { transform: scale(1.03); }
}
/* --- 16.7 PRODUCT DETAIL — tab panel fade ------------------------------
The existing products.css toggles display:none / display:block on
.product-tab-panel. When an element changes to display:block AND an
animation is declared, the animation plays. So every time .active is
applied, the panel gently fades + lifts. */
@keyframes primarius-tab-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.product-tab-panel.active {
animation: primarius-tab-in .35s cubic-bezier(.19,1,.22,1) both;
}
/* Active tab button: refined icon shift already there; add tiny x-scale
pulse on change */
@keyframes primarius-tab-btn-pulse {
0% { transform: translateY(0); }
40% { transform: translateY(-1px); }
100% { transform: translateY(0); }
}
.product-tab-btn.active {
animation: primarius-tab-btn-pulse .4s cubic-bezier(.19,1,.22,1) both;
}
/* --- 16.8 NAVBAR — animated underline on hover -----------------------
Underline grows from centre using scaleX (GPU-accelerated).
Fixed 22px width, transform-origin centre, so the bar animates
outward from the middle without invoking layout. */
.nav-menu > a,
.nav-item > a {
position: relative;
}
.nav-menu > a::after,
.nav-item > a::after {
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--g-sheen);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform .28s cubic-bezier(.4,0,.2,1),
opacity .2s ease;
opacity: 0;
pointer-events: none;
}
.nav-menu > a:hover::after,
.nav-item:hover > a::after,
.nav-menu > a.active::after,
.nav-item.active > a::after {
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
.header.scrolled .nav-menu > a::after,
.header.scrolled .nav-item > a::after {
bottom: -4px;
}
/* Suppress underline on the CTA button / mobile hamburger */
.nav-cta a::after,
.nav-menu > .nav-cta::after {
display: none !important;
}
/* --- 16.9 MEGA MENU — smoother entrance --------------------------------
The existing style.css animates opacity + visibility. We add a tiny
translateY so it has a premium "drop-in" feeling. */
.nav-megamenu {
transform: translateY(-8px);
transition: opacity .28s cubic-bezier(.4,0,.2,1),
visibility .28s,
transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-item:hover .nav-megamenu {
transform: translateY(0);
}
/* Inner category flyout (.mega-sub) — slide in from the left with fade */
.mega-sub {
transform: translateX(-6px);
transition: opacity .25s ease, visibility .25s, transform .3s cubic-bezier(.19,1,.22,1);
}
.mega-cat-item:hover .mega-sub {
transform: translateX(0);
}
/* --- 16.10 HEADER — scrolled state transitions smoothly --------------- */
.header {
transition: background .3s ease,
box-shadow .3s ease,
backdrop-filter .3s ease,
padding .3s ease;
}
.logo-img {
transition: transform .3s cubic-bezier(.19,1,.22,1), filter .3s ease;
}
.logo:hover .logo-img {
transform: scale(1.04);
}
/* --- 16.11 LINKS — subtle hover for "Learn more" type links ---------- */
.service-link,
.featured-cta,
.msp-cta {
position: relative;
}
.service-link i,
.featured-cta i,
.msp-cta i {
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.service-link:hover i,
.featured-cta:hover i,
.msp-cta:hover i {
transform: translateX(5px);
}
/* --- 16.12 CHIP / PILL hover lift ------------------------------------- */
.chip,
.trust-item,
.logo-pill,
.pd-cert-badge {
will-change: transform;
}
/* --- 16.13 STATS — counter glow on intersection ----------------------- */
.stat-item {
transition: transform .35s cubic-bezier(.19,1,.22,1);
}
.stat-item:hover {
transform: translateY(-3px);
}
.stat-icon {
transition: transform .4s cubic-bezier(.19,1,.22,1);
}
.stat-item:hover .stat-icon {
transform: scale(1.08) rotate(-4deg);
}
/* --- 16.14 TESTIMONIAL quote breathe ---------------------------------- */
.testimonial-card {
overflow: hidden;
}
.testimonial-card:hover .testimonial-quote {
transform: scale(1.1);
transition: transform .4s cubic-bezier(.19,1,.22,1);
}
/* --- 16.15 FORM inputs focus ring polish ------------------------------ */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
transition: border-color .2s ease, box-shadow .2s ease;
}
/* --- 16.16 BACK TO TOP + WHATSAPP floats — subtle entrance ----------- */
.scroll-top {
transform: translateY(12px) scale(.9);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .3s cubic-bezier(.19,1,.22,1);
}
.scroll-top.visible {
transform: none;
opacity: 1;
pointer-events: auto;
}
.whatsapp-float {
animation: primarius-float-in .5s cubic-bezier(.19,1,.22,1) .8s both;
}
@keyframes primarius-float-in {
from { opacity: 0; transform: translateY(16px) scale(.9); }
to { opacity: 1; transform: none; }
}
/* --- 16.17 HERO slider — restrict vertical motion only -----------------
The existing .slide-anim-* keyframes live in style.css. We keep them
but soften the text-shadow on hover for a refined feel. */
.hero-slider .slide-content h1,
.hero-slider .slide-content p {
will-change: opacity, transform;
}
/* --- 16.18 PERFORMANCE HINTS ------------------------------------------ */
/* The properties below are intentionally NOT animated anywhere:
top, left, right, bottom, width, height, margin, padding, font-size.
All motion uses transform + opacity, which run on the compositor. */
.reveal,
.product-listing-card,
.featured-card,
.featured-card-img img,
.plc-image img,
.nav-megamenu,
.product-main-image img {
backface-visibility: hidden;
}
/* ==========================================================================
17. UI CONSISTENCY LAYER (header / buttons / nav / hero / page-hero)
------------------------------------------------------------------
This section is the canonical source for visual consistency across
every page. Everything below uses the unified token palette defined
at the top of this file (Primary #4c2c92, Secondary #7b2cbf, Accent #d62828).
========================================================================== */
/* --- 17.1 HEADER — two clean states ------------------------------------ */
.header {
background: rgba(15, 23, 42, 0.08); /* very subtle dark tint over the hero */
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: background var(--t-std),
backdrop-filter var(--t-std),
box-shadow var(--t-std),
border-color var(--t-std);
}
.header.scrolled {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
box-shadow: 0 4px 24px rgba(17, 24, 39, 0.08),
0 1px 0 rgba(17, 24, 39, 0.03);
border-bottom-color: rgba(229, 231, 235, 0.8);
}
/* --- 17.2 NAVBAR LINKS — white default, dark on scroll ---------------- */
.header .nav-menu > a,
.header .nav-item > a {
color: rgba(255, 255, 255, 0.92) !important;
background: transparent !important;
transition: color var(--t-std), background var(--t-std) !important;
font-weight: 500;
}
.header .nav-menu > a:hover,
.header .nav-item > a:hover,
.header .nav-menu > a.active,
.header .nav-item.active > a {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08) !important;
}
.header.scrolled .nav-menu > a,
.header.scrolled .nav-item > a {
color: var(--dark) !important;
}
.header.scrolled .nav-menu > a:hover,
.header.scrolled .nav-item > a:hover,
.header.scrolled .nav-menu > a.active,
.header.scrolled .nav-item.active > a {
color: var(--primary) !important;
background: rgba(76, 44, 146, 0.08) !important;
}
/* Nav underline — also reads correctly on both backgrounds */
.header:not(.scrolled) .nav-menu > a::after,
.header:not(.scrolled) .nav-item > a::after {
background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0.6));
}
.header.scrolled .nav-menu > a::after,
.header.scrolled .nav-item > a::after {
background: var(--gradient-primary);
}
/* --- 17.3 CTA BUTTON — gradient + white ALWAYS ------------------------
Bug it fixes: .nav-menu a:hover previously set a translucent white
background and white text on the CTA button, producing white-on-white
on scroll. We override by pinning the gradient in every possible state
with rules that always win specificity. */
.header .nav-cta .btn-primary,
.header .nav-cta .btn-primary:hover,
.header .nav-cta .btn-primary:focus,
.header .nav-cta .btn-primary:active,
.header .nav-cta .btn-primary.active,
.header.scrolled .nav-cta .btn-primary,
.header.scrolled .nav-cta .btn-primary:hover,
.header.scrolled .nav-cta .btn-primary:focus,
.nav-menu .nav-cta .btn-primary,
.nav-menu .nav-cta .btn-primary:hover {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
color: #ffffff !important;
border: none !important;
}
/* Hover: glow + lift, gradient still locked */
.header .nav-cta .btn-primary {
padding: 11px 24px !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
border-radius: 999px !important;
box-shadow: 0 8px 20px -6px rgba(76, 44, 146, 0.45) !important;
transition: transform var(--t-std),
box-shadow var(--t-std),
filter var(--t-std) !important;
}
.header .nav-cta .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -8px rgba(76, 44, 146, 0.6),
0 0 0 6px rgba(123, 44, 191, 0.14) !important;
filter: saturate(1.1);
}
.header .nav-cta .btn-primary i {
color: #ffffff !important;
transition: transform 0.25s ease;
}
.header .nav-cta .btn-primary:hover i {
transform: translateX(3px);
}
/* --- 17.4 LOGO — invert on dark, restore on light --------------------- */
.header .logo-img {
filter: brightness(0) invert(1);
transition: filter var(--t-std);
}
.header.scrolled .logo-img {
filter: none;
}
/* Hamburger colour */
.header .hamburger span {
background: #ffffff;
transition: background var(--t-std);
}
.header.scrolled .hamburger span {
background: var(--dark);
}
/* --- 17.5 HERO SLIDER — layered editorial overlay (left scrim + vignette)
Left-weighted so text stays readable while the right of the image
remains crisp and visible. Soft top/bottom + radial vignette add depth. */
.slide-overlay {
background:
linear-gradient(90deg,
rgba(11, 7, 24, 0.88) 0%,
rgba(11, 7, 24, 0.64) 30%,
rgba(11, 7, 24, 0.30) 56%,
rgba(11, 7, 24, 0.06) 78%,
transparent 100%),
linear-gradient(180deg,
rgba(11, 7, 24, 0.42) 0%,
transparent 26%,
transparent 66%,
rgba(11, 7, 24, 0.58) 100%),
radial-gradient(135% 95% at 80% 40%,
transparent 42%,
rgba(8, 5, 18, 0.50) 100%) !important;
}
.hero-slider .slide h1,
.slide-content h1 {
color: #ffffff !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
font-weight: 800;
letter-spacing: -0.025em;
}
.slide-content p {
color: #e0e0e0 !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.slide-content .hero-badge {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
backdrop-filter: blur(10px);
}
.slide-content .hero-badge i {
color: var(--accent-light) !important;
}
/* --- 17.6 PAGE HERO (inner pages) — same feel as homepage ------------- */
.page-hero {
background: linear-gradient(135deg, #0f0a1f 0%, #371f66 45%, #4c2c92 100%) !important;
padding: 180px 0 90px !important;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.page-hero::after {
content: '';
position: absolute;
inset: -20% -20% auto -20%;
height: 80%;
background: radial-gradient(60% 60% at 25% 35%, rgba(123, 44, 191, 0.28), transparent 70%),
radial-gradient(55% 55% at 75% 55%, rgba(214, 40, 40, 0.22), transparent 70%);
pointer-events: none;
}
.page-hero h1 {
color: #ffffff !important;
font-weight: 800;
letter-spacing: -0.025em;
position: relative;
z-index: 1;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.page-hero h1 .text-gradient {
background: linear-gradient(135deg, #a78bfa 0%, #e85555 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb span {
color: rgba(255, 255, 255, 0.78);
position: relative; z-index: 1;
transition: color var(--t-std);
}
.page-hero .breadcrumb a:hover {
color: #ffffff;
}
/* --- 17.7 PRODUCT DETAIL PAGE HERO — matches products/about/services style
Big gradient name + breadcrumb sits inside the standard .page-hero
so the visual rhythm is identical to every other inner page.
Padding & internal spacing tightened so the overall block height
matches the products.html "Our Products" hero — even though this
hero has an extra tagline paragraph below the h1, the reduced
padding + smaller h1 + tighter margins keep the visual height
roughly equivalent across both pages. */
.product-page-hero {
padding: 140px 0 50px !important;
}
.product-page-hero .breadcrumb {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.72);
position: relative;
z-index: 2;
}
.product-page-hero .breadcrumb a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color var(--t-std);
}
.product-page-hero .breadcrumb a:hover {
color: #ffffff;
}
.product-page-hero .breadcrumb span.current {
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
}
.product-page-hero h1 {
font-size: clamp(1.75rem, 3.8vw, 2.85rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0 auto 6px;
max-width: 920px;
position: relative;
z-index: 2;
}
.product-page-hero h1 .text-gradient-light {
background: linear-gradient(135deg, #c79dde 0%, #a259e0 35%, #ffffff 75%, #ffd8d8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.product-page-tagline {
color: rgba(255, 255, 255, 0.78);
font-size: clamp(0.92rem, 1.2vw, 1.05rem);
line-height: 1.5;
max-width: 720px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Mobile padding shrink so the product detail hero stays in proportion
with the products listing hero on small screens too. */
@media (max-width: 768px) {
.product-page-hero {
padding: 110px 0 40px !important;
}
}
/* Subtle gradient drift across the product hero so it feels alive */
.product-page-hero::before {
background-size: 200% 200%;
animation: page-hero-drift 16s ease-in-out infinite;
}
@keyframes page-hero-drift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Old white .product-breadcrumb was removed from product.html — keep
any orphan rule harmless if it's referenced elsewhere */
.product-breadcrumb { display: none; }
/* --- Product detail — Certification logo badges --------------------
When the product has matching certifications (ATEX, IECEx, ISO,
DNV/Marine, SIL 2, CE, EN 50545), render them as small white
logo cards instead of generic text capsules. */
.product-badges.has-cert-logos {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.product-cert-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 64px;
min-width: 84px;
padding: 8px 18px;
background: #ffffff;
border: 1px solid var(--hair);
border-radius: 14px;
box-shadow: 0 4px 12px rgba(76, 44, 146, 0.08);
transition:
transform 0.25s cubic-bezier(0.19, 1, 0.22, 1),
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.product-cert-badge img {
height: 42px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
.product-cert-badge:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(76, 44, 146, 0.16);
border-color: rgba(123, 44, 191, 0.28);
}
/* --- 17.8 SMOOTH TRANSITIONS — blanket polish ------------------------- */
.header,
.header *:not(svg):not(svg *) {
transition-duration: var(--t-std);
transition-timing-function: ease;
}
.btn {
transition:
transform var(--t-std),
box-shadow var(--t-std),
background-position var(--t-slow),
filter var(--t-std) !important;
}
/* --- 17.9 SECTION HEADER — unified component -------------------------
ONE canonical rule set used by every section on every page.
Layout: centered, max 720px, 48px bottom gap.
Children: pill badge (light + dark variants) → h2 → underline → p.
Dark-context auto-detection on .industries, .cta, .stats sections.
No more per-section overrides. */
.section-header {
text-align: center !important;
margin: 0 auto 48px !important;
max-width: 720px !important;
}
/* Pill badge — also accepts .section-badge alias for forward-compat */
.section-header .subtitle,
.section-header .section-badge {
display: inline-block !important;
margin: 0 0 14px !important;
padding: 6px 18px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
border-radius: 999px !important;
background: rgba(123, 44, 191, 0.10) !important;
color: #7b2cbf !important;
border: 1px solid rgba(123, 44, 191, 0.20) !important;
gap: 0 !important;
line-height: 1.4 !important;
}
/* Remove the legacy flanking dashes that made the pill look uneven */
.section-header .subtitle::before,
.section-header .subtitle::after,
.section-header .section-badge::before,
.section-header .section-badge::after {
display: none !important;
content: none !important;
}
/* Heading — force block so the badge sits on a separate line above */
.section-header h2 {
display: block !important;
font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
margin: 0 0 14px !important;
color: var(--ink-900);
position: relative;
}
.section-header h2 .text-gradient,
.section-header h2 span {
background: linear-gradient(90deg, #7b2cbf, #d62828) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent;
}
/* Gradient under-divider */
.section-header h2::after {
content: '' !important;
display: block !important;
width: 60px !important;
height: 3px !important;
margin: 14px auto 0 !important;
background: linear-gradient(90deg, #7b2cbf, #d62828) !important;
border-radius: 2px !important;
}
/* Description paragraph */
.section-header p {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.7 !important;
color: var(--ink-500);
}
/* ---- DARK-CONTEXT VARIANTS ----
Auto-applies on sections with dark backgrounds. Add .on-dark to a
section-header (or its parent section) for any future dark sections. */
.industries .section-header .subtitle,
.industries .section-header .section-badge,
.cta .section-header .subtitle,
.cta .section-header .section-badge,
.stats .section-header .subtitle,
.stats .section-header .section-badge,
.on-dark .section-header .subtitle,
.section-header.on-dark .subtitle,
.section-header.on-dark .section-badge {
background: rgba(255, 255, 255, 0.10) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
.industries .section-header h2,
.cta .section-header h2,
.stats .section-header h2,
.on-dark .section-header h2,
.section-header.on-dark h2 {
color: #ffffff !important;
}
.industries .section-header p,
.cta .section-header p,
.stats .section-header p,
.on-dark .section-header p,
.section-header.on-dark p {
color: rgba(255, 255, 255, 0.78) !important;
}
.industries .section-header h2 .text-gradient,
.cta .section-header h2 .text-gradient,
.industries .section-header h2 span,
.cta .section-header h2 span,
.on-dark .section-header h2 .text-gradient,
.section-header.on-dark h2 .text-gradient {
background: linear-gradient(90deg, #c79dde 0%, #ffffff 60%, #ffd8d8 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Universal text-gradient utility (used outside section-header too) */
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- 17.10 MOBILE MENU — nav items readable when open ----------------- */
@media (max-width: 1024px) {
.nav-menu.active {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(24px);
}
.nav-menu.active > a,
.nav-menu.active .nav-item > a {
color: var(--dark) !important;
}
.nav-menu.active .nav-cta .btn-primary {
background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
color: #fff !important;
}
}
/* --- 17.12 CERTIFICATION LOGOS SECTION ------------------------------
Replaces the old text-based trust bar with floating logo cards.
Soft glassmorphism, gradient glow background, staggered float
animation. Pure CSS — no JS required. */
.cert-logos {
position: relative;
padding: 90px 0;
background: var(--g-soft);
overflow: hidden;
}
.cert-logos-bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(40% 50% at 18% 30%, rgba(76, 44, 146, 0.12), transparent 70%),
radial-gradient(35% 45% at 82% 70%, rgba(214, 40, 40, 0.10), transparent 70%),
radial-gradient(50% 60% at 50% 50%, rgba(123, 44, 191, 0.08), transparent 70%);
z-index: 0;
}
.cert-logos > .container {
position: relative;
z-index: 1;
}
.cert-logos-header {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.cert-logos-header h2 {
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: 12px;
color: var(--ink-900);
}
.cert-logos-header p {
color: var(--ink-500);
font-size: 1rem;
line-height: 1.65;
margin: 0;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 22px;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.cert-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
.cert-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
.cert-grid { grid-template-columns: repeat(2, 1fr); }
}
.cert-card {
position: relative;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
animation: cert-float 4.4s ease-in-out infinite;
will-change: transform;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cert-card img {
max-width: 100%;
max-height: 50px;
width: auto;
height: auto;
object-fit: contain;
display: block;
filter: saturate(1.05);
}
/* Staggered animation delays */
.cert-card:nth-child(1) { animation-delay: 0.0s; }
.cert-card:nth-child(2) { animation-delay: 0.2s; }
.cert-card:nth-child(3) { animation-delay: 0.4s; }
.cert-card:nth-child(4) { animation-delay: 0.6s; }
.cert-card:nth-child(5) { animation-delay: 0.8s; }
.cert-card:nth-child(6) { animation-delay: 1.0s; }
.cert-card:nth-child(7) { animation-delay: 1.2s; }
@keyframes cert-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Hover — lift + scale + stronger shadow + brand glow */
.cert-card:hover {
transform: translateY(-6px) scale(1.05);
box-shadow:
0 18px 40px rgba(76, 44, 146, 0.18),
0 8px 24px rgba(214, 40, 40, 0.10);
border-color: rgba(123, 44, 191, 0.18);
animation-play-state: paused;
}
/* Subtle gradient ring on hover */
.cert-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #4c2c92, #7b2cbf, #d62828);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.cert-card:hover::after { opacity: 0.6; }
/* Reduced-motion respect already covered globally,
but explicitly stop the float keyframe */
@media (prefers-reduced-motion: reduce) {
.cert-card { animation: none !important; transform: none !important; }
}
/* --- 17.13 HOMEPAGE PRODUCT-CARD IMAGES (categorised showcase) ------
The "Our Products" section now displays real product photos for each
of the 3 main categories. The .product-image wrapper has height 220px
from style.css; the image needs object-fit + soft gradient backdrop. */
.products-grid .product-image {
background: linear-gradient(160deg, #f4edfb 0%, #ffffff 60%, #fef0f0 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.products-grid .product-image > img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
filter: drop-shadow(0 6px 14px rgba(76, 44, 146, 0.18));
}
.products-grid .product-card:hover .product-image > img {
transform: scale(1.06);
}
/* --- 17.11 FOOTER colours — align with new brand -------------------- */
.footer-newsletter button,
.newsletter-form button {
background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}
/* ==========================================================================
18. 3D + INTERACTIVE LAYER (hero parallax, tilt cards, depth buttons)
------------------------------------------------------------------
Pure CSS + vanilla JS in interactive.js. No Three.js, no GSAP.
All motion uses transform + opacity (GPU). RAF-throttled in JS.
Disabled entirely under prefers-reduced-motion.
========================================================================== */
/* --- 18.1 HERO 3D STAGE — floating orbs + wireframe ring -------------- */
.hero-3d-stage {
position: absolute;
inset: 0;
pointer-events: none;
perspective: 1200px;
perspective-origin: 50% 50%;
z-index: 1; /* above bg image, below .slide-overlay */
overflow: hidden;
}
/* parallax wrapper (translates with mouse) — animation lives on child */
.parallax-layer {
position: absolute;
inset: 0;
transform: translate3d(
calc(var(--px, 0) * 1px),
calc(var(--py, 0) * 1px),
0
);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
/* floating orbs — soft glowing radials */
.float-orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.7;
mix-blend-mode: screen;
animation: orb-float var(--orb-d, 18s) ease-in-out infinite;
animation-delay: var(--orb-delay, 0s);
will-change: transform;
}
.orb-purple {
width: 420px; height: 420px;
top: 12%; left: 6%;
background: radial-gradient(circle, rgba(123, 44, 191, 0.65), transparent 65%);
--orb-d: 16s;
--orb-delay: -3s;
}
.orb-deep {
width: 360px; height: 360px;
top: 35%; right: 8%;
background: radial-gradient(circle, rgba(76, 44, 146, 0.55), transparent 65%);
--orb-d: 22s;
--orb-delay: -8s;
}
.orb-red {
width: 300px; height: 300px;
bottom: 8%; left: 38%;
background: radial-gradient(circle, rgba(214, 40, 40, 0.45), transparent 65%);
--orb-d: 14s;
--orb-delay: -2s;
}
@keyframes orb-float {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(20px, -32px, 0) scale(1.06); }
66% { transform: translate3d(-22px, 18px, 0) scale(0.95); }
}
/* wireframe ring — simple 3D rotation */
.float-ring {
position: absolute;
width: 240px; height: 240px;
top: 24%; right: 22%;
border: 1.5px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
animation: ring-spin 28s linear infinite;
transform-style: preserve-3d;
will-change: transform;
}
.float-ring::before,
.float-ring::after {
content: '';
position: absolute;
inset: 12px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.10);
}
.float-ring::after { inset: 30px; border-color: rgba(255, 255, 255, 0.07); }
@keyframes ring-spin {
0% { transform: rotateY(0deg) rotateX(28deg) rotateZ(0deg); }
100% { transform: rotateY(360deg) rotateX(28deg) rotateZ(360deg); }
}
/* small floating particles (4 dots) — subtle ambient motion */
.float-dot {
position: absolute;
width: 4px; height: 4px;
background: rgba(255, 255, 255, 0.55);
border-radius: 50%;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
animation: dot-drift var(--dot-d, 12s) ease-in-out infinite;
animation-delay: var(--dot-delay, 0s);
will-change: transform, opacity;
}
.dot-1 { top: 18%; left: 22%; --dot-d: 11s; --dot-delay: -1s; }
.dot-2 { top: 65%; left: 70%; --dot-d: 14s; --dot-delay: -5s; }
.dot-3 { top: 40%; left: 55%; --dot-d: 9s; --dot-delay: -3s; }
.dot-4 { top: 80%; left: 18%; --dot-d: 13s; --dot-delay: -7s; }
@keyframes dot-drift {
0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.4; }
50% { transform: translate3d(40px, -50px, 0); opacity: 1; }
}
/* Inner-page hero (page-hero) — same stage but smaller orbs */
.page-hero .hero-3d-stage { z-index: 0; }
/* Slide content sits above the stage */
.hero-slider .slide-content,
.page-hero > .container,
.page-hero > h1,
.page-hero > .breadcrumb {
position: relative;
z-index: 3;
}
/* Make sure the slide-overlay is between orbs (z=1) and content (z=3) */
.slide-overlay {
z-index: 2;
}
/* --- 18.2 3D TILT — cards respond to cursor --------------------------- */
/* Cards declare their own perspective; --rx and --ry are set by JS on mousemove */
.tilt {
--rx: 0deg;
--ry: 0deg;
--tilt-lift: 0px;
transform-style: preserve-3d;
transform: perspective(1000px)
rotateX(var(--rx))
rotateY(var(--ry))
translateZ(var(--tilt-lift));
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1);
will-change: transform;
}
/* Active state during mousemove — JS adds .tilt-active */
.tilt.tilt-active {
transition: transform 0.08s linear,
box-shadow 0.3s ease;
--tilt-lift: 8px;
}
/* Sheen overlay that follows the cursor — uses --mx/--my from JS */
.tilt::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.18),
transparent 45%
);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 2;
mix-blend-mode: overlay;
}
.tilt.tilt-active::before { opacity: 1; }
/* Inner content gets a small "lift" via transform: translateZ for true 3D */
.tilt > * { transform: translateZ(0); }
.tilt-pop { transform: translateZ(20px); }
/* Apply tilt to the existing card classes (JS auto-attaches but CSS makes
them ready in case JS is delayed) */
.featured-card,
.product-listing-card,
.service-card,
.industry-card,
.testimonial-card,
.related-card,
.value-card,
.solution-block-visual {
position: relative;
}
/* --- 18.3 BUTTON DEPTH — refined 3D feel ------------------------------ */
.btn-primary,
.btn-secondary {
transform-style: preserve-3d;
position: relative;
}
/* Inner highlight (top edge) — gives depth */
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 35%);
pointer-events: none;
opacity: 0.6;
transition: opacity 0.3s ease;
}
.btn-primary:hover::before { opacity: 1; }
/* Active press state */
.btn-primary:active,
.btn-secondary:active {
transform: translateY(0) scale(0.985);
transition-duration: 0.08s;
}
/* --- 18.4 ICON TILT — feature/service icons gently follow cards ------ */
.tilt:hover .pd-icon,
.tilt:hover .service-icon,
.tilt:hover .industry-icon,
.tilt:hover .featured-card-img img {
transform: translateZ(15px);
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
/* --- 18.5 SCROLL REVEAL — smoother slide-in --------------------------- */
/* Reuses existing .reveal class — just polishes the curve */
.reveal {
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- 18.6 HOVER GLOW for CTA buttons in hero -------------------------- */
.hero-buttons .btn-primary {
position: relative;
}
.hero-buttons .btn-primary::after {
content: '';
position: absolute;
inset: -8px;
border-radius: inherit;
background: radial-gradient(closest-side, rgba(123, 44, 191, 0.4), transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
pointer-events: none;
filter: blur(12px);
}
.hero-buttons .btn-primary:hover::after { opacity: 1; }
/* --- 18.7 PERFORMANCE GUARDS ------------------------------------------ */
/* Disable heavy effects on small screens for battery / scroll perf */
@media (max-width: 768px) {
.float-orb { filter: blur(28px); transform: scale(0.7); }
.float-ring { display: none; }
.float-dot { display: none; }
.tilt { transform: none !important; }
.tilt::before { display: none; }
}
/* ---------- 15. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
body { opacity: 1 !important; }
.reveal, .stagger > *, .section-header.reveal > * {
opacity: 1 !important;
transform: none !important;
}
.logos-track { animation: none; }
/* Disable 3D entirely */
.float-orb, .float-ring, .float-dot { display: none !important; }
.tilt { transform: none !important; }
.tilt::before { display: none !important; }
.parallax-layer { transform: none !important; }
}
/* ============================================================
§18 CLIENT MODS — Solutions brand tagline
Brand attribution line under each Solutions item heading.
============================================================ */
.solution-item h5 {
margin-bottom: 2px;
}
.solution-item-tagline {
display: block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.35;
color: var(--primary-light);
margin: 0 0 8px;
}
/* ============================================================
§18.1 CLIENT MODS — Brand logo row (static, 5 brands)
Replaces the scrolling pill marquee. Real logos in
images/brandLogo/. Greyscale at rest, full colour on hover.
============================================================ */
.brand-logos-row {
display: flex;
/* `nowrap` keeps all 6 brand logos on a single line on tablet
and desktop. If the viewport is too narrow for 6 cards, the
row becomes horizontally scrollable (overflow-x: auto below).
On mobile (< 600px) the media query at the bottom flips this
back to `wrap` so the cards stack naturally on phones. */
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 18px;
margin-top: 14px;
/* Allow horizontal scroll as a safety net if a narrow laptop /
tablet still can't fit all 6 cards inline. Most desktops fit
them easily at the new tightened sizes below. */
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 4px;
}
.brand-logo-card {
/* Tighter sizing so 6 cards (Prosense, Optosky, TÜV SÜD, YZ
Systems, Siemens, MZD) fit on a single row at typical desktop
widths (≥ 1100 px). Was 200/150/230 × 110 with 22 × 28 padding. */
flex: 0 0 160px;
min-width: 140px;
max-width: 180px;
height: 92px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--hair);
border-radius: 14px;
box-shadow: var(--elev-1);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.brand-logo-card img {
max-width: 100%;
max-height: 50px;
width: auto;
height: auto;
object-fit: contain;
opacity: .95;
transition: opacity .3s ease, transform .3s ease;
}
.brand-logo-card:hover {
transform: translateY(-4px);
border-color: rgba(123, 44, 191, .35);
box-shadow: var(--elev-2);
}
.brand-logo-card:hover img {
opacity: 1;
transform: scale(1.04);
}
/* Tablet — slightly tighter so 6 still fit at ~ 768-1024 px viewports */
@media (max-width: 1024px) {
.brand-logos-row { gap: 14px; }
.brand-logo-card {
flex-basis: 140px;
min-width: 120px;
max-width: 160px;
height: 82px;
padding: 12px 14px;
}
.brand-logo-card img { max-height: 44px; }
}
/* Mobile — drop back to wrapping so cards stack instead of forcing a
horizontal scroll. Restore the original mobile sizing. */
@media (max-width: 600px) {
.brand-logos-row {
flex-wrap: wrap;
gap: 16px;
overflow-x: visible;
}
.brand-logo-card {
flex: 0 1 140px;
min-width: 130px;
max-width: 160px;
height: 92px;
padding: 16px 18px;
}
.brand-logo-card img { max-height: 50px; }
}
/* ============================================================
§18.2 CLIENT MODS — About section without left picture
Homepage "Your Trusted Technology Partner" goes full-width
after the Company Photo block was removed. Scoped via
--solo modifier so about.html stays a 2-col layout.
============================================================ */
.about-grid--solo {
grid-template-columns: 1fr;
gap: 0;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.about-grid--solo .about-content > p {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.about-grid--solo .about-features {
justify-content: center;
}
.about-grid--solo .about-content > .btn {
margin-top: 8px;
}
/* ============================================================
§19 HERO SLIDER — EDITORIAL TYPOGRAPHY & LAYOUT
Visual presentation only. Content unchanged.
Goal: cinematic, spacious, premium, readable, industrial.
============================================================ */
/* 19.1 Content column — align to the site grid, vertically centered.
Widen the wrapper to the container width so the text column starts
at the same left gutter as every other section, then constrain the
text blocks themselves for an elegant editorial measure. */
.hero-slider .slide-content {
max-width: 1280px;
isolation: isolate;
align-items: flex-start;
row-gap: 0;
padding-top: 124px;
padding-bottom: 100px;
}
/* 19.2 Localized soft-blur panel behind the text only.
Full-bleed to the viewport's left edge, fades out to the right via
a mask so the rest of the image stays crisp. Sits above the overlay
(z-index 3 stacking context) but behind the text (z-index -1). */
.hero-slider .slide-content::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: calc(-50vw + 50%);
width: calc(50vw - 50% + 760px);
background: linear-gradient(90deg,
rgba(9, 6, 20, 0.40) 0%,
rgba(9, 6, 20, 0.22) 52%,
rgba(9, 6, 20, 0.04) 82%,
transparent 100%);
-webkit-backdrop-filter: blur(3px) saturate(106%);
backdrop-filter: blur(3px) saturate(106%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 92%);
mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 92%);
pointer-events: none;
}
/* 19.3 Badge — a touch more breathing room below it */
.hero-slider .slide-content .hero-badge {
margin-bottom: 22px;
}
/* 19.4 Accent line rhythm */
.hero-slider .slide-content .slide-accent-line {
margin-bottom: 24px;
}
/* 19.5 Heading — balanced multiline, controlled measure, elegant rhythm.
Reduced max-width + balanced wrapping turns long headings into a
structured stack of lines instead of a wide paragraph. */
.hero-slider .slide-content h1 {
max-width: 22ch;
font-size: clamp(2.05rem, 1rem + 2.75vw, 3.05rem) !important;
line-height: 1.22 !important;
letter-spacing: -0.02em !important;
margin-bottom: 22px !important;
text-wrap: balance;
overflow-wrap: break-word;
}
/* 19.6 Description — comfortable measure, slightly brighter for contrast */
.hero-slider .slide-content p {
max-width: 54ch !important;
font-size: clamp(1rem, 0.94rem + 0.35vw, 1.12rem) !important;
line-height: 1.75 !important;
color: rgba(238, 238, 245, 0.9) !important;
margin-bottom: 36px !important;
text-wrap: pretty;
}
/* 19.7 Buttons — keep compact & left-aligned regardless of heading length */
.hero-slider .slide-content .hero-buttons {
align-self: flex-start;
align-items: center;
gap: 14px;
}
/* ---- 19.8 TABLET (≤ 992px) ---- */
@media (max-width: 992px) {
.hero-slider .slide-content {
padding-top: 112px;
padding-bottom: 88px;
}
.hero-slider .slide-content h1 {
max-width: 24ch;
font-size: clamp(1.9rem, 1.1rem + 3vw, 2.5rem) !important;
line-height: 1.24 !important;
}
.hero-slider .slide-content p {
max-width: 60ch !important;
}
.hero-slider .slide-content::before {
width: calc(50vw - 50% + 620px);
}
}
/* ---- 19.9 MOBILE (≤ 768px) ---- */
@media (max-width: 768px) {
.hero-slider .slide-content {
max-width: 100%;
padding-top: 116px;
padding-bottom: 92px;
}
.hero-slider .slide-content h1 {
max-width: 100% !important;
font-size: clamp(1.55rem, 1rem + 4.2vw, 2.1rem) !important;
line-height: 1.26 !important;
margin-bottom: 18px !important;
}
.hero-slider .slide-content p {
max-width: 100% !important;
font-size: 0.98rem !important;
line-height: 1.68 !important;
margin-bottom: 26px !important;
}
/* Drop the localized blur on mobile (perf); keep a light scrim */
.hero-slider .slide-content::before {
-webkit-backdrop-filter: none;
backdrop-filter: none;
left: calc(-50vw + 50%);
width: 100vw;
background: linear-gradient(90deg,
rgba(9, 6, 20, 0.34) 0%,
rgba(9, 6, 20, 0.12) 70%,
transparent 100%);
}
}
/* ---- 19.10 SMALL MOBILE (≤ 480px) ---- */
@media (max-width: 480px) {
.hero-slider .slide-content h1 {
font-size: clamp(1.45rem, 1rem + 4.8vw, 1.85rem) !important;
}
.hero-slider .slide-content p {
font-size: 0.92rem !important;
}
}
/* ---- 19.11 Respect reduced-motion: no localized blur repaint cost ---- */
@media (prefers-reduced-motion: reduce) {
.hero-slider .slide-content::before {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* §18.3 About section visual — image sizing inside wrapper
Restored picture column on homepage now uses a real photo. */
.about-image-wrapper img {
display: block;
width: 100%;
height: 500px;
object-fit: cover;
border-radius: var(--radius-xl);
}
@media (max-width: 768px) {
.about-image-wrapper img { height: 360px; }
}
/* ============================================================
§20 Services page — labeled bullet variant
For service-detailed-card lists whose items are
"Label: description text". Aligns the check
icon to the first text line and gives the label visual weight.
============================================================ */
.service-detailed-card ul.service-detailed-list--labeled {
gap: 14px;
}
.service-detailed-card ul.service-detailed-list--labeled li {
align-items: flex-start;
gap: 12px;
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-600, var(--gray-600));
}
.service-detailed-card ul.service-detailed-list--labeled li > i {
margin-top: 7px;
flex: 0 0 auto;
}
.service-detailed-card ul.service-detailed-list--labeled li strong {
color: var(--ink-900, var(--dark));
font-weight: 700;
margin-right: 4px;
}
.service-detailed-card ul.service-detailed-list--labeled li span {
display: block;
}
/* §20.1 Fix bullet alignment in service-detailed-card lists
Base style aligns the tick to the vertical center of the li,
so on multi-line bullets the icon floats between lines instead
of sitting at the first line. Top-align with a small offset
to baseline-match the first text line. Applies to every
service-detailed-card , both plain and --labeled. */
.service-detailed-card ul li {
align-items: flex-start !important;
line-height: 1.55;
}
.service-detailed-card ul li > i {
margin-top: 6px;
flex: 0 0 auto;
}
/* §21 About page — sub-headings inside the intro block
"Our Legacy & Footprint" and "Our Value Proposition" labels. */
.about-content .about-subhead {
margin: 28px 0 10px;
font-size: 1.1rem;
font-weight: 700;
color: var(--primary, var(--ink-900));
letter-spacing: -0.005em;
}
.about-content .about-subhead:first-of-type {
margin-top: 22px;
}
/* ============================================================
§22 RESPONSIVE SAFETY NET
Cross-cutting fixes to prevent horizontal overflow, keep
sections proportionate on ultra-wide Mac displays, and tighten
spacing on small screens. Targeted, non-invasive.
============================================================ */
/* 22.1 Prevent any element from causing horizontal overflow */
html { overflow-x: hidden; }
body { max-width: 100vw; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
/* 22.2 Container behaves consistently — capped centred page width
stops content from feeling oversized on 27" Mac displays. */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* 22.3 Section padding scales down on small screens */
@media (max-width: 768px) {
.section { padding: 56px 0 !important; }
.section-sm { padding: 40px 0 !important; }
.container { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (max-width: 480px) {
.section { padding: 44px 0 !important; }
}
/* 22.4 Section headings — slightly tighter on mobile */
@media (max-width: 768px) {
.section-header h2 {
font-size: clamp(1.55rem, 1rem + 4.5vw, 2rem) !important;
line-height: 1.2 !important;
}
.section-header p {
font-size: 0.95rem !important;
line-height: 1.6 !important;
}
}
/* 22.5 Page hero — shorter on mobile so it doesn't dominate */
@media (max-width: 768px) {
.page-hero {
min-height: 240px !important;
padding: 90px 0 36px !important;
}
.page-hero h1 {
font-size: clamp(1.7rem, 1rem + 5vw, 2.4rem) !important;
}
}
/* 22.6 Product cards — full-width on small phones */
@media (max-width: 480px) {
.featured-track { gap: 16px !important; }
}
/* 22.7 Cap base font on ultra-wide so things don't feel oversized */
@media (min-width: 1800px) {
html { font-size: 16px; }
.container { max-width: 1320px; }
}
/* 22.8 Brand logo strip — fewer per row on small screens, wraps gracefully */
@media (max-width: 768px) {
.brand-logos-row { gap: 14px !important; }
.brand-logo-card { flex-basis: calc(50% - 7px) !important; height: 88px !important; }
}
/* 22.9 Solutions grid — single column on tablets and below */
@media (max-width: 992px) {
.solutions-grid {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
.solutions-image-wrapper img { height: 360px !important; }
}
/* 22.10 About grid — single column on tablets too (image stacks above text) */
@media (max-width: 992px) {
.about-grid {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
}
/* 22.11 Services grid — 2 cols on tablet, 1 on mobile */
@media (max-width: 992px) {
.services-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.services-grid {
grid-template-columns: 1fr !important;
}
}
/* 22.12 Industries grid — adapt */
@media (max-width: 992px) {
.industries-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.industries-grid {
grid-template-columns: 1fr !important;
}
}
/* 22.13 Cert logos grid — single row scroll or wrap on mobile */
@media (max-width: 480px) {
.cert-logos-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
}
}
/* 22.14 Footer grid — collapse cleanly on small screens */
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
text-align: left !important;
}
}
/* 22.15 Tables that may appear in product descriptions wrap on mobile */
@media (max-width: 600px) {
.product-description table { font-size: 0.85rem; }
.product-description table th,
.product-description table td { padding: 8px !important; }
}
/* 22.16 Touch targets — ensure tappable size on mobile (Apple HIG ≥ 44px) */
@media (max-width: 768px) {
.btn,
.btn-primary,
.btn-outline-white,
.featured-cta,
.service-link,
.navbar .nav-link,
.slider-btn { min-height: 44px; }
}
/* 22.17 Safari / iOS — fix the 100vh bug for hero on mobile */
@media (max-width: 768px) {
.hero-slider { height: 100svh; min-height: 540px; }
}
/* ============================================================
§23 ABOUT — PRIMARIUS ECOSYSTEM SECTION
New section on about.html between intro and Mission & Vision.
============================================================ */
.ecosystem-section {
position: relative;
background:
radial-gradient(120% 80% at 80% 0%, rgba(123, 44, 191, 0.05), transparent 60%),
radial-gradient(80% 60% at 0% 100%, rgba(214, 40, 40, 0.04), transparent 65%),
#fff;
}
.ecosystem-section .section-header {
max-width: 880px;
margin: 0 auto 40px;
text-align: center;
}
.ecosystem-section .section-header p {
font-size: 1rem;
line-height: 1.75;
color: var(--ink-600, var(--gray-600));
}
.ecosystem-section .section-header p + p {
margin-top: 14px;
}
/* The mid-section "Precision Without Compromise" block */
.ecosystem-block {
max-width: 880px;
margin: 0 auto 36px;
text-align: center;
padding: 0 12px;
}
.ecosystem-block h3 {
font-size: clamp(1.25rem, 0.9rem + 1vw, 1.55rem);
font-weight: 700;
color: var(--ink-900, var(--dark));
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.ecosystem-block p {
font-size: 1rem;
line-height: 1.75;
color: var(--ink-600, var(--gray-600));
}
/* The three brand pillars */
.ecosystem-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 56px;
}
.ecosystem-pillar {
position: relative;
background: #fff;
border: 1px solid var(--hair, rgba(148, 163, 184, 0.18));
border-radius: 18px;
padding: 32px 26px 28px;
box-shadow: var(--elev-1, 0 12px 32px rgba(15, 23, 42, 0.06));
transition: transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease, border-color .3s ease;
}
.ecosystem-pillar:hover {
transform: translateY(-4px);
border-color: rgba(123, 44, 191, 0.28);
box-shadow: var(--elev-2, 0 22px 48px rgba(15, 23, 42, 0.1));
}
.ecosystem-pillar-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.02em;
color: #fff;
background: linear-gradient(135deg, #4c2c92 0%, #7b2cbf 55%, #d62828 100%);
box-shadow: 0 10px 24px rgba(76, 44, 146, 0.28);
margin-bottom: 18px;
}
.ecosystem-pillar h4 {
font-size: 1.15rem;
font-weight: 700;
color: var(--ink-900, var(--dark));
letter-spacing: -0.01em;
margin-bottom: 10px;
}
.ecosystem-pillar p {
font-size: 0.94rem;
line-height: 1.7;
color: var(--ink-600, var(--gray-600));
margin: 0;
}
.ecosystem-pillar p + p,
.ecosystem-pillar p + ul {
margin-top: 12px;
}
.ecosystem-pillar strong {
color: var(--primary, #4c2c92);
font-weight: 700;
}
.ecosystem-pillar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ecosystem-pillar-list li {
position: relative;
padding-left: 18px;
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-600, var(--gray-600));
}
.ecosystem-pillar-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, #7b2cbf, #d62828);
}
.ecosystem-pillar-list strong {
color: var(--ink-900, var(--dark));
}
/* The Future / LoRaWAN block */
.ecosystem-future {
max-width: 920px;
margin: 0 auto;
padding: 36px 32px;
background: #fff;
border: 1px solid var(--hair, rgba(148, 163, 184, 0.18));
border-radius: 22px;
box-shadow: var(--elev-1, 0 14px 36px rgba(15, 23, 42, 0.06));
}
.ecosystem-future h3 {
font-size: clamp(1.25rem, 0.9rem + 1vw, 1.55rem);
font-weight: 700;
color: var(--ink-900, var(--dark));
letter-spacing: -0.01em;
margin-bottom: 14px;
}
.ecosystem-future p {
font-size: 0.98rem;
line-height: 1.75;
color: var(--ink-600, var(--gray-600));
}
.ecosystem-future p + p {
margin-top: 12px;
}
.ecosystem-future strong {
color: var(--ink-900, var(--dark));
}
.ecosystem-future-list {
list-style: none;
margin: 16px 0 18px;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.ecosystem-future-list li {
position: relative;
padding: 14px 16px 14px 38px;
background: rgba(123, 44, 191, 0.05);
border: 1px solid rgba(123, 44, 191, 0.12);
border-radius: 12px;
font-size: 0.9rem;
line-height: 1.55;
color: var(--ink-700, var(--gray-700));
}
.ecosystem-future-list li::before {
content: "✓";
position: absolute;
left: 14px;
top: 13px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #7b2cbf, #d62828);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
}
.ecosystem-future-list li strong {
display: block;
margin-bottom: 2px;
color: var(--primary, #4c2c92);
}
.ecosystem-vision {
margin-top: 14px !important;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(76, 44, 146, 0.08), rgba(214, 40, 40, 0.05));
border-left: 3px solid var(--accent, #d62828);
border-radius: 10px;
font-size: 1rem !important;
line-height: 1.7 !important;
color: var(--ink-800, var(--dark)) !important;
}
.ecosystem-vision strong {
color: var(--primary, #4c2c92);
}
/* Responsive */
@media (max-width: 992px) {
.ecosystem-pillars { grid-template-columns: repeat(2, 1fr); }
.ecosystem-future-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.ecosystem-pillars { grid-template-columns: 1fr; gap: 18px; }
.ecosystem-future-list { grid-template-columns: 1fr; }
.ecosystem-future { padding: 28px 22px; }
.ecosystem-pillar { padding: 26px 22px 24px; }
}
/* §23.1 Ecosystem section — featured banner image */
.ecosystem-banner {
max-width: 980px;
margin: 4px auto 36px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
border: 1px solid var(--hair, rgba(148, 163, 184, 0.18));
}
.ecosystem-banner img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
@media (max-width: 600px) {
.ecosystem-banner { border-radius: 16px; margin-bottom: 28px; }
.ecosystem-banner img { aspect-ratio: 4 / 3; }
}
/* ============================================================
§24 PAGE HERO — COMPACT
Brings the inner-page banner (products / services / about /
contact / solutions) down from ~270px to ~180px total so
the visible portion below the fixed header is around 100px.
Product detail keeps its larger custom hero via its own class.
============================================================ */
.page-hero:not(.product-page-hero) {
padding: 110px 0 64px !important;
min-height: 0 !important;
}
.page-hero:not(.product-page-hero) h1 {
font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem) !important;
margin-bottom: 8px !important;
line-height: 1.2 !important;
}
.page-hero:not(.product-page-hero) .breadcrumb {
font-size: 0.85rem !important;
margin: 0 !important;
}
/* Soften the large radial vignette so a shorter banner doesn't
feel crowded by the glow. */
.page-hero:not(.product-page-hero)::after {
height: 60% !important;
inset: -10% -20% auto -20% !important;
}
@media (max-width: 768px) {
.page-hero:not(.product-page-hero) {
padding: 100px 0 50px !important;
min-height: 0 !important;
}
.page-hero:not(.product-page-hero) h1 {
font-size: clamp(1.35rem, 1rem + 3vw, 1.75rem) !important;
}
}
/* ============================================================
§25 CALL FLOAT BUTTON
Phone-call shortcut stacked above the WhatsApp button.
Brand-purple gradient to differentiate from green WhatsApp.
============================================================ */
.call-float {
position: fixed;
bottom: 100px; /* sits above .whatsapp-float (which is at 30px) */
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #4c2c92 0%, #7b2cbf 55%, #d62828 100%);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
text-decoration: none;
box-shadow: 0 6px 22px rgba(76, 44, 146, 0.42);
z-index: 999;
transition: transform .25s ease, box-shadow .25s ease;
animation: callPulse 2.6s infinite;
}
.call-float:hover,
.call-float:focus-visible {
transform: scale(1.1);
color: #ffffff;
box-shadow: 0 10px 32px rgba(76, 44, 146, 0.6);
outline: none;
}
.call-float i { transform: rotate(8deg); }
@keyframes callPulse {
0% { box-shadow: 0 6px 22px rgba(76, 44, 146, 0.42); }
50% { box-shadow: 0 6px 30px rgba(76, 44, 146, 0.6), 0 0 0 10px rgba(123, 44, 191, 0.12); }
100% { box-shadow: 0 6px 22px rgba(76, 44, 146, 0.42); }
}
@media print {
.call-float { display: none !important; }
}
@media (max-width: 600px) {
.call-float { bottom: 90px; right: 20px; width: 54px; height: 54px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
.call-float { animation: none; }
}
/* §25.1 Restack the floating buttons so they don't overlap.
Order from bottom up: WhatsApp (30) → Call (100) → Scroll-top (170). */
.scroll-top {
bottom: 170px !important;
}
@media (max-width: 600px) {
.scroll-top { bottom: 154px !important; }
}
/* §25.2 Call-float hover tooltip (desktop) + clipboard toast
Gives the call button visible feedback when tel: doesn't open
anything (common on desktop Chrome without a calling app). */
.call-float::after {
content: "+91 6353 335158";
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background: rgba(15, 10, 31, 0.94);
color: #fff;
padding: 8px 14px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.01em;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
box-shadow: 0 8px 20px rgba(15, 10, 31, 0.4);
}
.call-float:hover::after,
.call-float:focus-visible::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* Hide hover tooltip on touch devices (where hover ≠ intent) */
@media (hover: none) {
.call-float::after { display: none; }
}
.call-toast {
position: fixed;
bottom: 100px;
right: 110px;
padding: 12px 18px;
background: #1a1030;
color: #fff;
border-radius: 14px;
box-shadow: 0 22px 44px rgba(15, 10, 31, 0.4);
font-size: 0.88rem;
line-height: 1.4;
display: flex;
align-items: center;
gap: 12px;
z-index: 1001;
opacity: 0;
transform: translateX(20px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
max-width: 280px;
}
.call-toast.show {
opacity: 1;
transform: translateX(0);
}
.call-toast i {
color: #34d399;
font-size: 1.3rem;
}
.call-toast strong {
font-weight: 700;
}
@media (max-width: 600px) {
.call-toast {
bottom: 100px;
right: 18px;
left: 18px;
max-width: none;
}
}
/* §26 Contact page — map iframe fills the section cleanly */
.map-section {
padding: 0 !important;
height: 440px !important;
overflow: hidden;
display: block !important;
}
.map-section iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(8%) contrast(0.98);
transition: filter .35s ease;
}
.map-section iframe:hover {
filter: none;
}
@media (max-width: 768px) {
.map-section { height: 340px !important; }
}
/* §27 Product detail — intro-text variant of the quick-specs slot
When a product has p.introText, the slot renders a single prose
block instead of the Model + Warranty grid. */
.product-quick-specs.is-intro {
display: block;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.product-quick-specs.is-intro .product-intro-text {
margin: 0;
font-size: 0.96rem;
line-height: 1.7;
color: var(--ink-700, var(--gray-700));
}
/* §27.1 Optional bullet list embedded inside intro text */
.product-intro-text .intro-list {
margin: 10px 0 0;
padding-left: 18px;
list-style: disc;
}
.product-intro-text .intro-list li {
margin: 2px 0;
font-size: 0.93rem;
color: var(--ink-700, var(--gray-700));
}
/* ============================================================
§28 PRODUCT DESCRIPTION TAB — uniform label / description layout
Single reusable rule for every product page.
Switches each bullet row from a single flex row to a 3-column
grid: [icon] [fixed-width label] [description].
- Labels align vertically (column 2 is fixed width).
- Descriptions start at the same x position across all rows.
- Wrap continuation lines align with the description column.
No content, no HTML, no images, no specs are changed.
============================================================ */
.tab-description-content {
--desc-icon-width: 18px;
--desc-label-width: clamp(150px, 18vw, 240px);
}
/* Outer reset — flex column stack, applies to ALL products */
.tab-description-content > ul {
display: flex !important;
flex-direction: column;
gap: 12px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
/* The 3-column [icon][label][description] grid is OPT-IN.
Only applied when the descriptionContent element carries
`.desc-label-grid` — added by product.html JS for products
whose bullets follow the "Label: value" pattern
(Prosense Gas Detection Systems). For everything else
(Raman/FTIR/Aircom/YZ/TÜV SÜD), the base products.css
`display: flex` row layout is preserved — long paragraph
bullets fill the full content width without being squeezed
into a narrow third column. */
.tab-description-content.desc-label-grid > ul > li {
display: grid !important;
grid-template-columns:
var(--desc-icon-width)
var(--desc-label-width)
minmax(0, 1fr);
align-items: baseline;
column-gap: 14px;
row-gap: 4px;
padding: 0;
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink-700, var(--gray-700));
}
/* Icon seating — only matters when the grid layout is active.
Plain-flex descriptions use the base products.css ::before rule. */
.tab-description-content.desc-label-grid > ul > li::before {
margin-top: 0;
align-self: start;
line-height: 1.65;
}
/* Label styling — applies to labels in description bullets
regardless of layout mode. In grid mode (Prosense), the
sits in column 2; in flex mode (everything else), it flows inline
with the surrounding text. */
.tab-description-content > ul > li > strong {
color: var(--ink-900, var(--dark));
font-weight: 700;
}
/* Consistent vertical rhythm for the section headings */
.tab-description-content h4 {
margin: 28px 0 14px;
font-size: 1.15rem;
font-weight: 700;
color: var(--ink-900, var(--dark));
letter-spacing: -0.005em;
}
.tab-description-content h4:first-child {
margin-top: 0;
}
/* Paragraph spacing inside the description tab (e.g. Gas Sampling) */
.tab-description-content > p { margin: 0 0 14px; }
.tab-description-content > p:last-child { margin-bottom: 0; }
/* ---- Nested lists (e.g. the "Models:" sub-list on S-DPX panels) ----
Do NOT treat nested li as grid items — they render as a simple
stacked list inside the description column. */
.tab-description-content > ul ul {
display: block;
margin: 6px 0 0;
padding: 0;
list-style: none;
}
.tab-description-content > ul ul > li {
display: block;
position: relative;
padding: 2px 0 2px 22px;
font-size: 0.93rem;
color: var(--ink-700, var(--gray-700));
line-height: 1.6;
}
.tab-description-content > ul ul > li::before {
content: '\f058';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--success);
font-size: 0.78rem;
position: absolute;
left: 0;
top: 5px;
}
/* ---- Mobile: stack label above description (grid mode only) ---- */
@media (max-width: 640px) {
.tab-description-content.desc-label-grid > ul > li {
grid-template-columns: var(--desc-icon-width) minmax(0, 1fr);
column-gap: 10px;
row-gap: 2px;
}
/* Force the strong onto its own row in column 2 */
.tab-description-content.desc-label-grid > ul > li > strong {
grid-column: 2;
margin-bottom: 2px;
}
}
/* ============================================================
§28b Non-grid - alignment fix
------------------------------------------------------------
For products NOT using the `.desc-label-grid` 3-column layout
(i.e. everything outside Gas Detection Systems — FTIR / Raman /
Hyperspectral / TÜV SÜD / Aircom etc.), the base products.css
sets `display: flex` on each
- . That turns every child into
its own flex item, so a bullet like:
- Label — description text...
renders as TWO flex items (the , and the trailing
text node) sitting side-by-side. When the label is long it
wraps inside its own narrow column, and when it's short it
leaves a big whitespace gap before the description — creating
the staggered, broken-column look the client flagged across
9 different products.
Fix: switch the non-grid - to a simple block with the icon
positioned absolutely. The label, em-dash separator
and description text now flow as natural inline content, with
the bold label providing visual hierarchy. Long labels wrap
normally with the description continuing on the next line at
the natural reading position.
This rule deliberately uses `:not(.desc-label-grid)` so the
Prosense Gas Detection 3-column grid layout (§28 above) is
left completely untouched.
============================================================ */
.tab-description-content:not(.desc-label-grid) > ul > li {
display: block !important;
position: relative;
padding: 0 0 0 28px;
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink-700, var(--gray-700));
/* Reset flex-only properties so nothing leaks from the base layer */
align-items: initial;
gap: 0;
}
.tab-description-content:not(.desc-label-grid) > ul > li::before {
position: absolute;
left: 0;
top: 4px;
margin: 0;
/* `flex-shrink: 0` from base layer is harmless on a positioned element,
but reset it for cleanliness */
flex-shrink: initial;
}
/* Tighten the gap between a leading label and the em-dash
that follows it. Without this, browsers sometimes render an extra
space-like glyph between the bold text and the dash. */
.tab-description-content:not(.desc-label-grid) > ul > li > strong:first-child {
margin-right: 1px;
}
/* ============================================================
§29 Tables inside the Description tab
------------------------------------------------------------
Used by the Trainings product to render its course-curriculum
tables (Module Code / Number / Name / Description / Duration).
These rules are INERT for every other product in the catalog
because no other product currently uses
markup inside
its description HTML. If a future product also wants a table,
it picks up this styling automatically.
============================================================ */
.tab-description-content {
/* Allow tables wider than the 820px description column to
overflow gracefully without forcing a horizontal scrollbar
on the whole page. */
overflow-x: auto;
}
.tab-description-content table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 28px;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ink-700, var(--gray-700));
background: #ffffff;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 8px;
overflow: hidden; /* clip the rounded corners */
table-layout: fixed;
}
/* Column widths tuned for the 5-column training tables.
Wide products with custom tables can override with their own
per-column sizing if needed. */
.tab-description-content table th:nth-child(1),
.tab-description-content table td:nth-child(1) { width: 8%; } /* Module Code */
.tab-description-content table th:nth-child(2),
.tab-description-content table td:nth-child(2) { width: 8%; } /* Module Number */
.tab-description-content table th:nth-child(3),
.tab-description-content table td:nth-child(3) { width: 20%; } /* Module Name */
.tab-description-content table th:nth-child(4),
.tab-description-content table td:nth-child(4) { width: 54%; } /* Description */
.tab-description-content table th:nth-child(5),
.tab-description-content table td:nth-child(5) { width: 10%; } /* Duration */
.tab-description-content table th {
background: linear-gradient(180deg, #f8f4ff 0%, #f1ebff 100%);
color: var(--ink-900, var(--dark));
font-weight: 700;
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid var(--gray-200, #e5e7eb);
font-size: 0.85rem;
letter-spacing: -0.005em;
vertical-align: middle;
}
.tab-description-content table td {
padding: 11px 14px;
border-bottom: 1px solid var(--gray-100, #f3f4f6);
vertical-align: top;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.tab-description-content table tbody tr:nth-child(even) td {
background: #fafafa;
}
.tab-description-content table tbody tr:hover td {
background: #f5f0ff;
}
.tab-description-content table tbody tr:last-child td {
border-bottom: none;
}
/* Tighter padding on mobile + allow horizontal scroll if needed */
@media (max-width: 768px) {
.tab-description-content table {
font-size: 0.82rem;
}
.tab-description-content table th,
.tab-description-content table td {
padding: 9px 8px;
}
}