/** * Expro Construction Updates — frontend card & slider styling. */ .expro-cu-slider { position: relative; padding-bottom: 44px; --expro-cu-radius: 14px; --expro-cu-accent: #b8863f; --expro-cu-text: #1a1a1a; --expro-cu-muted: #6b7280; } .expro-cu-slider .swiper-wrapper { align-items: stretch; } .expro-cu-slider .swiper-slide { height: auto; display: flex; } /* Card */ .expro-cu-card { display: flex; flex-direction: column; width: 100%; background: #fff; border-radius: var( --expro-cu-radius ); overflow: hidden; box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.06 ); transition: transform 0.3s ease, box-shadow 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .expro-cu-card:hover { transform: translateY( -6px ); box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.12 ); } .expro-cu-card-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; height: 220px; } .expro-cu-card-img { width: 100%; height: 220px !important; object-fit: cover; display: block; transition: transform 0.5s ease; } .expro-cu-card:hover .expro-cu-card-img { transform: scale( 1.06 ); } .expro-cu-card-img-placeholder { width: 100%; height: 100%; background: linear-gradient( 135deg, #e5e5e5, #f2f2f2 ); } .expro-cu-badge { position: absolute; top: 14px; left: 14px; background: #d7262e; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 ); } .expro-cu-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; } .expro-cu-card-title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; color: #0d2e5e; } .expro-cu-card-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var( --expro-cu-muted ); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Pagination */ .expro-cu-slider .swiper-pagination { bottom: 0; } .expro-cu-slider .swiper-pagination-bullet { background: #0d2e5e; height: 9px; width: 9px; opacity: 0.3; } .expro-cu-slider .swiper-pagination-bullet-active { opacity: 1; } /* Navigation arrows */ .expro-cu-nav { position: absolute; top: 40%; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.15 ); display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; transition: background 0.2s ease; } .expro-cu-nav:hover { background: #0d2e5e; } .expro-cu-nav:hover::after { color: #fff; } .expro-cu-nav::after { font-size: 15px; color: var( --expro-cu-text ); } .expro-cu-nav-prev { left: 5px; } .expro-cu-nav-next { right: 5px; } @media ( max-width: 640px ) { .expro-cu-nav { display: none; }  }