/* =================================================== SCITRON – footer.css Complete footer styling — dark theme Link in after style.css: =================================================== */ /* ─── Variables (mirror header.css) ────────────── */ :root { --footer-bg: #05111f; --footer-top-bg: #08192e; --footer-border: rgba(255, 255, 255, 0.07); --footer-text: rgba(255, 255, 255, 0.48); --footer-text-hover: #00AEEF; --footer-heading-c: #ffffff; --accent: #00AEEF; --primary: #003B95; --font-body: 'Poppins', sans-serif; --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); --radius-sm: 8px; --radius-md: 12px; } /* ═══════════════════════════════════════════════════ FOOTER WRAPPER ═══════════════════════════════════════════════════ */ .footer { font-family: var(--font-body); background: radial-gradient(circle at top center, rgba(0, 174, 239, 0.08) 0%, var(--footer-bg) 70%); background-color: var(--footer-bg); color: var(--footer-text); position: relative; overflow: hidden; } /* Subtle top divider glow */ .footer::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 174, 239, 0.5) 30%, rgba(0, 174, 239, 0.5) 70%, transparent); } /* ═══════════════════════════════════════════════════ FOOTER TOP (main grid area) ═══════════════════════════════════════════════════ */ .footer__top { background: transparent; padding: 72px 0 56px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 48px; align-items: start; } /* ═══════════════════════════════════════════════════ COL 1 – BRAND ═══════════════════════════════════════════════════ */ .footer__brand {} .footer__logo { display: inline-block; margin-bottom: 18px; transition: opacity 0.2s; } .footer__logo:hover { opacity: 0.85; } .footer__logo img { height: 65px; width: auto; max-width: 260px; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) brightness(1.15); transition: all 0.3s ease; } .footer__tagline { font-size: 0.875rem; line-height: 1.8; color: var(--footer-text); margin-bottom: 20px; max-width: 300px; } .footer__tagline strong { color: rgba(255, 255, 255, 0.72); font-weight: 600; } /* Certification badges */ .footer__certifications { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .footer__cert-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); padding: 5px 12px; border-radius: 50px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; transition: var(--transition); cursor: default; } .footer__cert-badge:hover { background: rgba(0, 174, 239, 0.1); border-color: rgba(0, 174, 239, 0.3); color: var(--accent); } /* Social icons */ .footer__social { display: flex; gap: 10px; } .social-btn { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.50); transition: var(--transition); text-decoration: none; } .social-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 174, 239, 0.35); } /* ═══════════════════════════════════════════════════ COLUMN HEADINGS ═══════════════════════════════════════════════════ */ .footer__col {} .footer__heading { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: var(--footer-heading-c); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; position: relative; padding-bottom: 12px; } /* Accent underline on heading */ .footer__heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; } .footer__col:hover .footer__heading::after { width: 48px; } .footer__heading--spaced { margin-top: 32px; } /* ═══════════════════════════════════════════════════ LINKS LIST ═══════════════════════════════════════════════════ */ .footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .footer__link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--footer-text); text-decoration: none; padding: 5px 0; transition: var(--transition); position: relative; } /* Arrow indicator on hover */ .footer__link::before { content: '›'; font-size: 1.1rem; line-height: 1; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: var(--transition); } .footer__link:hover { color: var(--footer-text-hover); padding-left: 14px; } .footer__link:hover::before { opacity: 1; transform: translateX(0); } /* ═══════════════════════════════════════════════════ CONTACT / ADDRESS COLUMN ═══════════════════════════════════════════════════ */ .footer__address { font-style: normal; display: flex; flex-direction: column; gap: 12px; } .footer__contact-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.85rem; color: var(--footer-text); line-height: 1.6; } .footer__contact-icon { flex-shrink: 0; font-size: 0.95rem; margin-top: 1px; width: 20px; text-align: center; } .footer__contact-item a { color: var(--footer-text); text-decoration: none; transition: color 0.2s; } .footer__contact-item a:hover { color: var(--accent); } /* ═══════════════════════════════════════════════════ NEWSLETTER ═══════════════════════════════════════════════════ */ .footer__newsletter-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.38); margin-bottom: 12px; line-height: 1.5; } .footer__newsletter-form { display: flex; gap: 8px; } .footer__newsletter-input { flex: 1; min-width: 0; padding: 11px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); color: #fff; font-size: 0.875rem; font-family: var(--font-body); outline: none; transition: border-color 0.2s, background 0.2s; } .footer__newsletter-input:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.09); } .footer__newsletter-input::placeholder { color: rgba(255, 255, 255, 0.28); } .footer__newsletter-btn { flex-shrink: 0; padding: 11px 18px; background: var(--accent); border: none; border-radius: var(--radius-sm); color: #fff; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: var(--transition); letter-spacing: 0.02em; } .footer__newsletter-btn:hover { background: #0099d6; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 174, 239, 0.35); } .footer__newsletter-btn:active { transform: translateY(0); } /* ═══════════════════════════════════════════════════ FOOTER BOTTOM BAR ═══════════════════════════════════════════════════ */ .footer__bottom { background: var(--footer-bg); border-top: 1px solid var(--footer-border); } .footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; flex-wrap: wrap; gap: 12px; } .footer__copy { font-size: 0.8rem; color: rgba(255, 255, 255, 0.28); margin: 0; line-height: 1.5; } .footer__bottom-links { display: flex; gap: 24px; align-items: center; } .footer__bottom-link { font-size: 0.78rem; color: rgba(255, 255, 255, 0.28); text-decoration: none; transition: color 0.2s; white-space: nowrap; } .footer__bottom-link:hover { color: var(--accent); } /* Dot separator between links */ .footer__bottom-links .footer__bottom-link+.footer__bottom-link { position: relative; } .footer__bottom-links .footer__bottom-link+.footer__bottom-link::before { content: '·'; position: absolute; left: -14px; color: rgba(255, 255, 255, 0.18); } /* ═══════════════════════════════════════════════════ FLOATING BUTTONS ═══════════════════════════════════════════════════ */ .float-btns { position: fixed; bottom: 28px; right: 22px; display: flex; flex-direction: column; gap: 12px; z-index: 900; } .float-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: var(--transition); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); cursor: pointer; position: relative; } .float-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } /* WhatsApp */ .float-btn--wa { background: #25D366; color: #fff; animation: waPulse 3s ease-in-out infinite; } @keyframes waPulse { 0%, 100% { box-shadow: 0 6px 22px rgba(37, 211, 102, 0.35); } 50% { box-shadow: 0 6px 28px rgba(37, 211, 102, 0.65), 0 0 0 8px rgba(37, 211, 102, 0.1); } } /* Demo / inquiry */ .float-btn--demo { background: var(--primary); color: #fff; } /* Tooltip label */ .float-btn__label { position: absolute; right: calc(100% + 10px); background: #111; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; font-family: var(--font-body); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity 0.2s, transform 0.2s; } /* Tooltip arrow */ .float-btn__label::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: #111; border-right: none; } .float-btn:hover .float-btn__label { opacity: 1; transform: translateX(0); } /* ═══════════════════════════════════════════════════ BACK-TO-TOP BUTTON ═══════════════════════════════════════════════════ */ .back-to-top { position: fixed; bottom: 28px; left: 22px; width: 42px; height: 42px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border: 1px solid rgba(0, 59, 149, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary); transition: var(--transition); opacity: 0; visibility: hidden; transform: translateY(12px); z-index: 900; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 59, 149, 0.3); } /* ═══════════════════════════════════════════════════ TOAST NOTIFICATION ═══════════════════════════════════════════════════ */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: #10b981; color: #fff; padding: 13px 28px; border-radius: 50px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4); z-index: 9999; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; pointer-events: none; } .toast.show { transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════════════════════ SCREEN-READER UTILITY ═══════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ @media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; } } @media (max-width: 640px) { .footer__top { padding: 48px 0 40px; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .footer__tagline { max-width: 100%; } .footer__heading--spaced { margin-top: 24px; } .footer__bottom-inner { flex-direction: column; text-align: center; gap: 8px; } .footer__bottom-links { justify-content: center; } .footer__newsletter-form { flex-direction: column; } .footer__newsletter-btn { width: 100%; text-align: center; padding: 13px; } .float-btns { bottom: 18px; right: 16px; } .back-to-top { bottom: 18px; left: 16px; } }