@layer reset, base, layout, components, utilities; :root {
--ooc-font: "Nunito Sans", sans-serif;
--ooc-black: #000000;
--ooc-white: #ffffff;
--ooc-transition-page: 0.5s ease;
--ooc-transition-slide: 0.45s ease;
--ooc-transition-fade: 0.25s ease; --ooc-page-transition-cleanup-ms: 520;
--ooc-slide-transition-cleanup-ms: 520;
--ooc-spacing-tight: 0.25rem;
--ooc-spacing-base: 2rem;
--ooc-spacing-wide: 2rem;
--ooc-spacing-content: 6rem;
--ooc-block-gap: 1rem;
--ooc-z-bg: 0;
--ooc-z-overlay: 1;
--ooc-z-viewport: 10;
--ooc-z-nav: 100;
--ooc-z-tabs: 95;
--ooc-z-header: 90;
--ooc-media-radius: 0; --ooc-overlay-bg: transparent; --ooc-overlay-solid: #000000; --ooc-arrow-btn-size: 5.75rem; --ooc-content-size: 800px;
--ooc-wide-size: 1200px;
} html {
font-size: 18px; }
@media (min-width: 1024px) {
html {
font-size: 20px; }
}
@media (max-width: 1023px) {
:root {
--ooc-arrow-btn-size: max(2.75rem, 44px); --ooc-transition-page: 0.38s ease;
--ooc-transition-slide: 0.36s ease;
--ooc-page-transition-cleanup-ms: 420;
--ooc-slide-transition-cleanup-ms: 400;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--ooc-transition-page: 0.04s ease;
--ooc-transition-slide: 0.04s ease;
--ooc-transition-fade: 0.05s ease;
--ooc-page-transition-cleanup-ms: 80;
--ooc-slide-transition-cleanup-ms: 80;
}
} @media (max-width: 499px) {
:root {
--ooc-spacing-wide: 1rem;
}
}
@media (min-width: 1600px) {
html {
font-size: 22px; }
}
@media (min-width: 2000px) {
html {
font-size: 24px; }
} @layer reset {
:where(*, *::before, *::after) {
box-sizing: border-box;
margin: 0;
padding: 0;
}
}
@layer base {
body {
font-family: var(--ooc-font);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.6;
margin: 0;
overflow: hidden;
background: var(--ooc-black);
transition: color 0.4s ease;
}
body[data-text-color="black"] {
color: var(--ooc-black);
}
body[data-text-color="white"] {
color: var(--ooc-white);
} body.ooc-page-transitioning {
transition: none;
}
body.ooc-page-transitioning #ooc-overlay {
transition: none;
}
a {
color: currentColor;
}
h1, h2 {
font-size: var(--wp--preset--font-size--large);
font-weight: 800;
}
h3 {
font-size: var(--wp--preset--font-size--medium);
font-weight: 800;
}
} @layer layout {
#ooc-bg {
position: fixed;
inset: 0;
z-index: var(--ooc-z-bg);
overflow: hidden;
}
#ooc-video {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
object-fit: cover; transform-origin: center center;
transition: none;
margin-left: -50vw;
margin-top: -50vh;
object-position: center center;
transform: scale(1.5) translate(0, calc(100vh / 6));
}
@media (max-width: 1023px) {
#ooc-video {
transform: scale(1.28) translate(0, calc(100vh / 6));
}
}
#ooc-video.ooc-video--transform-smooth {
transition: transform 0.5s ease-out;
}
#ooc-video.ooc-video-panning {
transition: none;
} #ooc-overlay {
position: fixed;
inset: 0;
z-index: var(--ooc-z-overlay);
background-color: transparent;
transition: background-color 0.4s ease;
pointer-events: none;
}
#ooc-viewport {
position: fixed;
inset: 0;
z-index: var(--ooc-z-viewport);
overflow: hidden;
} body.ooc-on-home #ooc-viewport {
touch-action: pan-y pinch-zoom;
}
.ooc-page {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
} #ooc-viewport.ooc-navigating .ooc-page:not(.ooc-page--exit) {
z-index: 1;
}
#ooc-viewport.ooc-navigating .ooc-page--exit {
z-index: 2;
} #ooc-viewport.ooc-navigating .ooc-page {
will-change: transform, opacity;
} @media (max-width: 1023px) {
body {
overflow-x: hidden;
}
#ooc-viewport {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.ooc-page {
position: relative;
inset: auto;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
height: auto;
} #ooc-viewport.ooc-navigating {
overflow: hidden;
}
#ooc-viewport.ooc-navigating .ooc-page {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
min-height: 0;
}
}
} @layer components { #ooc-header {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--ooc-z-header);
padding: var(--ooc-spacing-base);
}
@media (max-width: 1023px) { #ooc-header {
inset-inline: 0;
inset-block-start: 1.75rem;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
}
body:not(.ooc-on-home) #ooc-header {
display: none;
}
}
#ooc-site-title.ooc-site-title {
display: inline-block;
line-height: 0;
font-size: 0;
text-decoration: none;
color: currentColor;
opacity: 1;
transition: opacity 0.5s ease;
text-decoration: none!important;
}
#ooc-logo-canvas.ooc-logo-canvas {
display: block;
width: 100%;
max-width: 18rem;
height: auto;
}
body:not(.ooc-on-home) #ooc-site-title {
opacity: 1;
} .ooc-tabs {
position: fixed;
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: auto;
padding: var(--ooc-spacing-base);
z-index: var(--ooc-z-tabs);
display: flex;
flex-direction: row;
gap: var(--ooc-spacing-wide);
align-items: center; transition:
background-color 0.25s ease,
border-radius 0.25s ease;
}
.ooc-tabs[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.ooc-tabs {
transition: none;
}
}
@keyframes ooc-tab-appear {
from {
opacity: 0;
transform: scale(4);
filter: blur(2em);
}
to {
opacity: var(--ooc-tab-appear-end-opacity, 0.6);
transform: scale(1);
filter: blur(var(--ooc-tab-appear-end-blur, 0.07em));
}
}
.ooc-tab {
--ooc-tab-appear-end-opacity: 0.6;
--ooc-tab-appear-end-blur: 0.07em;
background: none;
border: none;
font-family: var(--ooc-font);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
color: currentColor;
cursor: pointer;
padding-block: var(--ooc-spacing-tight);
padding-inline: 0;
filter: blur(.07em);
opacity: 0.6;
transition: filter 0.3s ease, opacity 0.3s ease, font-weight 0.3s ease;
white-space: nowrap;
animation-name: ooc-tab-appear;
animation-duration: 0.8s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: both;
animation-delay: 1.45s;
transform-origin: center center;
}
.ooc-tabs .ooc-tab:nth-child(1) {
animation-delay: 1.45s;
}
.ooc-tabs .ooc-tab:nth-child(2) {
animation-delay: 1.75s;
}
.ooc-tabs .ooc-tab:nth-child(3) {
animation-delay: 2.05s;
}
.ooc-tabs .ooc-tab:nth-child(4) {
animation-delay: 2.35s;
}
.ooc-tabs .ooc-tab:nth-child(5) {
animation-delay: 2.65s;
}
.ooc-tabs .ooc-tab:nth-child(6) {
animation-delay: 2.95s;
}
.ooc-tabs .ooc-tab:nth-child(7) {
animation-delay: 3.25s;
}
.ooc-tabs .ooc-tab:nth-child(8) {
animation-delay: 3.55s;
}
@media (prefers-reduced-motion: reduce) {
.ooc-tab {
animation: none;
}
}
@media (hover: hover) and (pointer: fine) {
.ooc-tab:hover {
filter: blur(0);
opacity: 0.9;
}
}
.ooc-tab--active {
--ooc-tab-appear-end-opacity: 1;
--ooc-tab-appear-end-blur: 0;
filter: blur(0);
opacity: 1;
}
@media (max-width: 1023px) { @keyframes ooc-tab-appear-mobile {
from {
opacity: 0;
transform: translateY(-0.35em);
}
to {
opacity: var(--ooc-tab-appear-end-opacity, 0.6);
transform: translateY(0);
}
}
.ooc-tab {
filter: none;
--ooc-tab-appear-end-blur: 0;
animation-name: ooc-tab-appear-mobile;
transition: opacity 0.3s ease, font-weight 0.3s ease;
}
.ooc-tabs {
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 2rem;
justify-content: left;
gap: 1rem;
} .ooc-tabs.ooc-tabs--scrolled {
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-start: 0;
justify-content: left;
gap: 1rem;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: 0;
padding-inline: var(--ooc-spacing-base);
box-sizing: border-box;
align-items: center;
min-height: calc(env(safe-area-inset-top, 0px) + var(--ooc-arrow-btn-size));
height: calc(env(safe-area-inset-top, 0px) + var(--ooc-arrow-btn-size));
background-color: var(--ooc-overlay-solid);
border-radius: 0 0 var(--ooc-media-radius) var(--ooc-media-radius);
}
.ooc-tabs.ooc-tabs--scrolled .ooc-tab {
filter: none;
padding-block: 0;
}
.ooc-tabs.ooc-tabs--scrolled .ooc-tab:not(.ooc-tab--active) {
opacity: 0.75;
}
}
@media (max-width: 499px) {
#ooc-header,
.ooc-tabs {
padding-inline: 1rem;
}
.ooc-tabs.ooc-tabs--scrolled {
padding-inline: 1rem;
}
} #ooc-nav {
position: fixed;
inset: 0;
z-index: var(--ooc-z-nav);
pointer-events: none;
} #ooc-nav.ooc-nav--awaiting-logo {
opacity: 0;
visibility: hidden;
transition: none;
}
#ooc-nav.ooc-nav--logo-revealed {
opacity: 1;
visibility: visible;
transition: opacity 0.65s ease;
}
@media (prefers-reduced-motion: reduce) {
#ooc-nav.ooc-nav--logo-revealed {
transition: none;
}
}
.ooc-arrow {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: currentColor;
cursor: pointer;
pointer-events: auto;
box-sizing: border-box;
width: var(--ooc-arrow-btn-size);
height: var(--ooc-arrow-btn-size);
min-width: var(--ooc-arrow-btn-size);
min-height: var(--ooc-arrow-btn-size);
padding: 0;
transition: none;
}
.ooc-arrow svg {
display: block;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
stroke: currentColor;
transition: transform 0.25s ease;
}
.ooc-arrow--up svg {
transform-origin: center bottom;
}
.ooc-arrow--down svg {
transform-origin: center top;
}
.ooc-arrow--left svg {
transform-origin: right center;
}
.ooc-arrow--right svg {
transform-origin: left center;
}
.ooc-arrow:hover {
background-color: var(--ooc-arrow-target-color, transparent);
}
.ooc-arrow--up {
inset-block-start: 0;
inset-inline-start: 50%;
transform: translateX(-50%);
flex-direction: column;
border-top-left-radius: 0;
border-top-right-radius: 0;
overflow: visible;
}
.ooc-arrow--up:hover {
background: none;
}
.ooc-arrow--up svg {
position: relative;
z-index: 1;
}
.ooc-arrow--up .ooc-arrow__label {
position: absolute;
inset-inline-start: 50%;
top: 4.5rem;
transform: translate(-50%, -100%);
margin-top: 0;
background-color: transparent;
border-radius: var(--ooc-media-radius);
transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
white-space: nowrap;
}
.ooc-arrow--up:hover .ooc-arrow__label {
transform: translate(-50%, 0);
background-color: var(--ooc-arrow-target-color, transparent);
color: var(--ooc-arrow-target-text-color, currentColor);
}
.ooc-arrow--down {
inset-block-end: 0;
inset-inline-start: 50%;
transform: translateX(-50%);
flex-direction: column-reverse;
overflow: visible;
}
.ooc-arrow--down:hover {
background: none;
}
.ooc-arrow--down svg {
position: relative;
z-index: 1;
}
.ooc-arrow--down .ooc-arrow__label {
position: absolute;
inset-inline-start: 50%;
bottom: 4.5rem;
transform: translate(-50%, 100%);
margin-bottom: 0;
background-color: transparent;
border-radius: var(--ooc-media-radius);
transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
white-space: nowrap;
}
.ooc-arrow--down:hover .ooc-arrow__label {
transform: translate(-50%, 0);
background-color: var(--ooc-arrow-target-color, transparent);
color: var(--ooc-arrow-target-text-color, currentColor);
}
.ooc-arrow--left {
inset-inline-start: 0;
inset-block-start: 50%;
transform: translateY(-50%);
flex-direction: row;
overflow: visible;
}
.ooc-arrow--left:hover {
background: none;
}
.ooc-arrow--left svg {
position: relative;
z-index: 1;
}
.ooc-arrow--left .ooc-arrow__label {
position: absolute;
inset-block-start: 50%;
left: 4.5rem;
transform: translate(-100%, -50%);
margin-left: 0;
background-color: transparent;
border-radius: var(--ooc-media-radius);
transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
white-space: nowrap;
}
.ooc-arrow--left:hover .ooc-arrow__label {
transform: translate(0, -50%);
background-color: var(--ooc-arrow-target-color, transparent);
color: var(--ooc-arrow-target-text-color, currentColor);
}
.ooc-arrow--right {
inset-inline-end: 0;
inset-block-start: 50%;
transform: translateY(-50%);
flex-direction: row-reverse;
overflow: visible;
}
.ooc-arrow--right:hover {
background: none;
}
.ooc-arrow--right svg {
position: relative;
z-index: 1;
}
.ooc-arrow--right .ooc-arrow__label {
position: absolute;
inset-block-start: 50%;
right: 4.5rem;
transform: translate(100%, -50%);
margin-right: 0;
background-color: transparent;
border-radius: var(--ooc-media-radius);
transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
white-space: nowrap;
}
.ooc-arrow--right:hover .ooc-arrow__label {
transform: translate(0, -50%);
background-color: var(--ooc-arrow-target-color, transparent);
color: var(--ooc-arrow-target-text-color, currentColor);
}
.ooc-arrow__label {
font-size: var(--wp--preset--font-size--small);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
max-width: 12rem;
min-width: 4rem;
padding: 0.35rem 0.35rem;
color: var(--ooc-arrow-target-text-color, inherit);
}
.ooc-arrow:hover .ooc-arrow__label {
opacity: 1;
} .ooc-arrow--up.ooc-arrow--slide-label .ooc-arrow__label,
.ooc-arrow--down.ooc-arrow--slide-label .ooc-arrow__label,
.ooc-arrow--up.ooc-arrow--slide-label:hover .ooc-arrow__label,
.ooc-arrow--down.ooc-arrow--slide-label:hover .ooc-arrow__label {
opacity: 0 !important;
visibility: hidden;
} @keyframes ooc-arrow-bob {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-10px); }
}
.ooc-arrow--down.ooc-hint svg {
animation: ooc-arrow-bob 1s ease-in-out infinite;
}
.ooc-arrow--down.ooc-hint .ooc-arrow__label {
transform: translate(-50%, 0);
transition: transform 0.25s ease, opacity 0.8s ease, background-color 0.6s ease, color 0.6s ease;
}
.ooc-arrow--down.ooc-hint.ooc-hint--label .ooc-arrow__label {
opacity: 1;
background-color: var(--ooc-arrow-target-color, transparent);
color: var(--ooc-arrow-target-text-color, currentColor);
}
@media (max-width: 1023px) { .ooc-arrow,
.ooc-arrow:hover,
.ooc-arrow--up:hover,
.ooc-arrow--down:hover,
.ooc-arrow--left:hover,
.ooc-arrow--right:hover {
background-color: var(--ooc-overlay-solid);
color: currentColor;
border-radius: var(--ooc-media-radius);
}
.ooc-arrow__label {
font-weight: 600;
} .ooc-arrow--down,
.ooc-arrow--down:hover {
background-color: var(--ooc-arrow-target-color, var(--ooc-overlay-solid));
color: var(--ooc-arrow-target-text-color, currentColor);
}
.ooc-arrow svg {
width: 2rem;
height: 2rem;
} .ooc-arrow--left {
inset-block-start: auto;
inset-block-end: env(safe-area-inset-bottom, 0px);
inset-inline-start: 0;
transform: none;
}
.ooc-arrow--right {
inset-block-start: auto;
inset-block-end: env(safe-area-inset-bottom, 0px);
inset-inline-end: 0;
transform: none;
}
.ooc-arrow--up {
inset-block-start: 0;
}
.ooc-arrow--down {
inset-block-end: env(safe-area-inset-bottom, 0px);
} .ooc-arrow--left .ooc-arrow__label,
.ooc-arrow--right .ooc-arrow__label,
.ooc-arrow--up .ooc-arrow__label,
.ooc-arrow--left:hover .ooc-arrow__label,
.ooc-arrow--right:hover .ooc-arrow__label,
.ooc-arrow--up:hover .ooc-arrow__label {
opacity: 0 !important;
visibility: hidden !important;
} .ooc-arrow--down:not(.ooc-arrow--slide-label) .ooc-arrow__label,
.ooc-arrow--down:not(.ooc-arrow--slide-label).ooc-hint .ooc-arrow__label,
.ooc-arrow--down:not(.ooc-arrow--slide-label).ooc-hint.ooc-hint--label .ooc-arrow__label {
opacity: 1;
pointer-events: auto;
cursor: pointer;
background-color: var(--ooc-arrow-target-color, var(--ooc-overlay-solid));
color: var(--ooc-arrow-target-text-color, currentColor);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
right: auto;
bottom: 100%;
width: max-content;
max-width: min(90vw, 12rem);
height: var(--ooc-arrow-btn-size);
min-height: var(--ooc-arrow-btn-size);
padding: 0 0.75rem;
margin: 0;
transform: translateX(-50%);
white-space: nowrap;
} body.ooc-on-home .ooc-arrow,
body.ooc-on-home .ooc-arrow:hover,
body.ooc-on-home .ooc-arrow--up:hover,
body.ooc-on-home .ooc-arrow--down:hover,
body.ooc-on-home .ooc-arrow--left:hover,
body.ooc-on-home .ooc-arrow--right:hover {
background-color: var(--ooc-overlay-bg, transparent);
}
body.ooc-on-home .ooc-arrow--down,
body.ooc-on-home .ooc-arrow--down:hover {
background-color: var(--ooc-arrow-target-color, transparent);
}
body.ooc-on-home .ooc-arrow--down:not(.ooc-arrow--slide-label) .ooc-arrow__label,
body.ooc-on-home .ooc-arrow--down:not(.ooc-arrow--slide-label).ooc-hint .ooc-arrow__label,
body.ooc-on-home .ooc-arrow--down:not(.ooc-arrow--slide-label).ooc-hint.ooc-hint--label .ooc-arrow__label {
background-color: var(--ooc-arrow-target-color, transparent);
}
} .ooc-page--enter-left {
transform: translateX(-18%);
opacity: 0;
}
.ooc-page--enter-right {
transform: translateX(18%);
opacity: 0;
}
.ooc-page--enter-up {
transform: translateY(-22%);
opacity: 0;
}
.ooc-page--enter-down {
transform: translateY(22%);
opacity: 0;
}
.ooc-page--active {
transform: translate(0, 0);
opacity: 1;
transition:
transform var(--ooc-transition-page) cubic-bezier(0.22, 1, 0.36, 1),
opacity var(--ooc-transition-page) ease;
}
.ooc-page--exit {
opacity: 0;
pointer-events: none;
transition:
transform var(--ooc-transition-page) cubic-bezier(0.22, 1, 0.36, 1),
opacity var(--ooc-transition-page) ease;
}
.ooc-page--exit--left {
transform: translateX(-14%);
}
.ooc-page--exit--right {
transform: translateX(14%);
}
.ooc-page--exit--up {
transform: translateY(-14%);
}
.ooc-page--exit--down {
transform: translateY(14%);
} .ooc-slide {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh; min-height: 0;
display: flex;
flex-direction: column;
gap: var(--ooc-block-gap);
align-items: center; justify-content: center;
justify-content: safe center;
padding-block: var(--ooc-spacing-wide);
padding-inline: var(--ooc-spacing-wide);
padding-top: 5rem;
padding-bottom: 5rem;
opacity: 0;
pointer-events: none;
transition: transform var(--ooc-transition-slide), opacity var(--ooc-transition-slide);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.ooc-slide--active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.ooc-slide--exit-up {
transform: translateY(-100%);
opacity: 0;
}
.ooc-slide--exit-down {
transform: translateY(100%);
opacity: 0;
} .ooc-page--align-top .ooc-slide {
justify-content: flex-start;
padding-block-start: calc(2 * 5rem);
padding-block-end: var(--ooc-spacing-content);
}
.ooc-page--align-center .ooc-slide {
justify-content: center;
justify-content: safe center;
}
.ooc-page--align-bottom .ooc-slide {
justify-content: flex-end;
justify-content: safe flex-end;
}
@media (max-width: 1023px) { .ooc-slide {
position: relative;
inset: auto;
width: 100%;  height: auto;
max-height: none;
opacity: 1;
pointer-events: auto;
transform: none;
transition: none;
overflow: visible;
}
.ooc-slide:first-child {
padding-top: 8rem;
}
.ooc-slide:last-child {
padding-bottom: 15rem;
}
.ooc-slide--exit-up,
.ooc-slide--exit-down {
transform: none;
opacity: 1;
}
.ooc-page--align-top .ooc-slide {
padding-block-start: 5rem;
} #ooc-viewport.ooc-navigating .ooc-slide {
position: absolute;
inset: 0;
width: 100vw;
height: 100vh;
min-height: 0;
max-height: none;
opacity: 0;
pointer-events: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: transform var(--ooc-transition-slide), opacity var(--ooc-transition-slide);
justify-content: flex-start;
justify-content: safe flex-start;
padding-top: calc(5rem + 2rem);
padding-bottom: 5rem;
}
#ooc-viewport.ooc-navigating .ooc-page--align-top .ooc-slide {
padding-block-start: 5rem;
}
#ooc-viewport.ooc-navigating .ooc-page--align-bottom .ooc-slide {
justify-content: flex-end;
justify-content: safe flex-end;
padding-block-end: var(--ooc-spacing-content);
}
#ooc-viewport.ooc-navigating .ooc-slide--active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#ooc-viewport.ooc-navigating .ooc-slide--exit-up {
transform: translateY(-100%);
opacity: 0;
}
#ooc-viewport.ooc-navigating .ooc-slide--exit-down {
transform: translateY(100%);
opacity: 0;
}
} .ooc-slide__content {
max-width: 50rem;
width: 100%;
}
@media (max-width: 1200px) {
.ooc-slide__content {
max-width: 40rem;
}
} .ooc-slide__content > * {
margin-block-end: var(--ooc-block-gap);
}
.ooc-slide__content > *:last-child {
margin-block-end: 0;
} .ooc-page-title {
margin: 0 0 0.5rem 0;
font-size: var(--wp--preset--font-size--large);
font-weight: 700;
}
.ooc-page-title--hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
} @layer utilities {
.ooc-page--child-fade-out {
opacity: 0;
transition: opacity var(--ooc-transition-fade);
}
.ooc-page--child-fade-in {
opacity: 1;
transition: opacity var(--ooc-transition-fade);
}
.ooc-slide .has-black-color {
color: var(--ooc-black);
}
.ooc-slide .has-white-color {
color: var(--ooc-white);
}
.ooc-slide .has-black-background-color {
background-color: var(--ooc-black);
}
.ooc-slide .has-white-background-color {
background-color: var(--ooc-white);
}
.ooc-slide .has-small-font-size {
font-size: var(--wp--preset--font-size--small);
}
.ooc-slide .has-medium-font-size {
font-size: var(--wp--preset--font-size--medium);
}
.ooc-slide .has-large-font-size {
font-size: var(--wp--preset--font-size--large);
}
.ooc-page-divider {
display: none;
} .ooc-image-with-audio {
position: relative;
display: block;
line-height: 0;
}
.ooc-image-with-audio--playing {
line-height: normal;
overflow: visible;
}
.ooc-image-with-audio__visual {
position: relative;
display: block;
width: 100%;
border-radius: var(--ooc-media-radius);
overflow: hidden;
}
.ooc-image-with-audio__img {
position: relative;
z-index: 0;
width: 100%;
height: auto;
display: block;
vertical-align: middle;
border-radius: var(--ooc-media-radius);
pointer-events: none;
}
.ooc-image-with-audio .ooc-media-play-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
color: var(--ooc-black);
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.ooc-image-with-audio .ooc-media-play-overlay:hover {
background: rgba(0, 0, 0, 0.05);
}
.ooc-image-with-audio .ooc-media-play-overlay .ooc-play-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ooc-white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.ooc-image-with-audio .ooc-media-play-overlay .ooc-play-icon svg {
width: 24px;
height: 24px;
margin-left: 3px;
display: block;
flex-shrink: 0;
}
.ooc-image-with-audio--playing .ooc-image-with-audio__visual {
cursor: pointer;
}
.ooc-image-with-audio--playing .ooc-media-play-overlay {
opacity: 0;
visibility: hidden;
pointer-events: none;
} .ooc-image-with-audio-editor-preview .ooc-image-with-audio__trigger,
.ooc-image-with-audio-editor-preview .ooc-image-with-audio__play {
pointer-events: none;
} .ooc-image-with-audio:not(.ooc-image-with-audio--playing) .ooc-image-with-audio__audio {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-height: 0;
min-height: 0;
margin: 0;
padding: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow: hidden;
} .wp-block-ooc-image-with-audio:has( .ooc-image-with-audio--playing ) {
overflow: visible;
} .ooc-image-with-audio--playing .ooc-image-with-audio__audio {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 30;
display: block;
width: 100%;
height: auto;
min-height: 54px;
max-height: none;
margin: 0;
padding: 0;
line-height: normal;
box-sizing: border-box;
opacity: 1;
visibility: visible;
pointer-events: auto;
overflow: visible;
transition: opacity 0.3s ease;
border-radius: 0;
color-scheme: dark;
background-color: #161616;
accent-color: #c8c8c8;
outline: none;
}
.ooc-image-with-audio--playing .ooc-image-with-audio__audio::-webkit-media-controls-panel { border-radius: 0;
}
.ooc-image-with-audio--playing .ooc-image-with-audio__audio::-webkit-media-controls-enclosure {
border-radius: 0; } .wp-block-video {
position: relative;
width: 100%;
height: auto;
border-radius: var(--ooc-media-radius);
overflow: visible;
margin-top: calc(2 * var(--ooc-block-gap))!important;
margin-bottom: calc(2 * var(--ooc-block-gap))!important;
}
.wp-block-video video {
position: relative;
display: block;
width: 100%;
height: auto;
object-fit: contain; border-radius: var(--ooc-media-radius) var(--ooc-media-radius) 0 0;
color-scheme: dark;
background-color: #161616;
accent-color: #c8c8c8;
outline: none;
}
.wp-block-video video::-webkit-media-controls-panel { border-radius: 0;
}
.wp-block-video video::-webkit-media-controls-enclosure {
border-radius: 0; } .wp-block-image,
.wp-block-image img {
border-radius: var(--ooc-media-radius);
}
.wp-block-image {
overflow: hidden;
} .ooc-slide__content .alignwide {
max-width: var(--ooc-wide-size);
margin-left: calc(50% - min(var(--ooc-wide-size) / 2, 50vw))!important;
margin-right: calc(50% - min(var(--ooc-wide-size) / 2, 50vw))!important;
margin-top: 5rem!important;
margin-bottom: 5rem!important;
}
.ooc-slide__content .alignwide img,
.ooc-slide__content .alignwide video {
width: 100%;
height: auto;
display: block;
} .ooc-slide__content .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw)!important;
margin-right: calc(50% - 50vw)!important;
margin-top: 5rem!important;
margin-bottom: 5rem!important;
}
.ooc-slide__content .alignfull img,
.ooc-slide__content .alignfull video {
width: 100%;
height: auto;
display: block;
} :where(figcaption),
.wp-element-caption {
font-size: var(--wp--preset--font-size--small)!important;
text-align: left !important;
}
table :where(caption) {
text-align: left !important;
}
.wp-block-ooc-image-with-audio figcaption,
.wp-block-video figcaption,
.ooc-image-with-audio__caption {
display: block;
margin-top: 0.5em;
color: inherit;
} .wp-block-embed__wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.wp-block-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
} body[data-text-color="black"] {
color: var(--ooc-black);
}
body[data-text-color="black"] .wp-block-image figcaption {
color: var(--ooc-black);
}
body[data-text-color="white"] {
color: var(--ooc-white);
}
body[data-text-color="white"] .wp-block-image figcaption {
color: var(--ooc-white);
}
body[data-text-color="black"] .wp-block-ooc-image-with-audio figcaption,
body[data-text-color="black"] .wp-block-video figcaption {
color: var(--ooc-black);
}
body[data-text-color="white"] .wp-block-ooc-image-with-audio figcaption,
body[data-text-color="white"] .wp-block-video figcaption {
color: var(--ooc-white);
}