/* Onboarding wizard popup - courses-video.html (#details-forms).
Compiled from src/stylesheets/new-register/multi-step-form.scss.
EVERY selector in this file is scoped to #details-forms. That is not how the
SCSS compiles: new-register owns its whole page, so it emits some rules bare -
most importantly `.ss-content { display: flex !important }`, which on this page
would hit every other SlimSelect (header, course content, ZEN Lite forms) and
lay their option lists out sideways. courses-video already runs SlimSelect
1.27.1 for those, so the wizard must not touch them.
Regenerate in two steps, both required:
1. npx sass --no-source-map --style=expanded \
src/stylesheets/new-register/multi-step-form.scss html/css/courses-video-onboarding.css
2. prefix every unscoped selector in the compiled output with `#details-forms `
(19 of them last time), then re-append the popup overrides below.
Check with: no selector outside a @keyframes should lack #details-forms,
the one exception being body.guvi-onb-locked. */
#details-forms {
width: 100%;
background: #fdf7ff;
}
#details-forms .details-form-container {
width: 100%;
padding: 4rem 8rem;
min-height: 100vh;
height: 100vh;
max-width: 1400px;
margin: auto;
}
@media (max-width: 768px) {
#details-forms .details-form-container {
padding: 0;
height: auto;
}
}
#details-forms .details-form-container .details-page {
display: flex;
align-items: stretch;
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
height: 100%;
}
@media (max-width: 768px) {
#details-forms .details-form-container .details-page {
flex-direction: column;
min-height: 100vh;
border-radius: 0;
box-shadow: none;
}
}
#details-forms .details-form-container .detailSection {
display: flex;
width: 100%;
align-items: stretch;
}
@media (max-width: 768px) {
#details-forms .details-form-container .detailSection {
flex-direction: column;
}
}
#details-forms .details-form-container .details-page-free {
flex: 1;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 768px) {
#details-forms .details-form-container .details-page-free {
padding: 64px 30px 16px;
flex: 0 0 auto;
border-radius: 0 0 32px 32px;
background: linear-gradient(180deg, #411aa3 0%, #201047 100%);
}
}
@media (min-width: 769px) {
#details-forms .details-form-container .step-1-banner {
background-image: url(../../images/signup/onboarding-step-1.png);
}
#details-forms .details-form-container .step-2-banner {
background-image: url(../../images/signup/onboarding-step-2.png);
}
#details-forms .details-form-container .step-3-banner {
background-image: url(../../images/signup/onboarding-step-3.png);
}
}
#details-forms .details-form-container .step-banner-content {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
#details-forms .details-form-container .step-banner-content {
padding: 20px 15px;
}
}
#details-forms .details-form-container .step-banner-title {
font-size: 32px;
font-weight: 700;
line-height: 1.3;
color: #fcfcfd;
margin-bottom: 16px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .step-banner-title {
font-size: 22px;
}
}
#details-forms .details-form-container .step-banner-description {
font-size: 16px;
font-weight: 400;
line-height: 1.45;
color: #ebeced;
margin: 0 auto 30px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .step-banner-description {
margin-bottom: 20px;
}
}
#details-forms .details-form-container .details-page-form {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
margin-top: 0 !important;
}
@media (max-width: 768px) {
#details-forms .details-form-container .details-page-form {
padding: 30px 20px !important;
justify-content: flex-start;
overflow-y: visible;
}
}
#details-forms .details-form-container .details-page-form h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #101828;
}
@media (max-width: 768px) {
#details-forms .details-form-container .details-page-form h2 {
font-size: 20px;
}
}
#details-forms .details-form-container .details-page-form .subtitle {
color: #999;
margin-bottom: 20px;
font-size: 14px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .details-page-form .subtitle {
font-size: 13px;
}
}
#details-forms .details-form-container .progress-indicators {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
gap: 15px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators {
gap: 8px;
margin-bottom: 25px;
}
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators.desktop-progress {
display: none;
}
}
#details-forms .details-form-container .progress-indicators.mobile-progress {
display: none;
width: 100%;
margin-bottom: 0;
margin-top: 8px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators.mobile-progress {
display: flex;
}
}
#details-forms .details-form-container .progress-indicators.mobile-progress .indicator .label {
color: #aeb2b7;
}
#details-forms .details-form-container .progress-indicators.mobile-progress .indicator.active .label {
color: #fcfcfd;
}
#details-forms .details-form-container .progress-indicators.mobile-progress .progress-line {
background: #e5e7eb;
}
#details-forms .details-form-container .progress-indicators.mobile-progress .progress-line.inactive {
background: #e5e7eb;
}
#details-forms .details-form-container .progress-indicators .indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators .indicator {
gap: 6px;
}
}
#details-forms .details-form-container .progress-indicators .indicator .circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background: #e5e7eb;
color: #99a1af;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators .indicator .circle {
width: 32px;
height: 32px;
font-size: 14px;
}
}
#details-forms .details-form-container .progress-indicators .indicator .circle.completed {
background: linear-gradient(135deg, #8152ec 0%, #4f39f6 100%);
color: white;
}
#details-forms .details-form-container .progress-indicators .indicator .label {
font-size: 12px;
text-align: center;
color: #99a1af;
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators .indicator .label {
font-size: 10px;
}
}
#details-forms .details-form-container .progress-indicators .indicator.active .circle {
background: linear-gradient(135deg, #8152ec 0%, #4f39f6 100%);
color: white;
}
#details-forms .details-form-container .progress-indicators .indicator.active .label {
color: #444;
}
#details-forms .details-form-container .progress-indicators .progress-line {
flex: 1;
height: 2px;
background: #8152ec;
margin: 0 -5px;
margin-top: 1rem;
}
@media (max-width: 768px) {
#details-forms .details-form-container .progress-indicators .progress-line {
margin-bottom: 1.2rem;
}
}
#details-forms .details-form-container .progress-indicators .progress-line.inactive {
background: #e5e7eb;
}
#details-forms .details-form-container .role-search-container,
#details-forms .details-form-container .skill-search-container {
position: relative;
margin-bottom: 25px;
}
#details-forms .details-form-container .role-search-container input,
#details-forms .details-form-container .skill-search-container input {
width: 100%;
padding: 12px 15px 12px 40px;
border: 1px solid #d1d5dc;
border-radius: 10px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
#details-forms .details-form-container .role-search-container input::placeholder,
#details-forms .details-form-container .skill-search-container input::placeholder {
color: #999;
}
#details-forms .details-form-container .role-search-container input:focus,
#details-forms .details-form-container .skill-search-container input:focus {
border-color: #8152ec;
}
#details-forms .details-form-container .role-search-container:before,
#details-forms .details-form-container .skill-search-container:before {
content: "";
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.7857 15.6084L14.0831 12.9059C14.9022 11.8336 15.3514 10.5331 15.3516 9.16069C15.3516 7.50684 14.7075 5.95186 13.5378 4.78243C12.3684 3.613 10.8136 2.96887 9.15957 2.96887C7.50572 2.96887 5.95074 3.613 4.78131 4.78243C2.36717 7.19678 2.36717 11.125 4.78131 13.5389C5.95074 14.7086 7.50572 15.3527 9.15957 15.3527C10.5319 15.3525 11.8325 14.9033 12.9047 14.0842L15.6073 16.7868C15.7699 16.9496 15.9833 17.031 16.1965 17.031C16.4097 17.031 16.6231 16.9496 16.7857 16.7868C17.1112 16.4615 17.1112 15.9338 16.7857 15.6084ZM5.9597 12.3606C4.19537 10.5962 4.19558 7.72534 5.9597 5.96082C6.81439 5.10632 7.95087 4.63554 9.15957 4.63554C10.3685 4.63554 11.5047 5.10632 12.3594 5.96082C13.2141 6.81551 13.6849 7.95199 13.6849 9.16069C13.6849 10.3696 13.2141 11.5059 12.3594 12.3606C11.5047 13.2153 10.3685 13.686 9.15957 13.686C7.95087 13.686 6.81439 13.2153 5.9597 12.3606Z' fill='%23141415'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 20px 20px;
}
#details-forms .details-form-container .role-search-container .search-clear,
#details-forms .details-form-container .skill-search-container .search-clear {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
cursor: pointer;
font-size: 20px;
line-height: 20px;
text-align: center;
color: #505962;
user-select: none;
border-radius: 50%;
}
#details-forms .details-form-container .role-search-container .search-clear:hover,
#details-forms .details-form-container .skill-search-container .search-clear:hover {
color: #141415;
}
#details-forms .details-form-container .roles-container,
#details-forms .details-form-container .skills-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
transition: max-height 0.4s ease;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 8px;
align-content: flex-start;
}
@media (max-width: 768px) {
#details-forms .details-form-container .roles-container,
#details-forms .details-form-container .skills-container {
max-height: 350px;
}
}
#details-forms .details-form-container .roles-container.collapsed,
#details-forms .details-form-container .skills-container.collapsed {
max-height: 300px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .roles-container.collapsed,
#details-forms .details-form-container .skills-container.collapsed {
max-height: 180px;
}
}
#details-forms .details-form-container .roles-container.expanded,
#details-forms .details-form-container .skills-container.expanded {
max-height: 400px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .roles-container.expanded,
#details-forms .details-form-container .skills-container.expanded {
max-height: 400px;
}
}
#details-forms .details-form-container .role-badge,
#details-forms .details-form-container .skill-badge {
background: #f3f4f6;
border: 1px solid #e5e7eb;
padding: 8px 16px;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
color: #364153;
}
#details-forms .details-form-container .role-badge.selected,
#details-forms .details-form-container .skill-badge.selected {
background: linear-gradient(90deg, #f0eaff 0%, #f0eaff 100%);
border: 1px solid #b394ff;
color: #141415;
}
#details-forms .details-form-container .role-badge.selected .role-close,
#details-forms .details-form-container .role-badge.selected .skill-close,
#details-forms .details-form-container .skill-badge.selected .role-close,
#details-forms .details-form-container .skill-badge.selected .skill-close {
display: inline !important;
color: #364153;
font-weight: bold;
cursor: pointer;
}
#details-forms .details-form-container .role-badge.selected .role-add,
#details-forms .details-form-container .role-badge.selected .skill-add,
#details-forms .details-form-container .skill-badge.selected .role-add,
#details-forms .details-form-container .skill-badge.selected .skill-add {
display: none !important;
}
#details-forms .details-form-container .role-badge .role-name,
#details-forms .details-form-container .role-badge .skill-name,
#details-forms .details-form-container .skill-badge .role-name,
#details-forms .details-form-container .skill-badge .skill-name {
flex: 1;
}
#details-forms .details-form-container .role-badge .role-close,
#details-forms .details-form-container .role-badge .skill-close,
#details-forms .details-form-container .skill-badge .role-close,
#details-forms .details-form-container .skill-badge .skill-close {
background: none;
border: none;
color: #364153;
font-size: 18px;
font-weight: bold;
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s ease;
display: none;
}
#details-forms .details-form-container .role-badge .role-close:hover,
#details-forms .details-form-container .role-badge .skill-close:hover,
#details-forms .details-form-container .skill-badge .role-close:hover,
#details-forms .details-form-container .skill-badge .skill-close:hover {
color: #1f2937;
}
#details-forms .details-form-container .role-badge .role-add,
#details-forms .details-form-container .role-badge .skill-add,
#details-forms .details-form-container .skill-badge .role-add,
#details-forms .details-form-container .skill-badge .skill-add {
background: none;
border: none;
color: #364153;
font-size: 18px;
font-weight: bold;
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s ease;
display: inline;
}
@media (max-width: 768px) {
#details-forms .details-form-container .role-badge,
#details-forms .details-form-container .skill-badge {
width: 100% !important;
}
}
#details-forms .details-form-container .btn-view-more {
color: #141415;
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: fit-content;
background: transparent;
border: none;
}
#details-forms .details-form-container .form-group {
margin-bottom: 20px;
}
#details-forms .details-form-container .form-group label {
display: block;
font-size: 16px;
font-weight: 500;
color: #4a5565;
margin-bottom: 8px;
}
@media (max-width: 768px) {
#details-forms .details-form-container .form-group label {
font-size: 14px;
}
}
#details-forms .details-form-container .form-group input[type=text],
#details-forms .details-form-container .form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid #d1d5dc;
border-radius: 10px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
appearance: none;
background-color: white;
}
@media (max-width: 768px) {
#details-forms .details-form-container .form-group input[type=text],
#details-forms .details-form-container .form-group select {
font-size: 14px;
}
}
#details-forms .details-form-container .form-group input[type=text]:focus,
#details-forms .details-form-container .form-group select:focus {
border-color: #8152ec;
box-shadow: 0 0 0 3px rgba(129, 82, 236, 0.1);
}
#details-forms .details-form-container .form-group input[type=text].is-invalid,
#details-forms .details-form-container .form-group select.is-invalid {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
#details-forms .details-form-container .form-group select {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23364153' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
}
#details-forms .details-form-container .form-group select::-webkit-appearance {
appearance: none;
}
#details-forms .details-form-container .form-group select::-moz-appearance {
appearance: none;
}
#details-forms .details-form-container .form-group .invalid-feedback {
display: none;
color: #dc2626;
font-size: 13px;
margin-top: 5px;
}
#details-forms .details-form-container .form-group .invalid-feedback.show {
display: block;
}
#details-forms .details-form-container .chip-select-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#details-forms .details-form-container .chip-select-container .chip-option {
border: 1px solid #e4e8ec;
border-radius: 9px;
padding: 6px 8px;
font-size: 14px;
font-weight: 500;
color: #98a4ae;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
user-select: none;
line-height: normal;
}
@media (max-width: 768px) {
#details-forms .details-form-container .chip-select-container .chip-option {
font-size: 12px;
}
}
#details-forms .details-form-container .chip-select-container .chip-option .chip-tick {
width: 14px;
height: 14px;
display: none;
}
#details-forms .details-form-container .chip-select-container .chip-option.selected {
background: #ecfef2;
border-color: #6dad84;
color: #068834;
line-height: normal;
}
#details-forms .details-form-container .chip-select-container .chip-option.selected .chip-tick {
display: inline-block;
}
#details-forms .details-form-container .chip-select-container .chip-option:hover:not(.selected) {
border-color: #c2c5c9;
background: #f7f7f8;
}
#details-forms .details-form-container .chip-select-container .ss-main {
min-height: auto !important;
height: auto !important;
border: 1px solid #e4e8ec !important;
border-radius: 9px !important;
min-width: fit-content;
width: fit-content;
align-items: center;
}
#details-forms .details-form-container .chip-select-container .ss-main .ss-values .ss-single,
#details-forms .details-form-container .chip-select-container .ss-main .ss-values .ss-placeholder {
padding: 6px 8px !important;
font-size: 12px !important;
color: #98a4ae !important;
font-weight: 500;
line-height: 1.4;
}
#details-forms .details-form-container .chip-select-container .ss-main .ss-arrow {
margin: 0 4px;
}
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected {
background: #ecfef2;
border-color: #6dad84 !important;
}
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected .ss-values .ss-single,
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected .ss-values .ss-placeholder {
color: #068834 !important;
line-height: normal;
}
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected .ss-values .ss-single:after,
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected .ss-values .ss-placeholder:after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url(../../images/signup/onboarding-select.png);
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-left: 8px;
}
#details-forms .details-form-container .form-actions {
display: flex;
gap: 15px;
margin-top: 30px;
flex-grow: 1;
align-items: flex-end;
}
@media (max-width: 768px) {
#details-forms .details-form-container .form-actions {
gap: 8px;
}
}
#details-forms .details-form-container .form-actions .btn {
flex: 1;
padding: 12px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
height: fit-content;
}
@media (max-width: 768px) {
#details-forms .details-form-container .form-actions .btn {
padding: 12px 20px;
font-size: 15px;
}
}
#details-forms .details-form-container .form-actions .btn-primary {
background: linear-gradient(180deg, #56f68f 0%, #0ad652 100%);
box-shadow: 0 3px 3px 0 #cafcdc inset;
color: #141415;
border: 1.5px solid #71c99c;
}
#details-forms .details-form-container .form-actions .btn-secondary {
background: white;
color: #0a0a0a;
border: 1.4px solid #0a0a0a;
}
#details-forms .details-form-container .flex-grow {
flex-grow: 1;
}
#details-forms .details-form-container .ss-main {
border: 1px solid #d1d5dc !important;
border-radius: 10px !important;
min-height: 50px;
padding: 0;
display: flex;
}
#details-forms .details-form-container .ss-main .ss-values .ss-single,
#details-forms .details-form-container .ss-main .ss-values .ss-placeholder {
color: #98a4ae;
font-size: 16px;
padding: 12px 15px;
}
#details-forms .ss-content {
height: auto !important;
display: flex !important;
}
#details-forms .ss-content.degree-slim-select,
#details-forms .ss-content.chip-slim-select {
border: 1px solid #d1d5dc;
border-radius: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
margin-top: 4px;
padding: 0;
}
#details-forms .ss-content.degree-slim-select .ss-search,
#details-forms .ss-content.chip-slim-select .ss-search {
display: none;
}
#details-forms .ss-content.degree-slim-select .ss-list .ss-option.ss-selected:not(.ss-disabled),
#details-forms .ss-content.chip-slim-select .ss-list .ss-option.ss-selected:not(.ss-disabled) {
background-color: #ecfef2 !important;
color: #068834;
display: flex;
align-items: center;
justify-content: space-between;
}
#details-forms .ss-content.degree-slim-select .ss-list .ss-option.ss-selected:not(.ss-disabled):after,
#details-forms .ss-content.chip-slim-select .ss-list .ss-option.ss-selected:not(.ss-disabled):after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url(../../images/signup/tick.png);
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-left: 8px;
}
#details-forms .degree-slim-select .ss-arrow {
margin: auto 16px auto 16px !important;
}
#details-forms .ss-content.degree-slim-select {
max-height: 220px;
}
#details-forms .ss-content.degree-slim-select .ss-list .ss-option {
padding: 10px 15px;
font-size: 14px;
color: #364153 !important;
}
@media (max-width: 768px) {
#details-forms .ss-content.degree-slim-select .ss-list .ss-option {
padding: 8px 12px;
font-size: 13px;
}
}
#details-forms .ss-content.degree-slim-select .ss-list .ss-option:hover {
background: #ecfef2;
}
#details-forms .ss-content.degree-slim-select .ss-list::-webkit-scrollbar {
width: 5px;
}
#details-forms .ss-content.degree-slim-select .ss-list::-webkit-scrollbar-thumb {
border-radius: 16px;
background: linear-gradient(23deg, rgba(64, 23, 161, 0.2) 6.77%, rgba(143, 98, 249, 0.2) 90.75%) !important;
}
#details-forms .ss-content.degree-slim-select .ss-list::-webkit-scrollbar-track {
display: none;
}
#details-forms .ss-content.chip-slim-select {
width: fit-content;
min-width: fit-content;
}
#details-forms .ss-content.chip-slim-select .ss-list::-webkit-scrollbar {
width: 5px;
}
#details-forms .ss-content.chip-slim-select .ss-list::-webkit-scrollbar-thumb {
border-radius: 16px;
background: linear-gradient(23deg, rgba(64, 23, 161, 0.2) 6.77%, rgba(143, 98, 249, 0.2) 90.75%) !important;
}
#details-forms .ss-content.chip-slim-select .ss-list::-webkit-scrollbar-track {
display: none;
}
#details-forms .ss-content.chip-slim-select .ss-list .ss-option {
font-size: 12px !important;
color: #0a0f14 !important;
}
#details-forms .ss-content.chip-slim-select .ss-list .ss-option:hover {
background: #ecfef2 !important;
}
/* ---------------------------------------------------------------------------
Popup overrides.
The wizard above is authored as a full screen page (#details-forms
.details-form-container is height:100vh). These rules turn it into a centred
modal without touching the compiled rules, so a re-compile stays a clean
overwrite of everything above this block.
--------------------------------------------------------------------------- */
#details-forms.is-popup {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.55);
overflow-y: auto;
}
/* Fixed height, not height:auto. The banner is background-size:cover, so if the
card grows when the validation message appears the image rescales and looks
zoomed. new-register avoids this by being a 100vh page; here the card holds a
stable height and the form column scrolls instead. */
#details-forms.is-popup .details-form-container {
width: 100%;
max-width: 1180px; /* wider */
height: min(90vh, 720px);
min-height: 0;
margin: auto;
padding: 0;
overflow: hidden;
border-radius: 24px;
}
#details-forms.is-popup .details-page { height: 100%; }
#details-forms.is-popup .detailSection { height: 100%; }
/* Search field padding. Deliberately outside both media blocks below - this is
a specificity fix, not a layout one, so it has to hold at every width.
Step 3's search box sits inside a .form-group, so
#details-forms .details-form-container .form-group input[type=text]
(1,3,1) outranks .skill-search-container input (1,2,1) and flattens the
padding to 12px 15px - the 40px left offset that clears the search icon is
lost, and the text ends up under the icon. Step 2's role search is not inside
a .form-group, which is why only step 3 looks wrong.
.details-form-container is in the chain to match that specificity; being later
in the file then wins. The icon is 20px at left:15px at every width (the
:before carries no breakpoint), so one 48px offset clears it on both. */
#details-forms.is-popup .details-form-container .role-search-container input,
#details-forms.is-popup .details-form-container .skill-search-container input {
padding: 12px 15px 12px 48px;
}
/* Desktop only - the compiled rules above put the mobile layout in a
@media (max-width: 768px) block, and these carry the same specificity, so
leaving them unguarded would override the phone layout at every width. */
@media (min-width: 769px) {
/* Column split. multi-step-form.scss gives both sides flex:1 (an even
50/50); the banner takes the larger share here so the artwork reads
properly at modal size instead of being cropped by background-size:cover. */
#details-forms.is-popup .details-page-free { flex: 1.3 1 0; }
#details-forms.is-popup .details-page-form { flex: 1 1 0; }
/* Padding. This is new-register's style.scss rule
.details-custom-w { padding: 4rem }, which never reached this file -
only multi-step-form.scss was compiled. Trimmed for the shorter modal. */
#details-forms.is-popup .details-page-free { padding: 3rem 2.5rem; }
#details-forms.is-popup .details-page-form { padding: 2.75rem 3rem; }
/* only the form side scrolls, the banner stays put */
#details-forms.is-popup .details-page-form {
overflow-y: auto;
max-height: 100%;
}
/* Keep "View more / less" and the buttons put, and scroll only the badges.
The compiled max-height is a flat 300px, which on a 720px modal pushes the
toggle and the form actions below the fold once the list is expanded. */
#details-forms.is-popup .roles-container,
#details-forms.is-popup .skills-container {
max-height: 34vh;
overflow-y: auto;
}
/* Keep the Next / Back buttons on screen.
The compiled rule uses flex-grow:1 + align-items:flex-end, which pins them
to the bottom of a column tall enough to hold everything - true on
new-register's 100vh page, not in a scrolling modal column. Steps 2 and 3
overflow with long role and skill lists, so the bar sticks instead.
margin-top:auto keeps it at the bottom when content is short; the negative
bottom cancels the column's padding so it sits flush, and the matching
padding-bottom puts that space back inside the bar. */
#details-forms.is-popup .details-page-form .form-actions {
position: sticky;
bottom: -2.75rem;
z-index: 2;
flex-grow: 0;
margin-top: auto;
padding: 14px 0 2.75rem;
background: #fff;
}
}
/* Typeface.
multi-step-form.scss declares no font-family at all - on new-register the
wizard inherits DM Sans from that page's Bootstrap theme ($font-family-base).
courses-video has no such global rule (its only 'DM Sans' declarations are
scoped to .daterangepicker and CodeMirror), so the wizard would fall back to
this page's default. Pin it, and repeat it on form controls, which do not
inherit font by default. .ss-content is named explicitly because 1.x nests
it inside .ss-main - under 2.x it would be appended to instead and
would need scoping differently. */
#details-forms,
#details-forms input,
#details-forms select,
#details-forms button,
#details-forms textarea,
#details-forms .ss-content {
font-family: 'DM Sans', system-ui, sans-serif;
}
/* Background scroll lock while the modal is open.
position:fixed rather than plain overflow:hidden because iOS Safari ignores
overflow:hidden on body; the JS stores the scroll offset in `top` and puts it
back on close. left/right pin the width instead of width:100%, so the
scrollbar-compensating padding-right cannot push the page wider. */
body.guvi-onb-locked {
position: fixed;
left: 0;
right: 0;
width: auto;
overflow: hidden;
}
@media (max-width: 768px) {
/* full bleed on phones, and the banner is a flat gradient here rather than
a cover image, so the whole card can scroll as one */
#details-forms.is-popup { padding: 0; }
#details-forms.is-popup .details-form-container {
height: 100vh;
border-radius: 0;
overflow-y: auto;
}
#details-forms.is-popup .details-page { height: auto; min-height: 100vh; }
#details-forms.is-popup .detailSection { height: auto; }
#details-forms.is-popup .details-page-form { overflow-y: visible; max-height: none; }
}
/* ---------------------------------------------------------------------------
SlimSelect 1.x compatibility.
The rules above were compiled from new-register, which bundles SlimSelect 2.x.
courses-video ships 1.27.1 (courses-video.html:43-44) and the two render
different trees:
2.x .ss-main > .ss-values > .ss-single <- box drawn on .ss-main
1.x .ss-main > .ss-single-selected > .placeholder
In 1.x the control's own border, 30px height, 4px radius and background sit on
.ss-single-selected, so it paints a second box inside the one the rules above
draw on .ss-main. These blocks flatten that inner box and move the type styles
onto .placeholder, which is where 1.x puts the text.
Kept below the compile boundary so regenerating multi-step-form.scss stays a
clean overwrite of everything before this point.
--------------------------------------------------------------------------- */
/* let .ss-main be the only visible box */
#details-forms .details-form-container .ss-main .ss-single-selected {
height: auto;
padding: 0;
border: 0;
border-radius: inherit;
background: transparent;
width: 100%;
align-items: center;
}
/* full-width selects (degree) */
#details-forms .details-form-container .ss-main .ss-single-selected .placeholder {
color: #98a4ae;
font-size: 16px;
padding: 12px 15px;
line-height: 1.4;
}
/* compact chip selects (year, language) */
#details-forms .details-form-container .chip-select-container .ss-main .ss-single-selected .placeholder {
padding: 6px 8px !important;
font-size: 12px !important;
color: #98a4ae !important;
font-weight: 500;
line-height: 1.4;
}
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected .ss-single-selected .placeholder {
color: #068834 !important;
line-height: normal;
}
/* the tick that 2.x hangs off .ss-single */
#details-forms .details-form-container .chip-select-container .ss-main.chip-selected .ss-single-selected .placeholder:after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url(../../images/signup/onboarding-select.png);
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-left: 8px;
}
/* 1.x draws the arrow with a rotated border chevron rather than an svg */
#details-forms .details-form-container .ss-main .ss-single-selected .ss-arrow {
margin: 0 12px 0 4px;
}
#details-forms .details-form-container .chip-select-container .ss-main .ss-single-selected .ss-arrow {
margin: 0 8px 0 0;
}
/* --- 1.x dropdown panel ---------------------------------------------------
In 1.x .ss-content lives INSIDE .ss-main (2.x appends it to ), and it
holds .ss-search alongside .ss-list. With search disabled 1.x only collapses
the search box's HEIGHT via .ss-hide - it keeps its width. The compiled rule
`.ss-content { display: flex !important }` above then lays that zero-height
box beside the option list, which is what pushes every option to the right.
Force the panel back to block flow and take the search box out entirely.
1.x also names the chosen row .ss-option-selected, where 2.x uses
.ss-selected, so the highlight and tick are re-declared here. */
/* Closed panels must not render. The compiled `.ss-content { display: flex
!important }` above is unscoped, so a shut dropdown stays laid out - only
opacity:0 and scaleY(0) hide it - and it still swallows clicks aimed at the
chips sitting near it. 1.x only shows the panel on .ss-open; restore that. */
#details-forms .details-form-container .ss-main .ss-content {
display: none !important;
border: 1px solid #d1d5dc;
border-radius: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
margin-top: 4px;
padding: 0;
overflow: hidden;
}
#details-forms .details-form-container .ss-main .ss-content .ss-search {
display: none !important;
}
#details-forms .details-form-container .ss-main .ss-content .ss-list {
max-height: 220px;
}
#details-forms .details-form-container .ss-main .ss-content .ss-list .ss-option {
padding: 10px 15px;
font-size: 14px;
color: #364153 !important;
}
#details-forms .details-form-container .chip-select-container .ss-main .ss-content .ss-list .ss-option {
padding: 8px 12px;
font-size: 13px;
}
#details-forms .details-form-container .ss-main .ss-content .ss-list .ss-option:hover,
#details-forms .details-form-container .ss-main .ss-content .ss-list .ss-option.ss-highlighted {
background-color: #f3f5f4;
color: #364153 !important;
}
#details-forms .details-form-container .ss-main .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
background-color: #ecfef2 !important;
color: #068834 !important;
display: flex;
align-items: center;
justify-content: space-between;
}
#details-forms .details-form-container .ss-main .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url(../../images/signup/tick.png);
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-left: 8px;
}
/* 1.x positions .ss-content with `position:absolute` and no `top`, relying on
its static position - i.e. straight after .ss-single-selected - to sit below
the control. The compiled rules above set .ss-main { display: flex }, and in a
flex container the static position of an absolutely positioned child is the
container's content-box origin, so the panel lands ON the control instead of
under it. Pin it explicitly. .ss-main is already position:relative in 1.x. */
#details-forms .details-form-container .ss-main .ss-content {
top: 100%;
left: 0;
width: 100%;
}
/* chip selects are width:fit-content, so the panel would inherit their narrow
width - give the year / language lists room to read */
#details-forms .details-form-container .chip-select-container .ss-main .ss-content {
min-width: 160px;
}
/* ...and show it only while open, which is 1.x's own rule (.ss-content.ss-open).
Belt and braces: a shut panel can never take a pointer event either. */
#details-forms .details-form-container .ss-main .ss-content.ss-open {
display: block !important;
}
#details-forms .details-form-container .ss-main .ss-content { pointer-events: none; }
#details-forms .details-form-container .ss-main .ss-content.ss-open { pointer-events: auto; }