/* ========================================================================== NOTAKITA.COM TOP NAVBAR PART A -------------------------------------------------------------------------- Scope : - Header - Navbar - Logo - Desktop Menu - CTA Button - Desktop Foundation ========================================================================== */ /* ========================================================================== HEADER ========================================================================== */ .site-header { position: sticky; top: 0; left: 0; width: 100%; z-index: 9999; background:#f3f6ffe3; border-bottom: 1px solid rgb(13 58 163 / 10%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(18px); transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } .teks-kedip { animation: berkedip 1.5s infinite; } @keyframes berkedip { 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } } .site-header.scrolled{ background:rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(15,23,42,.08); } /* ========================================================================== NAVBAR ========================================================================== */ .navbar{ display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:30px; } /* ========================================================================== LOGO ========================================================================== */ .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; } .logo-dot{ width:14px; height:14px; border-radius:50%; background:linear-gradient( 135deg, #2563eb, #1d4ed8 ); box-shadow: 0 0 18px rgba(37,99,235,.45); } .logo-text{ font-size:1.45rem; font-weight:800; letter-spacing:1.2px; color:#0f172a; text-transform:uppercase; } /* ========================================================================== DESKTOP MENU ========================================================================== */ .nav-menu{ display:flex; align-items:center; justify-content:center; flex:1; gap:10px; list-style:none; margin:0; padding:0; } .nav-item{ position:relative; } .nav-item>a{ display:flex; align-items:center; justify-content:center; height:48px; padding:0 18px; border-radius:12px; text-decoration:none; font-size:.95rem; font-weight:600; color:#334155; transition: color .25s ease, background .25s ease; } .nav-item>a:hover{ color:#2563eb; background:#eff6ff; } /* ========================================================================== CTA ========================================================================== */ .nav-action{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .nav-action .btn-primary{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px; border-radius:12px; background:linear-gradient( 135deg, #2563eb, #1d4ed8 ); color:#ffffff; text-decoration:none; font-weight:700; font-size:.95rem; box-shadow: 0 12px 28px rgba(37,99,235,.22); transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; } .nav-action .btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 18px 34px rgba(37,99,235,.30); } /* ========================================================================== NAV ITEM ========================================================================== */ .nav-item{ position:relative; } /* ========================================================================== ARROW ========================================================================== */ .has-submenu > a::after{ content:""; width:6px; height:6px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; } .has-submenu:hover > .submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } /* ========================================================================== SUBMENU ========================================================================== */ .submenu{ position:absolute; top:calc(100% + 14px); left:0; min-width:260px; padding:14px 0; border-radius:18px; background:#fffff2; border:1px solid rgba(15,23,42,.06); box-shadow: 0 20px 50px rgba(15,23,42,.10); opacity:0; visibility:hidden; transform: translateY(12px); transition: opacity .28s ease, transform .28s ease, visibility .28s ease; z-index:999; } /* ========================================================================== SHOW SUBMENU ========================================================================== */ .has-submenu:hover>.submenu{ opacity:1; visibility:visible; transform: translateY(0); } /* ========================================================================== SUBMENU LINK ========================================================================== */ .submenu a{ display:flex; align-items:center; padding:13px 22px; text-decoration:none; color:#334155; font-size:.93rem; font-weight:500; transition: background .25s ease, color .25s ease, padding-left .25s ease; } /* ========================================================================== SUBMENU HOVER ========================================================================== */ .submenu a:hover{ background:#eff6ff; color:#2563eb; padding-left:28px; } /* ========================================================================== ACTIVE ITEM ========================================================================== */ .nav-item:hover>a{ color:#2563eb; } /* ========================================================================== SEPARATOR ========================================================================== */ .submenu a:not(:last-child){ border-bottom:1px solid rgba(15,23,42,.05); } /* ========================================================================== SUBMENU POINTER ========================================================================== */ .submenu::before{ content:""; position:absolute; top:-8px; left:34px; width:14px; height:14px; background:#ffffff; border-left:1px solid rgba(15,23,42,.06); border-top:1px solid rgba(15,23,42,.06); transform:rotate(45deg); } /* ========================================================================== HOVER SAFE ZONE ========================================================================== */ .has-submenu::after{ content:""; position:absolute; left:0; right:0; top:100%; height:18px; } /* ========================================================================== CTA HOVER ========================================================================== */ .nav-action .btn-primary:active{ transform:translateY(0); } /* ========================================================================== NAV SMOOTH ========================================================================== */ .nav-item, .nav-item>a, .submenu, .submenu a{ -webkit-tap-highlight-color:transparent; } /* ========================================================================== RESERVED PART C ========================================================================== */ /* Responsive Tablet Mobile Burger Navigation Grid Menu */ /* ========================================================================== NOTAKITA.COM TOP NAVBAR PART C -------------------------------------------------------------------------- Scope : - Responsive - Tablet - Mobile - Mobile Foundation ========================================================================== */ /* ========================================================================== LARGE DESKTOP ========================================================================== */ @media (max-width:1400px){ .navbar{ gap:28px; } .nav-menu{ gap:4px; } .mobile-toggle { display: none; } } /* ========================================================================== LAPTOP ========================================================================== */ @media (max-width:1200px){ .logo-text{ font-size:1.25rem; } .nav-item>a{ padding:0 14px; font-size:.92rem; } .nav-action .btn-primary{ padding:0 20px; } .mobile-toggle { display:none; } } /* ========================================================================== TABLET ========================================================================== */ @media (max-width:992px){ .navbar{ min-height:72px; } .nav-menu{ display:none; } .nav-action{ display:none; } .mobile-toggle{ display:flex; } } /* ========================================================================== MOBILE ========================================================================== */ @media (max-width:768px){ .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; } .navbar{ min-height:68px; gap:16px; } .logo{ gap:10px; } .logo-dot{ width:12px; height:12px; } .logo-text{ font-size:1.10rem; letter-spacing:.8px; } .mobile-toggle{ width:46px; height:46px; font-size:1.4rem; } } /* ========================================================================== SMALL MOBILE ========================================================================== */ @media (max-width:480px){ .navbar{ min-height:64px; } .logo-text{ font-size:1rem; } .mobile-toggle{ width:42px; height:42px; font-size:1.25rem; align-items:center; justify-content:center; color:blue; } } /* ========================================================================== MOBILE NAVIGATION COMING SOON ========================================================================== */ /* ================================================ MOBILE GRID NAVIGATION STEP 1 ☰ ↓ Home Membership Kursus AI Resources Company Contact STEP 2 Klik salah satu menu ↓ tampil Grid Submenu STEP 3 Tombol Back ↓ kembali ke Grid Menu Utama ================================================ */ /* ========================================================================== ACCESSIBILITY ========================================================================== */ .nav-item>a:focus, .submenu a:focus, .mobile-toggle:focus{ outline:2px solid rgba(37,99,235,.30); outline-offset:3px; } /* ========================================================================== SMOOTH SCROLL ========================================================================== */ html{ scroll-behavior:smooth; } /* ========================================================================== SECTION OFFSET ========================================================================== */ section{ scroll-margin-top:100px; } /* ========================================================================== FUTURE ========================================================================== */ /* Roadmap Navbar ✔ Desktop Navbar ✔ Desktop Dropdown ✔ Responsive ⬜ Mega Menu ⬜ Mobile Grid Navigation ⬜ Mobile Submenu Navigation ⬜ Active Menu Detection ⬜ Scroll Spy ⬜ Transparent Hero Header ⬜ Auto Collapse ⬜ Keyboard Navigation ⬜ Dark Mode */ /* ========================================================================== END ========================================================================== */