/* ====================================================== */ /* NAVBAR */ /* ====================================================== */ .glass-nav-container { width: 100%; } .glass-pill { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 4px 20px rgba(14, 165, 233, 0.08); transition: all 0.3s ease; } .glass-pill:hover { box-shadow: 0 6px 24px rgba(14, 165, 233, 0.12); } /* ====================================================== */ /* NAVBAR EXTRA GLASSMORPHISM SAAT SCROLL */ /* ====================================================== */ #navbar-container { background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); isolation: isolate; transition: background 0.5s cubic-bezier(.16, 1, .3, 1), backdrop-filter 0.5s cubic-bezier(.16, 1, .3, 1), -webkit-backdrop-filter 0.5s cubic-bezier(.16, 1, .3, 1), border-color 0.45s ease, padding 0.5s cubic-bezier(.16, 1, .3, 1), box-shadow 0.5s ease; } /* Lapisan kilau kaca */ #navbar-container::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient( 110deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 28%, rgba(14, 165, 233, 0.045) 55%, rgba(255, 255, 255, 0.18) 78%, rgba(255, 255, 255, 0.34) 100% ); transition: opacity 0.5s ease; } #navbar-container.scrolled { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; /* Dibuat jauh lebih transparan supaya isi halaman benar-benar terlihat samar dari balik navbar. */ background: rgba(248, 252, 255, 0.18); backdrop-filter: blur(30px) saturate(195%) brightness(1.06); -webkit-backdrop-filter: blur(30px) saturate(195%) brightness(1.06); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 10px 38px rgba(15, 23, 42, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(255, 255, 255, 0.22); } #navbar-container.scrolled::before { opacity: 1; } /* Garis pantulan tipis di bagian atas kaca */ #navbar-container.scrolled::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.95), transparent ); opacity: 0.85; } #navbar-container.scrolled #navbar-inner { padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 1.5rem; padding-right: 1.5rem; transition: padding 0.5s cubic-bezier(.16, 1, .3, 1); } @media (min-width: 640px) { #navbar-container.scrolled #navbar-inner { padding-left: 2rem; padding-right: 2rem; } } /* Pill menu dan tombol hati dibuat lebih bening. Karena navbar utama sudah blur, ini memberi efek "kaca di atas kaca" tanpa terlihat putih solid. */ #navbar-container.scrolled .glass-pill { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.08) ); backdrop-filter: blur(18px) saturate(185%); -webkit-backdrop-filter: blur(18px) saturate(185%); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 6px 22px rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -1px 0 rgba(255, 255, 255, 0.14); } /* Sedikit efek refleksi pada pill saat hover */ #navbar-container.scrolled .glass-pill:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.11) ); border-color: rgba(255, 255, 255, 0.58); box-shadow: 0 8px 28px rgba(14, 165, 233, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.72); } /* ====================================================== */ /* NAV ITEM */ /* ====================================================== */ .nav-item { position: relative; padding: 0.5rem 1rem; border-radius: 9999px; color: #64748b; font-weight: 500; transition: color 0.3s ease; z-index: 10; } .nav-item:hover { color: #0ea5e9; } .nav-item.active { color: white; } .nav-item.active:hover { color: white; } #nav-indicator { position: absolute; top: 6px; height: calc(100% - 12px); background-color: #0ea5e9; border-radius: 9999px; box-shadow: 0 2px 10px rgba(14, 165, 233, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; pointer-events: none; } /* ====================================================== */ /* FOOTER */ /* ====================================================== */ .site-footer { position: relative; overflow: hidden; background: linear-gradient( 145deg, #071827 0%, #08283d 52%, #073552 100% ); } .site-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 12% 16%, rgba(14,165,233,.10), transparent 28% ), radial-gradient( circle at 84% 82%, rgba(56,189,248,.07), transparent 24% ); pointer-events: none; } .footer-link { position: relative; width: fit-content; color: #cbd5e1; transition: color .25s ease, transform .25s ease; } .footer-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: #38bdf8; transition: width .3s cubic-bezier(.16,1,.3,1); } .footer-link:hover { color: #ffffff; transform: translateX(2px); } .footer-link:hover::after { width: 100%; } .footer-contact-card { transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } .footer-contact-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.075); border-color: rgba(125,211,252,.25); } @media (max-width: 767px) { .cidadap-cta::after { width: 220px; height: 220px; right: -100px; top: -90px; } }