/*
Theme Name: French Flavors
Theme URI: https://french-flavors.com
Author: French Flavors LLC
Description: Custom theme for French Flavors – authentic Breton crêpes made in Los Angeles. Texts are editable in Appearance > Customize > French Flavors.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: french-flavors
*/
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/nunito-400.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/nunito-600.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/nunito-700.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/nunito-800.woff2) format('woff2')}
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/luckiest-guy-400.woff2) format('woff2')}
body{margin:0}
a{color:#231A45}a:hover{color:#060227}
@keyframes ff-twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@keyframes ff-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-7px) rotate(-3deg)}65%{transform:translateY(1px) rotate(2deg)}}
@keyframes ff-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes ff-unroll{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ff-slap{0%{opacity:0;transform:translateY(-60px) scale(1.35) rotate(-18deg)}55%{opacity:1;transform:translateY(0) scale(.94) rotate(-2deg)}75%{transform:scale(1.04) rotate(-5deg)}100%{transform:scale(1) rotate(-4deg)}}
.ff-mascot{transform-origin:50% 85%;transform:rotate(-4deg);cursor:pointer}
.ff-fb,.ff-fc,.ff-crumb{opacity:0}
.ff-char{transform-origin:52% 78%}
.ff-crumb{pointer-events:none}
@keyframes ff-eat-a{0%,100%{transform:translateY(0) rotate(0deg) scale(1,1)}25%{transform:translateY(-8px) rotate(0deg) scale(1,1)}38%{transform:translateY(6px) rotate(0deg) scale(1.05,.94)}46%{transform:translateY(-3px) rotate(0deg) scale(.98,1.03)}54%{transform:translateY(3px) rotate(0deg) scale(1.03,.97)}62%{transform:translateY(0) rotate(0deg) scale(1,1)}75%{transform:translateY(-4px) rotate(0deg)}88%{transform:translateY(-12px) rotate(0deg)}94%{transform:translateY(2px) rotate(0deg)}}
@keyframes ff-fa-a{0%,35%{opacity:1}35.5%,91%{opacity:0}92%,100%{opacity:1}}
@keyframes ff-fc-a{0%,39%{opacity:0}39.5%,91%{opacity:1}92%,100%{opacity:0}}
@keyframes ff-fb-a{0%,35%{opacity:0}35.5%,39%{opacity:1}39.5%,100%{opacity:0}}
@keyframes ff-c1-a{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(70px,-60px) scale(1)}}
@keyframes ff-c2-a{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(95px,-10px) scale(1)}}
@keyframes ff-c3-a{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(40px,40px) scale(1)}}
@keyframes ff-c4-a{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(110px,-45px) scale(1)}}
.ff-run-a{animation:ff-slap .8s cubic-bezier(.25,1.4,.5,1) both}
.ff-run-a .ff-char{animation:ff-eat-a 2.4s ease-in-out .9s both}
.ff-run-a .ff-fa{animation:ff-fa-a 2.4s linear .9s both}
.ff-run-a .ff-fc{animation:ff-fc-a 2.4s linear .9s both}
.ff-run-a .ff-fb{animation:ff-fb-a 2.4s linear .9s both}
.ff-run-a .ff-c1{animation:ff-c1-a 1.4s ease-out 1.8s both}
.ff-run-a .ff-c2{animation:ff-c2-a 1.4s ease-out 1.8s both}
.ff-run-a .ff-c3{animation:ff-c3-a 1.4s ease-out 1.8s both}
.ff-run-a .ff-c4{animation:ff-c4-a 1.4s ease-out 1.8s both}
@keyframes ff-eat-b{0%,100%{transform:translateY(0) rotate(0deg) scale(1,1)}25%{transform:translateY(-8px) rotate(0deg) scale(1,1)}38%{transform:translateY(6px) rotate(0deg) scale(1.05,.94)}46%{transform:translateY(-3px) rotate(0deg) scale(.98,1.03)}54%{transform:translateY(3px) rotate(0deg) scale(1.03,.97)}62%{transform:translateY(0) rotate(0deg) scale(1,1)}75%{transform:translateY(-4px) rotate(0deg)}88%{transform:translateY(-12px) rotate(0deg)}94%{transform:translateY(2px) rotate(0deg)}}
@keyframes ff-fa-b{0%,35%{opacity:1}35.5%,91%{opacity:0}92%,100%{opacity:1}}
@keyframes ff-fc-b{0%,39%{opacity:0}39.5%,91%{opacity:1}92%,100%{opacity:0}}
@keyframes ff-fb-b{0%,35%{opacity:0}35.5%,39%{opacity:1}39.5%,100%{opacity:0}}
@keyframes ff-c1-b{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(70px,-60px) scale(1)}}
@keyframes ff-c2-b{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(95px,-10px) scale(1)}}
@keyframes ff-c3-b{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(40px,40px) scale(1)}}
@keyframes ff-c4-b{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(110px,-45px) scale(1)}}
.ff-run-b .ff-char{animation:ff-eat-b 2.4s ease-in-out 0s both}
.ff-run-b .ff-fa{animation:ff-fa-b 2.4s linear 0s both}
.ff-run-b .ff-fc{animation:ff-fc-b 2.4s linear 0s both}
.ff-run-b .ff-fb{animation:ff-fb-b 2.4s linear 0s both}
.ff-run-b .ff-c1{animation:ff-c1-b 1.4s ease-out .9s both}
.ff-run-b .ff-c2{animation:ff-c2-b 1.4s ease-out .9s both}
.ff-run-b .ff-c3{animation:ff-c3-b 1.4s ease-out .9s both}
.ff-run-b .ff-c4{animation:ff-c4-b 1.4s ease-out .9s both}
@keyframes ff-eat-c{0%,100%{transform:translateY(0) rotate(0deg) scale(1,1)}25%{transform:translateY(-8px) rotate(0deg) scale(1,1)}38%{transform:translateY(6px) rotate(0deg) scale(1.05,.94)}46%{transform:translateY(-3px) rotate(0deg) scale(.98,1.03)}54%{transform:translateY(3px) rotate(0deg) scale(1.03,.97)}62%{transform:translateY(0) rotate(0deg) scale(1,1)}75%{transform:translateY(-4px) rotate(0deg)}88%{transform:translateY(-12px) rotate(0deg)}94%{transform:translateY(2px) rotate(0deg)}}
@keyframes ff-fa-c{0%,35%{opacity:1}35.5%,91%{opacity:0}92%,100%{opacity:1}}
@keyframes ff-fc-c{0%,39%{opacity:0}39.5%,91%{opacity:1}92%,100%{opacity:0}}
@keyframes ff-fb-c{0%,35%{opacity:0}35.5%,39%{opacity:1}39.5%,100%{opacity:0}}
@keyframes ff-c1-c{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(70px,-60px) scale(1)}}
@keyframes ff-c2-c{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(95px,-10px) scale(1)}}
@keyframes ff-c3-c{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(40px,40px) scale(1)}}
@keyframes ff-c4-c{0%{opacity:0;transform:translate(0,0) scale(.6)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(110px,-45px) scale(1)}}
.ff-run-c .ff-char{animation:ff-eat-c 2.4s ease-in-out 0s both}
.ff-run-c .ff-fa{animation:ff-fa-c 2.4s linear 0s both}
.ff-run-c .ff-fc{animation:ff-fc-c 2.4s linear 0s both}
.ff-run-c .ff-fb{animation:ff-fb-c 2.4s linear 0s both}
.ff-run-c .ff-c1{animation:ff-c1-c 1.4s ease-out .9s both}
.ff-run-c .ff-c2{animation:ff-c2-c 1.4s ease-out .9s both}
.ff-run-c .ff-c3{animation:ff-c3-c 1.4s ease-out .9s both}
.ff-run-c .ff-c4{animation:ff-c4-c 1.4s ease-out .9s both}
@keyframes ff-blink{0%,40%{opacity:0}40.5%,45%{opacity:1}45.5%,100%{opacity:0}}
.ff-blink{opacity:0;pointer-events:none;animation:ff-blink 8s linear 2.5s infinite}
.ff-btn{transition:transform .15s}
.ff-btn:hover{animation:ff-hop .5s ease-out}
.ff-card{transition:transform .25s cubic-bezier(.3,1.6,.6,1)}
.ff-card:hover{transform:translateY(-8px) rotate(-4deg) !important}
.ff-card:nth-child(even):hover{transform:translateY(-8px) rotate(4deg) !important}
.ff-card img{transition:transform .4s}
.ff-card img[aria-hidden]{transition:none}
.ff-card:hover img:not([aria-hidden]){transform:scale(1.06)}
.ff-perk{transition:transform .25s cubic-bezier(.3,1.6,.6,1)}
.ff-perk:hover{transform:translateY(-6px) rotate(-1deg)}
.ff-perk:hover svg{animation:ff-twinkle 1.2s ease-in-out infinite}
.ff-band{transform-origin:left center}
@supports (animation-timeline: view()){
.ff-reveal{animation:ff-up linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.ff-band{animation:ff-unroll linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
}
@media (prefers-reduced-motion: reduce){.ff-mascot,.ff-mascot *,.ff-reveal,.ff-band,.ff-btn:hover,.ff-perk:hover svg{animation:none !important}.ff-card,.ff-perk,.ff-card img{transition:none}.ff-card:hover,.ff-perk:hover,.ff-card:hover img{transform:none}}
.ff-hp{position:absolute;left:-9999px}
.ff-notice{margin:0;padding:12px 16px;border-radius:12px;font-weight:700}
@media (max-width: 640px){
  header nav{gap:14px !important;font-size:15px !important;width:100%;justify-content:space-between}
  header nav .ff-btn{padding:8px 14px !important;min-height:40px !important}
}