/* ================================================================ seo-float.css — Let's Freeze The Frame Extra CSS for: 1. Floating Call + WhatsApp sidebar (right, neon animated) 2. Cities We Serve section 3. FAQ section 4. Footer extra styles Import AFTER style.css in ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap'); /* ================================================================ 1. FLOATING SIDEBAR — Call + WhatsApp (Right Side) ================================================================ */ .float-sidebar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 950; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; /* Slide in from right on load */ animation: slideInRight 0.7s cubic-bezier(.34,1.56,.64,1) 1.5s both; } @keyframes slideInRight { from { transform: translateY(-50%) translateX(100%); opacity: 0; } to { transform: translateY(-50%) translateX(0); opacity: 1; } } /* ── Neon vertical line decoration ── */ .float-neon-line { width: 2px; height: 40px; margin-right: 24px; border-radius: 2px; background: linear-gradient( to bottom, transparent, var(--neon-cyan, #00f5ff), var(--neon-pink, #ff2d78), transparent ); box-shadow: 0 0 6px var(--neon-cyan, #00f5ff), 0 0 12px var(--neon-pink, #ff2d78); animation: neonLinePulse 2.5s ease-in-out infinite; } @keyframes neonLinePulse { 0%, 100% { opacity: 0.5; transform: scaleY(0.9); } 50% { opacity: 1.0; transform: scaleY(1.1); } } /* ── Each floating button ── */ .float-btn { display: flex; align-items: center; gap: 0; overflow: hidden; border-radius: 4px 0 0 4px; text-decoration: none; cursor: pointer; max-width: 48px; /* collapsed — only icon visible */ transition: max-width 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s, transform 0.3s; white-space: nowrap; } .float-btn:hover { max-width: 180px; /* expanded — text slides out */ transform: translateX(-4px); } /* Icon circle */ .float-btn-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; border-radius: 4px 0 0 4px; transition: background 0.3s; } /* Label text */ .float-btn-text { padding: 0 14px 0 6px; font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0; transition: opacity 0.25s 0.1s; } .float-btn:hover .float-btn-text { opacity: 1; } /* ── CALL button — Neon Cyan ── */ .float-call { background: rgba(0, 245, 255, 0.12); border: 1.5px solid var(--neon-cyan, #00f5ff); border-right: none; color: var(--neon-cyan, #00f5ff); box-shadow: 0 0 10px rgba(0,245,255,0.25), inset 0 0 10px rgba(0,245,255,0.05); } .float-call .float-btn-icon { background: rgba(0,245,255,0.08); color: var(--neon-cyan, #00f5ff); text-shadow: 0 0 8px var(--neon-cyan, #00f5ff); } .float-call:hover { background: rgba(0,245,255,0.18); color: var(--neon-cyan, #00f5ff); box-shadow: 0 0 24px rgba(0,245,255,0.5), 0 0 60px rgba(0,245,255,0.15), inset 0 0 20px rgba(0,245,255,0.08); } /* Animated neon pulse on call icon */ .float-call .float-btn-icon { animation: callPulse 2s ease-in-out infinite; } @keyframes callPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,245,255,0.4); } 50% { box-shadow: 0 0 0 8px rgba(0,245,255,0); } } /* ── WHATSAPP button — Neon Green ── */ .float-wa { background: rgba(37, 211, 102, 0.12); border: 1.5px solid #25D366; border-right: none; color: #25D366; box-shadow: 0 0 10px rgba(37,211,102,0.25), inset 0 0 10px rgba(37,211,102,0.05); } .float-wa .float-btn-icon { background: rgba(37,211,102,0.08); color: #25D366; text-shadow: 0 0 8px #25D366; } .float-wa:hover { background: rgba(37,211,102,0.18); color: #25D366; box-shadow: 0 0 24px rgba(37,211,102,0.5), 0 0 60px rgba(37,211,102,0.15), inset 0 0 20px rgba(37,211,102,0.08); } /* WhatsApp bounce animation */ .float-wa .float-btn-icon { animation: waBounce 3s ease-in-out infinite; } @keyframes waBounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15); } 60% { transform: scale(0.95); } } /* ── Hide on very small screens ── */ @media (max-width: 480px) { .float-sidebar { top: auto; bottom: 24px; transform: none; flex-direction: row; } .float-btn { border-radius: 50px; max-width: 48px; height: 48px; } .float-btn:hover { max-width: 48px; transform: scale(1.1); } .float-btn-text { display: none; } .float-neon-line { display: none; } } /* ================================================================ 2. CITIES WE SERVE SECTION ================================================================ */ .cities-section { background: var(--dark2, #0a0a1a); padding: 100px 0; } /* City card */ .city-card { position: relative; background: var(--dark3, #0f0f24); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 28px 16px 22px; text-align: center; overflow: hidden; transition: all 0.4s cubic-bezier(.34,1.56,.64,1); cursor: default; } .city-card:hover { border-color: rgba(0,245,255,0.35); transform: translateY(-8px) scale(1.03); box-shadow: 0 0 0 1px rgba(0,245,255,0.1), 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(0,245,255,0.08); } /* Animated neon ring behind icon */ .city-neon-ring { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(0,245,255,0.15); box-shadow: 0 0 20px rgba(0,245,255,0.05); transition: all 0.4s; } .city-card:hover .city-neon-ring { border-color: rgba(0,245,255,0.4); box-shadow: 0 0 30px rgba(0,245,255,0.2); transform: translateX(-50%) scale(1.2); } .city-icon { font-size: 2.2rem; display: block; margin-bottom: 12px; position: relative; } .city-name { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--text, #f0f0ff); margin: 19px 0px 4px opx; transition: color 0.3s; } .city-card:hover .city-name { color: var(--neon-cyan, #00f5ff); text-shadow: 0 0 10px rgba(0,245,255,0.4); } .city-sub { font-size: 0.72rem; color: var(--text-muted, #9090bb); letter-spacing: 0.5px; margin: 0 0 12px; } /* Keyword tag — visible + SEO */ .city-tag { display: inline-block; font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0,245,255,0.5); border-top: 1px solid rgba(0,245,255,0.12); padding-top: 10px; width: 100%; transition: color 0.3s; } .city-card:hover .city-tag { color: rgba(0,245,255,0.85); } /* SEO text paragraph */ .cities-seo-text { margin-top: 52px; font-size: 0.8rem; color: var(--text-muted, #9090bb); line-height: 1.85; text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 28px; } .cities-seo-text strong { color: rgba(0,245,255,0.7); } /* ================================================================ 3. FAQ SECTION ================================================================ */ .faq-section { background: var(--dark, #060610); padding: 100px 0; } .faq-item { border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.3s; } .faq-item:hover, .faq-item:focus-within { border-color: rgba(0,245,255,0.2); } /* Question button */ .faq-q { width: 100%; background: var(--dark2, #0a0a1a); border: none; color: var(--text, #f0f0ff); padding: 18px 22px; font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: background 0.3s, color 0.3s; } .faq-q:hover, .faq-q[aria-expanded="true"] { background: rgba(0,245,255,0.04); color: var(--neon-cyan, #00f5ff); text-shadow: 0 0 8px rgba(0,245,255,0.3); } .faq-chevron { flex-shrink: 0; font-size: 0.9rem; color: var(--neon-cyan, #00f5ff); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); } .faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); } /* Answer body */ .faq-a { background: var(--dark3, #0f0f24); padding: 0 22px; font-size: 0.88rem; color: var(--text-muted, #9090bb); line-height: 1.78; border-top: 1px solid rgba(255,255,255,0.04); } /* Bootstrap collapse adds show class — add padding when open */ .faq-a.show, .faq-a.collapsing { padding: 16px 22px 20px; } .faq-a strong { color: var(--neon-cyan, #00f5ff); } /* ================================================================ 4. FOOTER EXTRA STYLES ================================================================ */ .footer-col-title { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--neon-cyan, #00f5ff); text-shadow: 0 0 8px rgba(0,245,255,0.4); font-weight: 600; } /* Cities keyword grid in footer */ .footer-cities { display: flex; flex-direction: column; gap: 6px; } .footer-city-link { font-size: 0.76rem; color: var(--text-muted, #9090bb); text-decoration: none; letter-spacing: 0.5px; transition: color 0.25s, text-shadow 0.25s; padding: 2px 0; } .footer-city-link:hover { color: var(--neon-cyan, #00f5ff); text-shadow: 0 0 6px rgba(0,245,255,0.4); }