overleaf/services/web/public/stylesheets/app/editor/feature-onboarding.less

@feat-onboard-wrapper-width: 820px;
@feat-onboard-max-text-width: 750px;

.feat-onboard {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .85);
	color: #FFF;
	text-align: center;
	z-index: 102;
	transition: left ease-in-out @left-menu-animation-duration;
	&::before {
		content: '';
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 0;
		opacity: 0;
		transition: opacity ease-in-out @left-menu-animation-duration, width ease-in-out @left-menu-animation-duration;
	}
}

.feat-onboard-step2 {
	left: @left-menu-width;
	&::before {
		content: '';
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: @left-menu-width;
		opacity: 1;
		background-image: linear-gradient(
			180deg,
			rgba(0,0,0,.85),
			rgba(0,0,0,.85) 530px,
			transparent 555px,
			transparent 585px,
			rgba(0,0,0,.85) 610px,
			rgba(0,0,0,.85)
		);
	}
}
	.feat-onboard-wrapper {
		position: fixed;
		top: 130px;
		left: 50%;
		width: @feat-onboard-wrapper-width;
		margin-left: -@feat-onboard-wrapper-width / 2;
		text-shadow: 0 0 70px rgba(255, 255, 255, 0.5);
	}
		.feat-onboard-title {
			color: @brand-primary;
			margin-bottom: 50px;

		}
			.feat-onboard-title-name {
				color: #FFF;
				font-weight: bold;
			}

		.feat-onboard-description {
			max-width: @feat-onboard-max-text-width;
			margin: 0 auto 40px;
			padding: 0 80px;
		}
			.feat-onboard-description-name {
				font-weight: bold;
			}

	.feat-onboard-video {
		box-shadow: 0 0 70px rgba(255, 255, 255, 0.3);
	}

	.feat-onboard-adv-wrapper {
		text-align: left;
		margin-bottom: 40px;
	}
		.feat-onboard-adv-title {
			color: #FFF;
			font-size: 23px;
		}
			.feat-onboard-adv-title-highlight {
				font-weight: bold;
			}

	.feat-onboard-btn-wrapper {
		margin-bottom: 10px;

		> .btn {
			box-shadow: 0 0 70px rgba(255, 255, 255, 0.3);
		}
	}