@charset "UTF-8";

 @font-face {
font-family: 'Kiez';
src: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/fonts/Kiez-Slanted.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Dreja';
src: local('Dreja Text'), local('Dreja-Text'),
url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/fonts/Dreja-Text.woff2) format('woff2'),
url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/fonts/Dreja-Text.woff) format('woff'),
url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/fonts/Dreja-Text.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
:root {
--white: #eac9bd;
--black: #000000;
--g1: #161f0e;
--g2: #2e3a26;
--l1: #978b66;
--l2: #fffad6;
--l3: #E0D97F;
--t1: #381b16;
--t2: #843f34;
--t3: #915349;
--swiper-theme-color: var(--l2) !important;
font-size: 16px;
-webkit-font-smoothing: antialiased;
--swiper-navigation-size: 34px;
--swiper-navigation-font-size: 18px;
--persos: 150px;
--plats-images-anims-size: 100px;
--wave-height: 30px;
--wave-height-negative: -30px;
--big-dish: 0 0 0 4px var(--t1), 0 0 0 8px var(--l1), 0 0 0 11px var(--l3), 0 0 0 16px var(--t1), 0px 0px 35px 2px rgba(0, 0, 0, 0.35);
--big-dish-ombre: 0px 0px 34px rgba(0, 0, 0, 0.65);
--small-dish: 0px 0px 34px rgba(0, 0, 0, 0.45);
--margin-small-dish: 1.7vw;
--small-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
}
@media (max-width: 500px) {
:root {
font-size: 14px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
::-moz-selection {
background: var(--g2);
color: var(--l2);
}
::selection {
background: var(--g2);
color: var(--l2);
}
:-webkit-any-link {
color: var(--l2);
}
:-moz-any-link {
color: var(--l2);
}
:any-link {
color: var(--l2);
}
html {
box-sizing: border-box;  }
body {
background-color: var(--t1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
color: var(--l2);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
font-family: 'Dreja';
font-style: normal;
font-weight: 400;
font-size: 1.2rem;
line-height: 1.5;
margin: 0 0 0 0;
padding: 0 0 0 0; }
body.home {
background-color: var(--g2);
}
strong {
color: var(--l3);
font-weight: normal;
}
p {
margin: 0 0 1rem 0;
}
video {
display: block;
}
.kiez {
font-family: 'Kiez';
font-weight: normal;
text-transform: uppercase;
letter-spacing: 7px;
}
.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--g1);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.loader h1 {
display: none;
}
.home .loader h1 {
color: var(--l1);
display: block;
font-size: 2rem;
text-align: center;
}
.loader h2 {
color: var(--l2);
text-align: center;
}
.resto-wrapper {
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.wrapper .wrapper-logo svg {
width: 100%;
height: auto;
fill: var(--l3);
}
.video-1-1 {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
.video-ratio-auto {
width: 100%;
height: auto;
object-fit: cover;
}
.container-generic-video .video-ratio-auto {
aspect-ratio: 16 / 10;
} .color-pink {
color: var(--t3);
}
.color-red {
color: var(--t1);
}
.color-green {
color: var(--t2);
}
.color-l2 {
color: var(--l2);
}
.color-l3 {
color: var(--l3);
}
.hidden {
display: none;
}
.background-color-g1 {
background-color: var(--g1);
}
.background-color-g2 {
background-color: var(--g2);
}
.background-color-t1 {
background-color: var(--t1);
}
.background-color-t2 {
background-color: var(--t2);
}
.background-color-t3 {
background-color: var(--t3);
} .btn-link.btn-link-center {
text-align: center;
}
.btn-link a {
border-radius: 25px;
color: var(--l2);
display: block;
font-size: 1.23rem;
text-align: center;
text-decoration: none;
padding: 0.5rem 1.1rem;
}
.btn-link a:hover {
color: var(--l3);
opacity: 0.9;
} h1 {
font-size: 5rem;
-webkit-text-size-adjust: 100%;
letter-spacing: initial;
}
h1.entry-title {
font-family: 'Kiez';
font-weight: normal;
text-transform: uppercase;
letter-spacing: 7px;
z-index: 1;
font-kerning: none;
text-rendering: optimizeSpeed;
}
h2 {
font-size: 2rem;
letter-spacing: initial;
}
.fs-big {
font-size: clamp(2rem, 1.8846rem + 0.5128vw, 2.5rem);
line-height: 1.3;
}
.fs-really-big {
font-size: clamp(2.1rem, 2.0077rem + 0.4103vw, 2.5rem);
line-height: 1.3;
}
.fs-small {
font-size: 17px;
}
.m-0-p-0 {
margin: 0 0 0 0;
padding: 0 0 0 0;
} img {
display: block;
width: 100%;
height: auto;
}
.shortlist-plats p:last-of-type {
margin-bottom: 0;
}
.grid-dishes ul {
padding-left: 1rem;
list-style: none;
}
.grid-dishes ul li {
flex-shrink: 0;
width: clamp(200px, 20vw, 200px);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0px 0px;
margin: 0 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.hr-wave {
--size: 6px;
--b: 4px;
--m: 0.5;
--p: calc(var(--m)*var(--size));
--R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
-webkit-mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g)) 50% calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
background: linear-gradient(90deg, var(--t2) 5%, transparent 35%, transparent 65%, var(--l2) 95%);
height: 50px;
margin: 2rem 0;
}
.mask-flower {
aspect-ratio: 1 / 1;
--g: /20.56% 20.56% radial-gradient(#000 calc(71% - 1px), #0000 71%) no-repeat;
mask: 100% 50% var(--g), 93.301% 75% var(--g), 75% 93.301% var(--g), 50% 100% var(--g), 25% 93.301% var(--g), 6.699% 75% var(--g), 0% 50% var(--g), 6.699% 25% var(--g), 25% 6.699% var(--g), 50% 0% var(--g), 75% 6.699% var(--g), 93.301% 25% var(--g), radial-gradient(100% 100%, #000 38.366%, #0000 calc(38.366% + 1px));
--g: /27.676% 27.676% radial-gradient(#000 calc(71% - 1px), #0000 71%) no-repeat;
mask: 100% 50% var(--g), 85.355% 85.355% var(--g), 50% 100% var(--g), 14.645% 85.355% var(--g), 0% 50% var(--g), 14.645% 14.645% var(--g), 50% 0% var(--g), 85.355% 14.645% var(--g), radial-gradient(100% 100%, #000 33.409%, #0000 calc(33.409% + 1px));
}
.relative {
position: relative;
}
.grid-dishes ul li:nth-child(odd) {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/assiette-verte.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.grid-dishes ul li:nth-child(even) {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/assiette-rouge.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.italian-dishes li img {
border-radius: 50%;
overflow: hidden;
border: 4vw solid transparent; } #scroll-to-top {
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/up.svg), var(--g1);
background-position: center;
background-repeat: no-repeat;
background-size: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 1rem;
bottom: 32px;
width: 3rem;
height: 3rem;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
display: block;
z-index: 8;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
}
#icon-scroll:before {
position: absolute;
left: 50%;
}
#icon-scroll {
background-color: var(--g2);
width: 30px;
height: 60px;
border-radius: 25px;
position: relative;
margin-top: 200px;
opacity: 0;
}
#icon-scroll:before {
content: '';
width: 8px;
height: 8px;
background: var(--l2);
margin-left: -4px;
bottom: 6px;
border-radius: 4px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scrollto;
animation-name: scrollto;
}
@-webkit-keyframes scrollto {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-40px);
}
}
@keyframes scrollto {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-40px);
}
} header {
background-color: var(--g1);
height: calc(100vh + 8px);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 65%;
}
#btn-reservation {
background-color: var(--t2);
color: var(--l2);
font-size: 1.23rem;
text-align: center;
border-radius: 25px;
text-decoration: none;
padding: 0.5rem 1.1rem;
display: inline-block;
text-decoration: none;
}
header #btn-reservation {
position: absolute;
bottom: 35%;
z-index: 1;
}
#btn-reservation:hover {
color: var(--l3);
opacity: 0.9;
}
.page-template-page-contact #btn-reservation {
background-color: var(--t1);
}
.page-template-page-contact #btn-reservation:hover {
background-color: var(--g2);
}
header.alignwide {
background-color: transparent;
}
.entry-header {
height: 300px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: inherit;
margin-top: 60px;
}
.entry-header .entry-title {
font-size: clamp(1.7rem, 1.0538rem + 2.8718vw, 4.5rem);
white-space: preserve nowrap;
}
.entry-header .entry-excerpt {
margin-top: 1rem;
text-align: center;
z-index: 1;
padding: 0 1rem;
max-width: 1100px;
}
header .header-motif-g {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-g.svg);
background-position: center left;
background-repeat: no-repeat;
background-size: auto 100%;
width: 35vw;
height: 35vw;
aspect-ratio: 1 / 1;
position: absolute;
top: 0;
left: 0;
}
header .header-motif-d {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-d.svg);
background-position: center right;
background-repeat: no-repeat;
background-size: auto 100%;
width: 35vw;
height: 35vw;
aspect-ratio: 1 / 1;
position: absolute;
top: 0;
right: 0;
}
header.alignwide .header-alignwide-motif-g {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-g.svg);
background-repeat: no-repeat;
background-position: center left;
background-size: auto 60%;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-position: left center;
}
header.alignwide .header-alignwide-motif-d {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-d.svg);
background-position: center right;
background-repeat: no-repeat;
background-size: auto 60%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
header .logo-anim,
.generic-logo-anim svg {
max-width: 1024px;
margin: 0 auto;
transform: rotate(-7deg);
padding: 0 2rem;
position: relative;
z-index: 5;
}
.generic-logo-anim svg {
max-width: 800px;
padding: 0 20vw;
fill: var(--l2);
}
header .logo-anim svg {
fill: var(--l2);
}
header .logo-anim svg #copyright,
.generic-logo-anim svg #copyright {
transform: rotate(7deg);
transform-origin: 95% 20%;
}
.container-generic-video-logo {
position: relative;
}
.container-generic-video-logo .wave-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.container-generic-video-logo .container-generic-logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container-generic-video-logo .container-generic-logo .generic-logo-anim {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
} #nav-toggle span {
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/menu.svg), var(--g1);
background-position: center;
background-repeat: no-repeat;
background-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
overflow: hidden;
}
#nav-toggle.active span {
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/close.svg), var(--g1);
background-position: center;
background-repeat: no-repeat;
background-size: 1.25rem;
}
.nav {
position: fixed;
z-index: 10 !important;
width: 100%;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
background-color: transparent;
display: block;
top: 0;
left: 0;
}
#wpadminbar {
position: fixed !important;
}
.logged-in .nav {
top: 46px;
}
.logged-in.gsap-pinned .nav {
top: 0px;
}
.nav .nav-container {
background: var(--g2);
display: flex;
align-items: center;
gap: 2rem;
padding: 1rem 1rem 0.75rem;
width: 100%;
height: 64px;
}
.nav .header-logo {
flex-grow: 1;
}
.nav .header-logo a {
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav .header-logo a svg {
width: 95px;
height: 34px;
fill: var(--l2);
}
.nav .header-logo:hover a svg {
fill: var(--l3);
}
.nav .mini-logo {
display: none;
}
.nav .primary-menu-container {
flex-grow: 1;
}
.nav .primary-menu-container .menu-wrapper {
display: flex;
list-style-type: none;
justify-content: flex-end;
gap: 2rem;
}
.nav .nav-container a,
#mobile-menu a {
color: var(--l2);
font-size: 22px;
font-size: clamp(1.2rem, 1.1538rem + 0.2051vw, 1.4rem);
text-decoration: none;
}
.nav .nav-container a:hover,
.nav .nav-container .current-menu-item a,
#mobile-menu .current-menu-item a {
color: var(--l3);
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--l2);
text-decoration-thickness: 1px;
text-underline-offset: 0.6rem;
}
.nav .nav-container .social,
#mobile-menu .social,
.footer .social {
display: flex;
gap: 0.5rem;
align-items: center;
}
.nav .nav-container .primary-menu-container,
.nav .nav-container .social {
display: none;
}
#mobile-menu {
background-color: var(--t2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
position: fixed;
top: 0;
left: -100vw;
width: 100vw;
height: 100vh;
z-index: 9 !important;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
#mobile-menu.active {
left: 0;
}
#mobile-menu .primary-menu-container-mobile {
width: 100%;
display: flex;
justify-content: center;
}
#mobile-menu .primary-menu-container-mobile .menu-wrapper {
display: flex;
gap: 1rem;
flex-direction: column;
list-style-type: none;
align-items: center;
}
#mobile-menu .primary-menu-container-mobile .menu-wrapper a {
font-size: 2rem;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
#mobile-menu .primary-menu-container-mobile .menu-wrapper a:active {
color: var(--l3);
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--l2);
text-decoration-thickness: 1px;
text-underline-offset: 0.6rem;
}
#mobile-menu .social {
border-top: 5px dotted var(--t3);
display: flex;
justify-content: center;
gap: 1.5rem;
width: 100%;
margin-top: 0.5rem;
padding-top: 2rem;
}
.footer .social {
justify-content: center;
}
.nav .nav-container .social a,
#mobile-menu .social a,
.footer .social a {
background-color: var(--g1);
border-radius: 7px;
padding: 5px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 5px;
}
#mobile-menu .social a {
width: 40px;
height: 40px;
}
.footer .social {
margin-top: 1rem;
}
.footer .social a {
background-color: var(--g1);
}
.nav .nav-container .social svg,
#mobile-menu .social svg,
.footer .social svg {
height: 100%;
width: 100%;
fill: var(--l2);
}
.nav .nav-container .social a:hover svg {
fill: var(--l3);
}
.nav .nav-border {
height: 20px;
background: radial-gradient(circle at top, var(--g2) 20px, transparent 0);
background-size: 40px;
background-repeat: round;
margin-top: -1px;
} .block {
position: relative;
}
.row-wave-top {
position: relative;
}
.row-wave-top:before {
content: "";
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
background: red;
height: var(--wave-height);
width: 100%;
position: absolute;
top: calc(var(--wave-height-negative) + 1px);
left: 0px;
}
.row-wave-top.background-color-t2:before {
background: var(--t2);
}
.row-wave-top.background-color-t3:before {
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 71.19%, 4.00% 64.76%, 6.00% 57.26%, 8.00% 49.07%, 10.00% 40.61%, 12.00% 32.31%, 14.00% 24.59%, 16.00% 17.85%, 18.00% 12.43%, 20.00% 8.60%, 22.00% 6.57%, 24.00% 6.42%, 26.00% 8.18%, 28.00% 11.76%, 30.00% 16.96%, 32.00% 23.52%, 34.00% 31.12%, 36.00% 39.36%, 38.00% 47.83%, 40.00% 56.08%, 42.00% 63.71%, 44.00% 70.32%, 46.00% 75.58%, 48.00% 79.22%, 50.00% 81.04%, 52.00% 80.97%, 54.00% 79.01%, 56.00% 75.24%, 58.00% 69.87%, 60.00% 63.18%, 62.00% 55.49%, 64.00% 47.20%, 66.00% 38.74%, 68.00% 30.53%, 70.00% 23.00%, 72.00% 16.52%, 74.00% 11.43%, 76.00% 7.99%, 78.00% 6.37%, 80.00% 6.65%, 82.00% 8.83%, 84.00% 12.78%, 86.00% 18.31%, 88.00% 25.14%, 90.00% 32.91%, 92.00% 41.24%, 94.00% 49.69%, 96.00% 57.85%, 98.00% 65.28%, 100.00% 71.62%);
background: var(--t3);
}
.block .content {
position: relative;
}
.block .content.content-video {
padding: 0.5rem 0rem 2rem;
}
.block .content h2 {
display: inline-block;
font-size: 1.5rem;
line-height: 2.1;
padding: 65px 0 0;
position: relative;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--l2);
text-decoration-thickness: 2px;
text-underline-offset: 0.6rem;
}
.block .content h2.h2-opening {
font-size: 2rem;
text-align: center;
padding: 3rem 0 0;
}
.block .content .menu-cat-description {
font-size: 1.4rem;
font-weight: bold;
padding: 2rem 0 1rem;
} #block-video .wave-top,
#home-row-3-videos .wave-top {
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
background: var(--t2);
height: var(--wave-height);
margin-bottom: -1px;
}
#block-video .div-block,
#home-row-3-videos .div-block {
background: var(--t2);
}
#home-row-3-videos .div-block {
background: var(--t2);
padding: 0rem 1rem 3rem;
}
#block-video .video-intro,
#home-row-3-videos .text-intro,
#carte-carne .opening-date {
font-size: clamp(1.23rem, 0.8215rem + 1.8154vw, 3rem);
line-height: 2.1;
text-align: center;
padding: 4rem 0rem 0rem;
color: var(--l1);
}
#carte-carne .opening-date {
padding: 2rem 0rem 4rem;
}
#la-carte .block .div-block {
padding: 5rem 1rem 6rem;
}
#carte-carne .div-block,
#carte-pesce-insalata .div-block,
#carte-pizze .div-block {
background: var(--t3);
}
#carte-street-food .div-block,
#carte-pasta .div-block,
#carte-dolci .div-block {
background: var(--t2);
} .block-anim-left {
position: absolute;
top: 0;
left: 0;
height: var(--plats-images-anims-size);
width: var(--plats-images-anims-size);
aspect-ratio: 1 / 1;
z-index: 2;
}
.block-anim-left.bg-assiette-verte {
background-color: var(--white);
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/assiette-verte.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: var(--margin-small-dish); opacity: 0;
}
.block-anim-right {
position: absolute;
bottom: 0;
right: 0;
height: var(--plats-images-anims-size);
width: var(--plats-images-anims-size);
aspect-ratio: 1 / 1;
z-index: 2;
}
.block-anim-right.bg-assiette-rouge {
background-color: var(--white);
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/assiette-rouge.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: var(--margin-small-dish); opacity: 0;
} .wave-video,
.menu-end {
clip-path: polygon(100% 0%, 0% 0%, 0.00% 84.29%, 2.00% 83.55%, 4.00% 81.38%, 6.00% 77.84%, 8.00% 73.06%, 10.00% 67.21%, 12.00% 60.50%, 14.00% 53.16%, 16.00% 45.46%, 18.00% 37.66%, 20.00% 30.06%, 22.00% 22.90%, 24.00% 16.45%, 26.00% 10.94%, 28.00% 6.55%, 30.00% 3.46%, 32.00% 1.76%, 34.00% 1.51%, 36.00% 2.73%, 38.00% 5.37%, 40.00% 9.34%, 42.00% 14.50%, 44.00% 20.66%, 46.00% 27.61%, 48.00% 35.09%, 50.00% 42.86%, 52.00% 50.62%, 54.00% 58.11%, 56.00% 65.06%, 58.00% 71.22%, 60.00% 76.37%, 62.00% 80.34%, 64.00% 82.98%, 66.00% 84.20%, 68.00% 83.96%, 70.00% 82.26%, 72.00% 79.16%, 74.00% 74.78%, 76.00% 69.26%, 78.00% 62.82%, 80.00% 55.66%, 82.00% 48.05%, 84.00% 40.26%, 86.00% 32.55%, 88.00% 25.22%, 90.00% 18.51%, 92.00% 12.66%, 94.00% 7.88%, 96.00% 4.34%, 98.00% 2.16%, 100.00% 1.43%);
height: var(--wave-height);
margin-top: -1px;
}
.half-circle-bottom-border-green {
height: 20px;
background: radial-gradient(circle at top, var(--t2) 20px, transparent 0);
background-size: 40px;
background-repeat: round;
}
.half-circle-bottom-border-pink {
height: 50px;
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/half-circle-pink.svg);
background-repeat: repeat;
background-position: center;
background-size: auto 50px;
} .block-anim-left img,
.block-anim-right img {
width: auto;
height: 100%;
display: block;
border-radius: 50%;
}
.block-anim-left video,
.block-anim-right video {
border-radius: 50%;
}
.block-anim-left.block-anim-left-overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% - var(--margin-small-dish) - var(--margin-small-dish));
height: calc(100% - var(--margin-small-dish) - var(--margin-small-dish));
margin: var(--margin-small-dish);
border-radius: 50%;
overflow: hidden;
background: var(--g2);
mix-blend-mode: color;
opacity: 0.5;
}
.block-anim-right.block-anim-right-overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% - var(--margin-small-dish) - var(--margin-small-dish));
height: calc(100% - var(--margin-small-dish) - var(--margin-small-dish));
margin: var(--margin-small-dish);
border-radius: 50%;
overflow: hidden;
background: var(--t3);
mix-blend-mode: color;
opacity: 0.5;
}
.liste-plats {
padding: 1rem 0 6rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
font-size: 1.1rem;
}
.liste-plats .row {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
line-height: 1.3;
}
.liste-plats .row h4 {
margin-bottom: 0.5rem;
font-weight: normal;
font-style: italic;
font-size: 1.4rem;
}
.liste-plats .row>div:nth-child(2) span {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--g1);
border-radius: 50%;
aspect-ratio: 1 / 1;
padding: 0.5rem;
line-height: 1;
}
.full-height-round-overlay {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.full-height-round-overlay .overlay {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
--clip: 10%;
}
.full-height-round-overlay .overlay.active {
background-color: var(--g2);
}
.full-height-round-overlay .overlay .overlay-pizza {
border-radius: 50%;
padding: 2vw;
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/assiette-rouge.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.full-height-round-overlay .overlay .overlay-pizza img {
width: 25vw;
height: auto;
}
.full-height-round-overlay .overlay .overlay-words {
opacity: 0.1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--white);
white-space: nowrap;
font-family: 'Monteilga', sans-serif;
font-size: clamp(1.5rem, 0.6923rem + 3.5897vw, 5rem);
line-height: 1.5;
will-change: transform;
}
.full-height-round-overlay .overlay .overlay-words-mask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--g2) 85%);
}
.overlay-words-mask-test {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--g1) 85%);
}
.full-height-round-overlay .block-anim-left {
position: absolute;
top: 0%;
left: 0;
}
.full-height-round-overlay .block-anim-right {
position: absolute;
top: 0%;
right: 0;
}
.full-height-round-overlay img {
width: auto;
height: 50px;
border-radius: initial;
overflow: initial;
}
#block-pape-sophia {
background: var(--g2);
position: relative;
height: 500px;
}
#block-pape-sophia .block-container {
padding: 5rem 2rem;
}
#block-pape-sophia .wave-top {
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
height: calc(var(--wave-height) + 11px);
margin-bottom: -1px;
}
#block-pape-sophia .block-container {
background-color: var(--t1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#block-pape-sophia .block-container .block-content {
max-width: 1000px;
margin: 0 auto 0;
}
#block-pape-sophia .block-anim-left {
width: 150px;
height: 150px;
position: absolute;
top: 0px;
border-radius: 50%;
overflow: hidden;
}
#block-pape-sophia .block-anim-right {
height: 150px;
width: 150px;
position: absolute;
bottom: 0px;
right: -150px;
}
#block-pape-sophia .block-anim-right .shape {
background-color: #843f34;
aspect-ratio: 1 / 1;
clip-path: shape(from 11.31% 33.98%, line to 11.31% 33.98%, line to 11.31% 33.98%, curve to 33.98% 11.31% with 4.44% 19.53%/19.53% 4.44%, line by 0% 0%, line by 0% 0%, curve by 32.04% 0% with 5.36% -15.08%/26.68% -15.08%, line by 0% 0%, line by 0% 0%, curve by 22.66% 22.66% with 14.45% -6.87%/29.54% 8.21%, line by 0% 0%, line by 0% 0%, curve by 0% 32.04% with 15.08% 5.36%/15.08% 26.68%, line by 0% 0%, line by 0% 0%, curve by -22.66% 22.66% with 6.87% 14.45%/-8.21% 29.54%, line by 0% 0%, line by 0% 0%, curve by -32.04% 0% with -5.36% 15.08%/-26.68% 15.08%, line by 0% 0%, line by 0% 0%, curve to 11.31% 66.02% with 19.53% 95.56%/4.44% 80.47%, line by 0% 0%, line by 0% 0%, curve to 11.31% 33.98% with -3.77% 60.66%/-3.77% 39.34%, close);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: brightness(0.9);
}
#block-pape-sophia .block-anim-right .background {
background-color: #843f34;
aspect-ratio: 1 / 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}
#block-pape-sophia .horizontal-small-text .text {
font-size: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);
white-space: initial;
text-align: center;
}
.container-btn-reservation {
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
}
#block-pape-sophia #btn-reservation {
position: relative;
display: inline-block;
}
.block-intro-grid {
max-width: 1000px;
margin: 2rem auto 0;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 1rem;
}
.block-intro-grid .col-left {
position: relative;
width: 100%;
}
.block-intro-grid .col-left:before {
content: "";
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/blockquote-top.svg);
background-position: center left;
background-repeat: no-repeat;
background-size: auto 100%;
width: 28px;
height: 20px;
display: block;
opacity: 0.5;
position: absolute;
}
.block-intro-grid .col-left .cadre {
font-size: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);
line-height: 1.5;
white-space: nowrap;
background: var(--t2);
padding: 2rem;
text-align: center;
--r: 1rem;
--s: 20px;
--x: 10px;
--y: 5px;
border-radius: var(--r);
--_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
--_d: (var(--s) + var(--r));
mask: calc(var(--_d) + var(--x)) 0 var(--_m), 0 calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
mask-repeat: no-repeat;
}
.block-intro-grid .col-left .assiette-vin {
border-radius: 50%;
overflow: hidden;
margin-bottom: 2rem;
}
.block-intro-grid .col-left .assiette-vin {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
.block-intro-grid .col-left .cadre p {
margin-bottom: 1rem;
}
.block-intro-grid .col-left .cadre em {
font-style: normal;
}
.block-intro-grid .col-right {
font-size: 1.23rem;
width: 100%;
}
.highlight-text p {
color: var(--l2);
}
#block-video {
margin-top: 8rem;
}
#home-row-3-videos {
margin-top: 8rem;
}
.home-row-3-videos {
display: flex;
flex-direction: column;
gap: 3.5rem;
padding: 3rem 1rem 1rem;
}
.home-row-3-videos div {
width: 100%;
height: 100%;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.home-row-3-videos div video,
.home-row-3-videos div img {
width: 100%;
height: 100%;
border-radius: 50%;
aspect-ratio: 1 / 1;
}
#il-y-a {
height: 200px;
margin-top: 6rem;
margin-bottom: 4rem;
position: relative;
}
#il-y-a .block-anim-left {
position: absolute;
width: 87px;
height: 300px;
display: flex;
justify-content: center;
}
#il-y-a .block-anim-left img,
#il-y-a .block-anim-right img {
width: auto;
height: 100%;
}
#il-y-a .block-anim-right {
position: absolute;
width: 100px;
height: 100px;
right: 0;
filter: brightness(0.9);
}
#il-y-a .block-anim-right img {
display: none;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
#et-celles .horizontal-big-text {
padding-top: 2rem;
}
#bienvenue-famiglia {
height: 60vh;
margin: 6rem 0 4rem 0;
padding-top: 15vh;
position: relative;
}
#bienvenue-famiglia .block-anim-left {
width: 150px;
height: 150px;
aspect-ratio: 1 / 1;
position: absolute;
top: 0;
border-radius: 50%;
filter: brightness(0.9);
}
#bienvenue-famiglia .block-anim-left img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
#bienvenue-famiglia .block-anim-right {
width: 150px;
height: 150px;
aspect-ratio: 1 / 1;
position: absolute;
bottom: 0;
right: 0;
border-radius: 50%;
filter: brightness(0.9);
}
#bienvenue-famiglia .block-anim-right img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
} .footer {
margin-top: -20px;
width: 100%;
z-index: 1;
position: relative;
}
.footer .frise-top-footer {
height: 20px;
background: radial-gradient(circle at bottom, var(--t2) 20px, transparent 0);
background-size: 40px;
background-repeat: round;
margin-bottom: -1px;
}
.footer .content {
background: linear-gradient(to bottom, rgba(132, 63, 52, 1) 0%, rgba(56, 27, 22, 1) 100%);
padding: 3rem 1rem;
text-align: center;
}
.footer a {
text-decoration: none;
}
.footer a:hover {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--l2);
text-decoration-thickness: 1px;
text-underline-offset: 0.3rem;
}
.footer .footer-navigation-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: center;
list-style-type: none;
margin: 1rem 0 0 0;
padding: 0 0 0 0;
} canvas {
position: fixed;
top: 0;
opacity: 0.085;
z-index: 9999;
pointer-events: none;
user-select: none;
filter: grayscale(1);
}
.noise-canvas {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
opacity: 1;
z-index: 9999;
pointer-events: none;
user-select: none;
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/img/noise.png);
background-size: 150px;
filter: invert(1);
}
.grid-dishes {
position: relative;
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/img/italian-dinner.png), var(--t2);
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
background-blend-mode: soft-light;
}
.grid-dishes .bottom-bubbles {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 86px;
height: var(--wave-height);
margin-bottom: -1px;
}
.grid-dishes .bottom-bubbles .wave-bottom-white {
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
background-color: var(--g2);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
height: 100%;
}
.grid-dishes:not(.last) {
padding-top: 1rem;
padding-bottom: 5rem;
}
.horizontal-big-text .text {
font-size: clamp(2.7rem, 1.7077rem + 4.4103vw, 7rem);
font-size: clamp(2.5rem, 1.5769rem + 4.1026vw, 6.5rem);
justify-content: center;
white-space: nowrap;
}
.horizontal-small-text .text {
font-size: clamp(1rem, 0.5385rem + 2.0513vw, 3rem);
line-height: 2.1;
justify-content: center;
white-space: nowrap;
} .header-bubbles {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--wave-height);
}
.header-bubbles svg {
width: 100%;
height: 100%;
}
.header-bubbles .wave-bottom-white {
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
background-color: var(--g2);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
height: 100%;
}
.header-elements {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.header-persos {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--persos);
}
.header-persos .perso-left .svg-circle {
background-position: center center;
background-repeat: repeat;
background-size: 10px 10px;
border-radius: 50%;
width: var(--persos);
height: var(--persos);
transform: rotate(-45deg);
background-image: linear-gradient(90deg, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
background-image: linear-gradient(90deg, var(--t1) 50%, var(--t2) 51%);
}
.header-persos .perso-right .svg-circle {
background-position: center center;
background-repeat: repeat;
background-size: 30px 30px;
border-radius: 50%;
width: var(--persos);
height: var(--persos);
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/chess-maroon.svg);
background-color: var(--t1);
background-position: center center;
background-repeat: repeat;
background-size: 10px 10px;
}
.container_perso {
font-size: 100px;
}
.perso-left,
.perso-right {
position: relative;
}
.perso-left .container_perso {
position: absolute;
left: -150px;
height: var(--persos);
}
.perso-left .container_perso img {
width: auto;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.perso-right .container_perso {
position: absolute;
right: -150px;
height: var(--persos);
}
.perso-right .container_perso img {
width: auto;
height: 100%;
position: absolute;
top: 0;
right: 0;
} .vjs-theme-city {
border-radius: 15px;
overflow: hidden;
--vjs-theme-city--primary: #bf3b4d;
--vjs-theme-city--secondary: #fff;
}
.vjs-theme-city .vjs-control-bar {
height: 70px;
padding-top: 20px;
background: none;
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.vjs-theme-city .vjs-button>.vjs-icon-placeholder::before {
line-height: 50px;
}
.vjs-theme-city .vjs-play-progress::before {
display: none;
}
.vjs-theme-city .vjs-progress-control {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 20px;
}
.vjs-theme-city .vjs-progress-control .vjs-progress-holder {
position: absolute;
top: 20px;
right: 0;
left: 0;
width: 100%;
margin: 0;
}
.vjs-theme-city .vjs-play-progress {
background-color: var(--vjs-theme-city--primary);
}
.vjs-theme-city .vjs-remaining-time {
order: 1;
line-height: 50px;
flex: 3;
text-align: left;
}
.vjs-theme-city .vjs-play-control {
order: 2;
flex: 8;
font-size: 1.75em;
}
.vjs-theme-city .vjs-volume-panel,
.vjs-theme-city .vjs-picture-in-picture-control,
.vjs-theme-city .vjs-fullscreen-control {
order: 3;
flex: 1;
}
.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
height: 100%;
}
.vjs-theme-city .vjs-mute-control {
display: none;
}
.vjs-theme-city .vjs-volume-panel {
margin-left: 0.5em;
margin-right: 0.5em;
padding-top: 1.5em;
}
.vjs-theme-city .vjs-volume-panel,
.vjs-theme-city .vjs-volume-panel:hover,
.vjs-theme-city .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-city .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal {
width: 3em;
}
.vjs-theme-city .vjs-volume-level::before {
font-size: 1em;
}
.vjs-theme-city .vjs-volume-panel .vjs-volume-control {
opacity: 1;
width: 100%;
height: 100%;
}
.vjs-theme-city .vjs-volume-bar {
background-color: transparent;
margin: 0;
}
.vjs-theme-city .vjs-slider-horizontal .vjs-volume-level {
height: 100%;
}
.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal {
margin-top: 0;
margin-bottom: 0;
height: 100%;
}
.vjs-theme-city .vjs-volume-bar::before {
content: '';
z-index: 0;
width: 0;
height: 0;
position: absolute;
top: 0px;
left: 0;
border-style: solid;
border-width: 0 0 1.75em 3em;
border-color: transparent transparent rgba(255, 255, 255, 0.25) transparent;
}
.vjs-theme-city .vjs-volume-level {
overflow: hidden;
background-color: transparent;
}
.vjs-theme-city .vjs-volume-level::before {
content: '';
z-index: 1;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-width: 0 0 1.75em 3em;
border-color: transparent transparent var(--vjs-theme-city--secondary) transparent;
}
.video-js .vjs-big-play-button {
font-size: 3em;
line-height: 3em;
height: 3em;
width: 3em;
display: block;
position: absolute;
top: 50%;
left: 50%;
padding: 0;
margin-top: -1.5em;
margin-left: -1.5em;
cursor: pointer;
opacity: 1;
background-color: var(--t2);
border: none;
border-radius: 50%;
transition: all 0.4s;
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
border-color: #fff;
background-color: var(--l2);
color: var(--g2);
transition: all 0s;
}
.vjs-theme-city .vjs-play-progress {
background-color: var(--l2);
}
.vjs-playing.vjs-has-started .vjs-big-play-button {
display: none;
} #la-carte {
display: block;
margin: 0px auto 0px;
}
#la-carte .logo-street-food {
width: 220px;
height: auto;
margin: 0 auto 3rem;
}
.block .div-block {
padding: 3rem 1rem 3rem;
}
.top-intro {
padding: 1rem 0;
margin-bottom: 3rem;
text-align: center;
}
#la-carte h2 {
color: var(--l3);
display: block;
font-size: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);
line-height: 2.1;
padding: 0 0;
position: relative;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--l2);
text-decoration-thickness: 2px;
text-underline-offset: 0.6rem;
font-family: 'Kiez';
font-weight: normal;
text-transform: uppercase;
letter-spacing: 7px;
margin-bottom: 2rem;
text-align: center;
font-kerning: none;
text-rendering: optimizeSpeed;
}
#la-carte h3 {
letter-spacing: initial;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 2.5rem;
}
#la-carte .la-carte .ligne {
clear: both;
margin-bottom: 3rem;
}
#la-carte .la-carte .ligne:last-of-type {
margin-bottom: 0rem;
}
#la-carte .la-carte .ligne .ligne {
margin-bottom: 0.5rem;
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 0.8rem;
}
#la-carte .la-carte .ligne.var .content,
#la-carte .la-carte .ligne.supplement .content {
padding-top: 8px;
}
#la-carte .la-carte .ligne .ligne:last-of-type {
margin-bottom: 0rem;
}
#la-carte .la-carte.glaces {
margin-top: 3rem;
}
#la-carte .la-carte.glaces .ligne {
margin-bottom: 0rem;
}
#la-carte .la-carte .titre {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 0.8rem;
margin-bottom: 0.5rem;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#la-carte .la-carte .titre h4 {
margin: 0 0;
display: inline-block;
font-weight: bold;
font-size: 1.6rem;
letter-spacing: 0.3px;
padding-top: 4px;
}
#la-carte .la-carte .ligne .prix {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
text-align: center;
}
#la-carte .la-carte .ligne .prix span {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--g1);
color: var(--l2);
border-radius: 50%;
aspect-ratio: 1 / 1;
padding: 0.25rem;
line-height: 1;
min-width: 45px;
font-size: 14px;
letter-spacing: 1px;
}
#la-carte .la-carte.glaces .ligne .titre .titre-glace {
letter-spacing: 0.3px;
padding-top: 9px;
}
#la-carte .la-carte.glaces .ligne .titre .prix {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--g1);
color: var(--l2);
border-radius: 50%;
aspect-ratio: 1 / 1;
padding: 0.25rem;
line-height: 1;
min-width: 45px;
font-size: 14px;
letter-spacing: 1px;
}
#la-carte .la-carte .ligne .content {
float: left;
width: 80%;
}
#OSM-map {
width: 100%;
height: 40vh;
letter-spacing: initial;
z-index: 1;
}
.leaflet-tile-pane {
filter: grayscale(0.5) sepia(15%);
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: var(--g2) !important;
color: var(--l2) !important;
} blockquote {
position: relative;
}
blockquote::before {
content: "";
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/blockquote-top.svg);
background-position: center left;
background-repeat: no-repeat;
background-size: auto 100%;
width: 28px;
height: 20px;
display: block;
opacity: 0.50;
position: absolute;
}
.div-section {
width: 100%;
height: 100vh;
}
.horizontal-wrapper {
width: 100%;   position: relative;
padding: 4rem 0 5rem;
}
.horizontal-wrapper.horizontal-wrapper-video {
height: auto;
}
.horizontal-wrapper-wave-top {
height: var(--wave-height);
width: 100%;
position: absolute;
left: 0px;
clip-path: polygon(100% 0%, 0% 0%, 0.00% 84.29%, 2.00% 83.55%, 4.00% 81.38%, 6.00% 77.84%, 8.00% 73.06%, 10.00% 67.21%, 12.00% 60.50%, 14.00% 53.16%, 16.00% 45.46%, 18.00% 37.66%, 20.00% 30.06%, 22.00% 22.90%, 24.00% 16.45%, 26.00% 10.94%, 28.00% 6.55%, 30.00% 3.46%, 32.00% 1.76%, 34.00% 1.51%, 36.00% 2.73%, 38.00% 5.37%, 40.00% 9.34%, 42.00% 14.50%, 44.00% 20.66%, 46.00% 27.61%, 48.00% 35.09%, 50.00% 42.86%, 52.00% 50.62%, 54.00% 58.11%, 56.00% 65.06%, 58.00% 71.22%, 60.00% 76.37%, 62.00% 80.34%, 64.00% 82.98%, 66.00% 84.20%, 68.00% 83.96%, 70.00% 82.26%, 72.00% 79.16%, 74.00% 74.78%, 76.00% 69.26%, 78.00% 62.82%, 80.00% 55.66%, 82.00% 48.05%, 84.00% 40.26%, 86.00% 32.55%, 88.00% 25.22%, 90.00% 18.51%, 92.00% 12.66%, 94.00% 7.88%, 96.00% 4.34%, 98.00% 2.16%, 100.00% 1.43%);
top: 0;
}
.horizontal-wrapper-wave-bottom {
height: var(--wave-height);
width: 100%;
position: absolute;
left: 0px;
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
bottom: -1px;
}
.horizontal-container {
display: flex;
flex-direction: column;
gap: 3rem;
}
.panel {
width: 100%;
height: 100%;
flex: 1 0 100%;
display: flex;
align-items: center;
}
.panel blockquote {
margin-top: 80px;
font-size: clamp(1.23rem, 1.1215rem + 0.4821vw, 1.7rem);
padding: 3rem 1rem 0;
margin: 0 auto;
position: relative;
width: 100%;
}
.panel blockquote.blockquote-map {
padding: 0 0rem;
}
.has-videos .panel blockquote {
padding: 3rem 1rem 0;
}
.panel blockquote .blockquote-content {
padding: 4rem 1rem 1rem;
--r: 1rem;
--s: 20px;
--x: 10px;
--y: 5px;
border-radius: var(--r);
--_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
--_d: (var(--s) + var(--r));
mask:
calc(var(--_d) + var(--x)) 0 var(--_m),
0 calc(var(--_d) + var(--y)) var(--_m),
radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
var(--_g) calc(var(--_d) + var(--x)) 0,
var(--_g) 0 calc(var(--_d) + var(--y));
mask-repeat: no-repeat;
}
.panel blockquote .blockquote-content.blockquote-content-expressions {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 3rem 1rem 1rem;
}
.panel blockquote .blockquote-content.blockquote-content-expressions video,
.panel blockquote .blockquote-content.blockquote-content-expressions img {
aspect-ratio: 1 / 1;
border-radius: 50%;
width: 260px;
height: 260px;
display: block;
margin: 0 auto;
}
.panel blockquote .blockquote-content.blockquote-content-expressions div.mask-red:nth-child(1):after,
.panel blockquote .blockquote-content.blockquote-content-expressions div.mask-green:nth-child(1):after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
width: 260px;
height: 260px;
border-radius: 50%;
overflow: hidden;
mix-blend-mode: color;
opacity: 0.5;
aspect-ratio: 1 / 1;
}
.panel blockquote .blockquote-content.blockquote-content-expressions div.mask-red:nth-child(1):after {
background: var(--t3);
}
.panel blockquote .blockquote-content.blockquote-content-expressions div.mask-green:nth-child(1):after {
background: var(--g2);
}
.panel blockquote .blockquote-content.blockquote-content-expressions div:nth-child(2) {
text-align: center;
}
.panel blockquote .blockquote-content.blockquote-content-video-landscape {
padding: 0rem 0rem;
}
.bloc-numphone {
margin: 2rem 0;
}
.bloc-numphone a {
color: var(--l3);
font-size: 2.5rem;
}
.panel blockquote .blockquote-content.blockquote-content-map {
background-color: var(--g2);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
margin-bottom: 5rem;
padding: calc(42px + 1rem) 1rem 1rem;
}
.panel.panel-video {
justify-content: center;
overflow: hidden;
}
.panel.panel-video video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
}
.panel.panel-video .panel-round-video {
height: 90vw;
width: 90vw;
position: initial;
object-fit: inherit;
border-radius: 50%;
overflow: hidden;
background-color: var(--white);
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/assiette-rouge.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.panel.panel-video .panel-round-video video {
height: 75vw;
width: 75vw;
position: initial;
object-fit: inherit;
border-radius: 50%;
overflow: hidden; }
.panel.panel-video .panel-round-video img {
height: 75vw;
width: 75vw;
position: initial;
object-fit: inherit;
border-radius: 50%;
overflow: hidden; }
.panel .panel-landscape-video {
margin: 0 auto;
display: block;
}
.panel .panel-landscape-video video,
.panel .panel-landscape-video img {
border-radius: 1rem;
overflow: hidden;
height: auto;
width: 100%;
}
.panel .panel-landscape-video .video-caption {
margin: 1rem 0 0.5rem;
text-align: center;
color: var(--l3);
}
.panel .panel-landscape-video .video-caption-small {
text-align: center;
}
.bg-gradient-g2-g1 {
background: linear-gradient(to bottom, var(--g2) 0%, var(--g1) 70%);
}
.bg-gradient-g1-g2 {
background: linear-gradient(to bottom, var(--g1) 0%, var(--g2) 70%);
}
.bg-gradient-t2 {
background: linear-gradient(to bottom, rgba(132, 63, 52, 1) 0%, rgba(56, 27, 22, 1) 100%);
}
.bg-gradient-t2-wave {
height: var(--wave-height);
width: 100%;
position: absolute;
left: 0px;
clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
bottom: -1px;
}
.pannels-pinned .overlay-words {
opacity: 0.1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--white);
white-space: nowrap;
font-family: 'Monteilga', sans-serif;
font-size: clamp(2.5rem, 1.9231rem + 2.5641vw, 5rem);
font-size: clamp(2.5rem, 1.4615rem + 4.6154vw, 7rem);
line-height: 1.5;
will-change: transform;
} .swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
display: flex;
justify-content: center;
align-items: center; }
.swiper-slide img {
border-radius: 1rem;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
background-color: var(--t2);
border-radius: 50%;
width: var(--swiper-navigation-size);
height: var(--swiper-navigation-size);
}
.swiper-button-next:hover,
.swiper-rtl .swiper-button-prev:hover,
.swiper-button-prev:hover,
.swiper-rtl .swiper-button-next:hover {
background-color: var(--t3);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: var(--swiper-navigation-font-size);
}
.container-SwiperPhotos-Landscape,
.container-SwiperPhotos-Portrait {
padding: 5rem 0rem 2.5rem;
}
.container-SwiperPhotos-Landscape,
.container-SwiperPhotos-Portrait {
padding: 2.5rem 0rem 5rem;
}
.SwiperPhotos.landscape,
.SwiperPhotos.portrait {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
:root {
--plats-images-anims-size: 20vw;
--wave-height: 70px;
--wave-height-negative: -70px;
--persos: 400px;
--margin-small-dish: 1.6vw;
--swiper-navigation-size: 44px;
--swiper-navigation-font-size: 22px;
}
body {
font-size: 1.3rem;
}
#OSM-map {
height: 70vh;
}
header {
padding-top: 22vh;
height: calc(100vh + 100px);
}
header #btn-reservation {
bottom: 25%;
}
.header-elements {
position: absolute;
left: 0;
bottom: 20vh;
width: 100%;
height: 100%;
}
.loader h1 {
font-size: 4rem;
}
header .logo-anim,
.generic-logo-anim svg {
padding: 0 0;
}
.btn-link a {
display: inline-block;
}
.hr-wave {
--size: 30px;
--b: 10px;
height: 150px;
margin: 2rem 0;
}
.logged-in .nav {
top: 32px;
}
.logged-in.gsap-pinned .nav {
top: 0px;
}
.nav .nav-container .primary-menu-container {
display: block;
}
.nav .nav-container {
height: 80px;
padding: 1rem 2rem 0.75rem;
}
.nav .header-logo {
flex-grow: initial;
}
.nav .header-logo a svg {
width: 162px;
height: 58px;
}
.nav .nav-container .social {
display: flex;
}
.home .nav {
opacity: 0;
}
#nav-toggle {
display: none;
}
.entry-header {
height: 400px;
margin-top: 80px;
}
#icon-scroll {
display: none;
}
.grid-dishes ul li {
width: clamp(500px, 20vw, 300px);
padding: 0px 40px;
margin: 0 2rem;
}
#bienvenue-famiglia .block-anim-left {
width: 430px;
height: 430px;
}
#bienvenue-famiglia .block-anim-right {
width: 480px;
height: 480px;
}
.wrapper .wrapper-logo svg {
width: 700px;
height: 254px;
}
.perso-left .container_perso {
left: -400px;
}
.perso-right .container_perso {
right: -400px;
}
#il-y-a {
height: 400px;
}
#il-y-a .block-anim-left {
width: auto;
height: 700px;
}
#il-y-a .block-anim-right {
width: 300px;
height: 300px;
}
.block-intro-grid {
max-width: 1000px;
margin: 0 auto 0;
align-items: center;
gap: 3rem;
padding: 0 0 0 0;
display: flex;
flex-direction: row;
}
.block .content .menu-cat-description {
padding: 2rem 0;
}
.max-width-content {
padding: 0 var(--plats-images-anims-size);
}
.block .content.content-video {
margin: 0 5vw;
padding: 4rem 13vw;
}
.block .content h2 {
font-size: 4rem;
text-align: left;
padding: 0 0 0;
}
.block .content h2.h2-opening {
font-size: 3rem;
padding: 3rem 0 0;
}
.grid-dishes {
background: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/img/italian-dinner.png), var(--t2);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: soft-light;
}
.grid-dishes:not(.last) {
padding-top: 5rem;
padding-bottom: 10rem;
}
header.alignwide .header-alignwide-motif-g {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-g.svg);
background-repeat: no-repeat;
background-position: center left;
background-size: auto 90%;
}
header.alignwide .header-alignwide-motif-d {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-d.svg);
background-position: center right;
background-repeat: no-repeat;
background-size: auto 90%;
}
.liste-plats {
padding: 1rem 0 4rem;
gap: 2.5rem;
font-size: 1.1rem;
}
.liste-plats .row {
gap: 2rem;
line-height: 1.5;
}
.full-height-round-overlay .block-anim-left {
top: 25vh;
}
.full-height-round-overlay .block-anim-right {
top: 25%;
}
.full-height-round-overlay img {
height: 200px;
}
.full-height-round-overlay .overlay .overlay-pizza {
padding: 2rem;
}
.block-intro-grid .col-left {
width: 45%;
}
.block-intro-grid .col-right {
width: 55%;
}
#block-pape-sophia .block-anim-left {
width: 450px;
height: 450px;
}
#block-pape-sophia .block-anim-right {
width: 450px;
height: 450px;
right: -450px;
}
.italian-dishes li img {
border: 2.5vw solid transparent;
}
.footer .social {
display: none;
}
#la-carte .logo-street-food {
width: 400px;
}
.block .div-block {
padding-top: 4rem;
padding-bottom: calc(var(--wave-height) + 2rem);
}
#la-carte .block .div-block {
padding-top: 3rem;
padding-bottom: 9rem;
padding-left: var(--plats-images-anims-size);
padding-right: var(--plats-images-anims-size);
}
.horizontal-wrapper.bg-flowers {
background-image: url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-g.svg), url(//famiglia-restaurant.com/wp-content/themes/famiglia/assets/svg/motif-d.svg);
background-position: center left, center right;
background-repeat: no-repeat, no-repeat;
background-size: auto 50%, auto 50%;
}
.horizontal-wrapper {
width: 100%;
height: 100vh;
overflow: hidden;
padding: 0 0 0 0;
}
.panel blockquote {
font-size: clamp(1.6rem, 1.5077rem + 0.4103vw, 2rem);
padding: 100px 14vw;
width: auto;
}
.panel blockquote.blockquote-map {
max-width: 1080px;
}
.has-videos .panel blockquote {
padding: 125px 17vw 25px;
}
.panel blockquote .blockquote-content {
padding: 4rem 5rem;
}
.panel blockquote .blockquote-content.blockquote-content-expressions {
flex-direction: row;
gap: 2rem;
padding: 5rem 4rem 5rem 2rem;
padding: 6rem 2rem 2rem;
}
.panel blockquote .blockquote-content.blockquote-content-expressions video,
.panel blockquote .blockquote-content.blockquote-content-expressions img {
width: 150px;
height: 150px;
}
.panel blockquote .blockquote-content.blockquote-content-expressions div:nth-child(1):after {
width: 150px;
height: 150px;
}
.panel blockquote .blockquote-content.blockquote-content-expressions div.mask-red:nth-child(1):after,
.panel blockquote .blockquote-content.blockquote-content-expressions div.mask-green:nth-child(1):after {
width: 150px;
height: 150px;
}
.panel blockquote .blockquote-content.blockquote-content-expressions div:nth-child(2) {
text-align: left;
}
.panel blockquote .blockquote-content.blockquote-content-map {
padding: 5rem 5rem;
}
.panel.panel-video .panel-round-video {
height: 65vh;
width: 65vh;
}
.panel.panel-video .panel-round-video video {
height: 52vh;
width: 52vh;
}
.panel.panel-video .panel-round-video img {
height: 52vh;
width: 52vh;
}
.horizontal-wrapper.horizontal-wrapper-video {
height: 100vh;
aspect-ratio: 16 / 12;
}
.SwiperPhotos {
max-width: 1080px;
}
.panel .panel-landscape-video video,
.panel .panel-landscape-video img {
height: 400px;
width: auto;
}
.block .div-block {
padding: 4rem 1rem 3rem;
}
.home-row-3-videos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3.5rem;
padding: 3.5rem;
}
.top-intro {
padding: 0 0 1rem;
margin-top: 3rem;
text-align: center;
}
.footer .footer-navigation-wrapper {
flex-direction: row;
gap: 0rem;
}
.footer .footer-navigation-wrapper li:not(:last-child):after {
content: "•";
display: inline-block;
line-height: initial;
text-align: center;
vertical-align: baseline;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.horizontal-container {
height: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 0rem;
}
.panel .panel-landscape-video .video-caption {
margin: 2rem 0 1rem;
}
blockquote::before,
.block-intro-grid .col-left:before {
width: 8vh;
height: 4vh;
}
.panel blockquote .blockquote-content {
padding: 5rem 1rem 1rem;
--r: 20px;
--s: 30px;
--x: 20px;
--y: 10px;
border-radius: var(--r);
--_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
--_d: (var(--s) + var(--r));
mask:
calc(var(--_d) + var(--x)) 0 var(--_m),
0 calc(var(--_d) + var(--y)) var(--_m),
radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
var(--_g) calc(var(--_d) + var(--x)) 0,
var(--_g) 0 calc(var(--_d) + var(--y));
mask-repeat: no-repeat;
}
.panel blockquote .blockquote-content {
padding: 6rem 4rem 3rem;
}
.block-intro-grid .col-left .cadre {
white-space: nowrap;
background: var(--t2);
padding: 2rem;
text-align: center;
--r: 20px;
--s: 30px;
--x: 20px;
--y: 10px;
border-radius: var(--r);
--_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
--_d: (var(--s) + var(--r));
mask: calc(var(--_d) + var(--x)) 0 var(--_m), 0 calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
mask-repeat: no-repeat;
}
.container-generic-video .video-ratio-auto {
aspect-ratio: 16 / 9;
}
}
@media screen and (min-width: 1200px) {
.panel blockquote .blockquote-content {
padding: 5rem 7rem;
}
.panel .panel-landscape-video video,
.panel .panel-landscape-video img {
height: 450px;
width: auto;
}
.fs-really-big {
font-size: clamp(2.1rem, 1.7769rem + 1.4359vw, 3.5rem);
}
.panel blockquote {
padding: 100px 14vw;
}
}
@media screen and (min-width: 1600px) {
:root {
--plats-images-anims-size: 22.5vw;
}
}