Save

juicedupmotorcycles.pl/style.scss

@@ -54,6 +54,10 @@ p {
 	font-size: 51px;
 	font-family: $fPlayfair;
 	font-weight: 500;
+
+	@media (max-width: 980px) {
+		font-size: 40px;
+	}
 }
 
 ._btn {
@@ -69,6 +73,11 @@ p {
 	&:hover {
 		background: linear-gradient(119deg, #a48446 0%, #d0bf95 100%);
 	}
+
+	@media (max-width: 767px) {
+		font-size: 16px;
+		padding: 12px 30px;
+	}
 }
 ._btn2 {
 	display: inline-block;
@@ -385,8 +394,25 @@ div.up {
 	align-content: center;
 	margin-bottom: 0;
 
+	@media (max-width: 767px) {
+		height: 500px;
+	}
+
 	.box_wrapper {
 		margin-left: 20vw;
+
+		@media (max-width: 980px) {
+			margin-left: 13vw;
+		}
+
+		@media (max-width: 767px) {
+			margin-left: 40px;
+			margin-right: 40px;
+		}
+		@media (max-width: 500px) {
+			margin-left: 20px;
+			margin-right: 20px;
+		}
 	}
 
 	h2 {
@@ -394,6 +420,10 @@ div.up {
 		font-size: 60px;
 		font-weight: 700;
 		margin: 0;
+
+		@media (max-width: 767px) {
+			font-size: 44px;
+		}
 	}
 	h3 {
 		color: $cTxtWhite;
@@ -405,6 +435,10 @@ div.up {
 		padding: 4px 12px;
 		text-transform: uppercase;
 		margin: 0 0 15px 0;
+
+		@media (max-width: 767px) {
+			font-size: 14px;
+		}
 	}
 	p {
 		color: $cTxtWhite;
@@ -415,6 +449,10 @@ div.up {
 		&:last-child {
 			margin: 0;
 		}
+
+		@media (max-width: 767px) {
+			font-size: 16px;
+		}
 	}
 
 	a {
@@ -466,16 +504,34 @@ div.up {
 		transform: translateX(-50%);
 	}
 
+	@media (min-width: 768px) and (max-width: 980px) {
+		padding: 20px 0;
+	}
+	@media screen and (min-width: 481px) and (max-width: 767px) {
+		overflow: initial;
+	}
+
 	.c-row {
 		position: relative;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
+		column-gap: 30px;
+
+		@media (max-width: 767px) {
+			flex-direction: column-reverse;
+			row-gap: 40px;
+		}
 
 		.c-col {
 			width: 50%;
 
+			@media (max-width: 767px) {
+				width: 100%;
+				text-align: center;
+			}
+
 			&.c-col-1 {
 				h2 {
 					@extend ._title;
@@ -488,6 +544,12 @@ div.up {
 						left: 105px;
 						bottom: -30px;
 					}
+
+					@media (max-width: 767px) {
+						&::after {
+							left: 40%;
+						}
+					}
 				}
 
 				h3 {
@@ -500,11 +562,17 @@ div.up {
 					font-weight: 400;
 					line-height: 1.4;
 					max-width: 400px;
+
+					@media (max-width: 767px) {
+						font-size: 20px;
+						margin: 0 auto;
+					}
 				}
 			}
 			&.c-col-2 {
 				img {
 					border-radius: 20px;
+					object-fit: contain;
 				}
 			}
 		}
@@ -515,6 +583,13 @@ div.up {
 	position: relative;
 	padding: 100px 0;
 
+	@media (max-width: 980px) {
+		padding: 20px 0;
+	}
+	@media screen and (min-width: 481px) and (max-width: 767px) {
+		overflow: initial;
+	}
+
 	.c-row {
 		position: relative;
 		display: flex;
@@ -522,9 +597,19 @@ div.up {
 		align-items: center;
 		justify-content: center;
 
+		@media (max-width: 767px) {
+			flex-direction: column-reverse;
+			row-gap: 40px;
+		}
+
 		.c-col {
 			width: 50%;
 
+			@media (max-width: 767px) {
+				width: 100%;
+				text-align: center;
+			}
+
 			&.c-col-1 {
 				h2 {
 					@extend ._title;
@@ -542,6 +627,9 @@ div.up {
 					list-style: none;
 					max-width: 400px;
 
+					@media (max-width: 767px) {
+						margin: 0 auto;
+					}
 					li {
 						&:not(:last-child) {
 							margin-bottom: 20px;
@@ -563,6 +651,7 @@ div.up {
 			&.c-col-2 {
 				img {
 					border-radius: 20px;
+					object-fit: contain;
 				}
 			}
 		}
@@ -573,12 +662,23 @@ div.up {
 	position: relative;
 	padding: 100px 0;
 
+	@media (max-width: 767px) {
+		padding: 70px 0 50px;
+	}
+
 	.tiles {
 		position: relative;
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
 		gap: 20px;
 
+		@media (max-width: 980px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		@media (max-width: 500px) {
+			grid-template-columns: 1fr;
+		}
+
 		.tile {
 			position: relative;
 			display: flex;
@@ -748,6 +848,12 @@ div.up {
 			line-height: 1;
 		}
 	}
+
+	.innerbox {
+		.product {
+			max-width: 300px;
+		}
+	}
 }
 
 footer.footer {
@@ -822,6 +928,11 @@ footer.footer {
 	padding-top: 100px;
 	padding-bottom: 100px;
 
+	@media (max-width: 767px) {
+		padding-top: 50px;
+		padding-bottom: 50px;
+	}
+
 	&::after {
 		content: '';
 		display: block;
@@ -864,7 +975,13 @@ header {
 		flex-direction: row;
 		align-items: center;
 
+		@media (max-width: 767px) {
+			flex-direction: column;
+		}
+
 		.link-logo-img {
+			min-width: 100px;
+
 			img {
 				width: 100%;
 				max-width: 100px;
@@ -874,9 +991,21 @@ header {
 		.search__container {
 			margin-left: 20px;
 			margin-right: 20px;
+			min-width: unset !important;
+
+			@media screen and (max-width: 979px) {
+				margin-top: 0 !important;
+			}
+
+			form.search-form {
+			}
 		}
 
 		.menu-basket-btn {
+			@media (max-width: 767px) {
+				display: none;
+			}
+
 			a {
 				position: relative;
 				display: inline-block;
@@ -909,6 +1038,10 @@ header {
 	.menu-account {
 		margin-right: 20px;
 
+		@media (max-width: 767px) {
+			display: none;
+		}
+
 		a.myaccount {
 			img {
 				display: inline-block;
@@ -925,10 +1058,21 @@ div.menu {
 	padding: 0;
 	background: #28282e;
 
+	&.fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+
 	nav.innermenu {
 		height: 46px;
 		line-height: 46px;
 
+		@media (max-width: 767px) {
+			border-color: #28282e;
+		}
+
 		ul.menu-list {
 			border: none;
 			display: flex;
@@ -966,6 +1110,18 @@ div.menu {
 				}
 			}
 		}
+
+		ul.menu-mobile {
+			li.menu-mobile-li {
+				a {
+					&:hover {
+						&::before {
+							color: $cGolden;
+						}
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -1441,7 +1597,13 @@ body.shop_product {
 								}
 
 								form.form-basket {
+									.addtobasket-container {
+										display: flex;
+										flex-direction: row;
+									}
 									.quantity_wrap {
+										min-width: 90px;
+
 										.number-wrap {
 											input[name='quantity'] {
 												margin: 0;
@@ -1741,6 +1903,13 @@ body.shop_product {
 			}
 		}
 	}
+	.products {
+		.product {
+			@media (min-width: 500px) and (max-width: 767px) {
+				width: 50%;
+			}
+		}
+	}
 }
 
 #box_productrelated {
@@ -2579,3 +2748,14 @@ body .consents {
 		backdrop-filter: blur(3px);
 	}
 }
+.top,
+.footer {
+}
+
+body.shop_infopage {
+	.box.box_infopage {
+		a {
+			color: $cGolden;
+		}
+	}
+}