/* BPAS page templates v2 · erp-hub-bc · styles of business-central-hub.html (BPAS source), with Bentol radius and spacing steps. Generated by converter-v2/build_v2.py; do not edit. */ .bpas-wp-container .bpas-btn { display: inline-block; padding: 15px 30px; border-radius: 40px; background: var(--dark-color); color: var(--white); font-weight: 600; line-height: 1.2; transition: background 0.2s ease, color 0.2s ease; } .bpas-wp-container .bpas-btn:hover { background: var(--theme-color); color: var(--white); } .bpas-wp-container .bpas-btn--lime { background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-btn--lime:hover { background: var(--white); color: var(--dark-color); } .bpas-wp-container .bpas-btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--line-dark); } .bpas-wp-container .bpas-btn--ghost:hover { background: var(--card-dark); } .bpas-wp-container .bpas-mb { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; margin-top: 35px; padding: 35px 40px; border-radius: 10px; overflow: hidden; color: #d5dcea; background: radial-gradient(circle at 92% 12%, rgba(245,179,66,0.18), transparent 42%), linear-gradient(135deg, var(--fx-ink) 0%, var(--fx-ink-2) 100%); border: 1px solid var(--line-dark); } .bpas-wp-container .bpas-mb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); } .bpas-wp-container .bpas-mb__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 5px 15px; } .bpas-wp-container .bpas-mb h3 { margin: 15px 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; color: var(--white); } .bpas-wp-container .bpas-mb h3 strong { color: var(--theme-color2); } .bpas-wp-container .bpas-mb p { font-size: 16px; line-height: 1.6; color: #d5dcea; max-width: 560px; } .bpas-wp-container .bpas-mb__ch { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 20px; } .bpas-wp-container .bpas-mb__ch li { font-size: 13px; font-weight: 600; color: var(--white); border: 1px solid var(--line-dark); background: rgba(255,255,255,0.04); border-radius: 40px; padding: 5px 15px; } .bpas-wp-container .bpas-mb__stat { text-align: center; padding: 30px 20px; border-radius: 10px; background: rgba(13,35,68,0.55); border: 1px solid var(--line-dark); } .bpas-wp-container .bpas-mb__stat b { display: block; font-size: clamp(64px, 8vw, 96px); line-height: 1; font-weight: 800; color: var(--theme-color2); } .bpas-wp-container .bpas-mb__stat span { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--white); } .bpas-wp-container .bpas-mb__stat small { display: block; margin-top: 5px; font-size: 13px; color: #a9b6cc; } @media (hover: hover) { .bpas-wp-container .bpas-mb { transition: transform 0.25s ease, box-shadow 0.25s ease; } .bpas-wp-container .bpas-mb:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(13,35,68,0.25); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mb:hover { transform: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb:hover { transform: none; } @media (max-width: 860px) { .bpas-wp-container .bpas-mb { grid-template-columns: 1fr; padding: 30px 20px 30px 30px; } } .bpas-wp-container .bpas-mb > div { min-width: 0; } .bpas-wp-container .bpas-mb__modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 20px; min-width: 0; } .bpas-wp-container .bpas-mb__mode { margin: 0; min-width: 0; overflow: hidden; } .bpas-wp-container .bpas-mb__mode img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; font-size: 0; aspect-ratio: 4 / 3; object-fit: contain; padding: 5px; border-radius: 10px; border: 1px solid var(--line-dark); background: radial-gradient(circle at 50% 40%, rgba(245,179,66,0.16), rgba(255,255,255,0.03) 70%); } .bpas-wp-container .bpas-mb__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; padding: 5px; border-radius: 10px; border: 1.5px dashed rgba(245,179,66,0.55); background: rgba(255,255,255,0.04) radial-gradient(rgba(245,179,66,0.18) 1.2px, transparent 1.2px); background-size: 14px 14px; text-align: center; } .bpas-wp-container .bpas-mb__ph span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color2); } .bpas-wp-container .bpas-mb__ph em { font-style: normal; font-size: 10px; line-height: 1.3; color: #a9b6cc; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .bpas-wp-container .bpas-mb__mode figcaption { margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--white); text-align: center; } .bpas-wp-container .bpas-mb__mode figcaption small { display: block; font-size: 11px; font-weight: 600; color: #a9b6cc; } @media (hover: hover) { .bpas-wp-container .bpas-mb__mode img, .bpas-wp-container .bpas-mb__ph { transition: transform 0.25s ease, border-color 0.25s ease; } .bpas-wp-container .bpas-mb__mode:hover img, .bpas-wp-container .bpas-mb__mode:hover .bpas-mb__ph { transform: translateY(-3px); border-color: var(--theme-color2); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mb__mode:hover img, .bpas-wp-container .bpas-mb__mode:hover .bpas-mb__ph { transform: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb__mode:hover img, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb__mode:hover .bpas-mb__ph { transform: none; } @media (max-width: 560px) { .bpas-wp-container .bpas-mb__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bpas-wp-container .bpas-ipx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "tag tag" "text go"; align-items: center; gap: 10px 10px; margin-top: 15px; padding: 15px 15px 15px 20px; border-radius: 10px; background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.18), transparent 45%), linear-gradient(135deg, var(--fx-ink), var(--fx-ink-2)); color: #d5dcea; text-decoration: none; overflow: hidden; } .bpas-wp-container .bpas-ipx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); } .bpas-wp-container .bpas-ipx__tag { grid-area: tag; justify-self: start; max-width: 100%; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 4px 10px; line-height: 1.35; white-space: normal; } .bpas-wp-container .bpas-ipx__text { grid-area: text; font-size: 13.5px; line-height: 1.5; color: var(--white); } .bpas-wp-container .bpas-ipx__text strong { color: var(--theme-color2); } .bpas-wp-container .bpas-ipx__go { grid-area: go; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(245,179,66,0.15); color: var(--theme-color2); font-size: 14px; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; } @media (hover: hover) { .bpas-wp-container .bpas-ipx:hover .bpas-ipx__go { transform: translateX(3px); background: var(--theme-color2); color: var(--dark-color); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-ipx:hover .bpas-ipx__go { transform: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-ipx:hover .bpas-ipx__go { transform: none; } .bpas-wp-container .bpas-shot { margin: 30px 0 0; } .bpas-wp-container .bpas-shot__frame { display: flex; justify-content: center; align-items: center; padding: 20px; border-radius: 10px; background: var(--theme-color3); border: 1px solid var(--line-light); overflow: hidden; } .bpas-wp-container .bpas-shot__frame img { display: block; max-width: 100% !important; width: auto !important; height: auto !important; border-radius: 5px; box-shadow: 0 10px 30px rgba(13,35,68,0.14); } .bpas-wp-container .bpas-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--gray-color); text-align: center; } .bpas-wp-container .bpas-figrow--one { grid-template-columns: minmax(0, 620px); justify-content: center; } .bpas-wp-container .bpas-shot__hint { display: none; } @media (max-width: 600px) { .bpas-wp-container .bpas-shot__frame { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px; } .bpas-wp-container .bpas-shot__frame img { max-width: none !important; width: 680px !important; } .bpas-wp-container .bpas-shot__hint { display: block; margin-top: 5px; font-size: 12px; color: var(--gray-color); text-align: center; } } .bpas-wp-container a.bpas-vlink { color: inherit; font-weight: inherit; text-decoration: underline dotted var(--theme-color); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: help; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .bpas-wp-container a.bpas-vlink:hover, .bpas-wp-container a.bpas-vlink:focus-visible { color: var(--theme-color-text); text-decoration-style: solid; } .bpas-wp-container.bpas-tipwrap { position: fixed; z-index: 99999; left: 0; top: 0; max-width: 280px; margin: 0; padding: 10px 15px; border-radius: 10px; background: var(--fx-ink); color: #e8edf5; font-size: 13px; line-height: 1.5; text-align: left; box-shadow: 0 12px 30px rgba(13,35,68,0.28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; } .bpas-wp-container.bpas-tipwrap.is-on { opacity: 1; transform: none; } .bpas-wp-container.bpas-tipwrap strong { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fx-accent); } .bpas-wp-container.bpas-tipwrap span { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--fx-accent); } @media (prefers-reduced-motion: reduce) { .bpas-wp-container.bpas-tipwrap { transition: none; transform: none; } } @property --bpas-mb-a { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes bpas-mb-spin { to { --bpas-mb-a: 360deg; } } @keyframes bpas-mb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes bpas-mb-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes bpas-mb-pop { 0% { opacity: 0; transform: translateY(16px) scale(0.86); } 70% { opacity: 1; transform: translateY(-3px) scale(1.03); } 100% { opacity: 1; transform: none; } } @keyframes bpas-mb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes bpas-mb-shine { 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 12%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-18deg); } } @keyframes bpas-mb-glow { 0%, 100% { background-position: 0% 0%, 100% 100%; } 50% { background-position: 30% 20%, 70% 80%; } } @keyframes bpas-mb-signal { 0%, 22%, 100% { border-color: var(--line-dark); box-shadow: none; } 6%, 14% { border-color: var(--theme-color2); box-shadow: 0 0 0 3px rgba(245,179,66,0.25), 0 10px 24px rgba(0,0,0,0.25); } } @keyframes bpas-mb-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,179,66,0.6); } 50% { box-shadow: 0 0 0 6px rgba(245,179,66,0); } } .bpas-wp-container .bpas-mb--v2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; margin-top: 45px; padding: 45px 50px 45px 55px; border-radius: 10px; isolation: isolate; border: 1.5px solid transparent; background: linear-gradient(var(--fx-ink), var(--fx-ink)) padding-box, conic-gradient(from var(--bpas-mb-a), rgba(245,179,66,0.14) 0%, var(--theme-color2) 14%, var(--theme-color) 27%, rgba(245,179,66,0.14) 44%, rgba(245,179,66,0.14) 100%) border-box; box-shadow: 0 34px 80px rgba(13,35,68,0.30); } .bpas-wp-container .bpas-mb--v2::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 20% 20%, rgba(245,179,66,0.20) 0%, rgba(13,35,68,0) 38%), radial-gradient(circle at 85% 85%, rgba(227,87,43,0.20) 0%, rgba(13,35,68,0) 38%); background-size: 160% 160%, 160% 160%; } .bpas-wp-container .bpas-mb--v2 > div { position: relative; z-index: 1; } .bpas-wp-container .bpas-mb__shine { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(245,179,66,0) 0%, rgba(245,179,66,0.16) 50%, rgba(245,179,66,0) 100%); } .bpas-wp-container .bpas-mb--v2 .bpas-mb__tag { gap: 10px; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dark-color); } .bpas-wp-container .bpas-mb--v2 .bpas-mb__name { margin: 20px 0 10px; line-height: 0; } .bpas-wp-container .bpas-mb__logo { display: block; width: clamp(230px, 27vw, 340px); height: auto; overflow: visible; } .bpas-wp-container .bpas-mb--v2 .bpas-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__line { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--theme-color2); } .bpas-wp-container .bpas-mb--v2 .bpas-mb__hook { margin: 0 0 10px; max-width: none; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--white); } .bpas-wp-container .bpas-mb--v2 .bpas-mb__hook strong { color: var(--theme-color2); } .bpas-wp-container .bpas-mb--v2 .bpas-btn i { font-style: normal; display: inline-block; margin-left: 5px; transition: transform 0.3s ease; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__stat { position: relative; padding: 35px 20px 30px; border-radius: 10px; background: rgba(8,22,46,0.65); border: 1px solid var(--line-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .bpas-wp-container .bpas-mb__dial { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin: 0 auto; } .bpas-wp-container .bpas-mb__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .bpas-wp-container .bpas-mb__ring circle { fill: none; stroke-width: 7; } .bpas-wp-container .bpas-mb__ring .t { stroke: rgba(245,179,66,0.14); } .bpas-wp-container .bpas-mb__ring .a { stroke: var(--theme-color2); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .bpas-wp-container .bpas-mb__ring .o { stroke: var(--theme-color); stroke-linecap: round; stroke-dasharray: 0.08 0.92; stroke-dashoffset: 0; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__stat b { position: relative; font-size: clamp(64px, 7vw, 88px); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__stat span { margin-top: 20px; font-size: 16px; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__stat small { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--theme-color2); background: rgba(245,179,66,0.08); border: 1px solid rgba(245,179,66,0.28); border-radius: 40px; padding: 4px 10px; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__stat small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color2); } .bpas-wp-container .bpas-mb--v2.mb-js:not(.is-in) :is(.bpas-mb__tag, .bpas-mb__line, .bpas-mb__hook, .bpas-mb__body, .bpas-mb__mode, .bpas-btn, .bpas-mb__stat) { opacity: 0; } .bpas-wp-container .bpas-mb--v2.mb-js:not(.is-in) .bpas-mb__ring .a { stroke-dashoffset: 1; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__tag { animation: bpas-mb-rise 0.5s ease backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in { animation: bpas-mb-spin 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s 1 both; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__line { animation: bpas-mb-rise 0.6s ease 0.55s backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__hook { animation: bpas-mb-rise 0.6s ease 0.7s backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__body { animation: bpas-mb-rise 0.6s ease 0.85s backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__mode { animation: bpas-mb-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(1) { animation-delay: 1s; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(2) { animation-delay: 1.1s; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(3) { animation-delay: 1.2s; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(4) { animation-delay: 1.3s; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-btn { animation: bpas-mb-rise 0.6s ease 1.45s backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__stat { animation: bpas-mb-pop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__ring .a { animation: bpas-mb-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards; } .bpas-wp-container.bpas-fx-on .bpas-mb--v2.mb-js.is-in .bpas-mb__shine { animation: bpas-mb-shine 1.6s ease 1.2s 1 both; } @media (hover: hover) { .bpas-wp-container .bpas-mb--v2:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(13,35,68,0.36); } .bpas-wp-container .bpas-mb--v2 .bpas-btn:hover i { transform: translateX(4px); } .bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:hover img { transform: translateY(-4px) scale(1.03); } } @media (max-width: 860px) { .bpas-wp-container .bpas-mb--v2 { grid-template-columns: 1fr; gap: 30px; padding: 30px 20px 30px 30px; } .bpas-wp-container .bpas-mb__dial { width: 160px; height: 160px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mb--v2, .bpas-wp-container .bpas-mb--v2::after, .bpas-wp-container .bpas-mb--v2 *, .bpas-wp-container .bpas-mb--v2 *::before { animation: none !important; } .bpas-wp-container .bpas-mb--v2:hover, .bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:hover img { transform: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb--v2, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb--v2::after, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb--v2 *, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb--v2 *::before { animation: none !important; } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb--v2:hover, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-mb--v2 .bpas-mb__mode:hover img { transform: none; } .bpas-wp-container .bpas-cta .bpas-cta__actions { gap: 20px; align-items: stretch; width: 380px; max-width: 100%; } .bpas-wp-container .bpas-cta .bpas-cta__actions .bpas-btn { text-align: center; } .bpas-wp-container .bpas-pace { --pace-navy: #0d2344; --pace-gold: #e0b453; position: relative; display: block; width: 100%; max-width: 380px; padding: 20px 20px 20px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(224,180,83,0.16), transparent 42%), linear-gradient(160deg, #13305a 0%, var(--pace-navy) 62%, #0a1b36 100%); border: 1px solid rgba(224,180,83,0.38); box-shadow: 0 18px 40px rgba(0,0,0,0.28); color: #c9d4e6; text-decoration: none; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .bpas-wp-container .bpas-pace > span { display: block; } .bpas-wp-container .bpas-pace__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--pace-gold); margin-bottom: 15px; } .bpas-wp-container .bpas-pace__eyebrow i { font-style: normal; font-size: 10px; margin-right: 5px; vertical-align: 1px; } .bpas-wp-container .bpas-pace__logo { display: block; width: 100% !important; max-width: 340px !important; height: auto !important; margin: 0; } .bpas-wp-container .bpas-pace__title { margin-top: 20px; font-size: 19px; font-weight: 800; line-height: 1.35; color: #ffffff; } .bpas-wp-container .bpas-pace__text { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #c9d4e6; } .bpas-wp-container .bpas-pace__promise { margin-top: 15px; font-size: 14.5px; font-style: italic; line-height: 1.5; color: var(--pace-gold); } .bpas-wp-container .bpas-pace__go { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(224,180,83,0.25); font-size: 14px; font-weight: 700; color: #ffffff; } .bpas-wp-container .bpas-pace__go b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 10px; border-radius: 50%; background: rgba(224,180,83,0.18); color: var(--pace-gold); font-size: 13px; vertical-align: middle; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .bpas-wp-container .bpas-pace:hover, .bpas-wp-container .bpas-pace:focus-visible { border-color: var(--pace-gold); box-shadow: 0 22px 46px rgba(0,0,0,0.34); } .bpas-wp-container .bpas-pace:focus-visible { outline: 3px solid var(--pace-gold); outline-offset: 3px; } @media (hover: hover) { .bpas-wp-container .bpas-pace:hover { transform: translateY(-3px); } .bpas-wp-container .bpas-pace:hover .bpas-pace__go b { transform: translateX(3px); background: var(--pace-gold); color: var(--pace-navy); } } .bpas-wp-container .bpas-pace--compact .bpas-pace__title { font-size: 17px; margin-top: 15px; } @media (max-width: 720px) { .bpas-wp-container .bpas-cta .bpas-cta__actions { width: auto; } .bpas-wp-container .bpas-pace { max-width: none; } } @media (max-width: 480px) { .bpas-wp-container .bpas-cta { padding-left: 10px; padding-right: 10px; } .bpas-wp-container .bpas-pace { padding: 20px 15px 20px; } .bpas-wp-container .bpas-pace__logo { width: calc(100% + 20px) !important; max-width: none !important; margin: 0 -10px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-pace, .bpas-wp-container .bpas-pace *, .bpas-wp-container .bpas-pace:hover, .bpas-wp-container .bpas-pace:hover .bpas-pace__go b { transition: none !important; transform: none !important; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-pace, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-pace *, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-pace:hover, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-pace:hover .bpas-pace__go b { transition: none !important; transform: none !important; } .bpas-wp-container .bpas-hero__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; margin-bottom: 15px; } .bpas-wp-container .bpas-hero__boyum { display: block; width: auto !important; max-width: 100% !important; height: 28px !important; } .bpas-wp-container .bpas-hero__brand .bpas-eyebrow { margin: 0; padding-left: 15px; border-left: 1px solid rgba(245,179,66,0.45); line-height: 28px; } .bpas-wp-container { --bpas-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fx-ink: #063232; --fx-ink-2: #0b4141; --fx-ink-3: #145151; --fx-accent: #f5b342; --fx-hot: #e3572b; --fx-hot-text: #bd4520; --fx-tint: #ecf8f8; --fx-line: #cfe3e3; --fx-body: #46625f; --fx-strip: linear-gradient(90deg, #e3572b 0%, #f5b342 100%); --theme-color: var(--fx-hot); --theme-color-text: var(--fx-hot-text); --theme-color2: var(--fx-accent); --theme-color3: var(--fx-tint); --dark-color: var(--fx-ink); --gray-color: var(--fx-body); --card-dark: var(--fx-ink-2); --line-dark: #2a4675; --line-light: var(--fx-line); --white: #ffffff; box-sizing: border-box; font-family: var(--bpas-font); font-size: 16px; line-height: 1.7; color: var(--gray-color); text-align: left; -webkit-font-smoothing: antialiased; } .bpas-wp-container *, .bpas-wp-container *::before, .bpas-wp-container *::after { box-sizing: inherit; } .bpas-wp-container :where(h1, h2, h3, h4, p, figure) { margin: 0; padding: 0; } .bpas-wp-container :where(h1, h2, h3, h4) { color: var(--dark-color); font-weight: 700; line-height: 1.2; font-family: inherit; } .bpas-wp-container :where(ul, ol) { list-style: none; margin: 0; padding: 0; } .bpas-wp-container :where(li) { margin: 0; padding: 0; } .bpas-wp-container a { color: inherit; text-decoration: none; } .bpas-wp-container :focus-visible { outline: 3px solid var(--theme-color); outline-offset: 3px; } .bpas-wp-container .bpas-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .bpas-wp-container .bpas-eyebrow { display: inline-block; margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color-text); } .bpas-wp-container.bpas-brandrow .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container.bpas-hero-shot .bpas-shot { margin: 0; } .bpas-wp-container.bpas-hero-shot .bpas-shot__frame { padding: 15px; background: var(--fx-ink-2); border-color: #2a4675; } .bpas-wp-container.bpas-hero-shot .bpas-shot figcaption, .bpas-wp-container.bpas-hero-shot .bpas-shot__hint { color: #c9d3e3; } a.bpas-vlink { color: inherit; font-weight: inherit; text-decoration: underline dotted #e3572b; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: help; } .tab-panel a.bpas-vlink, .dark a.bpas-vlink { text-decoration-color: #f5b342; } .tab-panel a.bpas-vlink:hover, .tab-panel a.bpas-vlink:focus-visible, .dark a.bpas-vlink:hover { color: #f5b342; text-decoration-style: solid; } .bpas-wp-container .bpas-pos { margin: 5px 0 30px; padding-left: 20px; border-left: 4px solid var(--theme-color); font-size: clamp(18px, 1.8vw, 21px); font-weight: 600; line-height: 1.45; color: var(--dark-color); } .bpas-wp-container .bpas-pos strong { display: block; font-weight: 800; } .bpas-wp-container.bpas-mbwrap .bpas-mb--v2 { margin-top: 0; } .bpas-wp-container.bpas-ipxwrap { max-width: 560px; margin: 30px auto 0; } @keyframes bpas-meis-step { 0%, 30% { background: var(--theme-color-text); color: var(--white); box-shadow: 0 0 0 6px rgba(227,87,43,0.18); } 33.4%, 100% { background: var(--white); color: var(--theme-color-text); box-shadow: none; } } .bpas-wp-container .bpas-meis { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px; align-items: center; padding: 45px 50px 45px 55px; border-radius: 10px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 100% 0%, rgba(227,87,43,0.10), transparent 45%), var(--white); border: 1px solid var(--line-light); box-shadow: 0 24px 60px rgba(13,35,68,0.10); } .bpas-wp-container .bpas-meis::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--theme-color), var(--dark-color)); } .bpas-wp-container .bpas-meis__tag { display: inline-block; padding: 5px 15px; border-radius: 40px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--dark-color); } .bpas-wp-container .bpas-meis h2 { margin: 15px 0 5px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.02em; } .bpas-wp-container .bpas-meis__q { display: block; color: var(--gray-color); font-size: 0.62em; font-weight: 700; letter-spacing: 0; } .bpas-wp-container .bpas-meis h2 strong { color: var(--theme-color); font-weight: 800; } .bpas-wp-container .bpas-meis__logo { display: block; width: 200px !important; max-width: 100% !important; height: auto !important; margin: 4px 0 10px -15px; } .bpas-wp-container .bpas-meis p { font-size: 17px; line-height: 1.6; max-width: 520px; } .bpas-wp-container .bpas-meis__line { margin-top: 10px; font-size: 18px !important; font-weight: 700; font-style: italic; color: var(--dark-color); } .bpas-wp-container .bpas-meis__btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 15px 30px; border-radius: 40px; font-weight: 700; line-height: 1.2; color: var(--white); background: var(--theme-color-text); transition: background-color 0.25s ease; } .bpas-wp-container .bpas-meis__btn i { font-style: normal; transition: transform 0.25s ease; } .bpas-wp-container .bpas-meis__btn:hover { background: var(--dark-color); } .bpas-wp-container .bpas-meis__btn:focus-visible { outline: 3px solid var(--dark-color); outline-offset: 3px; } .bpas-wp-container .bpas-meis__path { position: relative; display: grid; gap: 15px; } .bpas-wp-container .bpas-meis__path::before { content: ""; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, var(--theme-color) 0 6px, transparent 6px 12px); opacity: 0.6; } .bpas-wp-container .bpas-meis__path li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; align-items: center; padding: 15px 20px 15px 0; border-radius: 10px; } .bpas-wp-container .bpas-meis__n { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 18px; font-weight: 800; color: var(--theme-color-text); background: var(--white); border: 2px solid var(--theme-color); } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__n { animation: bpas-meis-step 9s linear 1; animation-delay: calc(var(--k) * 3s); } .bpas-wp-container .bpas-meis__path b { display: block; font-size: 18px; line-height: 1.3; color: var(--dark-color); } .bpas-wp-container .bpas-meis__path small { display: block; font-size: 14px; line-height: 1.45; color: var(--gray-color); } @media (hover: hover) { .bpas-wp-container .bpas-meis__btn:hover i { transform: translate(2px, -2px); } } @media (max-width: 991px) { .bpas-wp-container .bpas-meis { grid-template-columns: 1fr; gap: 30px; padding: 35px 25px 30px 30px; } } @media (max-width: 720px) { .bpas-wp-container .bpas-meis { border-radius: 10px; padding: 30px 20px 25px 25px; } .bpas-wp-container .bpas-meis__btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-meis__n { animation: none; } .bpas-wp-container .bpas-meis__btn i { transition: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-meis__n { animation: none; } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-meis__btn i { transition: none; } .bpas-wp-container.bpas-ctaactions { display: flex; flex-direction: column; gap: 20px; align-items: stretch; width: 380px; max-width: 100%; margin-top: 10px; } .bpas-wp-container.bpas-ctaactions .bpas-btn { text-align: center; } @media (max-width: 720px) { .bpas-wp-container.bpas-ctaactions { width: auto; } } @media (max-width: 480px) { .bpas-wp-container .bpas-pace { padding: 20px 15px 20px; } .bpas-wp-container .bpas-pace__logo { width: calc(100% + 20px) !important; max-width: none !important; margin: 0 -10px; } } .bpas-wp-container.bpas-tmwrap { max-width: 980px; margin: 0 auto; padding: 30px 25px 0; } .bpas-wp-container .bpas-tm { font-size: 12px; line-height: 1.6; color: var(--gray-color); text-align: center; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__stat b { font-size: clamp(56px, 6vw, 76px); } .bpas-wp-container .visa-accent { --fx-accent: #f6be00; --fx-hot: #a87400; --fx-hot-text: #8a6100; --fx-strip: linear-gradient(90deg, #f6be00 0%, #e08a00 100%); --fx-strip-v: linear-gradient(180deg, #f6be00 0%, #e08a00 100%); } @keyframes bpas-vs-step { 0%, 12% { background: var(--fx-accent); color: var(--fx-ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-accent) 22%, transparent); } 14.3%, 100% { background: var(--fx-ink-2); color: var(--fx-accent); box-shadow: none; } } @keyframes bpas-vs-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bpas-wp-container .bpas-vs { --vn: var(--fx-ink); --vn2: var(--fx-ink-2); --vl: var(--fx-ink-3); --vy: var(--fx-accent); --vt: #c9d3e3; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 45px; align-items: start; padding: 45px 50px 45px 55px; border-radius: 10px; overflow: hidden; color: var(--vt); background: radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--fx-accent) 20%, transparent) 0%, rgba(13,35,68,0) 40%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--fx-accent) 10%, transparent) 0%, rgba(13,35,68,0) 40%), linear-gradient(135deg, var(--vn) 0%, var(--vn2) 100%); box-shadow: 0 34px 80px color-mix(in srgb, var(--fx-ink) 28%, transparent); } .bpas-wp-container .bpas-vs::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--fx-strip-v); } .bpas-wp-container .bpas-vs::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--fx-accent) 35%, transparent) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(210deg, #000 0%, transparent 45%); mask-image: linear-gradient(210deg, #000 0%, transparent 45%); } .bpas-wp-container .bpas-vs__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vn); background: var(--vy); border-radius: 40px; padding: 5px 15px; } .bpas-wp-container .bpas-vs h3 { margin: 20px 0 10px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--white); } .bpas-wp-container .bpas-vs h3 span { display: block; color: var(--vy); } .bpas-wp-container .bpas-vs__line { font-size: 17px; line-height: 1.6; color: var(--vt); max-width: 460px; } .bpas-wp-container .bpas-vs__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 40px; font-weight: 700; line-height: 1.2; color: var(--vn); background: var(--vy); transition: background-color 0.25s ease; } .bpas-wp-container .bpas-vs__btn i { font-style: normal; transition: transform 0.25s ease; } .bpas-wp-container .bpas-vs__btn:hover { background: var(--white); } .bpas-wp-container .bpas-vs__btn:focus-visible, .bpas-wp-container .bpas-vs__arc a:focus-visible { outline: 3px solid var(--vy); outline-offset: 3px; } .bpas-wp-container .bpas-vs__arc { position: relative; display: grid; gap: 4px; counter-reset: vs; } .bpas-wp-container .bpas-vs__arc::before { content: ""; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; background: var(--vl); } .bpas-wp-container .bpas-vs__arc::after { content: ""; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; background: var(--fx-strip-v); transform-origin: top; } .bpas-wp-container .bpas-vs:not(.is-in) .bpas-vs__arc::after { transform: scaleY(0); } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in .bpas-vs__arc::after { animation: bpas-vs-fill 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards; } .bpas-wp-container .bpas-vs__arc a { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 10px 10px 10px 0; border-radius: 10px; color: var(--vt); transition: background-color 0.25s ease, transform 0.25s ease; } .bpas-wp-container .bpas-vs__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--vy); background: var(--vn2); border: 2px solid var(--vl); } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in .bpas-vs__n { animation: bpas-vs-step 14s linear 1; animation-delay: calc(var(--k) * 2s); } .bpas-wp-container .bpas-vs__arc strong { display: block; font-size: 17px; line-height: 1.3; color: var(--white); } .bpas-wp-container .bpas-vs__arc small { display: block; font-size: 14px; line-height: 1.45; color: var(--vt); } .bpas-wp-container .bpas-vs__phase { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vy); } .bpas-wp-container .bpas-vs__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 14px; color: var(--vy); background: color-mix(in srgb, var(--fx-accent) 12%, transparent); transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; } @media (hover: hover) { .bpas-wp-container .bpas-vs__arc a:hover { background: rgba(255,255,255,0.06); transform: translateX(4px); } .bpas-wp-container .bpas-vs__arc a:hover .bpas-vs__go { background: var(--vy); color: var(--vn); transform: translateX(3px); } .bpas-wp-container .bpas-vs__btn:hover i { transform: translateX(4px); } } .bpas-wp-container .bpas-vs__wheel { margin: 25px 0 25px; max-width: 360px; } .bpas-wp-container .bpas-vs__wheel svg { display: block; width: 100%; height: auto; font-family: inherit; } .bpas-wp-container .bpas-vs__wheel figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--vt); } @media (max-width: 1099px) { .bpas-wp-container .bpas-vs { grid-template-columns: 1fr; gap: 30px; } .bpas-wp-container .bpas-vs__wheel { margin-left: auto; margin-right: auto; } } @media (max-width: 720px) { .bpas-wp-container .bpas-vs { padding: 30px 20px 30px 25px; border-radius: 10px; } .bpas-wp-container .bpas-vs__arc a { grid-template-columns: 44px minmax(0, 1fr); } .bpas-wp-container .bpas-vs__n { width: 44px; height: 44px; } .bpas-wp-container .bpas-vs__arc::before, .bpas-wp-container .bpas-vs__arc::after { left: 21px; } .bpas-wp-container .bpas-vs__go { display: none; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-vs__n, .bpas-wp-container .bpas-vs__arc::after { animation: none !important; } .bpas-wp-container .bpas-vs__arc a, .bpas-wp-container .bpas-vs__btn i, .bpas-wp-container .bpas-vs__go { transition: none !important; } .bpas-wp-container .bpas-vs__arc a:hover { transform: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-vs__n, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-vs__arc::after { animation: none !important; } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-vs__arc a, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-vs__btn i, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-vs__go { transition: none !important; } .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-vs__arc a:hover { transform: none; } .bpas-wp-container.sb1 { max-width: 1320px; margin: 0 auto; padding: 25px 25px 55px; background: transparent; } .bpas-wp-container section { scroll-margin-top: 100px; } .bpas-wp-container .bpas-h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; margin-bottom: 15px; } .bpas-wp-container .bpas-h2 strong { font-weight: 800; color: var(--theme-color); } .bpas-wp-container .bpas-intro { max-width: 760px; font-size: 17px; } .bpas-wp-container .bpas-center { text-align: center; } .bpas-wp-container .bpas-center .bpas-intro { margin: 0 auto; } .bpas-wp-container .sb1-sec { margin-top: 105px; } .bpas-wp-container .sb1-eyebrow-line { display: inline-flex; align-items: center; gap: 10px; } .bpas-wp-container .sb1-eyebrow-line::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--theme-color); } .bpas-wp-container .bpas-center .sb1-eyebrow-line::after { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--theme-color); } .bpas-wp-container .bpas-btn i { font-style: normal; display: inline-block; margin-left: 5px; transition: transform 0.25s ease; } .bpas-wp-container .bpas-btn--ghost:hover { color: var(--white); } @media (hover: hover) { .bpas-wp-container .bpas-btn:hover i { transform: translateX(4px); } } .bpas-wp-container .bpas-crumbs ol { display: flex; flex-wrap: wrap; row-gap: 4px; } .bpas-wp-container .bpas-crumbs li { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-color); } .bpas-wp-container .bpas-crumbs li + li::before { content: "\203A"; margin: 0 10px; color: var(--theme-color-text); } .bpas-wp-container .bpas-crumbs a:hover { color: var(--theme-color-text); } .bpas-wp-container .bpas-crumbs [aria-current="page"] { color: var(--dark-color); } @keyframes bpas-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes bpas-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .bpas-wp-container .bpas-draw svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bpas-draw svg :is(path, circle, rect, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 0; } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) .bpas-fx-item { opacity: 0; } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) .bpas-draw svg :is(path, circle, rect, line, polyline) { stroke-dashoffset: 1; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .bpas-fx-item { animation: bpas-rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(min(var(--i, 0), 8) * 0.06s); } .bpas-wp-container.bpas-fx-on [data-fx].is-in .bpas-draw svg :is(path, circle, rect, line, polyline) { animation: bpas-draw 1.1s ease backwards; animation-delay: calc(min(var(--i, 0), 8) * 0.06s + 0.25s); } @keyframes sb1-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .bpas-wp-container .sb1-hero { position: relative; overflow: hidden; isolation: isolate; margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 45px; align-items: center; padding: 70px 55px 125px; border-radius: 10px; background: linear-gradient(135deg, #10294d 0%, #163a6b 100%); color: #c9d3e3; } .bpas-wp-container .sb1-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 85% 15%, rgba(245,179,66,0.20) 0%, rgba(13,35,68,0) 40%), radial-gradient(circle at 70% 95%, rgba(227,87,43,0.22) 0%, rgba(13,35,68,0) 40%), linear-gradient(rgba(245,179,66,0.06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(245,179,66,0.06) 1px, transparent 1px) 0 0 / 40px 40px; } .bpas-wp-container.bpas-fx-on .sb1-hero__copy > * { animation: sb1-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .bpas-wp-container.bpas-fx-on .sb1-hero__copy h1 { animation-delay: 0.15s; } .bpas-wp-container.bpas-fx-on .sb1-hero__copy .sb1-hero__line { animation-delay: 0.3s; } .bpas-wp-container.bpas-fx-on .sb1-hero__copy .sb1-cert { animation-delay: 0.42s; } .bpas-wp-container.bpas-fx-on .sb1-hero__copy .sb1-hero__actions { animation-delay: 0.52s; } .bpas-wp-container .sb1-hero .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .sb1-hero h1 { margin-bottom: 20px; font-size: clamp(36px, 4.1vw, 58px); line-height: 1.03; letter-spacing: -0.035em; color: var(--white); } .bpas-wp-container .sb1-hero h1 span { display: block; } .bpas-wp-container .sb1-hero h1 .sb1-l2 { margin-top: 10px; font-size: 0.6em; line-height: 1.15; letter-spacing: -0.02em; color: var(--theme-color2); } .bpas-wp-container .sb1-hero__line { max-width: 540px; margin-bottom: 25px; font-size: 18px; line-height: 1.6; color: #c9d3e3; } .bpas-wp-container .sb1-cert { display: grid; gap: 10px; margin: 0 0 30px; } .bpas-wp-container .sb1-cert li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #c9d3e3; } .bpas-wp-container .sb1-cert b { color: var(--white); font-weight: 700; } .bpas-wp-container .sb1-cert__tick { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font-size: 12px; font-weight: 800; background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .sb1-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .bpas-wp-container .sb1-hero .bpas-btn--ghost { box-shadow: inset 0 0 0 2px #3a5a8c; } @keyframes sb1-flow { to { stroke-dashoffset: -24; } } @keyframes sb1-orbit { to { stroke-dashoffset: -60; } } @keyframes sb1-halo { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.08); } } @keyframes sb1-lit { 0%, 14% { fill: var(--fx-accent); } 16.6%, 100% { fill: var(--fx-ink-2); } } @keyframes sb1-lit-t { 0%, 14% { fill: var(--fx-ink); } 16.6%, 100% { fill: #e8edf5; } } @keyframes sb1-ln { 0%, 14% { stroke: var(--fx-accent); stroke-width: 2.6; } 16.6%, 100% { stroke: rgba(245,179,66,0.45); stroke-width: 1.6; } } @keyframes sb1-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } } @keyframes sb1-q { 0% { opacity: 0; transform: translateY(14px); visibility: visible; } 2.5%, 14% { opacity: 1; transform: none; visibility: visible; } 16.6% { opacity: 0; transform: translateY(-10px); visibility: hidden; } 100% { opacity: 0; visibility: hidden; } } @keyframes sb1-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes sb1-spin { to { transform: rotate(360deg); } } .bpas-wp-container .sb1-orbit { position: relative; margin: 0; padding: 20px 15px 15px; border-radius: 10px; background: rgba(8,22,46,0.72); border: 1px solid var(--line-dark); box-shadow: 0 30px 70px rgba(0,0,0,0.30); } .bpas-wp-container.bpas-fx-on .sb1-orbit { animation: sb1-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; } .bpas-wp-container .sb1-orbit__top { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a9b6cc; } .bpas-wp-container .sb1-orbit__live { display: inline-flex; align-items: center; gap: 5px; color: var(--theme-color2); } .bpas-wp-container .sb1-orbit__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color2); } .bpas-wp-container .sb1-orbit svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; } .bpas-wp-container .sb1-orbit .ln { fill: none; stroke: rgba(245,179,66,0.45); stroke-width: 1.6; stroke-dasharray: 4 8; } .bpas-wp-container.bpas-fx-on .sb1-orbit .ln { animation: sb1-flow 1.6s linear infinite, sb1-ln 18s linear infinite; animation-delay: 0s, calc(1.5s + var(--k) * 3s); } .bpas-wp-container .sb1-orbit .orb { fill: none; stroke: rgba(245,179,66,0.30); stroke-width: 1; stroke-dasharray: 2 10; } .bpas-wp-container.bpas-fx-on .sb1-orbit .orb { animation: sb1-orbit 9s linear infinite; } .bpas-wp-container .sb1-orbit .ring16 { transform-box: view-box; transform-origin: 280px 200px; } .bpas-wp-container.bpas-fx-on .sb1-orbit .ring16 { animation: sb1-spin 60s linear infinite; } .bpas-wp-container .sb1-orbit .ring16 circle { fill: var(--theme-color); } .bpas-wp-container .sb1-orbit .halo { transform-box: fill-box; transform-origin: center; } .bpas-wp-container .sb1-orbit .sat { transform-box: fill-box; transform-origin: center; } .bpas-wp-container.bpas-fx-on .sb1-orbit .sat { animation: sb1-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(0.5s + var(--k) * 0.09s); } .bpas-wp-container .sb1-orbit .sat circle { fill: var(--fx-ink-2); stroke: var(--theme-color2); stroke-width: 1.5; } .bpas-wp-container.bpas-fx-on .sb1-orbit .sat circle { animation: sb1-lit 18s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container .sb1-orbit .sat text { font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; fill: #e8edf5; } .bpas-wp-container.bpas-fx-on .sb1-orbit .sat text { animation: sb1-lit-t 18s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container .sb1-orbit .core text { font-weight: 800; text-anchor: middle; dominant-baseline: central; fill: var(--dark-color); } .bpas-wp-container .sb1-orbit__qs { position: relative; min-height: 112px; margin: 5px 0 0; } .bpas-wp-container .sb1-orbit__q { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 15px; padding: 15px 15px; border-radius: 10px; background: linear-gradient(135deg, var(--fx-ink-2), #163a6b); border: 1px solid rgba(245,179,66,0.35); opacity: 0; visibility: hidden; } .bpas-wp-container.bpas-fx-on .sb1-orbit__q { animation: sb1-q 18s ease-in-out infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container .sb1-orbit__q::before { content: ""; border-radius: 4px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); } .bpas-wp-container .sb1-orbit__q b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color2); } .bpas-wp-container .sb1-orbit__q strong { display: block; margin: 2px 0 2px; font-size: 17px; line-height: 1.3; color: var(--white); } .bpas-wp-container .sb1-orbit__q small { display: block; font-size: 14px; line-height: 1.5; color: #c9d3e3; } .bpas-wp-container .sb1-orbit:hover *, .bpas-wp-container .sb1-orbit:hover { animation-play-state: paused !important; } .bpas-wp-container .sb1-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -50px 50px 0; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 22px 50px rgba(13,35,68,0.12); overflow: hidden; } .bpas-wp-container .sb1-stats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--fx-strip); } .bpas-wp-container .sb1-stats li { display: flex; align-items: center; gap: 15px; padding: 25px 30px 25px; } .bpas-wp-container .sb1-stats li + li { border-left: 1px solid var(--line-light); } .bpas-wp-container .sb1-stats b { flex: 0 0 auto; font-size: clamp(40px, 4vw, 52px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--theme-color); font-variant-numeric: tabular-nums; } .bpas-wp-container .sb1-stats span { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--dark-color); } .bpas-wp-container .sb1-about { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 65px; align-items: center; } .bpas-wp-container .sb1-award { position: relative; margin: 0; padding: 35px 35px 65px; border-radius: 10px; background: radial-gradient(circle at 20% 10%, rgba(245,179,66,0.45), transparent 50%), radial-gradient(circle at 90% 90%, rgba(227,87,43,0.14), transparent 45%), var(--theme-color3); border: 1px solid var(--line-light); } .bpas-wp-container .sb1-award img { display: block; width: 100% !important; max-width: 460px !important; height: auto !important; margin: 0 auto; border-radius: 10px; box-shadow: 0 24px 50px rgba(13,35,68,0.16); } .bpas-wp-container .sb1-award__card { position: absolute; left: -18px; bottom: -26px; max-width: 330px; padding: 20px 20px 20px 25px; border-radius: 10px; background: var(--dark-color); color: #c9d3e3; box-shadow: 0 22px 44px rgba(13,35,68,0.24); } .bpas-wp-container .sb1-award__card::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); } .bpas-wp-container .sb1-award__card strong { display: block; font-size: 18px; line-height: 1.3; color: var(--white); } .bpas-wp-container .sb1-award__card span { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-dark); font-size: 14px; line-height: 1.4; color: var(--theme-color2); font-weight: 600; } .bpas-wp-container .sb1-about p { font-size: 17px; margin-bottom: 15px; } .bpas-wp-container .sb1-about .bpas-pos { margin: 20px 0 30px; } .bpas-wp-container .sb1-sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } .bpas-wp-container .sb1-sol { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 10px 26px rgba(13,35,68,0.06); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; } .bpas-wp-container .sb1-sol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .sb1-sol__head { position: relative; isolation: isolate; display: flex; align-items: center; gap: 15px; min-height: 88px; padding: 20px 20px; overflow: hidden; border-bottom: 1px solid var(--line-light); background: radial-gradient(circle at 92% -10%, rgba(227,87,43,0.30) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, #fdece5 0%, #ffffff 92%); } .bpas-wp-container .sb1-sol__head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(circle at 92% -10%, rgba(245,179,66,0.35) 0%, rgba(0,0,0,0) 60%), var(--dark-color); } .bpas-wp-container .sb1-sol__ico { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); box-shadow: 0 8px 18px rgba(13,35,68,0.18); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease, color 0.4s ease; } .bpas-wp-container .sb1-sol__ico svg { width: 30px; height: 30px; } .bpas-wp-container .sb1-sol__label { max-width: 12em; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35; color: var(--theme-color-text); transition: color 0.3s ease; } .bpas-wp-container .sb1-sol__num { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--theme-color); opacity: 0.18; pointer-events: none; transition: opacity 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .sb1-sol__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 20px 20px; } .bpas-wp-container .sb1-sol h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; } .bpas-wp-container .sb1-sol h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 10px; } .bpas-wp-container .sb1-sol h3 a:focus-visible { outline: none; } .bpas-wp-container .sb1-sol:focus-within { box-shadow: 0 0 0 3px var(--theme-color), 0 16px 32px rgba(13,35,68,0.12); } .bpas-wp-container .sb1-sol p { font-size: 15px; line-height: 1.6; } .bpas-wp-container .sb1-sol__go { margin-top: auto; padding-top: 15px; font-size: 14px; font-weight: 700; color: var(--dark-color); } .bpas-wp-container .sb1-sol__go i { font-style: normal; display: inline-block; transition: transform 0.3s ease; } @media (hover: hover) { .bpas-wp-container .sb1-sol:hover { transform: translateY(-4px); border-color: var(--theme-color); box-shadow: 0 28px 54px rgba(13,35,68,0.16); } .bpas-wp-container .sb1-sol:hover::after { transform: scaleX(1); } .bpas-wp-container .sb1-sol:hover .sb1-sol__head::before { opacity: 1; } .bpas-wp-container .sb1-sol:hover .sb1-sol__label { color: var(--theme-color2); } .bpas-wp-container .sb1-sol:hover .sb1-sol__num { opacity: 0.5; color: var(--theme-color2); transform: translateY(-50%) translateX(-6px) scale(1.08); } .bpas-wp-container .sb1-sol:hover .sb1-sol__ico { transform: rotate(-8deg) scale(1.08); background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container.bpas-fx-on .sb1-sol:hover .sb1-sol__ico svg :is(path, circle, rect, line, polyline) { animation: bpas-draw 0.9s ease both; } .bpas-wp-container .sb1-sol:hover .sb1-sol__go i { transform: translateX(5px); } } .bpas-wp-container .sb1-mgmt .bpas-mb--v2 { margin-top: 35px; } .bpas-wp-container .sb1-mods { position: relative; isolation: isolate; overflow: hidden; padding: 70px 50px 55px; border-radius: 10px; color: #c9d3e3; background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.16) 0%, rgba(13,35,68,0) 45%), radial-gradient(circle at 0% 100%, rgba(227,87,43,0.14) 0%, rgba(13,35,68,0) 40%), var(--dark-color); } .bpas-wp-container .sb1-mods::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4; pointer-events: none; background-image: radial-gradient(rgba(245,179,66,0.22) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 45%); mask-image: linear-gradient(200deg, #000 0%, transparent 45%); } .bpas-wp-container .sb1-mods .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .sb1-mods .sb1-eyebrow-line::before, .bpas-wp-container .sb1-mods .sb1-eyebrow-line::after { background: var(--theme-color2); } .bpas-wp-container .sb1-mods .bpas-h2 { color: var(--white); } .bpas-wp-container .sb1-mods .bpas-h2 strong { color: var(--theme-color2); } .bpas-wp-container .sb1-mods .bpas-intro { color: #c9d3e3; } .bpas-wp-container .sb1-mx { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 45px; } .bpas-wp-container .sb1-mx__rail { display: grid; gap: 5px; position: sticky; top: 24px; } .bpas-wp-container .sb1-mx__rail[hidden] { display: none; } .bpas-wp-container .sb1-mx__rail button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 5px 10px 5px 10px; border-radius: 10px; font-family: inherit; color: var(--white); background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .bpas-wp-container .sb1-mx__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--theme-color2); background: var(--fx-ink-2); border: 1px solid var(--line-dark); } .bpas-wp-container .sb1-mx__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .sb1-mx__rail b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; } .bpas-wp-container .sb1-mx__rail small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a9b6cc; } .bpas-wp-container .sb1-mx__rail em { font-style: normal; font-size: 12px; font-weight: 800; color: #a9b6cc; font-variant-numeric: tabular-nums; } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"] { background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"] :is(small, em) { color: var(--dark-color); } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"] .sb1-mx__ico { background: var(--dark-color); border-color: var(--dark-color); } .bpas-wp-container .sb1-mx__rail button:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 2px; } @media (hover: hover) { .bpas-wp-container .sb1-mx__rail button:not([aria-selected="true"]):hover { background: rgba(255,255,255,0.08); border-color: var(--line-dark); transform: translateX(3px); } } .bpas-wp-container .sb1-mx__stage { display: grid; gap: 25px; min-width: 0; } .bpas-wp-container .sb1-mx.is-js .sb1-mx__stage { display: block; } .bpas-wp-container .sb1-mod[hidden] { display: none; } @keyframes sb1-mod-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .bpas-wp-container.bpas-fx-on .sb1-mx.is-js .sb1-mod:not([hidden]) { animation: sb1-mod-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .sb1-mod { scroll-margin-top: 110px; overflow: hidden; border-radius: 10px; background: var(--white); color: var(--gray-color); box-shadow: 0 30px 70px rgba(0,0,0,0.25); } .bpas-wp-container .sb1-mod:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 4px; } .bpas-wp-container .sb1-mod__head { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 20px; align-items: center; padding: 25px 30px; background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.22), transparent 50%), linear-gradient(135deg, var(--fx-ink-2), #163a6b); color: #c9d3e3; } .bpas-wp-container .sb1-mod__num { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: -1; font-size: 110px; font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: rgba(245,179,66,0.12); } .bpas-wp-container .sb1-mod__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .sb1-mod__ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .sb1-mod__tag { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color2); } .bpas-wp-container .sb1-mod__head h3 { color: var(--white); font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2; } .bpas-wp-container .sb1-mod__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: 30px; padding: 30px 30px 10px; } .bpas-wp-container .sb1-mod__b1 h4, .bpas-wp-container .sb1-mod__ext h4 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color-text); } .bpas-wp-container .sb1-mod__b1 p { font-size: 16px; line-height: 1.7; } .bpas-wp-container .sb1-mod__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .bpas-wp-container .sb1-mod__chips li { padding: 5px 10px; border-radius: 40px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--dark-color); background: var(--theme-color3); border: 1px solid var(--line-light); } .bpas-wp-container .sb1-mod__ext { align-self: start; position: relative; padding: 20px 20px 20px 20px; border-radius: 10px; background: #fff6f2; border: 1px solid #f5d6ca; box-shadow: inset 4px 0 0 var(--theme-color); } .bpas-wp-container .sb1-mod__prods { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; } .bpas-wp-container .sb1-mod__prods a { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 40px; font-size: 13px; font-weight: 700; color: var(--white); background: var(--dark-color); transition: background-color 0.2s ease; } .bpas-wp-container .sb1-mod__prods a:hover { background: var(--theme-color-text); } .bpas-wp-container .sb1-mod__ext p { font-size: 15px; line-height: 1.6; color: var(--dark-color); } .bpas-wp-container .sb1-mod__ext p + p { margin-top: 10px; } .bpas-wp-container .sb1-mod__shot { grid-column: 1 / -1; } .bpas-wp-container .sb1-mod__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 25px; margin: 20px 30px 0; padding: 20px 0 25px; border-top: 1px dashed var(--line-light); } .bpas-wp-container .sb1-mod__guides { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .bpas-wp-container .sb1-mod__guides > a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 5px 15px 5px 5px; border-radius: 40px; font-size: 14px; font-weight: 700; color: var(--dark-color); background: var(--theme-color3); border: 1px solid var(--line-light); transition: background-color 0.2s ease, color 0.2s ease; } .bpas-wp-container .sb1-mod__guides > a > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: var(--theme-color2); background: var(--dark-color); } .bpas-wp-container .sb1-mod__guides > a:hover { background: var(--dark-color); color: var(--white); } .bpas-wp-container .sb1-mod__main { font-size: 15px; font-weight: 700; color: var(--dark-color); text-decoration: underline; text-decoration-color: var(--theme-color); text-underline-offset: 4px; } .bpas-wp-container .sb1-mod__main:hover { color: var(--theme-color-text); } .bpas-wp-container .sb1-mods__strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px 30px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line-dark); } .bpas-wp-container .sb1-mods__strip p { max-width: 820px; color: var(--white); } .bpas-wp-container .sb1-mods__strip a { font-weight: 700; color: var(--theme-color2); text-decoration: underline; text-underline-offset: 4px; } .bpas-wp-container .sb1-mod .bpas-shot { margin: 10px 0 0; } .bpas-wp-container .sb1-dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 40px; } .bpas-wp-container .sb1-dir > li { position: relative; overflow: hidden; padding: 20px 20px 20px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 8px 22px rgba(13,35,68,0.05); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .bpas-wp-container .sb1-dir > li::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform: scaleX(0.3); transform-origin: left; transition: transform 0.4s ease; } .bpas-wp-container .sb1-dir__num { position: absolute; right: 16px; top: 12px; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--theme-color); } .bpas-wp-container .sb1-dir h3 { margin: 4px 55px 10px 0; font-size: 18px; line-height: 1.3; } .bpas-wp-container .sb1-dir h3 a:hover { color: var(--theme-color-text); } .bpas-wp-container .sb1-dir ul { display: grid; gap: 2px; } .bpas-wp-container .sb1-dir ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: 14px; font-weight: 600; color: var(--gray-color); } .bpas-wp-container .sb1-dir ul a > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; padding: 4px; border-radius: 5px; color: var(--theme-color-text); background: var(--theme-color3); } .bpas-wp-container .sb1-dir ul a:hover { color: var(--dark-color); text-decoration: underline; text-decoration-color: var(--theme-color); } @media (hover: hover) { .bpas-wp-container .sb1-dir > li:hover { transform: translateY(-4px); border-color: var(--dark-color); box-shadow: 0 18px 36px rgba(13,35,68,0.12); } .bpas-wp-container .sb1-dir > li:hover::before { transform: scaleX(1); } } .bpas-wp-container .sb1-why { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; padding: 65px 50px; border-radius: 10px; color: #c9d3e3; background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.16) 0%, rgba(13,35,68,0) 45%), radial-gradient(circle at 0% 100%, rgba(227,87,43,0.14) 0%, rgba(13,35,68,0) 40%), var(--dark-color); } .bpas-wp-container .sb1-why .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .sb1-why .sb1-eyebrow-line::before { background: var(--theme-color2); } .bpas-wp-container .sb1-why .bpas-h2 { color: var(--white); } .bpas-wp-container .sb1-why .bpas-h2 strong { color: var(--theme-color2); } .bpas-wp-container .sb1-why__cards { display: grid; gap: 15px; } .bpas-wp-container .sb1-ben { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 20px; padding: 25px; border-radius: 10px; background: var(--card-dark); border: 1px solid var(--line-dark); overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease; } .bpas-wp-container .sb1-ben::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); transform: scaleY(0.35); transform-origin: top; transition: transform 0.4s ease; } .bpas-wp-container .sb1-ben__ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 54px; height: 54px; padding: 10px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .sb1-ben h3 { margin: 2px 0 5px; font-size: 21px; color: var(--white); } .bpas-wp-container .sb1-ben p { font-size: 15.5px; line-height: 1.6; color: #c9d3e3; } @media (hover: hover) { .bpas-wp-container .sb1-ben:hover { border-color: var(--theme-color2); transform: translateY(-3px); } .bpas-wp-container .sb1-ben:hover::before { transform: scaleY(1); } } .bpas-wp-container .sb1-visa .bpas-vs { margin-top: 40px; } .bpas-wp-container .sb1-visa .bpas-intro { font-weight: 600; color: var(--dark-color); } .bpas-wp-container .sb1-meis .bpas-meis { margin-top: 0; } .bpas-wp-container .sb1-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 50px; align-items: center; padding: 65px 55px; border-radius: 10px; color: #c9d3e3; background: radial-gradient(circle at 15% 0%, rgba(245,179,66,0.20) 0%, rgba(13,35,68,0) 45%), radial-gradient(circle at 100% 100%, rgba(227,87,43,0.22) 0%, rgba(13,35,68,0) 45%), linear-gradient(135deg, var(--dark-color), #163a6b); } .bpas-wp-container .sb1-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none; background-image: linear-gradient(rgba(245,179,66,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(245,179,66,0.06) 1px, transparent 1px); background-size: 40px 40px; } .bpas-wp-container .sb1-cta .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .sb1-cta .bpas-h2 { color: var(--white); } .bpas-wp-container .sb1-cta .bpas-h2 strong { color: var(--theme-color2); } .bpas-wp-container .sb1-cta p { max-width: 600px; font-size: 17px; color: #c9d3e3; } .bpas-wp-container .sb1-cta__actions { display: flex; flex-direction: column; gap: 20px; align-items: stretch; } .bpas-wp-container .sb1-cta__actions .bpas-btn { text-align: center; } .bpas-wp-container .bpas-cluster { position: relative; margin-top: 70px; padding: 40px 40px 45px; border-radius: 10px; background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.35), transparent 38%), var(--theme-color3); border: 1px solid var(--line-light); overflow: hidden; } .bpas-wp-container .bpas-cluster::before { content: ""; position: absolute; left: 40px; top: 0; width: 64px; height: 5px; border-radius: 0 0 5px 5px; background: var(--theme-color); } .bpas-wp-container .bpas-cluster h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 25px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; letter-spacing: 0; color: var(--dark-color); } .bpas-wp-container .bpas-cluster h2::before { content: "\2192"; display: inline-grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--dark-color); color: var(--theme-color2); font-size: 18px; } .bpas-wp-container .bpas-cluster ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; counter-reset: cl; } .bpas-wp-container .bpas-cluster li { counter-increment: cl; display: flex; } .bpas-wp-container .bpas-cluster a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; width: 100%; min-height: 128px; padding: 20px 60px 20px 20px; border: 1px solid var(--line-light); border-radius: 10px; background: var(--white); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--dark-color); transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .bpas-wp-container .bpas-cluster a::before { content: counter(cl, decimal-leading-zero); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--theme-color-text); } .bpas-wp-container .bpas-cluster a::after { content: "\2192"; position: absolute; right: 18px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--theme-color3); color: var(--dark-color); font-size: 15px; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .bpas-wp-container .bpas-cluster a:focus-visible { background: var(--dark-color); color: var(--white); border-color: var(--theme-color2); } @media (hover: hover) { .bpas-wp-container .bpas-cluster a:hover { background: var(--dark-color); color: var(--white); border-color: var(--theme-color2); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(13,35,68,0.18); } .bpas-wp-container .bpas-cluster a:hover::before { color: var(--theme-color2); } .bpas-wp-container .bpas-cluster a:hover::after { background: var(--theme-color2); color: var(--dark-color); transform: translateX(3px); } } .bpas-wp-container .sb1 .bpas-tm, .bpas-wp-container .bpas-tm { margin: 30px auto 0; max-width: 980px; } .bpas-wp-container .sb1-cv-solutions { content-visibility: auto; contain-intrinsic-size: auto 900px; } .bpas-wp-container .sb1-cv-dir { content-visibility: auto; contain-intrinsic-size: auto 1000px; } .bpas-wp-container .sb1-cv-why { content-visibility: auto; contain-intrinsic-size: auto 600px; } .bpas-wp-container .sb1-cv-visa { content-visibility: auto; contain-intrinsic-size: auto 1300px; } .bpas-wp-container .sb1-cv-meis { content-visibility: auto; contain-intrinsic-size: auto 560px; } .bpas-wp-container .bpas-cluster { content-visibility: auto; contain-intrinsic-size: auto 480px; } @media (max-width: 1199px) { .bpas-wp-container .sb1-dir { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1099px) { .bpas-wp-container .sb1-sols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bpas-wp-container .sb1-mx { grid-template-columns: 240px minmax(0, 1fr); } .bpas-wp-container .sb1-mod__body { grid-template-columns: 1fr; } } @media (max-width: 991px) { .bpas-wp-container .sb1-hero { grid-template-columns: 1fr; padding: 50px 30px 110px; } .bpas-wp-container .sb1-orbit { max-width: 560px; width: 100%; justify-self: center; } .bpas-wp-container .sb1-stats { margin: -45px 20px 0; } .bpas-wp-container .sb1-about, .bpas-wp-container .sb1-why, .bpas-wp-container .sb1-cta { grid-template-columns: 1fr; gap: 40px; } .bpas-wp-container .sb1-why, .bpas-wp-container .sb1-cta { padding: 50px 30px; } .bpas-wp-container .sb1-mx { grid-template-columns: 1fr; } .bpas-wp-container .sb1-mx__rail { position: static; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; } .bpas-wp-container .sb1-mx__rail button { flex: 0 0 auto; grid-template-columns: 34px auto; scroll-snap-align: start; } .bpas-wp-container .sb1-mx__rail small, .bpas-wp-container .sb1-mx__rail em { display: none; } .bpas-wp-container .sb1-mods { padding: 55px 30px 45px; } .bpas-wp-container .bpas-cluster ul { grid-template-columns: 1fr 1fr; } .bpas-wp-container .sb1-sec { margin-top: 80px; } } @media (max-width: 720px) { .bpas-wp-container.sb1 { padding: 15px 15px 40px; } .bpas-wp-container .sb1-hero { padding: 35px 20px 95px; border-radius: 10px; } .bpas-wp-container .sb1-hero .bpas-btn { width: 100%; text-align: center; } .bpas-wp-container .sb1-orbit { padding: 10px 10px 10px; } .bpas-wp-container .sb1-orbit__qs { min-height: 136px; } .bpas-wp-container .sb1-stats { grid-template-columns: 1fr; margin: -40px 10px 0; } .bpas-wp-container .sb1-stats li + li { border-left: 0; border-top: 1px solid var(--line-light); } .bpas-wp-container .sb1-stats li { padding: 15px 20px; } .bpas-wp-container .sb1-sols { grid-template-columns: 1fr; } .bpas-wp-container .sb1-award { padding: 20px 20px 20px; } .bpas-wp-container .sb1-award__card { position: relative; left: auto; bottom: auto; max-width: none; margin-top: 15px; } .bpas-wp-container .sb1-mods { padding: 45px 15px 30px; border-radius: 10px; } .bpas-wp-container .sb1-mod__head { grid-template-columns: 48px minmax(0, 1fr); padding: 20px 20px; gap: 15px; } .bpas-wp-container .sb1-mod__ico { width: 48px; height: 48px; border-radius: 10px; } .bpas-wp-container .sb1-mod__num { font-size: 80px; } .bpas-wp-container .sb1-mod__body { padding: 20px 20px 4px; } .bpas-wp-container .sb1-mod__foot { margin: 15px 20px 0; padding-bottom: 20px; } .bpas-wp-container .sb1-dir { grid-template-columns: 1fr 1fr; gap: 10px; } .bpas-wp-container .sb1-dir > li { padding: 20px 15px 15px; } .bpas-wp-container .sb1-dir__num { font-size: 26px; } .bpas-wp-container .sb1-dir h3 { margin-right: 35px; font-size: 16px; } .bpas-wp-container .sb1-why, .bpas-wp-container .sb1-cta { padding: 35px 20px; border-radius: 10px; } .bpas-wp-container .sb1-ben { grid-template-columns: 1fr; } .bpas-wp-container .sb1-ben__ico { grid-row: auto; margin-bottom: 15px; } .bpas-wp-container .bpas-cluster { padding: 30px 20px 20px; border-radius: 10px; } .bpas-wp-container .bpas-cluster::before { left: 18px; } .bpas-wp-container .bpas-cluster ul { grid-template-columns: 1fr; gap: 10px; } .bpas-wp-container .bpas-cluster a { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; padding: 15px 60px 15px 20px; } .bpas-wp-container .bpas-cluster a::after { top: 50%; margin-top: -15px; } } @media (max-width: 420px) { .bpas-wp-container .sb1-dir { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .sb1-hero__copy > *, .bpas-wp-container .sb1-orbit, .bpas-wp-container .sb1-orbit *, .bpas-wp-container .sb1-mod, .bpas-wp-container .sb1-mx * { animation: none !important; transition: none !important; } .bpas-wp-container .sb1-orbit__qs { min-height: 0; display: grid; gap: 10px; } .bpas-wp-container .sb1-orbit__q { position: static; opacity: 1; visibility: visible; padding: 10px 15px; } .bpas-wp-container .sb1-orbit__q small { display: none; } .bpas-wp-container .sb1-sol, .bpas-wp-container .sb1-sol *, .bpas-wp-container .sb1-dir > li, .bpas-wp-container .sb1-ben, .bpas-wp-container .bpas-cluster a { transition: none !important; } .bpas-wp-container .sb1-sol:hover, .bpas-wp-container .sb1-dir > li:hover, .bpas-wp-container .sb1-ben:hover, .bpas-wp-container .bpas-cluster a:hover { transform: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-hero__copy > *, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit *, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-mod, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-mx * { animation: none !important; transition: none !important; } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__qs { min-height: 0; display: grid; gap: 10px; } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__q { position: static; opacity: 1; visibility: visible; padding: 10px 15px; } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__q small { display: none; } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-sol, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-sol *, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-dir > li, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-ben, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-cluster a { transition: none !important; } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-sol:hover, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-dir > li:hover, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-ben:hover, .bpas-wp-container.sb1:not(.bpas-fx-on) .bpas-cluster a:hover { transform: none; } .bpas-wp-container .sb1-ic { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .sb1-mod__guides > a > span:first-child svg, .bpas-wp-container .sb1-dir ul a > span:first-child svg { display: block; width: 100%; height: 100%; } .bpas-wp-container .sb1-sol__ico svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .sb1-ben__ico svg { display: block; width: 100%; height: 100%; } .bpas-wp-container .sb1-orbit__pause { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px; border-radius: 40px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color2); border: 1px solid rgba(245,179,66,0.45); transition: background-color 0.2s ease, color 0.2s ease; } .bpas-wp-container .sb1-orbit__pause[hidden] { display: none; } .bpas-wp-container .sb1-orbit__pause::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color2); } .bpas-wp-container .sb1-orbit__pause:hover { background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .sb1-orbit__pause:hover::before { background: var(--dark-color); } .bpas-wp-container .sb1-orbit__pause:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 2px; } .bpas-wp-container .sb1-orbit.is-paused, .bpas-wp-container .sb1-orbit.is-paused * { animation-play-state: paused !important; } .bpas-wp-container .sb1-orbit.is-paused .sb1-orbit__pause::before { animation: none; background: #a9b6cc; } .bpas-wp-container .sb1-mod__ext a.bpas-vlink { color: var(--dark-color); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .sb1-orbit__pause { display: none; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__pause { display: none; } .bpas-wp-container .sb1-hero h1 .sb1-nw { display: inline; white-space: nowrap; } @media (max-width: 720px) { .bpas-wp-container .sb1-mod__num { display: none; } } @media (max-width: 480px) { .bpas-wp-container .bpas-center .sb1-eyebrow-line::before, .bpas-wp-container .bpas-center .sb1-eyebrow-line::after { display: none; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .sb1-orbit__qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bpas-wp-container .sb1-orbit__q b { display: none; } .bpas-wp-container .sb1-orbit__q strong { font-size: 15px; margin: 0; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__q b { display: none; } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-orbit__q strong { font-size: 15px; margin: 0; } .bpas-wp-container .sb1-mgmt { content-visibility: auto; contain-intrinsic-size: auto 900px; } .bpas-wp-container .sb1-mods { content-visibility: auto; contain-intrinsic-size: auto 1500px; } .bpas-wp-container .sb1-cta { content-visibility: auto; contain-intrinsic-size: auto 620px; } @media (max-width: 720px) { .bpas-wp-container .sb1-mgmt { contain-intrinsic-size: auto 1500px; } .bpas-wp-container .sb1-mods { contain-intrinsic-size: auto 2600px; } .bpas-wp-container .sb1-cv-solutions { contain-intrinsic-size: auto 2300px; } .bpas-wp-container .sb1-cv-dir { contain-intrinsic-size: auto 2600px; } .bpas-wp-container .sb1-cv-visa { contain-intrinsic-size: auto 2400px; } .bpas-wp-container .sb1-cta { contain-intrinsic-size: auto 1000px; } } .bpas-wp-container .sb1-mods__strip .sb1-mods__meis { display: block; margin-top: 5px; color: #c9d3e3; } .bpas-wp-container .sb1-mods__strip p a { color: var(--theme-color2); } .bpas-wp-container .sb1-mods__strip p a:hover { color: var(--white); } .bpas-wp-container .sb1-mx { display: block; margin-top: 40px; } .bpas-wp-container .sb1-mx__rail { position: relative; top: auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-bottom: 25px; padding: 10px; border-radius: 10px; background: rgba(8,22,46,0.55); border: 1px solid var(--line-dark); } .bpas-wp-container .sb1-mx__rail[hidden] { display: none; } .bpas-wp-container .sb1-mx__rail button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 104px; padding: 10px 10px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .bpas-wp-container .sb1-mx__rail button > span:nth-child(2) { display: block; } .bpas-wp-container .sb1-mx__rail b { font-size: 14px; line-height: 1.25; } .bpas-wp-container .sb1-mx__rail small { display: block; margin-bottom: 2px; font-size: 10px; line-height: 1.3; letter-spacing: 0.06em; } .bpas-wp-container .sb1-mx__rail em { position: absolute; right: 12px; top: 12px; font-size: 12px; } .bpas-wp-container .sb1-mx__ico { width: 36px; height: 36px; border-radius: 10px; } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"] { background: var(--theme-color2); color: var(--dark-color); box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 0 0 3px rgba(245,179,66,0.25); } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -10px; transform: rotate(45deg); border-radius: 3px; background: var(--theme-color2); } @media (hover: hover) { .bpas-wp-container .sb1-mx__rail button:not([aria-selected="true"]):hover { background: rgba(255,255,255,0.09); border-color: rgba(245,179,66,0.45); transform: translateY(-3px); } } .bpas-wp-container .sb1-mod { border-radius: 10px; box-shadow: 0 40px 90px rgba(0,0,0,0.32); } .bpas-wp-container .sb1-mod__head { grid-template-columns: 76px minmax(0, 1fr); gap: 20px; padding: 30px 35px 30px 30px; background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.28), transparent 45%), radial-gradient(circle at 0% 140%, rgba(227,87,43,0.30), transparent 45%), linear-gradient(135deg, var(--fx-ink-2) 0%, #163a6b 100%); } .bpas-wp-container .sb1-mod__head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.45; pointer-events: none; background-image: radial-gradient(rgba(245,179,66,0.25) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(250deg, #000 0%, transparent 55%); mask-image: linear-gradient(250deg, #000 0%, transparent 55%); } .bpas-wp-container .sb1-mod__ico { position: relative; width: 76px; height: 76px; border-radius: 10px; box-shadow: 0 0 0 7px rgba(245,179,66,0.14), 0 14px 30px rgba(0,0,0,0.25); } .bpas-wp-container .sb1-mod__ico svg { width: 40px; height: 40px; } .bpas-wp-container .sb1-mod__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-bottom: 10px; } .bpas-wp-container .sb1-mod__tag b { padding: 3px 10px; border-radius: 40px; font-size: 12px; letter-spacing: 0.08em; color: var(--dark-color); background: var(--theme-color2); } .bpas-wp-container .sb1-mod__tag span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #c9d3e3; } .bpas-wp-container .sb1-mod__head h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; max-width: 22em; } .bpas-wp-container .sb1-mod__num { font-size: 150px; right: 26px; color: rgba(245,179,66,0.10); } .bpas-wp-container .sb1-mod__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding: 35px 35px 10px; } .bpas-wp-container .sb1-mod__b1 h4, .bpas-wp-container .sb1-mod__ext h4 { display: flex; align-items: center; gap: 10px; font-size: 12px; } .bpas-wp-container .sb1-mod__b1 h4::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--theme-color); } .bpas-wp-container .sb1-mod__b1 p { font-size: 16.5px; line-height: 1.75; } .bpas-wp-container .sb1-mod__chips { display: grid; gap: 10px; margin-top: 20px; } .bpas-wp-container .sb1-mod__chips li { display: flex; align-items: center; gap: 10px; padding: 10px 15px 10px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; background: var(--theme-color3); border: 1px solid var(--line-light); } .bpas-wp-container .sb1-mod__chips li > span { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--theme-color2); background: var(--dark-color); } .bpas-wp-container .sb1-mod__ext { position: relative; align-self: stretch; padding: 30px 30px 30px; border-radius: 10px; border: 0; color: #d5dcea; box-shadow: 0 22px 44px rgba(13,35,68,0.20); background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.24), transparent 50%), radial-gradient(circle at 0% 100%, rgba(227,87,43,0.20), transparent 45%), linear-gradient(160deg, var(--fx-ink-2) 0%, var(--fx-ink) 100%); } .bpas-wp-container .sb1-mod__ext::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--theme-color2), var(--theme-color)); } .bpas-wp-container .sb1-mod__plus { position: absolute; left: -22px; top: 26px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; font-weight: 700; line-height: 1; color: var(--white); background: var(--theme-color-text); box-shadow: 0 0 0 6px var(--white), 0 8px 18px rgba(189,69,32,0.35); } .bpas-wp-container .sb1-mod__ext h4 { color: var(--theme-color2); } .bpas-wp-container .sb1-mod__prods { gap: 10px; margin: 4px 0 15px; } .bpas-wp-container .sb1-mod__prods a { min-height: 34px; padding: 5px 15px; font-size: 14px; color: var(--dark-color); background: var(--theme-color2); } .bpas-wp-container .sb1-mod__prods a:hover { background: var(--white); color: var(--dark-color); } .bpas-wp-container .sb1-mod__ext p { font-size: 15.5px; line-height: 1.7; color: #d5dcea; } .bpas-wp-container .sb1-mod__ext a.bpas-vlink { color: var(--white); text-decoration-color: var(--theme-color2); } .bpas-wp-container .sb1-mod__ext a.bpas-vlink:hover, .bpas-wp-container .sb1-mod__ext a.bpas-vlink:focus-visible { color: var(--theme-color2); } .bpas-wp-container .sb1-mod__ext :focus-visible { outline-color: var(--theme-color2); } .bpas-wp-container .sb1-mod__foot { margin: 25px 0 0; padding: 20px 35px; border-top: 1px solid var(--line-light); background: var(--theme-color3); } .bpas-wp-container .sb1-mod__guides > a { background: var(--white); } .bpas-wp-container .sb1-mod__pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 15px 20px; background: #f7f1e3; border-top: 1px solid var(--line-light); } .bpas-wp-container .sb1-mod__pager[hidden] { display: none; } .bpas-wp-container .sb1-mod__pager button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 15px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--dark-color); transition: background-color 0.2s ease, color 0.2s ease; } .bpas-wp-container .sb1-mod__pager button:last-child { justify-self: end; text-align: right; } .bpas-wp-container .sb1-mod__pager button small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color-text); } .bpas-wp-container .sb1-mod__pager button > span[aria-hidden] { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--theme-color2); background: var(--dark-color); transition: transform 0.2s ease; } .bpas-wp-container .sb1-mod__pager button:hover { background: var(--white); } .bpas-wp-container .sb1-mod__pager button:focus-visible { outline: 3px solid var(--theme-color); outline-offset: 2px; } @media (hover: hover) { .bpas-wp-container .sb1-mod__pager button:first-child:hover > span[aria-hidden] { transform: translateX(-3px); } .bpas-wp-container .sb1-mod__pager button:last-child:hover > span[aria-hidden] { transform: translateX(3px); } } .bpas-wp-container .sb1-mod__count { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--gray-color); font-variant-numeric: tabular-nums; } .bpas-wp-container .sb1-mod__count b { font-size: 20px; color: var(--theme-color-text); } .bpas-wp-container .sb1-mx:not(.is-js) .sb1-mx__stage { display: grid; gap: 30px; } @media (max-width: 1199px) { .bpas-wp-container .sb1-mx__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bpas-wp-container .sb1-mx__rail button { min-height: 0; flex-direction: row; align-items: center; padding-right: 35px; } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"]::after { display: none; } } @media (max-width: 1099px) { .bpas-wp-container .sb1-mod__body { grid-template-columns: 1fr; gap: 35px; } .bpas-wp-container .sb1-mod__plus { left: 26px; top: -20px; } } @media (max-width: 991px) { .bpas-wp-container .sb1-mx__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 10px; } .bpas-wp-container .sb1-mx__rail button { grid-template-columns: none; } .bpas-wp-container .sb1-mx__rail small { display: none; } .bpas-wp-container .sb1-mx__rail em { display: block; top: 50%; margin-top: -10px; } } @media (max-width: 720px) { .bpas-wp-container .sb1-mx__rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .bpas-wp-container .sb1-mx__rail button { flex: 0 0 auto; padding: 10px 15px 10px 10px; scroll-snap-align: center; } .bpas-wp-container .sb1-mx__rail em { display: none; } .bpas-wp-container .sb1-mod { border-radius: 10px; } .bpas-wp-container .sb1-mod__head { grid-template-columns: 1fr; gap: 15px; padding: 25px 20px; } .bpas-wp-container .sb1-mod__ico { width: 56px; height: 56px; border-radius: 10px; } .bpas-wp-container .sb1-mod__ico svg { width: 30px; height: 30px; } .bpas-wp-container .sb1-mod__body { padding: 25px 15px 5px; } .bpas-wp-container .sb1-mod__ext { padding: 30px 20px 20px; } .bpas-wp-container .sb1-mod__plus { left: 18px; } .bpas-wp-container .sb1-mod__foot { padding: 15px; } .bpas-wp-container .sb1-mod__pager { grid-template-columns: 1fr 1fr; padding: 10px 10px; } .bpas-wp-container .sb1-mod__count { display: none; } .bpas-wp-container .sb1-mod__pager button { padding: 10px; gap: 10px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .sb1-mx__rail button, .bpas-wp-container .sb1-mod__pager button, .bpas-wp-container .sb1-mod__pager span { transition: none !important; transform: none !important; } } .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-mx__rail button, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-mod__pager button, .bpas-wp-container.sb1:not(.bpas-fx-on) .sb1-mod__pager span { transition: none !important; transform: none !important; } .bpas-wp-container .sb1-award { padding: 30px 30px 30px; } .bpas-wp-container .sb1-award__card { position: relative; left: auto; bottom: auto; max-width: 380px; margin: -55px 0 0 20px; } @media (max-width: 720px) { .bpas-wp-container .sb1-award { padding: 20px 20px 20px; } .bpas-wp-container .sb1-award__card { margin: -30px 10px 0; max-width: none; } .bpas-wp-container .sb1-mx__rail { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; } } .bpas-wp-container .bpas-h2 { text-wrap: balance; } .bpas-wp-container .sb1-orbit__top { justify-content: flex-end; min-height: 28px; margin-bottom: 0; } .bpas-wp-container .sb1-orbit .halo { opacity: 0.35; } .bpas-wp-container .bpas-hero__brand:not(:has(.bpas-eyebrow)) { margin-bottom: 20px; } .bpas-wp-container [data-bpas-pn-target] { scroll-margin-top: 100px; } .bpas-wp-container.pn-measure :is(section, aside, nav, div, ol, ul) { content-visibility: visible !important; } .bpas-wp-container.sb1 { --sb1-h0: var(--fx-hot); --sb1-h1: color-mix(in oklch, var(--fx-hot) 80%, var(--fx-accent)); --sb1-h2: color-mix(in oklch, var(--fx-hot) 60%, var(--fx-accent)); --sb1-h3: color-mix(in oklch, var(--fx-hot) 40%, var(--fx-accent)); --sb1-h4: color-mix(in oklch, var(--fx-hot) 20%, var(--fx-accent)); --sb1-h5: var(--fx-accent); } .bpas-wp-container .sb1-orbit { overflow: hidden; border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent); background: radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--fx-hot) 26%, transparent), transparent 42%), radial-gradient(circle at 96% 96%, color-mix(in srgb, var(--fx-accent) 22%, transparent), transparent 46%), rgba(8,22,46,0.72); } .bpas-wp-container .sb1-orbit::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--fx-strip); } .bpas-wp-container .sb1-orbit .sb1-st-hot { stop-color: var(--fx-hot); } .bpas-wp-container .sb1-orbit .sb1-st-mid { stop-color: color-mix(in oklch, var(--fx-hot) 50%, var(--fx-accent)); } .bpas-wp-container .sb1-orbit .sb1-st-acc { stop-color: var(--fx-accent); } .bpas-wp-container .sb1-orbit .orb { stroke: url(#sb1-orb-grad); stroke-opacity: 0.9; stroke-width: 1.6; stroke-dasharray: 3 9; } .bpas-wp-container .sb1-orbit .ln { stroke: var(--c); stroke-opacity: 0.6; stroke-width: 1.8; } @keyframes sb1-ln2 { 0%, 14% { stroke-opacity: 1; stroke-width: 3.2; } 16.6%, 100% { stroke-opacity: 0.6; stroke-width: 1.8; } } .bpas-wp-container.bpas-fx-on .sb1-orbit .ln { animation: sb1-flow 1.6s linear infinite, sb1-ln2 18s linear infinite; animation-delay: 0s, calc(1.5s + var(--k) * 3s); } .bpas-wp-container .sb1-orbit .halo { fill: color-mix(in srgb, var(--fx-accent) 14%, transparent); } .bpas-wp-container .sb1-orbit .halo-ring { fill: none; stroke: url(#sb1-core-grad); stroke-width: 3; } .bpas-wp-container .sb1-orbit .sat .disc { fill: color-mix(in srgb, var(--c) 18%, var(--fx-ink-2)); stroke: var(--c); stroke-width: 2.6; } .bpas-wp-container .sb1-orbit .sat .glow { fill: var(--c); stroke: none; opacity: 0.18; transform-box: fill-box; transform-origin: center; } @keyframes sb1-lit2 { 0%, 14% { fill: var(--c); } 16.6%, 100% { fill: color-mix(in srgb, var(--c) 18%, var(--fx-ink-2)); } } @keyframes sb1-glow { 0%, 14% { opacity: 0.5; transform: scale(1.14); } 16.6%, 100% { opacity: 0.18; transform: none; } } .bpas-wp-container.bpas-fx-on .sb1-orbit .sat .disc { animation: sb1-lit2 18s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container.bpas-fx-on .sb1-orbit .sat .glow { animation: sb1-glow 18s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container .sb1-orbit__q { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%), linear-gradient(135deg, var(--fx-ink-2), #163a6b); } .bpas-wp-container .sb1-orbit__q::before { background: linear-gradient(180deg, var(--c), var(--fx-accent)); } .bpas-wp-container :is(#tab-adm, #panel-adm), .bpas-wp-container .sb1-dir > li:nth-child(1) { --mh: var(--fx-hot); } .bpas-wp-container :is(#tab-fin, #panel-fin), .bpas-wp-container .sb1-dir > li:nth-child(2) { --mh: color-mix(in oklch, var(--fx-hot) 93%, var(--fx-accent)); } .bpas-wp-container :is(#tab-crm, #panel-crm), .bpas-wp-container .sb1-dir > li:nth-child(3) { --mh: color-mix(in oklch, var(--fx-hot) 87%, var(--fx-accent)); } .bpas-wp-container :is(#tab-opp, #panel-opp), .bpas-wp-container .sb1-dir > li:nth-child(4) { --mh: color-mix(in oklch, var(--fx-hot) 80%, var(--fx-accent)); } .bpas-wp-container :is(#tab-sales, #panel-sales), .bpas-wp-container .sb1-dir > li:nth-child(5) { --mh: color-mix(in oklch, var(--fx-hot) 73%, var(--fx-accent)); } .bpas-wp-container :is(#tab-pur, #panel-pur), .bpas-wp-container .sb1-dir > li:nth-child(6) { --mh: color-mix(in oklch, var(--fx-hot) 67%, var(--fx-accent)); } .bpas-wp-container :is(#tab-bp, #panel-bp), .bpas-wp-container .sb1-dir > li:nth-child(7) { --mh: color-mix(in oklch, var(--fx-hot) 60%, var(--fx-accent)); } .bpas-wp-container :is(#tab-bank, #panel-bank), .bpas-wp-container .sb1-dir > li:nth-child(8) { --mh: color-mix(in oklch, var(--fx-hot) 53%, var(--fx-accent)); } .bpas-wp-container :is(#tab-inv, #panel-inv), .bpas-wp-container .sb1-dir > li:nth-child(9) { --mh: color-mix(in oklch, var(--fx-hot) 47%, var(--fx-accent)); } .bpas-wp-container :is(#tab-res, #panel-res), .bpas-wp-container .sb1-dir > li:nth-child(10) { --mh: color-mix(in oklch, var(--fx-hot) 40%, var(--fx-accent)); } .bpas-wp-container :is(#tab-prod, #panel-prod), .bpas-wp-container .sb1-dir > li:nth-child(11) { --mh: color-mix(in oklch, var(--fx-hot) 33%, var(--fx-accent)); } .bpas-wp-container :is(#tab-mrp, #panel-mrp), .bpas-wp-container .sb1-dir > li:nth-child(12) { --mh: color-mix(in oklch, var(--fx-hot) 27%, var(--fx-accent)); } .bpas-wp-container :is(#tab-svc, #panel-svc), .bpas-wp-container .sb1-dir > li:nth-child(13) { --mh: color-mix(in oklch, var(--fx-hot) 20%, var(--fx-accent)); } .bpas-wp-container :is(#tab-hr, #panel-hr), .bpas-wp-container .sb1-dir > li:nth-child(14) { --mh: color-mix(in oklch, var(--fx-hot) 13%, var(--fx-accent)); } .bpas-wp-container :is(#tab-proj, #panel-proj), .bpas-wp-container .sb1-dir > li:nth-child(15) { --mh: color-mix(in oklch, var(--fx-hot) 7%, var(--fx-accent)); } .bpas-wp-container :is(#tab-rep, #panel-rep), .bpas-wp-container .sb1-dir > li:nth-child(16) { --mh: var(--fx-accent); } .bpas-wp-container .sb1-mx__rail::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fx-strip); } .bpas-wp-container .sb1-mx__rail button { background-image: linear-gradient(var(--mh), var(--mh)); background-repeat: no-repeat; background-size: 28px 3px; background-position: 12px calc(100% - 8px); } .bpas-wp-container .sb1-mx__rail button .sb1-mx__ico { color: color-mix(in srgb, var(--mh) 55%, #fff); background: color-mix(in srgb, var(--mh) 24%, var(--fx-ink-2)); border-color: color-mix(in srgb, var(--mh) 70%, transparent); } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"] { background-image: linear-gradient(var(--mh), var(--mh)); background-repeat: no-repeat; background-position: 12px calc(100% - 8px); background-size: calc(100% - 24px) 3px; } .bpas-wp-container .sb1-mx__rail button[aria-selected="true"] .sb1-mx__ico { color: var(--fx-accent); background: var(--fx-ink); border-color: var(--fx-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh) 70%, transparent); } @media (hover: hover) { .bpas-wp-container .sb1-mx__rail button:not([aria-selected="true"]):hover { background-image: linear-gradient(var(--mh), var(--mh)); background-repeat: no-repeat; background-position: 12px calc(100% - 8px); background-size: calc(100% - 24px) 3px; border-color: color-mix(in srgb, var(--mh) 70%, transparent); box-shadow: 0 14px 26px rgba(0,0,0,0.22); } } .bpas-wp-container.bpas-fx-on .sb1-mx__rail button { transition: background-color 0.25s ease, background-size 0.35s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .bpas-wp-container .sb1-mod__head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--mh), var(--fx-accent)); } .bpas-wp-container .sb1-mod__ico { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mh) 55%, transparent), 0 14px 30px rgba(0,0,0,0.25); } .bpas-wp-container .sb1-mod__facts { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; } .bpas-wp-container .sb1-mod__facts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 15px; align-items: start; padding: 15px 15px 15px 10px; border-radius: 10px; font-size: 15.5px; line-height: 1.65; color: var(--fx-body); background: linear-gradient(90deg, color-mix(in srgb, var(--mh) 8%, #fff) 0%, #fff 70%); border: 1px solid var(--fx-line); } .bpas-wp-container .sb1-mod__dot { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 5px; background: var(--fx-ink); } .bpas-wp-container .sb1-mod__dot::before { content: ""; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--mh); } .bpas-wp-container.bpas-fx-on .sb1-mx.is-js .sb1-mod:not([hidden]) .sb1-mod__facts li { animation: bpas-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.12s + min(var(--i, 0), 8) * 0.06s); } .bpas-wp-container .sb1-mod__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 15px; } .bpas-wp-container .sb1-mod__chips li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px 15px 15px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--white); border: 0; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mh) 30%, transparent), transparent 60%), linear-gradient(150deg, var(--fx-ink-2), var(--fx-ink)); box-shadow: inset 0 3px 0 var(--mh); } .bpas-wp-container .sb1-mod__chips li > span { color: var(--fx-ink); background: var(--fx-accent); } .bpas-wp-container .sb1-mod__ext { display: flex; flex-direction: column; } .bpas-wp-container .sb1-mod__adds { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; } .bpas-wp-container .sb1-mod__adds li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 15px 10px 10px; border-radius: 10px; font-size: 15px; line-height: 1.65; color: #d5dcea; background: rgba(255,255,255,0.05); border: 1px solid color-mix(in srgb, var(--fx-accent) 20%, transparent); } .bpas-wp-container .sb1-mod__adds li::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; font-size: 15px; font-weight: 800; line-height: 1; color: var(--fx-ink); background: var(--fx-accent); } .bpas-wp-container .sb1-mod__flow { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; padding: 15px; border-radius: 10px; background: rgba(8,22,46,0.5); border: 1px dashed color-mix(in srgb, var(--fx-accent) 35%, transparent); } .bpas-wp-container .sb1-mod__flow-a, .bpas-wp-container .sb1-mod__flow-b { display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 10px 10px; border-radius: 10px; text-align: center; } .bpas-wp-container .sb1-mod__flow-a { background: var(--white); color: var(--fx-ink); box-shadow: inset 0 -3px 0 var(--mh); } .bpas-wp-container .sb1-mod__flow-b { background: var(--fx-accent); color: var(--fx-ink); } .bpas-wp-container .sb1-mod__flow small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .bpas-wp-container .sb1-mod__flow-a small { color: var(--fx-hot-text); } .bpas-wp-container .sb1-mod__flow b { font-size: 15px; line-height: 1.3; } .bpas-wp-container .sb1-mod__flow-plus { position: relative; display: grid; place-items: center; height: 100%; } .bpas-wp-container .sb1-mod__flow-plus::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, var(--mh), var(--fx-accent)); transform-origin: left; } .bpas-wp-container .sb1-mod__flow-plus i { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-size: 20px; font-weight: 800; line-height: 1; color: var(--white); background: var(--fx-hot-text); box-shadow: 0 0 0 4px var(--fx-ink); } @keyframes sb1-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } .bpas-wp-container.bpas-fx-on .sb1-mx.is-js .sb1-mod:not([hidden]) .sb1-mod__flow-plus::before { animation: sb1-grow-x 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s backwards; } .bpas-wp-container .sb1-dir > li::before { background: linear-gradient(90deg, var(--mh), var(--fx-accent)); } .bpas-wp-container .sb1-dir ul a > span:first-child { background: color-mix(in srgb, var(--mh) 14%, #fff); } @media (max-width: 1199px) { .bpas-wp-container .sb1-mx__rail button { background-position: 12px calc(100% - 6px); } } @media (max-width: 720px) { .bpas-wp-container .sb1-mod__chips { grid-template-columns: 1fr; } .bpas-wp-container .sb1-mod__chips li { flex-direction: row; align-items: center; } .bpas-wp-container .sb1-mod__facts li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 10px 10px 10px; font-size: 15px; } .bpas-wp-container .sb1-mod__dot { width: 24px; height: 24px; border-radius: 5px; } .bpas-wp-container .sb1-mod__flow { grid-template-columns: 1fr; gap: 0; } .bpas-wp-container .sb1-mod__flow-plus { height: 40px; } .bpas-wp-container .sb1-mod__flow-plus::before { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0 0 0 -1.5px; background: linear-gradient(180deg, var(--mh), var(--fx-accent)); transform-origin: top; } } .bpas-wp-container .sb1-why { grid-template-columns: 1fr; gap: 35px; align-items: stretch; } .bpas-wp-container .sb1-why__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 55px; align-items: end; } .bpas-wp-container .sb1-why__head > .bpas-eyebrow { grid-column: 1; } .bpas-wp-container .sb1-why__head > .bpas-h2 { grid-column: 1; margin-bottom: 0; } .bpas-wp-container .sb1-why__head > p { grid-column: 2; grid-row: 2; align-self: end; margin: 0; font-size: 17px; line-height: 1.65; } .bpas-wp-container .sb1-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .bpas-wp-container .sb1-ben { display: flex; flex-direction: column; padding: 30px 30px 25px; border-radius: 10px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 12%, transparent), transparent 50%), linear-gradient(160deg, var(--fx-ink-2), color-mix(in srgb, var(--fx-ink) 60%, transparent)); } .bpas-wp-container .sb1-ben::before { width: auto; left: 0; right: 0; bottom: auto; height: 4px; background: var(--fx-strip); transform: scaleX(0.3); transform-origin: left; } @media (hover: hover) { .bpas-wp-container .sb1-ben:hover::before { transform: scaleX(1); } } .bpas-wp-container .sb1-ben__top { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; } .bpas-wp-container .sb1-ben__ico { grid-row: auto; flex: 0 0 auto; } .bpas-wp-container .sb1-ben h3 { margin: 0; font-size: 22px; } .bpas-wp-container .sb1-ben__viz { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 20px 15px 15px; border-radius: 10px; background: rgba(8,22,46,0.55); border: 1px solid var(--line-dark); } .bpas-wp-container .sb1-ben > p { margin-bottom: 20px; } .bpas-wp-container .sb1-vcert__apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .bpas-wp-container .sb1-vcert__apps li { position: relative; padding: 10px 2px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--white); background: color-mix(in srgb, var(--c) 24%, var(--fx-ink-2)); border: 1.5px solid var(--c); } .bpas-wp-container .sb1-vcert__apps li::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 20px; margin: 1.5px 0 0 -1px; background: var(--c); transform-origin: top; } .bpas-wp-container .sb1-vcert__base { display: block; margin-top: 20px; padding: 10px 10px; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 800; color: var(--fx-ink); background: var(--fx-accent); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--fx-hot) 60%, var(--fx-accent)); } .bpas-wp-container .sb1-vup__track { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; } .bpas-wp-container .sb1-vup__from, .bpas-wp-container .sb1-vup__to { display: grid; place-items: center; min-height: 58px; padding: 10px 10px; border-radius: 10px; text-align: center; font-size: 13.5px; font-weight: 800; line-height: 1.3; } .bpas-wp-container .sb1-vup__from { color: #c9d3e3; border: 1.5px dashed rgba(201,211,227,0.55); } .bpas-wp-container .sb1-vup__to { color: var(--fx-ink); background: var(--fx-accent); } .bpas-wp-container .sb1-vup__arrow { display: block; width: 64px; height: 24px; fill: none; stroke: var(--fx-hot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .sb1-vup__arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; } .bpas-wp-container .sb1-vup__issues { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; } .bpas-wp-container .sb1-vup__issues li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 5px; border-radius: 40px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--white); background: color-mix(in srgb, var(--fx-hot) 22%, var(--fx-ink-2)); border: 1px solid color-mix(in srgb, var(--fx-hot) 65%, transparent); } .bpas-wp-container .sb1-vup__issues li::before { content: "!"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 900; color: var(--white); background: var(--fx-hot-text); } .bpas-wp-container .sb1-vup__ask { display: table; margin: 15px auto 0; padding: 5px 15px; border-radius: 40px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fx-accent); border: 1.5px solid color-mix(in srgb, var(--fx-accent) 70%, transparent); } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) .sb1-vcert__apps li::after, .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) .sb1-vup__arrow path { opacity: 0; } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) :is(.sb1-vcert__apps li, .sb1-vup__issues li) { opacity: 0; } @keyframes sb1-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bpas-wp-container.bpas-fx-on [data-fx].is-in :is(.sb1-vcert__apps li, .sb1-vup__issues li) { animation: bpas-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.35s + min(var(--i, 0), 8) * 0.06s); } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-vcert__apps li::after { animation: sb1-grow-y 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.75s + min(var(--i, 0), 8) * 0.06s); } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-vup__arrow path { animation: bpas-draw 0.7s ease 0.5s backwards; } @media (max-width: 991px) { .bpas-wp-container .sb1-why__head { grid-template-columns: 1fr; } .bpas-wp-container .sb1-why__head > p { grid-column: 1; grid-row: auto; margin-top: 15px; } .bpas-wp-container .sb1-why__cards { grid-template-columns: 1fr; } } @media (max-width: 720px) { .bpas-wp-container .sb1-ben { padding: 20px 20px 20px; } .bpas-wp-container .sb1-ben__ico { margin-bottom: 0; } .bpas-wp-container .sb1-ben__viz { padding: 15px 10px 10px; } .bpas-wp-container .sb1-vcert__apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bpas-wp-container .sb1-vcert__apps li::after { display: none; } .bpas-wp-container .sb1-vcert__base { margin-top: 10px; } .bpas-wp-container .sb1-vup__track { grid-template-columns: 1fr; justify-items: stretch; } .bpas-wp-container .sb1-vup__arrow { justify-self: center; transform: rotate(90deg); margin: 5px 0; } } .bpas-wp-container .bpas-meis { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--fx-hot) 9%, transparent), transparent 40%), var(--white); } .bpas-wp-container .bpas-meis::after { content: ""; position: absolute; right: 0; top: 0; width: 46%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.6; background-image: radial-gradient(color-mix(in srgb, var(--fx-hot) 35%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 55%); mask-image: linear-gradient(225deg, #000 0%, transparent 55%); } .bpas-wp-container .bpas-meis__line { display: inline-block; margin: 15px 10px 0 0; padding: 5px 15px 5px 15px; border-radius: 10px; font-style: normal !important; background: color-mix(in srgb, var(--fx-hot) 10%, #fff); box-shadow: inset 4px 0 0 var(--fx-hot); } .bpas-wp-container .bpas-meis__path { gap: 10px; padding: 20px; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--fx-hot) 9%, #fff) 0%, var(--fx-tint) 100%); border: 1px solid color-mix(in srgb, var(--fx-hot) 22%, #fff); } .bpas-wp-container .bpas-meis__path::before { left: 57px; top: 62px; bottom: 62px; width: 3px; opacity: 1; border-radius: 3px; background: linear-gradient(180deg, var(--fx-hot), var(--fx-ink) 55%, var(--fx-accent)); transform-origin: top; } .bpas-wp-container .bpas-meis__path li { grid-template-columns: 52px 40px minmax(0, 1fr); gap: 15px; padding: 15px 15px 15px 10px; border-radius: 10px; background: var(--white); border: 1px solid var(--fx-line); box-shadow: 0 10px 24px rgba(13,35,68,0.07); } .bpas-wp-container .bpas-meis__ico { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border-radius: 10px; color: var(--fx-hot-text); background: color-mix(in srgb, var(--fx-hot) 12%, #fff); } .bpas-wp-container .bpas-meis__ico svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bpas-meis__path li:last-child { background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 26%, transparent), transparent 60%), linear-gradient(150deg, var(--fx-ink-2), var(--fx-ink)); border-color: var(--fx-ink); } .bpas-wp-container .bpas-meis__path li:last-child b { color: var(--white); } .bpas-wp-container .bpas-meis__path li:last-child small { color: #c9d3e3; } .bpas-wp-container .bpas-meis__path li:last-child .bpas-meis__n { color: var(--fx-ink); background: var(--fx-accent); border-color: var(--fx-accent); } .bpas-wp-container .bpas-meis__path li:last-child .bpas-meis__ico { color: var(--fx-ink); background: var(--fx-accent); } @keyframes sb1-meis-line { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bpas-wp-container.bpas-fx-on .bpas-meis:not(.is-in) .bpas-meis__path::before { transform: scaleY(0); } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__path::before { animation: sb1-meis-line 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards; } .bpas-wp-container.bpas-fx-on .bpas-meis:not(.is-in) .bpas-meis__path li { opacity: 0; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__path li { animation: bpas-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.15s + var(--k) * 0.18s); } @media (max-width: 720px) { .bpas-wp-container .bpas-meis__path { padding: 15px; } .bpas-wp-container .bpas-meis__path li { grid-template-columns: 44px minmax(0, 1fr); padding: 10px; } .bpas-wp-container .bpas-meis__n { width: 44px; height: 44px; } .bpas-wp-container .bpas-meis__ico { display: none; } .bpas-wp-container .bpas-meis__path::before { left: 46px; top: 48px; bottom: 48px; } .bpas-wp-container .bpas-meis::after { display: none; } } .bpas-wp-container .sb1-cta { grid-template-columns: minmax(0, 1fr) auto; row-gap: 40px; } .bpas-wp-container .sb1-cta__actions .bpas-btn { padding-left: 35px; padding-right: 35px; } @property --bpas-a { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes bpas-fx-spin { to { --bpas-a: 360deg; } } @keyframes bpas-pace-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.55); } 50% { opacity: 1; transform: scale(1); } } @keyframes bpas-pace-gem { 0%, 100% { transform: scale(1); text-shadow: none; } 50% { transform: scale(1.4); text-shadow: 0 0 10px rgba(224,180,83,0.9); } } @keyframes bpas-pace-shine { 0% { opacity: 0; transform: translateX(-140%) skewX(-18deg); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(520%) skewX(-18deg); } } @keyframes bpas-pace-shine-h { 0% { opacity: 0; transform: translateX(-140%) skewX(-18deg); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(520%) skewX(-18deg); } } .bpas-wp-container .bpas-pace--fx { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 15px 45px; align-items: center; padding: 35px 40px 30px; border-radius: 10px; border: 2px solid transparent; background: radial-gradient(circle at 100% 0%, rgba(224,180,83,0.18), transparent 42%) padding-box, linear-gradient(160deg, #13305a 0%, var(--pace-navy) 62%, #0a1b36 100%) padding-box, conic-gradient(from var(--bpas-a), #e0b453 0%, rgba(224,180,83,0.25) 20%, color-mix(in srgb, var(--pace-gold) 55%, #fff) 35%, rgba(224,180,83,0.25) 55%, #e0b453 75%, rgba(224,180,83,0.25) 90%, #e0b453 100%) border-box; box-shadow: 0 30px 70px rgba(0,0,0,0.38), 0 0 0 1px rgba(224,180,83,0.12); } .bpas-wp-container.bpas-fx-on .bpas-pace--fx { animation: bpas-fx-spin 8s linear infinite; } .bpas-wp-container .bpas-pace--fx > .bpas-pace__l { position: relative; z-index: 1; padding-right: 40px; border-right: 1px solid rgba(224,180,83,0.25); } .bpas-wp-container .bpas-pace--fx > .bpas-pace__r { position: relative; z-index: 1; } .bpas-wp-container .bpas-pace--fx :is(.bpas-pace__l, .bpas-pace__r) > span { display: block; } .bpas-wp-container .bpas-pace--fx .bpas-pace__eyebrow { font-size: 14px; margin-bottom: 15px; } .bpas-wp-container .bpas-pace--fx .bpas-pace__eyebrow i { display: inline-block; } .bpas-wp-container.bpas-fx-on .bpas-pace--fx .bpas-pace__eyebrow i { animation: bpas-pace-gem 2.8s ease-in-out infinite; } .bpas-wp-container .bpas-pace--fx .bpas-pace__title { margin-top: 0; font-size: clamp(20px, 2vw, 25px); } .bpas-wp-container .bpas-pace--fx .bpas-pace__text { font-size: 15px; max-width: 620px; } .bpas-wp-container .bpas-pace--fx .bpas-pace__r > .bpas-pace__go { display: table; padding-top: 0; border-top: 0; margin-top: 20px; padding: 10px 10px 10px 20px; border-radius: 40px; background: rgba(224,180,83,0.12); border: 1px solid rgba(224,180,83,0.45); } .bpas-wp-container .bpas-pace__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bpas-wp-container .bpas-pace__stars i { position: absolute; width: 10px; height: 10px; background: color-mix(in srgb, var(--pace-gold) 55%, #fff); opacity: 0.55; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); } .bpas-wp-container .bpas-pace__stars i:nth-child(1) { left: 31%; top: 11%; } .bpas-wp-container .bpas-pace__stars i:nth-child(2) { left: 40%; top: 7%; width: 7px; height: 7px; } .bpas-wp-container .bpas-pace__stars i:nth-child(3) { right: 1.6%; top: 9%; width: 13px; height: 13px; } .bpas-wp-container .bpas-pace__stars i:nth-child(4) { right: 1.8%; bottom: 12%; width: 8px; height: 8px; } .bpas-wp-container .bpas-pace__stars i:nth-child(5) { left: 4%; bottom: 10%; width: 9px; height: 9px; } .bpas-wp-container .bpas-pace__stars i:nth-child(6) { left: 38%; bottom: 6%; width: 6px; height: 6px; } .bpas-wp-container.bpas-fx-on .bpas-pace__stars i { animation: bpas-pace-twinkle 3.6s ease-in-out infinite; } .bpas-wp-container.bpas-fx-on .bpas-pace__stars i:nth-child(2n) { animation-delay: -1.2s; } .bpas-wp-container.bpas-fx-on .bpas-pace__stars i:nth-child(3n) { animation-delay: -2.4s; } .bpas-wp-container .bpas-pace__shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%; z-index: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pace-gold) 16%, transparent), transparent); } .bpas-wp-container.bpas-fx-on .bpas-pace--fx.is-in .bpas-pace__shine { animation: bpas-pace-shine 1.8s ease 0.5s 1 backwards; } @media (hover: hover) { .bpas-wp-container.bpas-fx-on .bpas-pace--fx.is-in:hover .bpas-pace__shine { animation: bpas-pace-shine-h 1.2s ease 1; } } @media (max-width: 991px) { .bpas-wp-container .sb1-cta { grid-template-columns: 1fr; } .bpas-wp-container .sb1-cta__actions { align-items: flex-start; } .bpas-wp-container .bpas-pace--fx { grid-template-columns: 1fr; padding: 30px 30px; } .bpas-wp-container .bpas-pace--fx > .bpas-pace__l { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(224,180,83,0.25); max-width: 360px; } } @media (max-width: 575px) { .bpas-wp-container .sb1-cta__actions { align-items: stretch; } .bpas-wp-container .sb1-cta { padding-left: 15px; padding-right: 15px; } .bpas-wp-container .bpas-pace--fx { padding: 25px 10px 20px; border-radius: 10px; } .bpas-wp-container .bpas-pace--fx > .bpas-pace__r, .bpas-wp-container .bpas-pace--fx .bpas-pace__eyebrow { padding-left: 5px; padding-right: 5px; } .bpas-wp-container .bpas-pace--fx .bpas-pace__r > .bpas-pace__go { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; padding: 10px 10px 10px 15px; } .bpas-wp-container .bpas-pace--fx .bpas-pace__go b { flex: 0 0 auto; margin-left: 0; } } .bpas-wp-container .bpas-vs { border: 2px solid transparent; background: radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--fx-accent) 20%, transparent) 0%, transparent 40%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--fx-accent) 10%, transparent) 0%, transparent 40%), linear-gradient(135deg, var(--fx-ink) 0%, var(--fx-ink-2) 100%) padding-box, conic-gradient(from var(--bpas-a), var(--fx-accent) 0%, color-mix(in srgb, var(--fx-accent) 10%, transparent) 22%, color-mix(in srgb, var(--fx-accent) 45%, transparent) 50%, color-mix(in srgb, var(--fx-accent) 10%, transparent) 78%, var(--fx-accent) 100%) border-box; box-shadow: 0 34px 80px rgba(0,0,0,0.30); } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in { animation: bpas-fx-spin 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s 1 backwards; } .bpas-wp-container .bpas-vs__wheel { position: relative; } .bpas-wp-container .bpas-vs__wheel::before { content: ""; position: absolute; left: -8%; right: -8%; top: -8%; aspect-ratio: 1; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fx-accent) 22%, transparent) 0%, transparent 62%); } .bpas-wp-container .bpas-vs__wheel svg { transform-origin: 50% 50%; } .bpas-wp-container .bpas-vs .wseg, .bpas-wp-container .bpas-vs .wcentre { transform-box: view-box; transform-origin: 500px 500px; } .bpas-wp-container .bpas-vs .wseg--bok { --w: 0; } .bpas-wp-container .bpas-vs .wseg--str { --w: 1; } .bpas-wp-container .bpas-vs .wseg--pro { --w: 2; } .bpas-wp-container .bpas-vs .wseg--aut { --w: 3; } .bpas-wp-container .bpas-vs .wseg--ins { --w: 4; } @keyframes sb1-wheel-in { from { opacity: 0; transform: rotate(-24deg) scale(0.9); } to { opacity: 1; transform: none; } } @keyframes sb1-wseg-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } } .bpas-wp-container.bpas-fx-on .bpas-vs:not(.is-in) :is(.bpas-vs__wheel svg, .wseg, .wcentre, .bpas-vs__arc a) { opacity: 0; } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in .bpas-vs__wheel svg { animation: sb1-wheel-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards; } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in .wcentre { animation: sb1-wseg-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in .wseg { animation: sb1-wseg-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.5s + var(--w) * 0.12s); } .bpas-wp-container.bpas-fx-on .bpas-vs.is-in .bpas-vs__arc a { animation: bpas-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(0.35s + var(--k) * 0.09s); } .bpas-wp-container .bpas-vs__n { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .bpas-wp-container .bpas-vs__btn { box-shadow: 0 12px 26px color-mix(in srgb, var(--fx-accent) 22%, transparent); } @media (hover: hover) { .bpas-wp-container .bpas-vs__arc a:hover .bpas-vs__n { background: var(--vy); color: var(--vn); border-color: var(--vy); box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-accent) 22%, transparent); } .bpas-wp-container .bpas-vs__btn:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-accent) 22%, transparent), 0 14px 30px rgba(0,0,0,0.25); } } .bpas-wp-container .bpas-vs__arc a:focus-visible .bpas-vs__n { background: var(--vy); color: var(--vn); border-color: var(--vy); } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-vs__n, .bpas-wp-container .bpas-vs__btn { transition: none; } } .bpas-wp-container .sb1-dir > li { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .bpas-wp-container .sb1-dir ul a > span:first-child { transition: background-color 0.25s ease, color 0.25s ease; } @media (hover: hover) { .bpas-wp-container .sb1-dir > li:hover { border-color: var(--mh); background: linear-gradient(165deg, color-mix(in srgb, var(--mh) 22%, #fff) 0%, color-mix(in srgb, var(--mh) 7%, #fff) 60%, #fff 100%); box-shadow: 0 18px 36px color-mix(in srgb, var(--mh) 28%, transparent); } .bpas-wp-container .sb1-dir > li:hover ul a > span:first-child { color: var(--fx-ink); background: var(--mh); } } .bpas-wp-container .sb1-dir > li:focus-within { border-color: var(--mh); background: linear-gradient(165deg, color-mix(in srgb, var(--mh) 22%, #fff) 0%, color-mix(in srgb, var(--mh) 7%, #fff) 60%, #fff 100%); } @keyframes sb1-photo-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } } @keyframes sb1-card-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes sb1-bar-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes sb1-shine { 0% { opacity: 0; transform: translateX(-120%) skewX(-18deg); } 20%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) skewX(-18deg); } } .bpas-wp-container .sb1-award__card { overflow: hidden; isolation: isolate; transition: transform 0.3s ease, box-shadow 0.3s ease; } .bpas-wp-container .sb1-award__card::before { transform-origin: top; } .bpas-wp-container .sb1-award__card::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fx-accent) 22%, transparent), transparent); } @media (hover: hover) { .bpas-wp-container .sb1-award__card:hover { transform: translateY(-3px); box-shadow: 0 28px 54px rgba(0,0,0,0.26); } } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) :is(.sb1-award img, .sb1-award__card) { opacity: 0; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-award img { animation: sb1-photo-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s backwards; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-award__card { animation: sb1-card-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s backwards; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-award__card::before { animation: sb1-bar-y 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1s backwards; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-award__card::after { animation: sb1-shine 1.4s ease 1.2s 1 backwards; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .sb1-about .bpas-pos, .bpas-wp-container.bpas-fx-on .sb1-about.is-in .bpas-pos { animation: bpas-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s backwards; } @keyframes sb1-meis-dot { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 88% { opacity: 1; transform: translateY(100%); } 100% { opacity: 0; transform: translateY(100%); } } @keyframes sb1-meis-glow { 0%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sb1-pop2 { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } } .bpas-wp-container .bpas-meis__path::after { content: ""; position: absolute; left: 51px; top: 56px; bottom: 68px; width: 15px; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 6px, var(--fx-accent) 0 5px, color-mix(in srgb, var(--fx-accent) 35%, transparent) 5.5px 7.5px, transparent 8px); } .bpas-wp-container .bpas-meis__path li:last-child::after { content: ""; position: absolute; inset: -5px; border-radius: 10px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 65%, transparent), 0 0 30px color-mix(in srgb, var(--fx-accent) 45%, transparent); } .bpas-wp-container .bpas-meis__ico svg :is(path, rect, circle) { stroke-dasharray: 1; stroke-dashoffset: 0; } .bpas-wp-container.bpas-fx-on .bpas-meis:not(.is-in) :is(.bpas-meis__copy > :not(.bpas-meis__logo)) { opacity: 0; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__copy > :not(.bpas-meis__logo) { animation: bpas-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__copy > .bpas-meis__tag { animation: sb1-pop2 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__copy > h2 { animation-delay: 0.12s; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__copy > p { animation-delay: 0.3s; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__copy > .bpas-meis__line { animation-delay: 0.42s; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__copy > .bpas-meis__btn { animation-delay: 0.54s; } .bpas-wp-container.bpas-fx-on .bpas-meis:not(.is-in) .bpas-meis__ico svg :is(path, rect, circle) { stroke-dashoffset: 1; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__ico svg :is(path, rect, circle) { animation: bpas-draw 0.9s ease backwards; animation-delay: calc(0.45s + var(--k) * 0.18s); } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__path::after { animation: sb1-meis-dot 2.2s cubic-bezier(0.45, 0, 0.25, 1) 1s 1 backwards; } .bpas-wp-container.bpas-fx-on .bpas-meis.is-in .bpas-meis__path li:last-child::after { animation: sb1-meis-glow 1.4s ease 3s 1 backwards; } @media (max-width: 720px) { .bpas-wp-container .bpas-meis__path::after { left: 40px; top: 42px; bottom: 54px; } } .bpas-wp-container.bpas-pn2-host { position: static !important; display: block !important; width: 0 !important; height: 0 !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; } .bpas-wp-container .bpas-pn2[hidden], .bpas-wp-container .bpas-pn2__card[hidden] { display: none !important; } .bpas-wp-container .bpas-pn2 { --pn2-w: 268px; --pn2-p: 0; --pn2-line: 0px; font-family: var(--bpas-font, inherit); } .bpas-wp-container .bpas-pn2 a { text-decoration: none; } .bpas-wp-container .bpas-pn2__card { box-sizing: border-box; position: relative; width: var(--pn2-w); padding: 30px 10px 10px 10px; border-radius: 10px; background: #ffffff; border: 1px solid var(--fx-line); box-shadow: 0 24px 60px color-mix(in srgb, var(--fx-ink) 18%, transparent); text-align: right; } .bpas-wp-container .bpas-pn2__tab { position: absolute; top: -15px; right: 14px; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 15px; border-radius: 40px; background: var(--fx-ink); color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 20px color-mix(in srgb, var(--fx-ink) 25%, transparent); } .bpas-wp-container .bpas-pn2__tab span { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-accent); } .bpas-wp-container .bpas-pn2__tab b { font-weight: 700; font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-pn2__list { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .bpas-wp-container .bpas-pn2__list::before, .bpas-wp-container .bpas-pn2__list::after { content: ""; position: absolute; right: 10px; top: 21px; width: 2px; border-radius: 2px; } .bpas-wp-container .bpas-pn2__list::before { bottom: 21px; background: color-mix(in srgb, var(--fx-line) 70%, var(--fx-ink) 12%); } .bpas-wp-container .bpas-pn2__list::after { height: var(--pn2-line); background: var(--fx-hot); transition: height 0.35s cubic-bezier(.2,.7,.2,1); } .bpas-wp-container .bpas-pn2__list li { margin: 0; padding: 0; } .bpas-wp-container .bpas-pn2__list li::marker { content: none; } .bpas-wp-container .bpas-pn2__list a { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 10px; min-height: 42px; color: var(--fx-ink); } .bpas-wp-container .bpas-pn2__lab { justify-self: end; display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; padding: 5px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.3; transition: background-color 0.2s ease; } .bpas-wp-container .bpas-pn2__n { flex: 0 0 auto; font-size: 13.5px; font-weight: 800; color: var(--fx-hot-text); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-pn2__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bpas-wp-container .bpas-pn2__dot { justify-self: center; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 2px solid color-mix(in srgb, var(--fx-line) 55%, var(--fx-ink) 25%); transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .bpas-wp-container .bpas-pn2__list a.is-past .bpas-pn2__dot { background: var(--fx-hot); border-color: var(--fx-hot); } .bpas-wp-container .bpas-pn2__list a[aria-current="location"] .bpas-pn2__lab { background: color-mix(in srgb, var(--fx-accent) 30%, #ffffff); font-weight: 800; } .bpas-wp-container .bpas-pn2__list a[aria-current="location"] .bpas-pn2__dot { width: 18px; height: 18px; background: var(--fx-accent); border: 3px solid var(--fx-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-accent) 30%, transparent); } .bpas-wp-container .bpas-pn2__list a:hover .bpas-pn2__lab { background: color-mix(in srgb, var(--fx-accent) 16%, #ffffff); } .bpas-wp-container .bpas-pn2__list a:focus-visible { outline: none; } .bpas-wp-container .bpas-pn2__list a:focus-visible .bpas-pn2__lab { outline: 3px solid var(--fx-hot); outline-offset: 1px; } .bpas-wp-container .bpas-pn2__top { display: none; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--fx-line); text-align: center; } .bpas-wp-container .bpas-pn2__top a { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 15px; border-radius: 40px; font-size: 14px; font-weight: 700; color: var(--fx-ink); } .bpas-wp-container .bpas-pn2__top a:focus-visible { outline: 3px solid var(--fx-hot); outline-offset: 1px; } .bpas-wp-container .bpas-pn2__pill { all: unset; box-sizing: border-box; position: fixed; left: 50%; bottom: 20px; z-index: 9990; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 2 * var(--bpas-wa-lane, 16px)); min-height: 52px; padding: 5px 20px 5px 5px; border-radius: 40px; overflow: hidden; cursor: pointer; color: #ffffff; background: color-mix(in srgb, var(--fx-ink) 95%, transparent); border: 1px solid color-mix(in srgb, var(--fx-accent) 40%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--fx-ink) 34%, transparent); transform: translate(-50%, 0); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease; font-family: inherit; } .bpas-wp-container .bpas-pn2__pill::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--pn2-p) * 100%); background: var(--fx-strip, var(--fx-hot)); } .bpas-wp-container .bpas-pn2__pill:focus-visible { outline: 3px solid var(--fx-accent); outline-offset: 3px; } .bpas-wp-container .bpas-pn2:not(.is-on) .bpas-pn2__pill { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; } .bpas-wp-container .bpas-pn2__ico { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--fx-ink); background: var(--fx-accent); } .bpas-wp-container .bpas-pn2__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .bpas-wp-container .bpas-pn2__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; } .bpas-wp-container .bpas-pn2__txt small { white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, #ffffff 78%, var(--fx-ink)); } .bpas-wp-container .bpas-pn2__txt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 700; } .bpas-wp-container .bpas-pn2__chev { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 13px; color: var(--fx-accent); background: color-mix(in srgb, var(--fx-accent) 16%, transparent); transition: transform 0.3s ease; } .bpas-wp-container .bpas-pn2.is-open .bpas-pn2__chev, .bpas-wp-container .bpas-pn2.is-card .bpas-pn2__chev { transform: rotate(180deg); } @media not all and (min-width: 1280px) and (hover: hover) and (pointer: fine) { .bpas-wp-container .bpas-pn2__card { position: fixed; left: 50%; bottom: 84px; z-index: 9991; width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto; overscroll-behavior: contain; transform: translateX(-50%); padding-top: 55px; } .bpas-wp-container .bpas-pn2__tab { top: 14px; right: 14px; } .bpas-wp-container .bpas-pn2__top { display: block; } } @media (max-width: 480px) { .bpas-wp-container .bpas-pn2__pill { bottom: 12px; min-height: 48px; } .bpas-wp-container .bpas-pn2__card { bottom: 72px; } } @media (min-width: 1280px) and (hover: hover) and (pointer: fine) { .bpas-wp-container .bpas-pn2__card { position: fixed; right: 20px; top: 50%; z-index: 9980; transform: translateY(-50%); } .bpas-wp-container .bpas-pn2__card.is-scroll { max-height: calc(100vh - 220px); overflow-y: auto; overscroll-behavior: contain; padding-top: 45px; } .bpas-wp-container .bpas-pn2__card.is-scroll .bpas-pn2__tab { top: 10px; } } @media print { .bpas-wp-container .bpas-pn2 { display: none !important; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-pn2 *, .bpas-wp-container .bpas-pn2__list::after { transition: none !important; } } .bpas-wp-container.pn-measure :is(section, aside, nav, div, ol, ul) { content-visibility: visible !important; } @media (min-width: 1280px) and (hover: hover) and (pointer: fine) { .bpas-wp-container.sb1.bpas-pn2-on { padding-right: max(24px, calc(312px - (100vw - 1320px) / 2)); } } .bpas-wp-container.bc { --fx-ink: #0d2344; --fx-ink-2: #13305a; --fx-ink-3: #2a4675; --fx-accent: #f5b342; --fx-hot: #b07408; --fx-hot-text: #9a5b0b; --fx-tint: #f7f5f0; --fx-line: #e4dfd3; --fx-body: #4a5672; --fx-strip: linear-gradient(90deg, #e3572b 0%, #f5b342 100%); --fx-strip-v: linear-gradient(180deg, #f5b342 0%, #e3572b 100%); --line-dark: #2a4675; --sb1-spec-a: #e3572b; --bc-navy: #0d2344; --bc-amber: #f5b342; --bc-amber-text: #9a5b0b; --sb1-h0: #e3572b; --sb1-h1: color-mix(in oklch, #e3572b 75%, #f5b342); --sb1-h2: color-mix(in oklch, #e3572b 50%, #f5b342); --sb1-h3: color-mix(in oklch, #e3572b 25%, #f5b342); --sb1-h4: #f5b342; } .bpas-wp-container.bc .bpas-meis { --fx-hot: #e3572b; --fx-hot-text: #bd4520; --theme-color: #e3572b; --theme-color-text: #bd4520; } .bpas-wp-container.bc :is(#tab-fin, #panel-fin), .bpas-wp-container.bc .sb1-dir > li:nth-child(1) { --mh: color-mix(in oklch, #e3572b 100%, #f5b342); } .bpas-wp-container.bc :is(#tab-sales, #panel-sales), .bpas-wp-container.bc .sb1-dir > li:nth-child(2) { --mh: color-mix(in oklch, #e3572b 93%, #f5b342); } .bpas-wp-container.bc :is(#tab-pur, #panel-pur), .bpas-wp-container.bc .sb1-dir > li:nth-child(3) { --mh: color-mix(in oklch, #e3572b 87%, #f5b342); } .bpas-wp-container.bc :is(#tab-inv, #panel-inv), .bpas-wp-container.bc .sb1-dir > li:nth-child(4) { --mh: color-mix(in oklch, #e3572b 80%, #f5b342); } .bpas-wp-container.bc :is(#tab-wms, #panel-wms), .bpas-wp-container.bc .sb1-dir > li:nth-child(5) { --mh: color-mix(in oklch, #e3572b 73%, #f5b342); } .bpas-wp-container.bc :is(#tab-fa, #panel-fa), .bpas-wp-container.bc .sb1-dir > li:nth-child(6) { --mh: color-mix(in oklch, #e3572b 67%, #f5b342); } .bpas-wp-container.bc :is(#tab-plan, #panel-plan), .bpas-wp-container.bc .sb1-dir > li:nth-child(7) { --mh: color-mix(in oklch, #e3572b 60%, #f5b342); } .bpas-wp-container.bc :is(#tab-asm, #panel-asm), .bpas-wp-container.bc .sb1-dir > li:nth-child(8) { --mh: color-mix(in oklch, #e3572b 53%, #f5b342); } .bpas-wp-container.bc :is(#tab-mfg, #panel-mfg), .bpas-wp-container.bc .sb1-dir > li:nth-child(9) { --mh: color-mix(in oklch, #e3572b 47%, #f5b342); } .bpas-wp-container.bc :is(#tab-proj, #panel-proj), .bpas-wp-container.bc .sb1-dir > li:nth-child(10) { --mh: color-mix(in oklch, #e3572b 40%, #f5b342); } .bpas-wp-container.bc :is(#tab-res, #panel-res), .bpas-wp-container.bc .sb1-dir > li:nth-child(11) { --mh: color-mix(in oklch, #e3572b 33%, #f5b342); } .bpas-wp-container.bc :is(#tab-svc, #panel-svc), .bpas-wp-container.bc .sb1-dir > li:nth-child(12) { --mh: color-mix(in oklch, #e3572b 27%, #f5b342); } .bpas-wp-container.bc :is(#tab-rm, #panel-rm), .bpas-wp-container.bc .sb1-dir > li:nth-child(13) { --mh: color-mix(in oklch, #e3572b 20%, #f5b342); } .bpas-wp-container.bc :is(#tab-hr, #panel-hr), .bpas-wp-container.bc .sb1-dir > li:nth-child(14) { --mh: color-mix(in oklch, #e3572b 13%, #f5b342); } .bpas-wp-container.bc :is(#tab-india, #panel-india), .bpas-wp-container.bc .sb1-dir > li:nth-child(15) { --mh: color-mix(in oklch, #e3572b 7%, #f5b342); } .bpas-wp-container.bc :is(#tab-rep, #panel-rep), .bpas-wp-container.bc .sb1-dir > li:nth-child(16) { --mh: color-mix(in oklch, #e3572b 0%, #f5b342); } @keyframes bc-lit { 0%, 17% { fill: var(--c); } 20%, 100% { fill: color-mix(in srgb, var(--c) 28%, var(--fx-ink)); } } @keyframes bc-glow { 0%, 17% { opacity: 0.55; transform: scale(1.14); } 20%, 100% { opacity: 0.2; transform: none; } } @keyframes bc-ln { 0%, 17% { stroke-opacity: 1; stroke-width: 3.6; } 20%, 100% { stroke-opacity: 0.9; stroke-width: 2.6; } } @keyframes bc-lit-t { 0%, 17% { fill: var(--fx-ink); } 20%, 100% { fill: #ffffff; } } @keyframes bc-q { 0% { opacity: 0; transform: translateY(14px); visibility: visible; } 3%, 17% { opacity: 1; transform: none; visibility: visible; } 20% { opacity: 0; transform: translateY(-10px); visibility: hidden; } 100% { opacity: 0; visibility: hidden; } } .bpas-wp-container.bc .sb1-orbit { background: rgba(8,22,46,0.78); } .bpas-wp-container.bc .sb1-orbit .ln { stroke-opacity: 0.9; stroke-width: 2.6; } .bpas-wp-container.bc .sb1-orbit .orb { stroke-width: 2.2; } .bpas-wp-container.bc .sb1-orbit .halo-ring { stroke-width: 3.5; } .bpas-wp-container.bc .sb1-orbit .sat .disc { fill: color-mix(in srgb, var(--c) 28%, var(--fx-ink)); stroke-width: 3.2; } .bpas-wp-container.bc .sb1-orbit .sat text { fill: #ffffff; } .bpas-wp-container.bc .sb1-orbit .core text { fill: var(--fx-ink); } .bpas-wp-container.bc.bpas-fx-on .sb1-orbit .ln { animation: sb1-flow 3.2s linear infinite, bc-ln 15s linear infinite; animation-delay: 0s, calc(1.5s + var(--k) * 3s); } .bpas-wp-container.bc.bpas-fx-on .sb1-orbit .sat .disc { animation: bc-lit 15s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container.bc.bpas-fx-on .sb1-orbit .sat .glow { animation: bc-glow 15s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container.bc.bpas-fx-on .sb1-orbit .sat text { animation: bc-lit-t 15s linear infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container.bc.bpas-fx-on .sb1-orbit__q { animation: bc-q 15s ease-in-out infinite; animation-delay: calc(1.5s + var(--k) * 3s); } .bpas-wp-container.bc .sb1-orbit__q { background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%), linear-gradient(135deg, var(--fx-ink-2), #163a6b); } .bpas-wp-container.bc .sb1-orbit__qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bpas-wp-container.bc .sb1-mod__body:not(:has(.sb1-mod__ext)) { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1099px) { .bpas-wp-container.bc .sb1-mod__body { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1200px) { .bpas-wp-container.bc .sb1-mod__body:not(:has(.sb1-mod__ext)) .sb1-mod__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bpas-wp-container.bc .sb1-vcert__apps { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 720px) { .bpas-wp-container.bc .sb1-vcert__apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @keyframes bc-bar-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bpas-wp-container .bc-vyear__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 5px; height: 96px; margin: 0; padding: 20px 0 0; list-style: none; } .bpas-wp-container .bc-vyear__bars li { position: relative; height: 34%; border-radius: 5px 5px 3px 3px; background: #2a4675; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-accent) 35%, transparent); transform-origin: bottom; } .bpas-wp-container .bc-vyear__bars li.is-major { height: 100%; background: linear-gradient(180deg, var(--fx-accent), #e3572b); } .bpas-wp-container .bc-vyear__bars li b { position: absolute; left: 50%; bottom: 100%; margin-bottom: 5px; transform: translateX(-50%); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--fx-accent); white-space: nowrap; } .bpas-wp-container .bc-vyear__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 15px; margin: 15px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: #c9d3e3; } .bpas-wp-container .bc-vyear__key li { display: inline-flex; align-items: center; gap: 5px; } .bpas-wp-container .bc-vyear__key li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: #2a4675; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-accent) 35%, transparent); } .bpas-wp-container .bc-vyear__key li.is-major::before { background: var(--fx-accent); } .bpas-wp-container .bc-vyear__risk { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; margin-top: 15px; } .bpas-wp-container .bc-vyear__issue, .bpas-wp-container .bc-vyear__ok { display: grid; place-items: center; min-height: 52px; padding: 10px 10px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.3; } .bpas-wp-container .bc-vyear__issue { color: #ffffff; background: color-mix(in srgb, #e3572b 26%, var(--fx-ink-2)); border: 1px solid color-mix(in srgb, #e3572b 70%, transparent); } .bpas-wp-container .bc-vyear__ok { color: var(--fx-ink); background: var(--fx-accent); } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) .bc-vyear__bars li { transform: scaleY(0); } .bpas-wp-container.bpas-fx-on [data-fx].is-in .bc-vyear__bars li { animation: bc-bar-y 0.55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(0.35s + var(--i, 0) * 0.05s); } .bpas-wp-container.bpas-fx-on [data-fx]:not(.is-in) .bc-vyear__risk path { stroke-dashoffset: 1; } .bpas-wp-container.bpas-fx-on [data-fx].is-in .bc-vyear__risk path { animation: bpas-draw 0.7s ease 0.9s backwards; } @media (max-width: 720px) { .bpas-wp-container .bc-vyear__risk { grid-template-columns: 1fr; } .bpas-wp-container .bc-vyear__risk .sb1-vup__arrow { justify-self: center; transform: rotate(90deg); margin: 25px 0; } } .bpas-wp-container.bc .sb1-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); background: radial-gradient(circle at 100% 0%, rgba(245,179,66,0.26), transparent 45%), radial-gradient(circle at 0% 100%, rgba(227,87,43,0.24), transparent 45%), linear-gradient(135deg, #0d2344, #13305a); } .bpas-wp-container.bc .sb1-cta::before { content: ""; position: absolute; left: 40px; right: 40px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--fx-strip); } .bpas-wp-container.bc .sb1-cta__gap { margin-top: 20px; padding: 15px 20px; border-left: 4px solid var(--fx-accent); border-radius: 0 10px 10px 0; background: rgba(255,255,255,0.06); font-weight: 600; color: #ffffff !important; } .bpas-wp-container .bc-ctaviz { display: grid; justify-items: center; gap: 4px; padding: 20px 20px; border-radius: 10px; background: rgba(8,22,46,0.55); border: 1px solid #2a4675; } .bpas-wp-container .bc-ctaviz__from { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 10px; font-size: 14px; font-weight: 800; color: #c9d3e3; border: 1.5px dashed rgba(201,211,227,0.55); } .bpas-wp-container .bc-ctaviz svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bc-ctaviz__from svg { width: 22px; height: 22px; color: var(--fx-accent); } .bpas-wp-container .bc-ctaviz__arrow { width: 24px; height: 36px; color: #e3572b; } .bpas-wp-container .bc-ctaviz path { stroke-dasharray: 1; stroke-dashoffset: 0; } .bpas-wp-container .bc-ctaviz__mid { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.05); } .bpas-wp-container .bc-ctaviz__mid small { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-accent); text-align: center; } .bpas-wp-container .bc-ctaviz__apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .bpas-wp-container .bc-ctaviz__apps i { font-style: normal; padding: 5px 10px; border-radius: 40px; font-size: 13px; font-weight: 800; color: #ffffff; background: color-mix(in srgb, var(--c) 28%, var(--fx-ink)); border: 1.5px solid var(--c); } .bpas-wp-container .bc-ctaviz__to { padding: 10px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; color: var(--fx-ink); background: var(--fx-accent); } .bpas-wp-container.bpas-fx-on .bc-ctaviz:not(.is-in) path { stroke-dashoffset: 1; } .bpas-wp-container.bpas-fx-on .bc-ctaviz.is-in path { animation: bpas-draw 0.6s ease backwards; animation-delay: 0.25s; } .bpas-wp-container.bpas-fx-on .bc-ctaviz.is-in .bc-ctaviz__arrow path { animation-delay: 0.5s; } .bpas-wp-container.bpas-fx-on .bc-ctaviz:not(.is-in) .bc-ctaviz__apps i { opacity: 0; } .bpas-wp-container.bpas-fx-on .bc-ctaviz.is-in .bc-ctaviz__apps i { animation: bpas-rise 0.5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(0.6s + var(--i, 0) * 0.08s); } .bpas-wp-container.bc .sb1-cta__actions { gap: 20px; } @media (max-width: 991px) { .bpas-wp-container.bc .sb1-cta { grid-template-columns: 1fr; } }