body {
--header-height: calc( var( --line-height--medium ) + var( --grid-wrap-padding-vertical ) * 2 );
--header-extension-offset: calc( var( --grid-wrap-padding-vertical ) * -2 + 0.2em );
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var( --header-height );
background-color: var( --background-color );
pointer-events: none;
z-index: 80;
}
header {
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: 0;
z-index: 100;
}
#header-inner {
position: relative;
background-color: var( --background-color );
}
#header-inner::before {
content: '';
position: absolute;
top: calc( ( var( --grid-wrap-padding-vertical ) + 5px ) * -1 );
left: 0px;
width: 100%;
height: calc( var( --grid-wrap-padding-vertical ) + 5px );
background-color: var( --background-color );
z-index: 10;
}
#header-inner > * {
z-index: 20;
}
header-extension {
display: block;
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: calc( var( --header-height ) + var( --header-extension-offset ) );
background: var( --background-color );
z-index: 90;
}
header + header-extension {
margin-top: var( --header-extension-offset );
}
body.view-project::before,
.view-project header,
header-extension:not( .is-in ),
.view-project header-extension {
--translateY: -100%;
--transform: translateY( var( --translateY ) ) scale( 0.75 );
-webkit-transform: var( --transform );
-moz-transform: var( --transform );
transform: var( --transform );
pointer-events: none;
}
header-extension:not( .is-in ),
.view-project header + header-extension {
--translateY: calc( -100% - var( --header-height ) );
}
.filter-bar {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
display: flex;
}
.filter-bar::-webkit-scrollbar {
display: none;
}
.filter-bar .menu {
display: inline-flex;
flex-shrink: 0;
margin-left: auto;
margin-right: auto;
}
.filter-bar .menu .menu-item {
white-space: nowrap;
display: inline-flex;
}
.filter-bar .menu .menu-item:not( :last-child ) {
margin-right: 0.18em;;
}
.filter-bar .menu .menu-item:not( :last-child )::after {
content: ',';
margin-left: -0.025em;
}
#header__page-title a {
color: var( --black );
}
#header__navigation,
#header__language-switch,
#header__social-links {
overflow: hidden;
max-height: calc( var( --line-height ) * var( --ic, 1 ) );
}
#header__language-switch .menu {
display: flex;
}
#header__navigation-toggle {
position: absolute;
top: calc( var( --icon-padding-vertical ) * -0.8 );
right: calc( ( var( --icon-width ) + var( --icon-padding-horizontal ) * 3 ) * -1 );
} @media ( min-width: 700px ) {
.filter-bar .menu {
flex-wrap: wrap;
justify-content: center;
row-gap: 0.25em;
max-width: 100%;
}
} @media ( max-width: 1019px ) {
header {
padding-right: calc( var( --icon-width ) + var( --icon-padding-horizontal ) * 3 ) !important;
}
body:not( .navigation-is-active ) #header__navigation,
body:not( .navigation-is-active ) #header__language-switch,
body:not( .navigation-is-active ) #header__social-links {
margin-top: 0;
max-height: 0px;
}
body.navigation-is-active header {
background-color: var( --background-color );
}
body.navigation-is-active header + header-extension {
margin-top: 0;
}
#header__social-links {
margin-top: 0.15em;
}
} @media ( min-width: 1020px ) {
#header__page-title {
margin-right: calc( var( --grid-column-gap-horizontal ) * 2 );
}
#header__navigation {
overflow: visible;
}
#header-inner,
#header__navigation .menu {
display: flex;
justify-content: center;
}
#header__navigation .menu-item:not( :last-child ) {
margin-right: var( --grid-column-gap-horizontal );
}
#header__language-switch {
position: absolute;
top: 0;
right: 0;
}
#header__social-links {
position: absolute;
top: 0.1em;
left: 0;
}
#header__navigation-toggle {
display: none;
}
}body {
}
.menu-item a,
.lang-item a {
display: inline-block;
}
.menu-item.is-active a,
.lang-item.current-lang a {
--color: var( --black );
}
.lang-item:not( :last-child ) > a::after {
content: '/';
color: var( --gray );
}body {
--project-header-height: calc( var( --line-height--medium ) * 2 + var( --grid-wrap-padding-vertical ) * 4 + var( --header-extension-offset, 0px ) + 0.2em );
}
.project {
position: relative;
}
.project__header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 200;
}
.project__title {
--icon-width: 0.9em;
display: flex !important;
justify-content: center;
align-items: center;
}
.project__title > h1 {
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project__title > a {
margin-top: calc( var( --icon-padding-vertical ) * -1 );
margin-bottom: calc( var( --icon-padding-vertical ) * -1 );
}
.project__title + .project__switch {
margin-top: var( --header-extension-offset );
}
.project__switch > .menu {
width: 100%;
}
.project__media-count--current,
.project__media-count--total {
width: 3ch;
}
.project__switch > .menu > .menu-item:nth-last-child( 2 )::after,
.project__media-count--current::after,
.project__media-count--total::after {
display: none;
}
.project__media-count--current {
margin-right: auto !important;
}
.project__media-count--total {
margin-left: auto;
}
.project[data-view="media"] .menu-item[data-slug="media"] *,
.project[data-view="information"] .menu-item[data-slug="information"] * {
--color: var( --black );
}
.project__views {
-webkit-transform: translate3d( 0, 0, 0 );
-moz-transform: translate3d( 0, 0, 0 );
transform: translate3d( 0, 0, 0 );
overflow: hidden;
}
.project__views > * {
height: 100%;
} .project:not( .is-active ) .project__header {
--transform: translateY( -100% ) scale( 0.75 );
-webkit-transform: var( --transform );
-moz-transform: var( --transform );
transform: var( --transform );
opacity: 0;
pointer-events: none;
}
.project.is-active .project__views {
position: fixed;
top: 0px !important;
left: 0px !important;
width: 100% !important;
height: 100% !important;
padding-top: var( --project-header-height );
background-color: var( --background-color );
z-index: 190;
}.project-item {
--ih: calc( var( --iw, 50vw ) / var( --t-ratio ) );
position: relative;
}
.project-item[data-size="sm"] {
--iw: calc( ( ( var( --1rvw, 1vw ) * 100 ) - var( --grid-wrap-padding-horizontal ) * 2 + var( --grid-column-gap ) ) * 0.5 - var( --grid-column-gap ) );
}
.project-item[data-size="md"] {
--iw: calc( ( ( var( --1rvw, 1vw ) * 100 ) - var( --grid-wrap-padding-horizontal ) * 2 + var( --grid-column-gap ) ) * 0.666666666666 - var( --grid-column-gap ) );
}
.project-item[data-size="lg"] {
--iw: calc( ( ( var( --1rvw, 1vw ) * 100 ) - var( --grid-wrap-padding-horizontal ) * 2 + var( --grid-column-gap ) ) * 1 - var( --grid-column-gap ) );
}
.project-item__thumbnail {
display: block;
position: absolute;
top: 0;
left: calc( var( --grid-column-gap ) * 0.5 );
width: calc( 100% - var( --grid-column-gap ) );
z-index: 10;
}
.project-item__title {
display: flex;
justify-content: center;
position: relative;
padding: 0 var( --grid-wrap-padding-horizontal );
margin-top: 0.3em;
z-index: 10;
}
.has-hover .project-item__title,
.project-is-active .project-item__title,
.project:not( .is-in ) ~ .project-item__title {
opacity: 0;
}
body:not( .project-is-active ) .project-item:hover .project.is-in ~ .project-item__title,
body:not( .project-is-active ) .project-item:active .project.is-in ~ .project-item__title {
opacity: 1;
} @media ( min-width: 1200px ) {
.project-item[data-size="sm"] {
--iw: calc( ( ( var( --1rvw, 1vw ) * 100 ) - var( --grid-wrap-padding-horizontal ) * 2 + var( --grid-column-gap ) ) * 0.3333333333 - var( --grid-column-gap ) );
}
.project-item[data-size="md"] {
--iw: calc( ( ( var( --1rvw, 1vw ) * 100 ) - var( --grid-wrap-padding-horizontal ) * 2 + var( --grid-column-gap ) ) * 0.5 - var( --grid-column-gap ) );
}
.project-item[data-size="lg"] {
--iw: calc( ( ( var( --1rvw, 1vw ) * 100 ) - var( --grid-wrap-padding-horizontal ) * 2 + var( --grid-column-gap ) ) * 0.6666666666 - var( --grid-column-gap ) );
}
} .project {
height: var( --ih );
z-index: 20;
}
.project:not( .is-in, .is-active, .is-former ),
.project:not( .is-in ) ~ .project-item__thumbnail,
.view-project .project:not( .is-active, .is-former ),
.view-project .project-item__thumbnail {
--transform: scale( 0.75 );
--transition-delay: 0s;
-webkit-transform: var( --transform );
-moz-transform: var( --transform );
transform: var( --transform );
opacity: 0;
pointer-events: none;
}
.project:not( .is-in, .is-active, .is-former ) .project__views {
display: none;
}
.project__views {
width: var( --iw );
height: var( --ih );
} .project:not( .is-active ) {
z-index: 5;
}
.project:not( .is-active ) .project__media sjs-slide {
--sjs-slide-size: var( --iw );
}
.project:not( .is-active ) .project__media sjs-slide .project-thumbnail > img,
.project:not( .is-active ) .project__media sjs-slide .project-media > .image,
.project:not( .is-active ) .project__media sjs-slide .project-media > .video {
width: var( --iw );
max-width: 100%;
}.project__media {
width: 100%;
z-index: 20;
}
.project__media sjs-slider,
.project__media sjs-slides
.project__media sjs-slide {
height: 100%;
}
.project__media sjs-frame::-webkit-scrollbar {
display: none;
}
.project__media sjs-controls {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc( 100% - var( --caption-height ) );
align-items: stretch;
justify-content: space-between;
pointer-events: none;
z-index: 20;
}
.project__media sjs-slider[data-active-type="video"] sjs-controls {
height: calc( 100% - var( --caption-height ) - var( --video-controls-height ) );
}
.project__media sjs-control {
pointer-events: all;
}
.project__media sjs-control[data-trigger="sjs:prev"] {
width: 40%;
cursor: w-resize;
}
.project__media sjs-control[data-trigger="sjs:next"] {
width: 60%;
cursor: e-resize;
}
.project__media sjs-slider[data-active-type="video"] sjs-control[data-trigger="sjs:prev"],
.project__media sjs-slider[data-active-type="video"] sjs-control[data-trigger="sjs:next"] {
width: 10%;
}
.project__media sjs-slider.has-reached-start sjs-control[data-trigger="sjs:prev"],
.project__media sjs-slider.has-reached-end sjs-control[data-trigger="sjs:next"] {
visibility: hidden;
pointer-events: none;
}
.project__media sjs-slides {
align-content: flex-start;
}
.project__media sjs-slide {
--sjs-slide-size: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
} .project__media sjs-slide .project-thumbnail,
.project__media sjs-slide .project-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.project__media sjs-slide .project-thumbnail {
padding-bottom: var( --caption-height );
z-index: 10;
}
.project__media sjs-slide[data-type="video"] .project-thumbnail {
display: none;
}
.project__media sjs-slide .project-media {
z-index: 20;
}
.project__media sjs-slide .project-thumbnail > img,
.project__media sjs-slide .project-media > .image,
.project__media sjs-slide .project-media > .video {
width: calc( ( var( --100rvh, 100svh ) - var( --project-header-height ) - var( --caption-height ) ) * var( --ratio, 1.7777777777 ) );
max-width: calc( 100% - var( --grid-wrap-padding-horizontal ) * 2 );
margin: auto 0;
}
.project__media sjs-slide .project-media > .video {
width: calc( ( var( --100rvh, 100svh ) - var( --project-header-height ) - var( --caption-height ) - var( --video-controls-height ) ) * var( --ratio, 1.7777777777 ) );
max-width: calc( 100% - var( --grid-wrap-padding-horizontal ) * 2 );
margin: auto 0;
}
.project__media sjs-slide .project-thumbnail > img {
flex-shrink: 0;
}
.project-media__caption {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
text-align: center;
padding: 0 var( --grid-wrap-padding-horizontal );
height: var( --caption-height );
} .project:not( .is-active ) .project__media sjs-controls,
.project[data-view="information"] .project__media sjs-controls {
display: none;
}
.project.is-active .project__media sjs-slide {
height: calc( var( --100rvh, 100svh ) - var( --project-header-height ) );
}
.project.is-active:not( [data-view="information"] ) .project__media sjs-slide .project-thumbnail {
pointer-events: none;
}
.project:not( .is-active ) .project__media sjs-slide .project-media,
.project[data-view="information"] .project__media sjs-slide .project-media {
pointer-events: none;
}
.project:not( .is-active ) .project__media sjs-slide .project-media img,
.project[data-view="information"] .project__media sjs-slide .project-media img {
display: none;
}
.project:not( .is-active ) .project__media sjs-slide .project-media__caption,
.project[data-view="information"] .project__media sjs-slide .project-media__caption {
opacity: 0;
}
.project[data-view="information"] .project__media sjs-slide .project-media__caption {
--transition-delay: 0s;
} .project[data-view="information"] .project__media sjs-frame {
overflow: scroll !important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.project[data-view="information"] .project__media sjs-slides {
transform: none !important;
column-gap: var( --grid-column-gap-horizontal );
row-gap: var( --grid-column-gap-vertical );
padding: 0 var( --grid-wrap-padding-horizontal );
}
.project[data-view="information"] .project__media sjs-slide {
--sjs-slide-size: calc( var( --thumbnail-height ) * var( --ratio ) );
height: var( --thumbnail-height );
}
.project[data-view="information"] .project__media sjs-slide .project-thumbnail > img,
.project[data-view="information"] .project__media sjs-slide .project-media > .image,
.project[data-view="information"] .project__media sjs-slide .project-media > .video {
width: calc( var( --thumbnail-height ) * var( --ratio ) );
max-width: 100%;
} @media ( max-width: 1199px ) {
.project[data-view="information"] .project__media {
height: var( --thumbnail-height );
}
} @media ( min-width: 1200px ) {
.project[data-view="information"] .project__media {
width: 50%;
}
.project[data-view="information"] .project__media sjs-slides {
width: 100%;
flex-wrap: wrap;
justify-content: center;
padding: var( --grid-wrap-padding-vertical ) calc( var( --grid-wrap-padding-horizontal ) * 0.5 ) var( --grid-wrap-padding-vertical ) var( --grid-wrap-padding-horizontal );
}
}body {
}
.image {}
.image.is-loaded {
background: red;
}
.image-inner {}
.image__markup {
position: relative;
padding-top: calc( 100 / var( --image-ratio, var( --ratio ) ) * 1% );
}
.image__markup > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image__markup > img.has-focus-point {
object-position: var( --fpx, 50% ) var( --fpy, 50% );
}
.image__caption {}.project__information {
--transform: translateY( 100% );
position: absolute;
top: calc( var( --project-header-height ) + var( --thumbnail-height ) );
right: 0;
width: 100%;
height: calc( 100% - var( --project-header-height ) - var( --thumbnail-height ) );
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-transform: var( --transform );
-moz-transform: var( --transform );
transform: var( --transform );
z-index: 10;
}
.project__information::-webkit-scrollbar {
display: none;
}
.project[data-view="information"] .project__information {
--transform: none;
}
.project-content:not( :last-child ) {
margin-bottom: var( --line-height );
} .project:not( .is-active ) .project__information {
opacity: 0;
pointer-events: none;
} @media ( min-width: 1200px ) {
.project__information {
--transform: translateX( 100% );
top: var( --project-header-height );
width: 50%;
height: calc( 100% - var( --project-header-height ) );
}
.project__information > grid-wrap {
padding-left: calc( var( --grid-wrap-padding-horizontal ) * 0.5 );
}
}body {
--video-controls-height: calc( var( --line-height--regular ) + var( --font-size--small ) );
}
.video {}
.video-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.video__play-button {
--font-size: 1.5em;
--line-height: var( --font-size );
--size: 3.3em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: calc( 50% - var( --size ) * 0.5 );
left: calc( 50% - var( --size ) * 0.5 );
background: var( --light-gray );
width: var( --size );
height: var( --size );
border-radius: var( --size );
z-index: 20;
}
.video__play-button > i {
margin-left: 0.2em;
}
.video__preview-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.video__preview-image > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video[data-state="buffering"] .video__play-button,
.video[data-state="playing"] .video__play-button,
.video[data-state]:not( [data-state="loaded"] ) .video__preview-image {
display: none;
}
video-controls {
width: 100%;
max-width: calc( var( --video-max-height, 100vh ) * var( --ratio ) );
flex-shrink: 0;
padding-top: var( --font-size--small );
}
video-progress {
align-items: center;
}
video-control,
video-progress-bar {
margin-right: 0.75em;
}
video-display:not( :last-child ) {
margin-right: 0.5em;
}
video-progress-bar {
height: 50%;
background-color: var( --light-gray );
}#footer__navigation .menu {
display: flex;
justify-content: center;
}
#footer__navigation .menu-item {
display: inline-flex;
}
#footer__navigation .menu-item:not( :last-child )::after {
content: '/';
margin: 0 0.2em;
}