/* ========================================================= PSCO — Product Compare CTA Banner Final Version Scoped / Lightweight / RTL / Responsive ========================================================= */ .psco-table-compare-banner, .psco-table-compare-banner * { box-sizing: border-box; } .psco-table-compare-banner { --psco-navy: #001070; --psco-orange: #FF9600; --psco-title: #071A2D; --psco-muted: #78838F; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; width: 100%; margin: 18px 0; padding: 18px 20px; overflow: hidden; border: 1px solid rgba(0, 16, 112, .09); border-top: 2px solid var(--psco-orange); border-radius: 18px; direction: rtl; background: radial-gradient( circle at 8% 50%, rgba(255, 150, 0, .075), transparent 24% ), radial-gradient( circle at 94% 50%, rgba(0, 16, 112, .055), transparent 28% ), linear-gradient( 135deg, #FFFFFF 0%, #FAFBFD 52%, #FFFFFF 100% ); box-shadow: 0 12px 34px rgba(7, 26, 45, .055); font-family: inherit; } /* subtle engineering grid */ .psco-table-compare-banner::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient( rgba(0, 16, 112, .025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 16, 112, .025) 1px, transparent 1px ); background-size: 30px 30px; -webkit-mask-image: linear-gradient( 90deg, transparent, #000 25%, #000 75%, transparent ); mask-image: linear-gradient( 90deg, transparent, #000 25%, #000 75%, transparent ); } /* ambient accent */ .psco-table-compare-banner::after { content: ""; position: absolute; top: -45px; left: 8%; z-index: -1; width: 160px; height: 95px; border-radius: 50%; background: rgba(255, 150, 0, .075); filter: blur(30px); pointer-events: none; } /* ========================================================= CONTENT ========================================================= */ .psco-table-compare-banner__content { display: flex; align-items: center; gap: 15px; min-width: 0; } .psco-table-compare-banner__icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid rgba(0, 16, 112, .10); border-radius: 14px; background: linear-gradient( 135deg, rgba(0, 16, 112, .07), rgba(255, 150, 0, .10) ); color: var(--psco-navy); box-shadow: inset 0 0 0 5px rgba(255,255,255,.75), 0 8px 22px rgba(7, 26, 45, .06); } .psco-table-compare-banner__icon svg { width: 23px; height: 23px; } .psco-table-compare-banner__copy { min-width: 0; } .psco-table-compare-banner__eyebrow { display: block; margin-bottom: 2px; color: var(--psco-orange); font-size: 9px; font-weight: 850; letter-spacing: .08em; line-height: 1.4; } .psco-table-compare-banner__title { margin: 0 0 4px; color: var(--psco-title); font-size: clamp(15px, 1.4vw, 18px); font-weight: 900; line-height: 1.65; } .psco-table-compare-banner__description { margin: 0; color: var(--psco-muted); font-size: 11px; font-weight: 500; line-height: 1.9; } /* ========================================================= ACTION AREA ========================================================= */ .psco-table-compare-banner__action { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } /* ========================================================= MINI INDUSTRIAL COMPARE DIAGRAM ========================================================= */ .psco-table-compare-banner__mini-flow { display: flex; align-items: center; justify-content: center; gap: 7px; direction: rtl; } .psco-table-compare-banner__device { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(0, 16, 112, .11); border-radius: 11px; background: linear-gradient( 180deg, #FFFFFF, #F8FAFD ); color: var(--psco-navy); box-shadow: 0 6px 17px rgba(7, 26, 45, .055); } .psco-table-compare-banner__device::after { content: ""; position: absolute; bottom: 4px; width: 11px; height: 2px; border-radius: 99px; background: var(--psco-orange); opacity: .75; } .psco-table-compare-banner__device svg { width: 18px; height: 18px; } .psco-table-compare-banner__compare-symbol { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255, 150, 0, .22); border-radius: 50%; background: linear-gradient( 135deg, rgba(255, 150, 0, .13), rgba(0, 16, 112, .045) ); color: var(--psco-orange); box-shadow: 0 5px 14px rgba(255, 150, 0, .09); } .psco-table-compare-banner__compare-symbol svg { width: 15px; height: 15px; } /* ========================================================= MAIN CTA ========================================================= */ .psco-table-compare-banner__button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 190px; min-height: 46px; padding: 10px 18px; overflow: hidden; border: 0; border-radius: 12px; background: linear-gradient( 135deg, #001070 0%, #061C99 100% ); color: #FFFFFF !important; box-shadow: 0 10px 26px rgba(0, 16, 112, .17); font-size: 11.5px; font-weight: 850; line-height: 1.4; text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease; } .psco-table-compare-banner__button::before { content: ""; position: absolute; top: 0; right: -70%; width: 42%; height: 100%; transform: skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.16), transparent ); transition: right .45s ease; } .psco-table-compare-banner__button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 16, 112, .23); color: #FFFFFF !important; } .psco-table-compare-banner__button:hover::before { right: 130%; } .psco-table-compare-banner__button-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.12); color: var(--psco-orange); } .psco-table-compare-banner__button-icon svg { width: 14px; height: 14px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .psco-table-compare-banner { grid-template-columns: 1fr; gap: 15px; padding: 16px; } .psco-table-compare-banner__action { justify-content: space-between; width: 100%; } .psco-table-compare-banner__button { min-width: 180px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .psco-table-compare-banner { margin: 14px 0; padding: 14px; border-radius: 15px; } .psco-table-compare-banner__content { align-items: flex-start; gap: 11px; } .psco-table-compare-banner__icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; } .psco-table-compare-banner__icon svg { width: 20px; height: 20px; } .psco-table-compare-banner__title { font-size: 14px; } .psco-table-compare-banner__description { font-size: 10px; line-height: 1.8; } .psco-table-compare-banner__action { align-items: stretch; flex-direction: column; gap: 10px; } .psco-table-compare-banner__mini-flow { justify-content: center; } .psco-table-compare-banner__button { width: 100%; min-width: 0; min-height: 45px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .psco-table-compare-banner__button { transition: none; } .psco-table-compare-banner__button::before { display: none; } }