style.scss

// CSS VARIABLES
:root {
	// COLORS
	--text: rgba(0, 0, 0, 1);
	--bg: rgba(255, 255, 255, 1);
	--bg-alt: rgba(250, 250, 250, 1);
	--accent: rgba(0, 122, 255, 1);

	// DARK MODE COLORS
	@media (prefers-color-scheme: dark) {
		--text: rgba(255, 255, 255, 1);
		--bg: rgba(0, 0, 0, 1);
		--bg-alt: rgba(5, 5, 5, 1);
		--accent: rgba(255, 0, 0, 1);
	}

	// SWIPER
	--swiper-theme-color: var(--accent) !important;

	--swiper-navigation-size: 1.5em !important;
	@media screen and (min-width: 768px) {
		--swiper-navigation-size: 2.5em !important;
	}
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	// TEXT-RENDERING
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	// FONT SMOOTHING
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: grayscale;
	// SMOOTH SCROLLING
	scroll-behavior: smooth;
}

body {
	font-size: 0.875rem;
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	padding: 0;
	margin: 0;
	// STOP OVERFLOWING ELEMENTS
	overflow-x: hidden;

	@media screen and (min-width: 768px) {
		font-size: 1rem;
	}
}

// Mobile Safari - Fixes the blinking effect when a link has been hit
body * {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*,
*::before,
*::after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

img {
	display: block;
	width: 100%;
}

.container {
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
}

.bg-default {
	background-color: var(--bg);
}

.bg-alt {
	background-color: var(--bg-alt);
}

.text-default {
	color: var(--text);
}

.text-accent {
	color: var(--accent);
}

.text-center {
	text-align: center;
}

h1,
h2,
h3,
h4 {
	text-transform: uppercase;
	font-weight: 700;
}

a {
	font-weight: 700;
	color: inherit;
}

// BUTTON
a.btn {
	border: 1px solid var(--text);
	padding: 12px 20px;
	text-decoration: none;
	transition: all 400ms;
	text-transform: uppercase;

	&:hover,
	&:focus {
		background-color: var(--text);
		color: var(--bg);
	}
}

.padding-default {
	padding: 0 20px;

	@media screen and (min-width: 768px) {
		padding: 0 30px;
	}
}
// HEADER
.header {
	// .header-bg
	&-bg {
		background-image: url(img/hero-768-min.jpg);
		background-size: cover;
		background-position: 49% 25%;
		background-repeat: no-repeat;
		min-height: 640px;
		max-height: 100vh;

		@media screen and (min-width: 769px) {
			background-image: url(img/hero-1154-min.jpg);
		}

		@media screen and (min-width: 1155px) {
			background-image: url(img/hero-1920-min.jpg);
		}

		@media screen and (min-width: 1921px) {
			background-image: url(img/hero-2560-min.jpg);
		}
	}

	// .header-nav-wrapper
	&-nav-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;
		text-transform: uppercase;

		// .header-nav-wrapper .logo
		.logo {
			width: 160px;
			height: 33px;
		}

		// .header-nav-wrapper .primary-nav-wrapper
		.primary-nav-wrapper {
			position: fixed;
			z-index: 99;
			top: 0;
			left: 0;
			opacity: 0;
			visibility: hidden;
			transition: all 400ms;
			width: 100%;
			height: 100%;

			@media screen and (min-width: 768px) {
				position: relative;
				opacity: 1;
				visibility: visible;
				width: auto;
				height: auto;
			}

			&.open {
				visibility: visible;
				opacity: 1;
				background-color: rgba(0, 0, 0, 0.85);

				@media screen and (min-width: 768px) {
					background-color: transparent;
				}
			}
		}

		// .header-nav-wrapper nav
		nav {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			// padding-top: 5px;
			// padding-left: 30px;

			ul {
				list-style: none;
				margin: 0;
				padding: 0;

				@media screen and (min-width: 768px) {
					display: inline-block;
					margin: 0;
					padding: 0;
				}

				li {
					font-size: 1rem;
					padding: 5px 30px 0;

					@media screen and (min-width: 768px) {
						padding: 5px 12px 0;
						display: inline-block;

						&:last-child {
							padding-right: 0;
						}
					}

					@media screen and (min-width: 960px) {
						// font-size: 1rem;
						padding: 5px 16px 0;
					}

					a {
						display: block;
						padding-bottom: 40px;
						color: #fff;
						text-decoration: none;

						// DESKTOP
						@media screen and (min-width: 768px) {
							position: relative;
							padding-bottom: 5px;
							transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
							-webkit-tap-highlight-color: transparent;
						}

						&:hover {
							opacity: 1;

							&:before {
								visibility: visible;
								transform: scaleX(1);
							}
						}

						// DESKTOP
						&:before {
							@media screen and (min-width: 768px) {
								position: absolute;
								bottom: 0;
								left: 0;
								visibility: hidden;
								width: 100%;
								height: 1px;
								content: "";
								transition: all 400ms ease-in-out 0s;
								transform: scaleX(0);
								background-color: #fff;
							}
						}
					}
				}
			}
		}

		.is-visible {
			visibility: visible;
			opacity: 1;
		}
	}
}

