/* --------------------------- Mobile Basics --------------------------- */ @media (max-width: 768px) { .slide-overlay { font-size: 0.50em; } .wp-block-navigation-item__content { font-size: 0.9rem; padding: 0.25rem 0.5rem; white-space: normal; } body { overflow-x: hidden; } } html, body { overflow-x: hidden; } img { max-width: 100%; } * { box-sizing: border-box; } /* --------------------------- MetaSlider Caption Fix --------------------------- */ .metaslider .caption-wrap { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; background: transparent !important; opacity: 1 !important; } .metaslider .caption { background: transparent !important; opacity: 1 !important; } /* --------------------------- Slide Overlay Styling --------------------------- */ .slide-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(80%, 700px); padding: 25px 40px; border-radius: 8px; text-align: center; color: #002649; box-sizing: border-box; z-index: 2; } /* Transparent white background only */ .slide-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.82); border-radius: 8px; z-index: 0; } /* Keep all overlay content solid */ .slide-overlay > * { position: relative; z-index: 1; opacity: 1 !important; } /* --------------------------- Slide Text --------------------------- */ .slide-overlay h2 { font-size: 60px; margin: 0 0 10px; font-weight: 900; color: #002649 !important; } .slide-overlay p { font-size: 18px; line-height: 2.4; margin: 0 0 16px; color: #002649 !important; } /* --------------------------- Takeout Button --------------------------- */ .takeout-button { display: inline-block; margin-top: 8px; padding: 12px 22px; background: #fdba09 !important; color: #002649 !important; text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 4px; transition: all 0.25s ease; opacity: 1 !important; } .takeout-button:hover { background: #a8841f !important; transform: translateY(-2px); } /* --------------------------- Mobile Overlay Adjustments --------------------------- */ @media (max-width: 768px) { .slide-overlay { padding: 30px 10px; width: min(70%, 500px); } .slide-overlay h2 { font-size: 19px; font-weight: BOLD; line-height:1 } .slide-overlay p { font-size: 11px; margin-bottom: 12px; line-height:1.2em } .takeout-button { font-size: 10px; padding: 10px 16px; } } /* --------------------------- Fix ATHENS HERO only on mobile --------------------------- */ @media (max-width: 768px) { .athens-hero .metaslider, .athens-hero .metaslider .slides, .athens-hero .metaslider .slides img { height: 60vh !important; object-fit: cover !important; } } /* --------------------------- ATHENS HERO Mobile Overlay Fix --------------------------- */ @media (max-width: 768px) { .athens-hero .slide-overlay { padding: 10px 12px !important; width: min(82%, 320px) !important; } .athens-hero .slide-overlay h2 { font-size: 20px !important; margin: 0 0 6px !important; } .athens-hero .slide-overlay p { font-size: 12px !important; margin: 0 0 8px !important; } .athens-hero .takeout-button { font-size: 12px !important; padding: 8px 12px !important; } /* remove spacing from slide HTML */ .athens-hero .slide-overlay br { display: none !important; } } /* --------------------------- ATHENS REVIEWS slider --------------------------- */ .athens-reviews .metaslider, .athens-reviews .flexslider, .athens-reviews .flex-viewport, .athens-reviews .slides, .athens-reviews .slides li { height: auto !important; min-height: 0 !important; max-height: none !important; width: 100% !important; max-width: 75% !important; } .athens-reviews .metaslider .slides img, .athens-reviews .slides img, .athens-reviews img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } @media (max-width: 768px) { .athens-reviews { width: 95% !important; max-width: 95% !important; margin: 0 auto !important; } .athens-reviews .metaslider, .athens-reviews .flexslider, .athens-reviews .flex-viewport, .athens-reviews .slides, .athens-reviews .slides li, .athens-reviews .metaslider .slides img, .athens-reviews .slides img, .athens-reviews img { height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; } } .wp-site-blocks { max-width: 1200px; margin-left: auto; margin-right: auto; } /* --------------------------- CALL AHEAD --------------------------- */ .call-ahead { background: #00396b; color: #f7f6f2; text-align: center; padding: 20px 10px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; width: 100%; max-width: 50%; } /* DESKTOP */ @media (min-width: 1025px) { .call-ahead { margin-left: 310px !important; margin-right: 310px !important; } .call-ahead h1, .call-ahead h2, .call-ahead h3, .call-ahead h4, .call-ahead h5, .call-ahead h6 { text-shadow: 0 0 8px rgba(0, 0, 0, 1), 0 0 20px rgba(255, 255, 255, 0.6) !important; } } } /* MOBILE */ @media (max-width: 1024px) { .call-ahead { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; white-space: normal !important; margin: 0 auto !important; padding: 8px 10px !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; } .call-ahead h1, .call-ahead h2, .call-ahead h3, .call-ahead h4, .call-ahead h5, .call-ahead h6 { font-size: 90% !important; text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.6) !important; } } .call-ahead .wp-block-button__link { transition: transform 0.2s ease, box-shadow 0.2s ease; } .call-ahead .wp-block-button__link:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2); } /*Glow and Float*/ .call-ahead .wp-block-heading { display: inline-block; animation: glowFloat 3s ease-in-out infinite; } @keyframes glowFloat { 0%, 100% { transform: translateY(0); text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 14px rgba(255,255,255,0.4); } 50% { transform: translateY(-4px); text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 22px rgba(255,255,255,0.8), 0 0 34px rgba(255,255,255,0.5); } } @media (max-width: 1024px) { /* Force parent to center children */ .wp-block-group:has(.call-ahead) { display: flex !important; justify-content: center !important; } /* Make the card a normal centered block */ .call-ahead { width: 90% !important; max-width: 400px !important; margin: 20px auto !important; } }