to . The original CSS targeted .industry-pill
which works for both, but we should explicitly remove cursor:pointer
since they're no longer interactive links. */
.industry-pill {
cursor: default !important;
}
.industry-pill:hover {
/* keep the subtle hover scale for visual delight, but no link behavior */
transform: translateY(-2px);
}
/* ─── 7. PRESENCE / COUNTRY GRID — 5 columns desktop ──────────────────
v1.3 added this but reinforcing here in case earlier rules win. */
.presence .country-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 1024px) {
.presence .country-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 720px) {
.presence .country-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 420px) {
.presence .country-grid {
grid-template-columns: 1fr !important;
}
}
/* ─── 8. CARDS / GRIDS GENERAL: avoid horizontal overflow ─────────────
Many cards use flexbox with content that can exceed cell width
(long text, fixed-size icons, etc). Apply min-width: 0 so they shrink. */
@media (max-width: 880px) {
.featured-row,
.products-grid,
.services-grid,
.clients-grid,
.country-grid,
.country-card,
.product-card,
.product-featured,
.service-card,
.industry-block .clients-grid,
.industry-block .client-card {
min-width: 0 !important;
max-width: 100%;
}
}
/* ─── 9. FOOTER GRID ON MOBILE ─────────────────────────────────────────
Ensure footer doesn't overflow. */
@media (max-width: 880px) {
footer .footer-top {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
}
}
@media (max-width: 480px) {
footer .footer-top {
grid-template-columns: 1fr !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
v1.5 — HOMEPAGE-ONLY FIXES
Targeting:
1. Hero CTA buttons splitting to 2 lines on mobile (selector was wrong
in v1.4 — actual class is .hero-actions, not .hero-ctas)
2. Hero stats: pair first two side-by-side, center Multi-Sector below
3. Reduce spacing between buttons and stats
4. What We Do tiles → mirror About Us pillar structure (no hyperlinks)
5. Industry Verticals icons: bigger, more elegant
6. Products grid: 4 uniform cards (no gradient "and more"), add "many
more..." footer line
════════════════════════════════════════════════════════════════════════ */
/* ─── 1. HERO CTA BUTTONS — keep on one line on mobile ─────────────────
The actual HTML uses .hero-actions, not .hero-ctas. v1.4 targeted the
wrong class so the rules never applied. Fixing the selector and
tightening the layout. */
.hero-actions {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 880px) {
.hero-actions {
flex-wrap: nowrap !important;
gap: 10px !important;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost,
.hero-actions .btn-outline {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
padding: 13px 16px !important;
font-size: 13px !important;
justify-content: center;
text-align: center;
}
/* On the very narrowest phones, shrink padding more so both buttons fit */
@media (max-width: 380px) {
.hero-actions .btn-primary,
.hero-actions .btn-ghost,
.hero-actions .btn-outline {
padding: 12px 10px !important;
font-size: 12px !important;
}
}
}
/* ─── 2. HERO STATS — pair first two, Multi-Sector centered below ─────
New HTML structure: .hero-stats wraps a .hero-stats-pair (first two
stats) and a separate .hero-stat.hero-stat-centered (Multi-Sector).
On desktop they all sit in one row. On mobile/narrow, pair stays side
by side, Multi-Sector centers below. */
.hero-stats {
display: flex;
gap: 40px;
align-items: flex-start;
flex-wrap: wrap;
}
.hero-stats-pair {
display: flex;
gap: 40px;
flex: 0 0 auto;
}
.hero-stat-centered {
/* On desktop this stays inline; mobile overrides below */
flex: 0 0 auto;
}
@media (max-width: 880px) {
.hero-stats {
flex-direction: column;
gap: 20px !important;
row-gap: 20px !important;
align-items: stretch;
}
.hero-stats-pair {
display: flex !important;
flex-direction: row !important;
gap: 16px !important;
justify-content: space-between;
}
.hero-stats-pair .hero-stat {
flex: 1 1 0;
min-width: 0;
text-align: center;
}
.hero-stats-pair .hero-stat > span {
display: block;
text-align: center;
width: 100%;
}
.hero-stat-centered {
text-align: center !important;
width: 100% !important;
display: block !important;
margin: 8px 0 0 !important;
padding-top: 12px;
border-top: 1px solid var(--gray-100);
}
.hero-stat-centered > span {
display: block !important;
width: 100% !important;
text-align: center !important;
}
.hero-stat-centered span:first-child {
font-size: 22px !important;
}
/* Prevent numeric stats wrapping — they must stay on a single line */
.hero-stat span:first-child {
white-space: nowrap;
}
/* Allow subtitle to wrap on multiple lines as needed */
.hero-stat span:last-child {
white-space: normal;
line-height: 1.35;
}
}
/* ─── 3. REDUCE SPACING between buttons and stats on mobile ───────────
The v1.4 hero-stats had 56px margin-top + 40px padding-top = 96px of
space above the stats row. Way too much on mobile. */
@media (max-width: 880px) {
.hero-stats {
margin-top: 28px !important;
padding-top: 24px !important;
}
/* Also tighten the hero-sub → hero-actions gap if there is one */
.hero-sub {
margin-bottom: 20px !important;
}
}
/* ─── 4. SERVICES PILLARS (What We Do) — mirror About Us pillar style ──
v1.5 replaced the .service-card hyperlinked tiles with .services-pillar
tiles that match .about-pillar (compact horizontal: icon + text).
On desktop, lay out as a 2-column grid since there are 5 items.
On mobile, single column (one pillar per row). */
.services-pillars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 48px;
}
@media (max-width: 880px) {
.services-pillars {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 32px !important;
}
}
.services-pillar {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 18px 20px;
background: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: var(--radius);
transition: border-color 0.2s, transform 0.2s;
}
.services-pillar:hover {
border-color: oklch(22% 0.06 255 / 0.2);
transform: translateY(-2px);
}
.services-pillar-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: oklch(22% 0.06 255 / 0.08);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.services-pillar-icon svg {
width: 18px;
height: 18px;
color: oklch(22% 0.06 255 / 0.65);
}
.services-pillar > div strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--navy);
margin-bottom: 4px;
letter-spacing: -0.1px;
}
.services-pillar > div span {
display: block;
font-size: 13.5px;
color: var(--gray-500);
line-height: 1.5;
}
/* ─── 5. INDUSTRY VERTICALS — bigger, more elegant icons ──────────────
Previously: 56x56 container, 28x28 SVG, flat gray background.
v1.5: 88x88 container with subtle gradient + soft shadow, 46x46 SVG,
per-pill subtle accent. Pill itself gets a deeper rest-state and a
pronounced hover. */
.industry-pill {
padding: 36px 22px !important;
background: #ffffff !important;
border: 1px solid var(--gray-100) !important;
gap: 18px !important;
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.03);
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
}
.industry-pill:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px oklch(22% 0.06 255 / 0.14) !important;
border-color: oklch(52% 0.18 250 / 0.3) !important;
}
.industry-pill .industry-icon {
width: 88px !important;
height: 88px !important;
border-radius: 22px !important;
background: linear-gradient(135deg, #eaf1f9 0%, #d4e2f0 100%) !important;
box-shadow: 0 2px 12px oklch(22% 0.06 255 / 0.08), inset 0 1px 0 rgba(255,255,255,0.7);
position: relative;
}
.industry-pill .industry-icon::after {
/* A subtle inner highlight ring for a more refined look */
content: '';
position: absolute;
inset: 1px;
border-radius: 21px;
border: 1px solid rgba(255,255,255,0.5);
pointer-events: none;
}
.industry-pill .industry-icon svg {
width: 46px !important;
height: 46px !important;
color: #1a2b4a !important;
stroke-width: 1.6;
position: relative;
z-index: 1;
}
.industry-pill:hover .industry-icon {
background: linear-gradient(135deg, #dde9f5 0%, #c5d8ec 100%) !important;
transform: scale(1.05);
transition: transform 0.3s, background 0.3s;
}
.industry-pill span {
font-size: 15px !important;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.2px;
}
@media (max-width: 880px) {
.industries-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.industry-pill {
padding: 24px 16px !important;
gap: 14px !important;
}
.industry-pill .industry-icon {
width: 64px !important;
height: 64px !important;
border-radius: 18px !important;
}
.industry-pill .industry-icon svg {
width: 34px !important;
height: 34px !important;
}
}
/* ─── 6. PRODUCTS SECTION — 4 uniform cards + "many more..." footer ──
The 4th product (Custom & Legacy) now uses the same .product-card
styling as the other 3 (no inline gradient overrides). And a
"many more..." text line sits below the grid before the CTA buttons. */
.products-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px;
}
@media (max-width: 1100px) {
.products-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.products-grid {
grid-template-columns: 1fr !important;
}
}
.products-many-more {
margin-top: 28px;
text-align: center;
font-size: 14px;
color: var(--gray-500);
font-style: italic;
}
.products-many-more a {
color: var(--blue);
font-weight: 600;
font-style: normal;
text-decoration: none;
border-bottom: 1px dashed currentColor;
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.products-many-more a:hover {
color: var(--navy);
border-color: var(--navy);
}
/* ════════════════════════════════════════════════════════════════════════
v1.6 — CLIENTS PAGE: COMPACT INDUSTRY CARDS + CLIENT SPEAK + CERT MODAL
Three new things:
1. Make existing industry-block cards more compact (per user spec)
2. New "Client Speak" section with grouped testimonial cards
3. Certificate modal that opens when "View certificate" is clicked
════════════════════════════════════════════════════════════════════════ */
/* ─── 1. COMPACT EXISTING INDUSTRY CARDS ──────────────────────────────
v1.6 makes the Clients page industry sections smaller: less padding,
smaller icons, tighter typography. The Client Speak section below now
carries the visual weight; this list should read as a quick directory. */
.clients-section .industry-block { margin-bottom: 44px !important; }
.clients-section .industry-header { gap: 12px !important; margin-bottom: 18px !important; }
.clients-section .industry-header .industry-icon {
width: 36px !important;
height: 36px !important;
border-radius: 9px !important;
}
.clients-section .industry-header .industry-icon svg {
width: 18px !important;
height: 18px !important;
}
.clients-section .industry-header h2 { font-size: 17px !important; }
.clients-section .industry-header .industry-count { font-size: 11px !important; padding: 3px 9px !important; }
.clients-section .clients-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
}
.clients-section .client-card {
padding: 16px 14px !important;
gap: 6px !important;
border-radius: 12px !important;
border-width: 1px !important;
}
.clients-section .client-card .client-logo {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
margin-bottom: 8px !important;
}
.clients-section .client-card .client-logo svg {
width: 22px !important;
height: 22px !important;
}
.clients-section .client-card h3 {
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -0.1px;
}
.clients-section .client-card p {
font-size: 11.5px !important;
line-height: 1.5 !important;
color: var(--gray-500);
}
.clients-section .client-card .client-tag {
font-size: 10.5px !important;
padding: 2px 7px !important;
}
@media (max-width: 900px) {
.clients-section .clients-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 520px) {
.clients-section .clients-grid {
grid-template-columns: 1fr !important;
}
}
/* ─── 2. CLIENT SPEAK SECTION ──────────────────────────────────────────
Mirrors the Claude design — distinct grayish background to separate
from the rest of the page, large heading, then industry groups with
testimonial cards. */
.client-speak {
background: #eef1f5;
padding: 72px 5vw 88px;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.client-speak-inner {
max-width: 1120px;
margin: 0 auto;
}
.client-speak-header { max-width: 680px; }
.client-speak-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
color: #2b6cf0;
text-transform: uppercase;
margin-bottom: 18px;
}
.client-speak-heading {
font-size: clamp(28px, 5vw, 46px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.02em;
color: #14233c;
margin: 0 0 18px;
}
.client-speak-lede {
font-size: 17px;
line-height: 1.6;
color: #5a6a7e;
margin: 0;
}
.cs-group { margin-top: 52px; }
.cs-group-header {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.cs-group-title {
font-size: 21px;
font-weight: 800;
letter-spacing: -0.01em;
color: #14233c;
margin: 0;
white-space: nowrap;
}
.cs-group-rule {
flex: 1;
height: 1px;
background: #dde3ec;
}
.cs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 20px;
}
.cs-card {
background: #fff;
border: 1px solid #e7ebf1;
border-radius: 18px;
padding: 30px 28px 24px;
box-shadow: 0 1px 2px rgba(20, 35, 60, 0.04), 0 8px 24px rgba(20, 35, 60, 0.04);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-card:hover {
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(20, 35, 60, 0.05), 0 14px 36px rgba(20, 35, 60, 0.08);
}
.cs-card-head {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.cs-card-initials {
width: 44px;
height: 44px;
border-radius: 12px;
background: #e9f1fe;
color: #14233c;
font-weight: 800;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
flex: none;
letter-spacing: -0.02em;
}
.cs-card-id { min-width: 0; }
.cs-card-company {
font-size: 15.5px;
font-weight: 700;
color: #14233c;
line-height: 1.25;
}
.cs-card-person {
font-size: 13px;
color: #7c899a;
line-height: 1.3;
}
.cs-card-quote {
font-size: 18px;
line-height: 1.5;
font-weight: 600;
color: #1d2c45;
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.cs-card-detail {
font-size: 14.5px;
line-height: 1.55;
color: #5a6a7e;
margin: 0 0 22px;
}
.cs-card-detail strong {
color: #14233c;
font-weight: 700;
}
.cs-card-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 18px;
border-top: 1px solid #eef1f5;
flex-wrap: wrap;
}
.cs-card-tag {
font-size: 12px;
font-weight: 600;
color: #2b6cf0;
background: #e9f1fe;
padding: 6px 11px;
border-radius: 7px;
}
.cs-card-action {
appearance: none;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
color: #14233c;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
}
.cs-card-action:hover { color: #2b6cf0; }
.cs-card-action span { font-size: 15px; transition: transform 0.2s ease; }
.cs-card-action:hover span { transform: translateX(2px); }
/* Trusted-by strip at the bottom */
.cs-trusted {
margin-top: 56px;
padding-top: 36px;
border-top: 1px solid #e1e6ee;
}
.cs-trusted-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.13em;
color: #94a1b2;
text-transform: uppercase;
text-align: center;
margin-bottom: 22px;
}
.cs-trusted-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 40px;
}
.cs-trusted-row span {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
color: #9aa6b6;
}
/* Mobile adjustments for Client Speak */
@media (max-width: 720px) {
.client-speak { padding: 56px 5vw 72px; }
.cs-group { margin-top: 40px; }
.cs-group-header { gap: 12px; margin-bottom: 18px; }
.cs-group-title { font-size: 18px; white-space: normal; }
.cs-grid { grid-template-columns: 1fr; gap: 14px; }
.cs-card { padding: 22px 20px 18px; border-radius: 14px; }
.cs-card-head { gap: 11px; margin-bottom: 16px; }
.cs-card-initials { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; }
.cs-card-company { font-size: 14.5px; }
.cs-card-person { font-size: 12.5px; }
.cs-card-quote { font-size: 16px; }
.cs-card-detail { font-size: 13.5px; margin-bottom: 16px; }
.cs-card-foot { padding-top: 14px; gap: 8px; }
.cs-card-tag { font-size: 11px; padding: 5px 9px; }
.cs-card-action { font-size: 12.5px; }
.cs-trusted-row { gap: 10px 24px; }
.cs-trusted-row span { font-size: 15px; }
}
/* ─── 3. CERTIFICATE MODAL ─────────────────────────────────────────────
Hidden by default, becomes a full-screen overlay when .is-open is set
on the modal element. Click backdrop or X to close; ESC also closes
(wired up in the JS in footer.php). */
.cs-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 32px 18px;
overflow-y: auto;
}
.cs-modal.is-open {
display: flex;
animation: cs-modal-fade 0.18s ease;
}
.cs-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 24, 40, 0.72);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
z-index: 0;
}
.cs-modal-wrap {
position: relative;
z-index: 1;
width: min(880px, 100%);
margin: auto;
animation: cs-modal-rise 0.22s ease;
}
.cs-modal-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.cs-modal-title {
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
min-width: 0;
}
.cs-modal-close {
appearance: none;
border: 0;
cursor: pointer;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 18px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: background 0.15s ease;
}
.cs-modal-close:hover { background: rgba(255, 255, 255, 0.24); }
.cs-modal-image-wrap {
position: relative;
background: #fff;
border-radius: 10px;
overflow: hidden;
min-height: 200px;
}
.cs-modal-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #7c899a;
font-size: 13px;
font-weight: 600;
z-index: 0;
}
.cs-modal-image {
display: block;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.2s ease;
position: relative;
z-index: 1;
}
.cs-modal-image.is-loaded { opacity: 1; }
.cs-modal-image:not([src]) { display: none; }
@keyframes cs-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
.cs-modal { padding: 16px; }
.cs-modal-title { font-size: 13px; }
.cs-modal-close { width: 34px; height: 34px; font-size: 16px; }
}
/* ════════════════════════════════════════════════════════════════════════
v1.7 — PRODUCTS & SERVICES REDESIGN
Components:
- Collapsible product cards (3 flagship + Custom & Legacy callout)
- Sub-collapsible module cards inside each product
- VeTrac workflow visualization (7-step pipeline)
- UniERP 17-module 2-column grid
- Services tile grid (5 services + 1 centered CTA tile)
- Unified FAQ accordion
- Mobile responsive throughout
════════════════════════════════════════════════════════════════════════ */
/* ─── Wrapper sections ─────────────────────────────────────────────── */
.ps-products,
.ps-services,
.ps-faq {
padding: 80px 5vw;
}
.ps-products { background: #f6f9fc; }
.ps-services { background: #ffffff; }
.ps-faq { background: #f6f9fc; }
.ps-products-header,
.ps-services-header,
.ps-faq-header {
max-width: 760px;
margin: 0 auto 44px;
text-align: center;
}
.ps-products-header h2,
.ps-services-header h2,
.ps-faq-header h2 {
font-size: clamp(28px, 3.4vw, 38px);
font-weight: 800;
color: #0f1c2e;
letter-spacing: -0.8px;
margin: 14px 0 12px;
line-height: 1.15;
}
.ps-products-sub,
.ps-services-sub,
.ps-faq-sub {
font-size: 15px;
color: #4b586e;
line-height: 1.6;
margin: 0;
}
/* ─── 1. PRODUCT CARDS (top-level collapsible) ─────────────────────── */
.ps-product {
background: #ffffff;
border: 1px solid #d8e1ec;
border-radius: 14px;
margin-bottom: 16px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
box-shadow: 0 2px 6px rgba(15, 28, 46, 0.04);
scroll-margin-top: 90px;
}
.ps-product[open] {
box-shadow: 0 6px 24px rgba(15, 28, 46, 0.08);
}
.ps-product-summary {
background: #0f1c2e;
color: #ffffff;
padding: 22px 26px;
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
list-style: none;
user-select: none;
}
.ps-product-summary::-webkit-details-marker { display: none; }
.ps-product-summary::marker { content: ''; }
.ps-product:hover .ps-product-summary {
background: #1a2a45;
}
.ps-product-icon {
width: 48px;
height: 48px;
border-radius: 11px;
background: rgba(108, 179, 245, 0.18);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ps-product-icon i {
font-size: 24px;
color: #6cb3f5;
}
.ps-product-id {
flex: 1;
min-width: 0;
}
.ps-product-eyebrow {
font-size: 11px;
font-weight: 700;
color: #6cb3f5;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 3px;
}
.ps-product-name {
font-size: 22px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.3px;
margin-bottom: 2px;
}
.ps-product-tagline {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.72);
}
.ps-product-chevron {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease, background 0.2s ease;
flex-shrink: 0;
}
.ps-product-chevron i {
font-size: 16px;
color: #ffffff;
transition: transform 0.25s ease;
}
.ps-product[open] .ps-product-chevron i {
transform: rotate(180deg);
}
.ps-product[open] .ps-product-chevron {
background: rgba(108, 179, 245, 0.2);
}
.ps-product-body {
padding: 28px 32px 32px;
animation: ps-fade-in 0.25s ease;
}
@keyframes ps-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* Stats strip below product header */
.ps-stats-strip {
background: #f5f9fd;
border-left: 3px solid #2d6fb5;
padding: 12px 16px;
margin-bottom: 22px;
border-radius: 0 6px 6px 0;
}
.ps-stats-strip span {
font-size: 13px;
color: #0f1c2e;
font-weight: 500;
}
.ps-stats-strip span.dot { color: #cbd5e0; padding: 0 4px; }
/* Section headings inside a product */
.ps-section-h {
font-size: 11px;
font-weight: 700;
color: #4b586e;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 4px 0 10px;
}
.ps-prose {
font-size: 14px;
color: #4b586e;
line-height: 1.65;
margin: 0 0 22px;
}
/* ─── 2. MODULES — sub-collapsibles inside a product ───────────────── */
.ps-modules-label {
font-size: 11px;
font-weight: 700;
color: #4b586e;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 8px 0 12px;
}
.ps-modules-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
}
.ps-modules-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.ps-modules-grid-2col {
grid-template-columns: 1fr 1fr;
}
.ps-module {
background: #ffffff;
border: 1px solid #d8e1ec;
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.ps-module:hover {
border-color: #b6c6db;
}
.ps-module[open] {
border-color: #2d6fb5;
}
.ps-module-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
cursor: pointer;
list-style: none;
user-select: none;
background: #ffffff;
transition: background 0.2s ease;
}
.ps-module-summary::-webkit-details-marker { display: none; }
.ps-module-summary::marker { content: ''; }
.ps-module[open] .ps-module-summary {
background: #eef4fa;
}
.ps-module-static .ps-module-summary {
cursor: default;
}
.ps-module-summary > i {
font-size: 18px;
color: #2d6fb5;
flex-shrink: 0;
}
.ps-module-id {
flex: 1;
min-width: 0;
}
.ps-module-name {
font-size: 14px;
font-weight: 700;
color: #0f1c2e;
letter-spacing: -0.1px;
line-height: 1.3;
}
.ps-module-desc {
font-size: 12px;
color: #4b586e;
line-height: 1.45;
margin-top: 2px;
}
.ps-module-chevron {
font-size: 14px;
color: #4b586e;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.ps-module[open] .ps-module-chevron i {
transform: rotate(180deg);
color: #2d6fb5;
}
.ps-module-body {
padding: 4px 16px 14px 46px;
background: #eef4fa;
border-top: 1px solid rgba(45, 111, 181, 0.15);
}
.ps-module-items {
list-style: none;
padding: 0;
margin: 12px 0 4px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 18px;
}
.ps-module-items li {
font-size: 12.5px;
color: #0f1c2e;
line-height: 1.55;
padding-left: 14px;
position: relative;
}
.ps-module-items li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
background: #2d6fb5;
border-radius: 50%;
}
/* ─── 3. SPECIAL FEATURES + OPTIONAL INTEGRATIONS — 2-column ───────── */
.ps-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 24px 0;
}
.ps-features-grid-single { grid-template-columns: 1fr; }
.ps-features-label {
font-size: 11px;
font-weight: 700;
color: #4b586e;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 8px;
}
.ps-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.ps-features-list li {
font-size: 13px;
color: #0f1c2e;
line-height: 1.7;
padding-left: 16px;
position: relative;
}
.ps-features-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 5px;
height: 5px;
background: #2d6fb5;
border-radius: 50%;
}
/* Inline note (Windows-only warning, etc.) */
.ps-note {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 8px;
margin: 20px 0;
font-size: 12.5px;
}
.ps-note-warn {
background: #fef6e7;
color: #8a5a00;
border: 1px solid #f0d9a0;
}
.ps-note i { font-size: 18px; flex-shrink: 0; }
/* ─── 4. LICENSING — On-Premise / Cloud cards ──────────────────────── */
.ps-licensing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0 24px;
}
.ps-licensing-card {
background: #f6f9fc;
border: 1px solid #d8e1ec;
border-radius: 10px;
padding: 16px 18px;
}
.ps-licensing-type {
font-size: 11px;
font-weight: 700;
color: #2d6fb5;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 8px;
}
.ps-licensing-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.ps-licensing-card ul li {
font-size: 12.5px;
color: #0f1c2e;
line-height: 1.6;
padding-left: 14px;
position: relative;
margin-bottom: 4px;
}
.ps-licensing-card ul li::before {
content: '·';
position: absolute;
left: 4px;
top: -2px;
color: #2d6fb5;
font-weight: 700;
font-size: 16px;
}
/* ─── 5. PRODUCT CTA buttons ───────────────────────────────────────── */
.ps-product-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.ps-product-cta a { text-decoration: none; }
/* ─── 6. VETRAC WORKFLOW PIPELINE ──────────────────────────────────── */
.ps-workflow {
background: #f6f9fc;
border: 1px solid #d8e1ec;
border-radius: 10px;
padding: 18px 14px;
margin: 4px 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
flex-wrap: nowrap;
}
.ps-workflow-step {
flex: 1;
text-align: center;
min-width: 0;
}
.ps-workflow-circle {
width: 34px;
height: 34px;
border-radius: 50%;
background: #2d6fb5;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 2px 6px rgba(45, 111, 181, 0.3);
}
.ps-workflow-label {
font-size: 11.5px;
color: #0f1c2e;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.1px;
}
.ps-workflow-arrow {
font-size: 14px;
color: #2d6fb5;
flex-shrink: 0;
}
/* ─── 7. CUSTOM & LEGACY CALLOUT (no arrow per v1.7 spec) ──────────── */
.ps-custom-callout {
max-width: 1100px;
margin: 32px auto 0;
background: linear-gradient(135deg, #f5f8fc 0%, #e8eff7 100%);
border: 1px solid #d8e1ec;
border-radius: 14px;
padding: 22px 26px;
display: flex;
align-items: center;
gap: 18px;
scroll-margin-top: 90px;
}
.ps-custom-icon {
width: 48px;
height: 48px;
border-radius: 11px;
background: #2d6fb5;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ps-custom-icon i {
font-size: 24px;
color: #ffffff;
}
.ps-custom-text { flex: 1; }
.ps-custom-eyebrow {
font-size: 11px;
font-weight: 700;
color: #2d6fb5;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 3px;
}
.ps-custom-title {
font-size: 19px;
font-weight: 800;
color: #0f1c2e;
letter-spacing: -0.2px;
line-height: 1.2;
}
.ps-custom-desc {
font-size: 13.5px;
color: #4b586e;
margin-top: 4px;
line-height: 1.5;
}
/* ─── 8. SERVICES TILE GRID ────────────────────────────────────────── */
.ps-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
.ps-service-card {
background: #ffffff;
border: 1px solid #d8e1ec;
border-radius: 12px;
padding: 22px 22px 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ps-service-card:hover {
transform: translateY(-3px);
border-color: #2d6fb5;
box-shadow: 0 10px 24px rgba(15, 28, 46, 0.08);
}
.ps-service-icon {
font-size: 28px;
color: #2d6fb5;
margin-bottom: 10px;
display: block;
}
.ps-service-name {
font-size: 15px;
font-weight: 800;
color: #0f1c2e;
margin-bottom: 5px;
letter-spacing: -0.1px;
}
.ps-service-desc {
font-size: 13px;
color: #4b586e;
line-height: 1.5;
}
/* "Not sure where to start?" — centered content per v1.7 spec */
.ps-service-cta-tile {
background: #0f1c2e;
color: #ffffff;
border-radius: 12px;
padding: 22px;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
transition: background 0.2s ease, transform 0.2s ease;
position: relative;
}
.ps-service-cta-tile:hover {
background: #1a2a45;
transform: translateY(-3px);
}
.ps-service-cta-title {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.1px;
}
.ps-service-cta-sub {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.5;
max-width: 220px;
}
.ps-service-cta-arrow {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(108, 179, 245, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-top: 6px;
}
.ps-service-cta-arrow i {
font-size: 16px;
color: #6cb3f5;
}
/* ─── 9. FAQ ACCORDION ─────────────────────────────────────────────── */
.ps-faq-list {
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #d8e1ec;
border-radius: 12px;
overflow: hidden;
}
.ps-faq-item {
border-bottom: 1px solid #e7ecf3;
}
.ps-faq-item:last-child { border-bottom: 0; }
.ps-faq-item > summary {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
cursor: pointer;
list-style: none;
background: #ffffff;
transition: background 0.18s ease;
font-size: 14.5px;
font-weight: 700;
color: #0f1c2e;
}
.ps-faq-item > summary::-webkit-details-marker { display: none; }
.ps-faq-item > summary::marker { content: ''; }
.ps-faq-item > summary:hover {
background: #f6f9fc;
}
.ps-faq-item[open] > summary {
background: #f5f9fd;
}
.ps-faq-item > summary > i {
font-size: 18px;
color: #4b586e;
transition: transform 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.ps-faq-item[open] > summary > i {
transform: rotate(180deg);
color: #2d6fb5;
}
.ps-faq-body {
padding: 4px 20px 18px;
font-size: 13.5px;
color: #4b586e;
line-height: 1.65;
background: #f5f9fd;
}
/* ════════════════════════════════════════════════════════════════════
MOBILE RESPONSIVE — v1.7 product page
════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
.ps-products,
.ps-services,
.ps-faq {
padding: 56px 5vw;
}
.ps-product-summary {
padding: 18px 18px;
gap: 12px;
}
.ps-product-icon {
width: 42px;
height: 42px;
border-radius: 10px;
}
.ps-product-icon i { font-size: 20px; }
.ps-product-name { font-size: 18px; }
.ps-product-tagline { font-size: 12.5px; }
.ps-product-chevron { width: 32px; height: 32px; }
.ps-product-body { padding: 22px 18px 26px; }
.ps-stats-strip { padding: 10px 12px; }
.ps-stats-strip span { font-size: 12px; }
/* Modules grid → single column on mobile */
.ps-modules-grid,
.ps-modules-grid-2col {
grid-template-columns: 1fr !important;
}
.ps-module-items {
grid-template-columns: 1fr;
gap: 4px;
}
.ps-module-body {
padding: 4px 14px 12px 40px;
}
/* Features → single column */
.ps-features-grid {
grid-template-columns: 1fr !important;
gap: 18px;
}
/* Licensing → single column */
.ps-licensing-grid {
grid-template-columns: 1fr !important;
}
/* VeTrac workflow → wrap to 2 rows (per v1.7 spec) */
.ps-workflow {
flex-wrap: wrap !important;
gap: 8px;
padding: 14px 12px;
}
.ps-workflow-step {
flex: 0 0 calc(25% - 6px);
min-width: 70px;
}
.ps-workflow-arrow {
flex: 0 0 auto;
font-size: 11px;
}
/* Custom & legacy callout → stack on mobile */
.ps-custom-callout {
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 20px;
}
/* Services tile grid → 1 column on mobile */
.ps-services-grid {
grid-template-columns: 1fr !important;
gap: 10px;
}
.ps-service-card { padding: 18px 18px 20px; }
.ps-service-cta-tile { padding: 22px 20px; }
/* FAQ slightly tighter */
.ps-faq-item > summary { font-size: 14px; padding: 14px 16px; }
.ps-faq-body { padding: 4px 16px 14px; font-size: 13px; }
}
@media (min-width: 881px) and (max-width: 1024px) {
.ps-services-grid {
grid-template-columns: repeat(2, 1fr);
}
.ps-modules-grid {
/* UniERP 17 cards: 2 columns on tablet stays */
grid-template-columns: 1fr 1fr;
}
}