.nav-toggle {
	position: absolute;
	z-index: 999;
	top: 50%;
	left: 50%;
	padding: 10px 30px 10px 0px;
	cursor: pointer;
	transform: translate(-50%, -50%);
	// -webkit-transform: translate(-50%, -50%);

	.nav-text,
	.active .nav-text {
		transition: all 0s;
	}

	// BURGER
	.bar {
		background: #fff;
		display: block;
		height: 1px;
		margin-top: 0;
		opacity: 1;
		position: absolute;
		right: 0;
		top: 50%;
		transform: rotate(0deg);
		transition: transform 164ms ease-in 0s, margin 164ms ease-out 164ms;
		width: 28px;
		z-index: 1;

		&:nth-child(1) {
			margin-top: -5px;
		}
		&:nth-child(2) {
			margin-top: 3px;
		}
	}

	&.active .bar {
		transition: margin 164ms ease-in, transform 164ms ease-out 164ms;

		&:nth-child(1) {
			margin-top: -1px;
			transform: rotate(45deg);
		}

		&:nth-child(2) {
			margin-top: -1px;
			transform: rotate(-45deg);
		}
	}
}

.navicon {
	position: absolute;
	right: 6px;
	opacity: 1;
	visibility: visible;
	width: 20px;
	height: 20px;

	// DESKTOP
	@media screen and (min-width: 768px) {
		opacity: 0;
		visibility: hidden;
	}

	&.fixed {
		right: 26px;
	}
}

.fixed {
	position: fixed;
	z-index: 999;
}

// INTRO
.intro,
.quote {
	padding: 60px 0;

	h2 {
		max-width: 750px;
		margin: 0 auto;
		margin-bottom: 50px;
	}

	p {
		margin-bottom: 60px;
	}
}

.quote {
	h2 {
		max-width: 480px;
	}
}

// ABOUT
.about {
	&-flex {
		display: flex;
		flex-direction: column;
		min-height: 100vh;

		@media screen and (min-width: 768px) {
			flex-direction: row;
			min-height: auto;
		}

		&-reverse {
			@media screen and (min-width: 768px) {
				flex-direction: row-reverse;
				min-height: auto;
			}
		}

		&-image {
			flex: 1 1 auto;
			// background-image: url(img/cynthia-profile-768-min.jpg);
			background-image: url(img/profile-768-min.jpg);
			background-size: cover;
			background-position: 50% 15%;
			background-repeat: no-repeat;
			min-height: 540px;

			@media screen and (min-width: 768px) {
				flex: 1 1 50%;
			}
		}

		&-text {
			padding: 30px 20px;

			@media screen and (min-width: 768px) {
				flex: 1 1 50%;
				padding: 100px 50px;
			}
		}
	}

	&-btn {
		margin-top: 50px;
	}
}

// SERVICES
.services {
	padding: 40px 0 0;

	h2 {
		margin-bottom: 3rem;
	}

	&-padding {
		padding-left: 20px;
		padding-right: 20px;
	}

	&-flex {
		display: flex;
		flex-direction: column;

		@media screen and (min-width: 640px) {
			flex-direction: row;
			flex-wrap: wrap;
		}

		&-item {
			flex: 1;
			border: 10px solid transparent;
			margin-bottom: 30px;
			// APPLY BLACK AND WHITE
			filter: grayscale(100%);
			transition: all 400ms;

			&:hover,
			&:focus {
				// SCALE
				transform: scale(1.05);
				// REMOVE BLACK AND WHITE
				filter: grayscale(0%);
				border: 10px solid var(--accent);
			}

			@media screen and (min-width: 640px) {
				flex: 1 1 45%;

				&:nth-child(odd) {
					margin-right: 5px;
				}
			}

			// @media screen and (min-width: 960px) {
			// 	flex: 1 1 22%;

			// 	&:last-child {
			// 		margin-right: 0;
			// 	}
			// }

			.image {
				min-height: 420px;
				background-size: cover;
				background-position: 50% 40%;
				background-repeat: no-repeat;

				&-one {
					// background-image: url(img/pro-03-500-min.jpg);
					background-image: url(img/personal-training-640-min.jpg);
					background-position: 36% 50%;
				}

				&-two {
					// background-image: url(img/pro-05-500-min.jpg);
					background-image: url(img/womens-specialist-640-min.jpg);
				}

				&-three {
					// background-image: url(img/pro-07-500-min.jpg);
					background-image: url(img/nutritional-adviser-640-min.jpg);
				}

				&-four {
					// background-image: url(img/pro-17-500-min.jpg);
					background-image: url(img/animal-flow-640-min.jpg);
				}
			}

			.text {
				padding: 20px 15px 40px;

				@media screen and (min-width: 640px) {
					padding: 15px 15px 40px;
				}
			}
		}
	}
}

