1#@!#!123s

: / home / mybf1 / www / rambut.bf1.my / wp-content / themes / izo / sass / components / content /
Filename : _posts-and-pages.scss
back
.sticky {
	display: block;
}

.page-banner {
	background-color: #fff;
    padding: 45px 0;
    margin-top: -60px;
    border-top: 1px solid #ebebeb;
	margin-bottom: 30px;

	.entry-header {
		margin-bottom: 0 !important;

		.entry-title {
			margin-top: 0;
		}
	}

	.page & {
		.entry-header {
			.entry-title {
				margin-bottom: 0;
			}
		}
	}

}

article {
	background-color: #fff;
	padding: 30px;
	margin: 0 0 30px;

	.layout-stretched.page & {
		padding: 0 !important;
	}

	@include media-min-992 {
		.posts-loop &,
		.page:not(.elementor-page) &,
		.single & {
			padding: 60px;
		}
	}

	.entry-title {
		margin-top: 0;
		word-wrap: break-word;

		a {
			&:hover {
				color: $color__accent;
			}
		}
	}

	.post-thumbnail {
		display: block;
		
		img {
			vertical-align: top;
		}
	}
}
.page-template-default.page,
.single-post {
	.post-thumbnail,
	.entry-header {
		margin-bottom: 30px;
	}
}

.page-header {

	background-color: #fff;
	padding: 60px;
	margin-bottom: 30px;

	.page-title {
		margin: 0;
	}

	p {
		margin: 15px 0 0;
	}
}

.posts-loop {
	.post > *:not(:last-child) {
		margin-bottom: 20px;
	}
	&.layout-2colssb,
	&.layout-3cols {
		display: grid;
		column-gap: 30px;

		article {
			padding: 30px;

			.entry-title {
				@include font-size(24);
			}
		}
	}	
	&.layout-2colssb {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}
	&.layout-3cols {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}	
}

.updated:not(.published) {
	display: none;
}

.page-links {
	clear: both;
	margin: 0 0 30px;
}

.entry-meta,
.entry-footer {
	color: #716f6f;
	
	.izo-icon {
		fill: #716f6f;
	}
	
	a {
		color: #716f6f;

		&:hover {
			color: $color__accent;
		}		
	}
}

.entry-meta {
	.posted-on {
		&:after {
			content: '/';
			margin: 0 7px;
		}
	}
}

.entry-footer {
	clear: both;

	.tags-links,
	.comments-link {
		float: right;
	}

	.single & {
		margin-top: 30px;
	}
}

.read-more {
	color: #716f6f;
	margin-left: 15px;
	font-style: italic;
	
	&:hover {
		color: $color__accent;
	}
}

.elementor-widget-heading .elementor-heading-title {
	margin: 0;
}
.elementor-button-wrapper .elementor-button {
	border-radius: 0;
	padding: 14px 24px;
	
	&:hover {
		background-color: $color__accent_dark;
	}
}

/*
* Gutenberg
*/
.wp-block-gallery {
	margin-bottom: 20px;
}
.blocks-gallery-caption {
	margin-left: auto;
    margin-right: auto;
}
.blocks-gallery-grid .blocks-gallery-image figcaption, 
.blocks-gallery-grid .blocks-gallery-item figcaption, 
.wp-block-gallery .blocks-gallery-image figcaption, 
.wp-block-gallery .blocks-gallery-item figcaption {
	background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.5) 70%,transparent);
	line-height: 1.2;
	font-size: 16px;
	padding-bottom: 15px;
}
.wp-block-group.has-background {
	padding: 20px 30px;
}
.wp-block-group,
.wp-block-media-text,
.wp-block-embed,
.wp-block-columns {
	margin-bottom: 20px;
}
.wp-block-video,
.wp-block-media-text,
.wp-block-columns,
.wp-block-gallery,
.wp-block-image {
	&.alignwide {
		margin-left: -30px;
		margin-right: -30px;
	}
	&.alignfull {
		margin-left: -60px;
		margin-right: -60px;
	}	
}
.wp-block-cover {
	margin-bottom: 20px;

	&.alignwide {
		width: calc(100% + 60px);
		margin-left: -30px;
	}
	&.alignfull {
		width: calc(100% + 120px);
		margin-left: -60px;
	}	
	p {
		line-height: 1.2;
	}	
}

figcaption {
	color: #716f6f;
	text-align: center;

	a {
		color: #716f6f;
		text-decoration: underline;
	}
}
.has-drop-cap:not(:focus):first-letter {
	@include font-size(80);
}
p.has-large-font-size {
	line-height: 1.3;
}
.elementor-icon-box-title {
	margin-top: 0;
}

.izo-elementor-blog {
	display: grid;
	grid-gap: 45px;	
	grid-template-columns: repeat(3, minmax(0,1fr));

	.entry-title {
		@include font-size(24);
	}

	.post-thumbnail {
		margin-bottom: 20px !important;
	}

	.post-content {
		& > * {
			margin-bottom: 15px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

/* 404 */
.error404 {
	.izo-container.has-sidebar {
		display: block;
	}
	.error-404 {
		background-color: #fff;
		text-align: center;
		padding: 60px;
		margin-top: 40px;
	}
	.e404 {
		color: #bbb;
		font-size: 112px;
	}
	.search-form {
		margin-top: 40px;
	}
}

.blog-featured-area {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
	margin-top: -30px;
	margin-bottom: 30px;

	@include media-max-991 {
		grid-template-columns: minmax(0, 1fr);
	}

	.featured-post {
		position: relative;
		display: flex;
		align-items: flex-end;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 90px 30px 30px;

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#000,0.7);
		}

		.post-content {
			position: relative;
			z-index: 11;
			
			.izo-icon {
				fill: #fff;
			}

			a {
				color: #fff;

				&:hover {
					color: $color__accent;
				}
			}

			.entry-title {
				margin-top: 7px;
				@include font-size(24);
			}

			@include media-min-992 {
				max-width: 60%;
			}			

		}

		@include media-max-991 {
			grid-template-columns: minmax(0, 1fr);
			grid-column: 1 / span 1 !important;
			grid-row: auto !important;			
		}		
	}



	.featured-post:nth-of-type(1) {
		grid-column: 1 / span 1;
		grid-row: 1 / span 2;
	}
	.featured-post:nth-of-type(2) {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}	
	.featured-post:nth-of-type(3) {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
	}
	.featured-post:nth-of-type(4) {
		grid-column: 2 / span 1;
		grid-row: 2 / span 1;
	}	
	.featured-post:nth-of-type(5) {
		grid-column: 3 / span 1;
		grid-row: 2 / span 1;
	}
	
	@include media-min-576 {
		margin-top: -60px;
		margin-bottom: 60px;
	}
}