zaufane.pl/layout/style-scss/checklista-thank.scss

@import '_variables';
@import '_mixins';

@font-face {
	font-family: 'Proxima Nova Bl';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Black.eot');
	src: local('Proxima Nova Black'), local('ProximaNova-Black'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot');
	src: local('Proxima Nova Extrabold'), local('ProximaNova-Extrabld'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot');
	src: local('Proxima Nova Semibold Italic'), local('ProximaNova-SemiboldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2')
			format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf')
			format('truetype');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot');
	src: local('Proxima Nova Thin'), local('ProximaNovaT-Thin'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Light.eot');
	src: local('Proxima Nova Light'), local('ProximaNova-Light'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot');
	src: local('Proxima Nova Black Italic'), local('ProximaNova-BlackIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot');
	src: local('Proxima Nova Bold Italic'), local('ProximaNova-BoldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot');
	src: local('Proxima Nova Thin Italic'), local('ProximaNova-ThinIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot');
	src: local('Proxima Nova Bold'), local('ProximaNova-Bold'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot');
	src: local('Proxima Nova Regular Italic'), local('ProximaNova-RegularIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.ttf')
			format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot');
	src: local('Proxima Nova Extrabold Italic'), local('ProximaNova-ExtrabldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff2')
			format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.ttf')
			format('truetype');
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot');
	src: local('Proxima Nova Regular'), local('ProximaNova-Regular'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot');
	src: local('Proxima Nova Light Italic'), local('ProximaNova-LightIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot');
	src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

$cGreen: #2bac25;
$cYellow: #ffc400;

.main_content {
	// max-width: 1240px;
	// width: 90%;
	margin: auto;
	padding-left: 0;
	padding-right: 0;
}

.container {
	@media screen and (min-width: 1300px) {
		max-width: 1240px;
	}
}

body {
	background: url('/layout/ebook/body-bg.jpg') no-repeat top right #fffbee;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

header {
	.content {
		@extend .main_content;
		display: flex;
		justify-content: space-between;
		padding-top: 40px;
		padding-bottom: 60px;

		@media (max-width: 500px) {
			flex-direction: column;
			align-items: center;
			gap: 30px;
		}

		.logo {
			width: 150px;

			img {
				width: 100%;
			}
		}

		.button {
			.btn {
				display: flex;
				gap: 5px;
				background: $cGreen;
				padding: 0 20px;
				height: 50px;
				align-items: center;
				justify-content: center;
				border-radius: 12px;
				color: #fff;
				font-family: 'Proxima Nova';
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
}

.box-04 {
	position: relative;
	background: $cYellow;
	padding: 70px 0 90px;
	overflow: hidden;
	flex: 1;
	display: flex;
	align-items: center;

	> img {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(50%);
	}

	.content {
		@extend .main_content;
		position: relative;
		background: #fffbee;
		border-radius: 10px;
		display: grid;
		grid-template-columns: 1fr 1fr 50px;
		align-items: center;

		@media (max-width: 991px) {
			grid-template-columns: 1fr;
		}

		.left {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 5%;

			h2 {
				font-family: 'Proxima Nova';
				font-size: 48px;
				font-weight: 900;
				color: #000;
				margin-bottom: 30px;

				span {
					color: $cYellow;
				}
			}

			p {
				font-family: 'Proxima Nova';
				font-size: 26px;
				margin-bottom: 0;
				position: relative;
			}
		}

		.right {
			position: relative;

			img {
				margin-bottom: -35px;
				width: 100%;
				max-width: fit-content;

				@include respond-below(md) {
					display: none;
				}
			}
		}
	}
}

footer {
	background: url('/layout/ebook/footer-bg.png') no-repeat center;
	padding-top: 40px;
	padding-bottom: 40px;

	.content {
		@extend .main_content;
		display: flex;
		justify-content: space-between;

		@media (max-width: 767px) {
			flex-direction: column-reverse;
			align-items: center;
			gap: 20px;
		}

		.left {
			padding-left: 100px;
			display: flex;
			gap: 50px;
			font-family: 'Proxima Nova';
			font-size: 14px;
			color: #000;

			@media (max-width: 767px) {
				padding-left: 0;

				flex-direction: column;
				gap: 20px;
			}

			.links {
				ul {
					list-style-type: none;
					margin: 0;
					padding: 0;

					li {
						a {
							color: #000;
						}
					}
				}
			}

			p {
				margin-bottom: 0;

				span {
					font-weight: 600;
				}

				a {
					color: #000;
					text-decoration: none;
				}
			}
		}
	}
}

.footer-bottom {
	background: #000;
	padding-top: 20px;
	padding-bottom: 20px;

	.content {
		@extend .main_content;
		display: flex;
		justify-content: space-between;
		color: rgba(255, 251, 238, 0.7);
		font-family: 'Proxima Nova';
		font-size: 14px;
	}
}

#custom-form-response {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid $cYellow;
	border-radius: 24px;
	background: $cWhite;
	padding: 40px;
	gap: 20px;

	p {
		margin-bottom: 0;
	}
}

#custom-form {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid $cYellow;
	border-radius: 24px;
	background: $cWhite;
	padding: 40px;
	gap: 20px;

	p {
		margin: 0;

		strong {
			display: inline-block;
			color: $cBlackText;
			font-size: 14px;
			font-weight: 700;
			font-family: $font-5;
			line-height: 1;
			margin-bottom: 55px;
		}
	}

	input[type='range'] {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		cursor: pointer;
		outline: none;
		border-radius: 0px;
		height: 2px;
		background: #eaeaea;

		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			height: 16px;
			width: 16px;
			background: transparent;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-size: cover;
			border: none;
			box-shadow: none;
		}

		&::-moz-range-thumb {
			height: 16px;
			width: 16px;
			background: transparent;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-size: cover;
			border: none;
			box-shadow: none;
		}
	}

	.f-row {
		position: relative;
	}
	.range-output {
		position: absolute;
		left: 50%;
		width: max-content;
		padding: 8px 12px;
		color: #000;
		font-weight: 700;
		line-height: 1;
		background: #fff;
		border: 2px solid #eaeaea;
		border-radius: 4px;
		transform: translate(-50%, calc(-100% - 3px));
		box-shadow: 0 2px 4px 0 rgba(#000, 0.04);

		&::before {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			width: 5px;
			height: 5px;
			border-bottom: 3px solid #eaeaea;
			border-right: 3px solid #eaeaea;
		}
	}

	.min {
		left: 0;
	}
	.max {
		right: 0;
	}
	.min,
	.max {
		position: absolute;
		bottom: 15px;

		color: #b9b9b9;
		font-weight: 700;
		font-size: 14px;
		line-height: 1;
	}

	.tile {
		position: relative;
		margin-bottom: 20px;

		label {
			position: absolute;
			top: 50%;
			left: 20px;
			color: #b9b9b9;
			font-size: 14px;
			font-weight: 600;
			line-height: 1;
			margin: 0;
			transform: translateY(-50%);
			transition: all 250ms ease;
		}
		input {
			background: #f9f9f9;
			height: 53px;
			width: 100%;
			border: none;
			border-radius: 6px;
			padding: 10px 20px;

			color: #000;
			font-size: 14px;
			font-weight: 700;
			line-height: 1;
			outline: none;
		}

		input:focus ~ label,
		input:not(:placeholder-shown) ~ label {
			top: 0;
			color: #b9b9b9;
			font-size: 12px;
		}
	}

	.checkbox-row {
		display: flex;
		flex-direction: row;
		gap: 10px;

		label {
			font-size: 14px;
			font-weight: 500;
			line-height: 1;
			font-family: $font-5;
			color: rgba(#000, 0.8);
			margin: 0;

			a {
				color: $cYellow;
				text-decoration: underline;
			}
		}

		input[type='checkbox'] {
			appearance: none;
			position: relative;
			width: 20px;
			height: 20px;
			border: 1px solid #ebebeb;
			border-radius: 6px;
			background: #f9f9f9;
			width: 20px;
			min-width: 20px;
			height: 20px;
			overflow: hidden;
			cursor: pointer;

			&:checked {
				&::before {
					top: 9px;
					left: 6px;
				}
				&::after {
					top: 10px;
					left: 4px;
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: -11px;
				left: 26px;
				width: 10px;
				height: 2px;
				background: #000;
				transform: rotate(-50deg);
				transition: all 250ms ease;
			}

			&::after {
				content: '';
				position: absolute;
				top: -10px;
				left: -16px;
				width: 5px;
				height: 2px;
				background: #000;
				transform: rotate(50deg);
				transition: all 250ms ease;
			}
		}
	}
	.btn1 {
		font-family: $font-1;
		font-weight: 700;
		font-size: 14px;
		padding: 15px 25px;
		letter-spacing: 0.7px;
		display: inline-block;

		cursor: pointer;
		background: $cGreen;
		color: #fff;
		border: none;
		border-radius: 12px;

		@include respond-between(md, lg) {
			padding: 15px 10px;
			font-size: 13px;
		}

		@include respond-between(sm, md) {
			font-size: 14px;
			padding: 15px 27px;
		}

		@include respond-below(xs) {
			font-size: 13px;
			padding: 12px 14px;
		}

		&:focus {
			outline: none;
		}

		&:hover {
			color: #fff;
		}
	}
}