style.scss

@import "@automattic/onboarding/styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

body.is-section-signup {
	// Use WordPress.com’s brand color for the signup background
	background: var(--color-wordpress-com);

	&.is-white-signup {
		background: #fdfdfd;

		.layout:not(.dops) .wpcom-site__logo {
			fill: var(--color-neutral-10);
			color: var(--color-neutral-10);
			opacity: 1;

			path {
				fill: var(--color-neutral-10);
				opacity: 1;
			}
		}
		/**
		* Removed the navigation back button step from mobile viewports.
		* This is done because the there is usally already a back button displayed to the user (Browser back button)
		* and the current back button is redundent.
		*/
		.signup__step.is-plans-link-in-bio .step-wrapper__navigation,
		.signup__step.is-plans-newsletter .step-wrapper__navigation,
		.signup__step.is-mailbox-plan .step-wrapper__navigation,
		.signup__step.is-plans .step-wrapper__navigation,
		.signup__step.is-domains .step-wrapper__navigation,
		.signup__step.is-mailbox-domain .step-wrapper__navigation {
			@include breakpoint-deprecated( "<660px" ) {
				display: none;
			}
		}
	}
	&.is-videopress-signup {
		background: var(--videopress-color-background-dark);
		color: var(--videopress-color-text);

		&.has-loading-screen-signup {
			background: var(--videopress-color-background-dark);
			color: var(--videopress-color-text);
			&::before {
				content: "";
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(126.81deg, #001424 7.92%, #02223a 89.27%);
				animation: p2-fade 5s ease-in-out infinite alternate;
			}
		}

		.layout {
			height: 100%;
			display: flex;
			flex-direction: column;
			background: var(--videopress-color-background-dark);
			// color: var( --videopress-color-text );
		}

		.layout__content,
		.layout__primary,
		.signup,
		.signup__steps,
		.signup__step,
		.signup__step.is-user {
			padding: 0;
			height: 100%;
		}

		.layout:not(.dops) .step-wrapper {
			margin: 0 0 24px;
			max-width: none;
		}

		@include breakpoint-deprecated( "<480px" ) {
			.locale-suggestions {
				margin-top: 0;
				.notice {
					border-radius: 0;
				}
			}
		}
	}

	&.is-p2-signup {
		background: var(--p2-color-white);
		color: var(--p2-color-text);
		letter-spacing: -0.01em;

		&.has-loading-screen-signup {
			background: var(--p2-color-text);
			color: var(--p2-color-white);
			&::before {
				content: "";
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(126.81deg, #001424 7.92%, #02223a 89.27%);
				animation: p2-fade 5s ease-in-out infinite alternate;
			}
		}

		.layout {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.layout__content,
		.layout__primary,
		.signup,
		.signup__steps,
		.signup__step,
		.signup__step.is-user {
			padding: 0;
			height: 100%;
		}

		.layout:not(.dops) .step-wrapper {
			margin: 0 0 24px;
			max-width: none;
		}

		@include breakpoint-deprecated( "<480px" ) {
			.locale-suggestions {
				margin-top: 0;
				.notice {
					border-radius: 0;
				}
			}
		}
	}

	// Adjust the padding as we no longer
	// show the masterbar.
	.layout__content {
		padding: 48px 0 0;
	}

	// Hide the masterbar for realz
	&.has-no-masterbar .masterbar {
		display: none;
	}

	// Force the masterbar for Crowdsignal OAuth pages
	.crowdsignal {
		.masterbar__crowdsignal {
			display: block;
		}

		.layout__content {
			padding: 140px 0 0;
		}
	}

	.layout__secondary {
		background: var(--color-primary);
		border: 0;
	}
}

// Notice the :not(.dops) selector. I've added this to try and
// avoid stepping on the toes of our oauth users, like Crowdsignal.
body.is-section-signup .layout:not(.dops),
body.is-section-signup .layout.gravatar {
	// Update the logo that appears when loading Calypso
	// to match the homepage, using primary-dark with opacity.
	.wpcom-site__logo {
		fill: var(--color-primary-dark);
		color: var(--color-primary-dark);
		opacity: 0.3;
	}

	// If there's an error lets make it look a little better
	// on the primary colored background.
	.empty-content {
		.empty-content__illustration {
			background: var(--color-surface);
			padding-bottom: 16px;
			margin-bottom: 24px;
			border-radius: 6px; /* stylelint-disable-line scales/radii */
			@include elevation( 3dp );
		}

		.empty-content__title {
			color: var(--color-text-inverted);
		}
	}

	//Masterbar is hidden but still has height
	//which is how sticky panel offset is calculated.
	//Setting height to zero removes the offset
	//so the sticky panel sticks to the top.
	&.has-no-masterbar .masterbar {
		height: 0;
	}

	// This allows us to position the search suggestions
	// relative to their fieldset.
	.form-fieldset {
		position: relative;
	}

	.suggestions {
		position: absolute;
		top: 42px;
		left: 0;
		right: 0;
		max-height: 350px;
		overflow: auto;
		@include elevation( 2dp );
	}

	@include breakpoint-deprecated( "<660px" ) {
		.layout:not(.is-horizontal-layout) button:not(.is-compact):not(.is-primary) {
			font-size: $font-body;
			padding-top: 12px;
			padding-bottom: 14px;
		}
	}
}

// Signup headings
body.is-section-signup .layout:not(.dops):not(.is-wccom-oauth-flow) .formatted-header,
body.is-section-signup .layout.gravatar .formatted-header {
	margin: 0 0 16px;

	.formatted-header__title {
		margin: 0;
		font-weight: 400;
		color: var(--color-text-inverted);
	}

	.formatted-header__subtitle {
		margin: 8px 0 0;
		font-size: $font-body;
		color: var(--color-text-inverted);
	}

	a {
		color: var(--color-neutral-0);
		text-decoration: underline;

		&:hover {
			color: var(--color-text-inverted);
		}
	}
}

.is-section-signup .layout__content,
.is-section-signup .layout__primary {
	overflow: visible;
}

.layout.is-wccom-oauth-flow {
	@import "jetpack-connect/colors.scss";
	@include woocommerce-colors();
	background-color: var(--color-woocommerce-onboarding-background);
	height: 100%;

	.woocommerce-muriel-text-control,
	.muriel-input-text {
		border-color: var(--color-neutral-20);

		.text-control__label,
		.components-base-control__label {
			color: var(--color-neutral-50);
			font-size: $font-body-extra-small;
			font-weight: normal;
		}

		&.active {
			box-shadow: 0 0 0 2px var(--studio-woocommerce-purple-60);
			border-color: transparent;
		}
	}

	.layout__content {
		padding-top: 48px;
	}

	.masterbar {
		display: none;
	}

	.signup-form__woocommerce-wrapper {
		text-align: center;
		border-bottom: 1px solid var(--color-neutral-50);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 56px;

		svg > g {
			transform: translateX(50%);
		}
	}

	.signup-form__woocommerce-logo {
		margin: 0;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		padding-left: 0;
		display: block;
		height: 56px;
		border-bottom: 1px solid var(--color-woocommerce-header-border);
		background: var(--color-text-inverted);

		svg {
			margin-top: 15px;
		}
	}

	.signup-form__woocommerce-heading {
		margin-top: 32px;
	}

	.formatted-header {
		max-width: 476px;
		margin-right: auto;
		margin-left: auto;

		.formatted-header__subtitle {
			color: var(--color-primary-10);
			margin-top: 1em;
			font-size: $font-body;
			line-height: 24px;
			font-weight: 400;
		}
	}

	.logged-out-form {
		max-width: 476px;
	}

	.logged-out-form__link-item {
		text-align: center;
		text-decoration: underline;
		color: var(--studio-gray-60);
		font-size: $font-body-small;
	}

	.signup-form__terms-of-service-link {
		text-align: left;
		color: var(--studio-gray-60);
	}

	.signup-form__terms-of-service-link a,
	.signup-form__social-buttons-tos a {
		text-decoration: underline;
	}

	.signup-form__social {
		padding-bottom: 0;
		margin-top: 16px;
		p {
			font-size: $font-body-extra-small;
			color: var(--studio-gray-60);
		}

		.social-buttons__button {
			border: 1px solid var(--studio-pink-50);
			color: var(--studio-pink-50);
			box-shadow: none;
			max-width: 250px;
			height: 48px;
		}
	}

	.logged-out-form__footer {
		text-align: center;
		.button.is-primary {
			border: 0;
			box-shadow: none;
			max-width: 310px;
			margin-right: auto;
			margin-left: auto;
			height: 48px;
		}
	}
}

/**
 * Common styles for reskinSignupFlow a/b test
 */
body.is-section-signup.is-white-signup .layout:not(.dops):not(.is-wccom-oauth-flow) {
	$gray-100: #101517;
	$gray-60: #50575e;
	$gray-50: #646970;
	$breakpoint-mobile: 660px;

	--color-accent: #117ac9;
	--color-accent-60: #0e64a5;

	.signup-header {
		.wordpress-logo {
			position: absolute;
			inset-inline-start: 20px;
			inset-block-start: 20px;
			fill: var(--color-text);
			transform-origin: 0 0;
		}
		.signup-header__right {
			inset-block-start: 22px;
			inset-inline-end: 20px;

			.flow-progress-indicator {
				font-weight: 500;
				font-size: 0.875rem;
				color: var(--studio-gray-30);
			}
		}

		@include break-small {
			.wordpress-logo {
				inset-inline-start: 24px;
			}

			.signup-header__right {
				inset-inline-end: 24px;
			}
		}
	}

	.navigation-link.button.is-borderless {
		color: var(--color-accent);

		svg {
			fill: var(--color-accent);
		}
	}

	.step-wrapper__navigation {
		.navigation-link.button.is-borderless {
			color: $gray-100;

			svg {
				width: 20px;
				height: 20px;
				top: 5px;
				margin-right: 2px;
				fill: $gray-100;
			}
		}

		@include break-small {
			inset-inline-start: 72px;
			inset-inline-end: 24px;
		}
	}

	.step-wrapper:not(.is-horizontal-layout) {
		.step-wrapper__header {
			margin: 24px 20px;

			@include break-large {
				margin: 48px 0 40px;
			}
		}
	}

	.step-wrapper__header-button {
		@include breakpoint-deprecated( "<660px" ) {
			margin-top: 16px;
			margin-bottom: -16px;
		}
	}

	.formatted-header {
		margin: 0;

		.formatted-header__title {
			@include onboarding-font-recoleta;
			color: $gray-100;
			letter-spacing: 0.2px;
			font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */

			@include break-xlarge {
				font-size: 2.75rem;
			}
		}

		.formatted-header__subtitle {
			color: $gray-60;
			font-size: 1rem;

			@include breakpoint-deprecated( "<660px" ) {
				margin-top: 16px;
			}
		}

		.formatted-header__title,
		.formatted-header__subtitle {
			padding: 0 20px;
			text-align: center;

			@include break-xlarge {
				padding: 0;
			}
		}

		&.is-left-align {
			.formatted-header__title,
			.formatted-header__subtitle {
				padding: 0;
				text-align: start;
			}
		}

		&.is-right-align {
			.formatted-header__title,
			.formatted-header__subtitle {
				padding: 0;
				text-align: end;
			}
		}
	}

	.signup__step.is-user {
		.formatted-header {
			.formatted-header__title {
				text-align: center;

				@include break-small {
					max-width: inherit;
					font-size: 3.25rem; /* stylelint-disable-line scales/font-sizes */
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 3.5rem;
				}
			}

			.formatted-header__subtitle {
				text-align: center;
				color: #646970;

				a {
					color: var(--studio-gray-90);
					text-decoration: underline;
					cursor: pointer;
				}

				@include break-small {
					max-width: inherit;
					font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 1.625rem;
					letter-spacing: 0.24px;
				}
			}
		}

		button.signup-form__submit[disabled],
		button.signup-form__submit:disabled,
		button.signup-form__submit.disabled {
			background-color: var(--studio-gray-20);
			color: var(--color-surface);
		}

		button.signup-form__submit {
			border-radius: 4px;
			max-width: 408px;
			height: 44px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			font-weight: 500;
			letter-spacing: 0.32px;
			line-height: 17px;
		}

		.signup-form__social-buttons {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
		}

		.social-buttons__button {
			text-align: start;
			padding-left: 0;
			padding-bottom: 0;
			border: 0;
			box-shadow: none;
			background-color: transparent;

			@include break-small {
				text-align: center;
				margin-bottom: 5px;
			}

			@include break-medium {
				text-align: start;
			}

			> svg {
				border: 1px solid var(--studio-gray-10);
				padding: 12px;
				border-radius: 24px; /* stylelint-disable-line scales/radii */
			}
		}

		.signup-form__terms-of-service-link {
			text-align: start;
			font-size: 0.875rem;
			margin-bottom: 32px;
		}

		.form-password-input .form-password-input__toggle-visibility {
			right: 17px;
		}

		.signup-form.is-horizontal {
			$breakpoint-mobile: 660px;
			$separator-style: 1px solid #eaeaeb;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			margin-top: 40px;
			justify-content: center;

			@include break-mobile {
				margin-top: 48px;
			}

			@include break-small {
				flex-direction: row;
			}

			.logged-out-form,
			.signup-form__social {
				background-color: #fdfdfd;
				width: unset;
				max-width: 408px;
				padding: 0 16px;
				box-shadow: none;
				margin: 0;

				@include break-mobile {
					max-width: 600px;
				}

				@include break-small {
					max-width: 408px;
				}

				@include break-medium {
					max-width: 350px;
				}

				@include break-large {
					max-width: 408px;
				}
			}

			.logged-out-form {
				width: 100%;
				margin: 0;
			}

			> .logged-out-form__links {
				max-width: 100%;
				margin-top: 30px;

				@media screen and ( max-width: $breakpoint-mobile ) {
					margin-top: 0;

					&::before,
					&::after {
						content: "";
						display: block;
						margin: 40px auto 24px;
						border: 0;
						padding: 0;
						border-top: $separator-style;
						width: 90px;
					}
				}
			}

			.logged-out-form__footer {
				margin-top: 0;
			}

			.signup-form__recaptcha-tos {
				padding: 0 16px;
				font-size: 0.75rem;

				.logged-out-form__links {
					margin: 0;
					padding: 0;
					text-align: start;

					&::before {
						content: none;
					}

					@include break-small {
						text-align: center;
					}

					@include break-medium {
						text-align: start;
					}
				}
			}

			.signup-form__input.form-text-input {
				margin-bottom: 16px;
				height: 44px;
				max-width: 408px;
				border-radius: 4px;
				border: 1px solid var(--studio-gray-10);
			}

			.form-password-input {
				max-width: 408px;
			}

			.signup-form__social p {
				text-align: start;
			}

			.signup-form__social > p {
				display: none;
			}

			.signup-form__separator {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc(100% - 32px);
				margin: 20px auto;

				@include break-medium {
					width: 60px;
					margin: 0;
				}

				&::before {
					position: absolute;
					content: "";
					border-inline-start: 0;
					border-block-start: $separator-style;
					inset-block-start: 50%;
					inset-inline-start: 0;
					height: 0;
					width: 100%;

					@include break-medium {
						border-inline-start: $separator-style;
						border-block-start: 0;
						inset-block-start: 0;
						inset-inline-start: 50%;
						height: 100%;
					}
				}
			}

			.signup-form__separator-text {
				background-color: #fdfdfd;
				text-transform: uppercase;
				text-align: center;
				padding: 24px 0;
				font-size: 0.75rem;
				z-index: 1;
				color: var(--studio-gray-50);

				@media screen and ( max-width: $breakpoint-mobile ) {
					padding: 0 24px;
				}
			}

			.social-buttons__service-name {
				margin-inline-start: 12px;
			}

			p.signup-form__social-buttons-tos {
				font-size: 0.75rem;
				text-align: start;
				padding-inline-start: 0;
				margin-top: 19px;

				@include break-small {
					text-align: center;
				}

				@include break-medium {
					text-align: start;
				}
			}
		}
	}

	.signup__step.is-domains,
	.signup__step.is-mailbox-domain,
	.signup__step.is-emails,
	.signup__step.is-mailbox,
	.signup__step.is-plans-newsletter,
	.signup__step.is-plans-link-in-bio,
	.signup__step.is-mailbox-plan,
	.signup__step.is-plans {
		.formatted-header {
			.formatted-header__title {
				font-size: 2.25rem;
				/* stylelint-disable-next-line declaration-property-unit-allowed-list */
				line-height: 2.5rem;

				@include break-mobile {
					font-size: 2.75rem;
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 3rem;
				}
			}
		}
	}

	.signup__step.is-domains,
	.signup__step.is-mailbox-domain,
	.signup__step.is-emails,
	.signup__step.is-mailbox,
	.is-domain-only {
		@include break-large {
			margin: 0 0 0 20px;
		}

		@include break-wide {
			padding-inline-start: 20px;
		}
		.is-wide-layout {
			max-width: 1280px;
		}

		.formatted-header__subtitle {
			text-align: start;
		}

		.formatted-header__title {
			text-align: start;
		}
	}

	.signup__step.is-plans-link-in-bio,
	.signup__step.is-plans-newsletter,
	.signup__step.is-mailbox-plan,
	.signup__step.is-plans {
		.formatted-header__title {
			font-weight: 500;
		}

		.formatted-header__subtitle button.is-borderless {
			font-weight: 500;
			color: var(--studio-gray-90);
		}
	}

	.signup__step.is-design-setup-site,
	.signup__step.is-difm-design-setup-site {
		.step-wrapper__header {
			@include breakpoint-deprecated( "<660px" ) {
				margin-left: 0;
				margin-right: 0;
			}
		}

		.design-picker__preview .step-wrapper__header {
			margin-top: 40px;

			.formatted-header__title {
				font-size: 2rem;
			}

			@include break-mobile {
				margin-top: 12px;
			}
		}
	}

	button.is-borderless {
		box-shadow: none;
		border: 0;
	}

	.inline-help {
		@include breakpoint-deprecated( "<660px" ) {
			bottom: 74px;
		}
	}
}