.video-cover-wrapper {
|
position: relative;
|
width: 100%;
|
min-height: 400px;
|
overflow: hidden;
|
display: flex;
|
|
// Video background
|
.video-cover-bg {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
min-width: 100%;
|
min-height: 100%;
|
width: auto;
|
height: auto;
|
transform: translate(-50%, -50%);
|
object-fit: cover;
|
z-index: 0;
|
|
&.fade {
|
animation: fadeIn 1s ease-in;
|
}
|
}
|
|
// Dark overlay
|
.video-cover-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 1);
|
z-index: 1;
|
}
|
|
// Content container
|
.video-cover-content {
|
position: relative;
|
z-index: 2;
|
width: 100%;
|
padding: 2rem;
|
color: white;
|
|
// Better text readability
|
h1, h2, h3, h4, h5, h6 {
|
color: white;
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
}
|
|
p {
|
color: white;
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
}
|
|
// Button styles
|
.wp-block-button__link {
|
text-shadow: none;
|
}
|
}
|
|
// Alignment classes
|
&.align-top-left {
|
align-items: flex-start;
|
justify-content: flex-start;
|
}
|
&.align-top-center {
|
align-items: flex-start;
|
justify-content: center;
|
}
|
&.align-top-right {
|
align-items: flex-start;
|
justify-content: flex-end;
|
}
|
&.align-center-left {
|
align-items: center;
|
justify-content: flex-start;
|
}
|
&.align-center {
|
align-items: center;
|
justify-content: center;
|
}
|
&.align-center-right {
|
align-items: center;
|
justify-content: flex-end;
|
}
|
&.align-bottom-left {
|
align-items: flex-end;
|
justify-content: flex-start;
|
}
|
&.align-bottom-center {
|
align-items: flex-end;
|
justify-content: center;
|
}
|
&.align-bottom-right {
|
align-items: flex-end;
|
justify-content: flex-end;
|
}
|
|
// Full-width alignment
|
&.alignfull {
|
width: 100vw;
|
max-width: none;
|
margin-left: calc(50% - 50vw);
|
margin-right: calc(50% - 50vw);
|
}
|
|
// Wide alignment
|
&.alignwide {
|
max-width: 1200px;
|
}
|
}
|
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
}
|
to {
|
opacity: 1;
|
}
|
}
|
|
// Responsive adjustments
|
@media (max-width: 768px) {
|
.video-cover-wrapper {
|
min-height: 300px;
|
|
.video-cover-content {
|
padding: 1.5rem;
|
}
|
}
|
}
|
|
@media (max-width: 480px) {
|
.video-cover-wrapper {
|
min-height: 250px;
|
|
.video-cover-content {
|
padding: 1rem;
|
}
|
}
|
}
|
