.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer{
margin-top:0;
}
.footer-crt {
font-family: var(--font-minitel), "Courier Prime", monospace;
position: relative;
isolation: isolate;
margin-inline: auto;
width: 100%;
box-sizing: border-box;
overflow: hidden;
background:
linear-gradient(165deg, rgba(11, 21, 26, 0.82) 0%, rgba(4, 8, 11, 0.88) 45%, rgba(7, 16, 23, 0.86) 100%),
url(//www.jeanmichelmoustache.com/wp-content/themes/jeanmichel/assets/images/jmminitel-w.webp) center / cover no-repeat;
box-shadow:
inset 0 0 100px rgba(0, 0, 0, 0.55),
inset 0 0 28px rgba(255, 255, 255, 0.08),
0 0 0 2px #172127,
0 0 0 1px rgba(255, 255, 255, 0.04),
0 18px 40px rgba(0, 0, 0, 0.45);
animation: footer-crt-power-flicker 4.2s steps(1, end) infinite;
}
.footer-crt__jitter {
position: relative;
z-index: 1;
}
.footer-crt__inner {
position: relative;
animation: footer-crt-brightness-jerk 72ms steps(1, end) infinite;
}
.footer-crt__inner > .footer-nav-widgets-wrapper,
.footer-crt__inner > #site-footer {
position: relative;
z-index: 1;
background: transparent;
}
.footer-nav-widgets-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding-block: clamp(2rem, 5vw, 3.5rem);
text-align: center;
color: var(--color-text-inverse);
} .footer-crt__inner::before {
content: "";
position: absolute;
left: -8%;
right: -8%;
bottom: -30%;
z-index: 2;
height: 30%;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 16%,
rgba(255, 255, 255, 0.58) 45%,
rgba(255, 255, 255, 0.46) 50%,
rgba(255, 255, 255, 0.34) 60%,
transparent 100%
),
linear-gradient(
180deg,
transparent 47%,
rgba(255, 255, 255, 0.9) 49%,
rgba(255, 255, 255, 0.82) 51%,
transparent 54%
),
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.24) 0 1px,
transparent 1px 4px
);
box-shadow:
0 -14px 28px rgba(255, 255, 255, 0.24),
0 12px 42px rgba(255, 255, 255, 0.18);
filter: blur(0.45px);
mix-blend-mode: screen;
transform: translate3d(0, 120%, 0);
animation: footer-crt-interference-band 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
} .footer-crt::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0.55;
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.18) 50%),
linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.045));
background-size: 100% 3px, 3px 100%;
background-repeat: repeat;
mix-blend-mode: multiply;
animation: footer-crt-scan-drift 6.5s linear infinite;
}
.footer-crt::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
animation: footer-crt-vignette-flicker 3.1s steps(1, end) infinite;
}
@keyframes footer-crt-interference-band {
0%,
38%,
100% {
opacity: 0;
transform: translate3d(0, 120%, 0);
}
44% {
opacity: 0.88;
transform: translate3d(-1.5%, 70%, 0);
}
52% {
opacity: 0.62;
transform: translate3d(1%, 42%, 0);
}
62% {
opacity: 1;
transform: translate3d(-0.75%, 8%, 0);
}
74% {
opacity: 0.72;
transform: translate3d(1.5%, -38%, 0);
}
86% {
opacity: 0;
transform: translate3d(0, -140%, 0);
}
}
@keyframes footer-crt-brightness-jerk {
0%,
100% {
filter: brightness(1) contrast(1);
}
50% {
filter: brightness(1.04) contrast(1.02);
}
}
@keyframes footer-crt-scan-drift {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 0 18px, 0 0;
}
}
@keyframes footer-crt-vignette-flicker {
0%,
92%,
100% {
opacity: 1;
}
93% {
opacity: 0.88;
}
94% {
opacity: 0.96;
}
95% {
opacity: 0.9;
}
}
@keyframes footer-crt-power-flicker {
0%,
96%,
100% {
opacity: 1;
}
97% {
opacity: 0.97;
}
98% {
opacity: 0.99;
}
99% {
opacity: 0.94;
}
} .footer-crt .footer-crt__retro-title {
margin: 0;
font-family: var(--font-minitel), "Courier Prime", "Courier New", Courier, monospace;
font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #fff !important;
text-shadow:
0 0 2px rgba(255, 255, 255, 0.95),
0 0 12px rgba(255, 255, 255, 0.42),
0 0 28px rgba(255, 255, 255, 0.18);
animation:
footer-crt-title-flicker 5.5s steps(1, end) infinite,
footer-crt-title-phosphor 38ms steps(1, end) infinite,
footer-crt-title-glitch-x 2.8s steps(1, end) infinite;
}
.footer-crt .footer-crt__retro-subtitle {
font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
font-weight: 400;
letter-spacing: 0.08em;
}
@keyframes footer-crt-title-flicker {
0%,
94%,
100% {
opacity: 1;
}
95% {
opacity: 0.88;
}
96% {
opacity: 1;
}
97% {
opacity: 0.94;
}
}
@keyframes footer-crt-title-phosphor {
0%,
100% {
filter: brightness(1) blur(0.35px);
}
50% {
filter: brightness(1.05) blur(0.5px);
}
}
@keyframes footer-crt-title-glitch-x {
0%,
31%,
33%,
100% {
transform: translateX(0);
}
32% {
transform: translateX(5px);
}
78%,
80% {
transform: translateX(0);
}
79% {
transform: translateX(-4px);
}
} .footer-nav {
width: 100%;
padding-block-start: clamp(1rem, 3vw, 1.75rem);
}
.footer-nav__grid {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 2.5rem);
justify-content: flex-start;
width: 100%;
text-align: left;
}
.footer-nav__col {
display: flex;
flex: 1 1 min(100%, 14rem);
flex-direction: column;
gap: var(--space-3);
min-width: min(100%, 14rem);
}
.footer-nav__title {
margin: 0;
font-family: var(--font-minitel), "Courier Prime", monospace;
font-size: clamp(1rem, 1.5vw, 1.25rem);
font-weight: 400;
line-height: var(--lh-snug);
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
.footer-nav__menu {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav__menu a {
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
transition: color var(--duration-fast) var(--ease);
}
.footer-nav__menu a:hover,
.footer-nav__menu a:focus {
color: #fff;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.footer-nav__col--social .footer-nav__title {
margin-bottom: var(--space-1);
}
.footer-nav__social {
display: flex;
flex-wrap: wrap;
gap: clamp(0.75rem, 2.5vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
opacity: 0.92;
transition: opacity 0.15s ease, transform 0.15s ease, color var(--duration-fast) var(--ease);
}
.footer-nav__social-label {
display: none;
text-decoration: none;
}
.footer-nav__social-link:hover,
.footer-nav__social-link:focus {
opacity: 1;
color: #fff;
text-decoration: none;
transform: scale(1.06);
}
.footer-nav__social-img {
display: block;
width: 30px;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
@media (min-width: 600px) {
.footer-nav__col {
flex: 1 1 calc(50% - 1.25rem);
min-width: min(100%, 12rem);
}
}
@media (min-width: 1024px) {
.footer-nav__col {
flex: 1 1 0;
min-width: 10rem;
}
.footer-nav__social {
flex-direction: column;
flex-wrap: nowrap;
gap: var(--space-2);
}
.footer-nav__social-link {
justify-content: flex-start;
gap: var(--space-2);
}
.footer-nav__social-label {
display: block;
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: rgba(255, 255, 255, 0.82);
transition: color var(--duration-fast) var(--ease);
}
.footer-nav__social-link:hover .footer-nav__social-label,
.footer-nav__social-link:focus .footer-nav__social-label {
color: #fff;
}
.footer-nav__social-img {
width: 30px;
flex-shrink: 0;
}
} .footer-crt #site-footer {
padding-block: clamp(1.5rem, 4vw, 2.5rem);
font-size: var(--fs-base);
color: rgba(255, 255, 255, 0.82);
}
.footer-crt .footer-credits {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.footer-crt .footer-copyright {
margin: 0;
font-family: var(--font-minitel), "Courier Prime", monospace;
font-size: var(--fs-base);
line-height: var(--lh-snug);
color: rgba(255, 255, 255, 0.72);
}
.footer-bottom-bar {
display: flex;
flex-wrap: wrap;
flex: 1 0 100%;
justify-content: space-between;
align-items: flex-end;
gap: 1rem 1.5rem;
width: 100%;
}
.footer-legal-links {
flex: 1 1 auto;
min-width: min(100%, 12rem);
}
.footer-legal-links__list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 0.5rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer-legal-links__link {
font-size: 0.875em;
color: rgba(255, 255, 255, 0.82);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.footer-legal-links__link:hover,
.footer-legal-links__link:focus {
color: #fff;
text-decoration: none;
}
.footer-payment-icons {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
gap: 0.5rem 0.65rem;
margin: 0 0 0 auto;
padding: 0;
list-style: none;
flex: 0 1 auto;
}
.footer-payment-icons__img {
display: block;
width: auto;
height: 24px;
max-width: 42px;
object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
.footer-crt,
.footer-crt::before,
.footer-crt::after,
.footer-crt__jitter,
.footer-crt__inner,
.footer-crt__inner::before {
animation: none;
}
.footer-crt .footer-crt__retro-title {
animation: none;
filter: none;
}
.footer-crt::before {
opacity: 0.4;
}
}