/*!*********************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/video/style.scss ***! \*********************************************************************************************************************************************************************************************************************************************/ /** style.scss **/ .video-cover { position: relative; width: 100%; min-height: 75vh; overflow: hidden; display: flex; } .video-cover .wrap { background-color: rgb(var(--contrast-200)); } .video-cover { /* Video background */ } .video-cover .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)); } .video-cover .video-container.fade { animation: fadeIn 1s ease-in; } .video-cover .video-container video { pointer-events: none; opacity: 0.85; mix-blend-mode: multiply; filter: grayscale(100%) contrast(1); flex: 1 0 100%; -o-object-fit: cover; object-fit: cover; } .video-cover .inner-wrap { position: relative; z-index: 2; width: 100%; padding: 2rem; color: var(--action-contrast); /* Better text readability */ } .video-cover .inner-wrap h1, .video-cover .inner-wrap h2, .video-cover .inner-wrap h3, .video-cover .inner-wrap h4, .video-cover .inner-wrap h5, .video-cover .inner-wrap h6 { word-spacing: 100vw; color: var(--action-contrast); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); margin: 2rem 0 0; } .video-cover .inner-wrap p { text-transform: uppercase; letter-spacing: 2px; margin: 0; color: var(--action-contrast); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .video-cover .inner-wrap .media-text figure { max-width: 50%; } @media (min-width: 768px) { .video-cover .inner-wrap .media-text { --align: flex-start; gap: 3rem; max-width: var(--content); } } .video-cover .inner-wrap .media-text > div { width: -moz-fit-content; width: fit-content; } .video-cover .inner-wrap .buttons a { font-weight: var(--fw-h-bold); color: var(--action-contrast); border-color: var(--action-contrast); } .video-cover .inner-wrap .buttons a:visited { color: var(--action-contrast); } .video-cover .inner-wrap .buttons a:visited:hover { color: var(--action-contrast); } .video-cover .inner-wrap .buttons a:hover { background-color: rgb(var(--action-0)); color: var(--action-contrast); } .video-cover .inner-wrap .outline a { background-color: rgba(var(--base), rgba(var(--base), var(--op-3))); } .video-cover .inner-wrap .buttons { margin: 3rem 0; } .video-cover .inner-wrap .buttons li { background-color: rgba(var(--action-0), var(--op-4)); } .video-cover .inner-wrap { /* Button styles */ } .video-cover .inner-wrap .wp-block-button__link { text-shadow: none; } .video-cover { /* Alignment classes */ } .video-cover.align-top-left { align-items: flex-start; justify-content: flex-start; } .video-cover.align-top-center { align-items: flex-start; justify-content: center; } .video-cover.align-top-right { align-items: flex-start; justify-content: flex-end; } .video-cover.align-center-left { align-items: center; justify-content: flex-start; } .video-cover.align-center { align-items: center; justify-content: center; } .video-cover.align-center-right { align-items: center; justify-content: flex-end; } .video-cover.align-bottom-left { align-items: flex-end; justify-content: flex-start; } .video-cover.align-bottom-center { align-items: flex-end; justify-content: center; } .video-cover.align-bottom-right { align-items: flex-end; justify-content: flex-end; } .video-cover { /* Full-width alignment */ } .video-cover.alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .video-cover { /* Wide alignment */ } .video-cover.alignwide { max-width: 1200px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*# sourceMappingURL=style-index.css.map*/