// FULL WIDTH IMAGE
.full-width-image {
	background-image: url(img/pro-11-768-min.jpg);
	background-size: cover;
	background-position: 38% 47%;
	background-repeat: no-repeat;
	min-height: 640px;

	@media screen and (min-width: 769px) {
		background-image: url(img/pro-11-1154-min.jpg);
	}

	@media screen and (min-width: 1155px) {
		background-image: url(img/pro-11-1920-min.jpg);
	}

	@media screen and (min-width: 1921px) {
		background-image: url(img/pro-11-2560-min.jpg);
	}
}

// SUCCESS STORIES
.success-stories {
	padding: 40px 0;

	figure {
		margin: 0 1em;

		@media screen and (min-width: 768px) {
			margin: 0 3em;
		}
	}

	blockquote,
	figcaption {
		margin: 0 0 1.5em 0;

		p {
			font-size: 0.85rem;

			@media screen and (min-width: 768px) {
				font-size: 1rem;
			}
		}
	}

	// GAP BETWEEN SLIDE AND BUTTONS
	.swiper {
		padding: 1.5em 1em 3em;
	}

	// ARROWS
	.swiper-button {
		// COLOR
		&-prev,
		&-next {
			display: none;

			@media screen and (min-width: 768px) {
				display: block;
				color: var(--text);
			}
		}

		// POSITION
		&-prev {
			left: 1em;
		}

		// POSITION
		&-next {
			right: 1em;
		}
	}

	.swiper-horizontal > .swiper-pagination-bullets,
	.swiper-pagination-bullets.swiper-pagination-horizontal,
	.swiper-pagination-custom,
	.swiper-pagination-fraction {
		bottom: 0;
	}

	.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px);
	}

	.swiper-pagination-bullet {
		width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
		height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
		background: var(--swiper-pagination-bullet-inactive-color, var(--text));
		opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.5);
	}

	.swiper-pagination-bullet-active {
		opacity: var(--swiper-pagination-bullet-opacity, 1);
		background: var(--swiper-pagination-color, var(--swiper-theme-color));
	}
}

// CONTACT
.contact {
	padding: 40px 0;

	&-flex {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		@media screen and (min-width: 768px) {
			flex-direction: row;
		}

		&-left {
			flex: 1 1 40%;

			.name-and-title {
				margin-bottom: 30px;

				h2,
				h3 {
					margin: 0;
					line-height: 1;
				}
			}

			.details {
				margin-bottom: 50px;

				p {
					margin: 0;

					a {
						font-weight: 300;
						text-decoration: none;

						&:hover,
						&:focus {
							text-decoration: underline;
						}
					}
				}
			}

			.logo {
				text-align: center;

				@media screen and (min-width: 768px) {
					text-align: left;
				}

				svg,
				img {
					fill: var(--text);
					width: auto;
					max-width: 160px;
				}
			}
		}

		&-right {
			flex: 1 1 60%;

			.images-wrapper {
				list-style-type: none;
				max-width: 560px;
				margin: 50px auto;
				padding: 0;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				li {
					flex: 1;
					min-width: 125px;
					max-width: 125px;
					padding: 15px;

					// THE SVG MUST BE PART OF THE DOM FOR THIS TO WORK.
					// IT MUST BE INLINE THE HTML.
					// AN IMG TAG WITH THE PATH TO THE SVG WON'T WORK
					svg,
					img {
						display: block;
						width: 100%;
						fill: var(--text);
					}
				}
			}
		}
	}
}

// FOOTER
.footer {
	padding: 40px 0;

	&-flex {
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;

		@media screen and (min-width: 768px) {
			flex-direction: row;
		}

		// COPYRIGHT
		&-left {
			font-size: 0.7rem;

			@media screen and (min-width: 768px) {
				font-size: 0.85rem;
			}
		}

		// SOCIAL MEDIA
		&-right {
			ul.social-media-links {
				list-style-type: none;
				margin: 0 0 15px 0;
				padding: 0;
				display: flex;
				flex-direction: row;

				@media screen and (min-width: 768px) {
					margin: 0;
				}

				li {
					margin: 0;
					padding: 0 25px 0 0;

					&:last-child {
						padding-right: 0;
					}

					a {
						color: var(--text);
						transition: all 400ms;

						&:hover {
							color: var(--accent);
						}

						svg {
							width: 36px;
							height: 36px;
						}
					}
				}
			}
		}
	}
}

// DEBUG
// * {
// 	outline: 1px solid red;
// }