/* ========================================================== ZRECIPEZ GOLD NAVIGATION ========================================================== */ header nav, nav { position: relative; z-index: 100; } header nav a, nav a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 9px 15px !important; margin: 3px !important; color: #fff4b0 !important; font-weight: 900 !important; text-decoration: none !important; letter-spacing: .35px !important; border: 1px solid #ffd700 !important; border-radius: 20px !important; background: linear-gradient( 180deg, rgba(255,215,0,.20), rgba(126,73,0,.28) ) !important; box-shadow: 0 0 5px #ffd700, 0 0 11px rgba(255,190,0,.75), inset 0 0 8px rgba(255,215,0,.25) !important; text-shadow: 0 0 4px #fff, 0 0 8px #ffd700, 0 0 13px #ff9d00, 2px 2px 3px #000 !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important; animation: zrecipezNavGlow 2.4s ease-in-out infinite alternate; } header nav a:hover, nav a:hover { color: #ffffff !important; transform: translateY(-2px) scale(1.06); background: linear-gradient( 180deg, rgba(255,232,88,.48), rgba(190,105,0,.42) ) !important; border-color: #fff2a0 !important; box-shadow: 0 0 7px #fff, 0 0 15px #ffd700, 0 0 27px #ff9d00, 0 0 38px rgba(255,100,0,.55), inset 0 0 10px rgba(255,255,255,.25) !important; } @keyframes zrecipezNavGlow { from { box-shadow: 0 0 4px #ffd700, 0 0 8px rgba(255,183,0,.55), inset 0 0 5px rgba(255,215,0,.20); } to { box-shadow: 0 0 7px #fff1a0, 0 0 14px #ffd700, 0 0 23px rgba(255,130,0,.72), inset 0 0 9px rgba(255,215,0,.32); } } /* ========================================================== ZRECIPEZ LOGO — MOVING GOLD/FIRE AURA ========================================================== */ .logo, img.logo, header img[src*="zrecipezlogo"] { position: relative !important; filter: drop-shadow(0 0 4px #fff0a0) drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 14px #ff9d00) drop-shadow(0 0 22px rgba(255,75,0,.78)) !important; animation: zrecipezLogoFire 1.35s ease-in-out infinite alternate !important; transform-origin: center center; } @keyframes zrecipezLogoFire { 0% { filter: drop-shadow(0 0 3px #fff7b0) drop-shadow(0 0 7px #ffd700) drop-shadow(0 0 12px #ff9d00) drop-shadow(0 0 18px rgba(255,70,0,.60)); transform: translateY(0) scale(1); } 35% { filter: drop-shadow(1px -2px 5px #fff5a0) drop-shadow(-2px 1px 10px #ffd700) drop-shadow(2px -3px 17px #ff8a00) drop-shadow(-1px -5px 25px rgba(255,55,0,.78)); transform: translateY(-1px) scale(1.006); } 70% { filter: drop-shadow(-2px -1px 4px #fff) drop-shadow(2px -2px 11px #ffd700) drop-shadow(-3px -4px 19px #ff7b00) drop-shadow(3px -6px 29px rgba(255,45,0,.86)); transform: translateY(-2px) scale(1.012); } 100% { filter: drop-shadow(1px -2px 5px #fff5b0) drop-shadow(-1px -3px 12px #ffd700) drop-shadow(3px -5px 21px #ff8700) drop-shadow(-2px -8px 32px rgba(255,50,0,.88)); transform: translateY(-1px) scale(1.008); } } /* Keep everything readable on phones */ @media (max-width: 900px) { header nav a, nav a { padding: 8px 11px !important; min-height: 38px !important; font-size: 12px !important; } } /* Respect accessibility setting */ @media (prefers-reduced-motion: reduce) { .logo, img.logo, header img[src*="zrecipezlogo"], header nav a, nav a { animation: none !important; } } /* ========================================================== ZRECIPEZ — HIGH CONTRAST GOLD BUTTON TEXT ========================================================== */ /* Gold remains the LIGHT source. Text becomes DARK so it doesn't disappear into the glow. */ header nav a, nav a { color: #1b1000 !important; font-weight: 1000 !important; text-shadow: 0 1px 0 rgba(255,255,255,.70), 0 0 2px rgba(255,220,70,.80) !important; } /* Hover: almost pure black against brighter gold */ header nav a:hover, nav a:hover { color: #050505 !important; text-shadow: 0 1px 0 rgba(255,255,255,.90), 0 0 3px rgba(255,215,0,.75) !important; } /* Active/current page gets the strongest contrast */ header nav a.active, nav a.active, header nav a[aria-current="page"], nav a[aria-current="page"] { color: #000000 !important; font-weight: 1000 !important; text-shadow: 0 1px 0 #fff1a0, 0 0 2px #ffd700 !important; } /* ========================================================== ZRECIPEZ FINAL HIGH-CONTRAST NAVIGATION SOLID BURGUNDY / IVORY TEXT / GOLD FIRE GLOW ========================================================== */ header nav a, nav a { /* SOLID background — food cannot show through */ background: linear-gradient( 180deg, #8f1d16 0%, #68120f 48%, #420907 100% ) !important; /* BRIGHT readable lettering */ color: #fffbe8 !important; font-weight: 900 !important; letter-spacing: .45px !important; /* Gold rim */ border: 2px solid #ffd329 !important; border-radius: 22px !important; padding: 9px 16px !important; /* Dark separation immediately behind letters */ text-shadow: 0 2px 2px #000000, 0 0 3px #000000, 0 0 6px rgba(0,0,0,.95) !important; /* Glow OUTSIDE button */ box-shadow: inset 0 1px 2px rgba(255,255,255,.30), inset 0 -3px 5px rgba(0,0,0,.45), 0 0 4px #ffd700, 0 0 9px rgba(255,190,0,.90), 0 0 16px rgba(255,120,0,.55) !important; animation: zrecipezRedGoldPulse 2s ease-in-out infinite alternate !important; } /* ========================================================== HOVER ========================================================== */ header nav a:hover, nav a:hover { background: linear-gradient( 180deg, #c42b1d 0%, #8f180f 48%, #590b07 100% ) !important; color: #ffffff !important; border-color: #fff09a !important; text-shadow: 0 2px 2px #000, 0 0 4px #000, 0 0 7px #000 !important; box-shadow: inset 0 1px 3px rgba(255,255,255,.38), inset 0 -3px 6px rgba(0,0,0,.45), 0 0 5px #ffffff, 0 0 11px #ffd700, 0 0 20px #ff9d00, 0 0 29px rgba(255,60,0,.75) !important; transform: translateY(-2px) scale(1.04) !important; } /* ========================================================== CURRENT PAGE ========================================================== */ header nav a.active, nav a.active, header nav a[aria-current="page"], nav a[aria-current="page"] { background: linear-gradient( 180deg, #b62818, #7c130c, #4c0906 ) !important; color: #ffffff !important; border-color: #fff3a0 !important; box-shadow: inset 0 1px 3px rgba(255,255,255,.35), 0 0 6px #ffffff, 0 0 13px #ffd700, 0 0 22px #ff8700 !important; } /* ========================================================== MOVING GOLD/FIRE AURA ========================================================== */ @keyframes zrecipezRedGoldPulse { 0% { box-shadow: inset 0 1px 2px rgba(255,255,255,.25), inset 0 -3px 5px rgba(0,0,0,.45), 0 0 3px #ffd700, 0 0 7px rgba(255,190,0,.70), 0 0 12px rgba(255,100,0,.40); } 50% { box-shadow: inset 0 1px 2px rgba(255,255,255,.30), inset 0 -3px 5px rgba(0,0,0,.45), 0 0 5px #ffe75c, 0 0 11px #ffd700, 0 0 18px rgba(255,110,0,.65); } 100% { box-shadow: inset 0 1px 2px rgba(255,255,255,.25), inset 0 -3px 5px rgba(0,0,0,.45), 0 0 4px #fff1a0, 0 0 9px #ffd700, 0 0 16px rgba(255,75,0,.60); } }