@font-face {
font-family: "Mostra Nuova";
src:
url(//festival.bar-bars.com/wp-content/themes/inspiro-child/assets/fonts/mostra-nuova.woff2) format("woff2"),
url(//festival.bar-bars.com/wp-content/themes/inspiro-child/assets/fonts/mostra-nuova.woff) format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body.splash-landing {
--font-mostra: "Mostra Nuova", "Trebuchet MS", "Arial Narrow", sans-serif;
--strip-w: 6.5%;
--strip-inset: 2.1%;
--frame-gap: 2.2%;
--frame-border: 2px solid #111;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #1a1a1a;
}
html:has(body.splash-landing) {
height: 100%;
overflow: hidden;
}
body.splash-landing * {
box-sizing: border-box;
}
body.splash-landing .stage {
position: relative;
width: 100vw;
height: 100vh;
height: 100dvh; background: linear-gradient(
180deg,
#fffffd 0%,
#fefef8 3%,
#fdfdef 6%,
#fbfae4 10%,
#fcf8d7 15%,
#f9edc8 20%,
#f7e2be 22%,
#f6dab6 25%,
#f7c5a6 29%,
#f1b295 34%,
#f2a98d 37%,
#f09e83 39%,
#ef947a 42%,
#ef836c 46%,
#ee765f 50%,
#ee6d5b 51%,
#ec6452 54%,
#eb5040 59%,
#e7473b 61%,
#dd4d42 64%,
#d6514c 66%,
#c95556 68%,
#b75d65 73%,
#af6276 76%,
#a56777 78%,
#9a6b7f 81%,
#917089 83%,
#867491 86%,
#7e789c 88%,
#737ca2 90%,
#6a80ad 93%,
#6184b5 95%,
#558abf 98%,
#4f8cc3 100%
);
overflow: hidden;
}
body.splash-landing .title {
position: absolute;
top: 1.5%;
left: 50%;
transform: translateX(-50%);
width: min(52vw, 800px);
height: auto;
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
body.splash-landing .waves {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 38%;
z-index: 1;
pointer-events: none;
}
body.splash-landing .waves svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
body.splash-landing .waves ellipse {
transform-box: view-box;
transform-origin: 800px 420px;
animation: splash-wave-ripple 4.8s ease-out infinite;
}
body.splash-landing .waves ellipse:nth-child(1) { animation-delay: 2.45s; }
body.splash-landing .waves ellipse:nth-child(2) { animation-delay: 2.1s; }
body.splash-landing .waves ellipse:nth-child(3) { animation-delay: 1.75s; }
body.splash-landing .waves ellipse:nth-child(4) { animation-delay: 1.4s; }
body.splash-landing .waves ellipse:nth-child(5) { animation-delay: 1.05s; }
body.splash-landing .waves ellipse:nth-child(6) { animation-delay: 0.7s; }
body.splash-landing .waves ellipse:nth-child(7) { animation-delay: 0.35s; }
body.splash-landing .waves ellipse:nth-child(8) { animation-delay: 0s; }
@keyframes splash-wave-ripple {
0% {
transform: scale(0.72);
stroke-opacity: 0;
stroke-width: 1.4;
}
18% {
stroke-opacity: 0.95;
}
55% {
stroke-opacity: 0.55;
}
100% {
transform: scale(1.08);
stroke-opacity: 0;
stroke-width: 2.6;
}
}
@media (prefers-reduced-motion: reduce) {
body.splash-landing .waves ellipse {
animation: none;
stroke-opacity: 0.85;
}
}
body.splash-landing .date {
position: absolute;
left: 50%;
bottom: 3.5%;
transform: translateX(-50%);
width: min(34vw, 520px);
height: auto;
z-index: 5;
pointer-events: none;
border: 2.5px solid #111;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
background: #fff;
}
body.splash-landing .strip {
position: absolute;
top: 7.5%;
bottom: 4%;
width: var(--strip-w);
z-index: 3;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--frame-gap);
}
body.splash-landing .strip-left {
left: var(--strip-inset);
}
body.splash-landing .strip-right {
right: var(--strip-inset);
}
body.splash-landing .frame {
flex: 1 1 0;
aspect-ratio: 1 / 1;
max-height: calc((100% - 3 * var(--frame-gap)) / 4);
border: var(--frame-border);
background: #0a0a0a;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.splash-landing .frame video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: #111;
} body.splash-landing .countdown {
--cd-card: #2a1520;
--cd-card-top: #341a28;
--cd-card-bot: #221018;
--cd-num: #ffe566;
--cd-num-dim: #f0b83a;
--cd-label: #f3e6c8;
--cd-hinge: #1a0c12;
--cd-gap: clamp(0.3rem, 0.85vw, 0.7rem);
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.55rem, 1.4vw, 1rem);
font-family: var(--font-mostra);
filter: drop-shadow(0 8px 20px rgba(40, 10, 20, 0.4));
animation: splash-countdown-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.splash-landing .cd-heading {
margin: 0;
font-family: var(--font-mostra);
font-weight: 700;
font-size: clamp(0.72rem, 1.6vw, 1.15rem);
letter-spacing: 0.14em;
text-indent: 0.14em;
text-transform: uppercase;
text-align: center;
color: #fff8e6;
text-shadow:
0 1px 0 rgba(80, 20, 30, 0.35),
0 2px 8px rgba(40, 10, 20, 0.35);
white-space: nowrap;
}
body.splash-landing .cd-row {
display: flex;
gap: var(--cd-gap);
align-items: flex-start;
justify-content: center;
}
@keyframes splash-countdown-in {
from {
opacity: 0;
transform: translate(-50%, -42%) scale(0.92);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
body.splash-landing .cd-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55em;
}
body.splash-landing .cd-card {
position: relative;
width: clamp(2.6rem, 6vw, 4.8rem);
height: clamp(3.5rem, 7vw, 5.8rem);
border-radius: 0.45em;
background: linear-gradient(180deg, var(--cd-card-top) 49.5%, var(--cd-hinge) 49.5%, var(--cd-hinge) 50.5%, var(--cd-card-bot) 50.5%);
box-shadow:
0 6px 0 #14080e,
0 10px 22px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 220, 160, 0.08);
overflow: hidden;
isolation: isolate;
}
body.splash-landing .cd-card::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: rgba(0, 0, 0, 0.55);
z-index: 3;
pointer-events: none;
box-shadow: 0 1px 0 rgba(255, 200, 120, 0.06);
}
body.splash-landing .cd-card::after {
content: "";
position: absolute;
left: -0.28em;
right: -0.28em;
top: 50%;
height: 0.55em;
margin-top: -0.275em;
background:
radial-gradient(circle at left center, var(--cd-hinge) 0.28em, transparent 0.29em),
radial-gradient(circle at right center, var(--cd-hinge) 0.28em, transparent 0.29em);
z-index: 4;
pointer-events: none;
}
body.splash-landing .cd-digits {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-mostra);
font-size: clamp(1.35rem, 3.5vw, 2.9rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
line-height: 1;
color: var(--cd-num);
text-shadow: 0 2px 0 rgba(120, 40, 20, 0.35);
background: linear-gradient(180deg, var(--cd-num) 46%, var(--cd-num-dim) 54%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
}
body.splash-landing .cd-digits.is-flip {
animation: splash-digit-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes splash-digit-pop {
0% {
transform: translateY(-8%) scaleY(0.88);
filter: brightness(1.25);
}
100% {
transform: translateY(0) scaleY(1);
filter: brightness(1);
}
}
body.splash-landing .cd-label {
font-family: var(--font-mostra);
font-size: clamp(0.45rem, 0.8vw, 0.62rem);
font-weight: 700;
letter-spacing: 0.18em;
text-indent: 0.18em;
text-transform: uppercase;
color: var(--cd-label);
text-shadow: 0 1px 2px rgba(60, 20, 30, 0.35);
white-space: nowrap;
} body.splash-landing.admin-bar .stage {
height: calc(100vh);
height: calc(100dvh);
} @media (max-aspect-ratio: 4/3) {
body.splash-landing .title {
width: min(70vw, 800px);
top: 2%;
}
body.splash-landing .strip {
width: 10%;
top: 14%;
}
body.splash-landing .date {
width: min(55vw, 520px);
bottom: 2.5%;
}
body.splash-landing .countdown {
top: 54%;
}
}
@media (max-width: 640px) {
body.splash-landing .strip {
width: 20%;
--strip-inset: 1.2%;
}
body.splash-landing .title {
width: 78vw;
}
body.splash-landing .date {
width: 63vw;
}
body.splash-landing .countdown {
--cd-gap: 0.35rem;
top: 55%;
scale: 1;
}
body.splash-landing .cd-label {
letter-spacing: 0.12em;
text-indent: 0.12em;
}
} body.splash-landing .splash-enter-btn {
position: absolute;
left: 50%;
bottom: 30%;
transform: translateX(-50%);
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.72em 1.9em;
border: 2.5px solid #111;
border-radius: 999px;
font-family: var(--font-mostra);
font-size: clamp(0.72rem, 1.5vw, 1.05rem);
font-weight: 700;
letter-spacing: 0.14em;
text-indent: 0.14em;
text-transform: uppercase;
color: #fff8e6;
text-shadow: 0 2px 6px rgba(40, 10, 20, 0.45);
background: linear-gradient(180deg, #ef7a5f 0%, #d94f3f 55%, #b93b33 100%);
box-shadow:
0 6px 0 #7c2420,
0 12px 26px rgba(0, 0, 0, 0.35);
cursor: pointer;
appearance: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
animation: splash-enter-pulse 2s ease-in-out infinite;
}
body.splash-landing .splash-enter-btn:hover {
filter: brightness(1.08);
}
body.splash-landing .splash-enter-btn:active {
transform: translateX(-50%) translateY(4px);
box-shadow:
0 2px 0 #7c2420,
0 6px 14px rgba(0, 0, 0, 0.35);
}
body.splash-landing .splash-enter-btn:focus-visible {
outline: 3px solid #ffe566;
outline-offset: 3px;
}
@keyframes splash-enter-pulse {
0%,
100% {
box-shadow:
0 6px 0 #7c2420,
0 12px 26px rgba(0, 0, 0, 0.35),
0 0 0 0 rgba(255, 229, 102, 0.55);
}
50% {
box-shadow:
0 6px 0 #7c2420,
0 12px 26px rgba(0, 0, 0, 0.35),
0 0 0 14px rgba(255, 229, 102, 0);
}
}
@media (prefers-reduced-motion: reduce) {
body.splash-landing .splash-enter-btn {
animation: none;
}
}
@media (max-width: 640px) {
body.splash-landing .splash-enter-btn {
bottom: 17%;
font-size: 0.68rem;
padding: 0.55em 1.4em;
}
} .splash-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 99999;
overflow: hidden;
}
body:not(.splash-landing) .splash-overlay {
display: none;
} @media (max-width: 640px) {
.splash-click-hint {
bottom: 6%;
font-size: 0.7rem;
padding: 0.45em 1em;
}
}