/* ========================================================= Commercial paths — dynamic layer Opt-in motion/hierarchy layer for .cp-page templates (/for-teams/, /services/learning-systems-diagnostic/). Add class "cpx" to alongside "cp-page". Nothing here alters shared .cp-* rules used site-wide. ========================================================= */ .cpx { --cpx-cyan: #16b8d9; --cpx-cyan-deep: #0789a2; --cpx-blue: #2563eb; --cpx-gold: #e0a93f; --cpx-gold-deep: #9a6a04; --cpx-mint: #6ee7d8; --cpx-ink: #07111f; } /* ---------- scroll reveal ---------- */ .cpx [data-cpx-reveal] { opacity: 0; transform: translateY(16px); } .cpx [data-cpx-reveal].is-visible { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); } .cpx [data-cpx-reveal].is-visible[style*="--d"] { transition-delay: var(--d); } /* ---------- hero ---------- */ .cpx .cp-hero { position: relative; overflow: hidden; } /* live dot on the eyebrow pill */ .cpx .cp-pill { align-items: center; gap: 9px; } .cpx-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cpx-mint); box-shadow: 0 0 0 0 rgba(110,231,216,.5); animation: cpx-pulse 2.4s ease-out infinite; } @keyframes cpx-pulse { 0% { box-shadow: 0 0 0 0 rgba(110,231,216,.5); } 70% { box-shadow: 0 0 0 9px rgba(110,231,216,0); } 100% { box-shadow: 0 0 0 0 rgba(110,231,216,0); } } /* slow sheen across one hero keyword */ .cpx-sheen { background: linear-gradient(100deg, #fff 18%, var(--cpx-mint) 42%, #7fe3ff 55%, #fff 78%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cpx-sheen 8.5s ease-in-out infinite; } @keyframes cpx-sheen { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } } /* comet sweep along the hero's lower edge */ .cpx-comet { position: absolute; bottom: 0; left: 0; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, var(--cpx-mint), transparent); opacity: .75; animation: cpx-comet 9s linear infinite; pointer-events: none; } @keyframes cpx-comet { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } } /* hero entrance */ .cpx-rise { animation: cpx-rise .7s cubic-bezier(.2,.75,.2,1) both; } .cpx-rise--2 { animation-delay: .1s; } @keyframes cpx-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* ---------- hero summary panel ---------- */ .cpx .cp-summary { position: relative; overflow: hidden; } .cpx .cp-summary::after { content: ""; position: absolute; top: -70px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(110,231,216,.2), transparent 68%); animation: cpx-drift 11s ease-in-out infinite; pointer-events: none; } @keyframes cpx-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 14px); } } .cpx .cp-summary strong { position: relative; letter-spacing: -.04em; font-weight: 900; } .cpx-seat-list { position: relative; list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 2px; } .cpx-seat-list li { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: rgba(236,248,250,.88); font-size: 14.5px; transition: background .2s ease, transform .2s ease; } .cpx-seat-list li:hover { background: rgba(110,231,216,.09); transform: translateX(3px); } .cpx-seat-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cpx-mint); opacity: .8; } /* ---------- accented ecosystem cards ---------- */ .cpx-card { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .cpx-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cpx-accent, var(--cpx-cyan)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .cpx-card.is-visible::before { transform: scaleX(1); } .cpx-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(15,23,42,.13); border-color: color-mix(in oklch, var(--cpx-accent, var(--cpx-cyan)) 42%, #dbe6eb); } .cpx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .cpx-card .cp-tag { color: var(--cpx-accent-deep, var(--cpx-cyan-deep)); } .cpx-card__num { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: color-mix(in oklch, var(--cpx-accent, var(--cpx-cyan)) 12%, #fff); border: 1px solid color-mix(in oklch, var(--cpx-accent, var(--cpx-cyan)) 30%, #fff); color: var(--cpx-accent-deep, var(--cpx-cyan-deep)); font-size: 12.5px; font-weight: 900; } .cpx-card h3 { letter-spacing: -.03em; } /* ---------- engage cards with tick rows ---------- */ .cpx-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 3px; } .cpx-ticks li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #475569; font-size: 15px; line-height: 1.5; transition: background .2s ease, transform .2s ease, color .2s ease; } .cpx-ticks li:hover { background: color-mix(in oklch, var(--cpx-accent, var(--cpx-cyan)) 8%, #fff); color: var(--cpx-ink); transform: translateX(3px); } .cpx-ticks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; background: linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%) no-repeat, color-mix(in oklch, var(--cpx-accent, var(--cpx-cyan)) 14%, #fff); border: 1px solid color-mix(in oklch, var(--cpx-accent, var(--cpx-cyan)) 32%, #fff); color: var(--cpx-accent-deep, var(--cpx-cyan-deep)); background-size: 11px 11px, 100% 100%; background-position: center, center; } /* ---------- callout ---------- */ .cpx .cp-callout { position: relative; overflow: hidden; } .cpx .cp-callout::before { content: ""; position: absolute; top: -140px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(22,184,217,.2), transparent 68%); animation: cpx-drift 13s ease-in-out infinite; pointer-events: none; } .cpx .cp-callout > * { position: relative; } .cpx .cp-btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .cpx .cp-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(224,169,63,.34); } .cpx .cp-btn--ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cpx *, .cpx *::before, .cpx *::after { animation: none !important; } .cpx [data-cpx-reveal] { opacity: 1 !important; transform: none !important; } .cpx .cpx-card::before { transform: scaleX(1) !important; } .cpx-sheen { -webkit-text-fill-color: currentColor; background: none; } } /* ---------- price cards ---------- */ .cpx .cp-price { color: var(--cpx-accent-deep, var(--cpx-cyan-deep)); font-variant-numeric: tabular-nums; } .cpx-card--price h3 { margin-top: 8px; } /* ---------- process steps with a drawn connector ---------- */ .cpx-process { position: relative; } .cpx-process::before { content: ""; position: absolute; top: 48px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(22,184,217,.42), transparent); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .15s; } .cpx-process.is-visible::before { transform: scaleX(1); } .cpx .cp-step { background: #fff; } .cpx .cp-step::before { transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .cpx .cp-step:hover::before { transform: scale(1.08); background: rgba(22,184,217,.18); box-shadow: 0 8px 20px rgba(22,184,217,.24); } @media (max-width: 820px) { .cpx-process::before { display: none; } } /* ---------- reduced motion (additions) ---------- */ @media (prefers-reduced-motion: reduce) { .cpx-process::before { transform: scaleX(1) !important; } }