/** style.scss **/
|
.video-cover {
|
position: relative;
|
width: 100%;
|
min-height: 75vh;
|
overflow: hidden;
|
display: flex;
|
.wrap {
|
background-color: rgb(var(--contrast-200));
|
//&::before {
|
// position: absolute;
|
// top: 0;
|
// bottom: 0;
|
// left: 0;
|
// right: 0;
|
// background-color: rgb(var(--base));
|
// mix-blend-mode: lighten;
|
// content: '';
|
// z-index: 1;
|
//}
|
}
|
/* Video background */
|
.video-container {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
min-width: 100%;
|
min-height: 100%;
|
z-index: 0;
|
display: flex;
|
background-color: rgb(var(--action-50));
|
|
&.fade {
|
animation: fadeIn 1s ease-in;
|
}
|
|
video {
|
pointer-events: none;
|
opacity: .85;
|
mix-blend-mode: multiply;
|
filter: grayscale(100%) contrast(1);
|
flex: 1 0 100%;
|
object-fit: cover;
|
}
|
}
|
|
.inner-wrap {
|
position: relative;
|
z-index: 2;
|
width: 100%;
|
padding: 2rem;
|
color: var(--action-contrast);
|
|
/* Better text readability */
|
h1, h2, h3, h4, h5, h6 {
|
word-spacing: 100vw;
|
color: var(--action-contrast);
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
margin: 2rem 0 0;
|
}
|
|
p {
|
text-transform: uppercase;
|
letter-spacing: 2px;
|
margin: 0;
|
color: var(--action-contrast);
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
}
|
|
.media-text {
|
}
|
.media-text figure {
|
max-width: 50%;
|
}
|
@media (min-width: 768px) {
|
.media-text {
|
--align: flex-start;
|
gap: 3rem;
|
max-width: var(--content);
|
}
|
}
|
.media-text > div {
|
width: fit-content;
|
}
|
.buttons a {
|
font-weight: var(--fw-h-bold);
|
color: var(--action-contrast);
|
border-color: var(--action-contrast);
|
&:visited {
|
color: var(--action-contrast);
|
&:hover {
|
color: var(--action-contrast);
|
}
|
}
|
&:hover {
|
background-color: rgb(var(--action-0));
|
color: var(--action-contrast);
|
}
|
}
|
|
.outline a {
|
background-color: rgba(var(--base), rgba(var(--base),var(--op-3)));
|
}
|
.buttons {
|
margin: 3rem 0;
|
li {
|
background-color: rgba(var(--action-0), var(--op-4));
|
}
|
}
|
/* 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;
|
}
|
}
|
