. ─────────────────────────────────────────────────────────────── */ .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.75rem; margin-top: 2rem; counter-reset: video-counter; } .video-card { display: flex; flex-direction: column-reverse; gap: 1rem; counter-increment: video-counter; } .video-card h4 { font-size: 1.0625rem; font-weight: 700; color: var(--c-heading); letter-spacing: -0.01em; line-height: 1.35; margin: 0; display: flex; align-items: baseline; gap: 0.625rem; } .video-card h4::before { content: counter(video-counter, decimal-leading-zero); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--c-primary); padding: 0.25rem 0.5rem; background: var(--c-primary-light); border-radius: 999px; line-height: 1; flex-shrink: 0; } .video-card iframe, .video-card embed { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-md); box-shadow: var(--sh-card); display: block; transition: transform 220ms, box-shadow 220ms; } .video-card:hover iframe, .video-card:hover embed { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16, 25, 40, 0.10); } /* If the iframe is wrapped (in a

, etc.), let the wrapper inherit the same visual treatment so the embed stays in its rounded card. */ .video-card > *:not(h4):not(iframe):not(embed) { width: 100%; border-radius: var(--r-md); overflow: hidden; margin: 0; } @media (max-width: 575px) { .video-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ────────────────────────────────────────────────────────────── ALL CUSTOMERS — exhaustive directory page Sticky search toolbar + stacked industry sections with column-flow lists. ─────────────────────────────────────────────────────────────── */ .all-cust-toolbar { position: sticky; top: 0; z-index: 20; padding: 1rem 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border-light); } .all-cust-search-wrap { position: relative; display: flex; align-items: center; } .all-cust-search-icon { position: absolute; left: 1rem; width: 18px; height: 18px; color: var(--c-text-muted); pointer-events: none; } .all-cust-search-input { flex: 1; height: 48px; padding: 0 1rem 0 2.875rem; background: #fff; border: 1px solid var(--c-border-light); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--c-text); outline: none; transition: border-color 180ms, box-shadow 180ms; } .all-cust-search-input::placeholder { color: var(--c-text-muted); } .all-cust-search-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(16, 104, 206, 0.15); } .all-cust-toolbar-meta { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--c-text-muted); } .all-cust-toolbar-meta strong { color: var(--c-heading); font-weight: 700; } .all-cust-section { margin-top: 3.5rem; } .all-cust-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--c-border-light); } .all-cust-section-title { font-size: 1.5rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.015em; margin: 0; } .all-cust-list { list-style: none; padding: 0; margin: 0; column-count: 3; column-gap: 2.5rem; } .all-cust-list > li { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding: 0.375rem 0; font-size: 0.875rem; line-height: 1.5; color: var(--c-text); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } /* JS-controlled hidden state for filtered items / empty sections */ .all-cust-list > li.is-hidden { display: none; } .all-cust-section.is-empty { display: none; } .all-cust-empty-state { text-align: center; padding: 4rem 1rem; color: var(--c-text-muted); font-size: 0.9375rem; display: none; } .all-cust-empty-state.is-visible { display: block; } @media (max-width: 991px) { .all-cust-list { column-count: 2; column-gap: 2rem; } .all-cust-section-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; } } @media (max-width: 575px) { .all-cust-list { column-count: 1; } } /* ────────────────────────────────────────────────────────────── TECH LOGO GRID — compact variant Use inside half-width columns (col-lg-6) where the default 5-column grid (~584px min) would overflow. ─────────────────────────────────────────────────────────────── */ .tech-logo-grid--compact { grid-template-columns: repeat(5, 1fr); gap: 0.625rem; } .tech-logo-grid--compact .tech-logo-item { aspect-ratio: 1 / 1; padding: 0.5rem; gap: 0.5rem; font-size: 0.75rem; min-width: 0; overflow: hidden; word-break: break-word; hyphens: auto; } .tech-logo-grid--compact .tech-logo-item img { max-width: 52px; max-height: 22px; } @media (max-width: 991px) { .tech-logo-grid--compact { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 575px) { .tech-logo-grid--compact { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= FEATURE MATRIX: sticky first column color Base style.css paints the table-xor-sm sticky first column grey (#EEF0F1). Match the reference: keep it light (var(--c-surface)), same as the other columns. Sticky behaviour is preserved. ========================================================= */ .theme-v2 .table-xor.table-xor-sm tbody tr:not(.col-offset) td:first-child, .theme-v2 .table-xor.table-xor-sm tbody tr th:first-child { background-color: var(--c-surface); } /* ========================================================= HERO-TRUST--NOMARK: hero-trust styling, text-only items, no tick and no reserved marker space (gap collapsed). ========================================================= */ .theme-v2 .hero-trust--nomark li { gap: 0; } /* ========================================================= APPS FAMILY: inset screenshot inside the card (scoped to .card-apps) Image sits within the card padding (spacing on top and sides), rounded corners, soft shadow, shown full (natural ratio, no crop). ========================================================= */ .theme-v2 .card-apps .card-apps-media { margin: 0 0 1.5rem; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 2px 16px rgba(16,104,206,0.06); } .theme-v2 .card-apps .card-apps-media a { display: block; } .theme-v2 .card-apps .card-apps-media img { width: 100%; height: auto; display: block; } /* ========================================================= APPS FAMILY: active state follows hover. STOR2RRD (.card-active) shows the blue contour + drop shadow by default; on hover the look moves to the hovered card and the default-active card goes neutral while another is hovered. box-shadow needs !important to beat .shadow { ...!important }. ========================================================= */ .theme-v2 .apps-family-cards .card-apps { border: 2px solid transparent; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; } .theme-v2 .apps-family-cards .card-apps.card-active, .theme-v2 .apps-family-cards .card-apps:hover { border-color: var(--c-primary); box-shadow: 0 6px 32px rgba(16,104,206,0.12) !important; transform: translateY(-2px); } .theme-v2 .apps-family-cards:hover .card-apps.card-active:not(:hover) { border-color: transparent; box-shadow: var(--sh-card) !important; transform: none; }