@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-decoration: none;
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;
}
}
body.splash-landing .splash-edito-link {
position: absolute;
left: 50%;
bottom: calc(30% - 3.4rem);
transform: translateX(-50%);
z-index: 6;
font-family: var(--font-mostra);
font-size: clamp(0.68rem, 1.3vw, 0.95rem);
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #30050c;
text-decoration: none;
text-underline-offset: 0.25em;
text-shadow: 0 2px 6px rgba(40, 10, 20, 0.45);
white-space: nowrap;
}
body.splash-landing .splash-edito-link:hover {
color: #ffe566;
}
@media (max-width: 640px) {
body.splash-landing .splash-enter-btn {
bottom: 17%;
font-size: 0.68rem;
padding: 0.55em 1.4em;
}
body.splash-landing .splash-edito-link {
bottom: calc(17% - 2.8rem);
font-size: 0.62rem;
}
} .splash-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 99999;
overflow: hidden;
}    .error-404 {
--strip-w: 11%;
--strip-inset: 2.1%;
--frame-gap: 2.2%;
--frame-border: 2px solid #111;
--font-mostra: "Mostra Nuova", "Trebuchet MS", "Arial Narrow", sans-serif;
max-height: calc(100dvh - 120px);
overflow: hidden;
display: flex;
flex-direction: column;
}
.error-404 .inner-wrap,
.error-404 #primary,
.error-404 .site-main,
.error-404 .error-404-content {
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.error-404 .error-404-content {
position: relative;
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%
);
border-radius: 0.5rem;
overflow: hidden;
}
.error-404 .error-header {
position: static;
flex: 0 0 22%;
min-height: 0;
display: flex;
align-items: flex-start;
justify-content: center;
}
.error-404 .error-visual {
position: static;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0 8% 0;
}
.error-404 .title {
width: min(22vw, 280px);
height: auto;
margin-top: 0.4rem;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
.error-404 .waves {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 38%;
pointer-events: none;
}
.error-404 .waves svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.error-404 .waves ellipse {
transform-box: view-box;
transform-origin: 800px 420px;
animation: splash-wave-ripple 4.8s ease-out infinite;
}
.error-404 .waves ellipse:nth-child(1) { animation-delay: 2.45s; }
.error-404 .waves ellipse:nth-child(2) { animation-delay: 2.1s; }
.error-404 .waves ellipse:nth-child(3) { animation-delay: 1.75s; }
.error-404 .waves ellipse:nth-child(4) { animation-delay: 1.4s; }
.error-404 .waves ellipse:nth-child(5) { animation-delay: 1.05s; }
.error-404 .waves ellipse:nth-child(6) { animation-delay: 0.7s; }
.error-404 .waves ellipse:nth-child(7) { animation-delay: 0.35s; }
.error-404 .waves ellipse:nth-child(8) { animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
.error-404 .waves ellipse {
animation: none;
stroke-opacity: 0.85;
}
}
.error-404 .date {
width: min(22vw, 280px);
height: auto;
border: 2.5px solid #111;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
background: #fff;
}
.error-404 .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);
}
.error-404 .strip-left {
left: var(--strip-inset);
}
.error-404 .strip-right {
right: var(--strip-inset);
}
.error-404 .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);
}
.error-404 .frame video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: #111;
} .error-404 .error-content {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
gap: clamp(0.6rem, 1.4vw, 1.1rem);
font-family: var(--font-mostra);
padding: 0 clamp(1rem, 3vw, 3rem) clamp(0.8rem, 2vw, 1.4rem);
animation: error-content-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes error-content-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.error-404 .error-code {
margin: 0;
font-family: var(--font-mostra);
font-weight: 700;
font-size: clamp(4.8rem, 12vw, 9rem) !important;
line-height: 1;
letter-spacing: -0.02em;
color: #fedf16;
text-shadow:
0 2px 0 #7c2420,
0 6px 16px rgba(185, 59, 51, 0.35);
}
.error-404 .error-title {
margin: -0.35rem 0 0;
font-family: var(--font-mostra);
font-weight: 700;
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
letter-spacing: 0.1em;
text-indent: 0.1em;
text-transform: uppercase;
color: #1a1a1a;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.error-404 .error-message {
margin: -0.25rem 0 0;
max-width: 60ch;
font-family: "Trebuchet MS", "Arial Narrow", sans-serif;
font-size: clamp(0.9rem, 1.8vw, 1.15rem);
line-height: 1.5;
color: #fedf16;
}
.error-404 .error-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.75rem, 1.5vw, 1.2rem);
margin-top: clamp(0.5rem, 1vw, 1rem);
}
.error-404 .error-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7em 1.6em;
border: 2.5px solid #111;
border-radius: 999px;
font-family: var(--font-mostra);
font-size: clamp(0.7rem, 1.4vw, 1rem);
font-weight: 700;
letter-spacing: 0.12em;
text-indent: 0.12em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
appearance: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.error-404 .error-btn--primary {
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);
}
.error-404 .error-btn--primary:hover {
filter: brightness(1.08);
}
.error-404 .error-btn--primary:active {
transform: translateY(4px);
box-shadow:
0 2px 0 #7c2420,
0 6px 14px rgba(0, 0, 0, 0.35);
}
.error-404 .error-btn--programmation {
color: #1a1a1a;
background: linear-gradient(180deg, #fff4a8 0%, #ffe566 55%, #f0b83a 100%);
box-shadow:
0 6px 0 #c48a12,
0 12px 26px rgba(0, 0, 0, 0.28);
}
.error-404 .error-btn--programmation:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow:
0 8px 0 #c48a12,
0 16px 28px rgba(0, 0, 0, 0.32);
}
.error-404 .error-btn--programmation:active {
transform: translateY(4px);
box-shadow:
0 2px 0 #c48a12,
0 6px 14px rgba(0, 0, 0, 0.28);
}
.error-404 .error-btn:focus-visible {
outline: 3px solid #ffe566;
outline-offset: 3px;
}
@media (max-aspect-ratio: 4/3) {
.error-404 .error-header {
flex-basis: 24%;
}
.error-404 .title {
width: min(34vw, 240px);
}
.error-404 .strip {
width: 11%;
}
.error-404 .date {
width: min(55vw, 520px);
}
}
@media (max-width: 640px) {
.error-404 .content-area {
padding-top: 0 !important;
}
.error-404 .strip {
width: 11%;
--strip-inset: 1.2%;
}
.error-404 .title {
width: min(42vw, 180px);
}
.error-404 .date {
width: 63vw;
}
.error-404 .error-header {
flex-basis: 22%;
padding: 0 0.5rem 0;
}
.error-404 .error-content {
gap: 0.65rem;
padding: 0 clamp(0.5rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.error-404 .error-code {
font-size: clamp(6rem, 20vw, 12rem) !important;
}
.error-404 .error-title {
font-size: clamp(1.2rem, 3vw, 1.8rem);
letter-spacing: 0.08em;
text-indent: 0.08em;
}
.error-404 .error-message {
font-size: 0.85rem;
margin: -0.25rem 42px 0;
}
.error-404 .error-actions {
flex-direction: column;
align-items: center;
gap: 0.7rem;
}
.error-404 .error-btn {
width: auto;
max-width: 70vw;
padding: 0.55em 0.9em;
font-size: 0.62rem;
letter-spacing: 0.06em;
text-indent: 0.06em;
}
}