/* BPAS page templates v2 · boyum-hub · styles of boyum-fornav.html (BPAS source), with Bentol radius and spacing steps. Generated by converter-v2/build_v2.py; do not edit. */ .bpas-wp-container { --bpas-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } .bpas-wp-container :where(h1, h2, h3, h4, h5, h6, p, a, li, span, strong, em, small, button, input, select, textarea, label, td, th, caption, dt, dd, figcaption, blockquote, summary, div) { font-family: inherit; } .bpas-wp-container :where(h1, h2) { letter-spacing: -0.02em; } .bpas-wp-container :where(h3, h4) { letter-spacing: -0.01em; } .bpas-tipwrap { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } .bpas-wp-container { --theme-color: #e3572b; --theme-color-text: #bd4520; --theme-color2: #c2df93; --theme-color3: #ecf8f8; --dark-color: #063232; --gray-color: #527072; --card-dark: #0b4141; --line-dark: #1c5a5a; --line-light: #cfe3e3; --white: #ffffff; box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: 25px 25px 55px; font-family: var(--bpas-font); font-size: 16px; line-height: 1.7; color: var(--gray-color); text-align: left; } .bpas-wp-container *, .bpas-wp-container *::before, .bpas-wp-container *::after { box-sizing: inherit; } .bpas-wp-container h1, .bpas-wp-container h2, .bpas-wp-container h3, .bpas-wp-container h4, .bpas-wp-container p, .bpas-wp-container figure { margin: 0; padding: 0; } .bpas-wp-container h1, .bpas-wp-container h2, .bpas-wp-container h3, .bpas-wp-container h4 { color: var(--dark-color); font-weight: 700; line-height: 1.2; font-family: inherit; } .bpas-wp-container ul, .bpas-wp-container ol { list-style: none; margin: 0; padding: 0; } .bpas-wp-container li { margin: 0; padding: 0; } .bpas-wp-container li::marker { content: none; } .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 section { scroll-margin-top: 100px; } .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-h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.01em; margin-bottom: 15px; } .bpas-wp-container .bpas-h2 strong { font-weight: 800; color: var(--theme-color); } .bpas-wp-container .bpas-intro { max-width: 820px; font-size: 17px; } .bpas-wp-container .bpas-center { text-align: center; } .bpas-wp-container .bpas-center .bpas-intro { margin: 0 auto; } .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-ticks { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 20px 0 30px; } .bpas-wp-container .bpas-ticks li { position: relative; padding-left: 30px; font-weight: 500; color: var(--dark-color); } .bpas-wp-container .bpas-ticks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--theme-color2); box-shadow: inset 0 0 0 4px var(--dark-color); } .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); } .bpas-wp-container .bpas-hero { margin-top: 20px; padding: 70px 55px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--fx-ink) 50%, var(--fx-ink-2)) 0%, color-mix(in srgb, var(--fx-ink-2) 55%, var(--fx-ink-3)) 100%); color: var(--fx-on-dark); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; } .bpas-wp-container .bpas-hero .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .bpas-hero h1 { color: var(--white); font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.02em; margin-bottom: 20px; } .bpas-wp-container .bpas-hero p { font-size: 17px; } .bpas-wp-container .bpas-hero .bpas-ticks li { color: var(--white); } .bpas-wp-container .bpas-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .bpas-wp-container .bpas-hero__badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 15px; border-radius: 40px; background: var(--card-dark); border: 1px solid var(--line-dark); color: var(--white); font-size: 14px; font-weight: 600; } .bpas-wp-container .bpas-hero__badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-color); } .bpas-wp-container .bpas-hero__panel { background: var(--card-dark); border: 1px solid var(--line-dark); border-radius: 10px; padding: 30px; } .bpas-wp-container .bpas-hero__panel h2 { color: var(--white); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 15px; } .bpas-wp-container .bpas-flow li { display: grid; grid-template-columns: 36px 1fr; gap: 15px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-dark); } .bpas-wp-container .bpas-flow li:first-child { border-top: 0; padding-top: 0; } .bpas-wp-container .bpas-flow span { width: 36px; height: 36px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .bpas-wp-container .bpas-flow strong { display: block; color: var(--white); } .bpas-wp-container .bpas-flow small { display: block; font-size: 14px; line-height: 1.5; color: var(--fx-on-dark-2); } .bpas-wp-container .bpas-modules { margin-top: 90px; } .bpas-wp-container .bpas-modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; } .bpas-wp-container .bpas-mod { background: var(--theme-color3); border-radius: 10px; padding: 25px; display: flex; flex-direction: column; } .bpas-wp-container .bpas-mod__name { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-color-text); } .bpas-wp-container .bpas-mod h2 { font-size: 21px; line-height: 1.3; margin: 5px 0 15px; } .bpas-wp-container .bpas-mod h2 small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--gray-color); margin-bottom: 2px; } .bpas-wp-container .bpas-mod dl { margin: 0 0 15px; font-size: 15px; line-height: 1.6; } .bpas-wp-container .bpas-mod dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dark-color); margin-top: 10px; } .bpas-wp-container .bpas-mod dd { margin: 2px 0 0; } .bpas-wp-container .bpas-mod__links { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line-light); font-size: 14px; } .bpas-wp-container .bpas-mod__links a { color: var(--dark-color); font-weight: 600; } .bpas-wp-container .bpas-mod__links a:hover { color: var(--theme-color-text); } .bpas-wp-container .bpas-mod__jump { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .bpas-wp-container .bpas-mod__jump a { font-size: 12px; font-weight: 600; color: var(--dark-color); background: var(--white); border: 1px solid var(--line-light); border-radius: 40px; padding: 3px 10px; } .bpas-wp-container .bpas-mod__jump a:hover { border-color: var(--theme-color); color: var(--theme-color-text); } .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: color-mix(in srgb, var(--fx-line) 80%, var(--fx-tint)); background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--fx-accent) 18%, transparent), 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: color-mix(in srgb, var(--fx-line) 80%, var(--fx-tint)); 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: color-mix(in srgb, var(--fx-ink) 55%, transparent); 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: var(--fx-on-dark-2); } @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 color-mix(in srgb, var(--fx-ink) 25%, transparent); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .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%, color-mix(in srgb, var(--fx-accent) 16%, transparent), 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 color-mix(in srgb, var(--fx-accent) 55%, transparent); background: rgba(255,255,255,0.04) radial-gradient(color-mix(in srgb, var(--fx-accent) 18%, transparent) 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: var(--fx-on-dark-2); 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: var(--fx-on-dark-2); } @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; } } @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%, color-mix(in srgb, var(--fx-accent) 18%, transparent), transparent 45%), linear-gradient(135deg, var(--fx-ink), var(--fx-ink-2)); color: color-mix(in srgb, var(--fx-line) 80%, var(--fx-tint)); 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: color-mix(in srgb, var(--fx-accent) 15%, transparent); 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 .bpas-industries { margin-top: 90px; scroll-margin-top: 100px; } .bpas-wp-container .bpas-ind__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; } .bpas-wp-container .bpas-ind__filter[hidden] { display: none; } .bpas-wp-container .bpas-ind__filter button { all: unset; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--dark-color); background: var(--white); border: 1px solid var(--line-light); } .bpas-wp-container .bpas-ind__filter button:hover { border-color: var(--dark-color); } .bpas-wp-container .bpas-ind__filter button[aria-pressed="true"] { background: var(--dark-color); border-color: var(--dark-color); color: var(--white); } .bpas-wp-container .bpas-ind__filter button:focus-visible { outline: 3px solid var(--theme-color); outline-offset: 2px; } .bpas-wp-container .bpas-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .bpas-wp-container .bpas-dot--eng { background: var(--theme-color); } .bpas-wp-container .bpas-dot--cmp { background: #2f8f8a; } .bpas-wp-container .bpas-dot--prc { background: var(--theme-color2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-accent) 72%, var(--fx-ink-3)); } .bpas-wp-container .bpas-ind__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 40px; font-size: 12px; font-weight: 800; color: var(--dark-color); background: var(--theme-color3); } .bpas-wp-container .bpas-ind__filter button[aria-pressed="true"] .bpas-ind__count { background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-ind__filter button { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .bpas-wp-container .bpas-ind__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 30px; } .bpas-wp-container .bpas-ind { --m: var(--theme-color); --m-tint: color-mix(in srgb, var(--fx-hot) 10%, #fff); --m-glow: color-mix(in srgb, var(--fx-hot) 45%, transparent); --m-ink: #ffffff; position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line-light); border-radius: 10px; box-shadow: 0 10px 26px color-mix(in srgb, var(--fx-ink) 6%, transparent); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.6s ease; } .bpas-wp-container .bpas-ind--cmp { --m: #2f8f8a; --m-tint: color-mix(in srgb, var(--fx-line) 40%, var(--fx-tint)); --m-glow: rgba(47,143,138,0.55); --m-ink: #ffffff; } .bpas-wp-container .bpas-ind--prc { --m: var(--theme-color2); --m-tint: color-mix(in srgb, var(--fx-accent) 22%, #fff); --m-glow: color-mix(in srgb, var(--fx-accent) 45%, transparent); --m-ink: var(--dark-color); } .bpas-wp-container .bpas-ind[hidden] { display: none; } .bpas-wp-container .bpas-ind::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--m); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; } .bpas-wp-container .bpas-ind__head { position: relative; display: flex; align-items: center; gap: 15px; min-height: 96px; padding: 20px 25px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 92% -10%, var(--m-glow) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--m-tint) 0%, #ffffff 92%); border-bottom: 1px solid var(--line-light); } .bpas-wp-container .bpas-ind__head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(circle at 92% -10%, var(--m-glow) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 60%), linear-gradient(135deg, var(--fx-ink) 0%, var(--fx-ink-2) 100%); } .bpas-wp-container .bpas-ind__head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: radial-gradient(color-mix(in srgb, var(--fx-ink) 10%, transparent) 1px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); } .bpas-wp-container .bpas-ind__ico { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--m); color: var(--m-ink); box-shadow: 0 8px 18px color-mix(in srgb, var(--fx-ink) 16%, transparent); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; } .bpas-wp-container .bpas-ind__ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bpas-ind__ico svg :is(path, circle, rect) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; transition-delay: calc(var(--i) * 0.08s + 0.25s); } .bpas-wp-container .bpas-ind__mode { position: relative; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35; color: var(--dark-color); max-width: 9.5em; transition: color 0.3s ease; } .bpas-wp-container .bpas-ind__num { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--m); opacity: 0.22; pointer-events: none; font-variant-numeric: tabular-nums; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.4s ease; } .bpas-wp-container .bpas-ind--prc .bpas-ind__num { color: color-mix(in srgb, var(--fx-accent) 52%, var(--fx-ink)); } .bpas-wp-container .bpas-ind__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 25px 25px; } .bpas-wp-container .bpas-ind h3 { font-size: 20px; line-height: 1.25; margin-bottom: 4px; } .bpas-wp-container .bpas-ind h3 a { color: var(--dark-color); text-decoration: none; } .bpas-wp-container .bpas-ind h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 3; } .bpas-wp-container .bpas-ind h3 a:focus-visible { outline: none; } .bpas-wp-container .bpas-ind:focus-within { box-shadow: 0 0 0 3px var(--theme-color), 0 18px 40px color-mix(in srgb, var(--fx-ink) 14%, transparent); } .bpas-wp-container .bpas-ind__cov { font-size: 13px; color: var(--gray-color); margin-bottom: 15px; } .bpas-wp-container .bpas-ind h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); margin-bottom: 10px; } .bpas-wp-container .bpas-ind__ch { counter-reset: ch; margin-bottom: 15px; } .bpas-wp-container .bpas-ind__ch li { counter-increment: ch; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--dark-color); padding: 10px 0; border-top: 1px solid var(--line-light); } .bpas-wp-container .bpas-ind__ch li::before { content: counter(ch); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: var(--theme-color3); color: var(--dark-color); font-size: 12px; font-weight: 800; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .bpas-wp-container .bpas-ind__mods { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; } .bpas-wp-container .bpas-ind__mods li { font-size: 12px; font-weight: 600; color: var(--dark-color); background: var(--theme-color3); border: 1px solid transparent; border-radius: 40px; padding: 3px 10px; transition: border-color 0.3s ease, background-color 0.3s ease; } .bpas-wp-container .bpas-ind__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--theme-color-text); } .bpas-wp-container .bpas-ind__cta i { font-style: normal; display: inline-block; transition: transform 0.3s ease; } @media (hover: hover) { .bpas-wp-container .bpas-ind__filter button:hover { transform: translateY(-2px); } .bpas-wp-container .bpas-ind:hover { transform: translateY(-8px); border-color: var(--m); box-shadow: 0 28px 54px color-mix(in srgb, var(--fx-ink) 17%, transparent); } .bpas-wp-container .bpas-ind--prc:hover { border-color: color-mix(in srgb, var(--fx-accent) 72%, var(--fx-ink-3)); } .bpas-wp-container .bpas-ind:hover::before { transform: scaleX(1); } .bpas-wp-container .bpas-ind:hover .bpas-ind__head::before { opacity: 1; } .bpas-wp-container .bpas-ind:hover .bpas-ind__mode { color: var(--theme-color2); } .bpas-wp-container .bpas-ind:hover .bpas-ind__num { opacity: 0.55; transform: translateY(-50%) translateX(-6px) scale(1.08); } .bpas-wp-container .bpas-ind--prc:hover .bpas-ind__num { color: var(--theme-color2); } .bpas-wp-container .bpas-ind:hover .bpas-ind__ico { transform: rotate(-8deg) scale(1.08); box-shadow: 0 12px 26px rgba(0,0,0,0.28); } .bpas-wp-container .bpas-ind:hover .bpas-ind__ico svg :is(path, circle, rect) { animation: bpas-ind-draw 0.9s ease both; } .bpas-wp-container .bpas-ind:hover .bpas-ind__ch li::before { background: var(--dark-color); color: var(--white); } .bpas-wp-container .bpas-ind:hover .bpas-ind__ch li:nth-child(2)::before { transition-delay: 0.06s; } .bpas-wp-container .bpas-ind:hover .bpas-ind__ch li:nth-child(3)::before { transition-delay: 0.12s; } .bpas-wp-container .bpas-ind:hover .bpas-ind__mods li { border-color: var(--line-light); background: var(--white); } .bpas-wp-container .bpas-ind:hover .bpas-ind__cta i { transform: translateX(5px); } } @keyframes bpas-ind-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes bpas-ind-pop { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } } .bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind { opacity: 0; transform: translateY(32px) scale(0.98); } .bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind__ico svg :is(path, circle, rect) { stroke-dashoffset: 1; } .bpas-wp-container .bpas-ind__grid.is-in:not(.is-done) .bpas-ind { transition-delay: calc(var(--i) * 0.08s); } .bpas-wp-container .bpas-ind.is-pop { animation: bpas-ind-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 0.07s); } .bpas-wp-container .bpas-ind__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-top: 25px; font-size: 13px; } .bpas-wp-container .bpas-ind__legend p { display: inline-flex; align-items: center; gap: 10px; } .bpas-wp-container .bpas-ind__legend strong { color: var(--dark-color); } @media (max-width: 991px) { .bpas-wp-container .bpas-ind__grid { grid-template-columns: 1fr 1fr; } .bpas-wp-container .bpas-industries { margin-top: 65px; } } @media (max-width: 720px) { .bpas-wp-container .bpas-ind__grid { grid-template-columns: 1fr; } .bpas-wp-container .bpas-ind__legend { justify-content: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-ind, .bpas-wp-container .bpas-ind *, .bpas-wp-container .bpas-ind::before, .bpas-wp-container .bpas-ind__head::before { transition: none !important; animation: none !important; } .bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind { opacity: 1; transform: none; } .bpas-wp-container .bpas-industries.is-js .bpas-ind__grid:not(.is-in) .bpas-ind__ico svg :is(path, circle, rect) { stroke-dashoffset: 0; } .bpas-wp-container .bpas-ind:hover, .bpas-wp-container .bpas-ind:hover .bpas-ind__ico, .bpas-wp-container .bpas-ind:hover .bpas-ind__num, .bpas-wp-container .bpas-ind__filter button:hover { transform: none; } .bpas-wp-container .bpas-ind:hover .bpas-ind__num { transform: translateY(-50%); } } .bpas-wp-container .bpas-features { margin-top: 90px; } .bpas-wp-container .bpas-acc__tools { display: flex; justify-content: flex-end; margin: 30px 0 10px; } .bpas-wp-container .bpas-acc__toggle-all { all: unset; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--theme-color-text); } .bpas-wp-container .bpas-acc__toggle-all:hover { text-decoration: underline; } .bpas-wp-container .bpas-acc__group { margin-top: 25px; } .bpas-wp-container .bpas-acc__group > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-color); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .bpas-wp-container .bpas-acc__group > h3::after { content: ""; flex: 1; height: 1px; background: var(--line-light); } .bpas-wp-container .bpas-acc__item { border: 1px solid var(--line-light); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--white); scroll-margin-top: 100px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .bpas-wp-container .bpas-acc__item.is-open { border-color: var(--dark-color); box-shadow: 0 10px 30px color-mix(in srgb, var(--fx-ink) 8%, transparent); } .bpas-wp-container .bpas-acc__item h4 { font-size: inherit; line-height: inherit; } .bpas-wp-container .bpas-acc__trigger { all: unset; box-sizing: border-box; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 20px; background: var(--theme-color3); color: var(--dark-color); transition: background 0.2s ease; } .bpas-wp-container .bpas-acc__trigger:hover { background: color-mix(in srgb, var(--fx-line) 40%, var(--fx-tint)); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger { background: var(--dark-color); color: var(--white); } .bpas-wp-container .bpas-acc__num { flex: 0 0 auto; min-width: 26px; font-size: 15px; font-weight: 800; color: var(--theme-color-text); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-acc__title { flex: 1 1 auto; font-size: 18px; font-weight: 700; line-height: 1.35; } .bpas-wp-container .bpas-acc__title small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--gray-color); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__title small { color: var(--fx-on-dark-2); } .bpas-wp-container .bpas-acc__icon { flex: 0 0 auto; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--white); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__icon { background: var(--theme-color2); } .bpas-wp-container .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--dark-color); transform: translate(-50%, -50%); transition: transform 0.25s ease; } .bpas-wp-container .bpas-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .bpas-wp-container .bpas-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__panel { grid-template-rows: 1fr; } .bpas-wp-container .bpas-acc__inner { overflow: hidden; min-height: 0; } .bpas-wp-container .bpas-acc__grid { display: grid; grid-template-columns: 1fr 1fr; } .bpas-wp-container .bpas-acc__col { padding: 25px 25px; } .bpas-wp-container .bpas-acc__col + .bpas-acc__col { background: var(--theme-color3); } .bpas-wp-container .bpas-acc__col h5 { margin: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color-text); } .bpas-wp-container .bpas-acc__col p { font-size: 15px; color: var(--dark-color); } .bpas-wp-container .bpas-acc__col ul { margin-top: 10px; } .bpas-wp-container .bpas-acc__col li { position: relative; padding-left: 20px; margin-top: 5px; font-size: 15px; } .bpas-wp-container .bpas-acc__col li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color2); box-shadow: inset 0 0 0 2px var(--dark-color); } .bpas-wp-container .bpas-acc__guides { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 15px 25px; border-top: 1px solid var(--line-light); font-size: 14px; } .bpas-wp-container .bpas-acc__guides .bpas-guide-main { font-weight: 700; color: var(--dark-color); margin-right: 5px; } .bpas-wp-container .bpas-acc__guides a:hover { color: var(--theme-color-text); } .bpas-wp-container .bpas-acc__guides .bpas-extends { margin-left: auto; font-size: 13px; } .bpas-wp-container .bpas-acc__guides .bpas-extends a { font-weight: 600; color: var(--dark-color); text-decoration: underline; text-decoration-color: var(--line-light); } .bpas-wp-container .bpas-phase { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-top: 25px; padding: 20px 25px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-phase strong { display: block; font-size: 18px; } .bpas-wp-container .bpas-phase__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--dark-color); color: var(--white); border-radius: 40px; padding: 5px 15px; white-space: nowrap; } .bpas-wp-container .bpas-guides { margin-top: 90px; } .bpas-wp-container .bpas-dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 35px; } .bpas-wp-container .bpas-dir__card { position: relative; background: var(--theme-color3); border-radius: 10px; padding: 20px; } .bpas-wp-container .bpas-dir__num { position: absolute; top: 16px; right: 20px; font-size: 26px; font-weight: 800; line-height: 1; color: var(--theme-color); } .bpas-wp-container .bpas-dir__card h3 { font-size: 17px; margin: 0 45px 10px 0; } .bpas-wp-container .bpas-dir__card h3 a:hover { color: var(--theme-color-text); } .bpas-wp-container .bpas-dir__card li { font-size: 14px; line-height: 1.8; } .bpas-wp-container .bpas-dir__card li a:hover { color: var(--theme-color-text); } .bpas-wp-container .bpas-dir__card--live { background: var(--dark-color); } .bpas-wp-container .bpas-dir__card--live h3 a { color: var(--white); } .bpas-wp-container .bpas-dir__card--live li a { color: var(--fx-on-dark); } .bpas-wp-container .bpas-dir__card--live h3 a:hover, .bpas-wp-container .bpas-dir__card--live li a:hover { color: var(--theme-color2); } .bpas-wp-container .bpas-dir__card--live .bpas-dir__num { color: var(--theme-color2); } .bpas-wp-container .bpas-dir__card { border: 1px solid transparent; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .bpas-wp-container .bpas-dir__card h3 a, .bpas-wp-container .bpas-dir__card li a, .bpas-wp-container .bpas-dir__num { transition: color 0.25s ease; } .bpas-wp-container .bpas-dir__card:focus-within { background: var(--dark-color); border-color: var(--theme-color2); } .bpas-wp-container .bpas-dir__card:focus-within h3 a { color: var(--white); } .bpas-wp-container .bpas-dir__card:focus-within li a { color: var(--fx-on-dark); } .bpas-wp-container .bpas-dir__card:focus-within .bpas-dir__num { color: var(--theme-color2); } @media (hover: hover) { .bpas-wp-container .bpas-dir__card:hover { background: var(--dark-color); border-color: var(--theme-color2); transform: translateY(-4px); box-shadow: 0 16px 32px color-mix(in srgb, var(--fx-ink) 22%, transparent); } .bpas-wp-container .bpas-dir__card:hover h3 a { color: var(--white); } .bpas-wp-container .bpas-dir__card:hover li a { color: var(--fx-on-dark); } .bpas-wp-container .bpas-dir__card:hover h3 a:hover, .bpas-wp-container .bpas-dir__card:hover li a:hover { color: var(--theme-color2); } .bpas-wp-container .bpas-dir__card:hover .bpas-dir__num { color: var(--theme-color2); } .bpas-wp-container .bpas-dir__card--live:hover { background: var(--card-dark); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-dir__card:hover { transform: none; } } .bpas-wp-container .bpas-dir__tag { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 3px 10px; } .bpas-wp-container .bpas-acc__guides .bpas-live { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); border-radius: 40px; padding: 3px 10px; } .bpas-wp-container .bpas-trust { margin-top: 90px; padding: 55px 50px; border-radius: 10px; background: var(--dark-color); color: var(--fx-on-dark); } .bpas-wp-container .bpas-trust__head { max-width: 760px; } .bpas-wp-container .bpas-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 30px; } .bpas-wp-container .bpas-benefits .bpas-benefit { margin-top: 0; } .bpas-wp-container .bpas-trust .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .bpas-trust .bpas-h2 { color: var(--white); } .bpas-wp-container .bpas-trust .bpas-h2 strong { color: var(--theme-color2); } .bpas-wp-container .bpas-benefit { background: var(--card-dark); border-radius: 10px; padding: 25px; margin-top: 15px; } .bpas-wp-container .bpas-benefit h3 { color: var(--white); font-size: 20px; margin-bottom: 5px; } .bpas-wp-container .bpas-creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; } .bpas-wp-container .bpas-creds li { font-size: 13px; font-weight: 600; color: var(--white); border: 1px solid var(--line-dark); border-radius: 40px; padding: 5px 15px; } .bpas-wp-container .bpas-how { margin-top: 90px; } .bpas-wp-container .bpas-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; } .bpas-wp-container .bpas-step { position: relative; background: var(--theme-color3); border-radius: 10px; padding: 30px; } .bpas-wp-container .bpas-step__num { position: absolute; top: 24px; right: 28px; font-size: 52px; font-weight: 800; line-height: 1; color: var(--theme-color); } .bpas-wp-container .bpas-step h3 { font-size: 21px; padding-right: 65px; margin-bottom: 10px; } .bpas-wp-container .bpas-step h3 strong { color: var(--theme-color); } .bpas-wp-container .bpas-step p { font-size: 15px; } .bpas-wp-container .bpas-cta { margin-top: 90px; padding: 60px 55px; border-radius: 10px; background: linear-gradient(135deg, var(--dark-color), color-mix(in srgb, var(--fx-ink-2) 55%, var(--fx-ink-3))); color: var(--fx-on-dark); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .bpas-wp-container .bpas-cta .bpas-h2 { color: var(--white); } .bpas-wp-container .bpas-cta .bpas-h2 strong { color: var(--theme-color2); } .bpas-wp-container .bpas-cta p { max-width: 680px; font-size: 17px; } .bpas-wp-container .bpas-cta__actions { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; } .bpas-wp-container .bpas-cta__alt { font-size: 15px; color: var(--theme-color2); font-weight: 600; } .bpas-wp-container .bpas-cta__alt:hover { color: var(--white); } @media (max-width: 1199px) { .bpas-wp-container .bpas-dir { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .bpas-wp-container .bpas-hero, .bpas-wp-container .bpas-trust, .bpas-wp-container .bpas-cta { grid-template-columns: 1fr; padding: 50px 30px; } .bpas-wp-container .bpas-modgrid, .bpas-wp-container .bpas-steps { grid-template-columns: 1fr 1fr; } .bpas-wp-container .bpas-modules, .bpas-wp-container .bpas-features, .bpas-wp-container .bpas-guides, .bpas-wp-container .bpas-trust, .bpas-wp-container .bpas-how, .bpas-wp-container .bpas-cta { margin-top: 65px; } } @media (max-width: 720px) { .bpas-wp-container { padding: 15px 15px 40px; } .bpas-wp-container .bpas-hero, .bpas-wp-container .bpas-trust, .bpas-wp-container .bpas-cta { padding: 35px 20px; border-radius: 10px; } .bpas-wp-container .bpas-modgrid, .bpas-wp-container .bpas-steps, .bpas-wp-container .bpas-dir { grid-template-columns: 1fr; } .bpas-wp-container .bpas-acc__trigger { padding: 15px; gap: 10px; } .bpas-wp-container .bpas-acc__title { font-size: 16px; } .bpas-wp-container .bpas-acc__grid { grid-template-columns: 1fr; } .bpas-wp-container .bpas-acc__col { padding: 20px 15px; } .bpas-wp-container .bpas-acc__guides { padding: 15px 15px; } .bpas-wp-container .bpas-acc__guides .bpas-extends { margin-left: 0; width: 100%; } .bpas-wp-container .bpas-phase { grid-template-columns: 1fr; } .bpas-wp-container .bpas-phase__tag { justify-self: start; } .bpas-wp-container .bpas-btn { width: 100%; text-align: center; } .bpas-wp-container .bpas-cta__actions { align-items: stretch; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-acc__panel, .bpas-wp-container .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__icon::after { transition: none; } } .bpas-wp-container .bpas-ph { margin: 0; } .bpas-wp-container .bpas-ph img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-light); } .bpas-wp-container .bpas-ph__frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; aspect-ratio: 16 / 9; padding: 50px 30px 30px; border-radius: 10px; overflow: hidden; border: 2px dashed color-mix(in srgb, var(--fx-on-dark-2) 80%, var(--fx-accent)); background-color: var(--theme-color3); background-image: linear-gradient(color-mix(in srgb, var(--fx-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--fx-ink) 5%, transparent) 1px, transparent 1px); background-size: 28px 28px; } .bpas-wp-container .bpas-ph--4x3 .bpas-ph__frame { aspect-ratio: 4 / 3; } .bpas-wp-container .bpas-ph--21x9 .bpas-ph__frame { aspect-ratio: 21 / 9; } .bpas-wp-container .bpas-ph--shot .bpas-ph__frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: var(--dark-color); background-image: radial-gradient(circle, var(--fx-hot) 4px, transparent 5px), radial-gradient(circle, var(--fx-accent) 4px, transparent 5px), radial-gradient(circle, var(--fx-on-dark-2) 4px, transparent 5px); background-size: 16px 30px; background-repeat: no-repeat; background-position: 14px 0, 32px 0, 50px 0; } .bpas-wp-container .bpas-ph--photo .bpas-ph__frame { border-color: color-mix(in srgb, var(--fx-hot) 50%, #fff); background-color: color-mix(in srgb, var(--fx-hot) 8%, #fff); background-image: linear-gradient(135deg, color-mix(in srgb, var(--fx-hot) 6%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--fx-hot) 6%, transparent) 50%, color-mix(in srgb, var(--fx-hot) 6%, transparent) 75%, transparent 75%); background-size: 36px 36px; padding-top: 30px; } .bpas-wp-container .bpas-ph--art .bpas-ph__frame { border-color: color-mix(in srgb, var(--fx-accent) 88%, var(--fx-ink-3)); background-color: color-mix(in srgb, var(--fx-accent) 15%, #fff); background-image: radial-gradient(color-mix(in srgb, var(--fx-ink) 10%, transparent) 1.5px, transparent 1.5px); background-size: 22px 22px; padding-top: 30px; } .bpas-wp-container .bpas-ph__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: var(--dark-color); border-radius: 40px; padding: 4px 10px; } .bpas-wp-container .bpas-ph--photo .bpas-ph__kind { background: var(--theme-color-text); } .bpas-wp-container .bpas-ph--art .bpas-ph__kind { background: color-mix(in srgb, var(--fx-accent) 40%, var(--fx-ink)); } .bpas-wp-container .bpas-ph__title { display: block; max-width: 620px; font-size: clamp(16px, 1.8vw, 21px); font-weight: 800; line-height: 1.3; color: var(--dark-color); } .bpas-wp-container .bpas-ph__brief { max-width: 620px; font-size: 14px; line-height: 1.55; color: var(--dark-color); margin: 0; } .bpas-wp-container .bpas-ph__spec { font-size: 12px; font-weight: 600; color: var(--gray-color); margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .bpas-wp-container .bpas-ph figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--gray-color); text-align: center; } .bpas-wp-container .bpas-fig-wide { margin-top: 40px; } .bpas-wp-container .bpas-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 40px; } .bpas-wp-container .bpas-hero + .bpas-fig-wide { margin-top: 30px; } @media (max-width: 991px) { .bpas-wp-container .bpas-figrow { grid-template-columns: 1fr; } } .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 color-mix(in srgb, var(--fx-ink) 14%, transparent); } .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; } } @media (max-width: 720px) { .bpas-wp-container .bpas-ph__frame, .bpas-wp-container .bpas-ph--4x3 .bpas-ph__frame, .bpas-wp-container .bpas-ph--21x9 .bpas-ph__frame { aspect-ratio: auto; min-height: 240px; padding: 45px 15px 20px; } .bpas-wp-container .bpas-ph--photo .bpas-ph__frame, .bpas-wp-container .bpas-ph--art .bpas-ph__frame { padding-top: 20px; } .bpas-wp-container .bpas-ph__brief { font-size: 13px; } } .bpas-wp-container .bpas-acc__item { position: relative; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .bpas-wp-container .bpas-acc__trigger { position: relative; transition: background 0.25s ease; } .bpas-wp-container .bpas-acc__trigger::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--theme-color); transition: width 0.25s ease, background 0.25s ease; } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger::before { width: 6px; background: var(--theme-color2); } .bpas-wp-container .bpas-acc__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 0; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); color: var(--theme-color-text); font-size: 15px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s ease; } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__num { background: var(--theme-color2); border-color: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-acc__title { transition: transform 0.25s ease; } .bpas-wp-container .bpas-acc__icon { transition: background 0.25s ease, transform 0.35s ease; } .bpas-wp-container .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__icon::after { transition: transform 0.25s ease, background 0.25s ease; } .bpas-wp-container .bpas-acc__grid, .bpas-wp-container .bpas-acc__guides { opacity: 0; transform: translateY(-8px); transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s; } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__grid, .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__guides { opacity: 1; transform: none; } .bpas-wp-container .bpas-acc__col li::before { transition: transform 0.2s ease, background 0.2s ease; } .bpas-wp-container .bpas-acc__group > h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--theme-color); flex: 0 0 auto; } .bpas-wp-container .bpas-acc__guides a:not(.bpas-guide-main) { display: inline-block; padding: 5px 15px; border-radius: 40px; border: 1px solid var(--line-light); background: var(--white); color: var(--dark-color); font-weight: 600; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .bpas-wp-container .bpas-acc__guides .bpas-guide-main { transition: color 0.2s ease, letter-spacing 0.2s ease; } .bpas-wp-container .bpas-acc__guides .bpas-extends a { padding: 0; border: 0; background: none; } @media (hover: hover) { .bpas-wp-container .bpas-acc__item:hover { border-color: var(--dark-color); box-shadow: 0 14px 32px color-mix(in srgb, var(--fx-ink) 12%, transparent); transform: translateY(-2px); } .bpas-wp-container .bpas-acc__item.is-open:hover { transform: none; } .bpas-wp-container .bpas-acc__trigger:hover { background: var(--white); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover { background: color-mix(in srgb, var(--fx-ink) 45%, var(--fx-ink-2)); } .bpas-wp-container .bpas-acc__trigger:hover::before { width: 6px; } .bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__num { background: var(--theme-color); border-color: var(--theme-color); color: var(--white); transform: rotate(-6deg) scale(1.06); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__num { background: var(--theme-color2); border-color: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__title { transform: translateX(4px); } .bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__icon { background: var(--dark-color); transform: rotate(90deg); } .bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__trigger:hover .bpas-acc__icon::after { background: var(--theme-color2); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__icon { background: var(--white); transform: rotate(180deg); } .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__icon::before, .bpas-wp-container .bpas-acc__item.is-open .bpas-acc__trigger:hover .bpas-acc__icon::after { background: var(--dark-color); } .bpas-wp-container .bpas-acc__col:hover li::before { background: var(--theme-color); } .bpas-wp-container .bpas-acc__col li:hover::before { transform: scale(1.4); } .bpas-wp-container .bpas-acc__guides a:not(.bpas-guide-main):hover { background: var(--dark-color); border-color: var(--dark-color); color: var(--white); } .bpas-wp-container .bpas-acc__guides .bpas-extends a:hover { background: none; color: var(--theme-color-text); } .bpas-wp-container .bpas-acc__guides .bpas-guide-main:hover { color: var(--theme-color-text); letter-spacing: 0.01em; } } .bpas-wp-container .bpas-acc__trigger:focus-visible { outline: 3px solid var(--theme-color); outline-offset: -3px; } @media (max-width: 720px) { .bpas-wp-container .bpas-acc__num { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-acc__item, .bpas-wp-container .bpas-acc__num, .bpas-wp-container .bpas-acc__title, .bpas-wp-container .bpas-acc__icon, .bpas-wp-container .bpas-acc__grid, .bpas-wp-container .bpas-acc__guides { transition: none; transform: none !important; } } .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-hero a.bpas-vlink, .bpas-wp-container .bpas-scn__card--after a.bpas-vlink, .bpas-wp-container .bpas-kpi:nth-child(4) a.bpas-vlink, .bpas-wp-container .bpas-trust a.bpas-vlink, .bpas-wp-container .bpas-cta a.bpas-vlink, .bpas-wp-container .bpas-mb a.bpas-vlink, .bpas-wp-container .bpas-kpi-note a.bpas-vlink { text-decoration-color: var(--theme-color2); } .bpas-wp-container .bpas-hero a.bpas-vlink:hover, .bpas-wp-container .bpas-scn__card--after a.bpas-vlink:hover, .bpas-wp-container .bpas-kpi:nth-child(4) a.bpas-vlink:hover, .bpas-wp-container .bpas-trust a.bpas-vlink:hover, .bpas-wp-container .bpas-cta a.bpas-vlink:hover { color: var(--theme-color2); } .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: color-mix(in srgb, var(--fx-line) 45%, var(--fx-tint)); font-size: 13px; line-height: 1.5; text-align: left; box-shadow: 0 12px 30px color-mix(in srgb, var(--fx-ink) 28%, transparent); 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; } } .bpas-wp-container .bpas-acc__lic { margin: 15px 0 0; padding: 10px 10px; border-left: 3px solid var(--theme-color); background: var(--theme-color3); border-radius: 0 5px 5px 0; font-size: 13px; line-height: 1.5; color: var(--dark-color); } .bpas-wp-container .bpas-acc__lic strong { font-weight: 700; } .bpas-wp-container .bpas-acc__note { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--gray-color); } .bpas-wp-container .bpas-cluster { position: relative; margin-top: 65px; padding: 40px 40px 45px; border-top: 0; border-radius: 10px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 35%, transparent), 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; text-transform: none; 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 20px; border: 1px solid var(--line-light); border-bottom: 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 color-mix(in srgb, var(--fx-ink) 18%, transparent); } .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); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-cluster a:hover, .bpas-wp-container .bpas-cluster a:hover::after { transform: none; } } @media (max-width: 991px) { .bpas-wp-container .bpas-cluster ul { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .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: 760px) { .bpas-wp-container .bpas-benefits { grid-template-columns: 1fr; } .bpas-wp-container .bpas-trust { padding: 35px 20px; } } .bpas-wp-container .bpas-weekly { margin-top: 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 50px; align-items: center; padding: 50px; border-radius: 10px; background: var(--theme-color3); border: 1px solid var(--line-light); } .bpas-wp-container .bpas-weekly__copy p { margin: 0 0 20px; max-width: 520px; } .bpas-wp-container .bpas-weekly__meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-color); background: var(--white); border: 1px solid var(--line-light); border-radius: 40px; padding: 5px 15px; margin-bottom: 20px; } .bpas-wp-container .bpas-weekly__meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--theme-color); } .bpas-wp-container .bpas-weekly__title { font-size: 20px; font-weight: 800; color: var(--dark-color); line-height: 1.35; margin: 0 0 20px; } .bpas-wp-container .bpas-weekly__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 20px; } .bpas-wp-container .bpas-weekly__actions .bpas-btn { background: var(--dark-color); color: var(--white); } .bpas-wp-container .bpas-weekly__actions .bpas-btn:hover { background: var(--theme-color); color: var(--white); } .bpas-wp-container .bpas-weekly [hidden] { display: none !important; } .bpas-wp-container .bpas-weekly__follow { font-weight: 700; color: var(--dark-color); text-decoration: none; border-bottom: 2px solid var(--theme-color2); } .bpas-wp-container .bpas-weekly__follow:hover { color: var(--theme-color-text); } .bpas-wp-container .bpas-weekly__viewer { position: relative; min-width: 0; } .bpas-wp-container .bpas-weekly__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 10px; box-shadow: 0 18px 40px color-mix(in srgb, var(--fx-ink) 18%, transparent); scrollbar-width: none; background: #0D2344; } .bpas-wp-container .bpas-weekly__track::-webkit-scrollbar { display: none; } .bpas-wp-container .bpas-weekly__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; margin: 0; position: relative; } .bpas-wp-container .bpas-weekly__slide img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; } .bpas-wp-container .bpas-weekly__ph { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 12% 10%; box-sizing: border-box; } .bpas-wp-container .bpas-weekly__ph small { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .bpas-wp-container .bpas-weekly__ph strong { font-size: clamp(22px, 3vw, 32px); line-height: 1.2; } .bpas-wp-container .bpas-weekly__ph span { font-size: 15px; line-height: 1.5; } .bpas-wp-container .bpas-weekly__ph--navy { background: #0D2344; color: #F7F5F0; } .bpas-wp-container .bpas-weekly__ph--navy small { color: var(--theme-color2); } .bpas-wp-container .bpas-weekly__ph--cream { background: #F7F5F0; color: #0D2344; } .bpas-wp-container .bpas-weekly__ph--cream small { color: var(--theme-color-text); } .bpas-wp-container .bpas-weekly__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; } .bpas-wp-container .bpas-weekly__arrow { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dark-color); color: var(--theme-color2); font-size: 18px; font-weight: 800; transition: background-color 0.2s ease, transform 0.2s ease; } .bpas-wp-container .bpas-weekly__arrow:focus-visible { outline: 3px solid var(--theme-color); outline-offset: 3px; } .bpas-wp-container .bpas-weekly__arrow[disabled] { opacity: 0.35; cursor: default; } @media (hover: hover) { .bpas-wp-container .bpas-weekly__arrow:not([disabled]):hover { background: var(--theme-color); color: var(--white); transform: translateY(-2px); } } .bpas-wp-container .bpas-weekly__dots { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .bpas-wp-container .bpas-weekly__dot { all: unset; cursor: pointer; width: 9px; height: 9px; border-radius: 50%; background: var(--fx-on-dark-2); } .bpas-wp-container .bpas-weekly__dot[aria-current="true"] { background: var(--theme-color); width: 24px; border-radius: 40px; } .bpas-wp-container .bpas-weekly__count { font-size: 13px; font-weight: 700; color: var(--gray-color); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; } @media (max-width: 991px) { .bpas-wp-container .bpas-weekly { grid-template-columns: 1fr; padding: 30px 20px; gap: 30px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-weekly__track { scroll-behavior: auto; } .bpas-wp-container .bpas-weekly__arrow { transition: none; } } .bpas-wp-container .bpas-acc__panel { transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-acc__trigger { overflow: hidden; isolation: isolate; } .bpas-wp-container .bpas-acc__trigger > * { position: relative; z-index: 1; } .bpas-wp-container .bpas-acc__trigger::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--fx-hot) 0%, transparent) 0%, color-mix(in srgb, var(--fx-hot) 55%, transparent) 35%, color-mix(in srgb, var(--fx-accent) 65%, transparent) 65%, color-mix(in srgb, var(--fx-accent) 0%, transparent) 100%); transform: translateX(-110%) skewX(-18deg); } .bpas-wp-container .bpas-acc__inner { position: relative; } .bpas-wp-container .bpas-acc__inner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--theme-color) 0%, color-mix(in srgb, var(--fx-hot) 70%, var(--fx-accent)) 35%, var(--theme-color2) 100%); transform-origin: left; } .bpas-wp-container .bpas-acc__col { position: relative; } .bpas-wp-container .bpas-acc__col + .bpas-acc__col { background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 35%, transparent) 0%, color-mix(in srgb, var(--fx-tint) 0%, transparent) 55%), var(--theme-color3); } .bpas-wp-container .bpas-acc__col h5 { position: relative; padding-bottom: 10px; } .bpas-wp-container .bpas-acc__col h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform-origin: left; } @keyframes bpas-acc-sweep { 0% { opacity: 0; transform: translateX(-110%) skewX(-18deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%) skewX(-18deg); } } @keyframes bpas-acc-pop { 0% { transform: scale(0.55) rotate(-25deg); background: var(--theme-color); border-color: var(--theme-color); color: var(--white); } 55% { transform: scale(1.18) rotate(6deg); background: var(--theme-color); border-color: var(--theme-color); color: var(--white); } 100% { transform: none; } } @keyframes bpas-acc-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-hot) 55%, transparent), 0 10px 30px color-mix(in srgb, var(--fx-ink) 8%, transparent); } 45% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--fx-accent) 55%, transparent), 0 18px 40px color-mix(in srgb, var(--fx-ink) 14%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-accent) 0%, transparent), 0 10px 30px color-mix(in srgb, var(--fx-ink) 8%, transparent); } } @keyframes bpas-acc-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bpas-acc-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } @keyframes bpas-acc-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes bpas-acc-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes bpas-acc-chip { 0% { opacity: 0; transform: translateY(10px) scale(0.85); } 70% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { transform: none; } } .bpas-wp-container .bpas-acc__item.is-opening { animation: bpas-acc-ring 1.3s ease-out backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__trigger::after { animation: bpas-acc-sweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__num { animation: bpas-acc-pop 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__inner::before { animation: bpas-acc-bar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col:first-child { animation: bpas-acc-left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col + .bpas-acc__col { animation: bpas-acc-right 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col h5::after { animation: bpas-acc-bar 0.6s ease 0.55s backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col > p:not(.bpas-acc__lic) { animation: bpas-acc-up 0.55s ease 0.4s backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li { animation: bpas-acc-up 0.45s ease backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(1) { animation-delay: 0.55s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(2) { animation-delay: 0.65s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(3) { animation-delay: 0.75s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__col li:nth-child(n+4) { animation-delay: 0.85s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__lic { animation: bpas-acc-up 0.55s ease 0.85s backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > * { animation: bpas-acc-chip 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(1) { animation-delay: 0.7s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(2) { animation-delay: 0.78s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(3) { animation-delay: 0.86s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(4) { animation-delay: 0.94s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(5) { animation-delay: 1.02s; } .bpas-wp-container .bpas-acc__item.is-opening .bpas-acc__guides > :nth-child(n+6) { animation-delay: 1.1s; } .bpas-wp-container .bpas-acc__item.is-waiting .bpas-acc__panel { transition: none; } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-acc__item.is-opening, .bpas-wp-container .bpas-acc__item.is-opening *, .bpas-wp-container .bpas-acc__item.is-opening *::before, .bpas-wp-container .bpas-acc__item.is-opening *::after { animation: none !important; } .bpas-wp-container .bpas-acc__panel { transition: none; } } @keyframes bpas-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes bpas-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes bpas-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bpas-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } } .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) { stroke-dasharray: 1; stroke-dashoffset: 0; } .bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-rv-item { opacity: 0; } .bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-draw svg :is(path, circle, rect, line) { stroke-dashoffset: 1; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-rv-item { animation: bpas-rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 0.07s); } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-draw svg :is(path, circle, rect, line) { animation: bpas-draw 1.1s ease backwards; animation-delay: calc(var(--i, 0) * 0.07s + 0.25s); } .bpas-wp-container .bpas-modgrid { gap: 25px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .bpas-wp-container .bpas-mod { position: relative; padding: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line-light); border-radius: 10px; box-shadow: 0 10px 26px color-mix(in srgb, var(--fx-ink) 6%, transparent); 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 .bpas-mod::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--theme-color), color-mix(in srgb, var(--fx-hot) 70%, var(--fx-accent))); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; } .bpas-wp-container .bpas-mod__head { position: relative; display: flex; align-items: center; gap: 15px; min-height: 92px; padding: 20px 25px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line-light); background: radial-gradient(circle at 92% -10%, color-mix(in srgb, var(--fx-hot) 30%, transparent) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, color-mix(in srgb, var(--fx-hot) 10%, #fff) 0%, #ffffff 92%); } .bpas-wp-container .bpas-mod__head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(circle at 92% -10%, color-mix(in srgb, var(--fx-hot) 45%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 60%), linear-gradient(135deg, var(--fx-ink) 0%, var(--fx-ink-2) 100%); } .bpas-wp-container .bpas-mod__head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: radial-gradient(color-mix(in srgb, var(--fx-ink) 10%, transparent) 1px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); } .bpas-wp-container .bpas-mod__ico { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); box-shadow: 0 8px 18px color-mix(in srgb, var(--fx-ink) 18%, transparent); 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 .bpas-mod__ico svg { width: 32px; height: 32px; } .bpas-wp-container .bpas-mod__name { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color-text); transition: color 0.3s ease; } .bpas-wp-container .bpas-mod__num { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--theme-color); opacity: 0.2; pointer-events: none; font-variant-numeric: tabular-nums; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-mod__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 25px 25px; } .bpas-wp-container .bpas-mod h2 { margin: 0 0 15px; } .bpas-wp-container .bpas-mod dl { margin: 0 0 20px; } .bpas-wp-container .bpas-mod dt { margin-top: 0; margin-bottom: 4px; } .bpas-wp-container .bpas-mod__b1 { padding: 10px 15px; border-radius: 10px; background: var(--theme-color3); } .bpas-wp-container .bpas-mod__b1 dt { color: var(--gray-color); } .bpas-wp-container .bpas-mod__beas { position: relative; margin-top: 20px; padding: 10px 15px 10px 20px; border-radius: 10px; background: color-mix(in srgb, var(--fx-hot) 5%, #fff); border: 1px solid color-mix(in srgb, var(--fx-hot) 24%, #fff); box-shadow: inset 4px 0 0 var(--theme-color); transition: box-shadow 0.35s ease, background-color 0.35s ease; } .bpas-wp-container .bpas-mod__beas dt { color: var(--theme-color-text); } .bpas-wp-container .bpas-mod__beas dd { color: var(--dark-color); } .bpas-wp-container .bpas-mod__beas::before { content: "\2193"; position: absolute; left: 50%; top: -20px; transform: translate(-50%, 0); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 15px; font-weight: 800; line-height: 1; color: var(--theme-color-text); background: var(--white); border: 1px solid color-mix(in srgb, var(--fx-hot) 24%, #fff); box-shadow: 0 4px 10px color-mix(in srgb, var(--fx-ink) 8%, transparent); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .bpas-wp-container .bpas-mod__links > a { display: inline-flex; align-items: center; gap: 5px; } .bpas-wp-container .bpas-mod__links > a i { font-style: normal; display: inline-block; transition: transform 0.3s ease; } .bpas-wp-container .bpas-mod:focus-within { border-color: var(--theme-color); } .bpas-wp-container .bpas-phase { position: relative; overflow: hidden; grid-template-columns: auto auto minmax(0, 1fr); padding: 20px 25px 20px 30px; box-shadow: inset 6px 0 0 var(--dark-color); } @media (max-width: 720px) { .bpas-wp-container .bpas-phase { grid-template-columns: auto minmax(0, 1fr); } .bpas-wp-container .bpas-phase > p { grid-column: 1 / -1; } } .bpas-wp-container .bpas-phase__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); } .bpas-wp-container .bpas-phase__ico svg { width: 30px; height: 30px; } .bpas-wp-container .bpas-dir { gap: 20px; } .bpas-wp-container .bpas-dir__card { overflow: hidden; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 8px 22px color-mix(in srgb, var(--fx-ink) 5%, transparent); padding: 25px 20px 20px; } .bpas-wp-container .bpas-dir__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform: scaleX(0.18); transform-origin: left; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-dir__num { top: 14px; right: 16px; font-size: 40px; letter-spacing: -0.04em; opacity: 0.3; transition: color 0.25s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-dir__card h3 { margin-right: 50px; } .bpas-wp-container .bpas-dir__card li { display: flex; align-items: center; gap: 10px; } .bpas-wp-container .bpas-dir__card li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: var(--theme-color-text); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; transition: background-color 0.25s ease, transform 0.3s ease; } .bpas-wp-container .bpas-dir__card li:nth-child(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l2 2 3-3M3 13l2 2 3-3M12 7h9M12 14h9M3 20h18'/%3E%3C/svg%3E"); } .bpas-wp-container .bpas-dir__card li:nth-child(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h14v15H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h14'/%3E%3Cpath d='M9 8h7'/%3E%3C/svg%3E"); } .bpas-wp-container .bpas-dir__card li:nth-child(3) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); } .bpas-wp-container .bpas-dir__card--live { background: var(--dark-color); border-color: var(--dark-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 55%, transparent), 0 16px 34px color-mix(in srgb, var(--fx-ink) 18%, transparent); } .bpas-wp-container .bpas-dir__card--live::before { transform: scaleX(1); background: var(--theme-color2); } .bpas-wp-container .bpas-dir__card--live .bpas-dir__num { opacity: 1; } .bpas-wp-container .bpas-dir__card--live li::before, .bpas-wp-container .bpas-dir__card:focus-within li::before { background: var(--theme-color2); } .bpas-wp-container .bpas-dir__tag { display: inline-flex; align-items: center; gap: 5px; } .bpas-wp-container .bpas-dir__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dark-color); animation: bpas-pulse 1.8s ease-in-out infinite; } @keyframes bpas-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-ink) 55%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-ink) 0%, transparent); } } .bpas-wp-container .bpas-trust { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 16%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 45%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--fx-hot) 14%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 40%), var(--dark-color); } .bpas-wp-container .bpas-trust::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; background-image: radial-gradient(color-mix(in srgb, var(--fx-accent) 25%, transparent) 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 .bpas-benefit { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 20px; align-content: start; border: 1px solid var(--line-dark); overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; } .bpas-wp-container .bpas-benefit > :not(.bpas-benefit__ico) { grid-column: 2; } .bpas-wp-container .bpas-benefit__ico { grid-row: 1 / span 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: color-mix(in srgb, var(--fx-accent) 12%, transparent); color: var(--theme-color2); border: 1px solid color-mix(in srgb, var(--fx-accent) 35%, transparent); 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 .bpas-benefit__ico svg { width: 30px; height: 30px; } .bpas-wp-container .bpas-benefit::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); transform-origin: top; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-creds li { background: rgba(255,255,255,0.04); } .bpas-wp-container .bpas-steps { gap: 30px; } .bpas-wp-container .bpas-step { overflow: visible; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 10px 26px color-mix(in srgb, var(--fx-ink) 6%, transparent); padding: 30px 30px 30px; 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 .bpas-step::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 5px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform-origin: left; } .bpas-wp-container .bpas-step__ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: 10px; background: var(--dark-color); color: var(--theme-color2); box-shadow: 0 8px 18px color-mix(in srgb, var(--fx-ink) 18%, transparent); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-step__ico svg { width: 32px; height: 32px; } .bpas-wp-container .bpas-step__num { top: 26px; font-size: 64px; letter-spacing: -0.05em; opacity: 0.9; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-step h3 { padding-right: 0; } .bpas-wp-container.bpas-rv-on .bpas-steps:not(.is-in) .bpas-step::before { transform: scaleX(0); } .bpas-wp-container.bpas-rv-on .bpas-steps.is-in .bpas-step::before { animation: bpas-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i) * 0.35s + 0.3s); } @media (min-width: 992px) { .bpas-wp-container .bpas-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -24px; top: 50%; margin-top: -15px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; font-weight: 800; color: var(--theme-color2); background: var(--dark-color); box-shadow: 0 0 0 5px var(--white); } } @media (hover: hover) { .bpas-wp-container .bpas-mod:hover { transform: translateY(-8px); border-color: var(--theme-color); box-shadow: 0 28px 54px color-mix(in srgb, var(--fx-ink) 16%, transparent); } .bpas-wp-container .bpas-mod:hover::before { transform: scaleX(1); } .bpas-wp-container .bpas-mod:hover .bpas-mod__head::before { opacity: 1; } .bpas-wp-container .bpas-mod:hover .bpas-mod__name { color: var(--theme-color2); } .bpas-wp-container .bpas-mod:hover .bpas-mod__num { opacity: 0.6; transform: translateY(-50%) translateX(-6px) scale(1.08); } .bpas-wp-container .bpas-mod:hover .bpas-mod__ico { transform: rotate(-8deg) scale(1.08); background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-mod:hover .bpas-mod__ico svg :is(path, circle, rect, line) { animation: bpas-draw 0.9s ease both; } .bpas-wp-container .bpas-mod:hover .bpas-mod__beas { background: color-mix(in srgb, var(--fx-hot) 9%, #fff); box-shadow: inset 8px 0 0 var(--theme-color), 0 10px 22px color-mix(in srgb, var(--fx-hot) 12%, transparent); } .bpas-wp-container .bpas-mod:hover .bpas-mod__beas::before { background: var(--theme-color); border-color: var(--theme-color); color: var(--white); animation: bpas-nudge 0.9s ease-in-out infinite; } .bpas-wp-container .bpas-mod__links > a:hover i { transform: translateX(5px); } .bpas-wp-container .bpas-dir__card:hover::before { transform: scaleX(1); } .bpas-wp-container .bpas-dir__card:hover .bpas-dir__num { opacity: 1; transform: scale(1.12) rotate(-4deg); } .bpas-wp-container .bpas-dir__card:hover li::before { background: var(--theme-color2); } .bpas-wp-container .bpas-dir__card:hover li:hover::before { transform: translateX(2px); } .bpas-wp-container .bpas-benefit:hover { transform: translateY(-6px); border-color: var(--theme-color2); background: color-mix(in srgb, var(--fx-ink-2) 65%, var(--fx-ink-3)); box-shadow: 0 24px 44px rgba(0,0,0,0.28); } .bpas-wp-container .bpas-benefit:hover::before { transform: scaleY(1); } .bpas-wp-container .bpas-benefit:hover .bpas-benefit__ico { transform: rotate(-8deg) scale(1.08); background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-benefit:hover .bpas-benefit__ico svg :is(path, circle, rect, line) { animation: bpas-draw 0.9s ease both; } .bpas-wp-container .bpas-step:hover { transform: translateY(-8px); border-color: var(--theme-color); box-shadow: 0 28px 54px color-mix(in srgb, var(--fx-ink) 16%, transparent); } .bpas-wp-container .bpas-step:hover .bpas-step__ico { transform: rotate(-8deg) scale(1.08); } .bpas-wp-container .bpas-step:hover .bpas-step__ico svg :is(path, circle, rect, line) { animation: bpas-draw 0.9s ease both; } .bpas-wp-container .bpas-step:hover .bpas-step__num { transform: translateY(-4px) scale(1.06); } } @media (max-width: 991px) { .bpas-wp-container .bpas-modgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .bpas-wp-container .bpas-modgrid { grid-template-columns: 1fr; } .bpas-wp-container .bpas-mod__num, .bpas-wp-container .bpas-ind__num { font-size: 72px; } } @media (max-width: 600px) { .bpas-wp-container .bpas-benefit { grid-template-columns: 1fr; } .bpas-wp-container .bpas-benefit > :not(.bpas-benefit__ico) { grid-column: 1; } .bpas-wp-container .bpas-benefit__ico { grid-row: auto; margin-bottom: 15px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-rv-item, .bpas-wp-container .bpas-draw svg *, .bpas-wp-container .bpas-mod, .bpas-wp-container .bpas-mod *, .bpas-wp-container .bpas-mod::before, .bpas-wp-container .bpas-dir__card, .bpas-wp-container .bpas-dir__card::before, .bpas-wp-container .bpas-dir__tag::before, .bpas-wp-container .bpas-benefit, .bpas-wp-container .bpas-benefit *, .bpas-wp-container .bpas-step, .bpas-wp-container .bpas-step *, .bpas-wp-container .bpas-step::before, .bpas-wp-container .bpas-mod__beas::before, .bpas-wp-container .bpas-benefit::before { animation: none !important; transition: none !important; } .bpas-wp-container .bpas-mod:hover, .bpas-wp-container .bpas-mod:hover .bpas-mod__ico, .bpas-wp-container .bpas-dir__card:hover .bpas-dir__num, .bpas-wp-container .bpas-benefit:hover, .bpas-wp-container .bpas-benefit:hover .bpas-benefit__ico, .bpas-wp-container .bpas-step:hover, .bpas-wp-container .bpas-step:hover .bpas-step__ico, .bpas-wp-container .bpas-step:hover .bpas-step__num, .bpas-wp-container .bpas-mod__links > a:hover i { transform: none; } .bpas-wp-container .bpas-mod:hover .bpas-mod__num { transform: translateY(-50%); } .bpas-wp-container .bpas-mod:hover .bpas-mod__beas::before { transform: translate(-50%, 0); } } .bpas-wp-container .bpas-industries { content-visibility: auto; contain-intrinsic-size: auto 1870px; } .bpas-wp-container .bpas-features { content-visibility: auto; contain-intrinsic-size: auto 3610px; } .bpas-wp-container .bpas-guides { content-visibility: auto; contain-intrinsic-size: auto 1580px; } .bpas-wp-container .bpas-trust { content-visibility: auto; contain-intrinsic-size: auto 760px; } .bpas-wp-container .bpas-how { content-visibility: auto; contain-intrinsic-size: auto 1060px; } .bpas-wp-container .bpas-cluster { content-visibility: auto; contain-intrinsic-size: auto 420px; } @media (max-width: 767px) { .bpas-wp-container .bpas-industries { contain-intrinsic-size: auto 5290px; } .bpas-wp-container .bpas-features { contain-intrinsic-size: auto 4770px; } .bpas-wp-container .bpas-guides { contain-intrinsic-size: auto 4860px; } .bpas-wp-container .bpas-how { contain-intrinsic-size: auto 2200px; } } .bpas-wp-container .bpas-weekly__dot { box-sizing: content-box; padding: 10px; background-clip: content-box; } .bpas-wp-container .bpas-weekly__dots { gap: 0; } @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(18px); } 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 color-mix(in srgb, var(--fx-accent) 25%, transparent), 0 10px 24px rgba(0,0,0,0.25); } } @keyframes bpas-mb-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-accent) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-accent) 0%, transparent); } } .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), color-mix(in srgb, var(--fx-accent) 14%, transparent) 0%, var(--theme-color2) 14%, var(--theme-color) 27%, color-mix(in srgb, var(--fx-accent) 14%, transparent) 44%, color-mix(in srgb, var(--fx-accent) 14%, transparent) 100%) border-box; animation: bpas-mb-spin 10s linear infinite; box-shadow: 0 34px 80px color-mix(in srgb, var(--fx-ink) 30%, transparent); } .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%, color-mix(in srgb, var(--fx-accent) 20%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 38%), radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--fx-hot) 20%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 38%); background-size: 160% 160%, 160% 160%; animation: bpas-mb-glow 14s ease-in-out infinite; } .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, color-mix(in srgb, var(--fx-accent) 0%, transparent) 0%, color-mix(in srgb, var(--fx-accent) 16%, transparent) 50%, color-mix(in srgb, var(--fx-accent) 0%, transparent) 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-mb__mode img { animation: bpas-mb-signal 8s ease-in-out infinite; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:nth-child(2) img { animation-delay: 2s; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:nth-child(3) img { animation-delay: 4s; } .bpas-wp-container .bpas-mb--v2 .bpas-mb__mode:nth-child(4) img { animation-delay: 6s; } .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: color-mix(in srgb, var(--fx-ink) 65%, transparent); 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: color-mix(in srgb, var(--fx-accent) 14%, transparent); } .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: color-mix(in srgb, var(--fx-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fx-accent) 28%, transparent); 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); animation: bpas-mb-live 1.8s ease-in-out infinite; } .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__name { clip-path: inset(0 100% 0 0); } .bpas-wp-container .bpas-mb--v2.mb-js:not(.is-in) .bpas-mb__ring .a { stroke-dashoffset: 1; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__tag { animation: bpas-mb-rise 0.5s ease backwards; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__name { animation: bpas-mb-wipe 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s backwards; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__line { animation: bpas-mb-rise 0.6s ease 0.55s backwards; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__hook { animation: bpas-mb-rise 0.6s ease 0.7s backwards; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__body { animation: bpas-mb-rise 0.6s ease 0.85s backwards; } .bpas-wp-container .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-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(1) { animation-delay: 1s; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(2) { animation-delay: 1.1s; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(3) { animation-delay: 1.2s; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-mb__mode:nth-child(4) { animation-delay: 1.3s; } .bpas-wp-container .bpas-mb--v2.mb-js.is-in .bpas-btn { animation: bpas-mb-rise 0.6s ease 1.45s backwards; } .bpas-wp-container .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-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-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 color-mix(in srgb, var(--fx-ink) 36%, transparent); } .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; } } @keyframes bpas-hv-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes bpas-hv-bar { 0%, 8% { transform: scaleX(0); } 22%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } } @keyframes bpas-hv-now { from { left: 0%; } to { left: 100%; } } @keyframes bpas-hv-q { 0% { opacity: 0; transform: translateY(18px) scale(0.98); visibility: visible; } 4%, 21% { opacity: 1; transform: none; visibility: visible; } 25% { opacity: 0; transform: translateY(-14px) scale(0.98); visibility: hidden; } 100% { opacity: 0; visibility: hidden; } } @keyframes bpas-hv-step { 0%, 24.9% { color: var(--white); } 25%, 100% { color: var(--fx-on-dark-2); } } @keyframes bpas-hv-dot { 0% { transform: scaleX(0); } 24% { transform: scaleX(1); } 25%, 100% { transform: scaleX(0); } } @keyframes bpas-hv-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-accent) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-accent) 0%, transparent); } } @keyframes bpas-hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .bpas-wp-container .bpas-hero--v2 { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 50px; align-items: center; padding: 75px 55px; } .bpas-wp-container .bpas-hero--v2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--fx-accent) 20%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 40%), radial-gradient(circle at 70% 95%, color-mix(in srgb, var(--fx-hot) 22%, transparent) 0%, color-mix(in srgb, var(--fx-ink) 0%, transparent) 40%), linear-gradient(color-mix(in srgb, var(--fx-accent) 6%, transparent) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, color-mix(in srgb, var(--fx-accent) 6%, transparent) 1px, transparent 1px) 0 0 / 40px 40px; } .bpas-wp-container .bpas-hero--v2 h1 { margin-bottom: 20px; font-size: clamp(36px, 4.3vw, 54px); line-height: 1.04; letter-spacing: -0.035em; } .bpas-wp-container .bpas-hero__l1, .bpas-wp-container .bpas-hero__l2 { display: block; } .bpas-wp-container .bpas-hero__l2 { color: var(--theme-color2); } .bpas-wp-container .bpas-hero__line { max-width: 520px; margin-bottom: 30px; font-size: 18px; line-height: 1.6; color: var(--fx-on-dark); } .bpas-wp-container .bpas-hero__copy > * { animation: bpas-hv-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .bpas-wp-container .bpas-hero__copy .bpas-hero__brand { animation-delay: 0.05s; } .bpas-wp-container .bpas-hero__copy h1 { animation-delay: 0.15s; } .bpas-wp-container .bpas-hero__copy .bpas-hero__line { animation-delay: 0.35s; } .bpas-wp-container .bpas-hero__copy .bpas-hero__actions { animation-delay: 0.5s; } .bpas-wp-container .bpas-hv { position: relative; padding: 25px; border-radius: 10px; background: color-mix(in srgb, var(--fx-ink) 72%, transparent); border: 1px solid var(--line-dark); box-shadow: 0 30px 70px rgba(0,0,0,0.30); animation: bpas-hv-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards; } .bpas-wp-container .bpas-hv::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--bpas-hv-a), color-mix(in srgb, var(--fx-accent) 0%, transparent) 0%, var(--theme-color2) 12%, var(--theme-color) 24%, color-mix(in srgb, var(--fx-accent) 0%, transparent) 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: bpas-hv-spin 8s linear infinite; } @property --bpas-hv-a { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes bpas-hv-spin { to { --bpas-hv-a: 360deg; } } .bpas-wp-container .bpas-hv__gantt { position: relative; padding: 15px 15px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-dark); overflow: hidden; } .bpas-wp-container .bpas-hv__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fx-on-dark-2); } .bpas-wp-container .bpas-hv__live { display: inline-flex; align-items: center; gap: 5px; color: var(--theme-color2); } .bpas-wp-container .bpas-hv__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color2); animation: bpas-hv-pulse 1.8s ease-in-out infinite; } .bpas-wp-container .bpas-hv__lane { position: relative; height: 22px; margin-top: 10px; border-radius: 5px; background: rgba(255,255,255,0.04); } .bpas-wp-container .bpas-hv__bar { position: absolute; top: 4px; bottom: 4px; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 5px; transform-origin: left; animation: bpas-hv-bar 8s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: calc(var(--d) * 1s); } .bpas-wp-container .bpas-hv__bar--o { background: linear-gradient(90deg, var(--theme-color), color-mix(in srgb, var(--fx-hot) 70%, var(--fx-accent))); } .bpas-wp-container .bpas-hv__bar--l { background: linear-gradient(90deg, color-mix(in srgb, var(--fx-accent) 82%, var(--fx-ink-3)), var(--theme-color2)); } .bpas-wp-container .bpas-hv__bar--t { background: linear-gradient(90deg, #2f8f8a, #4fb3ad); } .bpas-wp-container .bpas-hv__now { position: absolute; top: 30px; bottom: 6px; width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 10px 2px rgba(255,255,255,0.45); opacity: 0.8; animation: bpas-hv-now 8s linear infinite; } .bpas-wp-container .bpas-hv__title { margin: 20px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); } .bpas-wp-container .bpas-hv__qs { position: relative; min-height: 132px; margin: 0; padding: 0; list-style: none; } .bpas-wp-container .bpas-hv__q { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; align-items: start; margin: 0; padding: 15px; border-radius: 10px; background: linear-gradient(135deg, var(--fx-ink-2), color-mix(in srgb, var(--fx-ink-2) 55%, var(--fx-ink-3))); border: 1px solid color-mix(in srgb, var(--fx-accent) 35%, transparent); opacity: 0; visibility: hidden; animation: bpas-hv-q 16s ease-in-out infinite; animation-delay: calc(var(--k) * 4s); } .bpas-wp-container .bpas-hv__q::marker { content: none; } .bpas-wp-container .bpas-hv__qi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-hv__qi svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bpas-hv__q b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color2); } .bpas-wp-container .bpas-hv__q strong { display: block; margin: 2px 0 4px; font-size: 18px; line-height: 1.3; color: var(--white); } .bpas-wp-container .bpas-hv__q small { display: block; font-size: 14px; line-height: 1.5; color: var(--fx-on-dark); } .bpas-wp-container .bpas-hv__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; } .bpas-wp-container .bpas-hv__steps li { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-on-dark-2); animation: bpas-hv-step 16s linear infinite; animation-delay: calc(var(--k) * 4s); } .bpas-wp-container .bpas-hv__steps li::marker { content: none; } .bpas-wp-container .bpas-hv__steps i { display: block; height: 4px; margin-bottom: 5px; border-radius: 4px; background: color-mix(in srgb, var(--fx-accent) 15%, transparent); overflow: hidden; position: relative; } .bpas-wp-container .bpas-hv__steps i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform-origin: left; transform: scaleX(0); animation: bpas-hv-dot 16s linear infinite; animation-delay: calc(var(--k) * 4s); } .bpas-wp-container .bpas-hv:hover *, .bpas-wp-container .bpas-hv:hover::after, .bpas-wp-container .bpas-hv:focus-within * { animation-play-state: paused !important; } @media (max-width: 991px) { .bpas-wp-container .bpas-hero--v2 { grid-template-columns: 1fr; gap: 35px; padding: 50px 30px; } } @media (max-width: 600px) { .bpas-wp-container .bpas-hero--v2 { padding: 35px 20px; } .bpas-wp-container .bpas-hv { padding: 15px; } .bpas-wp-container .bpas-hv__qs { min-height: 206px; } .bpas-wp-container .bpas-hv__q { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 15px; } .bpas-wp-container .bpas-hv__qi { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-hero__copy > *, .bpas-wp-container .bpas-hv, .bpas-wp-container .bpas-hv *, .bpas-wp-container .bpas-hv::after, .bpas-wp-container .bpas-hv__steps i::after { animation: none !important; } .bpas-wp-container .bpas-hv__qs { min-height: 0; display: grid; gap: 10px; } .bpas-wp-container .bpas-hv__q { position: static; opacity: 1; visibility: visible; } .bpas-wp-container .bpas-hv__steps, .bpas-wp-container .bpas-hv__now { display: 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 .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 color-mix(in srgb, var(--fx-accent) 45%, transparent); line-height: 28px; } @keyframes bpas-v3-flow { to { stroke-dashoffset: -28; } } @keyframes bpas-v3-spin { to { transform: rotate(1turn); } } @keyframes bpas-v3-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes bpas-v3-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bpas-v3-fillv { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes bpas-v3-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .bpas-wp-container .bpas-trust--v3 { position: relative; isolation: isolate; overflow: hidden; padding: 65px 55px 55px; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--fx-accent) 20%, transparent), transparent 38%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--fx-hot) 20%, transparent), transparent 40%), linear-gradient(150deg, var(--fx-ink) 0%, color-mix(in srgb, var(--fx-ink) 30%, var(--fx-ink-2)) 55%, color-mix(in srgb, var(--fx-ink) 85%, #000) 100%); } .bpas-wp-container .bpas-t3__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.45; background-image: radial-gradient(color-mix(in srgb, var(--fx-accent) 22%, transparent) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%); mask-image: linear-gradient(160deg, #000 0%, transparent 55%); } .bpas-wp-container .bpas-t3__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 50px; align-items: center; } .bpas-wp-container .bpas-t3__lead { margin: 15px 0 0; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--fx-on-dark); } .bpas-wp-container .bpas-t3__creds { display: grid; gap: 10px; margin-top: 30px; } .bpas-wp-container .bpas-trust--v3 .bpas-t3__creds li { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 10px 20px 10px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--white); background: rgba(255,255,255,0.06); border: 1px solid color-mix(in srgb, var(--fx-accent) 28%, transparent); } .bpas-wp-container .bpas-t3__credico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; font-size: 13px; color: var(--dark-color); background: var(--theme-color2); } .bpas-wp-container .bpas-t3__map { margin: 0; padding: 20px; border-radius: 10px; background: color-mix(in srgb, var(--fx-ink) 55%, transparent); border: 1px solid color-mix(in srgb, var(--fx-accent) 22%, transparent); box-shadow: 0 30px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); } .bpas-wp-container .bpas-t3__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--bpas-font, inherit); } .bpas-wp-container .bpas-t3__hint { display: none; } .bpas-wp-container .bpas-t3__top > * { min-width: 0; } .bpas-wp-container .bpas-t3__map figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; text-align: center; color: color-mix(in srgb, var(--fx-on-dark-2) 70%, var(--fx-line)); } .bpas-wp-container .bpas-t3__svg .t3-frame { fill: rgba(255,255,255,0.03); stroke: color-mix(in srgb, var(--fx-accent) 50%, transparent); stroke-width: 1.5; stroke-dasharray: 6 6; } .bpas-wp-container .bpas-t3__svg .t3-tagbg { fill: var(--theme-color2); } .bpas-wp-container .bpas-t3__svg .t3-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; fill: var(--dark-color); } .bpas-wp-container .bpas-t3__svg .t3-beas { fill: var(--fx-ink-2); stroke: color-mix(in srgb, var(--fx-accent) 35%, transparent); stroke-width: 1.5; } .bpas-wp-container .bpas-t3__svg .t3-h { font-size: 19px; font-weight: 800; fill: var(--white); } .bpas-wp-container .bpas-t3__svg .t3-h--d { fill: var(--dark-color); } .bpas-wp-container .bpas-t3__svg .t3-h--sm { font-size: 17px; } .bpas-wp-container .bpas-t3__svg .t3-s--sm { font-size: 13px; } .bpas-wp-container .bpas-t3__svg .t3-chip { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.14); } .bpas-wp-container .bpas-t3__svg .t3-dot { fill: var(--theme-color); } .bpas-wp-container .bpas-t3__svg .t3-c { font-size: 16px; font-weight: 700; fill: color-mix(in srgb, var(--fx-on-dark) 40%, #fff); } .bpas-wp-container .bpas-t3__svg .t3-box { fill: #ffffff; } .bpas-wp-container .bpas-t3__svg .t3-box--lime { fill: var(--theme-color2); } .bpas-wp-container .bpas-t3__svg .t3-s { font-size: 14px; font-weight: 600; fill: color-mix(in srgb, var(--gray-color) 70%, var(--fx-ink)); } .bpas-wp-container .bpas-t3__svg .t3-n { font-size: 12px; font-weight: 600; fill: var(--fx-on-dark); } .bpas-wp-container .bpas-t3__svg .t3-flow { fill: none; stroke: var(--theme-color); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; animation: bpas-v3-flow 1.4s linear infinite; } .bpas-wp-container .bpas-t3__svg .t3-flow--b { animation-delay: -0.5s; } .bpas-wp-container .bpas-t3__svg .t3-flow--c { stroke: var(--theme-color2); } .bpas-wp-container .bpas-t3__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 45px; counter-reset: none; } .bpas-wp-container .bpas-t3__card { position: relative; display: flex; flex-direction: column; padding: 25px 20px 25px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)); border: 1px solid color-mix(in srgb, var(--fx-accent) 18%, transparent); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, background-color 0.3s ease; } .bpas-wp-container .bpas-t3__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--theme-color), var(--theme-color2)); transform: scaleX(0.25); transform-origin: left; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-t3__cardtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .bpas-wp-container .bpas-t3__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; color: var(--dark-color); background: var(--theme-color2); box-shadow: 0 10px 22px color-mix(in srgb, var(--fx-accent) 18%, transparent); } .bpas-wp-container .bpas-t3__ico svg { width: 30px; height: 30px; } .bpas-wp-container .bpas-t3__num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: color-mix(in srgb, var(--fx-accent) 22%, transparent); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-t3__card h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; color: var(--white); } .bpas-wp-container .bpas-t3__card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fx-on-dark); } .bpas-wp-container .bpas-trust--v3 a.bpas-vlink { color: var(--white); } @media (hover: hover) { .bpas-wp-container .bpas-t3__card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--fx-accent) 50%, transparent); } .bpas-wp-container .bpas-t3__card:hover::before { transform: scaleX(1); } } .bpas-wp-container .bpas-trust--v3 { contain-intrinsic-size: auto 1080px; } .bpas-wp-container .bpas-how--v3 { contain-intrinsic-size: auto 1480px; } .bpas-wp-container .bpas-h3__track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; padding: 0; } .bpas-wp-container .bpas-h3__rail { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 43px; height: 6px; border-radius: 5px; background: var(--line-light); list-style: none; } .bpas-wp-container .bpas-h3__rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--theme-color), #e9a24a 50%, var(--theme-color2)); transform-origin: left; } .bpas-wp-container.bpas-rv-on .bpas-h3__track:not(.is-in) .bpas-h3__rail i { transform: scaleX(0); } .bpas-wp-container.bpas-rv-on .bpas-h3__track.is-in .bpas-h3__rail i { animation: bpas-v3-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards; } .bpas-wp-container .bpas-h3__step { position: relative; display: flex; flex-direction: column; align-items: center; list-style: none; } .bpas-wp-container .bpas-h3__node { position: relative; z-index: 1; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: var(--theme-color2); background: var(--dark-color); box-shadow: 0 0 0 8px var(--white), 0 18px 34px color-mix(in srgb, var(--fx-ink) 25%, transparent); } .bpas-wp-container .bpas-h3__node::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--fx-hot) 45%, transparent); animation: bpas-v3-spin 18s linear infinite; } .bpas-wp-container .bpas-h3__ico svg { width: 40px; height: 40px; } .bpas-wp-container .bpas-h3__node b { position: absolute; right: -6px; top: -4px; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 5px; border-radius: 40px; font-size: 14px; font-weight: 800; color: var(--white); background: var(--theme-color-text); box-shadow: 0 0 0 4px var(--white); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-h3__card { position: relative; flex: 1; width: 100%; margin-top: 25px; padding: 30px 30px 25px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 14px 34px color-mix(in srgb, var(--fx-ink) 7%, transparent); text-align: left; 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 .bpas-h3__card::before { content: ""; position: absolute; left: 50%; top: -10px; width: 20px; height: 20px; margin-left: -10px; transform: rotate(45deg); background: var(--white); border-left: 1px solid var(--line-light); border-top: 1px solid var(--line-light); } .bpas-wp-container .bpas-h3__kicker { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-color-text); } .bpas-wp-container .bpas-h3__card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; color: var(--dark-color); } .bpas-wp-container .bpas-h3__card h3 strong { color: var(--theme-color-text); } .bpas-wp-container .bpas-h3__card > p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gray-color); } .bpas-wp-container .bpas-h3__card > p.bpas-h3__get { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 10px; margin-top: 20px; padding: 10px 15px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--dark-color); background: var(--theme-color3); } .bpas-wp-container .bpas-h3__get span { padding: 3px 10px; border-radius: 40px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); } .bpas-wp-container .bpas-h3__card .bpas-ipx { margin-top: 15px; } @media (hover: hover) { .bpas-wp-container .bpas-h3__step:hover .bpas-h3__card { transform: translateY(-6px); border-color: var(--theme-color2); box-shadow: 0 22px 44px color-mix(in srgb, var(--fx-ink) 12%, transparent); } } .bpas-wp-container .bpas-how--v3 .bpas-figrow { margin-top: 50px; } .bpas-wp-container .bpas-weekly--v3 { position: relative; isolation: isolate; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 55px; padding: 55px; border-radius: 10px; border: 1px solid var(--line-light); background: linear-gradient(135deg, color-mix(in srgb, var(--fx-tint) 55%, #fff) 0%, var(--fx-tint) 50%, #f7f5f0 100%); } .bpas-wp-container .bpas-wk__blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; } .bpas-wp-container .bpas-wk__blob--a { right: -120px; top: -140px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(13,35,68,0.12), transparent 65%); } .bpas-wp-container .bpas-wk__blob--b { left: -140px; bottom: -160px; width: 420px; height: 420px; background: radial-gradient(circle, color-mix(in srgb, var(--fx-accent) 45%, transparent), transparent 65%); } .bpas-wp-container .bpas-wk__flowhead { margin: 5px 0 10px !important; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-color-text); } .bpas-wp-container .bpas-wk__flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 25px; max-width: 540px; } .bpas-wp-container .bpas-wk__flow li { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--dark-color); background: rgba(255,255,255,0.8); border: 1px solid var(--line-light); } .bpas-wp-container .bpas-wk__fi { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--theme-color2); background: var(--dark-color); } .bpas-wp-container .bpas-wk__fi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bpas-wk__now { padding: 15px 20px; margin-bottom: 20px; max-width: 540px; border-radius: 10px; background: var(--white); border-left: 4px solid var(--theme-color); box-shadow: 0 10px 24px color-mix(in srgb, var(--fx-ink) 6%, transparent); } .bpas-wp-container .bpas-wk__now .bpas-weekly__title { margin: 10px 0 0; font-size: 18px; } .bpas-wp-container .bpas-wk__now .bpas-weekly__meta { padding: 0; border: 0; background: none; color: var(--theme-color-text); } .bpas-wp-container .bpas-wk__stage { position: relative; min-width: 0; padding: 15px 10px 0; } .bpas-wp-container .bpas-wk__ghost { position: absolute; left: 12%; right: 12%; top: 22px; bottom: 70px; border-radius: 10px; background: #0D2344; opacity: 0.16; transform: rotate(-5deg); } .bpas-wp-container .bpas-wk__ghost--2 { background: var(--theme-color2); opacity: 0.55; transform: rotate(4deg); left: 16%; right: 8%; } .bpas-wp-container .bpas-wk__post { position: relative; padding: 15px 15px 15px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 30px 60px color-mix(in srgb, var(--fx-ink) 16%, transparent); animation: bpas-v3-float 7s ease-in-out infinite; } .bpas-wp-container .bpas-wk__posthead { display: flex; align-items: center; gap: 10px; padding: 2px 4px 15px; } .bpas-wp-container .bpas-wk__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--theme-color2); background: var(--dark-color); box-shadow: 0 0 0 3px var(--theme-color2); } .bpas-wp-container .bpas-wk__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .bpas-wp-container .bpas-wk__who b { font-size: 15px; color: var(--dark-color); } .bpas-wp-container .bpas-wk__who small { font-size: 13px; color: var(--gray-color); } .bpas-wp-container .bpas-wk__live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 40px; font-size: 12px; font-weight: 800; color: var(--white); background: var(--theme-color-text); } .bpas-wp-container .bpas-wk__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--white); animation: bpas-v3-pulse 1.6s ease-in-out infinite; } .bpas-wp-container .bpas-wk__post .bpas-weekly__track { border-radius: 10px; box-shadow: none; } .bpas-wp-container .bpas-wk__post .bpas-weekly__nav { margin-top: 10px; } @media (max-width: 991px) { .bpas-wp-container .bpas-weekly--v3 { grid-template-columns: 1fr; padding: 35px 25px; gap: 30px; } } @media (max-width: 560px) { .bpas-wp-container .bpas-wk__flow { grid-template-columns: 1fr; } .bpas-wp-container .bpas-weekly--v3 { padding: 30px 15px; } .bpas-wp-container .bpas-wk__post { padding: 10px 10px 10px; border-radius: 10px; } .bpas-wp-container .bpas-wk__stage { padding: 5px 0 0; } } .bpas-wp-container .bpas-cta--v3 { display: block; position: relative; isolation: isolate; overflow: hidden; padding: 60px 55px 55px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 22%, transparent), transparent 40%), linear-gradient(135deg, var(--fx-ink), color-mix(in srgb, var(--fx-ink-2) 55%, var(--fx-ink-3))); } .bpas-wp-container .bpas-cta--v3 .bpas-eyebrow { color: var(--theme-color2); } .bpas-wp-container .bpas-cta__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; } .bpas-wp-container .bpas-cta--v3 .bpas-cta__actions { width: auto; } .bpas-wp-container .bpas-cta--v3 .bpas-cta__actions .bpas-btn { min-width: 240px; padding-top: 20px; padding-bottom: 20px; font-size: 17px; box-shadow: 0 16px 34px color-mix(in srgb, var(--fx-accent) 25%, transparent); } .bpas-wp-container .bpas-pace--wide { --pace-navy: #0d2344; --pace-gold: #e0b453; position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 35px; align-items: center; width: 100%; max-width: none; margin-top: 40px; padding: 30px 30px; border-radius: 10px; border: 0; overflow: hidden; background: transparent; box-shadow: 0 30px 60px rgba(0,0,0,0.30); } .bpas-wp-container .bpas-pace--wide .bpas-pace__ring { position: absolute; left: 50%; top: 50%; z-index: -2; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(224,180,83,0.15) 70%, #e0b453 80%, rgba(224,180,83,0.15) 88%, transparent 94%); animation: bpas-v3-spin 9s linear infinite; } .bpas-wp-container .bpas-pace--wide::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 10px; background: radial-gradient(circle at 18% 50%, rgba(224,180,83,0.20), transparent 36%), radial-gradient(rgba(224,180,83,0.12) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(120deg, #13305a 0%, var(--pace-navy) 55%, #0a1b36 100%); } .bpas-wp-container .bpas-pace--wide .bpas-pace__brand { display: flex; flex-direction: column; gap: 15px; padding-right: 35px; border-right: 1px solid rgba(224,180,83,0.25); } .bpas-wp-container .bpas-pace--wide .bpas-pace__eyebrow { display: inline-flex; align-items: center; width: fit-content; margin: 0; padding: 5px 10px; border-radius: 40px; font-size: 13px; font-weight: 700; color: var(--pace-gold); background: rgba(224,180,83,0.12); border: 1px solid rgba(224,180,83,0.35); } .bpas-wp-container .bpas-pace--wide .bpas-pace__logo { width: 340px !important; max-width: 340px !important; } .bpas-wp-container .bpas-pace--wide .bpas-pace__body { display: flex; flex-direction: column; min-width: 0; } .bpas-wp-container .bpas-pace--wide .bpas-pace__title { margin-top: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; letter-spacing: -0.01em; } .bpas-wp-container .bpas-pace--wide .bpas-pace__text { font-size: 15px; color: #d2dbea; } .bpas-wp-container .bpas-pace--wide .bpas-pace__promise { font-size: 15.5px; } .bpas-wp-container .bpas-pace--wide .bpas-pace__go { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 15px 20px; border: 0; border-radius: 40px; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--pace-navy); background: var(--pace-gold); white-space: nowrap; box-shadow: 0 12px 28px rgba(224,180,83,0.28); } .bpas-wp-container .bpas-pace--wide .bpas-pace__go b { margin-left: 0; width: 28px; height: 28px; color: var(--pace-gold); background: var(--pace-navy); } @media (hover: hover) { .bpas-wp-container .bpas-pace--wide:hover { transform: translateY(-4px); box-shadow: 0 36px 70px rgba(0,0,0,0.38); } .bpas-wp-container .bpas-pace--wide:hover .bpas-pace__go b { background: var(--pace-navy); color: var(--pace-gold); transform: translateX(4px); } } .bpas-wp-container .bpas-pace--wide:focus-visible { outline: 3px solid var(--pace-gold); outline-offset: 4px; } @media (max-width: 1199px) { .bpas-wp-container .bpas-t3__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bpas-wp-container .bpas-pace--wide { grid-template-columns: auto minmax(0, 1fr); } .bpas-wp-container .bpas-pace--wide .bpas-pace__go { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 991px) { .bpas-wp-container .bpas-t3__top { grid-template-columns: 1fr; gap: 30px; } .bpas-wp-container .bpas-trust--v3 { padding: 50px 30px; contain-intrinsic-size: auto 1700px; } .bpas-wp-container .bpas-h3__track { grid-template-columns: 1fr; gap: 20px; padding-left: 0; } .bpas-wp-container .bpas-h3__track { padding-left: 10px; } .bpas-wp-container .bpas-h3__rail { left: 55px; right: auto; top: 46px; bottom: 80px; width: 6px; height: auto; } .bpas-wp-container .bpas-h3__rail i { transform-origin: top; } .bpas-wp-container.bpas-rv-on .bpas-h3__track:not(.is-in) .bpas-h3__rail i { transform: scaleY(0); } .bpas-wp-container.bpas-rv-on .bpas-h3__track.is-in .bpas-h3__rail i { animation-name: bpas-v3-fillv; } .bpas-wp-container .bpas-h3__step { flex-direction: row; align-items: flex-start; gap: 20px; } .bpas-wp-container .bpas-h3__node { flex: 0 0 auto; } .bpas-wp-container .bpas-h3__card { margin-top: 0; } .bpas-wp-container .bpas-h3__card::before { left: -10px; top: 36px; margin-left: 0; transform: rotate(-45deg); } .bpas-wp-container .bpas-how--v3 { contain-intrinsic-size: auto 2300px; } .bpas-wp-container .bpas-cta--v3 { padding: 50px 30px; } .bpas-wp-container .bpas-cta__row { grid-template-columns: 1fr; align-items: start; gap: 25px; } } @media (max-width: 720px) { .bpas-wp-container .bpas-trust--v3 { padding: 35px 20px; border-radius: 10px; contain-intrinsic-size: auto 2300px; } .bpas-wp-container .bpas-t3__map { padding: 10px; border-radius: 10px; } .bpas-wp-container .bpas-t3__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bpas-wp-container .bpas-t3__scroll:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 2px; } .bpas-wp-container .bpas-t3__svg { width: 520px; max-width: none; } .bpas-wp-container .bpas-t3__hint { display: block; margin: 10px 0 0; font-size: 12px; font-weight: 700; text-align: center; color: var(--theme-color2); } .bpas-wp-container .bpas-wk__live { white-space: nowrap; } .bpas-wp-container .bpas-t3__cards { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; } .bpas-wp-container .bpas-h3__node { width: 64px; height: 64px; box-shadow: 0 0 0 6px var(--white), 0 12px 24px color-mix(in srgb, var(--fx-ink) 22%, transparent); } .bpas-wp-container .bpas-h3__ico svg { width: 30px; height: 30px; } .bpas-wp-container .bpas-h3__node b { min-width: 28px; height: 28px; font-size: 12px; } .bpas-wp-container .bpas-h3__track { padding-left: 10px; } .bpas-wp-container .bpas-h3__rail { left: 39px; top: 32px; bottom: 60px; } .bpas-wp-container .bpas-h3__step { gap: 15px; } .bpas-wp-container .bpas-h3__card { padding: 20px 20px 20px; } .bpas-wp-container .bpas-h3__card::before { top: 22px; } .bpas-wp-container .bpas-how--v3 { contain-intrinsic-size: auto 2700px; } .bpas-wp-container .bpas-cta--v3 { padding: 35px 20px; border-radius: 10px; } .bpas-wp-container .bpas-cta--v3 .bpas-cta__actions .bpas-btn { width: 100%; min-width: 0; } .bpas-wp-container .bpas-pace--wide { grid-template-columns: 1fr; gap: 20px; padding: 25px 20px; } .bpas-wp-container .bpas-pace--wide .bpas-pace__brand { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(224,180,83,0.25); } .bpas-wp-container .bpas-pace--wide .bpas-pace__logo { width: 100% !important; max-width: 340px !important; min-width: 0; } .bpas-wp-container .bpas-pace--wide .bpas-pace__go { white-space: normal; justify-self: stretch; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-t3__svg .t3-flow, .bpas-wp-container .bpas-h3__node::after, .bpas-wp-container .bpas-pace--wide .bpas-pace__ring, .bpas-wp-container .bpas-wk__post, .bpas-wp-container .bpas-wk__live::before, .bpas-wp-container .bpas-h3__rail i { animation: none !important; } .bpas-wp-container .bpas-pace--wide .bpas-pace__ring { transform: rotate(200deg); } .bpas-wp-container .bpas-t3__card, .bpas-wp-container .bpas-h3__card, .bpas-wp-container .bpas-pace--wide { transition: none !important; transform: none !important; } } @keyframes bpas-hv-rise { from { transform: translateY(14px); } to { transform: none; } } .bpas-wp-container .bpas-hero__copy h1, .bpas-wp-container .bpas-hero__copy .bpas-hero__line { animation-name: bpas-hv-rise; animation-delay: 0s; } @keyframes bpas-rel-ring { 0% { transform: scale(0.35); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } } @keyframes bpas-rel-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-hot) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--fx-hot) 0%, transparent); } } @keyframes bpas-rel-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bpas-wp-container .bpas-rel { margin-top: 90px; scroll-margin-top: 100px; } .bpas-wp-container .bpas-rel__panel { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr); margin-top: 35px; border-radius: 10px; overflow: hidden; overflow: clip; background: var(--white); border: 1px solid var(--line-light); box-shadow: 0 24px 60px color-mix(in srgb, var(--fx-ink) 10%, transparent); } .bpas-wp-container .bpas-rel__board { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px 35px 35px; color: var(--fx-on-dark); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 22%, transparent), transparent 45%), radial-gradient(circle at 0% 110%, color-mix(in srgb, var(--fx-hot) 22%, transparent), transparent 42%), linear-gradient(160deg, var(--fx-ink) 0%, var(--fx-ink-2) 100%); } .bpas-wp-container .bpas-rel__board::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--fx-accent) 28%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%); mask-image: linear-gradient(200deg, #000 0%, transparent 60%); } .bpas-wp-container .bpas-rel__radar { position: absolute; right: -70px; top: -70px; z-index: -1; width: 260px; height: 260px; pointer-events: none; } .bpas-wp-container .bpas-rel__radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--fx-accent) 45%, transparent); animation: bpas-rel-ring 4.5s ease-out infinite; } .bpas-wp-container .bpas-rel__radar i:nth-child(2) { animation-delay: 1.5s; } .bpas-wp-container .bpas-rel__radar i:nth-child(3) { animation-delay: 3s; } .bpas-wp-container .bpas-rel__tag { display: inline-flex; align-items: center; gap: 10px; padding: 5px 15px; border-radius: 40px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-color); background: var(--theme-color2); } .bpas-wp-container .bpas-rel__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dark-color); } .bpas-wp-container .bpas-rel__label { margin-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--fx-on-dark-2) 70%, var(--fx-line)); } .bpas-wp-container .bpas-rel__month { display: block; font-size: clamp(40px, 4.4vw, 58px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--white); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-rel__sum { margin: 4px 0 5px; font-size: 15px; line-height: 1.5; color: var(--fx-on-dark); } .bpas-wp-container .bpas-rel__all { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; min-height: 44px; padding: 10px 20px; border-radius: 40px; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--dark-color); background: var(--theme-color2); transition: background-color 0.25s ease; } .bpas-wp-container .bpas-rel__all i { font-style: normal; transition: transform 0.25s ease; } .bpas-wp-container .bpas-rel__all:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; } .bpas-wp-container .bpas-rel__stick { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .bpas-wp-container .bpas-rel__stick > .bpas-rel__all { margin-top: 20px; } @media (min-width: 992px) { .bpas-wp-container .bpas-rel__stick { position: sticky; top: 110px; } } .bpas-wp-container .bpas-rel__list { position: relative; display: grid; gap: 15px; padding: 30px 30px 30px 60px; } .bpas-wp-container .bpas-rel__list::before { content: ""; position: absolute; left: 33px; top: 46px; bottom: 46px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--theme-color) 0%, var(--theme-color2) 55%, var(--line-light) 100%); transform-origin: top; } .bpas-wp-container.bpas-rv-on .bpas-rel__list:not(.is-in)::before { transform: scaleY(0); } .bpas-wp-container.bpas-rv-on .bpas-rel__list.is-in::before { animation: bpas-rel-rail 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards; } .bpas-wp-container .bpas-rel__item { --r-acc: var(--theme-color2); --r-dark: var(--dark-color); --r-pill-bg: var(--dark-color); --r-pill-ink: var(--theme-color2); position: relative; } .bpas-wp-container .bpas-rel__item::before { content: ""; position: absolute; left: -36px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--r-dark); box-shadow: 0 0 0 4px var(--white); } .bpas-wp-container .bpas-rel__item.is-new::before { background: var(--theme-color); border-color: var(--theme-color); animation: bpas-rel-dot 1.8s ease-in-out infinite; } .bpas-wp-container .bpas-rel__card { position: relative; display: block; padding: 20px 20px 20px 20px; border-radius: 10px; background: var(--white); border: 1px solid var(--line-light); overflow: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .bpas-wp-container .bpas-rel__card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--r-acc); transform: scaleY(0.35); transform-origin: top; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .bpas-wp-container .bpas-rel__item.is-new .bpas-rel__card { border-color: color-mix(in srgb, var(--fx-hot) 45%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--fx-ink) 8%, transparent); } .bpas-wp-container .bpas-rel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; margin-bottom: 10px; } .bpas-wp-container .bpas-rel__prod { display: inline-block; padding: 3px 10px; border-radius: 40px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; color: var(--r-pill-ink); background: var(--r-pill-bg); } .bpas-wp-container .bpas-rel__meta time { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--gray-color) 88%, var(--fx-ink)); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-rel__new { padding: 2px 10px; border-radius: 40px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: var(--theme-color-text); } .bpas-wp-container .bpas-rel__card h3 { margin: 0 0 5px; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; } .bpas-wp-container .bpas-rel__card h3 a { color: var(--dark-color); } .bpas-wp-container .bpas-rel__card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; } .bpas-wp-container .bpas-rel__card h3 a:focus-visible { outline: none; } .bpas-wp-container .bpas-rel__card:focus-within { box-shadow: 0 0 0 3px var(--theme-color), 0 14px 34px color-mix(in srgb, var(--fx-ink) 12%, transparent); } .bpas-wp-container .bpas-rel__card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gray-color); } .bpas-wp-container .bpas-rel__go { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--dark-color); } .bpas-wp-container .bpas-rel__go i { font-style: normal; display: inline-block; transition: transform 0.3s ease; } @media (hover: hover) { .bpas-wp-container .bpas-rel__card:hover { transform: translateX(6px); border-color: var(--r-dark); box-shadow: 0 18px 40px color-mix(in srgb, var(--fx-ink) 12%, transparent); } .bpas-wp-container .bpas-rel__card:hover::after { transform: scaleY(1); } .bpas-wp-container .bpas-rel__card:hover .bpas-rel__go i { transform: translateX(5px); } .bpas-wp-container .bpas-rel__all:hover { background: var(--white); } .bpas-wp-container .bpas-rel__all:hover i { transform: translateX(4px); } } .bpas-wp-container .bpas-rel { content-visibility: auto; contain-intrinsic-size: auto 820px; } @media (max-width: 991px) { .bpas-wp-container .bpas-rel { margin-top: 65px; contain-intrinsic-size: auto 1150px; } .bpas-wp-container .bpas-rel__panel { grid-template-columns: 1fr; } .bpas-wp-container .bpas-rel__board { padding: 30px 25px 30px; } .bpas-wp-container .bpas-rel__stick > .bpas-rel__all { margin-top: 10px; } } @media (max-width: 720px) { .bpas-wp-container .bpas-rel { contain-intrinsic-size: auto 1500px; } .bpas-wp-container .bpas-rel__panel { border-radius: 10px; } .bpas-wp-container .bpas-rel__board { padding: 30px 20px 25px; } .bpas-wp-container .bpas-rel__radar { width: 200px; height: 200px; right: -60px; top: -60px; } .bpas-wp-container .bpas-rel__all { width: 100%; justify-content: center; } .bpas-wp-container .bpas-rel__list { padding: 20px 15px 20px 40px; gap: 10px; } .bpas-wp-container .bpas-rel__list::before { left: 17px; top: 38px; bottom: 38px; } .bpas-wp-container .bpas-rel__item::before { left: -27px; top: 22px; width: 12px; height: 12px; } .bpas-wp-container .bpas-rel__card { padding: 15px 15px 15px 20px; } .bpas-wp-container .bpas-rel__card h3 { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-rel__radar i, .bpas-wp-container .bpas-rel__item.is-new::before, .bpas-wp-container .bpas-rel__list::before { animation: none !important; } .bpas-wp-container .bpas-rel__radar i { opacity: 0.35; transform: scale(0.8); } .bpas-wp-container .bpas-rel__radar i:nth-child(2) { transform: scale(0.55); } .bpas-wp-container .bpas-rel__radar i:nth-child(3) { transform: scale(1.05); opacity: 0.2; } .bpas-wp-container .bpas-rel__card:hover { transform: none; } } .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 { --fx-ink: #063232; --fx-ink-2: #0b4141; --fx-ink-3: #145151; --fx-accent: #c2df93; --fx-hot: #e3572b; --fx-hot-text: #bd4520; --fx-tint: #ecf8f8; --fx-line: #cfe3e3; --fx-body: #46625f; --fx-strip: linear-gradient(90deg, var(--fx-hot) 0%, var(--fx-accent) 100%); } .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.bpas-pn2-on { padding-right: max(24px, calc(312px - (100vw - 1320px) / 2)); } } @keyframes bpas-h4-run { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } @keyframes bpas-h4-runv { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes bpas-h4-pop { 0% { transform: scale(0.72); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes bpas-h4-ping { 0% { opacity: 0.85; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.75); } } @keyframes bpas-h4-turn { from { transform: rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes bpas-h4-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bpas-h4-growv { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes bpas-h4-slide { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } @keyframes bpas-h4-shine { from { transform: translateX(-120%); } to { transform: translateX(260%); } } @keyframes bpas-h4-num { from { opacity: 0; transform: translateY(16px) scale(0.92); } to { opacity: 1; transform: none; } } .bpas-wp-container .bpas-h4__band { position: relative; isolation: isolate; overflow: hidden; margin-top: 45px; padding: 50px 40px 45px; border-radius: 10px; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--fx-hot) 22%, transparent), transparent 40%), radial-gradient(circle at 96% 100%, color-mix(in srgb, var(--fx-accent) 20%, transparent), transparent 45%), linear-gradient(135deg, var(--fx-ink) 0%, var(--fx-ink-2) 100%); box-shadow: 0 30px 60px color-mix(in srgb, var(--fx-ink) 18%, transparent); } .bpas-wp-container .bpas-h4__band::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 .bpas-h4__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--fx-accent) 16%, transparent) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); } .bpas-wp-container .bpas-how--v33 .bpas-h3__track { margin-top: 0; } .bpas-wp-container .bpas-how--v33 .bpas-h3__rail { background: rgba(255,255,255,0.12); } .bpas-wp-container .bpas-how--v33 .bpas-h3__rail i { box-shadow: 0 0 18px color-mix(in srgb, var(--fx-accent) 45%, transparent); } .bpas-wp-container .bpas-h4__run { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .bpas-wp-container .bpas-h4__run span { position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -10px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-accent) 55%, transparent), 0 0 22px 6px color-mix(in srgb, var(--fx-accent) 65%, transparent); } .bpas-wp-container .bpas-how--v33 .bpas-h3__node { background: var(--fx-ink-3); color: var(--fx-accent); box-shadow: 0 0 0 7px var(--fx-ink-2), 0 0 0 9px color-mix(in srgb, var(--fx-accent) 35%, transparent), 0 18px 34px rgba(0,0,0,0.35); } .bpas-wp-container .bpas-how--v33 .bpas-h3__node::after { border-color: color-mix(in srgb, var(--fx-accent) 50%, transparent); animation: none; } .bpas-wp-container .bpas-how--v33 .bpas-h3__node::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--fx-accent); opacity: 0; pointer-events: none; } .bpas-wp-container .bpas-how--v33 .bpas-h3__node b { box-shadow: 0 0 0 4px var(--fx-ink-2); } .bpas-wp-container .bpas-how--v33 .bpas-h3__card { overflow: hidden; border-color: transparent; box-shadow: 0 18px 40px rgba(0,0,0,0.28); } .bpas-wp-container .bpas-how--v33 .bpas-h3__card::before { display: none; } .bpas-wp-container .bpas-how--v33 .bpas-h3__card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--fx-strip); transform-origin: left; } .bpas-wp-container .bpas-h4__big { position: absolute; right: 18px; top: 6px; font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--fx-tint); pointer-events: none; font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-how--v33 .bpas-h3__card > :not(.bpas-h4__big) { position: relative; } .bpas-wp-container .bpas-how--v33 .bpas-h3__card > p.bpas-h3__get { overflow: hidden; border: 1px solid color-mix(in srgb, var(--fx-accent) 70%, transparent); background: linear-gradient(90deg, #f1f9e6, var(--fx-tint)); } .bpas-wp-container .bpas-how--v33 .bpas-h3__get::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); transform: translateX(-120%); pointer-events: none; } @media (hover: hover) { .bpas-wp-container .bpas-how--v33 .bpas-h3__step:hover .bpas-h3__card { transform: translateY(-8px); border-color: var(--fx-accent); box-shadow: 0 26px 52px rgba(0,0,0,0.34); } .bpas-wp-container .bpas-how--v33 .bpas-h3__step:hover .bpas-h3__node { transform: translateY(-4px); } .bpas-wp-container .bpas-how--v33 .bpas-h3__node { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } } .bpas-wp-container .bpas-how--v33 .bpas-h3__step:nth-of-type(2) { --at: 0.2s; } .bpas-wp-container .bpas-how--v33 .bpas-h3__step:nth-of-type(3) { --at: 1s; } .bpas-wp-container .bpas-how--v33 .bpas-h3__step:nth-of-type(4) { --at: 1.8s; } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h4__run { animation: bpas-h4-run 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards; } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__step { animation-delay: var(--at); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__node { animation: bpas-h4-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: var(--at); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__node::before { animation: bpas-h4-ping 1s ease-out backwards; animation-delay: calc(var(--at) + 0.15s); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__node::after { animation: bpas-h4-turn 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: var(--at); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__ico svg :is(path, circle, rect, line) { animation-delay: calc(var(--at) + 0.25s); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track:not(.is-in) .bpas-h3__card::after { transform: scaleX(0); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__card::after { animation: bpas-h4-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards; animation-delay: calc(var(--at) + 0.35s); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h4__big { animation: bpas-h4-num 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--at) + 0.3s); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__get { animation: bpas-h4-slide 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--at) + 0.55s); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h3__get::after { animation: bpas-h4-shine 1.1s ease 1 backwards; animation-delay: calc(var(--at) + 1.05s); } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-ipx { animation: bpas-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--at) + 0.75s); } @media (max-width: 991px) { .bpas-wp-container .bpas-h4__band { padding: 40px 25px 35px; } .bpas-wp-container .bpas-h4__run span { left: 50%; top: -9px; margin: 0 0 0 -10px; } .bpas-wp-container.bpas-rv-on .bpas-how--v33 .bpas-h3__track.is-in .bpas-h4__run { animation-name: bpas-h4-runv; } .bpas-wp-container .bpas-how--v33 .bpas-h3__card { padding-top: 30px; } } @media (max-width: 720px) { .bpas-wp-container .bpas-h4__band { margin-top: 30px; padding: 30px 10px 30px; border-radius: 10px; } .bpas-wp-container .bpas-h4__band::before { left: 22px; right: 22px; } .bpas-wp-container .bpas-how--v33 .bpas-h3__node { box-shadow: 0 0 0 5px var(--fx-ink-2), 0 0 0 7px color-mix(in srgb, var(--fx-accent) 35%, transparent), 0 12px 24px rgba(0,0,0,0.3); } .bpas-wp-container .bpas-h4__big { right: 12px; top: 8px; font-size: 64px; } } .bpas-wp-container .bpas-wk__dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(color-mix(in srgb, var(--fx-ink) 12%, transparent) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 80% 40%, #000 0%, transparent 65%); } .bpas-wp-container .bpas-weekly--v33::before { content: ""; position: absolute; left: 48px; right: 48px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--fx-strip); } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__blob--a { background: radial-gradient(circle, color-mix(in srgb, var(--fx-hot) 16%, transparent), transparent 65%); } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__flow { grid-template-columns: 1fr; gap: 10px; max-width: 480px; } .bpas-wp-container .bpas-weekly--v33 { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 50px; } @media (max-width: 991px) { .bpas-wp-container .bpas-weekly--v33 { grid-template-columns: 1fr; gap: 30px; } } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__flow li { position: relative; overflow: hidden; padding: 10px 40px 10px 10px; background: #ffffff; box-shadow: 0 8px 18px color-mix(in srgb, var(--fx-ink) 5%, transparent); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__flow li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--fx-hot), var(--fx-accent)); transform-origin: top; } .bpas-wp-container .bpas-wk__fn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--fx-line); font-variant-numeric: tabular-nums; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__fi { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__fi.bpas-draw svg { stroke-width: 3; } @media (hover: hover) { .bpas-wp-container .bpas-weekly--v33 .bpas-wk__flow li:hover { transform: translateY(-3px); border-color: var(--fx-accent); box-shadow: 0 14px 26px color-mix(in srgb, var(--fx-ink) 10%, transparent); } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__flow li:hover .bpas-wk__fi { color: #ffffff; background: var(--fx-hot-text); transform: rotate(-6deg); } } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__now { position: relative; overflow: hidden; border-left: 0; padding-left: 20px; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__now::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--fx-hot), var(--fx-accent)); transform-origin: top; } .bpas-wp-container .bpas-wk__orbit { position: absolute; left: 50%; top: 46%; width: 112%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--fx-ink) 14%, transparent); transform: translate(-50%, -50%); pointer-events: none; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__ghost { transition: transform 0.4s ease; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__ghost--1 { transform: rotate(-7deg) translateX(-14px); opacity: 0.2; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__ghost--2 { transform: rotate(6deg) translateX(14px); } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__post { animation: none; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__live::before { animation: none; } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__avatar { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--fx-accent); } @media (hover: hover) { .bpas-wp-container .bpas-weekly--v33 .bpas-wk__stage:hover .bpas-wk__ghost--1 { transform: rotate(-10deg) translateX(-24px); } .bpas-wp-container .bpas-weekly--v33 .bpas-wk__stage:hover .bpas-wk__ghost--2 { transform: rotate(9deg) translateX(24px); } } @keyframes bpas-wk-fan1 { from { transform: rotate(0) translateX(0); opacity: 0; } to { transform: rotate(-7deg) translateX(-14px); opacity: 0.2; } } @keyframes bpas-wk-fan2 { from { transform: rotate(0) translateX(0); opacity: 0; } to { transform: rotate(6deg) translateX(14px); opacity: 0.55; } } @keyframes bpas-wk-deal { from { opacity: 0; transform: translateY(40px) rotate(-3deg) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes bpas-wk-nudge { 0%, 100% { transform: none; } 35% { transform: translateX(-34px); } 70% { transform: translateX(6px); } } @keyframes bpas-wk-orbit { from { transform: translate(-50%, -50%) rotate(-40deg) scale(0.9); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } } @keyframes bpas-wk-dot { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33:not(.is-in) .bpas-wk__flow li::before, .bpas-wp-container.bpas-rv-on .bpas-weekly--v33:not(.is-in) .bpas-wk__now::before { transform: scaleY(0); } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__flow li::before { animation: bpas-h4-growv 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards; animation-delay: calc(0.3s + var(--i, 0) * 0.12s); } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__flow li { animation-delay: calc(0.1s + var(--i, 0) * 0.12s); } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__fn { animation: bpas-h4-num 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(0.35s + var(--i, 0) * 0.12s); } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__fi svg path { animation-delay: calc(0.3s + var(--i, 0) * 0.12s); } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__now { animation-delay: 0.6s; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__now::before { animation: bpas-h4-growv 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.8s backwards; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33:not(.is-in) .bpas-wk__stage > * { opacity: 0; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__orbit { animation: bpas-wk-orbit 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__ghost--1 { animation: bpas-wk-fan1 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s backwards; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__ghost--2 { animation: bpas-wk-fan2 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s backwards; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__post { animation: bpas-wk-deal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-weekly__slide:first-child { animation: bpas-wk-nudge 1.1s cubic-bezier(0.4, 0, 0.2, 1) 1.5s 1 both; } .bpas-wp-container.bpas-rv-on .bpas-weekly--v33.is-in .bpas-wk__live::before { animation: bpas-wk-dot 1.2s ease-in-out 1.2s 3; } @media (max-width: 991px) { .bpas-wp-container .bpas-weekly--v33::before { left: 24px; right: 24px; } .bpas-wp-container .bpas-wk__orbit { width: 96%; } } @media (max-width: 560px) { .bpas-wp-container .bpas-weekly--v33::before { left: 16px; right: 16px; } .bpas-wp-container .bpas-wk__orbit { display: none; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-how--v33 *, .bpas-wp-container .bpas-how--v33 *::before, .bpas-wp-container .bpas-how--v33 *::after, .bpas-wp-container .bpas-weekly--v33 *, .bpas-wp-container .bpas-weekly--v33 *::before, .bpas-wp-container .bpas-weekly--v33 *::after { animation: none !important; transition: none !important; } } @media (min-width: 992px) { .bpas-wp-container .bpas-modgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bpas-wp-container .bpas-acc__soon { display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 40px; font-size: 13px; font-weight: 700; color: var(--gray-color); background: var(--theme-color3); border: 1px dashed var(--line-light); } .bpas-wp-container .bpas-acc__soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color-text); } .bpas-wp-container .bpas-acc__guides--soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; } .bpas-wp-container .bpas-ind--soon { cursor: default; } .bpas-wp-container .bpas-mb, .bpas-wp-container .bpas-mb *, .bpas-wp-container .bpas-mb::before, .bpas-wp-container .bpas-mb::after, .bpas-wp-container .bpas-mb *::before, .bpas-wp-container .bpas-mb *::after, .bpas-wp-container .bpas-t3__map .t3-flow, .bpas-wp-container .bpas-rel *, .bpas-wp-container .bpas-rel *::before, .bpas-wp-container .bpas-rel *::after, .bpas-wp-container .bpas-dir__tag::before, .bpas-wp-container .bpas-live::before, .bpas-wp-container .bpas-live::after { animation-iteration-count: 1 !important; } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-hv__live, .bpas-wp-container .bpas-hv__live::before, .bpas-wp-container .bpas-hv__live::after { animation: none !important; } } @media (min-width: 721px) { .bpas-wp-container .bpas-pace--wide { grid-template-columns: auto minmax(0, 1fr); } .bpas-wp-container .bpas-pace--wide .bpas-pace__go { grid-column: 1 / -1; justify-self: start; white-space: normal; } } .bpas-wp-container .bpas-hv__art { position: relative; padding: 15px 15px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-dark); overflow: hidden; } .bpas-wp-container .bpas-hvs { display: grid; grid-template-columns: minmax(0, 0.85fr) 30px minmax(0, 1.35fr); align-items: center; gap: 10px; } .bpas-wp-container .bpas-hvs__dev { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 136px; padding: 10px 10px 10px; border-radius: 10px; background: color-mix(in srgb, var(--fx-ink) 78%, #000); border: 1px solid color-mix(in srgb, var(--fx-accent) 35%, transparent); box-shadow: inset 0 0 0 4px rgba(255,255,255,0.03); overflow: hidden; } .bpas-wp-container .bpas-hvs__bc { position: relative; height: 62px; border-radius: 5px; background: #f4f7f2; } .bpas-wp-container .bpas-hvs__bc::before { content: ""; position: absolute; inset: 9px 10px; background: repeating-linear-gradient(90deg, var(--fx-ink) 0 2px, transparent 2px 4px, var(--fx-ink) 4px 7px, transparent 7px 9px, var(--fx-ink) 9px 10px, transparent 10px 13px, var(--fx-ink) 13px 16px, transparent 16px 18px); } .bpas-wp-container .bpas-hvs__laser { position: absolute; left: 6px; right: 6px; top: 16px; height: 2px; border-radius: 2px; background: var(--theme-color); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--fx-hot) 75%, transparent); opacity: 0; animation: bpas-hvs-laser 4s ease-in-out infinite; } .bpas-wp-container .bpas-hvs__post { align-self: flex-end; padding: 5px 10px; border-radius: 40px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color2); background: color-mix(in srgb, var(--fx-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fx-accent) 35%, transparent); animation: bpas-hvs-post 4s ease-in-out infinite; } .bpas-wp-container .bpas-hvs__wire { position: relative; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fx-accent) 28%, transparent); } .bpas-wp-container .bpas-hvs__wire b { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-color2); box-shadow: 0 0 8px color-mix(in srgb, var(--fx-accent) 80%, transparent); opacity: 0; animation: bpas-hvs-wire 4s ease-in-out infinite; } .bpas-wp-container .bpas-hvs__docs { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; } .bpas-wp-container .bpas-hvs__docs li { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 10px; border-radius: 5px; font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--fx-on-dark); background: rgba(255,255,255,0.04); border: 1px solid var(--line-dark); animation: bpas-hvs-doc 16s ease-in-out infinite; animation-delay: calc(var(--k) * 4s); } .bpas-wp-container .bpas-hvs__docs li::marker { content: none; } .bpas-wp-container .bpas-hvs__docs li::before { content: ""; flex: 0 0 auto; width: 10px; height: 13px; border-radius: 2px; border: 1.5px solid currentColor; opacity: 0.8; } @keyframes bpas-hvs-laser { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: 1; } 25% { transform: translateY(46px); opacity: 1; } 30%, 100% { transform: translateY(46px); opacity: 0; } } @keyframes bpas-hvs-post { 0%, 26% { background: color-mix(in srgb, var(--fx-accent) 14%, transparent); color: var(--theme-color2); } 30%, 42% { background: var(--theme-color2); color: var(--dark-color); } 50%, 100% { background: color-mix(in srgb, var(--fx-accent) 14%, transparent); color: var(--theme-color2); } } @keyframes bpas-hvs-wire { 0%, 32% { left: 0; opacity: 0; } 36% { opacity: 1; } 54% { left: calc(100% - 10px); opacity: 1; } 60%, 100% { left: calc(100% - 10px); opacity: 0; } } @keyframes bpas-hvs-doc { 0%, 13% { background: rgba(255,255,255,0.04); color: var(--fx-on-dark); border-color: var(--line-dark); transform: none; } 15%, 25% { background: var(--theme-color2); color: var(--dark-color); border-color: var(--theme-color2); transform: translateX(-3px); } 31%, 100% { background: rgba(255,255,255,0.04); color: var(--fx-on-dark); border-color: var(--line-dark); transform: none; } } .bpas-wp-container .bpas-hvw { position: relative; display: grid; grid-template-columns: 21% minmax(0, 1fr) 21%; gap: 7%; align-items: stretch; height: 120px; } .bpas-wp-container .bpas-hvw__zone { position: relative; display: grid; place-items: end center; padding-bottom: 5px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--fx-accent) 35%, transparent); background: rgba(255,255,255,0.03); animation: bpas-hvw-zone 16s ease-in-out infinite; animation-delay: calc(var(--k) * 4s); } .bpas-wp-container .bpas-hvw__bins { box-sizing: border-box; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 5px; padding-bottom: 20px; } .bpas-wp-container .bpas-hvw__bins i { border-radius: 5px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-dark); } .bpas-wp-container .bpas-hvw__bins i.is-full { background: rgba(79,179,173,0.35); } .bpas-wp-container .bpas-hvw__bins i.is-slot { animation: bpas-hvw-slot 16s ease-in-out infinite; } .bpas-wp-container .bpas-hvw__lab { position: absolute; left: 0; right: 0; bottom: -2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--fx-on-dark-2); white-space: nowrap; } .bpas-wp-container .bpas-hvw__zone .bpas-hvw__lab { position: static; } .bpas-wp-container .bpas-hvw__mid { position: relative; height: 100%; } .bpas-wp-container .bpas-hvw__pal { position: absolute; z-index: 2; left: 10.5%; top: 42%; width: 16px; height: 16px; margin: -10px 0 0 -10px; border-radius: 4px; background: linear-gradient(135deg, var(--theme-color), color-mix(in srgb, var(--fx-hot) 70%, var(--fx-accent))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-hot) 25%, transparent), 0 4px 10px rgba(0,0,0,0.35); animation: bpas-hvw-pal 16s ease-in-out infinite; } @keyframes bpas-hvw-zone { 0%, 2% { background: rgba(255,255,255,0.03); border-color: color-mix(in srgb, var(--fx-accent) 35%, transparent); } 5%, 22% { background: color-mix(in srgb, var(--fx-accent) 18%, transparent); border-color: var(--theme-color2); } 26%, 100% { background: rgba(255,255,255,0.03); border-color: color-mix(in srgb, var(--fx-accent) 35%, transparent); } } @keyframes bpas-hvw-slot { 0%, 30% { background: rgba(255,255,255,0.05); border-color: var(--line-dark); } 34%, 49% { background: color-mix(in srgb, var(--fx-accent) 55%, transparent); border-color: var(--theme-color2); } 52%, 60% { background: color-mix(in srgb, var(--fx-hot) 55%, transparent); border-color: var(--theme-color); } 64%, 100% { background: rgba(255,255,255,0.05); border-color: var(--line-dark); } } @keyframes bpas-hvw-pal { 0% { left: 0%; top: 42%; opacity: 0; } 5% { left: 10.5%; top: 42%; opacity: 1; } 22% { left: 10.5%; top: 42%; } 32%, 49% { left: 50%; top: 13%; } 58%, 72% { left: 75%; top: 42%; } 82%, 94% { left: 89.5%; top: 42%; opacity: 1; } 100% { left: 89.5%; top: 42%; opacity: 0; } } @media (max-width: 520px) { .bpas-wp-container .bpas-hvw__lab { font-size: 8px; letter-spacing: 0; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-hvs__laser, .bpas-wp-container .bpas-hvs__wire b { display: none; } } .bpas-wp-container .bpas-hv__pause { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: fit-content; margin: 10px 0 0 auto; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; border-radius: 40px; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color2); border: 1px solid color-mix(in srgb, var(--fx-accent) 45%, transparent); transition: background-color 0.2s ease, color 0.2s ease; } .bpas-wp-container .bpas-hv__pause[hidden] { display: none; } .bpas-wp-container .bpas-hv__pause::before { content: ""; width: 7px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box; } .bpas-wp-container .bpas-hv__pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; } .bpas-wp-container .bpas-hv__pause:hover { background: var(--theme-color2); color: var(--dark-color); } .bpas-wp-container .bpas-hv__pause:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 2px; } .bpas-wp-container .bpas-hv.is-paused, .bpas-wp-container .bpas-hv.is-paused *, .bpas-wp-container .bpas-hv.is-paused::after, .bpas-wp-container .bpas-hv.is-paused *::before, .bpas-wp-container .bpas-hv.is-paused *::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-hv__pause { display: none; } } .bpas-wp-container .bpas-hv--spectrum { --h0: var(--fx-hot); --h1: color-mix(in oklch, var(--fx-hot) 67%, var(--fx-accent)); --h2: color-mix(in oklch, var(--fx-hot) 33%, var(--fx-accent)); --h3: var(--fx-accent); --h4: color-mix(in srgb, var(--fx-ink-3) 35%, var(--fx-accent)); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__art { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--h0) 26%, transparent), transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--h3) 22%, transparent), transparent 55%), radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--h2) 14%, transparent), transparent 45%), rgba(255,255,255,0.03); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--fx-strip); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__q:nth-child(1), .bpas-wp-container .bpas-hv--spectrum .bpas-hv__steps li:nth-child(1) { --h: var(--h0); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__q:nth-child(2), .bpas-wp-container .bpas-hv--spectrum .bpas-hv__steps li:nth-child(2) { --h: var(--h1); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__q:nth-child(3), .bpas-wp-container .bpas-hv--spectrum .bpas-hv__steps li:nth-child(3) { --h: var(--h2); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__q:nth-child(4), .bpas-wp-container .bpas-hv--spectrum .bpas-hv__steps li:nth-child(4) { --h: var(--h3); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__q { border-color: color-mix(in srgb, var(--h) 60%, transparent); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--h) 22%, transparent), transparent 60%), linear-gradient(135deg, var(--fx-ink-2), color-mix(in srgb, var(--fx-ink-2) 55%, var(--fx-ink-3))); box-shadow: 0 10px 26px color-mix(in srgb, var(--h) 18%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__qi { background: linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 70%, #fff)); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__q b { color: color-mix(in srgb, var(--h) 55%, #fff); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__steps i { background: color-mix(in srgb, var(--h) 22%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hv__steps i::after { background: var(--h); box-shadow: 0 0 8px var(--h); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__dev { border: 1.5px solid transparent; background: linear-gradient(color-mix(in srgb, var(--fx-ink) 78%, #000), color-mix(in srgb, var(--fx-ink) 78%, #000)) padding-box, linear-gradient(160deg, var(--h0), var(--h2) 50%, var(--h3)) border-box; box-shadow: 0 10px 24px color-mix(in srgb, var(--h0) 22%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__bc { box-shadow: 0 0 0 3px color-mix(in srgb, var(--h1) 55%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__laser { background: linear-gradient(90deg, var(--h0), var(--h2), var(--h0)); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__wire { background: linear-gradient(90deg, var(--h0), var(--h3)); opacity: 0.75; } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__wire b { animation: bpas-hvs-wire 4s ease-in-out infinite, bpas-hvs-hue 16s step-end infinite; } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__docs li:nth-child(1) { --h: var(--h0); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__docs li:nth-child(2) { --h: var(--h1); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__docs li:nth-child(3) { --h: var(--h2); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__docs li:nth-child(4) { --h: var(--h3); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__docs li { color: color-mix(in srgb, var(--fx-line) 45%, var(--fx-tint)); border-left: 3px solid var(--h); background: color-mix(in srgb, var(--h) 9%, transparent); animation-name: bpas-hvs-doc2; } .bpas-wp-container .bpas-hv--spectrum .bpas-hvs__docs li::before { border: 0; opacity: 1; background: linear-gradient(160deg, var(--h), color-mix(in srgb, var(--h) 60%, #fff)); } @keyframes bpas-hvs-doc2 { 0%, 13% { background: color-mix(in srgb, var(--h) 9%, transparent); box-shadow: none; transform: none; } 15%, 25% { background: color-mix(in srgb, var(--h) 32%, color-mix(in srgb, var(--fx-ink) 92%, #000)); box-shadow: 0 0 0 1px var(--h), 0 8px 20px color-mix(in srgb, var(--h) 40%, transparent); transform: translateX(-4px); } 31%, 100% { background: color-mix(in srgb, var(--h) 9%, transparent); box-shadow: none; transform: none; } } @keyframes bpas-hvs-hue { 0% { background: var(--h0); } 25% { background: var(--h1); } 50% { background: var(--h2); } 75% { background: var(--h3); } } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw::before { content: ""; position: absolute; left: 10%; right: 10%; top: 42%; height: 3px; margin-top: -1.5px; background: var(--fx-strip); opacity: 0.38; -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 12px); mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 12px); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__zone:first-child { --h: var(--h0); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__zone:nth-child(3) { --h: var(--h3); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__zone { border-color: color-mix(in srgb, var(--h) 60%, transparent); background: color-mix(in srgb, var(--h) 10%, transparent); animation-name: bpas-hvw-zone2; } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__zone .bpas-hvw__lab { color: color-mix(in srgb, var(--h) 55%, #fff); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__bins i:nth-child(1) { background: color-mix(in srgb, var(--h1) 55%, transparent); border-color: color-mix(in srgb, var(--h1) 70%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__bins i:nth-child(5) { background: color-mix(in srgb, var(--h4) 55%, transparent); border-color: color-mix(in srgb, var(--h4) 70%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__bins i:nth-child(6) { background: color-mix(in srgb, var(--h2) 50%, transparent); border-color: color-mix(in srgb, var(--h2) 70%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__bins i:nth-child(7) { background: color-mix(in srgb, var(--h3) 45%, transparent); border-color: color-mix(in srgb, var(--h3) 70%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__bins i:nth-child(9) { background: color-mix(in srgb, var(--h0) 45%, transparent); border-color: color-mix(in srgb, var(--h0) 70%, transparent); } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__bins i.is-slot { animation-name: bpas-hvw-slot2; } .bpas-wp-container .bpas-hv--spectrum .bpas-hvw__pal { background: linear-gradient(135deg, var(--h0), var(--h2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h0) 30%, transparent), 0 0 18px color-mix(in srgb, var(--h1) 70%, transparent); } @keyframes bpas-hvw-zone2 { 0%, 2% { background: color-mix(in srgb, var(--h) 10%, transparent); border-color: color-mix(in srgb, var(--h) 60%, transparent); box-shadow: none; } 5%, 22% { background: color-mix(in srgb, var(--h) 30%, transparent); border-color: var(--h); box-shadow: 0 0 18px color-mix(in srgb, var(--h) 45%, transparent); } 26%, 100% { background: color-mix(in srgb, var(--h) 10%, transparent); border-color: color-mix(in srgb, var(--h) 60%, transparent); box-shadow: none; } } @keyframes bpas-hvw-slot2 { 0%, 30% { background: rgba(255,255,255,0.05); border-color: var(--line-dark); box-shadow: none; } 34%, 49% { background: color-mix(in srgb, var(--h3) 70%, transparent); border-color: var(--h3); box-shadow: 0 0 14px color-mix(in srgb, var(--h3) 60%, transparent); } 52%, 60% { background: color-mix(in srgb, var(--h0) 70%, transparent); border-color: var(--h0); box-shadow: 0 0 14px color-mix(in srgb, var(--h0) 60%, transparent); } 64%, 100% { background: rgba(255,255,255,0.05); border-color: var(--line-dark); box-shadow: none; } } .bpas-wp-container .bpas-vs { --fx-strip-v: linear-gradient(180deg, var(--fx-accent) 0%, var(--fx-hot) 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: var(--fx-on-dark); 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-rv-on .bpas-vs:not(.is-in) .bpas-vs__arc::after { transform: scaleY(0); } .bpas-wp-container.bpas-rv-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, .bpas-wp-container .bpas-vs__arc .bpas-vs__item { 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-rv-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, .bpas-wp-container .bpas-vs__arc .bpas-vs__item { 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:not(.bpas-rv-on) .bpas-vs__n, .bpas-wp-container:not(.bpas-rv-on) .bpas-vs__arc::after { animation: none !important; } .bpas-wp-container:not(.bpas-rv-on) .bpas-vs__arc a, .bpas-wp-container:not(.bpas-rv-on) .bpas-vs__btn i, .bpas-wp-container:not(.bpas-rv-on) .bpas-vs__go { transition: none !important; } .bpas-wp-container:not(.bpas-rv-on) .bpas-vs__arc a:hover { transform: none; } .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-wseg-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } } .bpas-wp-container.bpas-rv-on .bpas-vs:not(.is-in) :is(.bpas-vs__wheel svg, .wseg, .wcentre, .bpas-vs__arc a) { opacity: 0; } .bpas-wp-container.bpas-rv-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-rv-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-how .bpas-vs { margin-top: 55px; } @media (max-width: 720px) { .bpas-wp-container .bpas-how .bpas-vs { margin-top: 40px; } } .bpas-wp-container .bpas-h4__big::before { content: attr(data-n); } .bpas-wp-container { --fx-on-dark: #c3d6d6; --fx-on-dark-2: #9fbcbc; } .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-on-dark: #c9d3e3; --fx-on-dark-2: #a9b6cc; --fx-strip: linear-gradient(90deg, #e3572b 0%, #f5b342 100%); --fx-strip-v: linear-gradient(180deg, #f5b342 0%, #e3572b 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); } .bpas-wp-container.bc .bpas-hv--spectrum { --h0: #e3572b; --h1: color-mix(in oklch, #e3572b 66%, #f5b342); --h2: color-mix(in oklch, #e3572b 33%, #f5b342); --h3: #f5b342; } .bpas-wp-container .bpas-hvn { position: relative; display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 10px; height: 140px; } .bpas-wp-container .bpas-hvn__doc { position: relative; display: grid; grid-template-rows: 12px 16px 1fr; gap: 5px; padding: 10px 10px; border-radius: 5px; background: color-mix(in srgb, #fff 90%, var(--h3, var(--fx-accent))); box-shadow: 0 8px 20px rgba(0,0,0,0.35); overflow: hidden; } .bpas-wp-container .bpas-hvn__lab { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; } .bpas-wp-container .bpas-hvn__doc .bpas-hvn__lab { color: var(--fx-ink); } .bpas-wp-container .bpas-hvn__head { display: flex; justify-content: space-between; align-items: center; } .bpas-wp-container .bpas-hvn__head i { display: block; height: 12px; border-radius: 3px; transform-origin: left; animation: bpas-hvn-snap 16s ease-out infinite; animation-delay: calc(var(--n) * 0.25s); } .bpas-wp-container .bpas-hvn__head i:first-child { width: 22px; background: var(--h0, var(--fx-hot)); } .bpas-wp-container .bpas-hvn__head i:last-child { width: 46%; height: 7px; background: color-mix(in srgb, var(--fx-ink) 35%, transparent); } .bpas-wp-container .bpas-hvn__rows { display: grid; align-content: start; gap: 4px; } .bpas-wp-container .bpas-hvn__rows i { display: block; height: 6px; width: var(--w); border-radius: 2px; background: color-mix(in srgb, var(--fx-ink) var(--a, 22%), transparent); transform-origin: left; animation: bpas-hvn-snap 16s ease-out infinite; animation-delay: calc(var(--n) * 0.25s); } .bpas-wp-container .bpas-hvn__rows i.t { background: var(--h1, var(--fx-hot)); --a: 0%; } .bpas-wp-container .bpas-hvn__sel { position: absolute; left: 6px; right: 6px; top: 40px; height: 22px; border: 1.5px dashed var(--h0, var(--fx-hot)); border-radius: 4px; opacity: 0; animation: bpas-hvn-sel 16s ease-in-out infinite; } .bpas-wp-container .bpas-hvn__outs { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 5px; } .bpas-wp-container .bpas-hvn__out { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 5px; background: color-mix(in srgb, var(--fx-ink) 78%, #000); border: 1px solid rgba(255,255,255,0.12); color: var(--fx-on-dark); overflow: hidden; } .bpas-wp-container .bpas-hvn__out svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bpas-wp-container .bpas-hvn__out--p { animation: bpas-hvn-p 16s ease-in-out infinite; } .bpas-wp-container .bpas-hvn__out--e { animation: bpas-hvn-e 16s ease-in-out infinite; } .bpas-wp-container .bpas-hvn__out--a { animation: bpas-hvn-a 16s ease-in-out infinite; } .bpas-wp-container .bpas-hvn__sheet { position: absolute; right: 12px; top: 50%; width: 16px; height: 18px; margin-top: -10px; border-radius: 2px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.4); opacity: 0; } .bpas-wp-container .bpas-hvn__out--p .bpas-hvn__sheet { animation: bpas-hvn-sheet 16s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; } .bpas-wp-container .bpas-hvn__out--a .bpas-hvn__sheet { animation: bpas-hvn-drop 16s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; } .bpas-wp-container .bpas-hvn__dot { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 14px var(--c); } .bpas-wp-container .bpas-hvn__dot--p { --c: var(--h1, var(--fx-hot)); animation: bpas-hvn-dp 16s cubic-bezier(0.5, 0, 0.3, 1) infinite; } .bpas-wp-container .bpas-hvn__dot--e { --c: var(--h2, var(--fx-accent)); animation: bpas-hvn-de 16s cubic-bezier(0.5, 0, 0.3, 1) infinite; } .bpas-wp-container .bpas-hvn__dot--a { --c: var(--h3, var(--fx-accent)); animation: bpas-hvn-da 16s cubic-bezier(0.5, 0, 0.3, 1) infinite; } @keyframes bpas-hvn-snap { 0% { transform: scaleX(0); } 6%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes bpas-hvn-sel { 0%, 3% { opacity: 0; top: 40px; } 6%, 12% { opacity: 1; top: 40px; } 16%, 21% { opacity: 1; top: 62px; } 24%, 100% { opacity: 0; top: 62px; } } @keyframes bpas-hvn-dp { 0%, 24% { left: 40%; top: 50%; opacity: 0; } 25% { opacity: 1; left: 40%; top: 50%; } 30% { left: 70%; top: 17%; opacity: 1; } 32%, 100% { left: 70%; top: 17%; opacity: 0; } } @keyframes bpas-hvn-de { 0%, 49% { left: 40%; top: 50%; opacity: 0; } 50% { opacity: 1; left: 40%; top: 50%; } 55% { left: 70%; top: 50%; opacity: 1; } 57%, 100% { left: 70%; top: 50%; opacity: 0; } } @keyframes bpas-hvn-da { 0%, 74% { left: 40%; top: 50%; opacity: 0; } 75% { opacity: 1; left: 40%; top: 50%; } 80% { left: 70%; top: 83%; opacity: 1; } 82%, 100% { left: 70%; top: 83%; opacity: 0; } } @keyframes bpas-hvn-p { 0%, 30% { border-color: rgba(255,255,255,0.12); box-shadow: none; } 33%, 97% { border-color: var(--h1, var(--fx-hot)); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--h1, var(--fx-hot)) 14%, transparent); } 100% { border-color: rgba(255,255,255,0.12); box-shadow: none; } } @keyframes bpas-hvn-e { 0%, 55% { border-color: rgba(255,255,255,0.12); box-shadow: none; } 58%, 97% { border-color: var(--h2, var(--fx-accent)); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--h2, var(--fx-accent)) 14%, transparent); } 100% { border-color: rgba(255,255,255,0.12); box-shadow: none; } } @keyframes bpas-hvn-a { 0%, 80% { border-color: rgba(255,255,255,0.12); box-shadow: none; } 83%, 97% { border-color: var(--h3, var(--fx-accent)); box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--h3, var(--fx-accent)) 14%, transparent); } 100% { border-color: rgba(255,255,255,0.12); box-shadow: none; } } @keyframes bpas-hvn-sheet { 0%, 31% { opacity: 0; transform: translateY(-14px); } 36%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } } @keyframes bpas-hvn-drop { 0%, 80% { opacity: 0; transform: translateY(-16px) scale(0.8); } 85%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-hvn__dot, .bpas-wp-container .bpas-hvn__sel { display: none; } .bpas-wp-container .bpas-hvn__sheet { opacity: 1; transform: none; } .bpas-wp-container .bpas-hvn__head i, .bpas-wp-container .bpas-hvn__rows i { transform: none; } } @media (max-width: 520px) { .bpas-wp-container .bpas-hvn__lab { font-size: 7.5px; letter-spacing: 0.02em; } } @property --bpas-af { syntax: ''; initial-value: 0deg; inherits: false; } .bpas-wp-container .bpas-mod--flow { border-color: color-mix(in srgb, var(--fx-ink) 14%, var(--line-light)); } .bpas-wp-container .bpas-mod--flow .bpas-mod__head { min-height: 104px; border-bottom: 0; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fx-accent) 30%, transparent), transparent 55%), radial-gradient(circle at 0% 110%, color-mix(in srgb, var(--fx-hot) 34%, transparent), transparent 58%), var(--fx-ink); } .bpas-wp-container .bpas-mod--flow .bpas-mod__head::after { opacity: 1; background-image: radial-gradient(color-mix(in srgb, #fff 13%, transparent) 1px, transparent 1.4px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 70%); mask-image: linear-gradient(100deg, #000 0%, transparent 70%); } .bpas-wp-container .bpas-mod--flow .bpas-mod__head::before { background: linear-gradient(135deg, var(--fx-ink-2), var(--fx-ink)); } .bpas-wp-container .bpas-mod--flow .bpas-mod__ico { background: var(--fx-accent); color: var(--fx-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-accent) 22%, transparent), 0 10px 22px color-mix(in srgb, #000 30%, transparent); } .bpas-wp-container .bpas-mod--flow .bpas-mod__name { max-width: 150px; line-height: 1.4; color: var(--fx-accent); } .bpas-wp-container .bpas-mod--flow .bpas-mod__num { color: transparent; opacity: 1; font-size: 72px; right: 14px; } @media (min-width: 900px) { .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__num { font-size: 88px; right: 18px; } } .bpas-wp-container .bpas-mod--flow .bpas-mod__num::before { content: attr(data-n); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fx-accent) 75%, transparent); } .bpas-wp-container .bpas-mod__sweep { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 75%); } .bpas-wp-container .bpas-mod--flow .bpas-mod__head > :not(.bpas-mod__sweep) { position: relative; z-index: 1; } .bpas-wp-container .bpas-mod--flow .bpas-mod__head > .bpas-mod__num { position: absolute; } .bpas-wp-container .bpas-mod--flow dl { position: relative; padding-left: 35px; } .bpas-wp-container .bpas-mod--flow dl::before, .bpas-wp-container .bpas-mod--flow dl::after { content: ""; position: absolute; left: 13px; top: 22px; bottom: 26px; width: 3px; border-radius: 3px; } .bpas-wp-container .bpas-mod--flow dl::before { background: color-mix(in srgb, var(--fx-ink) 12%, transparent); } .bpas-wp-container .bpas-mod--flow dl::after { background: linear-gradient(180deg, var(--fx-ink), var(--fx-hot) 55%, var(--fx-accent)); transform-origin: top; transition: box-shadow 0.3s ease; } .bpas-wp-container .bpas-flow__node { position: absolute; z-index: 1; left: -33px; top: 11px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .bpas-wp-container .bpas-flow__node--erp { background: #fff; border: 2.5px solid var(--fx-ink); } .bpas-wp-container .bpas-flow__node--erp::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--fx-ink); } .bpas-wp-container .bpas-flow__node--app { background: var(--fx-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-accent) 28%, transparent); } .bpas-wp-container .bpas-flow__node--app::before { content: "+"; font-size: 18px; font-weight: 800; line-height: 1; color: var(--fx-ink); } .bpas-wp-container .bpas-mod--flow .bpas-mod__b1 { position: relative; } .bpas-wp-container .bpas-mod--flow .bpas-mod__beas { margin-top: 15px; border: 1.5px solid transparent; background: linear-gradient(color-mix(in srgb, var(--fx-accent) 9%, #fff), color-mix(in srgb, var(--fx-accent) 9%, #fff)) padding-box, conic-gradient(from var(--bpas-af), color-mix(in srgb, var(--fx-accent) 35%, #fff) 0%, var(--fx-accent) 30%, var(--fx-hot) 55%, color-mix(in srgb, var(--fx-accent) 35%, #fff) 80%) border-box; } .bpas-wp-container .bpas-mod--flow .bpas-mod__beas::before { content: none; } .bpas-wp-container .bpas-mod--flow .bpas-mod__jump a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 4px; border-radius: 40px; background: #fff; border: 1px solid var(--line-light); color: var(--dark-color); font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .bpas-wp-container .bpas-mod--flow .bpas-mod__jump a b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 40px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; background: var(--fx-ink); color: var(--fx-accent); transition: background-color 0.2s ease, color 0.2s ease; } .bpas-wp-container .bpas-mod--flow .bpas-mod__jump a:focus-visible { outline: 3px solid var(--fx-hot); outline-offset: 2px; } @keyframes bpas-flow-sweep { from { opacity: 1; transform: translateX(-120%); } to { opacity: 1; transform: translateX(120%); } } @keyframes bpas-flow-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes bpas-flow-pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes bpas-flow-turn { from { --bpas-af: 0deg; } to { --bpas-af: 360deg; } } @keyframes bpas-flow-glow { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-accent) 22%, transparent), 0 14px 30px color-mix(in srgb, var(--fx-accent) 30%, transparent); } } @keyframes bpas-flow-chip { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } } .bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-mod--flow dl::after { transform: scaleY(0); } .bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-mod--flow .bpas-flow__node { transform: scale(0); } .bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-mod--flow .bpas-mod__jump a { opacity: 0; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-mod--flow .bpas-mod__sweep { animation: bpas-flow-sweep 1.3s ease-in-out calc(var(--i, 0) * 0.12s + 0.25s) backwards; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-mod--flow .bpas-flow__node--erp { animation: bpas-flow-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 0.12s + 0.45s) backwards; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-mod--flow dl::after { animation: bpas-flow-fill 1s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i, 0) * 0.12s + 0.6s) backwards; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-mod--flow .bpas-flow__node--app { animation: bpas-flow-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 0.12s + 1.45s) backwards; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-mod--flow .bpas-mod__beas { animation: bpas-flow-turn 1.6s ease-out calc(var(--i, 0) * 0.12s + 1.5s) backwards, bpas-flow-glow 1.4s ease-out calc(var(--i, 0) * 0.12s + 1.5s) 1; } .bpas-wp-container.bpas-rv-on [data-bpas-rv].is-in .bpas-mod--flow .bpas-mod__jump a { animation: bpas-flow-chip 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 0.12s + 1.9s + var(--c, 0) * 0.09s) backwards; } @media (hover: hover) { .bpas-wp-container .bpas-mod--flow:hover dl::after { box-shadow: 0 0 12px color-mix(in srgb, var(--fx-accent) 70%, transparent); } .bpas-wp-container .bpas-mod--flow:hover .bpas-flow__node--app { animation: bpas-flow-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 1; } .bpas-wp-container .bpas-mod--flow:hover .bpas-mod__num::before { -webkit-text-stroke-color: var(--fx-accent); } .bpas-wp-container .bpas-mod--flow .bpas-mod__jump a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--fx-accent) 16%, #fff); border-color: var(--fx-accent); color: var(--dark-color); } .bpas-wp-container .bpas-mod--flow .bpas-mod__jump a:hover b { background: var(--fx-accent); color: var(--fx-ink); } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mod--flow dl::after, .bpas-wp-container .bpas-mod--flow .bpas-flow__node, .bpas-wp-container .bpas-mod--flow .bpas-mod__beas, .bpas-wp-container .bpas-mod--flow .bpas-mod__jump a, .bpas-wp-container .bpas-mod__sweep { animation: none !important; transition: none !important; transform: none; } .bpas-wp-container .bpas-mod__sweep { opacity: 0; } } .bpas-wp-container .bpas-mod__bars { display: none; } @keyframes bpas-flow-fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes bpas-flow-bar { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @media (min-width: 900px) { .bpas-wp-container .bpas-modgrid--1 { grid-template-columns: minmax(0, 980px); } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__head { min-height: 116px; padding-right: 150px; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__name { max-width: none; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod__bars { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(4, 7px); row-gap: 5px; width: 220px; margin-left: auto; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod__bars i { display: block; height: 7px; margin-left: var(--x); width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); transform-origin: left; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow dl { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; padding-left: 0; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__b1 { grid-column: 1; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__beas { grid-column: 3; margin-top: 0; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow dl::before, .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow dl::after { left: calc(50% - 36px); right: calc(50% - 36px); top: 50%; bottom: auto; width: auto; height: 3px; margin-top: -1.5px; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow dl::after { background: linear-gradient(90deg, var(--fx-ink), var(--fx-hot) 55%, var(--fx-accent)); transform-origin: left; } .bpas-wp-container .bpas-modgrid--1 .bpas-flow__node--erp { left: auto; right: -13px; top: 50%; margin-top: -15px; } .bpas-wp-container .bpas-modgrid--1 .bpas-flow__node--app { left: -13px; top: 50%; margin-top: -15px; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__b1 { padding-right: 25px; } .bpas-wp-container .bpas-modgrid--1 .bpas-mod--flow .bpas-mod__beas { padding-left: 25px; } .bpas-wp-container.bpas-rv-on [data-bpas-rv]:not(.is-in) .bpas-modgrid--1 .bpas-mod--flow dl::after, .bpas-wp-container.bpas-rv-on .bpas-modgrid--1[data-bpas-rv]:not(.is-in) .bpas-mod--flow dl::after { transform: scaleX(0); } .bpas-wp-container.bpas-rv-on .bpas-modgrid--1[data-bpas-rv].is-in .bpas-mod--flow dl::after { animation: bpas-flow-fillx 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.75s backwards; } .bpas-wp-container.bpas-rv-on .bpas-modgrid--1[data-bpas-rv]:not(.is-in) .bpas-mod__bars i { transform: scaleX(0); opacity: 0; } .bpas-wp-container.bpas-rv-on .bpas-modgrid--1[data-bpas-rv].is-in .bpas-mod__bars i { animation: bpas-flow-bar 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.35s + var(--n) * 0.18s) backwards; } } @media (prefers-reduced-motion: reduce) { .bpas-wp-container .bpas-mod__bars i { animation: none !important; transform: none; opacity: 1; } }