:root {
/* Heights */
--vr-bw-height-small: 240px;
--vr-bw-height-medium: 480px;
--vr-bw-height-large: 720px;
/* Colors */
--vr-bw-bgcolor-1: #f0f0f0;
--vr-bw-bgcolor-2: #777777;
--vr-bw-bgcolor-3: #323232;
--vr-bw-color-inverted: #FFF;
--vr-bw-color-headline-inverted: #FFF;
/* Padding */
--vr-bw-padding-small: 3rem;
--vr-bw-padding-medium: 5rem;
--vr-bw-padding-large: 8rem;
/* Gap */
--vr-bw-content-gap: 1rem;
/* Width */
--vr-bw-padding-inline: 1rem;
--vr-bw-indent-max-width: 760px;
--vr-bw-content-max-width: 1120px;
--vr-bw-breakout-max-width: 1480px;
--vr-bw-content-size: calc(
(var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2
);
--vr-bw-breakout-size: calc(
(var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2
);
@media screen and (max-width: 599px) {
--vr-bw-padding-inline: .5rem;
}
}
.content-background-wrapper {
position: relative;
/* Background base */
.content-background-wrapper-bg {
position: absolute;
inset: 0;
figure {
}
img,
video {
position: absolute;
inset: 0;
object-fit: cover;
object-position: 50% 50%;
display: block;
width: 100%;
height: 100%;
}
}
/* Background scaling */
.content-background-wrapper-bg {
img,
video {
@at-root .-bg-size-contain#{&} { object-fit: contain; }
@at-root .-bg-size-stretch#{&} { object-fit: fill; }
@at-root .-bg-size-auto#{&} { object-fit: none; }
}
}
/* Background position */
.content-background-wrapper-bg {
img,
video {
@at-root .-bg-pos-0-0#{&} { object-position: 0 0; }
@at-root .-bg-pos-50-0#{&} { object-position: 50% 0; }
@at-root .-bg-pos-100-0#{&} { object-position: 100% 0; }
@at-root .-bg-pos-0-50#{&} { object-position: 0 50%; }
@at-root .-bg-pos-50-50#{&} { object-position: 50% 50%; }
@at-root .-bg-pos-100-50#{&} { object-position: 100% 50%; }
@at-root .-bg-pos-0-100#{&} { object-position: 0 100%; }
@at-root .-bg-pos-50-100#{&} { object-position: 50% 100%; }
@at-root .-bg-pos-100-100#{&} { object-position: 100% 100%; }
}
}
/* Background opacity */
.content-background-wrapper-bg {
@at-root .-bg-opacity-10#{&} { opacity: .1 }
@at-root .-bg-opacity-20#{&} { opacity: .2 }
@at-root .-bg-opacity-30#{&} { opacity: .3 }
@at-root .-bg-opacity-40#{&} { opacity: .4 }
@at-root .-bg-opacity-50#{&} { opacity: .5 }
@at-root .-bg-opacity-60#{&} { opacity: .6 }
@at-root .-bg-opacity-70#{&} { opacity: .7 }
@at-root .-bg-opacity-80#{&} { opacity: .8 }
@at-root .-bg-opacity-90#{&} { opacity: .9 }
@at-root .-bg-opacity-100#{&} { opacity: 1 }
}
/* Background beside */
&.-bg-aside-content {
.content-background-wrapper-bg {
inset: 0 auto 0 0;
width: 50%;
@at-root .-bg-horizontal-align-right#{&} { inset: 0 0 0 auto; }
}
.content-background-wrapper-fg {
> .content-grid {
> .fragments {
padding-left: calc(50% + var(--vr-bw-content-gap));
@at-root .-bg-horizontal-align-right#{&} {
padding-left: 0;
padding-right: calc(50% + var(--vr-bw-content-gap));
}
}
}
}
@media (max-width: 599px) {
display: flex;
flex-direction: column-reverse;
@at-root .-bg-aside-content-reverse#{&} {
flex-direction: column;
}
.content-background-wrapper-bg {
position:relative;
width: 100%;
img {
position: relative;
width: 100%;
height: auto;
}
}
.content-background-wrapper-fg.content-background-wrapper-fg {
> .content-grid {
> .fragments {
padding-left: 0;
padding-right: 0;
}
}
}
}
}
/* Background color */
&.-alt-color-1 { background-color: var(--vr-bw-bgcolor-1); }
&.-alt-color-2 { background-color: var(--vr-bw-bgcolor-2); }
&.-alt-color-3 { background-color: var(--vr-bw-bgcolor-3); }
&.-alt-color-black {
background-color: #000;
.content-background-wrapper-fg {
&,
h1,h2,h3,h4,h5,h6 {
color: #FFFFFF;
}
}
}
&.-alt-color-white {
background-color: white;
.content-background-wrapper-fg {
&,
h1,h2,h3,h4,h5,h6 {
color: #000000;
}
}
}
/* Foreground base */
.content-background-wrapper-fg {
position: relative;
box-sizing: border-box;
}
/* Height */
.content-background-wrapper-fg {
@at-root .-mh-small#{&} { min-height: var(--vr-bw-height-small); }
@at-root .-mh-medium#{&} { min-height: var(--vr-bw-height-medium); }
@at-root .-mh-large#{&} { min-height: var(--vr-bw-height-large); }
@at-root .-mh-vh#{&} {
@at-root .-mh-viewport-100#{&} { min-height: 100svh; }
@at-root .-mh-viewport-66#{&} { min-height: 66.666svh; }
@at-root .-mh-viewport-50#{&} { min-height: 50svh; }
@at-root .-mh-viewport-33#{&} { min-height: 33.333svh; }
}
@at-root .-mh-ratio#{&} {
/*display: flow-root;*/
&:before {
display: table;
content: "";
padding-top: 100%;
float: left;
@at-root .-mh-ratio-21-9#{&} { padding-top: 42.857%; }
@at-root .-mh-ratio-16-10#{&} { padding-top: 62.5%; }
@at-root .-mh-ratio-16-9#{&} { padding-top: 56.25%; }
@at-root .-mh-ratio-8-3#{&} { padding-top: 37.5%; }
@at-root .-mh-ratio-5-4#{&} { padding-top: 80%; }
@at-root .-mh-ratio-4-3#{&} { padding-top: 75%; }
@at-root .-mh-ratio-3-2#{&} { padding-top: 66.666%; }
@at-root .-mh-ratio-5-1#{&} { padding-top: 20%; }
@at-root .-mh-ratio-4-1#{&} { padding-top: 25%; }
@at-root .-mh-ratio-3-1#{&} { padding-top: 33.333%; }
@at-root .-mh-ratio-2-1#{&} { padding-top: 50%; }
@at-root .-mh-ratio-1-1#{&} { padding-top: 100%; }
}
}
}
/* Content width */
.content-background-wrapper-fg {
> .content-grid {
width: 100%;
display: grid;
grid-template-columns:
[full-width-start] minmax(var(--vr-bw-padding-inline), 1fr)
[breakout-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size))
[content-start] minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size))
[indent-start] min(
100% - (var(--vr-bw-padding-inline) * 6),
var(--vr-bw-indent-max-width)
)
[indent-end]
minmax(var(--vr-bw-padding-inline), var(--vr-bw-content-size)) [content-end]
minmax(var(--vr-bw-padding-inline), var(--vr-bw-breakout-size)) [breakout-end]
minmax(var(--vr-bw-padding-inline), 1fr) [full-width-end];
> .fragments {
grid-column: content;
position: relative;
@at-root .-width-small#{&} { grid-column: indent; }
@at-root .-width-extended#{&} { grid-column: breakout; }
@at-root .-width-default-left#{&} { grid-column: breakout / indent; }
@at-root .-width-default-right#{&} { grid-column: indent / breakout; }
@at-root .-width-extended-left#{&} { grid-column: breakout / content; }
@at-root .-width-extended-right#{&} { grid-column: content / breakout; }
@at-root .-width-full#{&} { grid-column: full-width; }
@media screen and (max-width: 599px) {
@at-root .-width-extended#{&} { grid-column: full-width; }
@at-root .-width-default-left#{&} { grid-column: full-width / content; }
@at-root .-width-default-right#{&} { grid-column: content / full-width; }
@at-root .-width-extended-left#{&} { grid-column: full-width / content; }
@at-root .-width-extended-right#{&} { grid-column: content / full-width; }
@at-root .-add-text-indent#{&} {
@at-root .-width-extended#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2); }
@at-root .-width-default-left#{&} { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); }
@at-root .-width-default-right#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; }
@at-root .-width-extended-left#{&} { padding: 0 0 0 calc(var(--vr-bw-padding-inline) * 2); }
@at-root .-width-extended-right#{&} { padding: 0 calc(var(--vr-bw-padding-inline) * 2) 0 0; }
}
}
}
}
}
/* Vertical alignment */
.content-background-wrapper-fg {
display: flex;
align-items: flex-start;
@at-root .-va-center#{&} { align-items: center; }
@at-root .-va-bottom#{&} { align-items: flex-end; }
@at-root .-va-stretch#{&} {
display:flex;
align-items: stretch;
> .content-grid { flex: 1; }
}
}
/* Padding */
.content-background-wrapper-fg {
> .content-grid {
> .fragments {
@at-root .-padding#{&} { padding-top: var(--vr-bw-padding-small); padding-bottom: var(--vr-bw-padding-small); }
@at-root .-padding-medium#{&} { padding-top: var(--vr-bw-padding-medium); padding-bottom: var(--vr-bw-padding-medium); }
@at-root .-padding-large#{&} { padding-top: var(--vr-bw-padding-large); padding-bottom: var(--vr-bw-padding-large); }
@at-root .-padding-top#{&} { padding-top: var(--vr-bw-padding-small); }
@at-root .-padding-top-medium#{&} { padding-top: var(--vr-bw-padding-medium); }
@at-root .-padding-top-large#{&} { padding-top: var(--vr-bw-padding-large); }
@at-root .-padding-bottom#{&} { padding-bottom: var(--vr-bw-padding-small); }
@at-root .-padding-bottom-medium#{&} {padding-bottom: var(--vr-bw-padding-medium); }
@at-root .-padding-bottom-large#{&} { padding-bottom: var(--vr-bw-padding-large); }
}
}
}
/* Color */
.content-background-wrapper-fg {
@at-root .-color-inverted#{&} {
& { color: var(--vr-bw-color-inverted) }
h1,h2,h3,h4,h5,h6 { color: var(--vr-bw-color-headline-inverted) }
}
}
}