.course-roadmap, .course-roadmap * { box-sizing: border-box; } .course-roadmap { --roadmap-navy: #173b70; --roadmap-text: #2d3642; --roadmap-muted: #647083; width: 100%; padding: 64px 24px; overflow-x: clip; background: radial-gradient( ellipse at 50% 46%, rgba(50, 92, 145, 0.055) 0%, transparent 46% ); } .course-roadmap__inner { width: 100%; max-width: 1180px; margin: 0 auto; } .course-roadmap__heading { max-width: 900px; margin: 0 auto 50px; text-align: center; } .course-roadmap__heading h2 { margin: 0; color: var(--roadmap-navy); font-size: 40px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } .course-roadmap__desktop-instruction { margin: 13px 0 0; color: var(--roadmap-muted); font-size: 15px; line-height: 1.5; } /* ========================================================= MICROSOFT PRODUCTIVITY ROADMAP SWITCHER ========================================================= */ .ms-roadmap-suite { width: 100%; } .ms-roadmap-suite .course-roadmap[hidden] { display: none !important; } .course-roadmap__roadmap-switcher { display: grid; width: min(100%, 860px); margin: 22px auto 0; padding: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; background: rgba(23, 59, 112, 0.065); border: 1px solid rgba(23, 59, 112, 0.13); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 22px rgba(23, 59, 112, 0.07); } .course-roadmap__roadmap-switch { min-width: 0; min-height: 42px; padding: 8px 13px; color: var(--roadmap-navy); background: transparent; border: 0; border-radius: 999px; font: inherit; font-size: 13px; line-height: 1.2; font-weight: 750; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 180ms ease; } .course-roadmap__roadmap-switch.is-active, .course-roadmap__roadmap-switch[aria-pressed="true"] { color: #ffffff; background: linear-gradient(135deg, #214f8f 0%, var(--roadmap-navy) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 5px 13px rgba(23, 59, 112, 0.22); } @media (hover: hover) and (pointer: fine) { .course-roadmap__roadmap-switch:not(.is-active):hover { background: rgba(255, 255, 255, 0.74); box-shadow: 0 3px 10px rgba(23, 59, 112, 0.08); transform: translateY(-1px); } } .course-roadmap__roadmap-switch:focus-visible { outline: 3px solid rgba(65, 115, 196, 0.38); outline-offset: 2px; } .course-roadmap__roadmap-switch:active { transform: translateY(0) scale(0.985); } @media (max-width: 760px) { .course-roadmap__roadmap-switcher { width: 100%; margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 19px; } .course-roadmap__roadmap-switch { min-height: 44px; border-radius: 14px; font-size: 12.5px; } } @media (max-width: 420px) { .course-roadmap__roadmap-switch { padding-right: 9px; padding-left: 9px; font-size: 12px; } } .course-roadmap__stage { position: relative; width: 100%; } /* * Desktop roadmap * * Every level contributes to the same seven-row grid. This keeps the * practitioner, specialist, and governance bands aligned across Basic, * Intermediate, and Advanced. */ .course-roadmap__board { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto auto auto; align-items: stretch; overflow: hidden; color: #edf3fa; background: linear-gradient( 180deg, #111d31 0%, #0c1527 44%, #09111f 100% ); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 3px 6px rgba(10, 24, 43, 0.14), 0 18px 42px rgba(19, 41, 78, 0.19); } .course-roadmap__level { --level-color: #59d8a2; --level-rgb: 54, 190, 132; --level-column: 1; display: contents; min-width: 0; color: #edf3fa; } .course-roadmap__mobile-track { display: contents; } .course-roadmap__level.is-mobile-track-clone { display: none; } .course-roadmap__level--basic { --level-color: #59d8a2; --level-rgb: 54, 190, 132; --level-column: 1; } .course-roadmap__level--intermediate { --level-color: #73a0ff; --level-rgb: 73, 116, 255; --level-column: 2; } .course-roadmap__level--advanced { --level-color: #d393f0; --level-rgb: 167, 81, 204; --level-column: 3; } .course-roadmap__summary { position: relative; isolation: isolate; min-width: 0; min-height: 306px; padding: 32px 27px 28px; grid-column: var(--level-column); grid-row: 1; overflow: hidden; background: radial-gradient( ellipse 132% 72% at 50% 110%, rgba(var(--level-rgb), 0.42) 0%, rgba(var(--level-rgb), 0.19) 31%, rgba(var(--level-rgb), 0.055) 54%, transparent 74% ), linear-gradient( 180deg, rgba(16, 29, 49, 0.86) 0%, rgba(11, 20, 36, 0.35) 100% ); } .course-roadmap__summary::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient( 35deg, rgba(255, 255, 255, 0.075) 0%, rgba(var(--level-rgb), 0.055) 18%, transparent 54% ); content: ""; pointer-events: none; } .course-roadmap__summary::after { position: absolute; z-index: 1; right: 18px; bottom: 0; left: 18px; height: 4px; border-radius: 99px 99px 0 0; background: linear-gradient( 90deg, transparent 0%, rgba(var(--level-rgb), 0.34) 14%, rgba(var(--level-rgb), 0.82) 34%, rgba(255, 255, 255, 0.88) 50%, rgba(var(--level-rgb), 0.82) 66%, rgba(var(--level-rgb), 0.34) 86%, transparent 100% ); box-shadow: 0 -4px 12px rgba(var(--level-rgb), 0.27), 0 0 18px rgba(var(--level-rgb), 0.2); content: ""; pointer-events: none; transition: filter 280ms cubic-bezier(0.22, 0.72, 0.24, 1), box-shadow 280ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__summary > * { position: relative; z-index: 2; } .course-roadmap__level--intermediate .course-roadmap__summary, .course-roadmap__level--advanced .course-roadmap__summary, .course-roadmap__level--intermediate .course-roadmap__track-heading, .course-roadmap__level--advanced .course-roadmap__track-heading, .course-roadmap__level--intermediate .course-roadmap__course-list, .course-roadmap__level--advanced .course-roadmap__course-list { border-left: 1px solid rgba(195, 214, 237, 0.13); } .course-roadmap__level-number { position: absolute; top: 29px; right: 26px; color: rgba(255, 255, 255, 0.68); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.09em; } .course-roadmap__level-icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.95); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.42)) drop-shadow(0 0 9px rgba(var(--level-rgb), 0.3)); transition: filter 280ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__level-icon svg { display: block; width: 43px; height: 43px; overflow: visible; } .course-roadmap__level-icon.course-roadmap__level-icon--atom svg { width: 35px; height: 35px; } .course-roadmap__level-kicker { margin: 20px 0 0; color: var(--level-color); font-size: 12px; line-height: 1.25; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .course-roadmap__summary h3 { margin: 8px 0 0; color: #f5f8fc; font-size: 22px; line-height: 1.22; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .course-roadmap__level-purpose { margin: 16px 0 0; color: rgba(233, 239, 247, 0.86); font-size: 15px; line-height: 1.52; } .course-roadmap__level-audience { margin: 12px 0 0; color: rgba(202, 213, 226, 0.68); font-size: 13.5px; line-height: 1.5; } .course-roadmap__summary-footer, .course-roadmap__course-button { display: none; } /* Desktop shared course rows */ .course-roadmap__level-courses, .course-roadmap__reveal-content, .course-roadmap__track { display: contents; } .course-roadmap__track-heading { display: flex; min-width: 0; min-height: 50px; padding: 0 20px; grid-column: var(--level-column); align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.11) 0%, rgba(var(--level-rgb), 0.038) 60%, transparent 100% ); border-top: 1px solid rgba(195, 214, 237, 0.12); border-bottom: 1px solid rgba(var(--level-rgb), 0.17); } .course-roadmap__track--practitioner .course-roadmap__track-heading { grid-row: 2; } .course-roadmap__track--specialist .course-roadmap__track-heading { grid-row: 4; } .course-roadmap__track--governance .course-roadmap__track-heading { grid-row: 6; } .course-roadmap__track-heading h4 { margin: 0; color: #f2f6fb; font-size: 13px; line-height: 1.25; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .course-roadmap__course-list { display: flex; min-width: 0; margin: 0; padding: 16px 18px 22px; grid-column: var(--level-column); flex-direction: column; gap: 10px; list-style: none; } .course-roadmap__track--practitioner .course-roadmap__course-list { grid-row: 3; } .course-roadmap__track--specialist .course-roadmap__course-list { min-height: 96px; grid-row: 5; } .course-roadmap__track--governance .course-roadmap__course-list { min-height: 96px; padding-bottom: 24px; grid-row: 7; } .course-roadmap__course { width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none !important; } /* * Prevent HubSpot themes from injecting decorative list bullets into the * custom course cards on desktop, laptop, tablet, or mobile. */ .course-roadmap .course-roadmap__course::marker { content: "" !important; font-size: 0 !important; } .course-roadmap .course-roadmap__course::before, .course-roadmap .course-roadmap__course::after { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; content: none !important; } .course-roadmap__course-link { display: grid; width: 100%; min-width: 0; min-height: 53px; margin: 0; padding: 7px 10px 7px 7px; grid-template-columns: 39px minmax(0, 1fr); gap: 10px; align-items: center; color: rgba(239, 244, 250, 0.91); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.028) 100% ); border: 1px solid rgba(206, 220, 238, 0.11); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 4px 10px rgba(3, 10, 22, 0.11); text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .course-roadmap a.course-roadmap__course-link { cursor: pointer; transition: color 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 180ms cubic-bezier(0.22, 0.72, 0.24, 1); } /* * Desktop course links share the pathway buttons' lighting language at a * quieter intensity. The lower-edge illumination, coloured rim, and shallow * lift create cohesion without turning every course into a primary CTA. */ .course-roadmap__desktop-panel a.course-roadmap__course-link { position: relative; overflow: hidden; isolation: isolate; } .course-roadmap__desktop-panel a.course-roadmap__course-link::after { position: absolute; z-index: 0; right: 8%; bottom: 0; left: 8%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--level-rgb), 0.68) 50%, transparent 100% ); box-shadow: 0 -4px 10px rgba(var(--level-rgb), 0.12); opacity: 0; content: ""; pointer-events: none; transform: scaleX(0.72); transform-origin: 50% 50%; transition: opacity 260ms ease, transform 260ms ease; } .course-roadmap__desktop-panel a.course-roadmap__course-link > * { position: relative; z-index: 1; } .course-roadmap__desktop-panel a.course-roadmap__course-link .course-roadmap__duration { transition: border-color 260ms ease, box-shadow 260ms ease, filter 260ms ease; } @media (hover: hover) and (pointer: fine) { .course-roadmap__desktop-panel a.course-roadmap__course-link:hover { color: #ffffff; background: linear-gradient( 145deg, rgba(var(--level-rgb), 0.14) 0%, rgba(255, 255, 255, 0.042) 58%, rgba(var(--level-rgb), 0.055) 100% ); border-color: rgba(var(--level-rgb), 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), inset 0 -1px 0 rgba(var(--level-rgb), 0.1), 0 8px 18px rgba(3, 10, 22, 0.22), 0 0 14px rgba(var(--level-rgb), 0.07); transform: translateY(-1px); } .course-roadmap__desktop-panel a.course-roadmap__course-link:hover::after { opacity: 1; transform: scaleX(1); } .course-roadmap__desktop-panel a.course-roadmap__course-link:hover .course-roadmap__duration { border-color: rgba(var(--level-rgb), 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 15px rgba(var(--level-rgb), 0.17); filter: brightness(1.04); } } .course-roadmap a.course-roadmap__course-link:focus-visible { color: rgba(248, 251, 255, 0.98); outline: 2px solid rgba(var(--level-rgb), 0.9); outline-offset: 2px; } .course-roadmap__desktop-panel a.course-roadmap__course-link:focus-visible { color: #ffffff; background: linear-gradient( 145deg, rgba(var(--level-rgb), 0.14) 0%, rgba(255, 255, 255, 0.042) 58%, rgba(var(--level-rgb), 0.055) 100% ); border-color: rgba(var(--level-rgb), 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), inset 0 -1px 0 rgba(var(--level-rgb), 0.1), 0 8px 18px rgba(3, 10, 22, 0.22), 0 0 14px rgba(var(--level-rgb), 0.07); transform: translateY(-1px); } .course-roadmap__desktop-panel a.course-roadmap__course-link:focus-visible::after { opacity: 1; transform: scaleX(1); } .course-roadmap__desktop-panel a.course-roadmap__course-link:focus-visible .course-roadmap__duration { border-color: rgba(var(--level-rgb), 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 15px rgba(var(--level-rgb), 0.17); filter: brightness(1.04); } .course-roadmap a.course-roadmap__course-link:active { transform: translateY(0); } .course-roadmap__desktop-panel a.course-roadmap__course-link:active { transform: translateY(0) scale(0.99); } .course-roadmap__course-link--unlinked { cursor: default; } .course-roadmap__duration { display: flex; width: 39px; height: 39px; flex-direction: column; align-items: center; justify-content: center; color: #f7fbff; background: linear-gradient( 145deg, rgba(var(--level-rgb), 0.34) 0%, rgba(var(--level-rgb), 0.17) 100% ); border: 1px solid rgba(var(--level-rgb), 0.42); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 0 12px rgba(var(--level-rgb), 0.12); } .course-roadmap__duration-value { font-size: 14px; line-height: 0.95; font-weight: 800; } .course-roadmap__duration-unit { margin-top: 2px; color: rgba(244, 248, 252, 0.75); font-size: 8px; line-height: 1; font-weight: 700; text-transform: uppercase; } .course-roadmap__course-title { min-width: 0; color: inherit; font-size: 13.5px; line-height: 1.38; font-weight: 600; overflow-wrap: anywhere; } .course-roadmap__desktop-panel { --level-color: #59d8a2; --level-rgb: 54, 190, 132; position: relative; display: none; width: 100%; min-width: 0; margin-top: 14px; overflow: hidden; color: #edf3fa; background: radial-gradient( ellipse 90% 110% at 9% 0%, rgba(var(--level-rgb), 0.14) 0%, rgba(var(--level-rgb), 0.045) 38%, transparent 70% ), linear-gradient( 160deg, #111d31 0%, #0c1628 50%, #09111f 100% ); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 30px rgba(19, 41, 78, 0.14); } .course-roadmap__desktop-panel-accent { position: absolute; z-index: 0; top: 0; right: 28px; left: 28px; height: 4px; border-radius: 0 0 99px 99px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--level-rgb), 0.42) 15%, var(--level-color) 39%, rgba(255, 255, 255, 0.9) 50%, var(--level-color) 61%, rgba(var(--level-rgb), 0.42) 85%, transparent 100% ); box-shadow: 0 4px 12px rgba(var(--level-rgb), 0.25), 0 0 16px rgba(var(--level-rgb), 0.18); pointer-events: none; } .course-roadmap__desktop-panel-header { position: relative; z-index: 1; display: flex; min-width: 0; padding: 18px 28px 16px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(205, 220, 239, 0.12); } .course-roadmap__desktop-panel-header h3 { margin: 0; color: #f5f8fc; font-size: 24px; line-height: 1.2; font-weight: 720; letter-spacing: -0.015em; } .course-roadmap__desktop-panel-close { display: inline-flex; width: 38px; height: 38px; padding: 0; flex: 0 0 38px; align-items: center; justify-content: center; color: rgba(235, 242, 250, 0.76); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(206, 220, 238, 0.13); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .course-roadmap__desktop-panel-close svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .course-roadmap__desktop-panel-close:hover { color: #ffffff; background: rgba(var(--level-rgb), 0.1); border-color: rgba(var(--level-rgb), 0.3); } .course-roadmap__desktop-panel-close:focus-visible { color: #ffffff; outline: 2px solid rgba(var(--level-rgb), 0.72); outline-offset: 3px; } .course-roadmap__desktop-panel-close:active { transform: scale(0.94); } .course-roadmap__desktop-panel-body { position: relative; z-index: 1; min-width: 0; } .course-roadmap__desktop-panel.is-switching .course-roadmap__desktop-panel-body { animation: course-roadmap-desktop-panel-in 220ms cubic-bezier(0.22, 0.72, 0.24, 1) both; } @keyframes course-roadmap-desktop-panel-in { from { opacity: 0.42; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes course-roadmap-desktop-track-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 1024px) { .course-roadmap__desktop-panel.is-opening .course-roadmap__track { animation: course-roadmap-desktop-track-reveal 420ms cubic-bezier(0.22, 0.72, 0.24, 1) both; } .course-roadmap__desktop-panel.is-opening .course-roadmap__track:nth-child(2) { animation-delay: 55ms; } .course-roadmap__desktop-panel.is-opening .course-roadmap__track:nth-child(3) { animation-delay: 105ms; } } @media (min-width: 1024px) { .course-roadmap.is-enhanced .course-roadmap__board { grid-template-rows: auto; } .course-roadmap.is-enhanced .course-roadmap__board .course-roadmap__level-courses { display: none; } .course-roadmap.is-enhanced .course-roadmap__desktop-panel:not([hidden]) { display: block; } .course-roadmap.is-enhanced .course-roadmap__desktop-panel[hidden] { display: none; } .course-roadmap.is-enhanced .course-roadmap__summary { min-height: 356px; padding-bottom: 88px; cursor: default; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -14px 20px -17px rgba(255, 255, 255, 0.25), inset 0 -42px 60px -47px rgba(var(--level-rgb), 0.3), inset 0 -108px 118px -104px rgba(var(--level-rgb), 0.12); transition: box-shadow 420ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 220ms ease; } /* * This is the V15.3 bloom flipped vertically. Its shape, width, opacity and * timing are unchanged. The only difference is that the colour now rises * from the bottom of the card instead of descending from the top. */ .course-roadmap.is-enhanced .course-roadmap__summary::before { inset: 0; border-radius: inherit; background: radial-gradient( ellipse 54% 116% at 62% 113%, rgba(var(--level-rgb), 0.48) 0%, rgba(var(--level-rgb), 0.23) 25%, rgba(var(--level-rgb), 0.085) 50%, rgba(var(--level-rgb), 0.028) 68%, transparent 90% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.065) 0%, rgba(var(--level-rgb), 0.042) 17%, transparent 48% ); opacity: 0.9; -webkit-mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.96) 34%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.28) 78%, transparent 100% ); mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.96) 34%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.28) 78%, transparent 100% ); filter: brightness(1) saturate(1); transform: scaleY(1); transform-origin: 50% 100%; will-change: opacity, transform, filter; transition: opacity 420ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 520ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 420ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap.is-enhanced .course-roadmap__summary::after { filter: brightness(1.14) saturate(1.05); box-shadow: 0 -4px 13px rgba(var(--level-rgb), 0.32), 0 0 20px rgba(var(--level-rgb), 0.2); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -16px 24px -17px rgba(255, 255, 255, 0.38), inset 0 -50px 72px -50px rgba(var(--level-rgb), 0.48), inset 0 -126px 138px -112px rgba(var(--level-rgb), 0.2); transition-duration: 720ms, 220ms; } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary::before { opacity: 1; filter: brightness(1.28) saturate(1.13); transform: scaleY(1.14); transition-duration: 760ms, 820ms, 760ms; } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary::after { filter: brightness(1.38) saturate(1.15); box-shadow: 0 -6px 18px rgba(var(--level-rgb), 0.48), 0 0 30px rgba(var(--level-rgb), 0.32); transition-duration: 560ms, 560ms; } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__level-icon { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 11px rgba(var(--level-rgb), 0.44)); transition-duration: 620ms; } .course-roadmap.is-enhanced .course-roadmap__summary-footer { position: absolute; z-index: 4; right: 0; bottom: 24px; left: 0; display: flex; align-items: center; justify-content: center; } .course-roadmap.is-enhanced .course-roadmap__course-button { position: relative; z-index: 2; display: inline-flex; width: 82%; min-height: 42px; padding: 0 16px !important; align-items: center; justify-content: center; gap: 8px; color: #f7fbff !important; background: linear-gradient( 180deg, rgba(15, 27, 46, 0.97) 0%, rgba(9, 17, 31, 0.97) 100% ) !important; border: 0 !important; border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 14px rgba(2, 9, 20, 0.22); font-size: 12px; line-height: 1; font-weight: 750; letter-spacing: 0.015em; text-align: center; white-space: nowrap; transition: none; } .course-roadmap.is-enhanced .course-roadmap__course-button:hover, .course-roadmap.is-enhanced .course-roadmap__course-button:focus-visible, .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button { color: #f7fbff !important; background: linear-gradient( 180deg, rgba(15, 27, 46, 0.97) 0%, rgba(9, 17, 31, 0.97) 100% ) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 14px rgba(2, 9, 20, 0.22); transform: none; } .course-roadmap.is-enhanced .course-roadmap__course-button:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; } .course-roadmap__desktop-panel .course-roadmap__level-courses, .course-roadmap__desktop-panel .course-roadmap__reveal-content { display: block; } /* * Desktop course panel: tracks are full-width sections, while the courses * inside each track form a three-column grid. This avoids tall empty track * columns when the number of courses differs sharply between tracks. */ .course-roadmap__desktop-panel .course-roadmap__reveal-content { display: flex; min-width: 0; padding: 18px 22px 22px; flex-direction: column; gap: 18px; } .course-roadmap__desktop-panel .course-roadmap__track { display: block; width: 100%; min-width: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; } .course-roadmap__desktop-panel .course-roadmap__track-heading { display: flex; min-width: 0; min-height: 42px; padding: 10px 14px 11px; grid-column: auto; grid-row: auto; align-items: center; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.085) 0%, rgba(var(--level-rgb), 0.035) 48%, rgba(var(--level-rgb), 0.012) 100% ); border: 1px solid rgba(var(--level-rgb), 0.1); border-bottom-color: rgba(var(--level-rgb), 0.24); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 5px 16px rgba(var(--level-rgb), 0.035); } .course-roadmap__desktop-panel .course-roadmap__track-heading h4 { display: block; color: #f2f6fb; text-shadow: none; } .course-roadmap__desktop-panel .course-roadmap__course-list { display: grid; min-width: 0; min-height: 0; margin: 0; padding: 12px 0 0; grid-column: auto; grid-row: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: stretch; align-content: start; list-style: none; } .course-roadmap__desktop-panel .course-roadmap__course-link { min-height: 55px; height: 100%; } } .course-roadmap__mobile-nav { display: none; } .course-roadmap__mobile-arrow, .course-roadmap__mobile-dot, .course-roadmap__course-button, .course-roadmap__sheet-close { margin: 0; font: inherit; cursor: pointer; } .course-roadmap__sheet { display: none; } .course-roadmap__track-count { display: none; } .course-roadmap__sr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); } /* * Mobile summary carousel * * Course content is removed from the card and placed in a fixed overlay. * Card height is therefore based only on the three summaries. */ @media (max-width: 1023px) { .course-roadmap__desktop-instruction, .course-roadmap__desktop-panel { display: none !important; } .course-roadmap { --mobile-card-height: 460px; --mobile-roadmap-gutter: 18px; --mobile-roadmap-bleed: 36px; --mobile-track-step: 220px; --mobile-track-card-width: min(72vw, 380px); position: relative; top: 80px; margin-bottom: 100px; padding: 52px 20px; } .course-roadmap__inner { max-width: 720px; } .course-roadmap__heading { margin-bottom: 20px; } .course-roadmap__heading h2 { font-size: 33px; } .course-roadmap__stage { position: relative; width: 100%; min-width: 0; } .course-roadmap__board { position: relative; display: block; width: 100%; height: var(--mobile-card-height); min-width: 0; overflow: hidden; color: inherit; background: transparent; border: 0; border-radius: 27px; box-shadow: none; transition: height 220ms ease; touch-action: pan-y; } .course-roadmap__level { position: relative; isolation: isolate; display: none; width: 100%; height: var(--mobile-card-height); min-width: 0; overflow: hidden; color: #edf3fa; background: radial-gradient( ellipse 125% 56% at 50% 104%, rgba(var(--level-rgb), 0.46) 0%, rgba(var(--level-rgb), 0.2) 33%, rgba(var(--level-rgb), 0.06) 57%, transparent 77% ), linear-gradient( 180deg, #111d31 0%, #0d1627 50%, #09111f 100% ); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 27px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(var(--level-rgb), 0.2), 0 2px 4px rgba(10, 24, 43, 0.14), 0 16px 34px rgba(19, 41, 78, 0.17); user-select: none; -webkit-user-select: none; } .course-roadmap__level:first-child { display: block; } .course-roadmap__level::before { position: absolute; z-index: 0; inset: 1px; border-radius: 26px; background: linear-gradient( 35deg, rgba(255, 255, 255, 0.055) 0%, rgba(var(--level-rgb), 0.03) 22%, transparent 55% ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), inset 0 -24px 34px rgba(var(--level-rgb), 0.055); content: ""; pointer-events: none; } .course-roadmap__level::after { position: absolute; z-index: 1; right: 22px; bottom: 0; left: 22px; height: 4px; border-radius: 99px 99px 0 0; background: linear-gradient( 90deg, transparent 0%, rgba(var(--level-rgb), 0.34) 14%, rgba(var(--level-rgb), 0.82) 34%, rgba(255, 255, 255, 0.88) 50%, rgba(var(--level-rgb), 0.82) 66%, rgba(var(--level-rgb), 0.34) 86%, transparent 100% ); box-shadow: 0 -4px 12px rgba(var(--level-rgb), 0.27), 0 0 18px rgba(var(--level-rgb), 0.2); content: ""; pointer-events: none; } .course-roadmap__summary { position: relative; z-index: 2; display: block; width: 100%; height: 100%; min-height: 0; padding: 28px 28px 94px; overflow: hidden; background: transparent; border: 0 !important; } .course-roadmap__summary::before, .course-roadmap__summary::after { display: none; } .course-roadmap__level-number { top: 29px; right: 28px; font-size: 14px; } .course-roadmap__level-icon { width: 48px; height: 48px; } .course-roadmap__level-icon svg { width: 43px; height: 43px; } .course-roadmap__level-kicker { margin-top: 16px; font-size: 16px; } .course-roadmap__summary h3 { margin-top: 9px; font-size: 27px; line-height: 1.2; } .course-roadmap__level-purpose { margin-top: 18px; font-size: 18px; line-height: 1.54; } .course-roadmap__level-audience { margin-top: 13px; max-width: 560px; color: rgba(218, 228, 239, 0.82); font-size: 16px; line-height: 1.52; text-shadow: 0 2px 6px rgba(2, 8, 17, 0.92), 0 1px 2px rgba(2, 8, 17, 0.7); } .course-roadmap__summary-footer { position: absolute; z-index: 4; right: 0; bottom: 36px; left: 0; display: flex; align-items: center; justify-content: center; gap: 14px; } .course-roadmap .course-roadmap__course-button { position: relative; z-index: 2; display: inline-flex; width: 82%; min-height: 50px; padding: 0 20px !important; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; color: #f7fbff !important; background: linear-gradient( 180deg, rgba(15, 27, 46, 0.97) 0%, rgba(9, 17, 31, 0.97) 100% ) !important; border: 0 !important; border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 14px rgba(2, 9, 20, 0.22); font-size: 16px; line-height: 1; font-weight: 750; letter-spacing: 0.025em; text-align: center; white-space: nowrap; transition: none; } .course-roadmap .course-roadmap__course-button:hover, .course-roadmap .course-roadmap__course-button:focus-visible { color: #f7fbff !important; background: linear-gradient( 180deg, rgba(15, 27, 46, 0.97) 0%, rgba(9, 17, 31, 0.97) 100% ) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 14px rgba(2, 9, 20, 0.22); transform: none; } .course-roadmap .course-roadmap__course-button:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; } /* Course panels remain out of the compact card until moved into the sheet. */ .course-roadmap__level .course-roadmap__level-courses { display: none; } /* Fixed navigation position beneath the shared summary-card height */ .course-roadmap__mobile-nav { display: grid; width: min(calc(100% - 8px), 360px); margin: 20px auto 0; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 14px; align-items: center; background: transparent; border: 0; box-shadow: none; } .course-roadmap .course-roadmap__mobile-arrow { display: flex; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0 !important; align-items: center; justify-content: center; color: #264e86 !important; background: #ffffff !important; border: 1px solid #c8d5e4 !important; border-radius: 50%; box-shadow: 0 5px 13px rgba(23, 59, 112, 0.11); transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .course-roadmap__mobile-arrow svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .course-roadmap .course-roadmap__mobile-arrow:hover, .course-roadmap .course-roadmap__mobile-arrow:focus-visible { color: #173b70 !important; background: #f7faff !important; border-color: #aebfd2 !important; box-shadow: 0 7px 16px rgba(23, 59, 112, 0.15); transform: translateY(-1px); } .course-roadmap__mobile-progress { display: flex; min-width: 0; flex-direction: column; gap: 8px; align-items: center; justify-content: center; background: transparent; border: 0; box-shadow: none; } .course-roadmap__mobile-count { color: var(--roadmap-navy); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.09em; } .course-roadmap__mobile-dots { display: flex; min-height: 10px; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 0; box-shadow: none; } .course-roadmap .course-roadmap__mobile-dot { display: block; width: 8px; height: 8px; min-width: 8px; min-height: 8px; padding: 0 !important; background: #bdcad9 !important; border: 0 !important; border-radius: 99px; box-shadow: none !important; transition: width 210ms ease, background-color 210ms ease, transform 160ms ease; } .course-roadmap .course-roadmap__mobile-dot.is-active { width: 24px; background: #264e86 !important; } .course-roadmap .course-roadmap__mobile-arrow:focus-visible, .course-roadmap .course-roadmap__mobile-dot:focus-visible { outline: 3px solid rgba(38, 78, 134, 0.28); outline-offset: 3px; } /* Card-anchored course overlay */ .course-roadmap__sheet { --level-color: #59d8a2; --level-rgb: 54, 190, 132; --course-colour-progress: 0; position: fixed; z-index: 2147483000; top: 8px; right: 0; bottom: auto; left: 0; width: min(100%, 720px); height: calc(100vh - 16px); max-width: none; max-height: none; margin: 0 auto; padding: 0; overflow: hidden; color: #eef4fb; background: linear-gradient( 160deg, #13233a 0%, #0c182a 42%, #08111f 100% ); border: 1px solid rgba(213, 226, 242, 0.16); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 42px rgba(2, 10, 24, 0.28); opacity: 1; transform: translate3d(0, 102%, 0); transition: transform 360ms cubic-bezier(0.22, 0.72, 0.24, 1), opacity 260ms ease; } .course-roadmap__sheet::backdrop { background: rgba(3, 9, 20, 0.82); -webkit-backdrop-filter: blur(14px) saturate(0.72); backdrop-filter: blur(14px) saturate(0.72); } .course-roadmap__sheet[open] { display: block; } .course-roadmap__sheet.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .course-roadmap__sheet-tint { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: radial-gradient( circle at 88% 8%, rgba(var(--tint-rgb), 0.25) 0%, rgba(var(--tint-rgb), 0.08) 28%, transparent 52% ); border-radius: inherit; pointer-events: none; will-change: opacity; transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__sheet-tint--source { --tint-rgb: 54, 190, 132; opacity: calc(1 - var(--course-colour-progress)); } .course-roadmap__sheet-tint--target { --tint-rgb: 54, 190, 132; opacity: var(--course-colour-progress); } .course-roadmap__sheet-tint-line { position: absolute; top: 0; right: 34px; left: 34px; height: 4px; border-radius: 0 0 99px 99px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--tint-rgb), 0.4) 18%, rgba(255, 255, 255, 0.86) 50%, rgba(var(--tint-rgb), 0.4) 82%, transparent 100% ); box-shadow: 0 3px 13px rgba(var(--tint-rgb), 0.25); } .course-roadmap__sheet.is-colour-dragging .course-roadmap__sheet-tint, .course-roadmap__sheet.is-colour-dragging .course-roadmap__sheet-title-layer, .course-roadmap__sheet.is-colour-dragging .course-roadmap__sheet-watermark-layer, .course-roadmap__sheet.is-colour-committing .course-roadmap__sheet-tint, .course-roadmap__sheet.is-colour-committing .course-roadmap__sheet-title-layer, .course-roadmap__sheet.is-colour-committing .course-roadmap__sheet-watermark-layer { transition: none; } .course-roadmap__sheet-frame { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; max-height: none; min-height: 0; flex-direction: column; isolation: isolate; } .course-roadmap__sheet-watermark { display: none; position: absolute; z-index: 0; right: 8px; bottom: 70px; width: min(72vw, 390px); height: min(34vh, 240px); overflow: hidden; color: rgba(var(--level-rgb), 0.075); pointer-events: none; -webkit-mask-image: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.42) 26%, #000 64%, transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.42) 26%, #000 64%, transparent 100% ); } .course-roadmap__sheet-watermark-layer { position: absolute; right: 0; bottom: -0.22em; display: block; font-size: clamp(150px, 42vw, 290px); line-height: 1; font-weight: 850; letter-spacing: -0.08em; will-change: opacity; transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__sheet-watermark-layer--source { opacity: clamp( 0, calc(1 - (var(--course-colour-progress) * 2)), 1 ); } .course-roadmap__sheet-watermark-layer--target { opacity: clamp( 0, calc((var(--course-colour-progress) * 2) - 1), 1 ); } .course-roadmap__sheet-header { position: relative; z-index: 2; display: grid; padding: 22px 22px 18px; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 14px 18px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.038) 0%, rgba(8, 17, 31, 0) 100% ); border-bottom: 1px solid rgba(205, 220, 239, 0.12); } .course-roadmap__sheet-heading { min-width: 0; } .course-roadmap__sheet-header h3 { display: inline-grid; min-width: 0; margin: 0; color: #f5f8fc; font-size: 22px; line-height: 1.2; font-weight: 720; letter-spacing: -0.015em; } .course-roadmap__sheet-meta { margin: 7px 0 0; color: rgba(213, 223, 236, 0.68); font-size: 12.5px; line-height: 1.4; font-weight: 650; letter-spacing: 0.025em; } .course-roadmap__sheet-title-layer { display: flex; grid-area: 1 / 1; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0 0.28em; will-change: opacity; transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__sheet-level { color: var(--heading-color, #59d8a2); } .course-roadmap__sheet-title-layer--source { opacity: clamp( 0, calc(1 - (var(--course-colour-progress) * 2)), 1 ); } .course-roadmap__sheet-title-layer--target { opacity: clamp( 0, calc((var(--course-colour-progress) * 2) - 1), 1 ); } .course-roadmap__sheet-course-word { color: #f5f8fc; } .course-roadmap .course-roadmap__sheet-close { display: flex; width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0 !important; flex: 0 0 auto; align-items: center; justify-content: center; color: #f4f8fd !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(211, 224, 240, 0.16) !important; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(1, 7, 18, 0.18); transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; } .course-roadmap__sheet-close svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } .course-roadmap .course-roadmap__sheet-close:hover, .course-roadmap .course-roadmap__sheet-close:focus-visible { background: rgba(255, 255, 255, 0.11) !important; border-color: rgba(205, 221, 240, 0.48) !important; transform: rotate(4deg); } .course-roadmap .course-roadmap__sheet-close:focus-visible { outline: 3px solid rgba(205, 221, 240, 0.34); outline-offset: 3px; } .course-roadmap__sheet-body { position: relative; z-index: 2; min-height: 0; padding: 20px; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } .course-roadmap__sheet-body.is-sheet-switching { overflow-y: hidden; } .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-source, .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-target { display: block; will-change: transform, opacity; } .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-target { margin: 0; pointer-events: none; } .course-roadmap__sheet-body > .course-roadmap__level-courses.is-in-sheet, .course-roadmap__sheet .course-roadmap__reveal-content { display: block; } .course-roadmap__sheet .course-roadmap__track { display: block; min-width: 0; } .course-roadmap__sheet .course-roadmap__track + .course-roadmap__track { margin-top: 24px; padding-top: 23px; border-top: 1px solid rgba(205, 220, 239, 0.13); } .course-roadmap__sheet .course-roadmap__track-heading { display: flex; min-height: 38px; margin: 0 0 12px; padding: 9px 12px 10px; align-items: center; justify-content: flex-start; gap: 12px; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.06) 0%, rgba(var(--level-rgb), 0.022) 58%, transparent 100% ); border: 1px solid rgba(var(--level-rgb), 0.075) !important; border-bottom-color: rgba(var(--level-rgb), 0.17) !important; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 14px rgba(var(--level-rgb), 0.025); } .course-roadmap__sheet .course-roadmap__track-heading h4 { color: #f3f7fc; font-size: 12px; text-shadow: none; } .course-roadmap__sheet .course-roadmap__track-count { display: inline-flex; min-height: 24px; padding: 0 9px; align-items: center; justify-content: center; color: rgba(225, 234, 245, 0.68); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(205, 220, 239, 0.1); border-radius: 99px; font-size: 10.5px; line-height: 1; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; } .course-roadmap__sheet .course-roadmap__course-list { display: flex; min-height: 0 !important; margin: 0; padding: 0 !important; flex-direction: column; gap: 9px; border: 0 !important; list-style: none; } .course-roadmap__sheet .course-roadmap__course-link { min-height: 52px; padding: 7px 10px 7px 7px; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; color: rgba(241, 246, 252, 0.92); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.072) 0%, rgba(255, 255, 255, 0.028) 100% ); border-color: rgba(208, 222, 239, 0.13); border-radius: 12px; } .course-roadmap__sheet .course-roadmap__duration { width: 36px; height: 36px; } .course-roadmap__sheet .course-roadmap__course-title { font-size: 15.5px; line-height: 1.38; font-weight: 600; } .course-roadmap__sheet-footer { position: relative; z-index: 3; display: grid; min-height: 72px; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; background: linear-gradient( 180deg, rgba(8, 17, 31, 0.78) 0%, rgba(6, 14, 26, 0.96) 42%, #06101e 100% ); border-top: 1px solid rgba(205, 220, 239, 0.13); box-shadow: 0 -16px 30px rgba(2, 8, 18, 0.18); } .course-roadmap .course-roadmap__sheet-footer-button { display: flex; min-width: 0; min-height: 46px; margin: 0; padding: 6px 9px !important; align-items: center; gap: 8px; color: rgba(239, 245, 252, 0.9) !important; background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(207, 221, 239, 0.11) !important; border-radius: 13px; font: inherit; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; } .course-roadmap .course-roadmap__sheet-footer-button--next { justify-content: flex-end; text-align: right; } .course-roadmap .course-roadmap__sheet-footer-button:hover, .course-roadmap .course-roadmap__sheet-footer-button:focus-visible { background: rgba(var(--level-rgb), 0.1) !important; border-color: rgba(var(--level-rgb), 0.32) !important; } .course-roadmap .course-roadmap__sheet-footer-button:active { transform: scale(0.985); } .course-roadmap .course-roadmap__sheet-footer-button:focus-visible { outline: 3px solid rgba(var(--level-rgb), 0.3); outline-offset: 2px; } .course-roadmap__sheet-footer-button svg { display: block; width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .course-roadmap__sheet-footer-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .course-roadmap__sheet-footer-direction { color: rgba(205, 218, 234, 0.53); font-size: 9px; line-height: 1; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; } .course-roadmap__sheet-footer-label { min-width: 0; overflow: hidden; font-size: 11.5px; line-height: 1.2; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .course-roadmap__sheet-position { display: flex; min-width: 62px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; } .course-roadmap__sheet-position-count { color: var(--level-color); font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: 0.09em; } .course-roadmap__sheet-position-level { max-width: 90px; overflow: hidden; color: rgba(234, 241, 249, 0.74); font-size: 10px; line-height: 1.15; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } /* * Continuous mobile carousel track * * Three original cards sit between two permanent buffer cards on each * side. The whole track translates as one object. No card or card content * changes opacity during navigation. */ .course-roadmap.is-enhanced .course-roadmap__board { width: calc(100% + var(--mobile-roadmap-bleed)); height: calc(var(--mobile-card-height) + 26px); margin-left: calc(0px - var(--mobile-roadmap-gutter)); overflow: hidden; border-radius: 0; perspective: 1250px; perspective-origin: 50% 44%; isolation: isolate; cursor: grab; } .course-roadmap.is-enhanced .course-roadmap__board.is-dragging { cursor: grabbing; } .course-roadmap.is-enhanced .course-roadmap__board.is-mobile-track-moving { pointer-events: none; } .course-roadmap.is-enhanced .course-roadmap__mobile-track { --mobile-track-duration: 420ms; position: relative; display: flex; width: calc( var(--mobile-track-slide-count, 7) * var(--mobile-track-step, 220px) ); height: var(--mobile-card-height); align-items: flex-start; transform-style: preserve-3d; will-change: transform; } .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating { transition: transform var(--mobile-track-duration) cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level { --mobile-card-y: 0px; --mobile-card-depth: 0px; --mobile-card-turn: 0deg; --mobile-card-roll: 0deg; --mobile-card-scale: 1; --mobile-card-brightness: 1; --mobile-card-saturation: 1; --mobile-content-blur: 0px; --mobile-content-opacity: 1; position: relative; top: auto; left: auto; isolation: auto; display: block; width: var(--mobile-track-step, 220px); height: var(--mobile-card-height); min-width: 0; flex: 0 0 var(--mobile-track-step, 220px); overflow: visible; visibility: visible; color: #edf3fa; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1; pointer-events: none; transform-style: preserve-3d; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level.is-mobile-track-clone { display: block; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-current="true"] .course-roadmap__summary { pointer-events: auto; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level::before, .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level::after { display: none; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary { position: relative; isolation: isolate; display: block; width: var(--mobile-track-card-width, min(72vw, 380px)); height: var(--mobile-card-height); min-height: 0; margin-left: calc( ( var(--mobile-track-step, 220px) - var(--mobile-track-card-width, min(72vw, 380px)) ) / 2 ); overflow: hidden; background: radial-gradient( ellipse 125% 62% at 50% 106%, rgba(var(--level-rgb), 0.58) 0%, rgba(var(--level-rgb), 0.28) 34%, rgba(var(--level-rgb), 0.085) 59%, transparent 79% ), linear-gradient( 180deg, #111d31 0%, #0d1627 50%, #09111f 100% ); border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 27px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -14px 20px -17px rgba(255, 255, 255, 0.25), inset 0 -42px 60px -47px rgba(var(--level-rgb), 0.3), inset 0 -108px 118px -104px rgba(var(--level-rgb), 0.12), 0 2px 4px rgba(10, 24, 43, 0.12), 0 10px 22px rgba(19, 41, 78, 0.1); opacity: 1; transform: translate3d( 0, var(--mobile-card-y), var(--mobile-card-depth) ) rotateY(var(--mobile-card-turn)) rotateZ(var(--mobile-card-roll)) scale(var(--mobile-card-scale)); transform-origin: 50% 16%; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: brightness(var(--mobile-card-brightness)) saturate(var(--mobile-card-saturation)); will-change: transform, filter; } .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating .course-roadmap__summary { transition: transform var(--mobile-track-duration) cubic-bezier(0.22, 0.72, 0.24, 1), filter var(--mobile-track-duration) cubic-bezier(0.22, 0.72, 0.24, 1), border-color 220ms ease, box-shadow 220ms ease; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary::before, .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary::after { display: block; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary::before { inset: 0; border-radius: inherit; background: radial-gradient( ellipse 58% 118% at 50% 113%, rgba(var(--level-rgb), 0.48) 0%, rgba(var(--level-rgb), 0.23) 25%, rgba(var(--level-rgb), 0.085) 50%, rgba(var(--level-rgb), 0.028) 68%, transparent 90% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.065) 0%, rgba(var(--level-rgb), 0.042) 17%, transparent 48% ); opacity: 0.9; -webkit-mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.96) 34%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.28) 78%, transparent 100% ); mask-image: linear-gradient( to top, #000 0%, rgba(0, 0, 0, 0.96) 34%, rgba(0, 0, 0, 0.72) 58%, rgba(0, 0, 0, 0.28) 78%, transparent 100% ); filter: brightness(1) saturate(1); transform: scaleY(1); transform-origin: 50% 100%; will-change: opacity, transform, filter; transition: opacity 420ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 520ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 420ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary::after { filter: brightness(1.14) saturate(1.05); box-shadow: 0 -4px 13px rgba(var(--level-rgb), 0.32), 0 0 20px rgba(var(--level-rgb), 0.2); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary { background: radial-gradient( ellipse 130% 66% at 50% 107%, rgba(var(--level-rgb), 0.76) 0%, rgba(var(--level-rgb), 0.38) 35%, rgba(var(--level-rgb), 0.12) 61%, transparent 81% ), linear-gradient( 180deg, #111d31 0%, #0d1627 50%, #09111f 100% ); border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -16px 24px -17px rgba(255, 255, 255, 0.38), inset 0 -50px 72px -50px rgba(var(--level-rgb), 0.48), inset 0 -126px 138px -112px rgba(var(--level-rgb), 0.2), 0 3px 6px rgba(10, 24, 43, 0.14), 0 16px 32px rgba(var(--level-rgb), 0.16); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary::before { opacity: 1; filter: brightness(1.28) saturate(1.13); transform: scaleY(1.14); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary::after { filter: brightness(1.38) saturate(1.15); box-shadow: 0 -6px 18px rgba(var(--level-rgb), 0.48), 0 0 30px rgba(var(--level-rgb), 0.32); } /* * Match the depth-of-field treatment used by the AI roadmap. The card * silhouette, border and colour lighting stay defined while peripheral * content recedes. Values are interpolated continuously by JavaScript, * including during finger dragging. */ .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level-number, .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level-icon, .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level-kicker, .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary-body, .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__summary-footer { filter: blur(var(--mobile-content-blur)); opacity: var(--mobile-content-opacity); will-change: filter, opacity; transition: filter 240ms ease, opacity 240ms ease; } .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating .course-roadmap__level-number, .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating .course-roadmap__level-icon, .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating .course-roadmap__level-kicker, .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating .course-roadmap__summary-body, .course-roadmap.is-enhanced .course-roadmap__mobile-track.is-mobile-track-animating .course-roadmap__summary-footer { transition: filter var(--mobile-track-duration) cubic-bezier(0.22, 0.72, 0.24, 1), opacity var(--mobile-track-duration) cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__mobile-track, .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__summary, .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__level-number, .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__level-icon, .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__level-kicker, .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__summary-body, .course-roadmap.is-enhanced .course-roadmap__board.is-dragging .course-roadmap__summary-footer { transition: none !important; } .course-roadmap.is-mobile-control-animating .course-roadmap__mobile-nav, .course-roadmap.is-course-overlay-switching .course-roadmap__mobile-nav { pointer-events: none; } .course-roadmap.is-course-overlay-open .course-roadmap__board { pointer-events: none; } .course-roadmap.is-course-overlay-open.is-visual-viewport-constrained .course-roadmap__mobile-nav { position: fixed; z-index: 2147483001; top: var(--course-zoom-nav-top); left: var(--course-zoom-nav-left); width: var(--course-zoom-nav-width); margin: 0; } .course-roadmap.is-enhanced .course-roadmap__mobile-nav { margin-top: 4px; } .course-roadmap.is-initialising .course-roadmap__board, .course-roadmap.is-initialising .course-roadmap__mobile-track, .course-roadmap.is-initialising .course-roadmap__level, .course-roadmap.is-initialising .course-roadmap__summary, .course-roadmap__sheet.is-initialising { transition: none !important; } .course-roadmap.is-measuring .course-roadmap__board, .course-roadmap.is-measuring .course-roadmap__mobile-track, .course-roadmap.is-measuring .course-roadmap__level, .course-roadmap.is-measuring .course-roadmap__summary { transition: none !important; } } html.course-roadmap-sheet-open, body.course-roadmap-sheet-open { overflow: hidden !important; overscroll-behavior: none !important; } @media (max-width: 640px) { .course-roadmap { padding: 44px 16px; } } @media (max-width: 479px) { .course-roadmap { --mobile-roadmap-gutter: 14px; --mobile-roadmap-bleed: 28px; } .course-roadmap__heading { margin-bottom: 20px; } .course-roadmap__heading h2 { font-size: 33px; } .course-roadmap__summary { padding: 25px 23px 90px; } .course-roadmap__level-number { top: 27px; right: 24px; } .course-roadmap__level-kicker { margin-top: 14px; } .course-roadmap__summary h3 { font-size: 25px; } .course-roadmap__level-purpose { font-size: 16.5px; } .course-roadmap__level-audience { font-size: 15px; } .course-roadmap__summary-footer { right: 20px; bottom: 20px; left: 20px; gap: 10px; } .course-roadmap .course-roadmap__course-button { min-height: 42px; padding: 0 13px !important; font-size: 13px; } .course-roadmap__mobile-nav { width: min(calc(100% - 4px), 340px); grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; } .course-roadmap .course-roadmap__mobile-arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .course-roadmap__sheet-header { padding: 19px 17px 15px; } .course-roadmap__sheet-header h3 { font-size: 20px; } .course-roadmap__sheet-meta { font-size: 12px; } .course-roadmap__sheet-body { padding-right: 15px; padding-left: 15px; } .course-roadmap__sheet .course-roadmap__course-title { font-size: 15.5px; } .course-roadmap__sheet-footer { min-height: 68px; padding-right: 10px; padding-left: 10px; gap: 6px; } .course-roadmap .course-roadmap__sheet-footer-button { min-height: 44px; padding-right: 7px !important; padding-left: 7px !important; gap: 5px; } .course-roadmap__sheet-footer-label { font-size: 10.5px; } .course-roadmap__sheet-position { min-width: 54px; } .course-roadmap__sheet-position-level { max-width: 64px; font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .course-roadmap *, .course-roadmap *::before, .course-roadmap *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @media (prefers-reduced-motion: reduce) and (min-width: 1024px) { .course-roadmap__desktop-panel.is-switching .course-roadmap__desktop-panel-body { animation: none; } .course-roadmap.is-enhanced .course-roadmap__summary, .course-roadmap.is-enhanced .course-roadmap__summary::before, .course-roadmap.is-enhanced .course-roadmap__summary::after, .course-roadmap.is-enhanced .course-roadmap__level-icon, .course-roadmap.is-enhanced .course-roadmap__course-button { transition: none; } } /* Narrow mobile typography and CTA proportions */ @media (max-width: 640px) { .course-roadmap__level-kicker { font-size: 15px; } .course-roadmap__summary h3 { font-size: 25px; } .course-roadmap__level-purpose { font-size: 16.5px; } .course-roadmap__level-audience { font-size: 15px; } .course-roadmap__summary-footer { right: 0; bottom: 32px; left: 0; } .course-roadmap .course-roadmap__course-button { width: 82%; min-height: 48px; padding: 0 18px !important; font-size: 15px; } } /* ========================================================= V15.13: stronger selected illumination and protected text ========================================================= */ /* Smooth the foreground changes as the illumination increases. */ .course-roadmap__level-number, .course-roadmap__level-kicker, .course-roadmap__summary h3, .course-roadmap__level-purpose, .course-roadmap__level-audience { transition: color 420ms cubic-bezier(0.22, 0.72, 0.24, 1), text-shadow 420ms cubic-bezier(0.22, 0.72, 0.24, 1); } /* Desktop selected state */ @media (min-width: 1024px) { .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary { border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -20px 34px -17px rgba(255, 255, 255, 0.55), inset 0 -62px 94px -49px rgba(var(--level-rgb), 0.76), inset 0 -154px 176px -112px rgba(var(--level-rgb), 0.34), 0 12px 34px rgba(var(--level-rgb), 0.13); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary::before { background: radial-gradient( ellipse 66% 136% at 58% 116%, rgba(255, 255, 255, 0.28) 0%, rgba(var(--level-rgb), 0.86) 16%, rgba(var(--level-rgb), 0.48) 39%, rgba(var(--level-rgb), 0.17) 64%, rgba(var(--level-rgb), 0.045) 79%, transparent 94% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.13) 0%, rgba(var(--level-rgb), 0.09) 22%, transparent 54% ); opacity: 1; filter: brightness(1.5) saturate(1.22); transform: scaleY(1.27); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary::after { filter: brightness(1.68) saturate(1.24); box-shadow: 0 -7px 21px rgba(var(--level-rgb), 0.68), 0 -18px 46px rgba(var(--level-rgb), 0.27), 0 0 36px rgba(var(--level-rgb), 0.45); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__level-number { color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 6px rgba(2, 8, 17, 0.95), 0 0 10px rgba(var(--level-rgb), 0.26); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__level-kicker { color: var(--level-color); text-shadow: 0 2px 6px rgba(2, 8, 17, 0.92), 0 0 12px rgba(var(--level-rgb), 0.42); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary h3 { color: #ffffff; text-shadow: 0 2px 8px rgba(2, 8, 17, 0.98), 0 0 16px rgba(var(--level-rgb), 0.31); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__level-purpose { color: rgba(250, 252, 255, 0.99); text-shadow: 0 2px 7px rgba(2, 8, 17, 0.98), 0 0 10px rgba(2, 8, 17, 0.5); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__level-audience { color: rgba(237, 244, 252, 0.96); text-shadow: 0 2px 7px rgba(2, 8, 17, 0.98), 0 0 10px rgba(2, 8, 17, 0.5); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button { background: linear-gradient( 180deg, rgba(13, 24, 42, 0.99) 0%, rgba(6, 13, 25, 0.99) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 6px 18px rgba(1, 6, 15, 0.42), 0 0 18px rgba(var(--level-rgb), 0.12); text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72); } } /* Active centre card on tablet and mobile */ @media (max-width: 1023px) { .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary { background: radial-gradient( ellipse 138% 74% at 50% 109%, rgba(255, 255, 255, 0.18) 0%, rgba(var(--level-rgb), 0.88) 17%, rgba(var(--level-rgb), 0.48) 40%, rgba(var(--level-rgb), 0.16) 65%, transparent 84% ), linear-gradient( 180deg, #111d31 0%, #0d1627 50%, #08101e 100% ); border-color: rgba(255, 255, 255, 0.21) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -20px 34px -17px rgba(255, 255, 255, 0.55), inset 0 -62px 94px -49px rgba(var(--level-rgb), 0.76), inset 0 -154px 176px -112px rgba(var(--level-rgb), 0.34), 0 4px 8px rgba(10, 24, 43, 0.15), 0 18px 38px rgba(var(--level-rgb), 0.2); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary::before { background: radial-gradient( ellipse 70% 142% at 50% 118%, rgba(255, 255, 255, 0.28) 0%, rgba(var(--level-rgb), 0.86) 16%, rgba(var(--level-rgb), 0.48) 39%, rgba(var(--level-rgb), 0.17) 64%, rgba(var(--level-rgb), 0.045) 79%, transparent 94% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.13) 0%, rgba(var(--level-rgb), 0.09) 22%, transparent 54% ); opacity: 1; filter: brightness(1.5) saturate(1.22); transform: scaleY(1.27); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary::after { filter: brightness(1.68) saturate(1.24); box-shadow: 0 -7px 21px rgba(var(--level-rgb), 0.68), 0 -18px 46px rgba(var(--level-rgb), 0.27), 0 0 36px rgba(var(--level-rgb), 0.45); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__level-number { color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 6px rgba(2, 8, 17, 0.95), 0 0 10px rgba(var(--level-rgb), 0.26); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__level-kicker { color: #ffffff; text-shadow: 0 2px 7px rgba(2, 8, 17, 0.98), 0 0 13px rgba(var(--level-rgb), 0.5); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary h3 { color: #ffffff; text-shadow: 0 2px 8px rgba(2, 8, 17, 0.98), 0 0 16px rgba(var(--level-rgb), 0.31); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__level-purpose { color: rgba(250, 252, 255, 0.99); text-shadow: 0 2px 7px rgba(2, 8, 17, 0.98), 0 0 10px rgba(2, 8, 17, 0.5); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__course-button { background: linear-gradient( 180deg, rgba(13, 24, 42, 0.99) 0%, rgba(6, 13, 25, 0.99) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 6px 18px rgba(1, 6, 15, 0.42), 0 0 18px rgba(var(--level-rgb), 0.12); text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72); } } /* ========================================================= V15.14: desktop selected glow reduced by 20%; every mobile card uses the normal baseline illumination ========================================================= */ /* Desktop only: retain the stronger selected state, reduced by 20%. */ @media (min-width: 1024px) { .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary { border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.192), inset 0 -20px 34px -17px rgba(255, 255, 255, 0.44), inset 0 -62px 94px -49px rgba(var(--level-rgb), 0.608), inset 0 -154px 176px -112px rgba(var(--level-rgb), 0.272), 0 12px 34px rgba(var(--level-rgb), 0.104); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary::before { background: radial-gradient( ellipse 66% 136% at 58% 116%, rgba(255, 255, 255, 0.224) 0%, rgba(var(--level-rgb), 0.688) 16%, rgba(var(--level-rgb), 0.384) 39%, rgba(var(--level-rgb), 0.136) 64%, rgba(var(--level-rgb), 0.036) 79%, transparent 94% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.104) 0%, rgba(var(--level-rgb), 0.072) 22%, transparent 54% ); opacity: 1; filter: brightness(1.4) saturate(1.18); transform: scaleY(1.22); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__summary::after { filter: brightness(1.54) saturate(1.19); box-shadow: 0 -7px 21px rgba(var(--level-rgb), 0.544), 0 -18px 46px rgba(var(--level-rgb), 0.216), 0 0 36px rgba(var(--level-rgb), 0.36); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 6px 18px rgba(1, 6, 15, 0.42), 0 0 18px rgba(var(--level-rgb), 0.096); } } /* * Mobile and tablet: the active centre card must not gain a selected-state * glow. It uses exactly the same illumination baseline as every other card. */ @media (max-width: 1023px) { .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary { background: radial-gradient( ellipse 125% 62% at 50% 106%, rgba(var(--level-rgb), 0.58) 0%, rgba(var(--level-rgb), 0.28) 34%, rgba(var(--level-rgb), 0.085) 59%, transparent 79% ), linear-gradient( 180deg, #111d31 0%, #0d1627 50%, #09111f 100% ); border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -14px 20px -17px rgba(255, 255, 255, 0.25), inset 0 -42px 60px -47px rgba(var(--level-rgb), 0.3), inset 0 -108px 118px -104px rgba(var(--level-rgb), 0.12), 0 2px 4px rgba(10, 24, 43, 0.12), 0 10px 22px rgba(19, 41, 78, 0.1); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary::before { background: radial-gradient( ellipse 58% 118% at 50% 113%, rgba(var(--level-rgb), 0.48) 0%, rgba(var(--level-rgb), 0.23) 25%, rgba(var(--level-rgb), 0.085) 50%, rgba(var(--level-rgb), 0.028) 68%, transparent 90% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.065) 0%, rgba(var(--level-rgb), 0.042) 17%, transparent 48% ); opacity: 0.9; filter: brightness(1) saturate(1); transform: scaleY(1); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary::after { filter: brightness(1.14) saturate(1.05); box-shadow: 0 -4px 13px rgba(var(--level-rgb), 0.32), 0 0 20px rgba(var(--level-rgb), 0.2); } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__level-number { color: rgba(255, 255, 255, 0.68); text-shadow: none; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__level-kicker { color: var(--level-color); text-shadow: none; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__summary h3 { color: #f5f8fc; text-shadow: none; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__level-purpose { color: rgba(233, 239, 247, 0.86); text-shadow: none; } .course-roadmap.is-enhanced .course-roadmap__mobile-track .course-roadmap__level[data-mobile-track-role="active"] .course-roadmap__course-button { color: #f7fbff !important; background: linear-gradient( 180deg, rgba(15, 27, 46, 0.97) 0%, rgba(9, 17, 31, 0.97) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 5px 14px rgba(2, 9, 20, 0.22); text-shadow: none; } } /* ========================================================= V15.18: sample-style 3D desktop button interaction Hover no longer changes the card illumination. ========================================================= */ @media (min-width: 1024px) { .course-roadmap.is-enhanced .course-roadmap__summary-footer { perspective: 760px; } .course-roadmap.is-enhanced .course-roadmap__course-button { --button-tilt-x: 0deg; --button-tilt-y: 0deg; --button-scale: 1; --button-shadow-x: 0px; --button-shadow-y: 7px; --button-pointer-x: 50%; --button-pointer-y: 50%; --button-rim-size: 3px; position: relative; isolation: isolate; overflow: visible; color: rgba(255, 255, 255, 0.84) !important; background: linear-gradient( 180deg, rgba(16, 28, 47, 0.99) 0%, rgba(8, 16, 30, 0.99) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), inset 0 2px 2px rgba(255, 255, 255, 0.08), inset 0 4px 4px rgba(255, 255, 255, 0.035), inset 0 8px 8px rgba(255, 255, 255, 0.025), var(--button-shadow-x) var(--button-shadow-y) 18px rgba(1, 6, 15, 0.34); transform: rotateX(var(--button-tilt-x)) rotateY(var(--button-tilt-y)) scale(var(--button-scale)); transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform, box-shadow; transition: transform 150ms cubic-bezier(0.22, 0.72, 0.24, 1), border-color 400ms ease, box-shadow 400ms ease, color 400ms ease, text-shadow 400ms ease, background-color 400ms ease; } .course-roadmap.is-enhanced .course-roadmap__course-button > span { position: relative; top: 2px; z-index: 2; transform: translateZ(14px); pointer-events: none; } .course-roadmap.is-enhanced .course-roadmap__course-button::before, .course-roadmap.is-enhanced .course-roadmap__course-button::after { content: ""; position: absolute; pointer-events: none; } .course-roadmap.is-enhanced .course-roadmap__course-button::before { z-index: -1; inset: calc(-1 * var(--button-rim-size)); border-radius: calc(99px + var(--button-rim-size)); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.68) 100% ); box-shadow: inset 0 -8px 8px -6px rgba(255, 255, 255, 0), inset 0 -16px 16px -8px rgba(var(--level-rgb), 0), 1px 1px 1px rgba(255, 255, 255, 0.13), 2px 2px 2px rgba(255, 255, 255, 0.07), -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07); transition: box-shadow 400ms ease, filter 400ms ease; } .course-roadmap.is-enhanced .course-roadmap__course-button::after { z-index: 1; inset: 0; border-radius: inherit; background: radial-gradient( circle at var(--button-pointer-x) var(--button-pointer-y), rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 24%, transparent 48% ), linear-gradient( 0deg, rgba(255, 255, 255, 0.3) 0%, rgba(var(--level-rgb), 0.26) 5%, rgba(var(--level-rgb), 0.1) 22%, transparent 72% ); opacity: 0.08; -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 44%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 44%, transparent 100%); transform: translateZ(1px); transition: opacity 400ms ease, filter 400ms ease; } .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button.is-pointer-active { --button-scale: 0.99; transition: transform 90ms linear, border-color 400ms ease, box-shadow 400ms ease, color 400ms ease, text-shadow 400ms ease, background-color 400ms ease; } .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:hover, .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:focus-visible { color: #ffffff !important; border-color: rgba(var(--level-rgb), 0.58) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.14), inset 0 4px 4px rgba(255, 255, 255, 0.065), inset 0 8px 8px rgba(255, 255, 255, 0.04), var(--button-shadow-x) var(--button-shadow-y) 22px rgba(1, 6, 15, 0.45), 0 0 15px rgba(var(--level-rgb), 0.12); text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72), 0 0 5px rgba(var(--level-rgb), 0.24); } .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:hover::before, .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:focus-visible::before { filter: brightness(1.12); box-shadow: inset 0 -8px 8px -6px rgba(255, 255, 255, 0.7), inset 0 -16px 16px -8px rgba(var(--level-rgb), 0.34), 1px 1px 1px rgba(255, 255, 255, 0.2), 2px 2px 2px rgba(255, 255, 255, 0.12), -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07); } .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:hover::after, .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:focus-visible::after { opacity: 1; filter: brightness(1.08) saturate(1.05); } .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:active { --button-scale: 0.965; border-color: rgba(var(--level-rgb), 0.76) !important; } .course-roadmap.is-enhanced .course-roadmap__level:not(.is-desktop-selected) .course-roadmap__course-button:active::after { opacity: 1; filter: brightness(1.45) saturate(1.12); } /* * Selected desktop button: * a stable active resting state at roughly 65% of the full hover effect. * It remains dimensional but does not tilt. */ .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button { --button-tilt-x: 0deg; --button-tilt-y: 0deg; --button-scale: 1; --button-shadow-x: 0px; --button-shadow-y: 7px; color: #ffffff !important; background: linear-gradient( 180deg, rgba(14, 26, 44, 0.995) 0%, rgba(6, 14, 27, 0.995) 100% ) !important; border-color: rgba(var(--level-rgb), 0.4) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 2px 2px rgba(255, 255, 255, 0.12), inset 0 4px 4px rgba(255, 255, 255, 0.055), inset 0 8px 8px rgba(255, 255, 255, 0.035), 0 7px 20px rgba(1, 6, 15, 0.42), 0 0 17px rgba(var(--level-rgb), 0.1); text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72), 0 0 4px rgba(var(--level-rgb), 0.16); transform: none; } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button::before { filter: brightness(1.07); box-shadow: inset 0 -8px 8px -6px rgba(255, 255, 255, 0.42), inset 0 -16px 16px -8px rgba(var(--level-rgb), 0.2), 1px 1px 1px rgba(255, 255, 255, 0.17), 2px 2px 2px rgba(255, 255, 255, 0.09), -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button::after { opacity: 0.64; filter: brightness(1.04) saturate(1.03); } /* * Direct hover over a selected button gives only a restrained increase. * The button remains flat and stable because selection is persistent. */ .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button:hover, .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button:focus-visible { border-color: rgba(var(--level-rgb), 0.52) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.135), inset 0 4px 4px rgba(255, 255, 255, 0.062), inset 0 8px 8px rgba(255, 255, 255, 0.04), 0 7px 21px rgba(1, 6, 15, 0.44), 0 0 18px rgba(var(--level-rgb), 0.13); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button:hover::before, .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button:focus-visible::before { filter: brightness(1.1); box-shadow: inset 0 -8px 8px -6px rgba(255, 255, 255, 0.5), inset 0 -16px 16px -8px rgba(var(--level-rgb), 0.25), 1px 1px 1px rgba(255, 255, 255, 0.18), 2px 2px 2px rgba(255, 255, 255, 0.1), -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07); } .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button:hover::after, .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button:focus-visible::after { opacity: 0.76; filter: brightness(1.06) saturate(1.04); } .course-roadmap.is-enhanced .course-roadmap__course-button:focus-visible { outline: 2px solid rgba(var(--level-rgb), 0.72); outline-offset: 4px; text-decoration: none; } } /* ========================================================= V15.19: desktop resting 3D button treatment on mobile No pointer tilt or hover-only illumination is used. ========================================================= */ @media (max-width: 1023px) { .course-roadmap.is-enhanced .course-roadmap__course-button { --button-rim-size: 3px; position: relative; isolation: isolate; overflow: visible; color: rgba(255, 255, 255, 0.84) !important; background: linear-gradient( 180deg, rgba(16, 28, 47, 0.99) 0%, rgba(8, 16, 30, 0.99) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), inset 0 2px 2px rgba(255, 255, 255, 0.08), inset 0 4px 4px rgba(255, 255, 255, 0.035), inset 0 8px 8px rgba(255, 255, 255, 0.025), 0 7px 18px rgba(1, 6, 15, 0.34); transform: none; } .course-roadmap.is-enhanced .course-roadmap__course-button > span { position: relative; z-index: 2; pointer-events: none; } .course-roadmap.is-enhanced .course-roadmap__course-button::before, .course-roadmap.is-enhanced .course-roadmap__course-button::after { content: ""; position: absolute; pointer-events: none; } .course-roadmap.is-enhanced .course-roadmap__course-button::before { z-index: -1; inset: calc(-1 * var(--button-rim-size)); border-radius: calc(99px + var(--button-rim-size)); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.68) 100% ); box-shadow: inset 0 -8px 8px -6px rgba(255, 255, 255, 0), inset 0 -16px 16px -8px rgba(var(--level-rgb), 0), 1px 1px 1px rgba(255, 255, 255, 0.13), 2px 2px 2px rgba(255, 255, 255, 0.07), -1px -1px 1px rgba(0, 0, 0, 0.13), -2px -2px 2px rgba(0, 0, 0, 0.07); } .course-roadmap.is-enhanced .course-roadmap__course-button::after { z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient( 0deg, rgba(255, 255, 255, 0.3) 0%, rgba(var(--level-rgb), 0.26) 5%, rgba(var(--level-rgb), 0.1) 22%, transparent 72% ); opacity: 0.08; -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 44%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 44%, transparent 100%); } .course-roadmap.is-enhanced .course-roadmap__course-button:focus-visible { outline: 2px solid rgba(var(--level-rgb), 0.72); outline-offset: 4px; text-decoration: none; } } @media (prefers-reduced-motion: reduce) and (min-width: 1024px) { .course-roadmap.is-enhanced .course-roadmap__course-button { --button-tilt-x: 0deg !important; --button-tilt-y: 0deg !important; --button-scale: 1 !important; transform: none !important; } } /* Scoped copy of the supplied AI Roadmap CSS. */ .course-roadmap .ai-roadmap, .course-roadmap .ai-roadmap *{ box-sizing: border-box; } .course-roadmap .ai-roadmap{ --roadmap-navy: #173b70; --roadmap-text: #2d3642; --roadmap-muted: #5c6675; width: 100%; padding: 64px 24px; background: radial-gradient( ellipse at 50% 46%, rgba(50, 92, 145, 0.055) 0%, transparent 46% ); } .course-roadmap .ai-roadmap__inner{ width: 100%; max-width: 1180px; margin: 0 auto; } .course-roadmap .ai-roadmap__heading{ max-width: 900px; margin: 0 auto 32px; text-align: center; } .course-roadmap .ai-roadmap__heading h2{ margin: 0; color: var(--roadmap-navy); font-size: 36px; line-height: 1.2; font-weight: 700; } .course-roadmap .ai-roadmap__group-nav{ display: inline-grid; width: min(100%, 620px); margin: 20px auto 0; padding: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; background: rgba(230, 237, 246, 0.92); border: 1px solid #d4deea; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 20px rgba(23, 59, 112, 0.07); } .course-roadmap .ai-roadmap:not(.is-enhanced) .ai-roadmap__group-nav{ pointer-events: none; } .course-roadmap .ai-roadmap:not(.is-enhanced) .ai-roadmap__group-button{ cursor: default; } .course-roadmap .ai-roadmap .ai-roadmap__group-button{ display: flex; min-width: 0; min-height: 60px; padding: 10px 18px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--roadmap-navy); background: rgba(248, 251, 255, 0.78); border: 1px solid transparent; border-radius: 10px; font: inherit; text-align: center; cursor: pointer; transition: color 0.16s ease, background-color 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease; } .course-roadmap .ai-roadmap .ai-roadmap__group-button:hover:not(.is-active), .course-roadmap .ai-roadmap .ai-roadmap__group-button:focus-visible:not(.is-active){ color: var(--roadmap-navy) !important; background: #edf4fb !important; border-color: #a9bfd8; box-shadow: 0 4px 10px rgba(23, 59, 112, 0.1); transform: translateY(-1px); } .course-roadmap .ai-roadmap .ai-roadmap__group-button.is-active{ color: #ffffff !important; background: linear-gradient(145deg, #2d598f 0%, #173b70 100%) !important; border-color: #234b7e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 7px 16px rgba(23, 59, 112, 0.22); } .course-roadmap .ai-roadmap .ai-roadmap__group-button.is-active:hover, .course-roadmap .ai-roadmap .ai-roadmap__group-button.is-active:focus-visible{ color: #ffffff !important; background: linear-gradient(145deg, #274e80 0%, #12345f 100%) !important; border-color: #1f416f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(23, 59, 112, 0.27); transform: translateY(-1px); } .course-roadmap .ai-roadmap.is-switching .ai-roadmap__group-nav{ pointer-events: none; } .course-roadmap .ai-roadmap.is-switching .ai-roadmap__group-button{ cursor: wait; } .course-roadmap .ai-roadmap__group-range{ font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: 0.025em; } .course-roadmap .ai-roadmap__group-name{ font-size: 16px; line-height: 1.3; font-weight: 700; } .course-roadmap .ai-roadmap__sr-status{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); } /* Fallback layout. Stages 1-3 remain visible if JavaScript is unavailable. */ .course-roadmap .ai-roadmap__scroll{ width: 100%; overflow: visible; padding: 6px 4px 10px; } .course-roadmap .ai-roadmap__deck{ width: 100%; } .course-roadmap .ai-roadmap__panel{ display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; } .course-roadmap .ai-roadmap__panel + .ai-roadmap__panel{ margin-top: 26px; } .course-roadmap .ai-roadmap__panel[hidden]{ display: none; } .course-roadmap .ai-roadmap__stage-slot{ display: flex; min-width: 0; } /* Luminous category cards */ .course-roadmap .ai-stage{ --stage-color: #5adbe5; --stage-rgb: 38, 190, 205; position: relative; isolation: isolate; display: flex; width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 34px 28px 30px; overflow: hidden; flex-direction: column; color: #eef3f9; background: radial-gradient( ellipse 125% 62% at 50% -12%, rgba(var(--stage-rgb), 0.4) 0%, rgba(var(--stage-rgb), 0.19) 31%, rgba(var(--stage-rgb), 0.055) 53%, transparent 72% ), linear-gradient( 180deg, #121e31 0%, #0d1424 46%, #0a1020 100% ); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(var(--stage-rgb), 0.2), 0 2px 4px rgba(10, 24, 43, 0.16), 0 16px 34px rgba(19, 41, 78, 0.18); } .course-roadmap .ai-stage::before{ position: absolute; z-index: 0; inset: 1px; border-radius: 23px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.085) 0%, rgba(var(--stage-rgb), 0.075) 16%, transparent 54% ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), inset 0 24px 34px rgba(var(--stage-rgb), 0.055); content: ""; pointer-events: none; } .course-roadmap .ai-stage::after{ position: absolute; z-index: 0; top: 0; right: 18px; left: 18px; height: 4px; border-radius: 0 0 99px 99px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--stage-rgb), 0.36) 14%, rgba(var(--stage-rgb), 0.82) 34%, rgba(255, 255, 255, 0.86) 50%, rgba(var(--stage-rgb), 0.82) 66%, rgba(var(--stage-rgb), 0.36) 86%, transparent 100% ); box-shadow: 0 4px 12px rgba(var(--stage-rgb), 0.27), 0 0 18px rgba(var(--stage-rgb), 0.2); content: ""; pointer-events: none; } .course-roadmap .ai-stage > *{ position: relative; z-index: 1; } .course-roadmap .ai-stage--1{ --stage-color: #5adbe5; --stage-rgb: 38, 190, 205; } .course-roadmap .ai-stage--2{ --stage-color: #59d8d0; --stage-rgb: 41, 183, 174; } .course-roadmap .ai-stage--3{ --stage-color: #78b3ff; --stage-rgb: 72, 157, 255; } .course-roadmap .ai-stage--4{ --stage-color: #73a0ff; --stage-rgb: 73, 116, 255; } .course-roadmap .ai-stage--5{ --stage-color: #aa92ff; --stage-rgb: 123, 95, 218; } .course-roadmap .ai-stage--6{ --stage-color: #d393f0; --stage-rgb: 167, 81, 204; } /* Stage number */ .course-roadmap .ai-stage__number{ position: absolute; top: 30px; right: 27px; z-index: 3; display: block; color: rgba(255, 255, 255, 0.68); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.09em; } /* Icon and title */ .course-roadmap .ai-stage__header{ width: 100%; min-width: 0; padding: 0; background: transparent; } .course-roadmap .ai-stage__header-content{ display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 18px; align-items: flex-start; } .course-roadmap .ai-stage__icon{ display: flex; width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.94); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.42)) drop-shadow(0 0 9px rgba(var(--stage-rgb), 0.28)); } .course-roadmap .ai-stage__icon svg{ display: block; width: 42px; height: 42px; overflow: visible; } .course-roadmap .ai-stage__header h3{ margin: 0; color: #f4f7fb; font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } /* Category description */ .course-roadmap .ai-stage__purpose{ width: 100%; min-width: 0; margin-top: 19px; padding: 0; color: rgba(229, 235, 243, 0.82); background: transparent; border: 0; font-size: 16px; line-height: 1.58; } /* Course list */ .course-roadmap .ai-stage__courses{ width: 100%; min-width: 0; margin-top: 27px; padding: 0; flex: 1 1 auto; background: transparent; } .course-roadmap .ai-stage__courses ul{ display: flex; margin: 0; padding: 0; flex-direction: column; gap: 12px; list-style: none; } .course-roadmap .ai-stage__courses li{ position: relative; display: block; width: 100%; margin: 0; padding: 0 0 0 19px; color: rgba(239, 244, 250, 0.9); font-size: 16px; line-height: 1.48; } .course-roadmap .ai-stage__courses li + li{ margin-top: 0; } .course-roadmap .ai-stage__courses li::before{ position: absolute; top: 0.69em; left: 2px; width: 5px; height: 5px; background: var(--stage-color); border-radius: 1px; box-shadow: 0 0 7px rgba(var(--stage-rgb), 0.55); content: ""; transform: rotate(45deg); } .course-roadmap .ai-stage__courses a{ color: inherit; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; } .course-roadmap .ai-stage__courses a:hover, .course-roadmap .ai-stage__courses a:focus-visible{ color: #ffffff; text-decoration: underline; text-decoration-color: var(--stage-color); } .course-roadmap .ai-stage__courses a:focus-visible{ border-radius: 2px; outline: 2px solid var(--stage-color); outline-offset: 3px; } .course-roadmap .ai-roadmap__scroll:focus-visible, .course-roadmap .ai-roadmap__group-button:focus-visible{ outline: 3px solid rgba(32, 74, 180, 0.28); outline-offset: 3px; } /* Mobile orbit controls */ .course-roadmap .ai-roadmap__mobile-nav{ display: none; } .course-roadmap .ai-roadmap__mobile-arrow, .course-roadmap .ai-roadmap__mobile-dot{ margin: 0; font: inherit; cursor: pointer; } /* Enhanced desktop revolving deck */ @media (min-width: 1024px){ .course-roadmap .ai-roadmap.is-enhanced .ai-stage__header h3{ min-height: var(--roadmap-title-row-height, auto); } .course-roadmap .ai-roadmap.is-enhanced .ai-stage__purpose{ min-height: var(--roadmap-purpose-row-height, auto); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__deck{ display: grid; align-items: start; perspective: 1500px; perspective-origin: 50% 46%; transform-style: preserve-3d; transition: none; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__panel{ grid-area: 1 / 1; margin: 0; align-self: start; transform-style: preserve-3d; } .course-roadmap .ai-roadmap.is-enhanced.is-switching .ai-roadmap__deck{ transition: height 320ms cubic-bezier(0.22, 0.72, 0.2, 1); will-change: height; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot{ --roadmap-stagger: 0ms; opacity: 1; transform: rotateX(0deg) translateY(0) translateZ(0) scale(1); transform-origin: 50% 50%; transform-style: preserve-3d; backface-visibility: hidden; pointer-events: auto; } .course-roadmap .ai-roadmap.is-enhanced.is-ready .ai-roadmap__stage-slot{ transition: transform 620ms cubic-bezier(0.22, 0.72, 0.2, 1), opacity 280ms ease, visibility 0s linear; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot:nth-child(2){ --roadmap-stagger: 55ms; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot:nth-child(3){ --roadmap-stagger: 110ms; } /* Front visible, rear panel waiting underneath. */ .course-roadmap .ai-roadmap.is-enhanced:not(.is-showing-back) .ai-roadmap__panel--front .ai-roadmap__stage-slot{ opacity: 1; visibility: visible; transform: rotateX(0deg) translateY(0) translateZ(0) scale(1); pointer-events: auto; transition-delay: calc(120ms + var(--roadmap-stagger)), calc(120ms + var(--roadmap-stagger)), 0s; } .course-roadmap .ai-roadmap.is-enhanced:not(.is-showing-back) .ai-roadmap__panel--back .ai-roadmap__stage-slot{ opacity: 0; visibility: hidden; transform: rotateX(-74deg) translateY(42px) translateZ(-110px) scale(0.97); pointer-events: none; transition-delay: var(--roadmap-stagger), var(--roadmap-stagger), calc(620ms + var(--roadmap-stagger)); } /* Front panel revolves upwards while the rear panel comes forward. */ .course-roadmap .ai-roadmap.is-enhanced.is-showing-back .ai-roadmap__panel--front .ai-roadmap__stage-slot{ opacity: 0; visibility: hidden; transform: rotateX(74deg) translateY(-42px) translateZ(-110px) scale(0.97); pointer-events: none; transition-delay: var(--roadmap-stagger), var(--roadmap-stagger), calc(620ms + var(--roadmap-stagger)); } .course-roadmap .ai-roadmap.is-enhanced.is-showing-back .ai-roadmap__panel--back .ai-roadmap__stage-slot{ opacity: 1; visibility: visible; transform: rotateX(0deg) translateY(0) translateZ(0) scale(1); pointer-events: auto; transition-delay: calc(120ms + var(--roadmap-stagger)), calc(120ms + var(--roadmap-stagger)), 0s; } /* Return settled cards to ordinary 2D rendering. */ .course-roadmap .ai-roadmap.is-enhanced:not(.is-switching):not(.is-showing-back) .ai-roadmap__panel--front .ai-roadmap__stage-slot, .course-roadmap .ai-roadmap.is-enhanced:not(.is-switching).is-showing-back .ai-roadmap__panel--back .ai-roadmap__stage-slot{ transform: none; transform-style: flat; backface-visibility: visible; -webkit-backface-visibility: visible; } } /* Compact desktop layout for shorter laptop screens */ @media (min-width: 1024px) and (max-height: 900px){ .course-roadmap .ai-roadmap{ padding: 46px 24px; } .course-roadmap .ai-roadmap__heading{ margin-bottom: 26px; } .course-roadmap .ai-roadmap__heading h2{ font-size: 32px; } .course-roadmap .ai-roadmap__group-nav{ margin-top: 18px; } .course-roadmap .ai-roadmap__group-button{ min-height: 54px; padding: 8px 15px; } .course-roadmap .ai-roadmap__group-name{ font-size: 15px; } .course-roadmap .ai-stage{ padding: 28px 24px 28px; border-radius: 22px; } .course-roadmap .ai-stage__number{ top: 28px; right: 23px; font-size: 12px; } .course-roadmap .ai-stage__header-content{ gap: 14px; } .course-roadmap .ai-stage__icon{ width: 42px; height: 42px; flex-basis: 42px; } .course-roadmap .ai-stage__icon svg{ width: 36px; height: 36px; } .course-roadmap .ai-stage__header h3{ font-size: 22px; line-height: 1.2; } .course-roadmap .ai-stage__purpose{ margin-top: 16px; font-size: 15.5px; line-height: 1.52; } .course-roadmap .ai-stage__courses{ margin-top: 22px; } .course-roadmap .ai-stage__courses ul{ gap: 10px; } .course-roadmap .ai-stage__courses li{ padding-left: 17px; font-size: 15.5px; line-height: 1.44; } .course-roadmap .ai-stage__courses li::before{ top: 0.68em; width: 5px; height: 5px; } } /* Tablet and mobile fallback. JavaScript upgrades this to the orbital deck. */ @media (max-width: 1023px){ .course-roadmap .ai-roadmap{ padding: 52px 20px; } .course-roadmap .ai-roadmap__heading{ margin-bottom: 30px; } .course-roadmap .ai-roadmap__heading h2{ font-size: 32px; } .course-roadmap .ai-roadmap__group-nav{ display: none; } .course-roadmap .ai-roadmap__scroll{ width: calc(100% + 40px); margin-left: -20px; padding: 4px 20px 18px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; } .course-roadmap .ai-roadmap__scroll::-webkit-scrollbar{ height: 8px; } .course-roadmap .ai-roadmap__scroll::-webkit-scrollbar-track{ background: #dfe6ef; border-radius: 99px; } .course-roadmap .ai-roadmap__scroll::-webkit-scrollbar-thumb{ background: var(--roadmap-navy); border-radius: 99px; } .course-roadmap .ai-roadmap__deck{ display: flex; width: max-content; min-width: 100%; gap: 18px; } .course-roadmap .ai-roadmap__panel{ display: flex; width: auto; flex: 0 0 auto; gap: 18px; } .course-roadmap .ai-roadmap__panel + .ai-roadmap__panel{ margin-top: 0; } .course-roadmap .ai-roadmap__stage-slot{ width: min(72vw, 380px); flex: 0 0 min(72vw, 380px); scroll-snap-align: start; scroll-snap-stop: always; } .course-roadmap .ai-stage{ padding: 32px 26px 30px; } .course-roadmap .ai-stage__courses ul{ gap: 11px; } /* Enhanced orbital card arrangement */ .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll{ position: relative; padding-bottom: 8px; overflow: hidden; overflow-x: clip; overflow-y: hidden; overscroll-behavior-x: none; scroll-behavior: auto; scroll-snap-type: none; touch-action: pan-y; cursor: grab; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging{ cursor: grabbing; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll::-webkit-scrollbar{ display: none; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__deck{ position: relative; display: block; width: 100%; min-width: 0; height: var(--mobile-deck-height, 730px); perspective: 1250px; perspective-origin: 50% 44%; isolation: isolate; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__deck::before{ position: absolute; top: 49%; left: 50%; width: min(88vw, 560px); height: 190px; border: 1px solid rgba(38, 78, 134, 0.12); border-radius: 50%; background: radial-gradient( ellipse at center, rgba(38, 78, 134, 0.055) 0%, rgba(38, 78, 134, 0.018) 48%, transparent 72% ); content: ""; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__panel{ display: contents; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot{ --orbit-x: 0px; --orbit-y: 0px; --orbit-depth: 0px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 1; --orbit-brightness: 1; --orbit-saturation: 1; --orbit-content-blur: 0px; --orbit-content-opacity: 1; --orbit-opacity: 1; --orbit-z: 1; --orbit-delay: 0ms; --orbit-x-duration: 500ms; --orbit-card-duration: 500ms; --orbit-x-ease: cubic-bezier(0.22, 0.78, 0.24, 1); --orbit-card-ease: cubic-bezier(0.2, 0.82, 0.22, 1); position: absolute; top: 0; left: 50%; display: block; width: min(72vw, 380px); min-width: 0; opacity: var(--orbit-opacity); z-index: var(--orbit-z); pointer-events: none; transform: translateX(-50%) translate3d( var(--orbit-x), 0, var(--orbit-depth) ); transform-style: preserve-3d; will-change: transform, opacity; transition: transform var(--orbit-x-duration) var(--orbit-x-ease) var(--orbit-delay), opacity 360ms ease var(--orbit-delay); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="active"]{ --orbit-y: 0px; --orbit-depth: 0px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 1; --orbit-brightness: 1; --orbit-saturation: 1; --orbit-content-blur: 0px; --orbit-content-opacity: 1; --orbit-opacity: 1; --orbit-z: 6; pointer-events: auto; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="previous"]{ --orbit-y: 22px; --orbit-depth: -72px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 0.88; --orbit-brightness: 0.82; --orbit-saturation: 0.9; --orbit-content-blur: 1.2px; --orbit-content-opacity: 0.45; --orbit-opacity: 1; --orbit-z: 4; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="next"]{ --orbit-y: 22px; --orbit-depth: -72px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 0.88; --orbit-brightness: 0.82; --orbit-saturation: 0.9; --orbit-content-blur: 1.2px; --orbit-content-opacity: 0.45; --orbit-opacity: 1; --orbit-z: 4; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="previous-far"]{ --orbit-y: 46px; --orbit-depth: -135px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 0.74; --orbit-brightness: 0.7; --orbit-saturation: 0.82; --orbit-content-blur: 1.8px; --orbit-content-opacity: 0.2; --orbit-opacity: 0.5; --orbit-z: 2; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="next-far"]{ --orbit-y: 46px; --orbit-depth: -135px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 0.74; --orbit-brightness: 0.7; --orbit-saturation: 0.82; --orbit-content-blur: 1.8px; --orbit-content-opacity: 0.2; --orbit-opacity: 0.5; --orbit-z: 2; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="before"]{ --orbit-y: 72px; --orbit-depth: -190px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 0.62; --orbit-brightness: 0.62; --orbit-saturation: 0.75; --orbit-content-blur: 2px; --orbit-content-opacity: 0; --orbit-opacity: 0; --orbit-z: 1; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="after"]{ --orbit-y: 72px; --orbit-depth: -190px; --orbit-turn: 0deg; --orbit-roll: 0deg; --orbit-scale: 0.62; --orbit-brightness: 0.62; --orbit-saturation: 0.75; --orbit-content-blur: 2px; --orbit-content-opacity: 0; --orbit-opacity: 0; --orbit-z: 1; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot .ai-stage{ height: var(--mobile-uniform-card-height, 100%); transform: translateY(var(--orbit-y)) rotateY(var(--orbit-turn)) rotateZ(var(--orbit-roll)) scale(var(--orbit-scale)); transform-origin: 50% 16%; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: brightness(var(--orbit-brightness)) saturate(var(--orbit-saturation)); will-change: transform, filter; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(var(--stage-rgb), 0.2), 0 2px 4px rgba(10, 24, 43, 0.12), 0 10px 22px rgba(19, 41, 78, 0.1); transition: transform var(--orbit-card-duration) var(--orbit-card-ease) var(--orbit-delay), filter var(--orbit-card-duration) var(--orbit-card-ease) var(--orbit-delay), border-color 220ms ease, box-shadow 220ms ease; } /* * Every card in a hand-off starts together and follows the same 420ms * curve. Matching position, scale, depth and filtering prevents a seam * from opening and closing while the cards exchange places. */ .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-leaving, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-entering, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-background, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-drag-release{ --orbit-delay: 0ms; --orbit-x-duration: 420ms; --orbit-card-duration: 420ms; --orbit-x-ease: cubic-bezier(0.4, 0, 0.2, 1); --orbit-card-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Arrow navigation uses the same uninterrupted movement. */ .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-control-motion{ --orbit-delay: 0ms; --orbit-x-duration: 420ms; --orbit-card-duration: 420ms; --orbit-x-ease: cubic-bezier(0.4, 0, 0.2, 1); --orbit-card-ease: cubic-bezier(0.4, 0, 0.2, 1); transition: transform var(--orbit-x-duration) var(--orbit-x-ease), opacity var(--orbit-x-duration) var(--orbit-x-ease); } /* The centre card stays above both side cards throughout the crossover. */ .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot[data-orbit-position="active"]{ --orbit-z: 8; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-leaving:not( [data-orbit-position="active"] ){ z-index: 4; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-entering[ data-orbit-position="active" ]{ z-index: 8; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-returning{ --orbit-delay: 0ms; --orbit-x-duration: 360ms; --orbit-card-duration: 360ms; --orbit-x-ease: cubic-bezier(0.4, 0, 0.2, 1); --orbit-card-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* * Adjacent cards are peripheral motion cues, not reading surfaces. * Their internal content softens while the card silhouette, colour * lighting, border and shadow stay defined. */ .course-roadmap .ai-roadmap.is-enhanced .ai-stage__number, .course-roadmap .ai-roadmap.is-enhanced .ai-stage__header-content, .course-roadmap .ai-roadmap.is-enhanced .ai-stage__purpose > span, .course-roadmap .ai-roadmap.is-enhanced .ai-stage__courses ul{ filter: blur(var(--orbit-content-blur)); opacity: var(--orbit-content-opacity); transition: filter 240ms ease var(--orbit-delay), opacity 240ms ease var(--orbit-delay); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-control-motion .ai-stage__number, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-control-motion .ai-stage__header-content, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-control-motion .ai-stage__purpose > span, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-control-motion .ai-stage__courses ul{ transition: filter 420ms var(--orbit-card-ease), opacity 420ms var(--orbit-card-ease); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .ai-roadmap__stage-slot, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .ai-roadmap__stage-slot .ai-stage{ transition: none; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .ai-stage__number, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .ai-stage__header-content, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .ai-stage__purpose > span, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .ai-stage__courses ul{ transition: none; } /* Compact mobile navigation */ .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__mobile-nav{ display: grid; width: min(100%, 360px); margin: 4px auto 0; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 14px; align-items: center; } .course-roadmap .ai-roadmap.is-mobile-control-animating .ai-roadmap__mobile-nav{ pointer-events: none; } .course-roadmap .ai-roadmap .ai-roadmap__mobile-arrow{ display: flex; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0 !important; align-items: center; justify-content: center; color: #264e86 !important; background: #ffffff !important; border: 1px solid #c8d5e4 !important; border-radius: 50%; box-shadow: 0 5px 13px rgba(23, 59, 112, 0.11); transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .course-roadmap .ai-roadmap__mobile-arrow svg{ display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .course-roadmap .ai-roadmap .ai-roadmap__mobile-arrow.is-disabled{ opacity: 0.28; cursor: default; pointer-events: none; } .course-roadmap .ai-roadmap__mobile-progress{ display: flex; min-width: 0; flex-direction: column; gap: 8px; align-items: center; justify-content: center; } .course-roadmap .ai-roadmap__mobile-count{ color: var(--roadmap-navy); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.09em; } .course-roadmap .ai-roadmap__mobile-dots{ display: flex; min-height: 36px; align-items: center; justify-content: center; gap: 0; } .course-roadmap .ai-roadmap .ai-roadmap__mobile-dot{ position: relative; display: inline-flex; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0 !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; border-radius: 99px; box-shadow: none !important; transition: transform 160ms ease; } .course-roadmap .ai-roadmap .ai-roadmap__mobile-dot::before{ width: 7px; height: 7px; background: #bdcad9; border-radius: 99px; content: ""; transition: width 210ms ease, background-color 210ms ease, transform 160ms ease; } .course-roadmap .ai-roadmap .ai-roadmap__mobile-dot.is-active::before{ width: 22px; background: #264e86 !important; } .course-roadmap .ai-roadmap .ai-roadmap__mobile-arrow:focus-visible, .course-roadmap .ai-roadmap .ai-roadmap__mobile-dot:focus-visible{ outline: 3px solid rgba(38, 78, 134, 0.28); outline-offset: 3px; } } @media (max-width: 640px){ .course-roadmap .ai-roadmap{ padding: 44px 16px; } .course-roadmap .ai-roadmap__heading{ margin-bottom: 34px; } .course-roadmap .ai-roadmap__heading h2{ font-size: 29px; } .course-roadmap .ai-roadmap__scroll{ width: calc(100% + 32px); margin-left: -16px; padding: 4px 16px 16px; scroll-padding-inline: 16px; } .course-roadmap .ai-roadmap__deck, .course-roadmap .ai-roadmap__panel{ gap: 16px; } .course-roadmap .ai-roadmap__stage-slot, .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot{ width: min(86vw, 350px); } .course-roadmap .ai-roadmap__stage-slot{ flex-basis: min(86vw, 350px); } .course-roadmap .ai-stage{ padding: 28px 22px 28px; border-radius: 22px; } .course-roadmap .ai-stage__number{ top: 28px; right: 22px; font-size: 12px; } .course-roadmap .ai-stage__header-content{ gap: 15px; } .course-roadmap .ai-stage__icon{ width: 44px; height: 44px; flex-basis: 44px; } .course-roadmap .ai-stage__icon svg{ width: 38px; height: 38px; } .course-roadmap .ai-stage__header h3{ font-size: 22px; line-height: 1.22; } .course-roadmap .ai-stage__purpose{ margin-top: 17px; font-size: 16px; } .course-roadmap .ai-stage__courses{ margin-top: 24px; } .course-roadmap .ai-stage__courses li{ font-size: 16px; } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__mobile-nav{ margin-top: 4px; } } @media (hover: hover) and (pointer: fine) and (max-width: 1023px){ .course-roadmap .ai-roadmap .ai-roadmap__mobile-arrow:hover:not(.is-disabled){ color: #ffffff !important; background: #264e86 !important; border-color: #264e86 !important; box-shadow: 0 7px 16px rgba(23, 59, 112, 0.2); transform: translateY(-1px); } .course-roadmap .ai-roadmap .ai-roadmap__mobile-dot:hover:not(.is-active)::before{ background: #7f99b8 !important; transform: scale(1.18); } } /* JavaScript adds this class when the visitor requests reduced motion. */ .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced.is-ready .ai-roadmap__stage-slot{ transition: opacity 180ms ease, transform 0s linear, visibility 0s linear; transition-delay: 0s; } .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced:not(.is-showing-back) .ai-roadmap__panel--back .ai-roadmap__stage-slot, .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced.is-showing-back .ai-roadmap__panel--front .ai-roadmap__stage-slot{ transform: none; } @media (min-width: 1024px){ .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced .ai-roadmap__deck{ transition: none; } } @media (max-width: 1023px){ .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced.is-ready .ai-roadmap__stage-slot .ai-stage{ transition: transform 0s linear, border-color 180ms ease, box-shadow 180ms ease; transition-delay: 0s; } .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced .ai-stage__number, .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced .ai-stage__header-content, .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced .ai-stage__purpose > span, .course-roadmap .ai-roadmap.is-reduced-motion.is-enhanced .ai-stage__courses ul{ transition: none; } } /* ================================================================ * Exact AI mobile orbit embedded inside the working course roadmap. * The orbit hierarchy, timings, easing, drag thresholds and controls * come from the supplied AI module. Only the card skin/content changes. * ================================================================ */ .course-roadmap .course-roadmap__ai-mobile { display: none; } @media (max-width: 1023px) { .course-roadmap .course-roadmap__stage, .course-roadmap > .course-roadmap__inner > .course-roadmap__mobile-nav { display: none !important; } .course-roadmap .course-roadmap__ai-mobile { display: block; width: 100%; margin-top: -70px; padding: 0; overflow: visible; background: none; } .course-roadmap .course-roadmap__ai-mobile .ai-roadmap__heading, .course-roadmap .course-roadmap__ai-mobile .ai-roadmap__group-nav { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } .course-roadmap .course-roadmap__ai-mobile .ai-roadmap__inner { max-width: none; } /* Working module card skin, kept separate from the AI motion layer. */ .course-roadmap .course-roadmap__ai-card { --level-color: var(--stage-color); --level-rgb: var(--stage-rgb); min-height: 430px; padding: 32px 27px 26px; color: #edf3fa; background: radial-gradient( ellipse 125% 72% at 50% 108%, rgba(var(--stage-rgb), 0.58) 0%, rgba(var(--stage-rgb), 0.28) 34%, rgba(var(--stage-rgb), 0.085) 59%, transparent 79% ), linear-gradient(180deg, #111d31 0%, #0d1627 50%, #09111f 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 27px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -14px 20px -17px rgba(255, 255, 255, 0.25), inset 0 -42px 60px -47px rgba(var(--stage-rgb), 0.3), inset 0 -108px 118px -104px rgba(var(--stage-rgb), 0.12), 0 2px 4px rgba(10, 24, 43, 0.12), 0 10px 22px rgba(19, 41, 78, 0.1); } .course-roadmap .course-roadmap__ai-card::before { inset: 0; border-radius: inherit; background: radial-gradient( ellipse 58% 118% at 50% 113%, rgba(var(--stage-rgb), 0.48) 0%, rgba(var(--stage-rgb), 0.23) 25%, rgba(var(--stage-rgb), 0.085) 50%, rgba(var(--stage-rgb), 0.028) 68%, transparent 90% ), linear-gradient( 35deg, rgba(255, 255, 255, 0.065) 0%, rgba(var(--stage-rgb), 0.042) 17%, transparent 48% ); box-shadow: none; } .course-roadmap .course-roadmap__ai-card::after { top: auto; right: 18px; bottom: 0; left: 18px; border-radius: 99px 99px 0 0; background: linear-gradient( 90deg, transparent 0%, rgba(var(--stage-rgb), 0.34) 14%, rgba(var(--stage-rgb), 0.82) 34%, rgba(255, 255, 255, 0.88) 50%, rgba(var(--stage-rgb), 0.82) 66%, rgba(var(--stage-rgb), 0.34) 86%, transparent 100% ); box-shadow: 0 -4px 12px rgba(var(--stage-rgb), 0.27), 0 0 18px rgba(var(--stage-rgb), 0.2); } .course-roadmap .course-roadmap__ai-card--basic, .course-roadmap .ai-stage--4 { --stage-color: #59d8a2; --stage-rgb: 54, 190, 132; } .course-roadmap .course-roadmap__ai-card--intermediate, .course-roadmap .ai-stage--5 { --stage-color: #73a0ff; --stage-rgb: 73, 116, 255; } .course-roadmap .course-roadmap__ai-card--advanced, .course-roadmap .ai-stage--6 { --stage-color: #d393f0; --stage-rgb: 167, 81, 204; } .course-roadmap .course-roadmap__ai-card-number { top: 29px; right: 26px; } .course-roadmap .course-roadmap__ai-card .ai-stage__header-content { gap: 0; } .course-roadmap .course-roadmap__ai-card-icon { width: 48px; height: 48px; flex: 0 0 48px; color: rgba(255, 255, 255, 0.95); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.42)) drop-shadow(0 0 9px rgba(var(--stage-rgb), 0.3)); } .course-roadmap .course-roadmap__ai-card-icon svg { width: 43px; height: 43px; } .course-roadmap .course-roadmap__ai-card-kicker { margin: 20px 0 0; color: var(--stage-color); font-size: 12px; line-height: 1.25; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .course-roadmap .course-roadmap__ai-card .ai-stage__header h3 { min-height: 0; margin: 8px 0 0; color: #f5f8fc; font-size: 25px; line-height: 1.22; font-weight: 700; letter-spacing: -0.015em; } .course-roadmap .course-roadmap__ai-card .ai-stage__purpose { margin-top: 0; font-size: inherit; line-height: inherit; } .course-roadmap .course-roadmap__ai-card-copy { width: 100%; } .course-roadmap .course-roadmap__ai-card-purpose { margin: 16px 0 0; color: rgba(233, 239, 247, 0.86); font-size: 16.5px; line-height: 1.52; } .course-roadmap .course-roadmap__ai-card-audience { margin: 12px 0 0; color: rgba(202, 213, 226, 0.68); font-size: 15px; line-height: 1.5; } .course-roadmap .course-roadmap__ai-card-footer { width: 100%; margin-top: auto; padding-top: 24px; flex: 0 0 auto; } .course-roadmap .course-roadmap__ai-card-footer ul, .course-roadmap .course-roadmap__ai-card-footer li { display: block; width: 100%; margin: 0; padding: 0; list-style: none; } .course-roadmap .course-roadmap__ai-card-footer li::before { display: none; } .course-roadmap .course-roadmap__ai-card .course-roadmap__course-button { position: relative; display: inline-flex !important; width: 100%; min-height: 44px; padding: 0 16px !important; align-items: center; justify-content: center; color: #f7fbff !important; background: linear-gradient(180deg, rgba(15, 27, 46, 0.97) 0%, rgba(9, 17, 31, 0.97) 100%) !important; border: 1px solid rgba(var(--stage-rgb), 0.48) !important; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 7px 15px rgba(3, 10, 22, 0.2), 0 0 14px rgba(var(--stage-rgb), 0.1); font-size: 13px; line-height: 1.2; font-weight: 750; letter-spacing: 0.025em; cursor: pointer; } /* Include working copy and CTA in the AI module's exact depth-of-field animation. */ .course-roadmap .ai-roadmap.is-enhanced .course-roadmap__ai-card-copy { filter: blur(var(--orbit-content-blur)); opacity: var(--orbit-content-opacity); transition: filter 240ms ease var(--orbit-delay), opacity 240ms ease var(--orbit-delay); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot.is-orbit-control-motion .course-roadmap__ai-card-copy { transition: filter 420ms var(--orbit-card-ease), opacity 420ms var(--orbit-card-ease); } .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__scroll.is-dragging .course-roadmap__ai-card-copy { transition: none; } .course-roadmap .course-roadmap__ai-mobile .ai-roadmap__mobile-nav { margin-top: 4px; } } @media (max-width: 479px) { .course-roadmap .course-roadmap__ai-card { padding: 25px 23px 24px; } .course-roadmap .course-roadmap__ai-card-number { top: 27px; right: 24px; } } /* V2: prevent Safari's restored viewport focus from appearing as two bars. */ @media (max-width: 1023px) { .course-roadmap .course-roadmap__ai-mobile .ai-roadmap__scroll:focus, .course-roadmap .course-roadmap__ai-mobile .ai-roadmap__scroll:focus-visible { outline: none !important; box-shadow: none !important; } } /* V35: Distinct sheet pager. Navigation is intentionally not card-shaped. */ @media (max-width: 1023px) { .course-roadmap__sheet-footer { min-height: 78px; padding: 10px 16px max(11px, env(safe-area-inset-bottom)); grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 12px; background: linear-gradient( 180deg, rgba(8, 17, 31, 0.62) 0%, rgba(6, 14, 26, 0.94) 46%, #06101e 100% ); box-shadow: 0 -18px 34px rgba(2, 8, 18, 0.16); } .course-roadmap .course-roadmap__sheet-footer-button, .course-roadmap .course-roadmap__sheet-footer-button--next { position: relative; display: grid; width: 50px; min-width: 50px; height: 50px; min-height: 50px; margin: 0; padding: 0 !important; place-items: center; justify-content: center; color: rgba(239, 245, 252, 0.84) !important; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; text-align: center; -webkit-tap-highlight-color: transparent; } .course-roadmap .course-roadmap__sheet-footer-button:hover, .course-roadmap .course-roadmap__sheet-footer-button:focus-visible { background: transparent !important; border-color: transparent !important; } .course-roadmap .course-roadmap__sheet-footer-button::before { position: absolute; inset: 7px; border: 1px solid rgba(var(--level-rgb), 0); border-radius: 50%; background: rgba(var(--level-rgb), 0); content: ""; transform: scale(0.82); transition: background-color 170ms ease, border-color 170ms ease, transform 170ms ease; } .course-roadmap .course-roadmap__sheet-footer-button:hover::before, .course-roadmap .course-roadmap__sheet-footer-button:focus-visible::before { background: rgba(var(--level-rgb), 0.1); border-color: rgba(var(--level-rgb), 0.25); transform: scale(1); } .course-roadmap .course-roadmap__sheet-footer-button:active { transform: none; } .course-roadmap .course-roadmap__sheet-footer-button:active::before { background: rgba(var(--level-rgb), 0.16); transform: scale(0.9); } .course-roadmap .course-roadmap__sheet-footer-button:focus-visible { outline: 0; } .course-roadmap .course-roadmap__sheet-footer-button:focus-visible::before { box-shadow: 0 0 0 3px rgba(var(--level-rgb), 0.22); } .course-roadmap__sheet-footer-button svg { position: relative; z-index: 1; width: 24px; height: 24px; stroke-width: 1.8; } .course-roadmap__sheet-footer-copy { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .course-roadmap__sheet-position { position: relative; display: flex; width: 100%; min-width: 0; padding: 2px 8px 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; } .course-roadmap__sheet-position::before { order: -2; width: 34px; height: 3px; border-radius: 99px; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.16), var(--level-color), rgba(var(--level-rgb), 0.16) ); box-shadow: 0 0 12px rgba(var(--level-rgb), 0.24); content: ""; } .course-roadmap__sheet-position-level { order: -1; width: 100%; max-width: none; overflow: visible; color: #f4f8fc; font-size: 15px; line-height: 1.08; font-weight: 760; letter-spacing: -0.01em; text-overflow: clip; white-space: nowrap; } .course-roadmap__sheet-position-count { color: rgba(205, 220, 237, 0.58); font-size: 9.5px; line-height: 1; font-weight: 760; letter-spacing: 0.12em; } } @media (max-width: 380px) { .course-roadmap__sheet-footer { padding-right: 10px; padding-left: 10px; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 8px; } .course-roadmap .course-roadmap__sheet-footer-button, .course-roadmap .course-roadmap__sheet-footer-button--next { width: 46px; min-width: 46px; height: 46px; min-height: 46px; } .course-roadmap__sheet-position-level { font-size: 14px; } } /* ========================================================= V36: full-screen explorer canvas with natural-height list ========================================================= */ @media (max-width: 1023px) { /* The viewport-sized sheet is the explorer canvas. */ .course-roadmap__sheet-frame { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.012) 0%, transparent 34%, rgba(2, 8, 18, 0.12) 100% ); } .course-roadmap__sheet-header { padding-bottom: 20px; } /* No low-value course or track totals in the explorer. */ .course-roadmap__sheet-meta, .course-roadmap__track-count { display: none !important; } /* * The body remains the independently scrolling canvas. The pathway panel * ends after its actual content instead of visually filling the viewport. */ .course-roadmap__sheet-body { display: block; padding: 20px; background: transparent; } .course-roadmap__sheet-body > .course-roadmap__level-courses.is-in-sheet, .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-source, .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-target { box-sizing: border-box; width: 100%; max-width: 640px; min-height: 0; margin: 0 auto; padding: 18px; overflow: visible; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.064) 0%, rgba(255, 255, 255, 0.026) 58%, rgba(var(--level-rgb), 0.035) 100% ); border: 1px solid rgba(207, 222, 240, 0.13); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 34px rgba(1, 7, 18, 0.15); } .course-roadmap__sheet .course-roadmap__track + .course-roadmap__track { margin-top: 22px; padding-top: 22px; } .course-roadmap__sheet .course-roadmap__track-heading { margin-bottom: 13px; } /* Keep the pathway watermark on the canvas, not inside the list surface. */ .course-roadmap__sheet-watermark { right: 4px; bottom: 76px; opacity: 0.9; } } @media (max-width: 640px) { .course-roadmap__sheet-body { padding: 18px 15px 20px; } .course-roadmap__sheet-body > .course-roadmap__level-courses.is-in-sheet, .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-source, .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-target { padding: 16px; border-radius: 18px; } } /* ========================================================= V37: synchronised directional sheet motion ========================================================= */ @media (max-width: 1023px) { .course-roadmap__sheet { opacity: 0; filter: blur(4px); transform: translate3d(0, 24px, 0) scale(0.985); transform-origin: 50% 88%; will-change: transform, opacity, filter; transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 360ms ease; } .course-roadmap__sheet::backdrop { background: rgba(3, 9, 20, 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); transition: background-color 440ms cubic-bezier(0.22, 0.72, 0.24, 1), -webkit-backdrop-filter 520ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 520ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__sheet.is-visible { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } .course-roadmap__sheet.is-visible::backdrop { background: rgba(3, 9, 20, 0.82); -webkit-backdrop-filter: blur(14px) saturate(0.72); backdrop-filter: blur(14px) saturate(0.72); } .course-roadmap__sheet.is-closing { opacity: 0; filter: blur(2px); transform: translate3d(0, 18px, 0) scale(0.99); transition-duration: 340ms, 240ms, 260ms; } .course-roadmap__sheet.is-closing::backdrop { background: rgba(3, 9, 20, 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); transition-duration: 320ms, 340ms, 340ms; } .course-roadmap__sheet-frame > .course-roadmap__sheet-header, .course-roadmap__sheet-frame > .course-roadmap__sheet-body, .course-roadmap__sheet-frame > .course-roadmap__sheet-footer, .course-roadmap__sheet-frame > .course-roadmap__sheet-watermark { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 300ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 440ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__sheet.is-visible .course-roadmap__sheet-header, .course-roadmap__sheet.is-visible .course-roadmap__sheet-body, .course-roadmap__sheet.is-visible .course-roadmap__sheet-footer, .course-roadmap__sheet.is-visible .course-roadmap__sheet-watermark { opacity: 1; transform: translate3d(0, 0, 0); } .course-roadmap__sheet.is-visible .course-roadmap__sheet-header { transition-delay: 55ms; } .course-roadmap__sheet.is-visible .course-roadmap__sheet-body { transition-delay: 90ms; } .course-roadmap__sheet.is-visible .course-roadmap__sheet-watermark { transition-delay: 105ms; } .course-roadmap__sheet.is-visible .course-roadmap__sheet-footer { transition-delay: 125ms; } .course-roadmap__sheet.is-closing .course-roadmap__sheet-header, .course-roadmap__sheet.is-closing .course-roadmap__sheet-body, .course-roadmap__sheet.is-closing .course-roadmap__sheet-footer, .course-roadmap__sheet.is-closing .course-roadmap__sheet-watermark { opacity: 0; transform: translate3d(0, 5px, 0); transition-delay: 0ms; transition-duration: 180ms, 240ms; } /* Directional crossfade adapted from the supplied page-transition pair. */ .course-roadmap__sheet-title-layer, .course-roadmap__sheet-watermark-layer, .course-roadmap__sheet-position-layer { will-change: transform, opacity; transition: opacity 300ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 390ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__sheet-title-layer--source, .course-roadmap__sheet-watermark-layer--source, .course-roadmap__sheet-position-layer--source { opacity: calc(1 - var(--course-colour-progress)); transform: translate3d(var(--course-meta-source-x, 0), 0, 0) scale(var(--course-meta-source-scale, 1)); } .course-roadmap__sheet-title-layer--target, .course-roadmap__sheet-watermark-layer--target, .course-roadmap__sheet-position-layer--target { opacity: var(--course-colour-progress); transform: translate3d(var(--course-meta-target-x, 0), 0, 0) scale(var(--course-meta-target-scale, 1)); } .course-roadmap__sheet.is-colour-dragging .course-roadmap__sheet-position-layer, .course-roadmap__sheet.is-colour-committing .course-roadmap__sheet-position-layer { transition: none; } /* SVG pathway watermark. Each layer carries its own palette, so colour changes during the swipe rather than after the content settles. */ .course-roadmap__sheet-watermark { right: 14px; bottom: 84px; width: min(58vw, 310px); height: min(30vh, 210px); color: transparent; -webkit-mask-image: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.34) 22%, #000 62%, transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.34) 22%, #000 62%, transparent 100% ); } .course-roadmap__sheet-watermark-layer { right: 0; bottom: 0; display: grid; width: 100%; height: 100%; place-items: end; color: rgba(var(--icon-rgb), 0.095); font-size: initial; line-height: normal; letter-spacing: normal; filter: drop-shadow(0 0 24px rgba(var(--icon-rgb), 0.08)); } .course-roadmap__sheet-watermark-layer svg { display: block; width: min(48vw, 250px); height: min(24vh, 170px); overflow: visible; } .course-roadmap__sheet-watermark-layer.is-atom-icon svg { width: min(42vw, 220px); height: min(22vh, 154px); } /* Layered central pager metadata switches with the course panel. */ .course-roadmap__sheet-position { display: grid; min-height: 55px; padding-top: 0; } .course-roadmap__sheet-position::before { display: none; } .course-roadmap__sheet-position-layer { position: relative; display: flex; width: 100%; min-width: 0; grid-area: 1 / 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; } .course-roadmap__sheet-position-layer::before { order: -2; width: 34px; height: 3px; border-radius: 99px; background: linear-gradient( 90deg, rgba(var(--position-rgb), 0.16), var(--position-color), rgba(var(--position-rgb), 0.16) ); box-shadow: 0 0 12px rgba(var(--position-rgb), 0.24); content: ""; } .course-roadmap__sheet-position-level { color: var(--position-color, #f4f8fc); } .course-roadmap__sheet-position-layer--target { pointer-events: none; } .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-source, .course-roadmap__sheet-body > .course-roadmap__level-courses.is-sheet-slide-target { backface-visibility: hidden; transform-style: preserve-3d; } } @media (prefers-reduced-motion: reduce) and (max-width: 1023px) { .course-roadmap__sheet, .course-roadmap__sheet::backdrop, .course-roadmap__sheet-frame > *, .course-roadmap__sheet-title-layer, .course-roadmap__sheet-watermark-layer, .course-roadmap__sheet-position-layer { transition-duration: 20ms !important; transition-delay: 0ms !important; } } /* V37.1: clip outgoing/incoming metadata within their assigned regions. */ @media (max-width: 1023px) { .course-roadmap__sheet-header h3, .course-roadmap__sheet-position { overflow: hidden; } } /* V37.2: the explorer surface leads the scrim by a fraction of a frame. */ @media (max-width: 1023px) { .course-roadmap__sheet { filter: blur(2.5px); transform: translate3d(0, 18px, 0) scale(0.99); transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1), opacity 190ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 280ms ease; } .course-roadmap__sheet::backdrop { transition: background-color 420ms 20ms cubic-bezier(0.22, 0.72, 0.24, 1), -webkit-backdrop-filter 500ms 20ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 500ms 20ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__sheet-frame > .course-roadmap__sheet-header, .course-roadmap__sheet-frame > .course-roadmap__sheet-body, .course-roadmap__sheet-frame > .course-roadmap__sheet-footer, .course-roadmap__sheet-frame > .course-roadmap__sheet-watermark { transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 390ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__sheet.is-visible .course-roadmap__sheet-header { transition-delay: 0ms; } .course-roadmap__sheet.is-visible .course-roadmap__sheet-body { transition-delay: 20ms; } .course-roadmap__sheet.is-visible .course-roadmap__sheet-watermark { transition-delay: 35ms; } .course-roadmap__sheet.is-visible .course-roadmap__sheet-footer { transition-delay: 45ms; } } /* ========================================================= V39: clean panel hand-off ========================================================= */ @media (max-width: 1023px) { /* Prevent a transformed panel shadow from painting beyond the viewport. */ .course-roadmap__sheet-body.is-sheet-switching { overflow-x: clip; } } /* ========================================================= V50: mobile track headers and swipe-enabled course links ========================================================= */ @media (max-width: 1023px) { /* * Allow the sheet gesture detector to receive horizontal pointer movement * from linked course rows while preserving native vertical scrolling. */ .course-roadmap__sheet .course-roadmap__course-link { touch-action: pan-y; -webkit-tap-highlight-color: transparent; } } /* V51: compact desktop progressive disclosure. */ @media (min-width: 1024px) { .course-roadmap.is-enhanced .course-roadmap__level.is-desktop-selected .course-roadmap__course-button::after { content: "−"; position: relative; display: inline-block; margin-left: 2px; color: var(--level-color); font-size: 16px; line-height: 1; font-weight: 500; } .course-roadmap__desktop-panel.is-closing { pointer-events: none; } } /* ========================================================= EXCEL V2: in-card pathway details and responsive drill-in ========================================================= */ .course-roadmap--microsoft .course-roadmap__level--basic { --level-color: #59d8a2; --level-rgb: 54, 190, 132; } .course-roadmap--microsoft .course-roadmap__level--intermediate { --level-color: #73a0ff; --level-rgb: 73, 116, 255; } .course-roadmap--microsoft .course-roadmap__level--advanced { --level-color: #d393f0; --level-rgb: 167, 81, 204; } .course-roadmap--microsoft .course-roadmap__track.is-empty { display: none !important; } .course-roadmap--microsoft .course-roadmap__course-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; } /* A single surface contains the course link and the separate pathway control. */ .course-roadmap--microsoft .course-roadmap__course-card { position: relative; display: flex; width: 100%; min-width: 0; height: 100%; overflow: hidden; flex-direction: column; color: rgba(239, 244, 250, 0.91); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.028) 100% ); border: 1px solid rgba(206, 220, 238, 0.11); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 4px 10px rgba(3, 10, 22, 0.11); transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 190ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap--microsoft .course-roadmap__course-card::after { position: absolute; z-index: 0; right: 8%; bottom: 0; left: 8%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(var(--level-rgb), 0.68) 50%, transparent 100% ); box-shadow: 0 -4px 10px rgba(var(--level-rgb), 0.12); opacity: 0; content: ""; pointer-events: none; transform: scaleX(0.72); transform-origin: 50% 50%; transition: opacity 260ms ease, transform 260ms ease; } .course-roadmap--microsoft .course-roadmap__course-card > * { position: relative; z-index: 1; } .course-roadmap--microsoft .course-roadmap__course-card .course-roadmap__course-link { min-height: 53px; height: auto; flex: 1 1 auto; color: inherit; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; transform: none !important; } .course-roadmap--microsoft .course-roadmap__course-card .course-roadmap__course-link::after { display: none !important; } .course-roadmap--microsoft .course-roadmap__pathway-trigger { display: grid; width: 100%; min-width: 0; min-height: 34px; margin: 0; padding: 7px 9px 8px 56px; grid-template-columns: 14px minmax(0, 1fr) 14px; gap: 6px; align-items: center; color: rgba(191, 216, 240, 0.7); background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.055) 0%, rgba(255, 255, 255, 0.014) 58%, transparent 100% ); border: 0; border-top: 1px solid rgba(205, 220, 238, 0.085); cursor: pointer; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; transition: color 220ms ease, background 220ms ease, border-color 220ms ease; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-icon, .course-roadmap--microsoft .course-roadmap__pathway-trigger-chevron { display: block; width: 14px; height: 14px; flex: 0 0 14px; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-icon svg, .course-roadmap--microsoft .course-roadmap__pathway-trigger-chevron { display: block; width: 100%; height: 100%; fill: none; stroke: var(--level-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-label { display: flex; min-width: 0; align-items: baseline; gap: 4px; overflow: hidden; font-size: 9.5px; line-height: 1.25; font-weight: 760; letter-spacing: 0.035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-prefix { color: var(--level-color); } .course-roadmap--microsoft .course-roadmap__pathway-trigger-separator { color: rgba(215, 226, 239, 0.42); } .course-roadmap--microsoft .course-roadmap__pathway-trigger-chevron { justify-self: end; stroke: currentColor; transition: transform 240ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap--microsoft .course-roadmap__pathway-trigger[aria-expanded="true"] { color: rgba(245, 249, 254, 0.94); background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.13) 0%, rgba(var(--level-rgb), 0.045) 70%, transparent 100% ); border-top-color: rgba(var(--level-rgb), 0.3); } .course-roadmap--microsoft .course-roadmap__pathway-trigger[aria-expanded="true"] .course-roadmap__pathway-trigger-chevron { transform: translateX(2px); } .course-roadmap--microsoft .course-roadmap__pathway-trigger:focus-visible { position: relative; z-index: 3; outline: 2px solid rgba(var(--level-rgb), 0.9); outline-offset: -2px; } .course-roadmap--microsoft .course-roadmap__course-card:focus-within { border-color: rgba(var(--level-rgb), 0.46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 7px 18px rgba(3, 10, 22, 0.2), 0 0 14px rgba(var(--level-rgb), 0.07); } @media (hover: hover) and (pointer: fine) { .course-roadmap--microsoft .course-roadmap__course-card:hover { color: #ffffff; background: linear-gradient( 145deg, rgba(var(--level-rgb), 0.13) 0%, rgba(255, 255, 255, 0.042) 58%, rgba(var(--level-rgb), 0.05) 100% ); border-color: rgba(var(--level-rgb), 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), inset 0 -1px 0 rgba(var(--level-rgb), 0.1), 0 8px 18px rgba(3, 10, 22, 0.22), 0 0 14px rgba(var(--level-rgb), 0.07); transform: translateY(-1px); } .course-roadmap--microsoft .course-roadmap__course-card:hover::after { opacity: 1; transform: scaleX(1); } .course-roadmap--microsoft .course-roadmap__pathway-trigger:hover { color: #ffffff; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.16) 0%, rgba(var(--level-rgb), 0.05) 74%, transparent 100% ); } } .course-roadmap--microsoft .course-roadmap__course.is-pathway-target .course-roadmap__course-card { color: #ffffff; border-color: rgba(var(--level-rgb), 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 0 0 3px rgba(var(--level-rgb), 0.13), 0 10px 24px rgba(3, 10, 22, 0.28), 0 0 24px rgba(var(--level-rgb), 0.18); animation: course-roadmap-pathway-target 900ms cubic-bezier(0.22, 0.72, 0.24, 1) both; } @keyframes course-roadmap-pathway-target { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-2px) scale(1.012); } 100% { transform: translateY(0) scale(1); } } /* Desktop anchored pathway flyout. */ .course-roadmap__pathway-popover { --pathway-popover-x: 16px; --pathway-popover-y: 16px; position: fixed; z-index: 2147482000; top: 0; left: 0; width: min(390px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; color: #edf3fa; background: radial-gradient( ellipse 100% 86% at 8% 0%, rgba(67, 199, 207, 0.14) 0%, transparent 63% ), linear-gradient(158deg, #111e32 0%, #0b1628 54%, #08111f 100%); border: 1px solid rgba(211, 224, 240, 0.16); border-radius: 19px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.095), 0 24px 62px rgba(2, 8, 19, 0.42), 0 8px 24px rgba(19, 41, 78, 0.2); opacity: 0; filter: blur(4px); pointer-events: none; transform: translate3d(var(--pathway-popover-x), var(--pathway-popover-y), 0) translateY(8px) scale(0.985); transform-origin: var(--pathway-origin-x, 50%) var(--pathway-origin-y, 0%); will-change: transform, opacity, filter; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 210ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 260ms ease; } .course-roadmap__pathway-popover[hidden] { display: none !important; } .course-roadmap__pathway-popover.is-visible { opacity: 1; filter: blur(0); pointer-events: auto; transform: translate3d(var(--pathway-popover-x), var(--pathway-popover-y), 0) translateY(0) scale(1); } .course-roadmap__pathway-popover.is-closing { opacity: 0; filter: blur(2px); pointer-events: none; transform: translate3d(var(--pathway-popover-x), var(--pathway-popover-y), 0) translateY(5px) scale(0.992); transition-duration: 220ms, 150ms, 180ms; } .course-roadmap__pathway-popover-accent { position: absolute; z-index: 2; top: 0; right: 24px; left: 24px; height: 3px; border-radius: 0 0 99px 99px; background: linear-gradient( 90deg, transparent 0%, rgba(89, 216, 162, 0.55) 20%, #43c7cf 48%, #4f7df3 80%, transparent 100% ); box-shadow: 0 3px 13px rgba(67, 199, 207, 0.28); opacity: 0; pointer-events: none; transform: scaleX(0.72); transition: opacity 260ms ease 30ms, transform 360ms cubic-bezier(0.16, 1, 0.3, 1) 30ms; } .course-roadmap__pathway-popover.is-visible .course-roadmap__pathway-popover-accent { opacity: 1; transform: scaleX(1); } .course-roadmap__pathway-popover-header { position: sticky; z-index: 4; top: 0; display: flex; padding: 19px 18px 15px; align-items: flex-start; justify-content: space-between; gap: 16px; background: linear-gradient(180deg, rgba(15, 28, 47, 0.98), rgba(12, 23, 40, 0.94)); border-bottom: 1px solid rgba(207, 221, 239, 0.11); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .course-roadmap__pathway-popover-header p { margin: 0 0 5px; color: #65d5d9; font-size: 9.5px; line-height: 1.2; font-weight: 820; letter-spacing: 0.13em; text-transform: uppercase; } .course-roadmap__pathway-popover-header h3 { margin: 0; color: #f6f9fd; font-size: 20px; line-height: 1.22; font-weight: 730; letter-spacing: -0.015em; } .course-roadmap__pathway-popover-close { display: inline-grid; width: 34px; height: 34px; margin: 0; padding: 0; flex: 0 0 34px; place-items: center; color: rgba(231, 239, 248, 0.74); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(206, 220, 238, 0.13); border-radius: 50%; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .course-roadmap__pathway-popover-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .course-roadmap__pathway-popover-close:hover, .course-roadmap__pathway-popover-close:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.075); border-color: rgba(101, 213, 217, 0.34); } .course-roadmap__pathway-popover-close:focus-visible { outline: 2px solid #65d5d9; outline-offset: 2px; } .course-roadmap__pathway-popover-close:active { transform: scale(0.94); } .course-roadmap__pathway-popover-body { position: relative; padding: 17px 18px 18px; overflow: hidden; } .course-roadmap__pathway-detail-description { margin: 0 0 17px; color: rgba(207, 220, 236, 0.71); font-size: 12px; line-height: 1.5; } .course-roadmap__pathway-detail-list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 10px; list-style: none; } .course-roadmap__pathway-detail-step { position: relative; display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: stretch; } .course-roadmap__pathway-detail-step:not(:last-child)::after { position: absolute; z-index: 0; top: 31px; bottom: -15px; left: 16px; width: 2px; background: linear-gradient( 180deg, rgba(89, 216, 162, 0.58), rgba(67, 199, 207, 0.6) 52%, rgba(79, 125, 243, 0.52) ); box-shadow: 0 0 9px rgba(67, 199, 207, 0.12); content: ""; } .course-roadmap__pathway-detail-step--branch::before { position: absolute; z-index: 0; top: 17px; left: 16px; width: 18px; height: 2px; background: rgba(79, 125, 243, 0.62); content: ""; } .course-roadmap__pathway-detail-marker { position: relative; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; color: #dff8f8; background: linear-gradient(145deg, rgba(28, 59, 82, 0.98), rgba(13, 31, 52, 0.98)); border: 1px solid rgba(67, 199, 207, 0.45); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 13px rgba(67, 199, 207, 0.09); } .course-roadmap__pathway-detail-marker span { font-size: 8.5px; line-height: 1; font-weight: 830; letter-spacing: 0.035em; } .course-roadmap__pathway-detail-link { display: flex; min-width: 0; min-height: 66px; padding: 10px 11px; flex-direction: column; justify-content: center; gap: 5px; color: #eef4fb !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)); border: 1px solid rgba(205, 220, 238, 0.12); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); text-decoration: none !important; transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 180ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__pathway-detail-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; color: #68d4d9; font-size: 8.5px; line-height: 1.2; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; } .course-roadmap__pathway-detail-meta span:last-child { color: rgba(206, 219, 235, 0.53); letter-spacing: 0.035em; } .course-roadmap__pathway-detail-title { color: #f1f6fb; font-size: 11.5px; line-height: 1.36; font-weight: 660; overflow-wrap: anywhere; } .course-roadmap__pathway-detail-action { display: inline-flex; align-items: center; gap: 3px; color: rgba(197, 215, 233, 0.5); font-size: 8.5px; line-height: 1.2; font-weight: 720; letter-spacing: 0.035em; } .course-roadmap__pathway-detail-action svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 180ms ease; } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-marker { color: #ffffff; background: linear-gradient(145deg, rgba(67, 199, 207, 0.5), rgba(34, 86, 119, 0.7)); border-color: rgba(124, 234, 237, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 3px rgba(67, 199, 207, 0.1), 0 0 18px rgba(67, 199, 207, 0.2); } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-link { background: linear-gradient(145deg, rgba(67, 199, 207, 0.145), rgba(79, 125, 243, 0.055)); border-color: rgba(88, 213, 218, 0.48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 15px rgba(67, 199, 207, 0.07); } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-action { color: #74dce0; } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-action::before { content: "Current course · "; } @media (hover: hover) and (pointer: fine) { .course-roadmap__pathway-detail-link:hover { background: linear-gradient(145deg, rgba(67, 199, 207, 0.13), rgba(79, 125, 243, 0.045)); border-color: rgba(93, 215, 220, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 7px 16px rgba(2, 8, 18, 0.18); transform: translateY(-1px); } .course-roadmap__pathway-detail-link:hover .course-roadmap__pathway-detail-action svg { transform: translateX(2px); } } .course-roadmap__pathway-detail-link:focus-visible { outline: 2px solid #65d5d9; outline-offset: 2px; } .course-roadmap__pathway-detail-note { display: flex; margin: 15px 0 0; padding-top: 13px; align-items: center; gap: 7px; color: rgba(196, 214, 232, 0.58); border-top: 1px solid rgba(205, 220, 238, 0.1); font-size: 9px; line-height: 1.35; font-weight: 760; letter-spacing: 0.055em; text-transform: uppercase; } .course-roadmap__pathway-detail-note > span, .course-roadmap__pathway-detail-note svg { display: block; width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: #65d5d9; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; } /* Mobile pathway drill-in uses the existing course sheet. */ .course-roadmap__sheet-pathway-heading { display: none; } .course-roadmap__sheet-pathway-view { display: none; } @media (max-width: 1023px) { .course-roadmap--microsoft { padding-bottom: 54px; } .course-roadmap--microsoft .course-roadmap__heading { position: relative; z-index: 3; margin-bottom: 35px; } .course-roadmap--microsoft .course-roadmap__ai-mobile { margin-top: 0; } .course-roadmap--microsoft .course-roadmap__course-card { height: auto; border-color: rgba(208, 222, 239, 0.13); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.072) 0%, rgba(255, 255, 255, 0.028) 100% ); } .course-roadmap--microsoft .course-roadmap__course-card .course-roadmap__course-link { min-height: 52px; padding: 7px 11px 7px 7px; } .course-roadmap--microsoft .course-roadmap__pathway-trigger { min-height: 36px; padding: 8px 10px 9px 56px; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-label { font-size: 9px; } .course-roadmap__pathway-popover { display: none !important; } .course-roadmap__sheet-body { position: relative; } .course-roadmap__sheet-heading { transition: opacity 260ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 390ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease; } .course-roadmap__sheet-pathway-heading { position: absolute; z-index: 2; top: 50%; right: 70px; left: 20px; display: flex; min-width: 0; flex-direction: column; gap: 3px; opacity: 0; filter: blur(3px); pointer-events: none; transform: translate3d(24px, -50%, 0); transition: opacity 260ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease; } .course-roadmap__sheet-pathway-heading > span { color: #67d5da; font-size: 9px; line-height: 1.1; font-weight: 820; letter-spacing: 0.14em; text-transform: uppercase; } .course-roadmap__sheet-pathway-heading > strong { min-width: 0; overflow: hidden; color: #f5f8fc; font-size: 22px; line-height: 1.18; font-weight: 730; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-heading { opacity: 0; filter: blur(2px); pointer-events: none; transform: translate3d(-22px, 0, 0); } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-pathway-heading { opacity: 1; filter: blur(0); transform: translate3d(0, -50%, 0); } .course-roadmap__sheet-pathway-view { box-sizing: border-box; width: 100%; min-height: 100%; padding: 20px; color: #edf3fa; } .course-roadmap__sheet-pathway-view[hidden] { display: none !important; } .course-roadmap__sheet-pathway-view:not([hidden]) { display: block; } .course-roadmap__sheet-pathway-surface { width: 100%; max-width: 640px; margin: 0 auto; padding: 18px; background: radial-gradient( ellipse 92% 86% at 8% 0%, rgba(67, 199, 207, 0.095) 0%, transparent 64% ), linear-gradient( 155deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0.025) 58%, rgba(79, 125, 243, 0.026) 100% ); border: 1px solid rgba(207, 222, 240, 0.13); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 34px rgba(1, 7, 18, 0.15); } .course-roadmap__sheet-pathway-back { display: inline-flex; min-height: 38px; margin: 0 0 16px; padding: 0 12px 0 9px; align-items: center; gap: 6px; color: rgba(231, 240, 249, 0.78); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(207, 222, 239, 0.12); border-radius: 99px; cursor: pointer; font: inherit; font-size: 11px; line-height: 1; font-weight: 700; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .course-roadmap__sheet-pathway-back svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .course-roadmap__sheet-pathway-back:focus-visible { color: #ffffff; background: rgba(67, 199, 207, 0.095); border-color: rgba(67, 199, 207, 0.32); } .course-roadmap__sheet-pathway-back:focus-visible { outline: 2px solid #67d5da; outline-offset: 2px; } .course-roadmap__sheet-pathway-back:active { transform: scale(0.97); } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-description { margin-bottom: 18px; font-size: 13px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-list { gap: 12px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-step { grid-template-columns: var(--pathway-node-size) minmax(0, 1fr); gap: 11px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-step:not(:last-child)::after { top: 35px; bottom: -17px; left: 18px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-step--branch::before { top: 19px; left: 18px; width: 20px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-marker { width: var(--pathway-node-size); height: var(--pathway-node-size); } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-link { min-height: 78px; padding: 12px 13px; gap: 6px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta { font-size: 9px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-title { font-size: 13px; line-height: 1.38; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-action { font-size: 9px; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-footer { min-height: 0 !important; max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; border-top-color: transparent; box-shadow: none; opacity: 0; pointer-events: none; transform: translate3d(0, 16px, 0); } .course-roadmap__sheet-footer { max-height: 96px; transition: max-height 380ms cubic-bezier(0.16, 1, 0.3, 1), min-height 380ms cubic-bezier(0.16, 1, 0.3, 1), padding 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms cubic-bezier(0.22, 0.72, 0.24, 1), transform 390ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, box-shadow 240ms ease; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-watermark { opacity: 0.38 !important; transform: translate3d(-12px, 0, 0) scale(0.96) !important; transition-delay: 0ms !important; } } @media (max-width: 640px) { .course-roadmap__sheet-pathway-view { padding: 18px 15px 20px; } .course-roadmap__sheet-pathway-surface { padding: 16px; border-radius: 18px; } .course-roadmap__sheet-pathway-heading { right: 62px; left: 16px; } .course-roadmap__sheet-pathway-heading > strong { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .course-roadmap--microsoft .course-roadmap__course-card, .course-roadmap--microsoft .course-roadmap__pathway-trigger, .course-roadmap__pathway-popover, .course-roadmap__pathway-popover *, .course-roadmap__sheet-heading, .course-roadmap__sheet-pathway-heading, .course-roadmap__sheet-footer, .course-roadmap__sheet-pathway-back, .course-roadmap__pathway-detail-link { animation: none !important; transition-duration: 20ms !important; transition-delay: 0ms !important; } } /* ========================================================= EXCEL V4: separate pathway view, curtain transition, and properly recessed pathway nodes ========================================================= */ .course-roadmap__pathway-detail-list { --pathway-rail-x: 25px; --pathway-node-size: 34px; --pathway-notch-size: 44px; --pathway-card-canvas: #0b1628; position: relative; display: flex; margin: 0 !important; padding: 0 !important; flex-direction: column; gap: 10px; list-style: none !important; } .course-roadmap__pathway-detail-list::before { position: absolute; z-index: 0; top: var(--pathway-line-top, 36px); left: calc(var(--pathway-rail-x) - 1px); width: 2px; height: var(--pathway-line-height, calc(100% - 72px)); background: linear-gradient( 180deg, rgba(89, 216, 162, 0.76), rgba(67, 199, 207, 0.82) 52%, rgba(79, 125, 243, 0.74) ); box-shadow: 0 0 10px rgba(67, 199, 207, 0.16); content: ""; pointer-events: none; } .course-roadmap__pathway-detail-step { position: relative; display: block !important; min-width: 0; padding-left: var(--pathway-rail-x); } .course-roadmap__pathway-detail-step::before { position: absolute; z-index: 2; top: 50%; left: calc(var(--pathway-rail-x) - (var(--pathway-notch-size) / 2)); width: var(--pathway-notch-size); height: var(--pathway-notch-size); border: 1px solid rgba(205, 220, 238, 0.18); border-radius: 50%; content: "" !important; clip-path: inset(0 0 0 50%); pointer-events: none; transform: translateY(-50%); } .course-roadmap__pathway-detail-step::after { display: none !important; content: none !important; } .course-roadmap__pathway-detail-marker { position: absolute; z-index: 4; top: 50%; left: calc(var(--pathway-rail-x) - (var(--pathway-node-size) / 2)); display: grid; width: var(--pathway-node-size); height: var(--pathway-node-size); place-items: center; color: #dff8f8; background: linear-gradient( 145deg, rgba(28, 59, 82, 0.99), rgba(13, 31, 52, 0.99) ); border: 1px solid rgba(67, 199, 207, 0.54); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 3px rgba(8, 17, 31, 0.58), 0 0 13px rgba(67, 199, 207, 0.1); transform: translateY(-50%); } .course-roadmap__pathway-detail-marker span { position: relative; z-index: 1; font-size: 8.5px; line-height: 1; font-weight: 830; letter-spacing: 0.025em; } .course-roadmap__pathway-detail-link { position: relative; z-index: 1; display: flex; min-width: 0; min-height: 72px; padding: 10px 12px 10px 35px; flex-direction: column; justify-content: center; gap: 5px; overflow: visible; color: #eef4fb !important; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022) ); border: 1px solid rgba(205, 220, 238, 0.14); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); text-decoration: none !important; -webkit-mask-image: radial-gradient( circle calc(var(--pathway-notch-size) / 2) at 0 50%, transparent calc((var(--pathway-notch-size) / 2) - 1px), #000 calc(var(--pathway-notch-size) / 2) ); mask-image: radial-gradient( circle calc(var(--pathway-notch-size) / 2) at 0 50%, transparent calc((var(--pathway-notch-size) / 2) - 1px), #000 calc(var(--pathway-notch-size) / 2) ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 180ms cubic-bezier(0.22, 0.72, 0.24, 1); } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-marker { color: #ffffff; background: linear-gradient( 145deg, rgba(67, 199, 207, 0.54), rgba(34, 86, 119, 0.78) ); border-color: rgba(124, 234, 237, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(67, 199, 207, 0.1), 0 0 18px rgba(67, 199, 207, 0.2); } .course-roadmap__pathway-detail-step.is-current::before { border-color: rgba(88, 213, 218, 0.48); } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-link { background: linear-gradient( 145deg, rgba(67, 199, 207, 0.145), rgba(79, 125, 243, 0.055) ); border-color: rgba(88, 213, 218, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 15px rgba(67, 199, 207, 0.07); } .course-roadmap__view-curtain { position: absolute; z-index: 20; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } .course-roadmap__view-curtain[hidden] { display: none !important; } .course-roadmap__view-curtain.is-active { display: block; pointer-events: auto; } .course-roadmap__view-curtain-layer { position: absolute; inset: 0; display: block; transform: scaleX(0); } .course-roadmap__view-curtain-layer--base { z-index: 1; background: #0f1930; } .course-roadmap__view-curtain-layer--accent { z-index: 2; background: linear-gradient( 90deg, rgba(67, 199, 207, 0.16), rgba(22, 39, 67, 0.98) 14%, #15243d 100% ); box-shadow: -4px 0 18px rgba(67, 199, 207, 0.18); } @media (max-width: 1023px) { .course-roadmap__sheet-frame { isolation: isolate; } .course-roadmap__sheet-heading, .course-roadmap__sheet-pathway-heading, .course-roadmap__sheet-footer { transition: none !important; } .course-roadmap__sheet-heading { visibility: visible; opacity: 1; filter: none; transform: none; } .course-roadmap__sheet-pathway-heading { position: absolute; z-index: 2; top: 50%; right: 70px; left: 20px; display: flex; min-width: 0; flex-direction: column; gap: 3px; visibility: hidden; opacity: 0; pointer-events: none; transform: translate3d(0, -50%, 0); } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-heading { visibility: hidden; opacity: 0; pointer-events: none; transform: none; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-pathway-heading { visibility: visible; opacity: 1; transform: translate3d(0, -50%, 0); } .course-roadmap__sheet-pathway-heading > span { color: #67d5da; font-size: 9px; line-height: 1.1; font-weight: 820; letter-spacing: 0.14em; text-transform: uppercase; } .course-roadmap__sheet-pathway-heading > strong { min-width: 0; overflow: hidden; color: #f5f8fc; font-size: 22px; line-height: 1.18; font-weight: 730; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; } .course-roadmap__sheet-pathway-view { position: absolute; z-index: 6; inset: 0; box-sizing: border-box; width: 100%; min-height: 100%; padding: 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; color: #edf3fa; background: radial-gradient( ellipse 100% 86% at 8% 0%, rgba(67, 199, 207, 0.105) 0%, transparent 64% ), linear-gradient(158deg, #111e32 0%, #0b1628 54%, #08111f 100%); -webkit-overflow-scrolling: touch; } .course-roadmap__sheet-pathway-view[hidden] { display: none !important; } .course-roadmap__sheet-pathway-surface { width: 100%; max-width: 640px; margin: 0 auto; padding: 18px; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-footer { visibility: hidden; opacity: 0; pointer-events: none; } .course-roadmap__sheet-footer { visibility: visible; opacity: 1; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-list { --pathway-rail-x: 28px; --pathway-node-size: 38px; --pathway-notch-size: 48px; gap: 12px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-link { min-height: 80px; padding: 12px 13px 12px 39px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-title { font-size: 13px; line-height: 1.38; } } @media (max-width: 640px) { .course-roadmap__sheet-pathway-view { padding: 18px 15px 20px; } .course-roadmap__sheet-pathway-surface { padding: 0; } } @media (prefers-reduced-motion: reduce) { .course-roadmap__view-curtain-layer { transition: none !important; } } /* ========================================================= EXCEL V4.2.1: refined node connectors and scoped curtain ========================================================= */ .course-roadmap__pathway-detail-list { --pathway-rail-line-x: 24px; --pathway-node-center-x: 52px; --pathway-node-size: 34px; --pathway-notch-size: 42px; gap: 12px; } .course-roadmap__pathway-detail-list::before { left: var(--pathway-rail-line-x); width: 2px; } .course-roadmap__pathway-detail-step { padding-left: 0 !important; } .course-roadmap__pathway-detail-step::before { position: absolute; z-index: 1; top: 50%; left: var(--pathway-rail-line-x); width: calc(var(--pathway-node-center-x) - var(--pathway-rail-line-x)); height: 2px; background: linear-gradient( 90deg, rgba(89, 216, 162, 0.78), rgba(67, 199, 207, 0.84) 52%, rgba(79, 125, 243, 0.78) ); box-shadow: 0 0 10px rgba(67, 199, 207, 0.12); content: "" !important; pointer-events: none; transform: translateY(-50%); } .course-roadmap__pathway-detail-marker { left: calc(var(--pathway-node-center-x) - (var(--pathway-node-size) / 2)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 3px rgba(8, 17, 31, 0.72), 0 0 12px rgba(67, 199, 207, 0.09); } .course-roadmap__pathway-detail-link { margin-left: var(--pathway-node-center-x); padding-left: 26px; -webkit-mask-image: radial-gradient( circle calc(var(--pathway-notch-size) / 2) at 0 50%, transparent calc((var(--pathway-notch-size) / 2) - 0.5px), #000 calc((var(--pathway-notch-size) / 2) + 0.5px) ); mask-image: radial-gradient( circle calc(var(--pathway-notch-size) / 2) at 0 50%, transparent calc((var(--pathway-notch-size) / 2) - 0.5px), #000 calc((var(--pathway-notch-size) / 2) + 0.5px) ); } .course-roadmap__pathway-detail-link::before { position: absolute; z-index: 1; top: 50%; left: 0; width: var(--pathway-notch-size); height: var(--pathway-notch-size); border: 1px solid rgba(205, 220, 238, 0.16); border-radius: 50%; clip-path: inset(0 0 0 50%); content: ""; pointer-events: none; transform: translate(-50%, -50%); } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-link::before { border-color: rgba(103, 213, 218, 0.45); } @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-list { --pathway-rail-line-x: 25px; --pathway-node-center-x: 53px; --pathway-node-size: 42px; --pathway-notch-size: 46px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-link { margin-left: var(--pathway-node-center-x); min-height: 80px; padding-left: 24px; } .course-roadmap__view-curtain { top: var(--course-roadmap-curtain-top, 108px); border-top-left-radius: 0; border-top-right-radius: 0; } } /* ========================================================= EXCEL V4.3: measured connector branches and header wipe ========================================================= */ .course-roadmap__pathway-detail-list { --pathway-node-center-x: 53px; --pathway-node-size: 42px; --pathway-notch-size: 46px; isolation: isolate; } .course-roadmap__pathway-detail-list::before, .course-roadmap__pathway-detail-step::before { display: none !important; content: none !important; } .course-roadmap__pathway-connectors { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .course-roadmap__pathway-connector-path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(67, 199, 207, 0.12)); } .course-roadmap__pathway-detail-step { z-index: 1; } .course-roadmap__pathway-detail-marker { left: calc(var(--pathway-node-center-x) - (var(--pathway-node-size) / 2)) !important; } .course-roadmap__pathway-detail-link { margin-left: var(--pathway-node-center-x); padding-left: 25px; } .course-roadmap__pathway-detail-link::before { display: none !important; content: none !important; } .course-roadmap__pathway-detail-step::after { position: absolute !important; z-index: 2 !important; top: 50% !important; left: calc(var(--pathway-node-center-x) - (var(--pathway-notch-size) / 2)) !important; display: block !important; width: var(--pathway-notch-size) !important; height: var(--pathway-notch-size) !important; background: transparent !important; border: 1px solid rgba(205, 220, 238, 0.16) !important; border-radius: 50% !important; clip-path: inset(0 0 0 50%) !important; box-shadow: none !important; content: "" !important; pointer-events: none !important; transform: translateY(-50%) !important; } .course-roadmap__pathway-detail-step.is-current::after { border-color: rgba(103, 213, 218, 0.48) !important; } .course-roadmap__pathway-detail-action, .course-roadmap__pathway-detail-note { display: none !important; } @media (min-width: 1024px) { .course-roadmap__pathway-detail-list { --pathway-node-center-x: 48px; --pathway-node-size: 38px; --pathway-notch-size: 42px; } } @media (max-width: 1023px) { .course-roadmap__sheet-heading, .course-roadmap__sheet-pathway-heading { will-change: opacity, transform, clip-path, filter; } } /* ========================================================= EXCEL V4.3.1: connector visibility and balanced spacing ========================================================= */ .course-roadmap__pathway-connector-path { fill: none !important; stroke: #43c7cf !important; stroke-opacity: 0.9 !important; stroke-width: 2px !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke; } .course-roadmap__pathway-connectors { z-index: 2; } .course-roadmap__pathway-detail-step { z-index: 3; } .course-roadmap__pathway-detail-marker { z-index: 5; } .course-roadmap__pathway-detail { padding-bottom: 22px; } .course-roadmap__pathway-detail-list { margin-bottom: 4px !important; } @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail { padding-bottom: 28px; } } /* ========================================================= EXCEL V4.3.3: rigid branching, lighter node halo, balanced header position and symmetric heading motion ========================================================= */ /* * Non-current nodes retain separation from the dark canvas without the * heavy black halo that visually swallowed the connector endpoint. */ .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-marker { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(67, 199, 207, 0.16), 0 0 12px rgba(67, 199, 207, 0.08); } .course-roadmap__pathway-connector-path { stroke-linecap: butt !important; stroke-linejoin: miter !important; } @media (max-width: 1023px) { /* Return to the original centred header placement. */ .course-roadmap__sheet-pathway-heading { top: 50%; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-pathway-heading { transform: translate3d(0, -50%, 0); } } /* ========================================================= EXCEL V4.3.4: unified node rail, mirrored heading motion, and deterministic desktop preview/pinned behaviour ========================================================= */ .course-roadmap__pathway-detail-list { --pathway-system-colour: #43c7cf; --pathway-system-width: 2px; } .course-roadmap__pathway-connector-path { stroke: var(--pathway-system-colour) !important; stroke-opacity: 1 !important; stroke-width: var(--pathway-system-width) !important; stroke-linecap: butt !important; stroke-linejoin: miter !important; } /* * Nodes and connectors now share one exact stroke colour and thickness. * The opaque fill masks the connector beneath the node, while the course * card, rather than the node, carries the current-course emphasis. */ .course-roadmap__pathway-detail-marker, .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-marker, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-marker { color: #ffffff; background: #10253a !important; border: var(--pathway-system-width) solid var(--pathway-system-colour) !important; box-shadow: none !important; filter: none !important; } @media (max-width: 1023px) { /* Slightly lower than V4.3.3 to match the course heading's visual centre. */ .course-roadmap__sheet-pathway-heading { top: calc(50% + 6px); } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-pathway-heading { transform: translate3d(0, -50%, 0); } } /* ========================================================= EXCEL V4.3.5: true fork, unified SVG nodes, cyber palette, symmetric heading transition and preview-to-pin behaviour ========================================================= */ .course-roadmap__pathway-detail-list { --pathway-system-colour: #43c7cf; --pathway-system-width: 2.5px; } .course-roadmap__pathway-connector-path { stroke: var(--pathway-system-colour) !important; stroke-width: var(--pathway-system-width) !important; stroke-linecap: butt !important; stroke-linejoin: miter !important; filter: none !important; } .course-roadmap__pathway-node-circle { vector-effect: non-scaling-stroke; } /* The SVG owns both the node circle and connector. HTML retains only text. */ .course-roadmap__pathway-detail-marker, .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-marker, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-marker { color: #ffffff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } .course-roadmap__pathway-detail-step::after { border-color: rgba(205, 220, 238, 0.12) !important; } .course-roadmap__pathway-detail-step.is-current::after { border-color: rgba(67, 199, 207, 0.36) !important; } /* Cybersecurity roadmap level colours, reused across every category. */ .course-roadmap__pathway-detail-step--level-basic .course-roadmap__pathway-detail-meta > span:first-child, .course-roadmap__pathway-level-word--basic { color: #59d8a2 !important; } .course-roadmap__pathway-detail-step--level-intermediate .course-roadmap__pathway-detail-meta > span:first-child, .course-roadmap__pathway-level-word--intermediate { color: #73a0ff !important; } .course-roadmap__pathway-detail-step--level-advanced .course-roadmap__pathway-detail-meta > span:first-child, .course-roadmap__pathway-level-word--advanced { color: #d393f0 !important; } .course-roadmap__pathway-level-word--separator { color: rgba(206, 219, 235, 0.56) !important; } .course-roadmap__pathway-detail-meta > span:last-child { color: rgba(206, 219, 235, 0.53) !important; } @media (max-width: 1023px) { /* During either direction, inline animation state owns both headings. */ .course-roadmap__sheet.is-heading-transitioning .course-roadmap__sheet-heading, .course-roadmap__sheet.is-heading-transitioning .course-roadmap__sheet-pathway-heading { visibility: visible !important; pointer-events: none !important; } } /* ========================================================= EXCEL V4.3.6: click-only desktop, isolated mobile pathway, reliable mirrored header transition ========================================================= */ @media (max-width: 1023px) { .course-roadmap__sheet-heading-transition { position: absolute; z-index: 5; top: 0; right: 70px; bottom: 0; left: 20px; overflow: hidden; pointer-events: none; } .course-roadmap__sheet-heading-transition[hidden] { display: none !important; } .course-roadmap__sheet-heading-ghost { position: absolute; inset: 0; min-width: 0; color: #f5f8fc; pointer-events: none; will-change: opacity, transform, clip-path, filter; } .course-roadmap__sheet-heading-ghost--course { display: flex; align-items: center; } .course-roadmap__sheet-heading-ghost--course h3 { width: 100%; margin: 0; } .course-roadmap__sheet-heading-ghost--pathway { display: flex; flex-direction: column; justify-content: center; gap: 3px; transform: translateY(2px); } .course-roadmap__sheet-heading-ghost--pathway > span { color: #67d5da; font-size: 9px; line-height: 1.1; font-weight: 820; letter-spacing: 0.14em; text-transform: uppercase; } .course-roadmap__sheet-heading-ghost--pathway > strong { min-width: 0; overflow: hidden; color: #f5f8fc; font-size: 22px; line-height: 1.18; font-weight: 730; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; } /* Raise the live pathway heading slightly from V4.3.5. */ .course-roadmap__sheet-pathway-heading { top: calc(50% + 2px) !important; } /* Only one mobile view participates in layout at a time. */ .course-roadmap__sheet-body > .course-roadmap__level-courses.is-pathway-source-hidden { display: none !important; } .course-roadmap__sheet-pathway-view { position: relative !important; inset: auto !important; min-height: 100%; overflow: visible !important; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-body { overflow-y: auto !important; touch-action: pan-y !important; } .course-roadmap__sheet.is-heading-transitioning .course-roadmap__sheet-heading, .course-roadmap__sheet.is-heading-transitioning .course-roadmap__sheet-pathway-heading { visibility: hidden !important; opacity: 0 !important; } } /* ========================================================= EXCEL V4.3.7: permanent live header layers and stable popover anchor ========================================================= */ .course-roadmap__pathway-popover { max-height: var( --pathway-popover-max-height, calc(100vh - 32px) ); } @media (max-width: 1023px) { .course-roadmap__sheet-heading-viewport { position: relative; min-width: 0; height: 52px; overflow: hidden; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading, .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading { position: absolute !important; z-index: 1; inset: 0 !important; box-sizing: border-box; min-width: 0; margin: 0; transition: none !important; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading { display: flex; align-items: center; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading h3 { width: 100%; margin: 0; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading { display: flex !important; flex-direction: column; justify-content: center; gap: 3px; padding-bottom: 3px; transform: none; } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading, .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading { transform: none; } .course-roadmap__sheet.is-live-heading-transition .course-roadmap__sheet-title-layer { transition: none !important; } .course-roadmap__sheet-heading-transition { display: none !important; } } /* ========================================================= EXCEL V4.3.8: text-only heading curtain and premeasured popover ========================================================= */ @media (max-width: 1023px) { .course-roadmap__sheet-heading-viewport { isolation: isolate; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading, .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading { z-index: 1; opacity: 1; filter: none; transform: translate3d(0, 0, 0) !important; transition: none !important; } .course-roadmap__sheet-heading-transition { position: absolute; z-index: 5; inset: 0; display: block !important; overflow: hidden; pointer-events: none; } .course-roadmap__sheet-heading-transition[hidden] { display: none !important; } .course-roadmap__sheet-heading-curtain-layer { position: absolute; inset: 0; display: block; transform: scaleX(0); } .course-roadmap__sheet-heading-curtain-layer--base { z-index: 1; background: #0f1930; } .course-roadmap__sheet-heading-curtain-layer--accent { z-index: 2; background: linear-gradient( 90deg, rgba(67, 199, 207, 0.14), rgba(22, 39, 67, 0.99) 18%, #15243d 100% ); } .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading, .course-roadmap__sheet.is-pathway-view .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading { transform: translate3d(0, 0, 0) !important; filter: none !important; } } /* ========================================================= EXCEL V4.3.9: docked desktop pathway pane, one live mobile heading slot, and level-coloured body curtain ========================================================= */ @media (min-width: 1024px) { /* The former floating popover is retired on desktop. */ .course-roadmap--microsoft .course-roadmap__pathway-popover { display: none !important; } .course-roadmap__desktop-panel-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; transition: grid-template-columns 420ms cubic-bezier(0.16, 1, 0.3, 1), gap 360ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__desktop-panel-body { min-width: 0; } .course-roadmap__desktop-panel.is-pathway-docked .course-roadmap__desktop-panel-layout { grid-template-columns: minmax(0, 1fr) minmax(342px, 390px); gap: 18px; padding: 18px 20px 22px 22px; } .course-roadmap__desktop-panel.is-pathway-docked .course-roadmap__desktop-panel-body .course-roadmap__reveal-content { padding: 0; } .course-roadmap__desktop-panel.is-pathway-docked .course-roadmap__course-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .course-roadmap__pathway-dock { position: sticky; z-index: 3; top: 18px; display: block; min-width: 0; max-height: calc(100vh - 36px); overflow: auto; overscroll-behavior: contain; color: #edf3fa; background: radial-gradient( ellipse 100% 86% at 8% 0%, rgba(67, 199, 207, 0.14) 0%, transparent 63% ), linear-gradient(158deg, #111e32 0%, #0b1628 54%, #08111f 100%); border: 1px solid rgba(211, 224, 240, 0.16); border-radius: 19px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.095), 0 18px 42px rgba(2, 8, 19, 0.28), 0 6px 18px rgba(19, 41, 78, 0.14); opacity: 0; filter: blur(3px); transform: translate3d(18px, 0, 0) scale(0.992); transform-origin: right center; transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.24, 1), filter 250ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1); } .course-roadmap__pathway-dock[hidden] { display: none !important; } .course-roadmap__pathway-dock.is-open { opacity: 1; filter: none; transform: translate3d(0, 0, 0) scale(1); } .course-roadmap__pathway-dock-accent { position: absolute; z-index: 2; top: 0; right: 24px; left: 24px; height: 3px; border-radius: 0 0 99px 99px; background: linear-gradient( 90deg, transparent 0%, rgba(89, 216, 162, 0.55) 20%, #43c7cf 48%, #4f7df3 80%, transparent 100% ); box-shadow: 0 3px 13px rgba(67, 199, 207, 0.28); pointer-events: none; } .course-roadmap__pathway-dock-header { position: sticky; z-index: 4; top: 0; display: flex; padding: 19px 18px 15px; align-items: flex-start; justify-content: space-between; gap: 16px; background: linear-gradient( 180deg, rgba(15, 28, 47, 0.99), rgba(12, 23, 40, 0.96) ); border-bottom: 1px solid rgba(207, 221, 239, 0.11); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .course-roadmap__pathway-dock-header p { margin: 0 0 5px; color: #65d5d9; font-size: 9.5px; line-height: 1.2; font-weight: 820; letter-spacing: 0.13em; text-transform: uppercase; } .course-roadmap__pathway-dock-header h3 { margin: 0; color: #f6f9fd; font-size: 20px; line-height: 1.22; font-weight: 730; letter-spacing: -0.015em; } .course-roadmap__pathway-dock-close { display: inline-grid; width: 34px; height: 34px; margin: 0; padding: 0; flex: 0 0 34px; place-items: center; color: rgba(231, 239, 248, 0.74); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(206, 220, 238, 0.13); border-radius: 50%; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .course-roadmap__pathway-dock-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .course-roadmap__pathway-dock-close:hover, .course-roadmap__pathway-dock-close:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.075); border-color: rgba(101, 213, 217, 0.34); } .course-roadmap__pathway-dock-close:focus-visible { outline: 2px solid #65d5d9; outline-offset: 2px; } .course-roadmap__pathway-dock-close:active { transform: scale(0.94); } .course-roadmap__pathway-dock-body { position: relative; min-height: 120px; padding: 17px 18px 22px; overflow: hidden; } .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card { border-color: rgba(var(--level-rgb), 0.64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(var(--level-rgb), 0.11), 0 9px 22px rgba(3, 10, 22, 0.24); } .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger { color: #ffffff; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.19), rgba(var(--level-rgb), 0.055) 78%, transparent ); } } @media (min-width: 1024px) and (max-width: 1199px) { .course-roadmap__desktop-panel.is-pathway-docked .course-roadmap__desktop-panel-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 356px); gap: 14px; padding-inline: 16px; } .course-roadmap__desktop-panel.is-pathway-docked .course-roadmap__course-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1023px) { /* Restore the original course-heading layers so Basic, Intermediate and Advanced retain the established carousel transition. The V4.3.9 live replacement and the visible text curtain are retired. */ .course-roadmap__sheet-live-heading, .course-roadmap__sheet-heading-transition { display: none !important; } .course-roadmap__sheet-live-heading { position: absolute; z-index: 6; inset: 0; display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; opacity: 1; filter: none; transform: translate3d(0, 0, 0); transform-origin: center; will-change: transform, opacity, clip-path, filter; } .course-roadmap__sheet-live-kicker { margin: 0; color: #67d5da; font-size: 9px; line-height: 1.1; font-weight: 820; letter-spacing: 0.14em; text-transform: uppercase; } .course-roadmap__sheet-live-title { display: block; min-width: 0; overflow: hidden; color: #f5f8fc; font-size: 22px; line-height: 1.18; font-weight: 730; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; } .course-roadmap__sheet-live-heading[data-heading-mode="course"] .course-roadmap__sheet-live-title > [data-course-sheet-live-level] { color: var(--level-color, #59d8a2); } .course-roadmap__sheet-live-heading[data-heading-mode="pathway"] .course-roadmap__sheet-live-title { color: #f5f8fc; } /* The large content curtain now belongs visually to the active level. */ .course-roadmap__view-curtain-layer--base { /* Every pixel resolves against an opaque navy base, so course and pathway content cannot be seen changing beneath the curtain. */ background: linear-gradient( 112deg, rgba(var(--level-rgb, 54, 190, 132), 0.58) 0%, rgba(var(--level-rgb, 54, 190, 132), 0.34) 42%, rgba(var(--level-rgb, 54, 190, 132), 0.09) 100% ), #071426; } .course-roadmap__view-curtain-layer--accent { background: linear-gradient( 90deg, rgba(var(--level-rgb, 54, 190, 132), 0.82) 0%, rgba(var(--level-rgb, 54, 190, 132), 0.52) 26%, rgba(var(--level-rgb, 54, 190, 132), 0.14) 100% ), #0a1930; box-shadow: -5px 0 20px rgba(var(--level-rgb, 54, 190, 132), 0.28); } } /* ========================================================= EXCEL V4.3.10: synchronised dock close, restored mobile course-title motion, and fully opaque level curtains ========================================================= */ @media (min-width: 1024px) { .course-roadmap__desktop-panel-layout { position: relative; } } @media (max-width: 1023px) { .course-roadmap__sheet-live-heading, .course-roadmap__sheet-heading-transition { display: none !important; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading, .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading { visibility: visible; pointer-events: auto; } .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-heading[aria-hidden="true"], .course-roadmap__sheet-heading-viewport > .course-roadmap__sheet-pathway-heading[aria-hidden="true"] { visibility: hidden; pointer-events: none; } .course-roadmap__sheet.is-course-heading-returning .course-roadmap__sheet-title-layer { transition: none !important; } .course-roadmap__view-curtain-layer { opacity: 1 !important; } } /* ========================================================= EXCEL V4.3.11: darker opaque mobile curtain, restored SVG pathway nodes/connectors, and triple pathway-card spacing ========================================================= */ /* The course boxes previously used a 12px gap. Triple it to 36px. */ .course-roadmap__pathway-detail-list, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-list { gap: 36px !important; } /* Both desktop dock and mobile pathway views use one SVG system. */ .course-roadmap__pathway-connectors { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .course-roadmap__pathway-connector-path { fill: none !important; stroke: #43c7cf !important; stroke-opacity: 1 !important; stroke-width: 2.5px !important; stroke-linecap: butt !important; stroke-linejoin: miter !important; filter: none !important; vector-effect: non-scaling-stroke; } .course-roadmap__pathway-node-circle, .course-roadmap__pathway-connector-node { fill: #10253a; stroke: #43c7cf; stroke-width: 2.5px; vector-effect: non-scaling-stroke; } .course-roadmap__pathway-node-circle.is-current, .course-roadmap__pathway-connector-node.is-current { fill: #43c7cf; } .course-roadmap__pathway-detail-step, .course-roadmap__pathway-detail-marker { position: relative; } .course-roadmap__pathway-detail-step { z-index: 3; } .course-roadmap__pathway-detail-marker { z-index: 5; color: #ffffff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } @media (max-width: 1023px) { /* Fully opaque, but substantially darker than V4.3.10. */ .course-roadmap__view-curtain-layer--base { background: linear-gradient( 112deg, rgba(var(--level-rgb, 54, 190, 132), 0.28) 0%, rgba(var(--level-rgb, 54, 190, 132), 0.16) 42%, rgba(var(--level-rgb, 54, 190, 132), 0.045) 100% ), #020a14 !important; opacity: 1 !important; } .course-roadmap__view-curtain-layer--accent { background: linear-gradient( 90deg, rgba(var(--level-rgb, 54, 190, 132), 0.46) 0%, rgba(var(--level-rgb, 54, 190, 132), 0.26) 28%, rgba(var(--level-rgb, 54, 190, 132), 0.07) 100% ), #04101f !important; box-shadow: -5px 0 18px rgba(var(--level-rgb, 54, 190, 132), 0.16) !important; opacity: 1 !important; } } /* ========================================================= EXCEL V4.3.12: corrected node containing block and 24px pathway-card spacing ========================================================= */ /* Reduce the pathway-card gap from 36px to 24px. */ .course-roadmap__pathway-detail-list, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-list { gap: 24px !important; } /* * V4.3.11 accidentally changed the marker from absolute to relative * positioning. That placed the node in document flow above each card, * while the card notch remained vertically centred. Restore the node as * an absolute overlay centred on its own pathway step. */ .course-roadmap__pathway-detail-marker, .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-marker, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-marker { position: absolute !important; top: 50% !important; left: calc( var(--pathway-node-center-x) - (var(--pathway-node-size) / 2) ) !important; transform: translateY(-50%) !important; } /* ========================================================= EXCEL V4.3.13: mobile pathway readability, rounded inset panel, and stronger directional Back navigation ========================================================= */ @media (max-width: 1023px) { /* The pathway body is visibly inset inside the rounded sheet. Round that inset panel as well so it belongs to the same shape language. */ .course-roadmap__sheet-pathway-view { border: 1px solid rgba(207, 222, 240, 0.13); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 16px 34px rgba(1, 7, 18, 0.17); } /* Preserve the compact, left-aligned Back control because its placement, arrow and the right-to-left return curtain all communicate reverse movement. Increase prominence without turning it into a full-width CTA. */ .course-roadmap__sheet-pathway-back { position: sticky; z-index: 9; top: 0; width: max-content; max-width: 100%; min-height: 50px; margin: 0 0 26px; padding: 7px 18px 7px 8px; gap: 10px; color: #ffffff; background: linear-gradient( 135deg, rgba(var(--level-rgb, 115, 160, 255), 0.24) 0%, rgba(var(--level-rgb, 115, 160, 255), 0.13) 58%, rgba(9, 20, 37, 0.94) 100% ); border: 1.5px solid rgba(var(--level-rgb, 115, 160, 255), 0.62); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 9px 24px rgba(2, 8, 18, 0.24), 0 0 18px rgba(var(--level-rgb, 115, 160, 255), 0.1); font-size: 16px; line-height: 1.2; font-weight: 760; letter-spacing: -0.01em; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .course-roadmap__sheet-pathway-back svg { width: 32px; height: 32px; padding: 6px; flex: 0 0 32px; background: rgba(var(--level-rgb, 115, 160, 255), 0.17); border: 1px solid rgba(var(--level-rgb, 115, 160, 255), 0.42); border-radius: 50%; stroke-width: 2.1; } .course-roadmap__sheet-pathway-back span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .course-roadmap__sheet-pathway-back:focus-visible { color: #ffffff; background: linear-gradient( 135deg, rgba(var(--level-rgb, 115, 160, 255), 0.31) 0%, rgba(var(--level-rgb, 115, 160, 255), 0.17) 60%, rgba(9, 20, 37, 0.96) 100% ); border-color: rgba(var(--level-rgb, 115, 160, 255), 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(2, 8, 18, 0.27), 0 0 22px rgba(var(--level-rgb, 115, 160, 255), 0.16); } .course-roadmap__sheet-pathway-back:focus-visible { outline: 3px solid rgba(var(--level-rgb, 115, 160, 255), 0.34); outline-offset: 3px; } /* Mobile pathway copy was materially smaller than the surrounding sheet typography. Bring it up to a comfortable reading size. */ .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-description { margin-bottom: 26px; font-size: 17px; line-height: 1.5; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-link { min-height: 96px; padding: 15px 15px 15px 39px; gap: 7px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta { font-size: 14px; line-height: 1.2; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta > span:last-child { font-size: 13.5px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-title { font-size: 15.5px; line-height: 1.4; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-marker span { font-size: 13.5px; line-height: 1; } /* Improve the pathway affordance on the course cards without changing the cards' overall navigation model. */ .course-roadmap--microsoft .course-roadmap__pathway-trigger { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-label { font-size: 14px; line-height: 1.25; } .course-roadmap__sheet-position-count { font-size: 13px; line-height: 1; } } @media (max-width: 640px) { .course-roadmap__sheet-pathway-view { border-radius: 20px; } .course-roadmap__sheet-pathway-back { min-height: 48px; padding-right: 15px; font-size: 15px; } .course-roadmap__sheet-pathway-back svg { width: 30px; height: 30px; flex-basis: 30px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-description { font-size: 16px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta { font-size: 13px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta > span:last-child, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-marker span { font-size: 12.5px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-title { font-size: 15px; } .course-roadmap--microsoft .course-roadmap__pathway-trigger-label { font-size: 12.5px; } .course-roadmap__sheet-position-count { font-size: 12px; } } /* ========================================================= EXCEL V4.3.14: pathway-title scale and mobile focus state ========================================================= */ @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view:focus { outline: none; } } /* Hover enhancement is available only where the device has a genuine fine pointer. Touch devices retain the resting Back-button treatment. */ @media (max-width: 1023px) and (hover: hover) and (pointer: fine) { .course-roadmap__sheet-pathway-back:hover { color: #ffffff; background: linear-gradient( 135deg, rgba(var(--level-rgb, 115, 160, 255), 0.31) 0%, rgba(var(--level-rgb, 115, 160, 255), 0.17) 60%, rgba(9, 20, 37, 0.96) 100% ); border-color: rgba(var(--level-rgb, 115, 160, 255), 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(2, 8, 18, 0.27), 0 0 22px rgba(var(--level-rgb, 115, 160, 255), 0.16); } } /* ========================================================= EXCEL V4.3.15: pathway start cue and stronger desktop selected-course hierarchy ========================================================= */ /* Reserve a small amount of space so the word “Start” sits above the first node without crowding the pathway description. The label is attached to the node, not the card, so it reads as the route's origin. */ .course-roadmap__pathway-detail-list, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-list { padding-top: 16px !important; } .course-roadmap__pathway-start-label { position: absolute; z-index: 7; top: 50%; left: var(--pathway-node-center-x); display: inline-block; color: #67d5da; font-size: 10.5px; line-height: 1; font-weight: 800; letter-spacing: 0.035em; white-space: nowrap; pointer-events: none; transform: translate( -50%, calc(-50% - (var(--pathway-node-size) / 2) - 10px) ); } /* Selection belongs to the whole course. The card carries the primary state, while the pathway control confirms which action owns the open detail pane. Duration metadata deliberately remains unchanged. */ @media (min-width: 1024px) { .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card { color: #ffffff; background: linear-gradient( 145deg, rgba(var(--level-rgb), 0.19) 0%, rgba(255, 255, 255, 0.052) 56%, rgba(var(--level-rgb), 0.075) 100% ); border-color: rgba(var(--level-rgb), 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(var(--level-rgb), 0.14), 0 0 0 2px rgba(var(--level-rgb), 0.18), 0 10px 24px rgba(3, 10, 22, 0.28), 0 0 20px rgba(var(--level-rgb), 0.13); transform: translateY(-1px); } .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card::after { opacity: 1; transform: scaleX(1); } .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger { color: #ffffff; background: linear-gradient( 90deg, rgba(var(--level-rgb), 0.34) 0%, rgba(var(--level-rgb), 0.17) 64%, rgba(var(--level-rgb), 0.07) 100% ); border-top-color: rgba(var(--level-rgb), 0.52); box-shadow: inset 4px 0 0 rgba(var(--level-rgb), 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.055); } .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger-prefix, .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger-chevron { color: rgb(var(--level-rgb)); } } @media (max-width: 1023px) { .course-roadmap__pathway-start-label { font-size: 12px; transform: translate( -50%, calc(-50% - (var(--pathway-node-size) / 2) - 11px) ); } } /* ========================================================= EXCEL V4.3.16: move the pathway Start cue to the route rail ========================================================= */ /* Position “Start” above the connector rail, immediately before the first numbered node. This makes it read as the pathway origin rather than as a label belonging to the first course card. The 18px value matches the rail offset used by the measured SVG connector geometry. */ .course-roadmap__pathway-start-label { left: calc( var(--pathway-node-center-x) - (var(--pathway-node-size) / 2) - 18px ); } /* ========================================================= EXCEL V4.3.17: lower Start cue and clean selected-card edge ========================================================= */ /* Bring “Start” closer to the route origin while retaining its position above the connector rail. */ .course-roadmap__pathway-start-label { transform: translate( -50%, calc(-50% - (var(--pathway-node-size) / 2) - 4px) ); } @media (max-width: 1023px) { .course-roadmap__pathway-start-label { transform: translate( -50%, calc(-50% - (var(--pathway-node-size) / 2) - 5px) ); } } /* Remove the hard 2px outer ring from the selected desktop course card. The level-coloured border, tint and soft glow still communicate selection, without leaving a second bright line beside the pathway control. */ @media (min-width: 1024px) { .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(var(--level-rgb), 0.14), 0 10px 24px rgba(3, 10, 22, 0.28), 0 0 20px rgba(var(--level-rgb), 0.13); } } /* ========================================================= EXCEL V4.3.18: lower Start cue by another 6px ========================================================= */ .course-roadmap__pathway-start-label { transform: translate( -50%, calc(-50% - (var(--pathway-node-size) / 2) + 2px) ); } @media (max-width: 1023px) { .course-roadmap__pathway-start-label { transform: translate( -50%, calc(-50% - (var(--pathway-node-size) / 2) + 1px) ); } } /* ========================================================= EXCEL V4.3.19: lock desktop close controls to circles ========================================================= */ /* HubSpot themes may apply broad button rules during hover, focus or press. Lock the main desktop course-panel close control to its intended circular geometry in every interaction state without changing its visual colours. */ .course-roadmap .course-roadmap__desktop-panel-close, .course-roadmap .course-roadmap__desktop-panel-close:hover, .course-roadmap .course-roadmap__desktop-panel-close:focus, .course-roadmap .course-roadmap__desktop-panel-close:focus-visible, .course-roadmap .course-roadmap__desktop-panel-close:active { display: inline-flex !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 38px !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; box-sizing: border-box !important; line-height: 0 !important; overflow: hidden !important; appearance: none !important; -webkit-appearance: none !important; } /* Apply the same protection to the docked desktop pathway-panel close control while preserving its intentionally smaller 34px size. */ .course-roadmap .course-roadmap__pathway-dock-close, .course-roadmap .course-roadmap__pathway-dock-close:hover, .course-roadmap .course-roadmap__pathway-dock-close:focus, .course-roadmap .course-roadmap__pathway-dock-close:focus-visible, .course-roadmap .course-roadmap__pathway-dock-close:active { display: inline-flex !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 34px !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; box-sizing: border-box !important; line-height: 0 !important; overflow: hidden !important; appearance: none !important; -webkit-appearance: none !important; } /* ========================================================= EXCEL V4.3.20: clean pathway-row right edge ========================================================= */ /* The course card's outer right border was visible beside the pathway control in both resting and selected states. On desktop, keep the right outline on the upper course-information section only, so the pathway row finishes cleanly without a stray vertical rule. */ @media (min-width: 1024px) { .course-roadmap--microsoft .course-roadmap__course-card { border-right-color: transparent; } .course-roadmap--microsoft .course-roadmap__course-card > .course-roadmap__course-link { border-right: 1px solid rgba(206, 220, 238, 0.11) !important; border-top-right-radius: 11px; } .course-roadmap--microsoft .course-roadmap__course-card:focus-within > .course-roadmap__course-link { border-right-color: rgba(var(--level-rgb), 0.46) !important; } .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card > .course-roadmap__course-link { border-right-color: rgba(var(--level-rgb), 0.9) !important; } } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .course-roadmap--microsoft .course-roadmap__course-card:hover > .course-roadmap__course-link { border-right-color: rgba(var(--level-rgb), 0.4) !important; } .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card:hover > .course-roadmap__course-link { border-right-color: rgba(var(--level-rgb), 0.9) !important; } } /* ========================================================= EXCEL V4.3.21: remove HubSpot pathway-trigger edge artefact ========================================================= */ /* HubSpot themes can attach borders, shadows, transforms or pseudo-elements to generic buttons in different interaction states. Lock the pathway control to one stable full-width rectangle and remove every unintended right-edge layer. */ @media (min-width: 1024px) { .course-roadmap .course-roadmap__pathway-trigger, .course-roadmap .course-roadmap__pathway-trigger:hover, .course-roadmap .course-roadmap__pathway-trigger:focus, .course-roadmap .course-roadmap__pathway-trigger:active, .course-roadmap .course-roadmap__pathway-trigger[aria-expanded="true"] { position: relative !important; right: auto !important; left: auto !important; display: grid !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; outline: 0 !important; filter: none !important; transform: none !important; background-clip: padding-box !important; -webkit-appearance: none !important; appearance: none !important; } .course-roadmap .course-roadmap__pathway-trigger::before, .course-roadmap .course-roadmap__pathway-trigger::after, .course-roadmap .course-roadmap__pathway-trigger:hover::before, .course-roadmap .course-roadmap__pathway-trigger:hover::after, .course-roadmap .course-roadmap__pathway-trigger:focus::before, .course-roadmap .course-roadmap__pathway-trigger:focus::after, .course-roadmap .course-roadmap__pathway-trigger:active::before, .course-roadmap .course-roadmap__pathway-trigger:active::after, .course-roadmap .course-roadmap__pathway-trigger[aria-expanded="true"]::before, .course-roadmap .course-roadmap__pathway-trigger[aria-expanded="true"]::after { display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; content: none !important; } /* Resting and hover states must not retain a theme box-shadow. */ .course-roadmap .course-roadmap__pathway-trigger, .course-roadmap .course-roadmap__pathway-trigger:hover, .course-roadmap .course-roadmap__pathway-trigger:focus, .course-roadmap .course-roadmap__pathway-trigger:active { box-shadow: none !important; } /* Restore only the intentional selected-state accents. */ .course-roadmap .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger, .course-roadmap .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger:hover, .course-roadmap .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger:focus, .course-roadmap .course-roadmap__course.is-pathway-dock-active .course-roadmap__pathway-trigger:active { box-shadow: inset 4px 0 0 rgba(var(--level-rgb), 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; } /* Keep a deliberate keyboard focus indicator without allowing HubSpot's generic focus treatment to alter the control's edge geometry. */ .course-roadmap .course-roadmap__pathway-trigger:focus-visible { outline: 2px solid rgba(var(--level-rgb), 0.9) !important; outline-offset: -2px !important; } } /* ========================================================= EXCEL V4.3.22: restore whole-card selected outline ========================================================= */ /* V4.3.21 confirmed that the shifting right-edge artefact came from a HubSpot-generated pathway-button state layer. Restore the course card's complete outer border and remove the temporary right border that had been placed on the upper course-information section only. */ @media (min-width: 1024px) { .course-roadmap--microsoft .course-roadmap__course-card { border-right-color: rgba(206, 220, 238, 0.11) !important; } .course-roadmap--microsoft .course-roadmap__course-card > .course-roadmap__course-link, .course-roadmap--microsoft .course-roadmap__course-card:focus-within > .course-roadmap__course-link, .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card > .course-roadmap__course-link { border-right: 0 !important; border-top-right-radius: 0 !important; } .course-roadmap--microsoft .course-roadmap__course-card:focus-within { border-right-color: rgba(var(--level-rgb), 0.46) !important; } .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card { border-right-color: rgba(var(--level-rgb), 0.9) !important; } } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .course-roadmap--microsoft .course-roadmap__course-card:hover { border-right-color: rgba(var(--level-rgb), 0.4) !important; } .course-roadmap__course.is-pathway-dock-active .course-roadmap__course-card:hover { border-right-color: rgba(var(--level-rgb), 0.9) !important; } } .ms-roadmap-suite, .ms-roadmap-suite * { box-sizing: border-box; } /* ========================================================= V2 SUITE PRESENTATION: SHARED HEADER, SLIDING SWITCHER, MEASURED PANEL TRANSITIONS AND UNIFIED MOBILE CARD HEIGHT ========================================================= */ .ms-roadmap-suite { --roadmap-navy: #173b70; --roadmap-text: #2d3642; --roadmap-muted: #647083; --suite-transition-easing: cubic-bezier(0.22, 0.72, 0.24, 1); position: relative; width: 100%; padding: 64px 24px; overflow-x: clip; background: radial-gradient( ellipse at 50% 46%, rgba(50, 92, 145, 0.055) 0%, transparent 46% ); } .ms-roadmap-suite__header { position: relative; z-index: 8; max-width: 900px; margin: 0 auto 50px; } .ms-roadmap-suite__title-row { position: relative; width: 100%; height: 48px; } .ms-roadmap-suite__title { position: absolute; top: 0; left: 50%; display: inline-flex; width: max-content; max-width: none; align-items: baseline; justify-content: center; white-space: nowrap; transform: translateX(-50%); transform-origin: 50% 50%; will-change: left, transform; } .ms-roadmap-suite__title-visual { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; } .ms-roadmap-suite__title-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); } .ms-roadmap-suite__title-phrase { position: relative; display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; } .ms-roadmap-suite__title-phrase:not(.is-ready) .ms-roadmap-suite__title-layer.is-current { position: relative; } .ms-roadmap-suite__title-phrase:not(.is-ready) .ms-roadmap-suite__title-layer.is-incoming { display: none; } .ms-roadmap-suite__title-phrase.is-ready .ms-roadmap-suite__title-layer { position: absolute; top: 0; left: 0; display: block; width: max-content; white-space: nowrap; will-change: opacity, transform; } .ms-roadmap-suite__title-phrase.is-ready .ms-roadmap-suite__title-layer.is-current { opacity: 1; transform: translateY(0); } .ms-roadmap-suite__title-phrase.is-ready .ms-roadmap-suite__title-layer.is-incoming { opacity: 0; transform: translateY(-112%); } .ms-roadmap-suite__title-suffix { white-space: pre; } .ms-roadmap-suite__viewport { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; overflow: visible; transition: height 460ms var(--suite-transition-easing); will-change: height; } .ms-roadmap-suite.is-switching .ms-roadmap-suite__viewport { overflow: hidden; } .ms-roadmap-suite__panel.course-roadmap { width: 100%; margin: 0; padding: 0; overflow: visible; background: none; } .ms-roadmap-suite__panel.is-active { position: relative; z-index: 2; visibility: visible; opacity: 1; pointer-events: auto; } .ms-roadmap-suite__panel:not(.is-active):not(.is-entering):not(.is-leaving) { position: absolute; z-index: 0; top: 0; right: 0; left: 0; visibility: hidden; opacity: 0; pointer-events: none; } .ms-roadmap-suite__panel.is-entering, .ms-roadmap-suite__panel.is-leaving { position: absolute; z-index: 3; top: 0; right: 0; left: 0; visibility: visible; pointer-events: none; will-change: opacity, transform; } .ms-roadmap-suite__panel.is-entering { z-index: 4; } /* Keep a useful no-JavaScript fallback. JavaScript removes hidden once ready. */ .ms-roadmap-suite:not(.is-suite-ready) .ms-roadmap-suite__panel[hidden] { display: none !important; } .ms-roadmap-suite.is-suite-ready .ms-roadmap-suite__panel[hidden] { display: block !important; } /* Sliding selected-state plate. */ .course-roadmap__roadmap-switcher { position: relative; isolation: isolate; } .course-roadmap__roadmap-switcher-indicator { position: absolute; z-index: 0; top: 5px; left: 5px; display: block; width: 0; height: 0; background: linear-gradient(135deg, #214f8f 0%, var(--roadmap-navy) 100%); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 5px 13px rgba(23, 59, 112, 0.22); opacity: 0; pointer-events: none; transition: left 340ms var(--suite-transition-easing), top 340ms var(--suite-transition-easing), width 340ms var(--suite-transition-easing), height 340ms var(--suite-transition-easing), opacity 180ms ease; } .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switcher-indicator { opacity: 1; } .course-roadmap__roadmap-switch { position: relative; z-index: 1; } .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"] { background: transparent; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):hover { background: rgba(255, 255, 255, 0.62); } } /* Balanced copy blocks give every mobile card the same visual rhythm. */ @media (max-width: 1023px) { .ms-roadmap-suite { top: 80px; margin-bottom: 100px; padding: 52px 20px; } .ms-roadmap-suite__header { margin-bottom: 34px; } .ms-roadmap-suite__title-row { height: 44px; } .ms-roadmap-suite__panel.course-roadmap { top: auto; margin: 0; padding: 0; } .ms-roadmap-suite__panel .course-roadmap__ai-mobile { margin-top: 0; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card { min-height: 0; height: var( --suite-mobile-card-height, var(--mobile-uniform-card-height, auto) ); } .ms-roadmap-suite .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot .ai-stage { height: var( --suite-mobile-card-height, var(--mobile-uniform-card-height, auto) ); } .ms-roadmap-suite .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__deck { height: var( --suite-mobile-deck-height, var(--mobile-deck-height, 620px) ); } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card-purpose { margin-top: 14px; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card-audience { margin-top: 10px; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card-footer { padding-top: 20px; } .ms-roadmap-suite.is-measuring-cards .course-roadmap .course-roadmap__ai-card, .ms-roadmap-suite.is-measuring-cards .course-roadmap .ai-roadmap.is-enhanced .ai-roadmap__stage-slot .ai-stage { height: auto !important; } } @media (max-width: 640px) { .ms-roadmap-suite { padding: 44px 16px; } .ms-roadmap-suite__header { margin-bottom: 35px; } .ms-roadmap-suite__title-row { height: 68px; } .ms-roadmap-suite__title, .ms-roadmap-suite__title-visual { width: 100%; } .ms-roadmap-suite__title-visual { flex-direction: column; align-items: center; line-height: 1; } .ms-roadmap-suite__title-phrase { max-width: 100%; height: 1.24em; font-size: 22px; line-height: 1.24; letter-spacing: -0.015em; } .ms-roadmap-suite__title-suffix { margin-top: 3px; font-size: 33px; line-height: 1.15; letter-spacing: -0.02em; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card { padding: 24px 22px 22px; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card .ai-stage__header h3 { font-size: 23.5px; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card-purpose { font-size: 16px; } .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card-audience { font-size: 14.5px; } .course-roadmap__roadmap-switcher-indicator { border-radius: 14px; } } @media (prefers-reduced-motion: reduce) { .ms-roadmap-suite__viewport, .course-roadmap__roadmap-switcher-indicator { transition-duration: 20ms !important; } } /* ========================================================= V3 SUITE PRESENTATION CORRECTIONS Stable heading alignment, text-only roadmap changes and no full-panel slide or switch-time mobile remeasurement. ========================================================= */ /* The title is centred by layout, not by an animated absolute left value. */ .ms-roadmap-suite__title-row { display: flex; height: 52px; align-items: center; justify-content: center; } .ms-roadmap-suite__title { position: relative; top: auto; left: auto; display: flex; width: 100%; max-width: 100%; align-items: center; justify-content: center; transform: none; will-change: auto; } .ms-roadmap-suite__title-visual { display: inline-flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; line-height: 1.2; white-space: nowrap; } .ms-roadmap-suite__title-phrase { position: relative; display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2; vertical-align: middle; } .ms-roadmap-suite__title-phrase.is-ready .ms-roadmap-suite__title-layer { top: 0; display: flex; height: 100%; align-items: center; line-height: 1.2; } .ms-roadmap-suite__title-suffix { display: inline-flex; height: 1.2em; align-items: center; line-height: 1.2; white-space: pre; } /* The roadmap panels no longer travel across the viewport. */ .ms-roadmap-suite__viewport, .ms-roadmap-suite.is-switching .ms-roadmap-suite__viewport { overflow: visible; transition: none; will-change: auto; } .ms-roadmap-suite__panel.is-entering, .ms-roadmap-suite__panel.is-leaving { transform: none !important; transition: none !important; } /* Render the destination panel invisibly so its mobile carousel settles before the atomic panel swap. */ .ms-roadmap-suite__panel.is-preparing { position: absolute; z-index: 1; top: 0; right: 0; left: 0; display: block !important; visibility: visible !important; opacity: 0.001 !important; pointer-events: none !important; transform: none !important; } /* Only the wording receives motion during a roadmap change. */ .ms-roadmap-suite.is-switching .course-roadmap__summary-body, .ms-roadmap-suite.is-switching .course-roadmap__ai-card .ai-stage__header-content h3, .ms-roadmap-suite.is-switching .course-roadmap__ai-card-copy { will-change: opacity, transform; } @media (max-width: 640px) { .ms-roadmap-suite__title-row { height: 72px; } .ms-roadmap-suite__title, .ms-roadmap-suite__title-visual { width: 100%; } .ms-roadmap-suite__title-visual { flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .ms-roadmap-suite__title-phrase { max-width: 100%; height: 1.22em; font-size: 20px; line-height: 1.22; letter-spacing: -0.015em; } .ms-roadmap-suite__title-phrase.is-ready .ms-roadmap-suite__title-layer { justify-content: center; line-height: 1.22; } .ms-roadmap-suite__title-suffix { height: auto; margin-top: 2px; font-size: 33px; line-height: 1.15; letter-spacing: -0.02em; } } @media (prefers-reduced-motion: reduce) { .ms-roadmap-suite__title-phrase, .ms-roadmap-suite__title-layer, .course-roadmap__roadmap-switcher-indicator { transition-duration: 0.01ms !important; } } /* ========================================================= V4 SUITE REFINEMENTS Equal desktop title rows, staged heading geometry and stable mobile side-card depth during roadmap changes. ========================================================= */ @media (min-width: 1024px) { /* Reserve two title lines in every summary card. One-line titles retain the second line as deliberate breathing room, so every roadmap keeps the same desktop summary-row height. */ .ms-roadmap-suite .course-roadmap__summary-body > h3 { min-height: 2.44em; } } /* During a suite change, animate only descendants whose opacity is not the mobile orbit's own depth cue. Parent orbit opacity/filter remains untouched. */ .ms-roadmap-suite.is-switching .course-roadmap__ai-card-purpose, .ms-roadmap-suite.is-switching .course-roadmap__ai-card-audience { will-change: opacity, transform; } /* ========================================================= V5 MOBILE HEADING AND SWITCHER REFINEMENTS Equal mobile card-title rows, one 31px heading scale and a dark glass segmented control with a measured moving plate. ========================================================= */ /* Match the roadmap cards' dark layered visual language. */ .course-roadmap__roadmap-switcher { padding: 6px; gap: 6px; overflow: hidden; background: radial-gradient( ellipse 92% 135% at 50% -22%, rgba(73, 116, 255, 0.14) 0%, transparent 62% ), linear-gradient( 160deg, #111d31 0%, #0c1628 52%, #09111f 100% ); border-color: rgba(206, 220, 238, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -1px 0 rgba(4, 11, 24, 0.44), 0 12px 30px rgba(19, 41, 78, 0.16); } .course-roadmap__roadmap-switcher::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient( 110deg, rgba(255, 255, 255, 0.035) 0%, transparent 38%, rgba(115, 160, 255, 0.035) 100% ); content: ""; pointer-events: none; } .course-roadmap__roadmap-switcher-indicator { overflow: hidden; background: radial-gradient( ellipse 90% 100% at 50% 112%, rgba(73, 116, 255, 0.26) 0%, transparent 68% ), linear-gradient( 145deg, rgba(42, 83, 145, 0.98) 0%, rgba(17, 36, 68, 0.98) 58%, rgba(10, 22, 42, 0.99) 100% ); border: 1px solid rgba(115, 160, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(115, 160, 255, 0.14), 0 7px 17px rgba(3, 10, 22, 0.34), 0 0 17px rgba(73, 116, 255, 0.11); transition: left 300ms var(--suite-transition-easing), top 300ms var(--suite-transition-easing), width 300ms var(--suite-transition-easing), height 300ms var(--suite-transition-easing), opacity 160ms ease; } .course-roadmap__roadmap-switcher-indicator::after { position: absolute; right: 10%; bottom: 0; left: 10%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(115, 160, 255, 0.78) 50%, transparent 100% ); box-shadow: 0 -4px 11px rgba(73, 116, 255, 0.18); content: ""; pointer-events: none; } .course-roadmap__roadmap-switch { min-height: 44px; color: rgba(226, 235, 246, 0.74); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"] { color: #ffffff; text-shadow: 0 1px 8px rgba(115, 160, 255, 0.16); } @media (hover: hover) and (pointer: fine) { .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):hover { color: rgba(248, 251, 255, 0.96); background: rgba(115, 160, 255, 0.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); } } .course-roadmap__roadmap-switch:focus-visible { outline: 2px solid rgba(115, 160, 255, 0.88); outline-offset: -2px; } @media (max-width: 760px) { .course-roadmap__roadmap-switcher { padding: 6px; gap: 6px; border-radius: 20px; } .course-roadmap__roadmap-switcher-indicator { border-radius: 14px; } .course-roadmap__roadmap-switch { min-height: 50px; color: rgba(226, 235, 246, 0.76); border-radius: 14px; font-size: 13px; } } @media (max-width: 1023px) { .ms-roadmap-suite__title-visual { font-size: 31px; line-height: 1.08; } .ms-roadmap-suite__title-phrase, .ms-roadmap-suite__title-suffix { font-size: inherit; line-height: 1.08; } /* Reserve at least two lines for every Basic, Intermediate and Advanced mobile card title. Longer titles can still grow to a third line. */ .ms-roadmap-suite .course-roadmap .course-roadmap__ai-card .ai-stage__header h3 { min-height: 2.44em; } } @media (max-width: 640px) { /* Both parts of the title use the same 31px scale. The phrase reserves two lines so the longest roadmap can wrap without shrinking or clipping. */ .ms-roadmap-suite__title-row { height: 104px; } .ms-roadmap-suite__title, .ms-roadmap-suite__title-visual { width: 100%; max-width: 100%; } .ms-roadmap-suite__title-visual { flex-direction: column; align-items: center; justify-content: flex-end; font-size: 31px; line-height: 1.08; } .ms-roadmap-suite__title-phrase { width: 100% !important; max-width: 100%; height: 2.16em; min-height: 2.16em; overflow: hidden; font-size: inherit; line-height: 1.08; letter-spacing: -0.02em; text-align: center; } .ms-roadmap-suite__title-phrase.is-ready .ms-roadmap-suite__title-layer { width: 100%; max-width: 100%; height: 100%; align-items: flex-end; justify-content: center; padding: 0 4px; white-space: normal; line-height: 1.08; text-align: center; text-wrap: balance; } .ms-roadmap-suite__title-suffix { height: auto; margin-top: 2px; font-size: inherit; line-height: 1.08; letter-spacing: -0.02em; } } /* ========================================================= V6 SWITCHER MOTION AND SHARED ROADMAP STAGE The selected plate now travels with translate3d rather than snapping left/top. A compact atmospheric bridge removes the white visual break between the selector and roadmap cards. ========================================================= */ /* Bring the selector and cards into one visual composition without physically welding their rounded borders together. */ .ms-roadmap-suite__header { margin-bottom: 14px; } .ms-roadmap-suite__viewport { isolation: isolate; border-radius: 30px; background: radial-gradient( ellipse 82% 118px at 50% 0%, rgba(49, 93, 158, 0.105) 0%, rgba(49, 93, 158, 0.042) 42%, transparent 78% ); } .ms-roadmap-suite__viewport::before { position: absolute; z-index: 0; top: -34px; right: 5%; left: 5%; height: 82px; border-radius: 50%; background: radial-gradient( ellipse at 50% 50%, rgba(53, 101, 174, 0.13) 0%, rgba(53, 101, 174, 0.052) 43%, transparent 76% ); content: ""; pointer-events: none; } .ms-roadmap-suite__panel { position: relative; z-index: 1; } /* Use a single transform-driven plate like the supplied tab example. Width and height still interpolate when the responsive grid changes. */ .course-roadmap__roadmap-switcher-indicator { top: 0; left: 0; transform: translate3d( var(--roadmap-indicator-x, 6px), var(--roadmap-indicator-y, 6px), 0 ); transition: transform 340ms var(--suite-transition-easing), width 340ms var(--suite-transition-easing), height 340ms var(--suite-transition-easing), opacity 160ms ease; will-change: transform, width, height; } .course-roadmap__roadmap-switcher-indicator.is-positioning { transition: none !important; } /* The selected label should read with the same high contrast as selected roadmap content rather than looking greyed by the glass surface. */ .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"] { color: #ffffff !important; font-weight: 800; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42), 0 0 8px rgba(255, 255, 255, 0.16), 0 0 14px rgba(115, 160, 255, 0.2); } @media (max-width: 1023px) { .ms-roadmap-suite__header { margin-bottom: 16px; } .ms-roadmap-suite__viewport::before { top: -32px; right: 2%; left: 2%; height: 78px; } } @media (max-width: 640px) { .ms-roadmap-suite__header { margin-bottom: 12px; } .course-roadmap__roadmap-switcher { margin-top: 17px; } .ms-roadmap-suite__viewport { border-radius: 26px; background: radial-gradient( ellipse 104% 112px at 50% 0%, rgba(49, 93, 158, 0.115) 0%, rgba(49, 93, 158, 0.048) 45%, transparent 79% ); } .ms-roadmap-suite__viewport::before { top: -28px; right: 0; left: 0; height: 70px; } } @media (prefers-reduced-motion: reduce) { .course-roadmap__roadmap-switcher-indicator { transition-duration: 20ms !important; } } /* ========================================================= V7 SAMPLE-STYLE ROADMAP SWITCHER A white-stage control with a compact rounded-rectangle active plate. Desktop and mobile use the same transform, dimensions, duration and easing. ========================================================= */ /* The selector now disappears into the page background. Only the moving dark-navy plate and labels remain visible, matching the supplied example. */ .course-roadmap__roadmap-switcher { width: min(100%, 860px); margin-top: 18px; padding: 10px; gap: 8px; overflow: visible; background: transparent; border: 0; border-radius: 20px; box-shadow: none; } .course-roadmap__roadmap-switcher::before { display: none; content: none; } .course-roadmap__roadmap-switch { height: 44px; min-height: 44px; padding: 10px 12px; color: var(--roadmap-navy); background: transparent; border-radius: 12px; font-size: 13px; line-height: 1.15; font-weight: 700; text-shadow: none; transition: color 180ms ease, background 180ms ease, transform 150ms ease; } /* Keep font metrics identical between selected and unselected states. This prevents mobile row reflow from triggering an immediate indicator reset. */ .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"] { color: #ffffff !important; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34); } .course-roadmap__roadmap-switcher-indicator { overflow: hidden; border: 0; border-radius: 12px; background: linear-gradient( 90deg, #274f82 0%, #173b70 46%, #0b274d 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), inset 0 -1px 0 rgba(4, 16, 35, 0.32), 0 5px 13px rgba(23, 59, 112, 0.24); transition: transform 300ms ease, width 300ms ease, height 300ms ease, opacity 150ms ease; } .course-roadmap__roadmap-switcher-indicator::after { display: none; content: none; } .course-roadmap__roadmap-switcher-indicator.is-positioning { transition: none !important; } @media (hover: hover) and (pointer: fine) { .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):hover { color: #0f315d; background: rgba(23, 59, 112, 0.055); box-shadow: none; transform: none; } } .course-roadmap__roadmap-switch:focus-visible { outline: 2px solid rgba(23, 59, 112, 0.48); outline-offset: 1px; } /* Remove the blue atmospheric bridge. The selector and its gap now share the same white page surface, so there is no separate block between tabs and cards. */ .ms-roadmap-suite__viewport { background: transparent; } .ms-roadmap-suite__viewport::before { display: none; content: none; } .ms-roadmap-suite__header { margin-bottom: 10px; } @media (max-width: 760px) { .course-roadmap__roadmap-switcher { margin-top: 16px; padding: 10px; gap: 8px; grid-auto-rows: 50px; border-radius: 20px; } .course-roadmap__roadmap-switch { width: 100%; height: 50px; min-height: 50px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.15; font-weight: 700; } .course-roadmap__roadmap-switcher-indicator { border-radius: 12px; } .ms-roadmap-suite__header { margin-bottom: 8px; } } @media (max-width: 420px) { .course-roadmap__roadmap-switch { padding-right: 7px; padding-left: 7px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .course-roadmap__roadmap-switcher-indicator { transition-duration: 20ms !important; } } /* ========================================================= V8 TOGGLE TYPOGRAPHY AND INTERACTION CLEANUP Larger labels, no hover fill/lift, no external focus ring, and delayed destination-label highlighting while the plate moves. ========================================================= */ /* Larger, easier-to-read labels without changing the sample-style shape. */ .course-roadmap__roadmap-switch { height: 48px; min-height: 48px; padding: 11px 14px; color: var(--roadmap-navy); font-size: 16px; line-height: 1.2; font-weight: 700; text-shadow: none; -webkit-tap-highlight-color: transparent; transition: color 110ms ease; } /* Remove all pointer-hover decoration. The moving navy plate is the only selected-state treatment, on desktop and mobile. */ @media (hover: hover) and (pointer: fine) { .course-roadmap__roadmap-switch:hover, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):hover { color: var(--roadmap-navy) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; } } /* Do not retain an outer ring after pointer or touch activation. Keyboard users still receive a restrained inset focus cue that never sits outside the selected plate. */ .course-roadmap__roadmap-switch, .course-roadmap__roadmap-switch:focus, .course-roadmap__roadmap-switch:active { outline: 0 !important; outline-offset: 0 !important; border: 0 !important; transform: none !important; } .course-roadmap__roadmap-switch:focus-visible { outline: 0 !important; outline-offset: 0 !important; box-shadow: inset 0 0 0 2px rgba(23, 59, 112, 0.34) !important; } .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active:focus-visible, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42) !important; } /* The destination label stays navy for the first part of the plate's travel, then changes to white as the plate arrives. The label animation shares the indicator's 300ms duration, so touch and desktop stay aligned. */ @keyframes roadmapToggleLabelArrive { 0%, 64% { color: var(--roadmap-navy); text-shadow: none; } 100% { color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34); } } .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch[aria-pressed="true"] { color: var(--roadmap-navy) !important; text-shadow: none !important; animation: roadmapToggleLabelArrive 300ms ease both; } .ms-roadmap-suite:not(.is-indicator-moving) .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite:not(.is-indicator-moving) .course-roadmap__roadmap-switch[aria-pressed="true"] { color: #ffffff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34) !important; } @media (max-width: 760px) { .course-roadmap__roadmap-switcher { grid-auto-rows: 56px; } .course-roadmap__roadmap-switch { height: 56px; min-height: 56px; padding: 9px 10px; font-size: 15px; line-height: 1.18; } } @media (max-width: 380px) { .course-roadmap__roadmap-switch { padding-right: 7px; padding-left: 7px; font-size: 14px; } } /* V8.1 focus and mobile typography refinement. Pointer/touch focus never draws a border around the moving plate. Keyboard focus uses an underline instead, which remains accessible without creating a second rectangle. */ .course-roadmap__roadmap-switch:focus-visible, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active:focus-visible, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"]:focus-visible { outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } @media (max-width: 760px) { .course-roadmap__roadmap-switch { font-size: 16px; } } @media (max-width: 380px) { .course-roadmap__roadmap-switch { font-size: 15px; } } /* ========================================================= V9 MOBILE TOGGLE AND MOTION POLISH The button itself never paints a selected surface. Only the shared navy indicator is visible, including during touch focus. ========================================================= */ /* Neutralise browser, theme and legacy selected-state painting on every interaction state. This prevents a second, lighter-blue rectangle from appearing beneath the destination label before the indicator arrives. */ .course-roadmap__roadmap-switch, .course-roadmap__roadmap-switch:hover, .course-roadmap__roadmap-switch:focus, .course-roadmap__roadmap-switch:focus-visible, .course-roadmap__roadmap-switch:active, .course-roadmap__roadmap-switch.is-active, .course-roadmap__roadmap-switch[aria-pressed="true"], .course-roadmap__roadmap-switch.is-indicator-target { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; outline: 0 !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; touch-action: manipulation; } /* The old label relinquishes its white colour as the plate leaves. The new label remains navy until the plate is almost home, then becomes white. Visual selection is therefore synchronised with the travelling plate. */ @keyframes roadmapToggleLabelDepartV9 { 0%, 18% { color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34); } 58%, 100% { color: var(--roadmap-navy); text-shadow: none; } } @keyframes roadmapToggleLabelArriveV9 { 0%, 68% { color: var(--roadmap-navy); text-shadow: none; } 100% { color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34); } } .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch.is-active:not(.is-indicator-target) { animation: roadmapToggleLabelDepartV9 300ms ease both !important; } .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch.is-indicator-target { color: var(--roadmap-navy) !important; text-shadow: none !important; animation: roadmapToggleLabelArriveV9 300ms ease both !important; } /* The target is not marked visually active until the indicator completes. This also blocks theme rules keyed to aria-pressed or .is-active. */ .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch.is-indicator-target:not(.is-active) { background: transparent !important; } /* Balance the visible white space around the mobile selector. Its 10px inner padding is present above and below the plate, so equal outer margins create equal optical distance from the heading and the centre card. */ @media (max-width: 760px) { .course-roadmap__roadmap-switcher { margin-top: 10px; } .ms-roadmap-suite__header { margin-bottom: 10px; } } /* Keep the mobile indicator on its own composited layer. This makes diagonal and row-to-row travel as smooth as the desktop horizontal glide. */ @media (max-width: 760px) { .course-roadmap__roadmap-switcher-indicator { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; } } @media (max-width: 380px) { .course-roadmap__sheet .course-roadmap__course-title { font-size: 15px; } } /* ========================================================= V12 MOBILE PATHWAY CARD SCALE REBALANCE Brings pathway cards closer to the ordinary mobile course-card scale while preserving comfortable reading sizes for the longer descriptions. ========================================================= */ @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-description { margin-bottom: 22px; font-size: 16px; line-height: 1.5; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-link { min-height: 88px; padding: 13px 14px 13px 39px; gap: 6px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta { font-size: 12.5px; line-height: 1.2; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta > span:last-child, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-marker span { font-size: 12.5px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-title { font-size: 15.5px; line-height: 1.4; } } @media (max-width: 640px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-description { font-size: 15.5px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-meta > span:last-child, .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-marker span { font-size: 12px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail-title { font-size: 15px; } } /* ========================================================= V13 PATHWAY SELECTION TYPOGRAPHY HIERARCHY Keeps every pathway step readable while reserving full-white emphasis for the course that opened the pathway view. ========================================================= */ .course-roadmap__pathway-detail-title, .course-roadmap__pathway-detail-meta, .course-roadmap__pathway-detail-meta > span { transition: color 180ms ease; } /* Unselected pathway steps remain clearly readable, but sit behind the current course in the visual hierarchy. Applies to desktop and mobile. */ .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-title { color: rgba(239, 244, 250, 0.80); } .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-meta, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-meta > span, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-meta > span:last-child { color: rgba(205, 218, 234, 0.58); } /* The selected course receives the strongest text contrast, reinforcing the existing border, background and node treatment. */ .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-title { color: #ffffff; } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-meta, .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-meta > span { color: rgba(232, 240, 249, 0.82); } .course-roadmap__pathway-detail-step.is-current .course-roadmap__pathway-detail-meta > span:last-child { color: rgba(232, 240, 249, 0.76); } /* On pointer devices, an unselected step brightens only while it is being considered. It returns to the quieter value when the pointer leaves. */ @media (hover: hover) and (pointer: fine) { .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-link:hover .course-roadmap__pathway-detail-title, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-link:focus-visible .course-roadmap__pathway-detail-title { color: rgba(248, 251, 255, 0.94); } .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-link:hover .course-roadmap__pathway-detail-meta, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-link:hover .course-roadmap__pathway-detail-meta > span, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-link:focus-visible .course-roadmap__pathway-detail-meta, .course-roadmap__pathway-detail-step:not(.is-current) .course-roadmap__pathway-detail-link:focus-visible .course-roadmap__pathway-detail-meta > span { color: rgba(222, 232, 244, 0.74); } } /* ========================================================= V13 INTRINSIC PRODUCTIVITY ROADMAP SWITCHER The real HTML uses four flat buttons. Two lightweight row wrappers are added in the HTML only to guarantee an exact 2 x 2 layout on mobile. Desktop flattens those wrappers with display: contents so all four tabs form one compact intrinsic-width row. ========================================================= */ .ms-roadmap-suite__switch-row { display: contents; } .ms-roadmap-suite .course-roadmap__roadmap-switch { display: inline-flex; width: max-content; min-width: 0; max-width: none; height: auto; min-height: 44px; padding: 10px 14px; align-items: center; justify-content: center; flex: 0 0 auto; white-space: nowrap; text-align: center; } /* Desktop: one compact row. Each button is only as wide as its label. */ @media (min-width: 761px) { .ms-roadmap-suite .course-roadmap__roadmap-switcher { display: flex; width: fit-content; max-width: calc(100% - 40px); margin-right: auto; margin-left: auto; padding: 8px; gap: 8px; flex-flow: row nowrap; align-items: center; justify-content: center; grid-template-columns: none; grid-auto-rows: auto; } .ms-roadmap-suite .ms-roadmap-suite__switch-row { display: contents; } .ms-roadmap-suite .course-roadmap__roadmap-switch { min-height: 44px; padding: 10px 14px; white-space: nowrap; } .ms-roadmap-suite .course-roadmap__roadmap-switch[data-roadmap-switch="collaboration"] { max-width: none; white-space: nowrap; } } /* Mobile: exactly two compact rows, with content-width buttons inside each row. The rows themselves centre independently, like the supplied flex-tab example, so short labels do not inherit the width of the long label. */ @media (max-width: 760px) { .ms-roadmap-suite .course-roadmap__roadmap-switcher { display: flex; width: fit-content; max-width: calc(100% - 20px); margin-right: auto; margin-left: auto; padding: 6px; gap: 8px; flex-direction: column; align-items: center; justify-content: center; grid-template-columns: none; grid-auto-rows: auto; } .ms-roadmap-suite .ms-roadmap-suite__switch-row { display: flex; width: max-content; max-width: 100%; gap: 8px; align-items: center; justify-content: center; } .ms-roadmap-suite .course-roadmap__roadmap-switch { width: max-content; max-width: none; min-height: 40px; padding: 9px 14px; font-size: 16px; line-height: 1.15; white-space: nowrap; } .ms-roadmap-suite .course-roadmap__roadmap-switch[data-roadmap-switch="collaboration"] { width: max-content; max-width: 148px; padding-right: 12px; padding-left: 12px; white-space: normal; text-wrap: balance; } } @media (max-width: 360px) { .ms-roadmap-suite .course-roadmap__roadmap-switch { padding-right: 12px; padding-left: 12px; font-size: 15px; } .ms-roadmap-suite .course-roadmap__roadmap-switch[data-roadmap-switch="collaboration"] { max-width: 140px; padding-right: 10px; padding-left: 10px; } } /* ========================================================= V14 SAMPLE-FAITHFUL TOGGLE INTERACTION The moving plate and label colours now change together, like the supplied reference tabs. There is no delayed label choreography and no pointer/touch press styling. Font metrics remain identical in every state. ========================================================= */ .ms-roadmap-suite .course-roadmap__roadmap-switch, .ms-roadmap-suite .course-roadmap__roadmap-switch:hover, .ms-roadmap-suite .course-roadmap__roadmap-switch:focus, .ms-roadmap-suite .course-roadmap__roadmap-switch:active, .ms-roadmap-suite .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite .course-roadmap__roadmap-switch[aria-pressed="true"], .ms-roadmap-suite .course-roadmap__roadmap-switch.is-indicator-target { font-weight: 700 !important; font-variation-settings: normal; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; text-shadow: none !important; transform: none !important; -webkit-tap-highlight-color: transparent !important; transition: color 300ms ease !important; } /* Unselected labels remain navy in every pointer/touch state. */ .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active), .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):hover, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):focus, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch:not(.is-active):active { color: var(--roadmap-navy) !important; } /* Selected labels are white immediately when selection changes. The 300ms colour transition runs at the same time as the plate movement, rather than waiting for the plate to arrive. */ .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"], .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active:hover, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active:focus, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active:active, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"]:active { color: #ffffff !important; font-weight: 700 !important; text-shadow: none !important; animation: none !important; } /* Neutralise the older V8/V9 delayed-arrival animations if stale classes are present for a frame during a rapid series of taps. */ .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch, .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch.is-active, .ms-roadmap-suite.is-indicator-moving .course-roadmap__roadmap-switch.is-indicator-target { animation: none !important; } /* Keep keyboard accessibility without adding a mouse/touch press effect. */ .ms-roadmap-suite .course-roadmap__roadmap-switch:focus-visible { outline: 2px solid rgba(23, 59, 112, 0.42) !important; outline-offset: 2px !important; text-decoration: none !important; } .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch.is-active:focus-visible, .ms-roadmap-suite.is-switcher-ready .course-roadmap__roadmap-switch[aria-pressed="true"]:focus-visible { outline-color: rgba(255, 255, 255, 0.68) !important; } @media (min-width: 1024px) { .ms-roadmap-suite:not(.data-roadmap-suite) .course-roadmap__summary { height: var(--suite-desktop-summary-height, auto); min-height: var(--suite-desktop-summary-height, 306px); } } /* ========================================================= NETWORK MANAGEMENT V2: shared-core specialisation pathways ========================================================= */ .course-roadmap__pathway-detail--specialisation { display: grid; gap: 16px; } .course-roadmap__pathway-detail--specialisation .course-roadmap__pathway-detail-description { margin-bottom: 0; } .course-roadmap__specialisation-core { position: relative; padding: 14px; background: rgba(8, 20, 35, 0.62); border: 1px solid rgba(144, 184, 215, 0.16); border-radius: 15px; } .course-roadmap__specialisation-section-heading { display: flex; margin-bottom: 12px; align-items: flex-start; justify-content: space-between; gap: 12px; } .course-roadmap__specialisation-section-heading > span, .course-roadmap__specialisation-route-kicker { color: #70d9dc; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .course-roadmap__specialisation-section-heading p { margin: 0; max-width: 220px; color: rgba(225, 235, 246, 0.68); font-size: 11px; line-height: 1.45; text-align: right; } .course-roadmap__specialisation-core-flow { display: grid; gap: 18px; } .course-roadmap__specialisation-course { position: relative; display: grid; min-width: 0; grid-template-columns: 36px minmax(0, 1fr); align-items: stretch; } .course-roadmap__specialisation-route .course-roadmap__specialisation-course { display: block; } .course-roadmap__specialisation-core-flow .course-roadmap__specialisation-course:not(:last-child)::after { position: absolute; z-index: 1; bottom: -15px; left: 17px; width: 8px; height: 8px; border-right: 2px solid rgba(86, 210, 213, 0.72); border-bottom: 2px solid rgba(86, 210, 213, 0.72); content: ""; transform: rotate(45deg); } .course-roadmap__specialisation-sequence { position: relative; z-index: 2; display: grid; width: 34px; height: 34px; margin-top: 13px; place-items: center; color: #bfecef; background: #10253a; border: 1px solid rgba(83, 209, 213, 0.56); border-radius: 50%; box-shadow: 0 0 0 3px rgba(8, 17, 31, 0.72); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; } .course-roadmap__specialisation-course-link { position: relative; display: grid; min-width: 0; padding: 11px 12px 12px; gap: 6px; color: #edf3fa; text-decoration: none; background: linear-gradient(145deg, rgba(28, 48, 73, 0.76), rgba(13, 27, 47, 0.82)); border: 1px solid rgba(207, 221, 239, 0.13); border-radius: 12px; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .course-roadmap__specialisation-course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; color: rgba(194, 212, 231, 0.76); font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .course-roadmap__specialisation-course-meta > span + span::before { margin-right: 9px; color: rgba(123, 154, 184, 0.54); content: "•"; } .course-roadmap__specialisation-route-step { color: #6fd8db !important; } .course-roadmap__specialisation-course-title { color: #f3f7fb; font-size: 12px; line-height: 1.43; font-weight: 700; } .course-roadmap__specialisation-current-label { display: none; width: max-content; margin-top: 1px; padding: 3px 7px; color: #d9fbfc; background: rgba(67, 199, 207, 0.14); border: 1px solid rgba(93, 215, 220, 0.28); border-radius: 999px; font-size: 9px; line-height: 1.2; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .course-roadmap__specialisation-course.is-current .course-roadmap__specialisation-course-link { background: linear-gradient(145deg, rgba(67, 199, 207, 0.2), rgba(34, 86, 119, 0.55)); border-color: rgba(106, 222, 225, 0.64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 2px rgba(67, 199, 207, 0.08); } .course-roadmap__specialisation-course.is-current .course-roadmap__specialisation-current-label { display: inline-flex; } .course-roadmap__specialisation-course.is-current .course-roadmap__specialisation-sequence { color: #ffffff; background: #2ba8ad; border-color: #82e5e8; } .course-roadmap__specialisation-choice { position: relative; display: grid; padding: 13px 14px 14px; gap: 4px; text-align: center; background: rgba(67, 199, 207, 0.07); border-top: 1px solid rgba(77, 203, 207, 0.28); border-bottom: 1px solid rgba(77, 203, 207, 0.18); } .course-roadmap__specialisation-choice::before { position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; background: #0d1d30; border-right: 1px solid rgba(77, 203, 207, 0.34); border-bottom: 1px solid rgba(77, 203, 207, 0.34); content: ""; transform: rotate(45deg); } .course-roadmap__specialisation-choice > span { color: #eaf8f9; font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .course-roadmap__specialisation-choice small { color: rgba(213, 228, 241, 0.64); font-size: 10px; line-height: 1.4; } .course-roadmap__specialisation-route-grid { display: grid; gap: 10px; } .course-roadmap__specialisation-route { position: relative; display: grid; min-width: 0; padding: 13px; gap: 11px; overflow: hidden; background: rgba(8, 20, 35, 0.44); border: 1px solid rgba(176, 201, 225, 0.13); border-radius: 14px; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .course-roadmap__specialisation-route::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; background: rgba(67, 199, 207, 0.28); border-radius: 0 99px 99px 0; content: ""; } .course-roadmap__specialisation-route-header { min-width: 0; padding-left: 3px; } .course-roadmap__specialisation-route-header h4 { margin: 4px 0 4px; color: #f5f8fc; font-size: 14px; line-height: 1.25; font-weight: 800; } .course-roadmap__specialisation-route-header p { margin: 0; color: rgba(211, 226, 240, 0.68); font-size: 10.5px; line-height: 1.45; } .course-roadmap__specialisation-route-courses { display: grid; gap: 18px; } .course-roadmap__specialisation-route-courses .course-roadmap__specialisation-course:not(:last-child)::after { position: absolute; z-index: 2; bottom: -15px; left: 50%; width: 8px; height: 8px; border-right: 2px solid rgba(86, 210, 213, 0.68); border-bottom: 2px solid rgba(86, 210, 213, 0.68); content: ""; transform: translateX(-50%) rotate(45deg); } .course-roadmap__specialisation-core.is-current-core { background: linear-gradient(145deg, rgba(67, 199, 207, 0.075), rgba(8, 20, 35, 0.66)); border-color: rgba(87, 210, 214, 0.32); } .course-roadmap__specialisation-route.is-current-route { background: linear-gradient(145deg, rgba(67, 199, 207, 0.105), rgba(20, 42, 66, 0.56)); border-color: rgba(87, 210, 214, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); } .course-roadmap__specialisation-route.is-current-route::before { background: #43c7cf; box-shadow: 0 0 10px rgba(67, 199, 207, 0.28); } .course-roadmap__specialisation-route.is-current-route .course-roadmap__specialisation-route-kicker::after { margin-left: 7px; color: #bff4f5; content: "• Current route"; } @media (hover: hover) and (pointer: fine) { .course-roadmap__specialisation-course-link:hover { background: linear-gradient(145deg, rgba(39, 64, 92, 0.84), rgba(16, 34, 56, 0.9)); border-color: rgba(88, 210, 214, 0.35); transform: translateY(-1px); } } @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--specialisation { gap: 18px; } .course-roadmap__sheet-pathway-view .course-roadmap__specialisation-core, .course-roadmap__sheet-pathway-view .course-roadmap__specialisation-route { padding: 15px; } .course-roadmap__sheet-pathway-view .course-roadmap__specialisation-course-title { font-size: 13px; line-height: 1.4; } .course-roadmap__sheet-pathway-view .course-roadmap__specialisation-route-header h4 { font-size: 15px; } } @media (max-width: 520px) { .course-roadmap__specialisation-section-heading { display: grid; gap: 4px; } .course-roadmap__specialisation-section-heading p { max-width: none; text-align: left; } .course-roadmap__specialisation-core { padding: 12px; } .course-roadmap__specialisation-route { padding: 12px; } } /* ========================================================= NETWORK MANAGEMENT V3: Enterprise Engineering route-choice clarity Preserves the live node/notch rail for the shared progression, then separates four alternative specialist routes without adding new colours. ========================================================= */ .course-roadmap__pathway-detail--enterprise-choice { display: grid; gap: 18px; } .course-roadmap__pathway-detail--enterprise-choice > .course-roadmap__pathway-detail-description { margin-bottom: 0; } .course-roadmap__enterprise-core-stage { position: relative; padding: 15px 14px 18px; overflow: hidden; background: radial-gradient( ellipse 105% 72% at 50% 0%, rgba(67, 199, 207, 0.09) 0%, rgba(67, 199, 207, 0.025) 48%, transparent 78% ), rgba(6, 17, 31, 0.56); border: 1px solid rgba(126, 192, 214, 0.18); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .course-roadmap__enterprise-core-heading { display: grid; margin-bottom: 15px; gap: 4px; } .course-roadmap__enterprise-core-heading > span, .course-roadmap__enterprise-routes-eyebrow, .course-roadmap__enterprise-route-count { color: #70d9dc; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .course-roadmap__enterprise-core-heading p { margin: 0; color: rgba(216, 230, 243, 0.66); font-size: 10.5px; line-height: 1.45; } /* Keep the user's live pathway geometry. The enclosing panel only changes the visual grouping; nodes, notch sizes and SVG measurement remain owned by the existing pathway system. */ .course-roadmap__enterprise-core-list { margin-bottom: 0 !important; } .course-roadmap__pathway-detail-step--decision .course-roadmap__pathway-detail-link--decision { cursor: default; background: linear-gradient( 145deg, rgba(67, 199, 207, 0.15) 0%, rgba(24, 54, 78, 0.64) 52%, rgba(13, 30, 50, 0.82) 100% ); border-color: rgba(91, 212, 216, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(67, 199, 207, 0.035); } .course-roadmap__pathway-detail-step--decision .course-roadmap__pathway-detail-meta > span:first-child { color: #76dce0 !important; } .course-roadmap__pathway-detail-step--decision .course-roadmap__pathway-detail-title { color: #ffffff !important; } .course-roadmap__enterprise-decision-options { color: rgba(212, 230, 241, 0.66); font-size: 10px; line-height: 1.45; font-weight: 650; } .course-roadmap__enterprise-routes { display: grid; gap: 12px; } .course-roadmap__enterprise-routes-heading { display: grid; padding: 15px 14px 14px; gap: 5px; text-align: left; background: rgba(67, 199, 207, 0.055); border-top: 1px solid rgba(77, 203, 207, 0.25); border-bottom: 1px solid rgba(77, 203, 207, 0.16); } .course-roadmap__enterprise-routes-heading h4 { margin: 0; color: #f3f9fa; font-size: 14px; line-height: 1.3; font-weight: 800; letter-spacing: -0.005em; } .course-roadmap__enterprise-routes-heading p { margin: 0; color: rgba(215, 229, 241, 0.64); font-size: 10.5px; line-height: 1.45; } .course-roadmap__enterprise-route-grid { gap: 15px; } .course-roadmap__specialisation-route.course-roadmap__enterprise-route { padding: 14px; gap: 9px; background: linear-gradient( 145deg, rgba(18, 38, 61, 0.72) 0%, rgba(8, 20, 35, 0.54) 100% ); border-color: rgba(176, 201, 225, 0.14); } /* Remove V2's identical left bar. Route identity is now carried by the explicit route count and four-position key, which is clearer and does not create additional category colours. */ .course-roadmap__specialisation-route.course-roadmap__enterprise-route::before { display: none; content: none; } .course-roadmap__enterprise-route-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; } .course-roadmap__enterprise-route-header > div { min-width: 0; } .course-roadmap__enterprise-route-header h4 { margin: 5px 0 0; color: #f6f9fc; font-size: 14px; line-height: 1.25; font-weight: 800; } .course-roadmap__enterprise-route-purpose { margin: 0; color: rgba(211, 226, 240, 0.68); font-size: 10.5px; line-height: 1.45; } .course-roadmap__enterprise-route-position { display: grid; width: 42px; padding-top: 3px; flex: 0 0 42px; grid-template-columns: repeat(4, 1fr); gap: 3px; } .course-roadmap__enterprise-route-position i { display: block; height: 14px; background: rgba(139, 165, 191, 0.17); border: 1px solid rgba(159, 186, 210, 0.17); border-radius: 99px; } .course-roadmap__enterprise-route--1 .course-roadmap__enterprise-route-position i:nth-child(1), .course-roadmap__enterprise-route--2 .course-roadmap__enterprise-route-position i:nth-child(2), .course-roadmap__enterprise-route--3 .course-roadmap__enterprise-route-position i:nth-child(3), .course-roadmap__enterprise-route--4 .course-roadmap__enterprise-route-position i:nth-child(4) { background: #43c7cf; border-color: #72dce0; box-shadow: 0 0 8px rgba(67, 199, 207, 0.2); } .course-roadmap__enterprise-route.is-current-route, .course-roadmap__enterprise-route:has(.course-roadmap__specialisation-course.is-current) { background: linear-gradient( 145deg, rgba(67, 199, 207, 0.095) 0%, rgba(18, 42, 64, 0.69) 100% ); border-color: rgba(87, 210, 214, 0.38); } @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice { gap: 20px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-core-stage { padding: 16px 15px 20px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-routes-heading { padding: 16px 15px 15px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-routes-heading h4, .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-route-header h4 { font-size: 15px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-route-grid { gap: 16px; } .course-roadmap__sheet-pathway-view .course-roadmap__specialisation-route.course-roadmap__enterprise-route { padding: 15px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-decision-options, .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-route-purpose, .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-routes-heading p, .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-core-heading p { font-size: 12px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-route-count, .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-core-heading > span, .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-routes-eyebrow { font-size: 11px; } } @media (max-width: 520px) { .course-roadmap__enterprise-core-stage { padding-right: 12px; padding-left: 12px; } .course-roadmap__enterprise-route-position { width: 38px; flex-basis: 38px; } } /* ========================================================= NETWORK V4: Enterprise pathway hierarchy consistency ========================================================= */ /* Enterprise Step 03 is the transition into specialist routes. Keep the same card/node geometry as the user's existing pathway cards, but do not add a second instructional heading below it. */ .course-roadmap__pathway-detail--enterprise-choice { gap: 18px; } .course-roadmap__pathway-detail--enterprise-choice > .course-roadmap__pathway-detail-description, .course-roadmap__enterprise-core-heading, .course-roadmap__enterprise-routes-heading { display: none !important; } .course-roadmap__enterprise-core-stage { padding-top: 15px; } .course-roadmap__pathway-detail-step--decision .course-roadmap__pathway-detail-link--decision { gap: 5px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022) ); border-color: rgba(205, 220, 238, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .course-roadmap__pathway-detail-step--decision .course-roadmap__pathway-detail-title { color: #f1f6fb !important; } /* When the selected course belongs to any of the four specialist routes, Step 03 behaves exactly like the selected top pathway course. */ .course-roadmap__pathway-detail-step--decision.is-current .course-roadmap__pathway-detail-marker { color: #ffffff; background: linear-gradient(145deg, rgba(67, 199, 207, 0.54), rgba(34, 86, 119, 0.78)); border-color: rgba(124, 234, 237, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(67, 199, 207, 0.1), 0 0 18px rgba(67, 199, 207, 0.2); } .course-roadmap__pathway-detail-step--decision.is-current .course-roadmap__pathway-detail-link--decision { background: linear-gradient(145deg, rgba(67, 199, 207, 0.145), rgba(79, 125, 243, 0.055)); border-color: rgba(88, 213, 218, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 15px rgba(67, 199, 207, 0.07); } .course-roadmap__enterprise-decision-options { color: rgba(212, 230, 241, 0.68); font-size: 10px; line-height: 1.45; font-weight: 650; } .course-roadmap__enterprise-routes { gap: 0; } .course-roadmap__enterprise-route-grid { gap: 15px; } /* Specialist course cards use the same information grammar as the top progression: level/state on the left, duration on the right, title below. */ .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-link { padding: 10px 11px; gap: 5px; } .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-meta { display: flex; min-width: 0; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; color: rgba(206, 219, 235, 0.53); font-size: 8.5px; line-height: 1.2; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; } .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-meta > span + span::before { display: none; content: none; } .course-roadmap__specialisation-course-meta-left { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0; } .course-roadmap__specialisation-course-meta-left > span + span::before { margin: 0 7px; color: rgba(206, 219, 235, 0.44); content: "·"; } .course-roadmap__specialisation-duration { flex: 0 0 auto; margin-left: auto; color: rgba(206, 219, 235, 0.53); letter-spacing: 0.035em; white-space: nowrap; } .course-roadmap__specialisation-selected-inline { display: none; color: #70d9dc; letter-spacing: 0.05em; } .course-roadmap__specialisation-course.is-current .course-roadmap__specialisation-selected-inline { display: inline; } .course-roadmap__specialisation-step-inline { color: #6fd8db; letter-spacing: 0.05em; } /* Same level colours above and below Step 03. */ .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__pathway-level-word--basic { color: #59d8a2 !important; } .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__pathway-level-word--intermediate { color: #73a0ff !important; } .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__pathway-level-word--advanced { color: #d393f0 !important; } /* Course-title typography is intentionally identical on both sides of the specialisation transition. */ .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-title { color: #f1f6fb; font-size: 11.5px; line-height: 1.36; font-weight: 660; overflow-wrap: anywhere; } /* The inline Selected Course label replaces the old pill, so the pill never adds vertical height. */ .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-current-label { display: none !important; } /* Selected specialist course remains locatable without reading as a promoted recommendation. Route context and inline metadata carry more of the state. */ .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course.is-current .course-roadmap__specialisation-course-link { background: linear-gradient( 145deg, rgba(67, 199, 207, 0.105), rgba(34, 86, 119, 0.25) ); border-color: rgba(92, 214, 219, 0.43); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(67, 199, 207, 0.035); } /* The active route receives only a quiet container cue. */ .course-roadmap__enterprise-route.is-current-route, .course-roadmap__enterprise-route:has(.course-roadmap__specialisation-course.is-current) { background: linear-gradient( 145deg, rgba(67, 199, 207, 0.055) 0%, rgba(18, 42, 64, 0.64) 100% ); border-color: rgba(87, 210, 214, 0.28); } @media (max-width: 1023px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice { gap: 20px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-core-stage { padding-top: 16px; } .course-roadmap__sheet-pathway-view .course-roadmap__enterprise-decision-options { font-size: 12px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-link { min-height: 96px; padding: 15px; gap: 7px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-meta { font-size: 14px; line-height: 1.2; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-duration { font-size: 13.5px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-title { font-size: 15.5px; line-height: 1.4; } } @media (max-width: 640px) { .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-meta { font-size: 13px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-duration { font-size: 12.5px; } .course-roadmap__sheet-pathway-view .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__specialisation-course-title { font-size: 15px; } } /* ========================================================= NETWORK V5: Specialist-route identity accent ========================================================= */ /* Gold is reserved for the specialist-route taxonomy. Cyan remains the pathway/selection colour, while the existing green/blue/purple palette continues to communicate course level. */ .course-roadmap__pathway-detail--enterprise-choice { --enterprise-specialist-color: #d9b36c; --enterprise-specialist-rgb: 217, 179, 108; } .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__pathway-detail-step--decision .course-roadmap__pathway-detail-title, .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__enterprise-route-count { color: var(--enterprise-specialist-color) !important; } .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__enterprise-route--1 .course-roadmap__enterprise-route-position i:nth-child(1), .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__enterprise-route--2 .course-roadmap__enterprise-route-position i:nth-child(2), .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__enterprise-route--3 .course-roadmap__enterprise-route-position i:nth-child(3), .course-roadmap__pathway-detail--enterprise-choice .course-roadmap__enterprise-route--4 .course-roadmap__enterprise-route-position i:nth-child(4) { background: var(--enterprise-specialist-color); border-color: rgba(var(--enterprise-specialist-rgb), 0.92); box-shadow: 0 0 8px rgba(var(--enterprise-specialist-rgb), 0.18); } /* ========================================================= NETWORK V7: B2B stage vocabulary and focus-area descriptions Core / Applied / Specialist keep the existing stage colours. Focus Areas replace route terminology in the UI. ========================================================= */ .course-roadmap__pathway-detail--enterprise-choice > .course-roadmap__pathway-detail-description { display: block !important; margin-bottom: 0; } /* ========================================================= NETWORK MANAGEMENT V8: natural-height pathway dock and aligned desktop summary copy bands ========================================================= */ @media (min-width: 1024px) { /* The dock is part of the document, not a nested scroll container. Long Focus Area pathways grow naturally and the page owns scrolling. */ .ms-roadmap-suite:not(.data-roadmap-suite) .course-roadmap__pathway-dock { position: relative; top: auto; max-height: none; overflow: visible; overscroll-behavior: auto; }