Blog

wp-content/themes/brpp-prawo-podatki/css/custom.scss

@@ -1352,7 +1352,7 @@ body.page-id-47 {
 	}
 }
 
-//* ONasze usługi
+//* O nasze usługi
 body.page-id-54 {
 	main {
 		padding-top: 80px;
@@ -1791,3 +1791,129 @@ body.page-id-54 {
 		}
 	}
 }
+
+//* Blog
+body.blog {
+	main.blog-page {
+		padding-top: 32px;
+
+		.box-1 {
+			margin-bottom: 48px;
+
+			.box--wrapper {
+				position: relative;
+				height: 568px;
+				padding: 64px;
+			}
+			.box-bg {
+				position: absolute;
+				inset: 0;
+			}
+
+			.row {
+				position: relative;
+				z-index: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				row-gap: 40px;
+				height: 100%;
+
+				.col {
+					&-1 {
+						#breadcrumbs_box {
+							.container {
+								padding: 0;
+							}
+							#breadcrumbs {
+								color: $cWhite;
+							}
+						}
+					}
+					&-2 {
+						.box-head {
+							max-width: 785px;
+							margin-bottom: 32px;
+
+							h2 {
+								color: $cWhite;
+								font-weight: 500;
+								font-size: 48px;
+								line-height: 1.2;
+								letter-spacing: -0.96px;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.box-2 {
+			padding-bottom: 150px;
+
+			.posts-list {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				gap: 64px;
+				margin-bottom: 100px;
+			}
+			.posts-more {
+				text-align: center;
+
+				a {
+					display: inline-flex;
+					flex-direction: row;
+					gap: 16px;
+
+					&:hover {
+						.loader {
+							&::after,
+							&::before {
+								background: $cWhite;
+							}
+						}
+					}
+
+					.loader {
+						width: 16px;
+						height: 16px;
+						display: inline-block;
+						position: relative;
+						margin-top: -3px;
+						display: none;
+
+						&::after,
+						&::before {
+							content: '';
+							box-sizing: border-box;
+							width: 20px;
+							height: 20px;
+							border-radius: 50%;
+							background: $cGold;
+							position: absolute;
+							left: 0;
+							top: 0;
+							animation: animloader 1s linear infinite;
+							transition: all 250ms ease-in-out;
+						}
+						&::after {
+							opacity: 0;
+							animation-delay: 0.5s;
+						}
+					}
+
+					@keyframes animloader {
+						0% {
+							transform: scale(0);
+							opacity: 1;
+						}
+						100% {
+							transform: scale(1);
+							opacity: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+}