From 2fb74b35816099ff13896607e51feaf9e90a1e20 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Wed, 3 Jun 2026 10:32:21 +0600 Subject: [PATCH 01/12] Fix sass watch issue Signed-off-by: mohin7 --- hugo_stats.json | 3 - package-lock.json | 404 +++++++++++++++++++++++++++++++++++- package.json | 6 +- static/assets/sass/main.css | 2 - 4 files changed, 407 insertions(+), 8 deletions(-) diff --git a/hugo_stats.json b/hugo_stats.json index 718e37821d..bf6ae223d4 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -108,7 +108,6 @@ "card-offset-10", "card-offset-11", "card-offset-12", - "card-offset-13", "card-offset-2", "card-offset-3", "card-offset-4", @@ -429,7 +428,6 @@ "is-one-thirds-fullhd", "is-paddingless", "is-primary", - "is-prod-ace-platform", "is-prod-kubedb", "is-prod-kubestash", "is-prod-kubevault", @@ -820,7 +818,6 @@ "personal-data", "phone", "plaid", - "prod-ace-platform", "prod-kubedb", "prod-kubestash", "prod-kubevault", diff --git a/package-lock.json b/package-lock.json index 19a836952d..c3817e5d96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "devDependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", "autoprefixer": "^10.4.27", - "postcss-cli": "^9.1.0" + "postcss-cli": "^9.1.0", + "sass": "^1.100.0" } }, "node_modules/@fullhuman/postcss-purgecss": { @@ -87,6 +88,330 @@ "node": ">= 8" } }, + "node_modules/@parcel/watcher": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", + "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.6", + "@parcel/watcher-darwin-arm64": "2.5.6", + "@parcel/watcher-darwin-x64": "2.5.6", + "@parcel/watcher-freebsd-x64": "2.5.6", + "@parcel/watcher-linux-arm-glibc": "2.5.6", + "@parcel/watcher-linux-arm-musl": "2.5.6", + "@parcel/watcher-linux-arm64-glibc": "2.5.6", + "@parcel/watcher-linux-arm64-musl": "2.5.6", + "@parcel/watcher-linux-x64-glibc": "2.5.6", + "@parcel/watcher-linux-x64-musl": "2.5.6", + "@parcel/watcher-win32-arm64": "2.5.6", + "@parcel/watcher-win32-ia32": "2.5.6", + "@parcel/watcher-win32-x64": "2.5.6" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", + "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", + "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", + "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", + "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", + "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", + "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", + "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", + "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", + "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", + "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -492,6 +817,17 @@ "node": ">= 0.6.0" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -733,6 +1069,13 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz", + "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==", + "dev": true, + "license": "MIT" + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -910,6 +1253,14 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/node-releases": { "version": "2.0.36", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz", @@ -1251,6 +1602,57 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.100.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz", + "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^5.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=20.19.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz", + "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 8e9150bbb4..70cbdb8184 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.2.0", "description": "appscode.com", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "sass:watch": "sass --no-source-map --watch ./static/assets/sass/main.scss:./static/assets/sass/main.css" }, "repository": { "type": "git", @@ -18,7 +19,8 @@ "devDependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", "autoprefixer": "^10.4.27", - "postcss-cli": "^9.1.0" + "postcss-cli": "^9.1.0", + "sass": "^1.100.0" }, "private": true, "dependencies": { diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index 6153c53687..ac774763d2 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -28816,5 +28816,3 @@ body.partner .fserv-button-submit:hover { letter-spacing: -0.3px; } } - -/*# sourceMappingURL=main.css.map */ From b21102e66495325aefcd56d265ecaaafe7fdc102 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Wed, 3 Jun 2026 12:22:33 +0600 Subject: [PATCH 02/12] Update navbar dropdown styles Signed-off-by: mohin7 --- layouts/partials/header/header.html | 25 +- static/assets/js/main.js | 53 +- static/assets/sass/components/_navbar.scss | 993 ++++++++++++--------- static/assets/sass/main.css | 554 +++++++----- static/assets/sass/pages/_services.scss | 8 +- 5 files changed, 950 insertions(+), 683 deletions(-) diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index 32af660810..e739efdc9a 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -371,30 +371,23 @@

{{ $offering.title }} diff --git a/static/assets/js/main.js b/static/assets/js/main.js index 5907108137..978b70feca 100644 --- a/static/assets/js/main.js +++ b/static/assets/js/main.js @@ -1,37 +1,40 @@ // navbar area JS v.2022 start const navItems = document.querySelectorAll(".navbar-appscode .nav-item"); +const isTouchDevice = () => window.matchMedia("(max-width: 1023px)").matches; + navItems.forEach(navItem => { const item = navItem.querySelector('.link'); - item.addEventListener('click', function (el) { - // to remove active class from previously selected navItem + function openNav() { const selectedNav = document.querySelector(".nav-item.is-active"); - if (selectedNav && selectedNav !== item.parentElement) { - selectedNav.classList.toggle('is-active') + if (selectedNav && selectedNav !== navItem) { + selectedNav.classList.remove('is-active'); } + navItem.classList.add('is-active'); + } - // handle selected navItem class - const hasActiveClass = navItem.classList.contains("is-active"); - navItem.classList.toggle('is-active') - - // handle background dark-shadow of navItem - const darkBodyEl = document.querySelector(".modal-backdrop"); + function closeNav() { + navItem.classList.remove('is-active'); + } - function handleDarkBodyClickEvent(el) { - el.target.classList.remove('is-show') - const selectedNavItem = document.querySelector(".nav-item.is-active"); - selectedNavItem ? selectedNavItem.classList.toggle('is-active') : null; - } + // Desktop: hover to open/close + navItem.addEventListener('mouseenter', function () { + if (!isTouchDevice()) openNav(); + }); + navItem.addEventListener('mouseleave', function () { + if (!isTouchDevice()) closeNav(); + }); - if (hasActiveClass && darkBodyEl.classList.contains("is-show")) { - darkBodyEl.classList.toggle("is-show"); - darkBodyEl.removeEventListener('click', handleDarkBodyClickEvent); - } else if (!hasActiveClass && !darkBodyEl.classList.contains("is-show") && !!navItem.querySelector('.mega-menu-wrapper')) { - darkBodyEl.classList.toggle("is-show"); - darkBodyEl.addEventListener('click', handleDarkBodyClickEvent); + // Mobile/touch: keep click behaviour + item.addEventListener('click', function () { + if (!isTouchDevice()) return; + if (navItem.classList.contains("is-active")) { + closeNav(); + } else { + openNav(); } - }) + }); }) // mega menu active class @@ -97,11 +100,7 @@ Array.from(responsiveMenus).forEach((menu, idx) => { } } - const modalBackdropElement = document.querySelector(".modal-backdrop.is-show"); - // if modal backdrop element is visible then hide it - if (modalBackdropElement) { - modalBackdropElement.classList.remove("is-show") - } + const navItem = document.querySelector(".nav-item.is-active"); // if modal backdrop element is visible then hide it diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 90413e8172..f59b926cbf 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -1,4 +1,4 @@ -// new navbar area start +// ─── Navbar area ────────────────────────────────────────────────── .navbar-area { position: relative; z-index: 99; @@ -18,18 +18,12 @@ top: 57px; } - .navbar-left { - .navbar-brand { - a img { - height: 1.58rem; - } - } + .navbar-left .navbar-brand a img { + height: 1.58rem; } - .buttons.has-addons { - .button { - font-size: 14px; - } + .buttons.has-addons .button { + font-size: 14px; } } } @@ -38,24 +32,23 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0.5rem 1.25rem; + padding: 0 1.25rem; + height: 60px; + position: relative; &.container { - padding: 0.5rem 0; + padding: 0; .mega-menu-wrapper { - width: calc(100% + 100%); - left: -50%; - min-height: 525px; - @include touch { - min-height: auto; - } + width: auto; + left: 50%; + transform: translateX(-50%) translateY(6px); + min-height: auto; } } - .navbar-right { - .button.ac-button { - height: 40px; - } + + .navbar-right .button.ac-button { + height: 40px; } &.documentation-menu { @@ -76,25 +69,20 @@ } } - ul { - .nav-item { - .link { + ul .nav-item .link { + &.is-active { + position: relative; + z-index: 1; - &.is-active { - position: relative; - z-index: 1; - - &:after { - position: absolute; - content: ""; - left: 0; - bottom: -8px; - width: 100%; - height: 4px; - background: $ac-primary; - border-radius: 3px 3px 0 0; - } - } + &:after { + position: absolute; + content: ""; + left: 0; + bottom: -8px; + width: 100%; + height: 4px; + background: $ac-primary; + border-radius: 3px 3px 0 0; } } } @@ -129,6 +117,7 @@ .navbar-left-group { display: flex; align-items: center; + @media (min-width: 0px) and (max-width: 1023px) { align-items: flex-start; } @@ -138,25 +127,31 @@ display: flex; align-items: center; gap: 32px; + ul { display: flex; margin-left: 16px; + @include touch { margin-left: 0; } } - .buttons{ + + .buttons { iframe { transition: 0.3s ease-in-out; + &:hover { - box-shadow: 2px 4px 24px rgba(0,166,81,.3)!important; + box-shadow: 2px 4px 24px rgba(0, 166, 81, 0.3) !important; transform: translateY(-2px); } } + .button { - &:has(.tag){ + &:has(.tag) { gap: 4px; } + .tag { background-color: $ac-primary; color: $ac-white; @@ -169,8 +164,10 @@ align-items: flex-start; gap: 16px; width: 100%; - .buttons{ + + .buttons { width: 100%; + .button { width: 100%; margin-right: 0; @@ -180,10 +177,17 @@ } } + // ── Nav items ────────────────────────────────────────────────── ul { .nav-item { - margin-right: 2.5rem; + position: relative; + margin-right: 2rem; + + &:last-child { + margin-right: 0; + } + // Open state &.is-active { .link { color: $ac-primary; @@ -195,46 +199,46 @@ .mega-menu-wrapper { display: block !important; + opacity: 1 !important; + pointer-events: auto !important; + transform: translateX(-50%) translateY(0px) !important; } } - &:last-child { - margin-right: 0; - } - + // Nav trigger .link { font-size: 0.875rem; - line-height: 1; - color: $ac-color-heading; font-weight: 500; font-family: $ac-font-heading; + color: $ac-color-heading; + line-height: 1; border: none; background-color: transparent; cursor: pointer; margin: 0; - padding: 0.5rem 0; - transition: 0.3s ease-in-out; + padding: 0.75rem 0.25rem; + display: inline-flex; + align-items: center; + gap: 0.3rem; + transition: color 0.15s ease; position: relative; z-index: 1; - display: flex; - - &.is-active { - color: $ac-primary; - } + &.is-active, &:hover { color: $ac-primary; } .fa { - transition: 0.3s ease-in-out; - margin-left: 0.625rem; + transition: transform 0.2s ease; + font-size: 0.8rem; } } } } } +// ─── Whats-new badge ────────────────────────────────────────────── .whats-new { position: absolute; z-index: 1; @@ -277,200 +281,182 @@ @keyframes pulse-border { 0% { - transform: translateX(-50%) translateY(-50%) translateZ(0) - scale(1); + transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } - 100% { - transform: translateX(-50%) translateY(-50%) translateZ(0) - scale(1.5); + transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } } + .ac-grid-container { max-width: 1344px; margin: 0 auto; padding: 0 0.5rem; } -// new navbar area end - +// ─── Mega menu panel ────────────────────────────────────────────── .mega-menu-wrapper { display: none; - background: $ac-white; - position: absolute; - z-index: 9; - min-width: 300px; - padding: 1rem 0; position: absolute; - width: 100%; - left: 0; - top: 61px; + z-index: 999; + left: 50%; + top: 100%; + transform: translateX(-50%) translateY(6px); + background: $ac-white; + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05), 0 12px 40px -4px rgba(0,0,0,0.10); + padding: 1rem; + width: auto; + min-width: 600px; + max-width: 760px; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease, transform 0.2s ease; .mega-menu-inner { - overflow: hidden; + overflow: visible; - // product menu start + // ── Products grid ────────────────────────────────────────── .product-menu { - display: grid; - grid-template-columns: auto auto; - width: 60%; - float: left; + display: flex; + flex-direction: column; + gap: 4px; + min-width: 220px; + + // Two-column grid for Products dropdown + &:not(.services-grid):not(.database-list) { + display: grid; + grid-template-columns: repeat(2, minmax(200px, 1fr)); + gap: 4px; + } &.database-list { + display: grid; grid-template-columns: auto auto auto; + gap: 4px; .single-product { grid-template-columns: 40px auto 1.5rem; - width: 100%; - padding: 0.7rem; + padding: 0.6rem; .product-logo { - height: 40px; - width: 40px; + height: 36px; + width: 36px; img { - height: 1.5rem; + height: 1.3rem; } } - .navigate-icon { - .icon { - width: 1rem; - } + .navigate-icon .icon { + width: 1rem; } } } .single-product { display: grid; - grid-template-columns: 3.75rem auto 1.5rem; - padding: 1rem; + grid-template-columns: 36px 1fr 16px; align-items: center; - width: 100%; - grid-gap: 1rem; - border-radius: 0.25rem; - transition: 0.3s ease-in-out; + padding: 9px 12px; + gap: 10px; + border-radius: 8px; + border-left: 3px solid transparent; + transition: background-color 0.15s ease, border-color 0.15s ease; cursor: pointer; + text-decoration: none; + + &:hover { + background-color: #f0faf4; + + .product-logo { + background: $ac-white; + } + + .navigate-icon .icon { + opacity: 1; + visibility: visible; + } + } - &:hover, &.is-active { - background-color: #4d4dcb0d; + background-color: #f1f8f3; - .navigate-icon { - .icon { - opacity: 1; - visibility: visible; - } + .product-logo { + background: $ac-white; + } + + .navigate-icon .icon { + opacity: 1; + visibility: visible; } } .product-logo { - height: 60px; - width: 60px; + height: 36px; + width: 36px; display: flex; align-items: center; justify-content: center; - background: #e9e9fc; - border-radius: 0.25rem; + background: #e6f7ed; + border-radius: 8px; + flex-shrink: 0; + transition: background-color 0.15s ease; img { - height: 2.5rem; + height: 20px; + width: 20px; + object-fit: contain; } } .product-info { + min-width: 0; + h2 { - font-size: 1rem; - letter-spacing: 0.009rem; - color: $ac-color-heading; - font-weight: 500; + font-size: 14px; + font-weight: 600; + color: #1a2e1e; + line-height: 1.3; + letter-spacing: 0; } p { - font-size: 0.813rem; - color: #636363; - line-height: 140%; - letter-spacing: 0.025rem; + font-size: 12px; + color: #6b7280; + line-height: 1.4; + margin-top: 2px; } } .navigate-icon { - text-align: right; display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; .icon { - width: 1.2rem; + width: 14px; color: $ac-primary; opacity: 0; visibility: hidden; - transition: 0.3s ease-in-out; + transition: opacity 0.15s ease; } } } } - // product menu end - - // description start - .product-description { - margin-left: 1rem; - float: left; - border-left: 1px solid $ac-white-light; - padding-left: 4rem; - max-width: 36%; - opacity: 0; - display: none; - visibility: hidden; - transition: 0.3s ease-in-out; - animation: fadeIn 0.2s ease-in-out; - - - &.is-block { - opacity: 1; - visibility: visible; - } - - .brand { - margin-bottom: 1rem; - - img { - height: 1.5rem; - } - } - - p { - font-size: 0.875rem; - color: $ac-color-text; - line-height: 160%; - margin-bottom: 1rem; - } - - .features { - li { - font-size: 0.813rem; - color: $ac-color-heading; - display: flex; - align-items: center; - margin-bottom: 15px; - - .material-icons { - font-size: 1rem; - margin-right: 0.6rem; - color: $ac-primary; - } - } - } + // ── Product description sidebar ──────────────────────────── + .product-description:not(.offering-content) { + display: none !important; } - - // description end } } +// ─── Back button (mobile only) ──────────────────────────────────── .back-button { display: none !important; color: $ac-color-text; @@ -478,39 +464,34 @@ background-color: transparent; } -// inline button start -.button { - &.ac-button { - &.inline-button { - border: none; - height: auto; - margin: 0; - padding: 0.5rem 0; - - display: inline-flex; - align-items: center; - justify-content: flex-start; - - &:hover { - background-color: transparent; - border: none; - color: $ac-primary; +// ─── Inline button ──────────────────────────────────────────────── +.button.ac-button.inline-button { + border: none; + height: auto; + margin: 0; + padding: 0.5rem 0; + display: inline-flex; + align-items: center; + justify-content: flex-start; - .material-icons { - margin-left: 1rem; - } - } + &:hover { + background-color: transparent; + border: none; + color: $ac-primary; - .material-icons { - font-size: 1rem; - margin-left: 0.5rem; - transition: 0.3s ease-in-out; - } + .material-icons { + margin-left: 1rem; } } + + .material-icons { + font-size: 1rem; + margin-left: 0.5rem; + transition: 0.3s ease-in-out; + } } -// open source menu start +// ─── Linkable nav items ─────────────────────────────────────────── .linkable-nav-items { width: 500px; float: left; @@ -536,10 +517,8 @@ &:hover { color: $ac-primary; - span { - &:last-child { - padding-left: 1rem; - } + span:last-child { + padding-left: 1rem; } } @@ -562,19 +541,20 @@ } } +// ─── Resources list ─────────────────────────────────────────────── .resources-list { - display: grid; - grid-template-columns: auto auto auto auto; - grid-gap: 2rem; + display: flex; + flex-direction: column; .list-items { h2 { - font-weight: 500; - position: relative; - font-size: 0.875rem; - z-index: 1; - display: inline-block; - letter-spacing: 1.2px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.08em; + color: #9ca3af; + text-transform: uppercase; + margin-bottom: 12px; + padding: 0 2px; } ul { @@ -582,42 +562,43 @@ padding: 0; list-style: none; - li { - a { - font-size: 0.875rem; - padding: 0.6rem 0; - color: $ac-color-heading; - display: inline-block; - line-height: 1; - transition: 0.3s ease-in-out; - font-weight: 500; - span { - font-size: 14px; - } + li a { + font-size: 14px; + font-weight: 500; + color: $ac-color-heading; + display: flex; + align-items: center; + gap: 6px; + padding: 8px 2px; + padding-left: 0; + line-height: 1; + border-radius: 6px; + transition: color 0.15s ease, padding-left 0.15s ease; - &:hover { - color: $ac-primary; - text-decoration: underline; - } + span { + font-size: 14px; + } + + &:hover { + color: $ac-primary; + padding-left: 4px; + text-decoration: none; } } } } } +// ─── Press wrapper ──────────────────────────────────────────────── .press-wrapper { .single-press { - margin: 0; - padding: 0; - margin-bottom: 1.5rem; + margin: 0 0 1.5rem; display: flex; align-items: center; transition: 0.3s; - &:hover { - h6 { - color: $ac-primary; - } + &:hover h6 { + color: $ac-primary; } .calender { @@ -634,14 +615,13 @@ width: 84px; height: 45px; background-color: #9dffcd; - font-style: normal; font-weight: 500; font-size: 28px; line-height: 140%; letter-spacing: 0.4px; color: $ac-primary; - align-items: center; display: flex; + align-items: center; justify-content: center; } @@ -650,14 +630,13 @@ height: 45px; background: #ccffe5; font-family: Roboto; - font-style: normal; font-weight: 300; font-size: 18px; line-height: 140%; letter-spacing: 0.4px; color: $ac-primary; - align-items: center; display: flex; + align-items: center; justify-content: center; } } @@ -667,7 +646,7 @@ h6 { font-size: 1rem; - margin-bottom: 0px; + margin-bottom: 0; letter-spacing: 0; font-weight: 500; display: block; @@ -699,6 +678,7 @@ } } +// ─── Community items ────────────────────────────────────────────── .community-items { display: flex; align-items: center; @@ -729,7 +709,7 @@ } } -// responsive menu start +// ─── Responsive menu ────────────────────────────────────────────── .responsive-menu { background-color: $ac-primary; @@ -748,37 +728,30 @@ } } -// responsive menu end - -// product version style start +// ─── Product version dropdown ───────────────────────────────────── .product-version { .dropdown { - .dropdown-trigger { - .button { - font-size: 0.813rem; - width: 210px; - height: 2rem; - border-radius: 2px; - padding: 2px 15px; - color: $ac-color-heading; - border: 1px solid $ac-white-light; + .dropdown-trigger .button { + font-size: 0.813rem; + width: 210px; + height: 2rem; + border-radius: 2px; + padding: 2px 15px; + color: $ac-color-heading; + border: 1px solid $ac-white-light; - .arrow { - color: #999999; - font-size: 0.9rem; - } + .arrow { + color: #999999; + font-size: 0.9rem; } } .dropdown-menu { - /* ===== Scrollbar CSS ===== */ - /* Firefox */ * { scrollbar-width: auto; scrollbar-color: #ebebeb #fafafd; } - /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 12px; } @@ -816,18 +789,15 @@ } } -// product version style end -// navbar search start +// ─── Navbar search ──────────────────────────────────────────────── .ac-searchbar { position: relative; z-index: 1; padding: 0 20px; border-left: 1px solid $ac-white-light; - label { - .fa { - color: $ac-color-heading; - } + label .fa { + color: $ac-color-heading; } input[type="search"] { @@ -849,28 +819,14 @@ } } -// navbar search end - -// modal-backdrop start -.modal-backdrop { - &.is-show { - width: 100%; - height: 100%; - background: #333; - position: fixed; - top: 0; - opacity: 0.8; - z-index: 9; - } -} - -// modal-backdrop end +// ─── Fixed / headroom ───────────────────────────────────────────── .header--fixed { - position: fixed; + position: absolute; z-index: 10; right: 0; left: 0; top: 0; + &::after { position: absolute; content: ""; @@ -882,10 +838,9 @@ z-index: -1; transition: 0.5s ease-in-out; } - &.headroom--unpinned { - &::after { - transition: transform 500ms linear; - } + + &.headroom--unpinned::after { + transition: transform 500ms linear; } } @@ -902,28 +857,24 @@ .headroom--unpinned { transform: translateY(-165px); - .navbar-area { - &.navbar-fixed { - transform: translateY(135px); - } + .navbar-area.navbar-fixed { + transform: translateY(135px); } - .navbar-appscode-wrapper { - &.navbar-product { - transform: translateY(104px); - } + .navbar-appscode-wrapper.navbar-product { + transform: translateY(104px); } } +// ─── Navbar burger ──────────────────────────────────────────────── .navbar-burger { height: 30px; width: 30px; border-radius: 4px; - &.is-active { - i.fa { - transform: rotate(-180deg); - transform-origin: 10px; - } + + &.is-active i.fa { + transform: rotate(-180deg); + transform-origin: 10px; } span { @@ -931,28 +882,248 @@ } } -/**************************************** -Responsive Classes -*****************************************/ +// ─── Resources dropdown: narrow ─────────────────────────────────── +.nav-item:has(.resources-list) { + .mega-menu-wrapper { + min-width: 180px; + max-width: 220px; + padding: 0.75rem; + } +} + +// ─── Services dropdown ──────────────────────────────────────────── +.services-menu { + .mega-menu-wrapper { + min-width: 700px; + max-width: 840px; + padding: 0.875rem; + + .mega-menu-inner { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 0; + overflow: visible; + + // Left: category list + .product-menu.services-grid { + flex: 0 0 300px; + width: 300px; + min-width: 300px; + max-width: 300px; + display: flex !important; + flex-direction: column; + gap: 2px; + background: #f5faf7; + border-radius: 8px; + padding: 0.375rem; + overflow: hidden; + + .single-product { + display: flex !important; + flex-direction: row !important; + grid-template-columns: unset !important; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: 6px; + transition: background-color 0.13s ease, border-color 0.13s ease; + cursor: pointer; + width: 100%; + text-decoration: none; + box-sizing: border-box; + + .product-logo { + height: 40px; + width: 40px; + min-width: 40px; + max-width: 40px; + flex-shrink: 0; + background: #e0f2e9; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + color: $ac-primary; + + img { + height: 16px; + width: 16px; + object-fit: contain; + } + } + + .product-info { + flex: 1; + min-width: 0; + overflow: hidden; + + h2 { + font-size: 12.5px; + font-weight: 500; + color: #444; + line-height: 1.3; + } + + p { + display: none !important; + } + } + + .navigate-icon { + display: none !important; + } + + &:hover { + background-color: #dae6df; + + .product-info h2 { + color: $ac-color-heading; + } + } + + &.is-active { + .product-logo { + background: #c8ecd6; + } + + .product-info h2 { + font-weight: 600; + color: $ac-color-heading; + } + } + } + + @include touch { + flex: unset; + width: 100%; + min-width: unset; + max-width: unset; + background: transparent; + } + } + + // Right: offerings panel + .offering-description-container { + flex: 1; + min-width: 0; + border-left: 1px solid #e5e7eb; + margin-left: 0.625rem; + padding-left: 0.625rem; + display: flex; + flex-direction: column; + justify-content: flex-start; + + .product-description.offering-content { + display: none; + flex-direction: column; + gap: 2px; + + &.is-block { + display: flex !important; + } + + a.single-product { + display: flex !important; + flex-direction: row !important; + grid-template-columns: unset !important; + align-items: center; + padding: 8px 10px; + border-radius: 6px; + border-left: 3px solid transparent; + transition: background-color 0.13s ease; + cursor: pointer; + width: 100%; + text-decoration: none; + gap: 0; + + .product-info { + flex: 1; + min-width: 0; + + h2 { + font-size: 13px; + font-weight: 500; + color: #333; + line-height: 1.3; + display: flex; + align-items: center; + justify-content: space-between; + + .arrow-right { + opacity: 0; + transition: opacity 0.13s ease, transform 0.13s ease; + color: $ac-primary; + display: inline-flex; + flex-shrink: 0; + margin-left: 0.25rem; + + svg { + width: 13px; + height: 13px; + } + } + } + + p { + font-size: 12px; + color: #9ca3af; + margin-top: 2px; + line-height: 1.3; + } + } + + .navigate-icon { + display: none !important; + } + + &:hover { + background-color: #f0faf4; + // border-left-color: $ac-primary; + + .product-info h2 { + color: $ac-primary; + font-weight: 600; + + .arrow-right { + opacity: 1; + transform: translateX(3px); + } + } + } + } + } + } + + @include touch { + flex-direction: column; + + .offering-description-container { + border-left: none; + border-top: 1px solid #e5e7eb; + margin-left: 0; + padding-left: 0; + margin-top: 0.5rem; + padding-top: 0.5rem; + width: 100%; + } + } + } + } +} + +// ─── Responsive overrides ───────────────────────────────────────── @include touch { .headroom--unpinned { .navbar-appscode-wrapper { &.navbar-product { - padding: 0 0; + padding: 0; transform: translateY(104px); - .navbar-appscode { - .navbar-right { - top: 47px; - } + .navbar-appscode .navbar-right { + top: 47px; } } - - // .documentation-menu { - // .navbar-right { - // top: 85px !important; - // } - // } } } @@ -964,14 +1135,13 @@ Responsive Classes &.documentation-menu { margin-left: 0; padding: 0; - ul .nav-item { - .link.is-active:after { - display: none; - } + + ul .nav-item .link.is-active:after { + display: none; } + .navbar-right { position: fixed; - // top: -60px !important; width: 80%; border-right: 1px solid $ac-white-light; } @@ -984,10 +1154,8 @@ Responsive Classes margin: 0; width: 100%; - a { - img { - height: 1.5rem !important; - } + a img { + height: 1.5rem !important; } } @@ -1027,11 +1195,9 @@ Responsive Classes margin-top: 15px; } - .button.ac-button { - &.is-primary { - margin-left: 0; - width: 100%; - } + .button.ac-button.is-primary { + margin-left: 0; + width: 100%; } ul { @@ -1061,46 +1227,54 @@ Responsive Classes } .resources-list { - grid-template-columns: auto; + flex-direction: column; } .mega-menu-wrapper { width: 100% !important; left: 0 !important; top: 0 !important; - padding-top: 20px !important; + transform: none !important; + padding: 20px 15px !important; background-color: #fafafd; max-height: 75vh; min-height: 70vh; overflow-y: auto; - box-shadow: 2px 2px 2px rgba(0,0,0,.16); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16); + border-radius: 0; .mega-menu-inner { .product-menu { - grid-template-columns: auto; + grid-template-columns: 1fr !important; + display: flex !important; + flex-direction: column; width: 100%; .single-product { width: 100%; .product-logo { - height: 50px; - width: 50px; + height: 40px; + width: 40px; img { - height: 1.8rem; + height: 1.3rem; } } - .navigate-icon { - .icon { - width: 16px; - } + .navigate-icon .icon { + width: 14px; } } &.database-list { - grid-template-columns: auto; + grid-template-columns: 1fr !important; + } + + &.services-grid { + grid-template-columns: 1fr !important; + width: 100%; + background: transparent; } } @@ -1113,12 +1287,12 @@ Responsive Classes } } } - .press-wrapper { - .button.inline-button { - margin-left: 0 !important; - background-color: transparent; - } + + .press-wrapper .button.inline-button { + margin-left: 0 !important; + background-color: transparent; } + .navbar-appscode-wrapper.navbar-product { .navbar-appscode .navbar-right { top: 47px; @@ -1130,12 +1304,8 @@ Responsive Classes padding-left: 10px; } - .dropdown { - .dropdown-trigger { - .button { - width: 190px; - } - } + .dropdown .dropdown-trigger .button { + width: 190px; } .dropdown-menu { @@ -1153,15 +1323,20 @@ Responsive Classes } } } + +// ─── Embedded console button ────────────────────────────────────── .embeded-console-button { - height: 42px; - margin-bottom: 4px; - width: 185px; + height: 42px; + margin-bottom: 4px; + width: 185px; overflow: hidden; + @include mobile { width: 100%; } } + +// ─── Desktop only ───────────────────────────────────────────────── @include desktop-only { .navbar-burger { display: none !important; @@ -1172,44 +1347,40 @@ Responsive Classes margin-left: 0; border-left: none; } - .navbar-left { - .navbar-brand { - margin-right: 1rem; - } + + .navbar-left .navbar-brand { + margin-right: 1rem; } + .navbar-right { width: calc(100% - 180px); .community-items.ml-70 { margin-left: 10px !important; } + .buttons { min-width: 354px !important; } + .button.ac-button { - padding: .5rem 1rem; + padding: 0.5rem 1rem; } } + .navbar-right-group { gap: 8px !important; } - ul { - .nav-item { - margin-right: 12px; - } + + ul .nav-item { + margin-right: 12px; } } - .mega-menu-wrapper { - .mega-menu-inner { - .product-menu { - grid-template-columns: auto; - width: calc(50% - 5rem); - } - - .product-description { - border-left: none; - } + .mega-menu-wrapper .mega-menu-inner { + .product-menu:not(.services-grid) { + grid-template-columns: 1fr 1fr; + width: 100%; } .video-content { @@ -1222,26 +1393,25 @@ Responsive Classes margin-left: 4px !important; } - .dropdown { - .dropdown-trigger { - .button { - width: 180px; - padding: 2px 5px; - } - } + .dropdown .dropdown-trigger .button { + width: 180px; + padding: 2px 5px; } } } +// ─── Widescreen only ────────────────────────────────────────────── @include widescreen-only { .navbar-burger { display: none !important; } + .navbar-appscode { &.documentation-menu { margin-left: 0; border-left: none; } + .navbar-right { width: calc(100% - 180px); @@ -1250,22 +1420,15 @@ Responsive Classes } } - ul { - .nav-item { - margin-right: 1.5rem; - } + ul .nav-item { + margin-right: 1.5rem; } } - .mega-menu-wrapper { - .mega-menu-inner { - .product-menu { - grid-template-columns: auto; - width: calc(50% - 5rem); - } - .product-description { - border-left: none; - } + .mega-menu-wrapper .mega-menu-inner { + .product-menu:not(.services-grid) { + grid-template-columns: 1fr 1fr; + width: 100%; } .video-content { @@ -1274,43 +1437,9 @@ Responsive Classes } } +// ─── Full HD ────────────────────────────────────────────────────── @include fullhd { - .navbar-appscode { - .navbar-left { - .navbar-brand { - margin-right: 3rem; - } - } - } -} -.mega-menu-wrapper { - .mega-menu-inner { - .product-menu{ - &.services-grid { - grid-template-columns: 500px; - width: 500px; - background-color: #fbfbfb; - border-radius: 8px; - @include touch { - grid-template-columns: auto; - width: 100%; - .single-product { - &::after { - display: none; - } - } - } - .single-product { - padding: 0.8rem 1rem; - .product-logo { - height: 48px; - width: 48px; - img { - height: 1.5rem !important; - } - } - } - } - } + .navbar-appscode .navbar-left .navbar-brand { + margin-right: 3rem; } } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index ac774763d2..e4a97849df 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -20878,20 +20878,18 @@ Responsive Classes display: flex; align-items: center; justify-content: space-between; - padding: 0.5rem 1.25rem; + padding: 0 1.25rem; + height: 60px; + position: relative; } .navbar-appscode.container { - padding: 0.5rem 0; + padding: 0; } .navbar-appscode.container .mega-menu-wrapper { - width: 200%; - left: -50%; - min-height: 525px; -} -@media screen and (max-width: 1023px) { - .navbar-appscode.container .mega-menu-wrapper { - min-height: auto; - } + width: auto; + left: 50%; + transform: translateX(-50%) translateY(6px); + min-height: auto; } .navbar-appscode .navbar-right .button.ac-button { height: 40px; @@ -21000,7 +20998,11 @@ Responsive Classes } } .navbar-appscode ul .nav-item { - margin-right: 2.5rem; + position: relative; + margin-right: 2rem; +} +.navbar-appscode ul .nav-item:last-child { + margin-right: 0; } .navbar-appscode ul .nav-item.is-active .link { color: var(--ac-primary); @@ -21010,35 +21012,34 @@ Responsive Classes } .navbar-appscode ul .nav-item.is-active .mega-menu-wrapper { display: block !important; -} -.navbar-appscode ul .nav-item:last-child { - margin-right: 0; + opacity: 1 !important; + pointer-events: auto !important; + transform: translateX(-50%) translateY(0px) !important; } .navbar-appscode ul .nav-item .link { font-size: 0.875rem; - line-height: 1; - color: #171B1C; font-weight: 500; font-family: "Roboto", sans-serif; + color: #171B1C; + line-height: 1; border: none; background-color: transparent; cursor: pointer; margin: 0; - padding: 0.5rem 0; - transition: 0.3s ease-in-out; + padding: 0.75rem 0.25rem; + display: inline-flex; + align-items: center; + gap: 0.3rem; + transition: color 0.15s ease; position: relative; z-index: 1; - display: flex; -} -.navbar-appscode ul .nav-item .link.is-active { - color: var(--ac-primary); } -.navbar-appscode ul .nav-item .link:hover { +.navbar-appscode ul .nav-item .link.is-active, .navbar-appscode ul .nav-item .link:hover { color: var(--ac-primary); } .navbar-appscode ul .nav-item .link .fa { - transition: 0.3s ease-in-out; - margin-left: 0.625rem; + transition: transform 0.2s ease; + font-size: 0.8rem; } .whats-new { @@ -21098,137 +21099,134 @@ Responsive Classes .mega-menu-wrapper { display: none; - background: #ffffff; position: absolute; - z-index: 9; - min-width: 300px; - padding: 1rem 0; - position: absolute; - width: 100%; - left: 0; - top: 61px; + z-index: 999; + left: 50%; + top: 100%; + transform: translateX(-50%) translateY(6px); + background: #ffffff; + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 12px 40px -4px rgba(0, 0, 0, 0.1); + padding: 1rem; + width: auto; + min-width: 600px; + max-width: 760px; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease, transform 0.2s ease; } .mega-menu-wrapper .mega-menu-inner { - overflow: hidden; + overflow: visible; } .mega-menu-wrapper .mega-menu-inner .product-menu { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 220px; +} +.mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) { display: grid; - grid-template-columns: auto auto; - width: 60%; - float: left; + grid-template-columns: repeat(2, minmax(200px, 1fr)); + gap: 4px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list { + display: grid; grid-template-columns: auto auto auto; + gap: 4px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product { grid-template-columns: 40px auto 1.5rem; - width: 100%; - padding: 0.7rem; + padding: 0.6rem; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo { - height: 40px; - width: 40px; + height: 36px; + width: 36px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo img { - height: 1.5rem; + height: 1.3rem; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .navigate-icon .icon { width: 1rem; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product { display: grid; - grid-template-columns: 3.75rem auto 1.5rem; - padding: 1rem; + grid-template-columns: 36px 1fr 16px; align-items: center; - width: 100%; - grid-gap: 1rem; - border-radius: 0.25rem; - transition: 0.3s ease-in-out; + padding: 9px 12px; + gap: 10px; + border-radius: 8px; + border-left: 3px solid transparent; + transition: background-color 0.15s ease, border-color 0.15s ease; cursor: pointer; + text-decoration: none; +} +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover { + background-color: #f0faf4; +} +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo { + background: #ffffff; +} +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon { + opacity: 1; + visibility: visible; +} +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active { + background-color: #f1f8f3; } -.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active { - background-color: rgba(77, 77, 203, 0.0509803922); +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .product-logo { + background: #ffffff; } -.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .navigate-icon .icon { +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .navigate-icon .icon { opacity: 1; visibility: visible; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo { - height: 60px; - width: 60px; + height: 36px; + width: 36px; display: flex; align-items: center; justify-content: center; - background: #e9e9fc; - border-radius: 0.25rem; + background: #e6f7ed; + border-radius: 8px; + flex-shrink: 0; + transition: background-color 0.15s ease; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { - height: 2.5rem; + height: 20px; + width: 20px; + object-fit: contain; +} +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info { + min-width: 0; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 { - font-size: 1rem; - letter-spacing: 0.009rem; - color: #171B1C; - font-weight: 500; + font-size: 14px; + font-weight: 600; + color: #1a2e1e; + line-height: 1.3; + letter-spacing: 0; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p { - font-size: 0.813rem; - color: #636363; - line-height: 140%; - letter-spacing: 0.025rem; + font-size: 12px; + color: #6b7280; + line-height: 1.4; + margin-top: 2px; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon { - text-align: right; display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon .icon { - width: 1.2rem; + width: 14px; color: var(--ac-primary); opacity: 0; visibility: hidden; - transition: 0.3s ease-in-out; -} -.mega-menu-wrapper .mega-menu-inner .product-description { - margin-left: 1rem; - float: left; - border-left: 1px solid #e7e7e7; - padding-left: 4rem; - max-width: 36%; - opacity: 0; - display: none; - visibility: hidden; - transition: 0.3s ease-in-out; - animation: fadeIn 0.2s ease-in-out; -} -.mega-menu-wrapper .mega-menu-inner .product-description.is-block { - opacity: 1; - visibility: visible; -} -.mega-menu-wrapper .mega-menu-inner .product-description .brand { - margin-bottom: 1rem; -} -.mega-menu-wrapper .mega-menu-inner .product-description .brand img { - height: 1.5rem; -} -.mega-menu-wrapper .mega-menu-inner .product-description p { - font-size: 0.875rem; - color: #515D63; - line-height: 160%; - margin-bottom: 1rem; -} -.mega-menu-wrapper .mega-menu-inner .product-description .features li { - font-size: 0.813rem; - color: #171B1C; - display: flex; - align-items: center; - margin-bottom: 15px; + transition: opacity 0.15s ease; } -.mega-menu-wrapper .mega-menu-inner .product-description .features li .material-icons { - font-size: 1rem; - margin-right: 0.6rem; - color: var(--ac-primary); +.mega-menu-wrapper .mega-menu-inner .product-description:not(.offering-content) { + display: none !important; } .back-button { @@ -21303,17 +21301,17 @@ Responsive Classes } .resources-list { - display: grid; - grid-template-columns: auto auto auto auto; - grid-gap: 2rem; + display: flex; + flex-direction: column; } .resources-list .list-items h2 { - font-weight: 500; - position: relative; - font-size: 0.875rem; - z-index: 1; - display: inline-block; - letter-spacing: 1.2px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.08em; + color: #9ca3af; + text-transform: uppercase; + margin-bottom: 12px; + padding: 0 2px; } .resources-list .list-items ul { margin: 0; @@ -21321,26 +21319,29 @@ Responsive Classes list-style: none; } .resources-list .list-items ul li a { - font-size: 0.875rem; - padding: 0.6rem 0; + font-size: 14px; + font-weight: 500; color: #171B1C; - display: inline-block; + display: flex; + align-items: center; + gap: 6px; + padding: 8px 2px; + padding-left: 0; line-height: 1; - transition: 0.3s ease-in-out; - font-weight: 500; + border-radius: 6px; + transition: color 0.15s ease, padding-left 0.15s ease; } .resources-list .list-items ul li a span { font-size: 14px; } .resources-list .list-items ul li a:hover { color: var(--ac-primary); - text-decoration: underline; + padding-left: 4px; + text-decoration: none; } .press-wrapper .single-press { - margin: 0; - padding: 0; - margin-bottom: 1.5rem; + margin: 0 0 1.5rem; display: flex; align-items: center; transition: 0.3s; @@ -21362,14 +21363,13 @@ Responsive Classes width: 84px; height: 45px; background-color: #9dffcd; - font-style: normal; font-weight: 500; font-size: 28px; line-height: 140%; letter-spacing: 0.4px; color: var(--ac-primary); - align-items: center; display: flex; + align-items: center; justify-content: center; } .press-wrapper .single-press .calender .month { @@ -21377,14 +21377,13 @@ Responsive Classes height: 45px; background: #ccffe5; font-family: Roboto; - font-style: normal; font-weight: 300; font-size: 18px; line-height: 140%; letter-spacing: 0.4px; color: var(--ac-primary); - align-items: center; display: flex; + align-items: center; justify-content: center; } .press-wrapper .single-press .description { @@ -21392,7 +21391,7 @@ Responsive Classes } .press-wrapper .single-press .description h6 { font-size: 1rem; - margin-bottom: 0px; + margin-bottom: 0; letter-spacing: 0; font-weight: 500; display: block; @@ -21472,17 +21471,10 @@ Responsive Classes color: #999999; font-size: 0.9rem; } -.product-version .dropdown .dropdown-menu { - /* ===== Scrollbar CSS ===== */ - /* Firefox */ -} .product-version .dropdown .dropdown-menu * { scrollbar-width: auto; scrollbar-color: #ebebeb #fafafd; } -.product-version .dropdown .dropdown-menu { - /* Chrome, Edge, and Safari */ -} .product-version .dropdown .dropdown-menu *::-webkit-scrollbar { width: 12px; } @@ -21537,18 +21529,8 @@ Responsive Classes color: #636363; } -.modal-backdrop.is-show { - width: 100%; - height: 100%; - background: #333; - position: fixed; - top: 0; - opacity: 0.8; - z-index: 9; -} - .header--fixed { - position: fixed; + position: absolute; z-index: 10; right: 0; left: 0; @@ -21602,12 +21584,203 @@ Responsive Classes height: 1.5px; } -/**************************************** -Responsive Classes -*****************************************/ +.nav-item:has(.resources-list) .mega-menu-wrapper { + min-width: 180px; + max-width: 220px; + padding: 0.75rem; +} + +.services-menu .mega-menu-wrapper { + min-width: 700px; + max-width: 840px; + padding: 0.875rem; +} +.services-menu .mega-menu-wrapper .mega-menu-inner { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 0; + overflow: visible; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid { + flex: 0 0 300px; + width: 300px; + min-width: 300px; + max-width: 300px; + display: flex !important; + flex-direction: column; + gap: 2px; + background: #f5faf7; + border-radius: 8px; + padding: 0.375rem; + overflow: hidden; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product { + display: flex !important; + flex-direction: row !important; + grid-template-columns: unset !important; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: 6px; + transition: background-color 0.13s ease, border-color 0.13s ease; + cursor: pointer; + width: 100%; + text-decoration: none; + box-sizing: border-box; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo { + height: 40px; + width: 40px; + min-width: 40px; + max-width: 40px; + flex-shrink: 0; + background: #e0f2e9; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + color: var(--ac-primary); +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo img { + height: 16px; + width: 16px; + object-fit: contain; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info { + flex: 1; + min-width: 0; + overflow: hidden; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info h2 { + font-size: 12.5px; + font-weight: 500; + color: #444; + line-height: 1.3; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info p { + display: none !important; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .navigate-icon { + display: none !important; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover { + background-color: #dae6df; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover .product-info h2 { + color: #171B1C; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-logo { + background: #c8ecd6; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-info h2 { + font-weight: 600; + color: #171B1C; +} +@media screen and (max-width: 1023px) { + .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid { + flex: unset; + width: 100%; + min-width: unset; + max-width: unset; + background: transparent; + } +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container { + flex: 1; + min-width: 0; + border-left: 1px solid #e5e7eb; + margin-left: 0.625rem; + padding-left: 0.625rem; + display: flex; + flex-direction: column; + justify-content: flex-start; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content { + display: none; + flex-direction: column; + gap: 2px; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content.is-block { + display: flex !important; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product { + display: flex !important; + flex-direction: row !important; + grid-template-columns: unset !important; + align-items: center; + padding: 8px 10px; + border-radius: 6px; + border-left: 3px solid transparent; + transition: background-color 0.13s ease; + cursor: pointer; + width: 100%; + text-decoration: none; + gap: 0; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info { + flex: 1; + min-width: 0; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 { + font-size: 13px; + font-weight: 500; + color: #333; + line-height: 1.3; + display: flex; + align-items: center; + justify-content: space-between; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 .arrow-right { + opacity: 0; + transition: opacity 0.13s ease, transform 0.13s ease; + color: var(--ac-primary); + display: inline-flex; + flex-shrink: 0; + margin-left: 0.25rem; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 .arrow-right svg { + width: 13px; + height: 13px; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info p { + font-size: 12px; + color: #9ca3af; + margin-top: 2px; + line-height: 1.3; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .navigate-icon { + display: none !important; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover { + background-color: #f0faf4; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover .product-info h2 { + color: var(--ac-primary); + font-weight: 600; +} +.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover .product-info h2 .arrow-right { + opacity: 1; + transform: translateX(3px); +} +@media screen and (max-width: 1023px) { + .services-menu .mega-menu-wrapper .mega-menu-inner { + flex-direction: column; + } + .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container { + border-left: none; + border-top: 1px solid #e5e7eb; + margin-left: 0; + padding-left: 0; + margin-top: 0.5rem; + padding-top: 0.5rem; + width: 100%; + } +} + @media screen and (max-width: 1023px) { .headroom--unpinned .navbar-appscode-wrapper.navbar-product { - padding: 0 0; + padding: 0; transform: translateY(104px); } .headroom--unpinned .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right { @@ -21694,38 +21867,47 @@ Responsive Classes visibility: visible; } .resources-list { - grid-template-columns: auto; + flex-direction: column; } .mega-menu-wrapper { width: 100% !important; left: 0 !important; top: 0 !important; - padding-top: 20px !important; + transform: none !important; + padding: 20px 15px !important; background-color: #fafafd; max-height: 75vh; min-height: 70vh; overflow-y: auto; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16); + border-radius: 0; } .mega-menu-wrapper .mega-menu-inner .product-menu { - grid-template-columns: auto; + grid-template-columns: 1fr !important; + display: flex !important; + flex-direction: column; width: 100%; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product { width: 100%; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo { - height: 50px; - width: 50px; + height: 40px; + width: 40px; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { - height: 1.8rem; + height: 1.3rem; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon .icon { - width: 16px; + width: 14px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list { - grid-template-columns: auto; + grid-template-columns: 1fr !important; + } + .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid { + grid-template-columns: 1fr !important; + width: 100%; + background: transparent; } .mega-menu-wrapper .mega-menu-inner .product-description { border-left: none; @@ -21800,14 +21982,11 @@ Responsive Classes .navbar-appscode ul .nav-item { margin-right: 12px; } - .mega-menu-wrapper .mega-menu-inner .product-menu { - grid-template-columns: auto; - width: calc(50% - 5rem); - } - .mega-menu-wrapper .mega-menu-inner .product-description { - border-left: none; + .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid) { + grid-template-columns: 1fr 1fr; + width: 100%; } - .mega-menu-wrapper .video-content { + .mega-menu-wrapper .mega-menu-inner .video-content { display: none; } .product-version.ml-20 { @@ -21835,14 +22014,11 @@ Responsive Classes .navbar-appscode ul .nav-item { margin-right: 1.5rem; } - .mega-menu-wrapper .mega-menu-inner .product-menu { - grid-template-columns: auto; - width: calc(50% - 5rem); - } - .mega-menu-wrapper .mega-menu-inner .product-description { - border-left: none; + .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid) { + grid-template-columns: 1fr 1fr; + width: 100%; } - .mega-menu-wrapper .video-content { + .mega-menu-wrapper .mega-menu-inner .video-content { display: none; } } @@ -21851,32 +22027,6 @@ Responsive Classes margin-right: 3rem; } } -.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid { - grid-template-columns: 500px; - width: 500px; - background-color: #fbfbfb; - border-radius: 8px; -} -@media screen and (max-width: 1023px) { - .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid { - grid-template-columns: auto; - width: 100%; - } - .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product::after { - display: none; - } -} -.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product { - padding: 0.8rem 1rem; -} -.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo { - height: 48px; - width: 48px; -} -.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo img { - height: 1.5rem !important; -} - .ac-preloader { position: fixed; height: 100vh; @@ -28512,10 +28662,6 @@ body.partner .fserv-button-submit:hover { .services-menu .single-product.is-active { background-color: #ebf4f0 !important; } -.services-menu .single-product.is-active::after { - opacity: 1; - visibility: visible; -} .offering-description-container .product-info .arrow-right.icon { opacity: 0; diff --git a/static/assets/sass/pages/_services.scss b/static/assets/sass/pages/_services.scss index 793c692ae5..4b18eeab32 100644 --- a/static/assets/sass/pages/_services.scss +++ b/static/assets/sass/pages/_services.scss @@ -239,10 +239,10 @@ // .product-logo { // background-color: #f4f8f6 !important; // } - &::after { - opacity: 1; - visibility: visible; - } + // &::after { + // opacity: 1; + // visibility: visible; + // } } } } From 118628f9cb8d25c4b65003ac0e120716e07c69e5 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Wed, 3 Jun 2026 13:07:58 +0600 Subject: [PATCH 03/12] Update navbar fixed Signed-off-by: mohin7 --- hugo_stats.json | 7 +- layouts/partials/header/header.html | 85 ++++++---------- layouts/partials/menu/resource-card.html | 23 +++++ layouts/partials/menu/resources-nav.html | 63 ++++++++++++ static/assets/sass/components/_navbar.scss | 108 +++++++++++++++------ static/assets/sass/main.css | 51 +++++++++- 6 files changed, 243 insertions(+), 94 deletions(-) create mode 100644 layouts/partials/menu/resource-card.html create mode 100644 layouts/partials/menu/resources-nav.html diff --git a/hugo_stats.json b/hugo_stats.json index bf6ae223d4..314e5465c5 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -462,7 +462,6 @@ "left-sidebar", "left-sidebar-inner", "link", - "list-items", "location", "location-area", "logo-name", @@ -580,7 +579,10 @@ "resource-card", "resource-content", "resource-thumbnail", - "resources-list", + "resources-menu", + "resources-single-icon", + "resources-single-item", + "resources-single-list", "reverse-column-mobile", "reverse-row-order", "right-content", @@ -720,7 +722,6 @@ "webinar-title", "webinar-video", "whats-new", - "width-12", "width-20", "working-scenarios-section", "z-1" diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index e739efdc9a..f57a7f3a25 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -391,68 +391,39 @@

{{ $offering.title }} -
  • +
  • -
    - - -
    - -
    -

    RESOURCES

    - -
    - + + +
    + +
    + Blog +     + +
    + Docs +     + +
    + Webinars +     + +
    + Learn +     + +
    + Demos +
    - +
    • diff --git a/layouts/partials/menu/resource-card.html b/layouts/partials/menu/resource-card.html new file mode 100644 index 0000000000..f2966d2fbc --- /dev/null +++ b/layouts/partials/menu/resource-card.html @@ -0,0 +1,23 @@ +{{ $url := .url | default "#" }} +{{ $title := .title | default "" }} +{{ $desc := .desc | default "" }} +{{ $icon := .icon | default "lucide:box" }} +{{ $iconImg := .iconImg | default "" }} +{{ $external := .external | default false }} + + +
    + {{ if $iconImg }} + {{ $title }} + {{ else }} + + {{ end }} +
    +
    + {{ $title }} + {{ if $desc }}{{ $desc }}{{ end }} +
    + + + +     diff --git a/layouts/partials/menu/resources-nav.html b/layouts/partials/menu/resources-nav.html new file mode 100644 index 0000000000..c910fe9a2f --- /dev/null +++ b/layouts/partials/menu/resources-nav.html @@ -0,0 +1,63 @@ +{{ $site := .site }} + +{{ $tabs := slice + (dict "id" "blog" "title" "Blog" "desc" "Articles, tutorials & insights" "icon" "heroicons:pencil-square" "url" $site.Params.blog_url "cta" "Visit Blog" "blurb" "Stay up to date with the latest AppsCode news, product updates, and engineering deep-dives.") + (dict "id" "docs" "title" "Docs" "desc" "Guides, references & API docs" "icon" "heroicons:book-open" "url" $site.Params.docs_url "cta" "Open Docs" "blurb" "Complete documentation for all AppsCode products — setup guides, API references, and operational runbooks.") + (dict "id" "webinars" "title" "Webinars" "desc" "Live & on-demand sessions" "icon" "heroicons:video-camera" "url" "https://www.youtube.com/watch?v=4lkBt5UUEAQ&list=PLoiT1Gv2KR1hAtDDW7fHEi-s2y2H3DOgx" "cta" "Watch Webinars" "blurb" "Join live or watch on-demand webinars covering Kubernetes, databases, GitOps, and cloud-native best practices." "external" true) + (dict "id" "learn" "title" "Learn" "desc" "Hands-on learning paths" "icon" "heroicons:academic-cap" "url" $site.Params.learn_url "cta" "Start Learning" "blurb" "Structured learning paths to help your team master AppsCode tools and Kubernetes.") + (dict "id" "demos" "title" "Demos" "desc" "Tutorials, demos & walkthroughs" "icon" "heroicons:play-circle" "url" $site.Params.youtube_url "cta" "Watch on YouTube" "blurb" "Watch product demos and video walkthroughs on the AppsCode YouTube channel." "external" true) +}} + + +
    + {{ range $i, $tab := $tabs }} + +
    + +
    +
    + {{ $tab.title }} + {{ $tab.desc }} +
    +     + {{ end }} +
    + + +
    + {{ range $i, $tab := $tabs }} +
    + + +
    + {{ partial "menu/resource-card.html" (dict "url" $tab.url "title" $tab.cta "desc" $tab.blurb "icon" $tab.icon "external" (default false $tab.external)) }} +
    + + +
    +

    {{ $tab.blurb }}

    + + {{ $tab.cta }} + + +
    + +
    + {{ end }} +
    + + diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index f59b926cbf..8ebd080086 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -1,4 +1,4 @@ -// ─── Navbar area ────────────────────────────────────────────────── +// --- Navbar area --- .navbar-area { position: relative; z-index: 99; @@ -177,7 +177,7 @@ } } - // ── Nav items ────────────────────────────────────────────────── + // --- Nav items --- ul { .nav-item { position: relative; @@ -238,7 +238,7 @@ } } -// ─── Whats-new badge ────────────────────────────────────────────── +// --- Whats-new badge --- .whats-new { position: absolute; z-index: 1; @@ -297,7 +297,7 @@ padding: 0 0.5rem; } -// ─── Mega menu panel ────────────────────────────────────────────── +// --- Mega menu panel --- .mega-menu-wrapper { display: none; position: absolute; @@ -320,7 +320,7 @@ .mega-menu-inner { overflow: visible; - // ── Products grid ────────────────────────────────────────── + // --- Products grid --- .product-menu { display: flex; flex-direction: column; @@ -449,14 +449,14 @@ } } - // ── Product description sidebar ──────────────────────────── + // --- Product description sidebar --- .product-description:not(.offering-content) { display: none !important; } } } -// ─── Back button (mobile only) ──────────────────────────────────── +// --- Back button (mobile only) --- .back-button { display: none !important; color: $ac-color-text; @@ -464,7 +464,7 @@ background-color: transparent; } -// ─── Inline button ──────────────────────────────────────────────── +// --- Inline button --- .button.ac-button.inline-button { border: none; height: auto; @@ -491,7 +491,7 @@ } } -// ─── Linkable nav items ─────────────────────────────────────────── +// --- Linkable nav items --- .linkable-nav-items { width: 500px; float: left; @@ -541,7 +541,7 @@ } } -// ─── Resources list ─────────────────────────────────────────────── +// --- Resources list --- .resources-list { display: flex; flex-direction: column; @@ -589,7 +589,7 @@ } } -// ─── Press wrapper ──────────────────────────────────────────────── +// --- Press wrapper --- .press-wrapper { .single-press { margin: 0 0 1.5rem; @@ -678,7 +678,7 @@ } } -// ─── Community items ────────────────────────────────────────────── +// --- Community items --- .community-items { display: flex; align-items: center; @@ -709,7 +709,7 @@ } } -// ─── Responsive menu ────────────────────────────────────────────── +// --- Responsive menu --- .responsive-menu { background-color: $ac-primary; @@ -728,7 +728,7 @@ } } -// ─── Product version dropdown ───────────────────────────────────── +// --- Product version dropdown --- .product-version { .dropdown { .dropdown-trigger .button { @@ -789,7 +789,7 @@ } } -// ─── Navbar search ──────────────────────────────────────────────── +// --- Navbar search --- .ac-searchbar { position: relative; z-index: 1; @@ -819,9 +819,9 @@ } } -// ─── Fixed / headroom ───────────────────────────────────────────── +// --- Fixed / headroom --- .header--fixed { - position: absolute; + position: fixed; z-index: 10; right: 0; left: 0; @@ -866,7 +866,7 @@ } } -// ─── Navbar burger ──────────────────────────────────────────────── +// --- Navbar burger --- .navbar-burger { height: 30px; width: 30px; @@ -882,16 +882,66 @@ } } -// ─── Resources dropdown: narrow ─────────────────────────────────── -.nav-item:has(.resources-list) { +// --- Resources dropdown --- +.resources-menu { .mega-menu-wrapper { - min-width: 180px; - max-width: 220px; - padding: 0.75rem; + min-width: 200px; + max-width: 240px; + padding: 0.375rem; + + .mega-menu-inner { + overflow: visible; + } + } + + .resources-single-list { + display: flex; + flex-direction: column; + gap: 2px; + background: #f5faf7; + border-radius: 8px; + padding: 0.375rem; + + .resources-single-item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: 6px; + font-size: 12.5px; + font-weight: 500; + color: #444; + text-decoration: none; + transition: background-color 0.13s ease, color 0.13s ease; + cursor: pointer; + + .resources-single-icon { + height: 28px; + width: 28px; + min-width: 28px; + flex-shrink: 0; + background: #e0f2e9; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + color: $ac-primary; + transition: background-color 0.13s ease; + } + + &:hover { + background-color: #dae6df; + color: $ac-color-heading; + + .resources-single-icon { + background: #c8ecd6; + } + } + } } } -// ─── Services dropdown ──────────────────────────────────────────── +// --- Services dropdown --- .services-menu { .mega-menu-wrapper { min-width: 700px; @@ -1112,7 +1162,7 @@ } } -// ─── Responsive overrides ───────────────────────────────────────── +// --- Responsive overrides --- @include touch { .headroom--unpinned { .navbar-appscode-wrapper { @@ -1324,7 +1374,7 @@ } } -// ─── Embedded console button ────────────────────────────────────── +// --- Embedded console button --- .embeded-console-button { height: 42px; margin-bottom: 4px; @@ -1336,7 +1386,7 @@ } } -// ─── Desktop only ───────────────────────────────────────────────── +// --- Desktop only --- @include desktop-only { .navbar-burger { display: none !important; @@ -1400,7 +1450,7 @@ } } -// ─── Widescreen only ────────────────────────────────────────────── +// --- Widescreen only --- @include widescreen-only { .navbar-burger { display: none !important; @@ -1437,7 +1487,7 @@ } } -// ─── Full HD ────────────────────────────────────────────────────── +// --- Full HD --- @include fullhd { .navbar-appscode .navbar-left .navbar-brand { margin-right: 3rem; diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index e4a97849df..11819dbde4 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -21530,7 +21530,7 @@ Responsive Classes } .header--fixed { - position: absolute; + position: fixed; z-index: 10; right: 0; left: 0; @@ -21584,10 +21584,51 @@ Responsive Classes height: 1.5px; } -.nav-item:has(.resources-list) .mega-menu-wrapper { - min-width: 180px; - max-width: 220px; - padding: 0.75rem; +.resources-menu .mega-menu-wrapper { + min-width: 200px; + max-width: 240px; + padding: 0.375rem; +} +.resources-menu .mega-menu-wrapper .mega-menu-inner { + overflow: visible; +} +.resources-menu .resources-single-list { + display: flex; + flex-direction: column; + gap: 2px; +} +.resources-menu .resources-single-list .resources-single-item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: 6px; + font-size: 12.5px; + font-weight: 500; + color: #444; + text-decoration: none; + transition: background-color 0.13s ease, color 0.13s ease; + cursor: pointer; +} +.resources-menu .resources-single-list .resources-single-item .resources-single-icon { + height: 28px; + width: 28px; + min-width: 28px; + flex-shrink: 0; + background: #e0f2e9; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + color: var(--ac-primary); + transition: background-color 0.13s ease; +} +.resources-menu .resources-single-list .resources-single-item:hover { + background-color: #dae6df; + color: #171B1C; +} +.resources-menu .resources-single-list .resources-single-item:hover .resources-single-icon { + background: #c8ecd6; } .services-menu .mega-menu-wrapper { From 62dffcf28e82c676b6705662c1058b998d1b27ba Mon Sep 17 00:00:00 2001 From: mohin7 Date: Wed, 3 Jun 2026 18:52:08 +0600 Subject: [PATCH 04/12] Fix responsive desing nav Signed-off-by: mohin7 --- hugo_stats.json | 23 +- layouts/partials/header/header.html | 47 +- layouts/partials/menu/resources-nav.html | 207 +++++-- static/assets/js/main.js | 20 - static/assets/sass/components/_navbar.scss | 660 ++++++++++++++++----- static/assets/sass/main.css | 617 ++++++++++++++----- 6 files changed, 1156 insertions(+), 418 deletions(-) diff --git a/hugo_stats.json b/hugo_stats.json index 314e5465c5..dc946915cd 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -76,7 +76,6 @@ "arrow", "arrow-right", "arrows", - "back-button", "bb-1", "benefit-item", "benefits-section", @@ -356,8 +355,8 @@ "illustration-area", "image", "img", - "inline-button", "input", + "is-0", "is-1-mobile", "is-10", "is-10-tablet", @@ -578,11 +577,23 @@ "registration-form-wrapper", "resource-card", "resource-content", + "resource-menu", + "resource-menu-nav", + "resource-menu-panel", + "resource-menu-panel-footer", + "resource-menu-panels", + "resource-menu-tab", + "resource-menu-tab-desc", + "resource-menu-tab-title", + "resource-menu-view-all", + "resource-panel-card", + "resource-panel-card-desc", + "resource-panel-card-icon", + "resource-panel-card-info", + "resource-panel-card-title", + "resource-panel-cards", "resource-thumbnail", "resources-menu", - "resources-single-icon", - "resources-single-item", - "resources-single-list", "reverse-column-mobile", "reverse-row-order", "right-content", @@ -734,6 +745,8 @@ "4credit-request-and-payment-procedures", "5sla-exclusions", "ac-sign-in-button", + "acResourceNav", + "acResourcePanels", "accounts", "acknowledgement", "afbbc", diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index f57a7f3a25..3bacac652e 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -61,12 +61,6 @@
    -
    {{ range $item := $.Site.Data.config.productMenu.c0 }} @@ -316,12 +310,6 @@

    {{ $p.name }}

    -
    @@ -396,33 +384,7 @@

    {{ $offering.title }}
    - - -
    - -
    - Blog -     - -
    - Docs -     - -
    - Webinars -     - -
    - Learn -     - -
    - Demos -     -
    + {{ partial "menu/resources-nav.html" (dict "page" . "site" .Site) }}
    @@ -612,13 +574,6 @@

    {{ $offering.title }}
    -
    {{ range .Children }} diff --git a/layouts/partials/menu/resources-nav.html b/layouts/partials/menu/resources-nav.html index c910fe9a2f..76e6fd04c1 100644 --- a/layouts/partials/menu/resources-nav.html +++ b/layouts/partials/menu/resources-nav.html @@ -1,63 +1,176 @@ {{ $site := .site }} +{{/* Fetch webinar data */}} +{{ $webinars := slice }} +{{ with resources.GetRemote "https://x.appscode.com/_/playlists/PLoiT1Gv2KR1hAtDDW7fHEi-s2y2H3DOgx" }} + {{ with .Err }} + {{ warnf "webinar fetch error: %s" . }} + {{ else }} + {{ $webinars = first 4 (.Content | transform.Unmarshal) }} + {{ end }} +{{ end }} + {{ $tabs := slice - (dict "id" "blog" "title" "Blog" "desc" "Articles, tutorials & insights" "icon" "heroicons:pencil-square" "url" $site.Params.blog_url "cta" "Visit Blog" "blurb" "Stay up to date with the latest AppsCode news, product updates, and engineering deep-dives.") - (dict "id" "docs" "title" "Docs" "desc" "Guides, references & API docs" "icon" "heroicons:book-open" "url" $site.Params.docs_url "cta" "Open Docs" "blurb" "Complete documentation for all AppsCode products — setup guides, API references, and operational runbooks.") - (dict "id" "webinars" "title" "Webinars" "desc" "Live & on-demand sessions" "icon" "heroicons:video-camera" "url" "https://www.youtube.com/watch?v=4lkBt5UUEAQ&list=PLoiT1Gv2KR1hAtDDW7fHEi-s2y2H3DOgx" "cta" "Watch Webinars" "blurb" "Join live or watch on-demand webinars covering Kubernetes, databases, GitOps, and cloud-native best practices." "external" true) - (dict "id" "learn" "title" "Learn" "desc" "Hands-on learning paths" "icon" "heroicons:academic-cap" "url" $site.Params.learn_url "cta" "Start Learning" "blurb" "Structured learning paths to help your team master AppsCode tools and Kubernetes.") - (dict "id" "demos" "title" "Demos" "desc" "Tutorials, demos & walkthroughs" "icon" "heroicons:play-circle" "url" $site.Params.youtube_url "cta" "Watch on YouTube" "blurb" "Watch product demos and video walkthroughs on the AppsCode YouTube channel." "external" true) + (dict "id" "blog" "title" "Blog" "tabDesc" "Articles, tutorials & insights") + (dict "id" "docs" "title" "Docs" "tabDesc" "Guides, references & API docs") + (dict "id" "webinars" "title" "Webinars" "tabDesc" "Live & on-demand sessions") + (dict "id" "learn" "title" "Learn" "tabDesc" "Hands-on learning paths") + (dict "id" "videos" "title" "Videos" "tabDesc" "Tutorials, demos & walkthroughs") }} - -
    - {{ range $i, $tab := $tabs }} - -
    - -
    -
    - {{ $tab.title }} - {{ $tab.desc }} +
    + + {{/* Left: tabs */}} +
    +
    + {{ range $i, $tab := $tabs }} + + {{ end }}
    -     - {{ end }} -
    +
    - -
    - {{ range $i, $tab := $tabs }} -
    + {{/* Right: panels */}} +
    +
    - -
    - {{ partial "menu/resource-card.html" (dict "url" $tab.url "title" $tab.cta "desc" $tab.blurb "icon" $tab.icon "external" (default false $tab.external)) }} -
    + {{/* ── Blog ── */}} +
    +
    + +
    + +
    +
    + Engineering Blog + Deep-dives, tutorials, and product updates from the AppsCode engineering team. +
    +     +
    +
    +

    Stay up to date with guides, tutorials, and best practices.

    + + Visit the Blog + + +
    +
    - -
    -

    {{ $tab.blurb }}

    - - {{ $tab.cta }} - - -
    + {{/* ── Docs ── */}} +
    +
    + +
    + +
    +
    + Documentation Hub + Setup guides, API references, and operational runbooks for all AppsCode products. +
    +     +
    +
    +

    Everything you need to deploy and manage databases on Kubernetes.

    + + Open Docs + + +
    +
    + + {{/* ── Webinars ── */}} +
    +
    + {{ range $webinars }} + {{ $videoId := .contentDetails.videoId }} + {{ $title := .snippet.title }} + {{ $desc := .snippet.description | plainify | truncate 80 }} + +
    + +
    +
    + {{ $title | truncate 55 }} + {{ $desc }} +
    +     + {{ end }} +
    +
    +

    Tune in for live demos, deep-dives, and expert database sessions.

    + + All Webinars + + +
    +
    + + {{/* ── Learn ── */}} +
    +
    + +
    + +
    +
    + Learning Paths + Structured paths to master Kubernetes, databases, and cloud-native tools. +
    +     +
    +
    +

    Hands-on learning paths to help your team get productive with AppsCode tools.

    + + Start Learning + + +
    +
    + + {{/* ── Videos ── */}} +
    +
    + +
    + +
    +
    + YouTube Channel + Product demos, tutorials, and live session recordings on the AppsCode YouTube channel. +
    +     +
    +
    +

    Explore tutorials, product demos, and live session recordings.

    + + Watch on YouTube + + +
    +
    +
    - {{ end }} +
    diff --git a/static/assets/js/main.js b/static/assets/js/main.js index 978b70feca..7928addc84 100644 --- a/static/assets/js/main.js +++ b/static/assets/js/main.js @@ -54,16 +54,6 @@ navbarItems.forEach((navbarItem) => { }); }); -// Responsive menu back button -const backButtonAll = document.querySelectorAll(".back-button"); -// create click event for all back button -Array.from(backButtonAll).forEach((el) => { - el.addEventListener("click", () => { - // closeset nav item ancestor - const activeNavElement = el.closest(".nav-item.is-active"); - if (activeNavElement) activeNavElement.classList.remove("is-active"); - }) -}); // navbar area JS v.2022 end // responsive navbar area @@ -87,16 +77,6 @@ Array.from(responsiveMenus).forEach((menu, idx) => { // toggle active menu class toggleElement.classList.toggle(toggleClassesForResponsiveMenu[idx]); if (toggleElement.classList.contains(toggleClassesForResponsiveMenu[idx])) { - const backButtonElement = toggleElement.querySelector(".back-button"); - - function handleClick() { - toggleElement.classList.remove(toggleClassesForResponsiveMenu[idx]); - // remove event listener on back button click - backButtonElement.removeEventListener("click", handleClick); - } - - backButtonElement.addEventListener("click", handleClick); - } } diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 8ebd080086..25a0f7a603 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -41,8 +41,8 @@ .mega-menu-wrapper { width: auto; - left: 50%; - transform: translateX(-50%) translateY(6px); + left: 0; + transform: translateY(6px); min-height: auto; } } @@ -201,13 +201,13 @@ display: block !important; opacity: 1 !important; pointer-events: auto !important; - transform: translateX(-50%) translateY(0px) !important; + transform: translateX(-30%) translateY(0px) !important; } } // Nav trigger .link { - font-size: 0.875rem; + font-size: 14px; font-weight: 500; font-family: $ac-font-heading; color: $ac-color-heading; @@ -222,6 +222,7 @@ gap: 0.3rem; transition: color 0.15s ease; position: relative; + letter-spacing: -0.01em; z-index: 1; &.is-active, @@ -302,17 +303,17 @@ display: none; position: absolute; z-index: 999; - left: 50%; + left: 0; top: 100%; - transform: translateX(-50%) translateY(6px); + transform: translateX(-30%) translateY(6px); background: $ac-white; - border-radius: 12px; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05), 0 12px 40px -4px rgba(0,0,0,0.10); - padding: 1rem; + border-radius: 14px; + border: 1px solid rgba(0, 0, 0, 0.07); + box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.10), 0 24px 48px -8px rgba(0,0,0,0.08); + padding: 0.75rem; width: auto; - min-width: 600px; - max-width: 760px; + min-width: 360px; + max-width: 440px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; @@ -324,14 +325,12 @@ .product-menu { display: flex; flex-direction: column; - gap: 4px; - min-width: 220px; + gap: 2px; - // Two-column grid for Products dropdown &:not(.services-grid):not(.database-list) { - display: grid; - grid-template-columns: repeat(2, minmax(200px, 1fr)); - gap: 4px; + display: flex; + flex-direction: column; + gap: 2px; } &.database-list { @@ -340,33 +339,28 @@ gap: 4px; .single-product { - grid-template-columns: 40px auto 1.5rem; + grid-template-columns: 36px auto 1.2rem; padding: 0.6rem; .product-logo { height: 36px; width: 36px; - img { - height: 1.3rem; - } + img { height: 1.2rem; } } - .navigate-icon .icon { - width: 1rem; - } + .navigate-icon .icon { width: 1rem; } } } .single-product { display: grid; - grid-template-columns: 36px 1fr 16px; + grid-template-columns: 40px 1fr 16px; align-items: center; - padding: 9px 12px; - gap: 10px; + padding: 10px 12px; + gap: 12px; border-radius: 8px; - border-left: 3px solid transparent; - transition: background-color 0.15s ease, border-color 0.15s ease; + transition: background-color 0.13s ease; cursor: pointer; text-decoration: none; @@ -375,41 +369,30 @@ .product-logo { background: $ac-white; + box-shadow: 0 1px 6px rgba(0,0,0,0.08); } .navigate-icon .icon { opacity: 1; visibility: visible; - } - } - - &.is-active { - background-color: #f1f8f3; - - .product-logo { - background: $ac-white; - } - - .navigate-icon .icon { - opacity: 1; - visibility: visible; + transform: translate(1px, -1px); } } .product-logo { - height: 36px; - width: 36px; + height: 40px; + width: 40px; display: flex; align-items: center; justify-content: center; - background: #e6f7ed; - border-radius: 8px; + background: #edf7f1; + border-radius: 10px; flex-shrink: 0; - transition: background-color 0.15s ease; + transition: background-color 0.13s ease, box-shadow 0.13s ease; img { - height: 20px; - width: 20px; + height: 24px; + width: 24px; object-fit: contain; } } @@ -420,16 +403,16 @@ h2 { font-size: 14px; font-weight: 600; - color: #1a2e1e; + color: $ac-color-heading; line-height: 1.3; - letter-spacing: 0; + letter-spacing: -0.01em; } p { - font-size: 12px; + font-size: 14px; color: #6b7280; - line-height: 1.4; - margin-top: 2px; + line-height: 1.5; + margin-top: 4px; } } @@ -443,7 +426,7 @@ color: $ac-primary; opacity: 0; visibility: hidden; - transition: opacity 0.15s ease; + transition: opacity 0.13s ease, transform 0.13s ease; } } } @@ -456,13 +439,6 @@ } } -// --- Back button (mobile only) --- -.back-button { - display: none !important; - color: $ac-color-text; - margin-bottom: 10px !important; - background-color: transparent; -} // --- Inline button --- .button.ac-button.inline-button { @@ -822,7 +798,7 @@ // --- Fixed / headroom --- .header--fixed { position: fixed; - z-index: 10; + z-index: 9999; right: 0; left: 0; top: 0; @@ -885,56 +861,192 @@ // --- Resources dropdown --- .resources-menu { .mega-menu-wrapper { - min-width: 200px; - max-width: 240px; - padding: 0.375rem; + min-width: 860px; + max-width: 960px; + padding: 0.75rem; .mega-menu-inner { overflow: visible; } } +} - .resources-single-list { +.resource-menu { + width: 100%; + + // Left: tab list + .resource-menu-nav { display: flex; flex-direction: column; gap: 2px; + padding: 0.375rem; background: #f5faf7; border-radius: 8px; - padding: 0.375rem; + height: 100%; + } + + .resource-menu-tab { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; + padding: 0.6rem 0.75rem; + border: 1px solid transparent; + border-radius: 6px; + background: transparent; + text-align: left; + cursor: pointer; + width: 100%; + transition: background-color 0.13s ease, border-color 0.13s ease; + + .resource-menu-tab-title { + font-size: 14px; + font-weight: 600; + color: $ac-color-heading; + line-height: 1.3; + letter-spacing: -0.01em; + } + + .resource-menu-tab-desc { + font-size: 12px; + color: #6b7280; + line-height: 1.4; + } + + &:hover { + background-color: #dae6df; + } + + &.is-active { + background-color: $ac-white; + border-color: rgba(0, 166, 81, 0.15); + box-shadow: 0 1px 4px rgba(0,0,0,0.07); + + .resource-menu-tab-title { color: $ac-primary; } + } + } + + // Right: panels + .resource-menu-panels { + padding-left: 0.875rem; + border-left: 1px solid #e5e7eb; + display: flex; + flex-direction: column; + } + + .resource-menu-panel { + display: none; + flex-direction: column; + gap: 0.75rem; + height: 100%; - .resources-single-item { + &.is-active { display: flex; - align-items: center; - gap: 8px; - padding: 8px 10px; - border-radius: 6px; - font-size: 12.5px; - font-weight: 500; - color: #444; - text-decoration: none; - transition: background-color 0.13s ease, color 0.13s ease; - cursor: pointer; - - .resources-single-icon { - height: 28px; - width: 28px; - min-width: 28px; - flex-shrink: 0; - background: #e0f2e9; - border-radius: 6px; + } + + // Cards + .resource-panel-cards { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; + + .resource-panel-card { display: flex; - align-items: center; - justify-content: center; - color: $ac-primary; + align-items: flex-start; + gap: 10px; + padding: 8px 10px; + border-radius: 6px; transition: background-color 0.13s ease; + cursor: pointer; + text-decoration: none; + + &:hover { + background-color: #f0faf4; + + .resource-panel-card-icon { + background: $ac-white; + box-shadow: 0 1px 4px rgba(0,0,0,0.10); + } + + .resource-panel-card-title { + color: $ac-color-heading; + } + } + + .resource-panel-card-icon { + height: 40px; + width: 40px; + min-width: 40px; + flex-shrink: 0; + background: #edf7f1; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + color: $ac-primary; + transition: background-color 0.15s ease, box-shadow 0.15s ease; + margin-top: 0; + } + + .resource-panel-card-info { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; + + .resource-panel-card-title { + font-size: 14px; + font-weight: 600; + color: $ac-color-heading; + line-height: 1.3; + letter-spacing: -0.01em; + } + + .resource-panel-card-desc { + font-size: 12.5px; + color: #6b7280; + line-height: 1.45; + } + } } + } - &:hover { - background-color: #dae6df; - color: $ac-color-heading; + // Footer + .resource-menu-panel-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + padding-top: 0.625rem; + border-top: 1px solid #efefef; + + p { + font-size: 11.5px; + color: #888; + line-height: 1.4; + margin: 0; + flex: 1; + } - .resources-single-icon { - background: #c8ecd6; + .resource-menu-view-all { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 12px; + font-weight: 600; + color: $ac-primary; + white-space: nowrap; + text-decoration: none; + padding: 5px 10px; + border-radius: 6px; + background: #e0f2e9; + transition: background-color 0.13s ease; + flex-shrink: 0; + + &:hover { + background-color: #c8ecd6; + text-decoration: none; } } } @@ -944,8 +1056,8 @@ // --- Services dropdown --- .services-menu { .mega-menu-wrapper { - min-width: 700px; - max-width: 840px; + min-width: 860px; + max-width: 960px; padding: 0.875rem; .mega-menu-inner { @@ -989,8 +1101,8 @@ min-width: 40px; max-width: 40px; flex-shrink: 0; - background: #e0f2e9; - border-radius: 6px; + background: #edf7f1; + border-radius: 10px; display: flex; align-items: center; justify-content: center; @@ -1009,10 +1121,11 @@ overflow: hidden; h2 { - font-size: 12.5px; - font-weight: 500; - color: #444; + font-size: 13.5px; + font-weight: 600; + color: $ac-color-heading; line-height: 1.3; + letter-spacing: -0.01em; } p { @@ -1092,10 +1205,11 @@ min-width: 0; h2 { - font-size: 13px; - font-weight: 500; - color: #333; + font-size: 13.5px; + font-weight: 600; + color: $ac-color-heading; line-height: 1.3; + letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; @@ -1116,10 +1230,10 @@ } p { - font-size: 12px; - color: #9ca3af; - margin-top: 2px; - line-height: 1.3; + font-size: 12.5px; + color: #6b7280; + margin-top: 3px; + line-height: 1.4; } } @@ -1164,6 +1278,20 @@ // --- Responsive overrides --- @include touch { + .navbar-burger { + display: flex !important; + height: 36px; + width: 36px; + border-radius: 6px; + align-items: center; + justify-content: center; + cursor: pointer; + + span { + background-color: $ac-color-heading; + } + } + .headroom--unpinned { .navbar-appscode-wrapper { &.navbar-product { @@ -1197,12 +1325,27 @@ } } + // Mobile navbar bar — logo + burger on one row + &.container, + & { + height: 60px; + padding: 0 16px; + display: flex; + align-items: center; + justify-content: space-between; + background: $ac-white; + } + .navbar-left { - width: 100%; + width: auto; + flex: 1; .navbar-brand { margin: 0; width: 100%; + display: flex; + align-items: center; + justify-content: space-between; a img { height: 1.5rem !important; @@ -1218,60 +1361,172 @@ } .navbar-right { - position: absolute; - z-index: 99; - right: 20%; - opacity: 0; - visibility: hidden; - background: #fafafd; - width: 100%; + display: none; + position: fixed; + z-index: 998; + top: 100px; left: 0; - min-height: calc(100vh + 110px); + right: 0; + width: 100%; + height: calc(100vh - 60px); overflow-y: auto; - transition: 0.3s ease-in-out; - top: 61px; - padding: 15px; - justify-content: flex-start; + background: $ac-white; + padding: 20px 20px 48px; flex-direction: column; align-items: flex-start; + justify-content: flex-start; + border-top: 1px solid $ac-white-light; + gap: 0; .is-flex.is-justify-content-space-between { flex-direction: column; align-items: flex-start; + width: 100%; + gap: 0; } .is-primary.ml-8 { margin-left: 0 !important; - margin-top: 15px; + margin-top: 12px; } .button.ac-button.is-primary { margin-left: 0; width: 100%; + height: 48px; + font-size: 15px; } - ul { + // Main nav list + > .is-flex > ul, + ul.navbar-left-group { display: flex; flex-direction: column; + width: 100%; + gap: 0; + margin: 0; + padding: 0; li.nav-item { - margin: 6px 0; + width: 100%; + margin: 0; + border-bottom: 1px solid #f3f3f3; + + &:last-child { border-bottom: none; } + + .link { + display: flex; + width: 100%; + padding: 15px 4px; + font-size: 15px; + font-weight: 500; + line-height: 1.3; + justify-content: space-between; + align-items: center; + border-radius: 0; + color: $ac-color-heading; + transition: color 0.13s ease; + + &:hover { color: $ac-primary; background: transparent; } + + .fa { + font-size: 12px; + color: #9ca3af; + transition: transform 0.2s ease; + } + } + + // Dropdown opens inline + .mega-menu-wrapper { + display: none; + position: static !important; + width: calc(100% + 40px) !important; + min-width: 0 !important; + max-width: calc(100% + 40px) !important; + margin-left: -20px !important; + margin-right: -20px !important; + transform: none !important; + left: auto !important; + top: auto !important; + padding: 8px 20px 12px !important; + background: #fafafa; + box-shadow: none; + border: none; + border-top: 1px solid #f0f0f0; + border-bottom: 1px solid #f0f0f0; + border-radius: 0; + } + + &.is-active { + .link { + color: $ac-primary; + background: transparent; + + .fa { transform: rotate(-180deg); color: $ac-primary; } + } + .mega-menu-wrapper { display: block !important; } + } + } + } + + // Right group (partner, support, buttons) + .navbar-right-group { + width: 100%; + flex-direction: column; + align-items: flex-start; + gap: 0; + padding-top: 16px; + margin-top: 8px; + border-top: 1px solid #f0f0f0; + + ul { + display: flex; + flex-direction: column; + width: 100%; + gap: 0; + margin: 0 0 16px; + + li.nav-item { + border-bottom: 1px solid #f3f3f3; + + &:last-child { border-bottom: none; } + + .link { + display: flex; + width: 100%; + padding: 14px 4px; + font-size: 15px; + font-weight: 500; + border-radius: 0; + color: $ac-color-heading; + transition: color 0.13s ease; + &:hover { color: $ac-primary; background: transparent; } + } + } + } + + .buttons { + width: 100%; + flex-direction: column; + gap: 10px; - .link .whats-new { - top: -10px; - right: -30px; + iframe { width: 100%; height: 44px; } + .button.ac-button { + width: 100%; + height: 44px; + font-size: 14px; } } } .community-items.ml-70 { margin-left: 0 !important; - margin-top: 30px; + margin-top: 20px; + gap: 8px; } &.is-visible { - opacity: 1; - visibility: visible; + display: flex; } } } @@ -1281,39 +1536,69 @@ } .mega-menu-wrapper { - width: 100% !important; - left: 0 !important; - top: 0 !important; + width: calc(100% + 40px) !important; + min-width: 0 !important; + max-width: calc(100% + 40px) !important; + margin-left: -20px !important; + margin-right: -20px !important; + position: static !important; + left: auto !important; + top: auto !important; transform: none !important; - padding: 20px 15px !important; - background-color: #fafafd; - max-height: 75vh; - min-height: 70vh; - overflow-y: auto; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16); + padding: 8px 20px 8px !important; + background-color: $ac-white; + box-shadow: none; + border: none; + border-top: 1px solid $ac-white-light; + border-bottom: 1px solid $ac-white-light; border-radius: 0; + opacity: 1 !important; + pointer-events: auto !important; .mega-menu-inner { + overflow: visible; + + // Products: single column, compact cards .product-menu { - grid-template-columns: 1fr !important; display: flex !important; flex-direction: column; + gap: 2px; width: 100%; .single-product { + display: grid !important; + grid-template-columns: 40px 1fr 16px !important; width: 100%; + padding: 10px 8px; + gap: 12px; + border-radius: 8px; .product-logo { height: 40px; width: 40px; + border-radius: 10px; + background: #edf7f1 !important; - img { - height: 1.3rem; - } + img { height: 24px; width: 24px; } + } + + .product-info { + h2 { font-size: 14px; font-weight: 600; color: $ac-color-heading; } + p { font-size: 12.5px; margin-top: 2px; color: #6b7280; } } .navigate-icon .icon { + opacity: 0; + visibility: hidden; width: 14px; + color: $ac-primary; + } + + &:hover, &.is-active { + background-color: #f0faf4; + + .product-logo { background: $ac-white !important; } + .navigate-icon .icon { opacity: 1; visibility: visible; } } } @@ -1328,16 +1613,78 @@ } } + // Services: stack left + right panels + .services-menu .mega-menu-inner, + .offering-description-container, + .resources-nav-list, + .resources-detail-panel, + .resource-menu-nav, + .resource-menu-panels { + flex-direction: column !important; + width: 100% !important; + border-left: none !important; + border-top: 1px solid $ac-white-light; + margin-left: 0 !important; + padding-left: 0 !important; + margin-top: 8px; + padding-top: 8px; + } + .product-description { border-left: none; padding-left: 0; - margin-top: 35px; - margin-left: 0; + margin: 0; max-width: 100%; } } } + // Services two-panel: stack on mobile + .services-menu .mega-menu-wrapper .mega-menu-inner { + flex-direction: column !important; + + .product-menu.services-grid { + width: 100% !important; + max-width: 100% !important; + flex: unset !important; + background: #f5faf7; + margin-bottom: 8px; + } + + .offering-description-container { + border-left: none !important; + border-top: 1px solid #e5e7eb; + margin: 8px 0 0 !important; + padding: 8px 0 0 !important; + width: 100%; + } + } + + // Resources two-panel: stack on mobile + .resources-menu .mega-menu-wrapper .mega-menu-inner { + flex-direction: column !important; + + .resources-nav-list, + .resource-menu-nav { + width: 100% !important; + max-width: 100% !important; + flex: unset !important; + border-radius: 8px; + margin-bottom: 8px; + padding-left: 4px; + padding-right: 4px; + } + + .resources-detail-panel, + .resource-menu-panels { + border-left: none !important; + border-top: 1px solid #e5e7eb; + margin: 8px 0 0 !important; + padding: 8px 0 0 !important; + width: 100%; + } + } + .press-wrapper .button.inline-button { margin-left: 0 !important; background-color: transparent; @@ -1363,15 +1710,6 @@ } } - .back-button { - display: flex !important; - - span { - color: $ac-primary; - padding-right: 15px; - font-size: 18px; - } - } } // --- Embedded console button --- @@ -1428,8 +1766,9 @@ } .mega-menu-wrapper .mega-menu-inner { - .product-menu:not(.services-grid) { - grid-template-columns: 1fr 1fr; + .product-menu:not(.services-grid):not(.database-list) { + display: flex; + flex-direction: column; width: 100%; } @@ -1476,8 +1815,9 @@ } .mega-menu-wrapper .mega-menu-inner { - .product-menu:not(.services-grid) { - grid-template-columns: 1fr 1fr; + .product-menu:not(.services-grid):not(.database-list) { + display: flex; + flex-direction: column; width: 100%; } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index 11819dbde4..b805ae2a76 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -20887,8 +20887,8 @@ Responsive Classes } .navbar-appscode.container .mega-menu-wrapper { width: auto; - left: 50%; - transform: translateX(-50%) translateY(6px); + left: 0; + transform: translateY(6px); min-height: auto; } .navbar-appscode .navbar-right .button.ac-button { @@ -21014,10 +21014,10 @@ Responsive Classes display: block !important; opacity: 1 !important; pointer-events: auto !important; - transform: translateX(-50%) translateY(0px) !important; + transform: translateX(-30%) translateY(0px) !important; } .navbar-appscode ul .nav-item .link { - font-size: 0.875rem; + font-size: 14px; font-weight: 500; font-family: "Roboto", sans-serif; color: #171B1C; @@ -21032,6 +21032,7 @@ Responsive Classes gap: 0.3rem; transition: color 0.15s ease; position: relative; + letter-spacing: -0.01em; z-index: 1; } .navbar-appscode ul .nav-item .link.is-active, .navbar-appscode ul .nav-item .link:hover { @@ -21101,17 +21102,17 @@ Responsive Classes display: none; position: absolute; z-index: 999; - left: 50%; + left: 0; top: 100%; - transform: translateX(-50%) translateY(6px); + transform: translateX(-30%) translateY(6px); background: #ffffff; - border-radius: 12px; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 12px 40px -4px rgba(0, 0, 0, 0.1); - padding: 1rem; + border-radius: 14px; + border: 1px solid rgba(0, 0, 0, 0.07); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 24px 48px -8px rgba(0, 0, 0, 0.08); + padding: 0.75rem; width: auto; - min-width: 600px; - max-width: 760px; + min-width: 360px; + max-width: 440px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; @@ -21122,13 +21123,12 @@ Responsive Classes .mega-menu-wrapper .mega-menu-inner .product-menu { display: flex; flex-direction: column; - gap: 4px; - min-width: 220px; + gap: 2px; } .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) { - display: grid; - grid-template-columns: repeat(2, minmax(200px, 1fr)); - gap: 4px; + display: flex; + flex-direction: column; + gap: 2px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list { display: grid; @@ -21136,7 +21136,7 @@ Responsive Classes gap: 4px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product { - grid-template-columns: 40px auto 1.5rem; + grid-template-columns: 36px auto 1.2rem; padding: 0.6rem; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo { @@ -21144,20 +21144,19 @@ Responsive Classes width: 36px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo img { - height: 1.3rem; + height: 1.2rem; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .navigate-icon .icon { width: 1rem; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product { display: grid; - grid-template-columns: 36px 1fr 16px; + grid-template-columns: 40px 1fr 16px; align-items: center; - padding: 9px 12px; - gap: 10px; + padding: 10px 12px; + gap: 12px; border-radius: 8px; - border-left: 3px solid transparent; - transition: background-color 0.15s ease, border-color 0.15s ease; + transition: background-color 0.13s ease; cursor: pointer; text-decoration: none; } @@ -21166,35 +21165,27 @@ Responsive Classes } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo { background: #ffffff; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon { opacity: 1; visibility: visible; -} -.mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active { - background-color: #f1f8f3; -} -.mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .product-logo { - background: #ffffff; -} -.mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .navigate-icon .icon { - opacity: 1; - visibility: visible; + transform: translate(1px, -1px); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo { - height: 36px; - width: 36px; + height: 40px; + width: 40px; display: flex; align-items: center; justify-content: center; - background: #e6f7ed; - border-radius: 8px; + background: #edf7f1; + border-radius: 10px; flex-shrink: 0; - transition: background-color 0.15s ease; + transition: background-color 0.13s ease, box-shadow 0.13s ease; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { - height: 20px; - width: 20px; + height: 24px; + width: 24px; object-fit: contain; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info { @@ -21203,15 +21194,15 @@ Responsive Classes .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 { font-size: 14px; font-weight: 600; - color: #1a2e1e; + color: #171B1C; line-height: 1.3; - letter-spacing: 0; + letter-spacing: -0.01em; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p { - font-size: 12px; + font-size: 14px; color: #6b7280; - line-height: 1.4; - margin-top: 2px; + line-height: 1.5; + margin-top: 4px; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon { display: flex; @@ -21223,19 +21214,12 @@ Responsive Classes color: var(--ac-primary); opacity: 0; visibility: hidden; - transition: opacity 0.15s ease; + transition: opacity 0.13s ease, transform 0.13s ease; } .mega-menu-wrapper .mega-menu-inner .product-description:not(.offering-content) { display: none !important; } -.back-button { - display: none !important; - color: #515D63; - margin-bottom: 10px !important; - background-color: transparent; -} - .button.ac-button.inline-button { border: none; height: auto; @@ -21531,7 +21515,7 @@ Responsive Classes .header--fixed { position: fixed; - z-index: 10; + z-index: 9999; right: 0; left: 0; top: 0; @@ -21585,55 +21569,174 @@ Responsive Classes } .resources-menu .mega-menu-wrapper { - min-width: 200px; - max-width: 240px; - padding: 0.375rem; + min-width: 860px; + max-width: 960px; + padding: 0.75rem; } .resources-menu .mega-menu-wrapper .mega-menu-inner { overflow: visible; } -.resources-menu .resources-single-list { + +.resource-menu { + width: 100%; +} +.resource-menu .resource-menu-nav { display: flex; flex-direction: column; gap: 2px; + padding: 0.375rem; + background: #f5faf7; + border-radius: 8px; + height: 100%; } -.resources-menu .resources-single-list .resources-single-item { +.resource-menu .resource-menu-tab { display: flex; - align-items: center; - gap: 8px; + flex-direction: column; + align-items: flex-start; + gap: 2px; + padding: 0.6rem 0.75rem; + border: 1px solid transparent; + border-radius: 6px; + background: transparent; + text-align: left; + cursor: pointer; + width: 100%; + transition: background-color 0.13s ease, border-color 0.13s ease; +} +.resource-menu .resource-menu-tab .resource-menu-tab-title { + font-size: 14px; + font-weight: 600; + color: #171B1C; + line-height: 1.3; + letter-spacing: -0.01em; +} +.resource-menu .resource-menu-tab .resource-menu-tab-desc { + font-size: 12px; + color: #6b7280; + line-height: 1.4; +} +.resource-menu .resource-menu-tab:hover { + background-color: #dae6df; +} +.resource-menu .resource-menu-tab.is-active { + background-color: #ffffff; + border-color: rgba(0, 166, 81, 0.15); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); +} +.resource-menu .resource-menu-tab.is-active .resource-menu-tab-title { + color: var(--ac-primary); +} +.resource-menu .resource-menu-panels { + padding-left: 0.875rem; + border-left: 1px solid #e5e7eb; + display: flex; + flex-direction: column; +} +.resource-menu .resource-menu-panel { + display: none; + flex-direction: column; + gap: 0.75rem; + height: 100%; +} +.resource-menu .resource-menu-panel.is-active { + display: flex; +} +.resource-menu .resource-menu-panel .resource-panel-cards { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; +} +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card { + display: flex; + align-items: flex-start; + gap: 10px; padding: 8px 10px; border-radius: 6px; - font-size: 12.5px; - font-weight: 500; - color: #444; - text-decoration: none; - transition: background-color 0.13s ease, color 0.13s ease; + transition: background-color 0.13s ease; cursor: pointer; + text-decoration: none; } -.resources-menu .resources-single-list .resources-single-item .resources-single-icon { - height: 28px; - width: 28px; - min-width: 28px; +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card:hover { + background-color: #f0faf4; +} +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card:hover .resource-panel-card-icon { + background: #ffffff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); +} +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card:hover .resource-panel-card-title { + color: #171B1C; +} +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-icon { + height: 40px; + width: 40px; + min-width: 40px; flex-shrink: 0; - background: #e0f2e9; - border-radius: 6px; + background: #edf7f1; + border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ac-primary); - transition: background-color 0.13s ease; + transition: background-color 0.15s ease, box-shadow 0.15s ease; + margin-top: 0; } -.resources-menu .resources-single-list .resources-single-item:hover { - background-color: #dae6df; +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-info { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-info .resource-panel-card-title { + font-size: 14px; + font-weight: 600; color: #171B1C; + line-height: 1.3; + letter-spacing: -0.01em; } -.resources-menu .resources-single-list .resources-single-item:hover .resources-single-icon { - background: #c8ecd6; +.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-info .resource-panel-card-desc { + font-size: 12.5px; + color: #6b7280; + line-height: 1.45; +} +.resource-menu .resource-menu-panel .resource-menu-panel-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + padding-top: 0.625rem; + border-top: 1px solid #efefef; +} +.resource-menu .resource-menu-panel .resource-menu-panel-footer p { + font-size: 11.5px; + color: #888; + line-height: 1.4; + margin: 0; + flex: 1; +} +.resource-menu .resource-menu-panel .resource-menu-panel-footer .resource-menu-view-all { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 12px; + font-weight: 600; + color: var(--ac-primary); + white-space: nowrap; + text-decoration: none; + padding: 5px 10px; + border-radius: 6px; + background: #e0f2e9; + transition: background-color 0.13s ease; + flex-shrink: 0; +} +.resource-menu .resource-menu-panel .resource-menu-panel-footer .resource-menu-view-all:hover { + background-color: #c8ecd6; + text-decoration: none; } .services-menu .mega-menu-wrapper { - min-width: 700px; - max-width: 840px; + min-width: 860px; + max-width: 960px; padding: 0.875rem; } .services-menu .mega-menu-wrapper .mega-menu-inner { @@ -21676,8 +21779,8 @@ Responsive Classes min-width: 40px; max-width: 40px; flex-shrink: 0; - background: #e0f2e9; - border-radius: 6px; + background: #edf7f1; + border-radius: 10px; display: flex; align-items: center; justify-content: center; @@ -21694,10 +21797,11 @@ Responsive Classes overflow: hidden; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info h2 { - font-size: 12.5px; - font-weight: 500; - color: #444; + font-size: 13.5px; + font-weight: 600; + color: #171B1C; line-height: 1.3; + letter-spacing: -0.01em; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info p { display: none !important; @@ -21764,10 +21868,11 @@ Responsive Classes min-width: 0; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 { - font-size: 13px; - font-weight: 500; - color: #333; + font-size: 13.5px; + font-weight: 600; + color: #171B1C; line-height: 1.3; + letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; @@ -21785,10 +21890,10 @@ Responsive Classes height: 13px; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info p { - font-size: 12px; - color: #9ca3af; - margin-top: 2px; - line-height: 1.3; + font-size: 12.5px; + color: #6b7280; + margin-top: 3px; + line-height: 1.4; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .navigate-icon { display: none !important; @@ -21820,6 +21925,18 @@ Responsive Classes } @media screen and (max-width: 1023px) { + .navbar-burger { + display: flex !important; + height: 36px; + width: 36px; + border-radius: 6px; + align-items: center; + justify-content: center; + cursor: pointer; + } + .navbar-burger span { + background-color: #171B1C; + } .headroom--unpinned .navbar-appscode-wrapper.navbar-product { padding: 0; transform: translateY(104px); @@ -21842,12 +21959,24 @@ Responsive Classes width: 80%; border-right: 1px solid #e7e7e7; } + .navbar-appscode.container, .navbar-appscode { + height: 60px; + padding: 0 16px; + display: flex; + align-items: center; + justify-content: space-between; + background: #ffffff; + } .navbar-appscode .navbar-left { - width: 100%; + width: auto; + flex: 1; } .navbar-appscode .navbar-left .navbar-brand { margin: 0; width: 100%; + display: flex; + align-items: center; + justify-content: space-between; } .navbar-appscode .navbar-left .navbar-brand a img { height: 1.5rem !important; @@ -21859,88 +21988,250 @@ Responsive Classes visibility: hidden; } .navbar-appscode .navbar-right { - position: absolute; - z-index: 99; - right: 20%; - opacity: 0; - visibility: hidden; - background: #fafafd; - width: 100%; + display: none; + position: fixed; + z-index: 998; + top: 100px; left: 0; - min-height: calc(100vh + 110px); + right: 0; + width: 100%; + height: calc(100vh - 60px); overflow-y: auto; - transition: 0.3s ease-in-out; - top: 61px; - padding: 15px; - justify-content: flex-start; + background: #ffffff; + padding: 20px 20px 48px; flex-direction: column; align-items: flex-start; + justify-content: flex-start; + border-top: 1px solid #e7e7e7; + gap: 0; } .navbar-appscode .navbar-right .is-flex.is-justify-content-space-between { flex-direction: column; align-items: flex-start; + width: 100%; + gap: 0; } .navbar-appscode .navbar-right .is-primary.ml-8 { margin-left: 0 !important; - margin-top: 15px; + margin-top: 12px; } .navbar-appscode .navbar-right .button.ac-button.is-primary { margin-left: 0; width: 100%; + height: 48px; + font-size: 15px; } - .navbar-appscode .navbar-right ul { + .navbar-appscode .navbar-right > .is-flex > ul, + .navbar-appscode .navbar-right ul.navbar-left-group { display: flex; flex-direction: column; + width: 100%; + gap: 0; + margin: 0; + padding: 0; + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item { + width: 100%; + margin: 0; + border-bottom: 1px solid #f3f3f3; + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item:last-child, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item:last-child { + border-bottom: none; + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link { + display: flex; + width: 100%; + padding: 15px 4px; + font-size: 15px; + font-weight: 500; + line-height: 1.3; + justify-content: space-between; + align-items: center; + border-radius: 0; + color: #171B1C; + transition: color 0.13s ease; } - .navbar-appscode .navbar-right ul li.nav-item { - margin: 6px 0; + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link:hover, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link:hover { + color: var(--ac-primary); + background: transparent; } - .navbar-appscode .navbar-right ul li.nav-item .link .whats-new { - top: -10px; - right: -30px; + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link .fa, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link .fa { + font-size: 12px; + color: #9ca3af; + transition: transform 0.2s ease; + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .mega-menu-wrapper, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .mega-menu-wrapper { + display: none; + position: static !important; + width: calc(100% + 40px) !important; + min-width: 0 !important; + max-width: calc(100% + 40px) !important; + margin-left: -20px !important; + margin-right: -20px !important; + transform: none !important; + left: auto !important; + top: auto !important; + padding: 8px 20px 12px !important; + background: #fafafa; + box-shadow: none; + border: none; + border-top: 1px solid #f0f0f0; + border-bottom: 1px solid #f0f0f0; + border-radius: 0; + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .link, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item.is-active .link { + color: var(--ac-primary); + background: transparent; + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .link .fa, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item.is-active .link .fa { + transform: rotate(-180deg); + color: var(--ac-primary); + } + .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .mega-menu-wrapper, + .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item.is-active .mega-menu-wrapper { + display: block !important; + } + .navbar-appscode .navbar-right .navbar-right-group { + width: 100%; + flex-direction: column; + align-items: flex-start; + gap: 0; + padding-top: 16px; + margin-top: 8px; + border-top: 1px solid #f0f0f0; + } + .navbar-appscode .navbar-right .navbar-right-group ul { + display: flex; + flex-direction: column; + width: 100%; + gap: 0; + margin: 0 0 16px; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item { + border-bottom: 1px solid #f3f3f3; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item:last-child { + border-bottom: none; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link { + display: flex; + width: 100%; + padding: 14px 4px; + font-size: 15px; + font-weight: 500; + border-radius: 0; + color: #171B1C; + transition: color 0.13s ease; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link:hover { + color: var(--ac-primary); + background: transparent; + } + .navbar-appscode .navbar-right .navbar-right-group .buttons { + width: 100%; + flex-direction: column; + gap: 10px; + } + .navbar-appscode .navbar-right .navbar-right-group .buttons iframe { + width: 100%; + height: 44px; + } + .navbar-appscode .navbar-right .navbar-right-group .buttons .button.ac-button { + width: 100%; + height: 44px; + font-size: 14px; } .navbar-appscode .navbar-right .community-items.ml-70 { margin-left: 0 !important; - margin-top: 30px; + margin-top: 20px; + gap: 8px; } .navbar-appscode .navbar-right.is-visible { - opacity: 1; - visibility: visible; + display: flex; } .resources-list { flex-direction: column; } .mega-menu-wrapper { - width: 100% !important; - left: 0 !important; - top: 0 !important; + width: calc(100% + 40px) !important; + min-width: 0 !important; + max-width: calc(100% + 40px) !important; + margin-left: -20px !important; + margin-right: -20px !important; + position: static !important; + left: auto !important; + top: auto !important; transform: none !important; - padding: 20px 15px !important; - background-color: #fafafd; - max-height: 75vh; - min-height: 70vh; - overflow-y: auto; - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16); + padding: 8px 20px 8px !important; + background-color: #ffffff; + box-shadow: none; + border: none; + border-top: 1px solid #e7e7e7; + border-bottom: 1px solid #e7e7e7; border-radius: 0; + opacity: 1 !important; + pointer-events: auto !important; + } + .mega-menu-wrapper .mega-menu-inner { + overflow: visible; } .mega-menu-wrapper .mega-menu-inner .product-menu { - grid-template-columns: 1fr !important; display: flex !important; flex-direction: column; + gap: 2px; width: 100%; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product { + display: grid !important; + grid-template-columns: 40px 1fr 16px !important; width: 100%; + padding: 10px 8px; + gap: 12px; + border-radius: 8px; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo { height: 40px; width: 40px; + border-radius: 10px; + background: #edf7f1 !important; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { - height: 1.3rem; + height: 24px; + width: 24px; + } + .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 { + font-size: 14px; + font-weight: 600; + color: #171B1C; + } + .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p { + font-size: 12.5px; + margin-top: 2px; + color: #6b7280; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon .icon { + opacity: 0; + visibility: hidden; width: 14px; + color: var(--ac-primary); + } + .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active { + background-color: #f0faf4; + } + .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .product-logo { + background: #ffffff !important; + } + .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .navigate-icon .icon { + opacity: 1; + visibility: visible; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list { grid-template-columns: 1fr !important; @@ -21950,13 +22241,65 @@ Responsive Classes width: 100%; background: transparent; } + .mega-menu-wrapper .mega-menu-inner .services-menu .mega-menu-inner, + .mega-menu-wrapper .mega-menu-inner .offering-description-container, + .mega-menu-wrapper .mega-menu-inner .resources-nav-list, + .mega-menu-wrapper .mega-menu-inner .resources-detail-panel, + .mega-menu-wrapper .mega-menu-inner .resource-menu-nav, + .mega-menu-wrapper .mega-menu-inner .resource-menu-panels { + flex-direction: column !important; + width: 100% !important; + border-left: none !important; + border-top: 1px solid #e7e7e7; + margin-left: 0 !important; + padding-left: 0 !important; + margin-top: 8px; + padding-top: 8px; + } .mega-menu-wrapper .mega-menu-inner .product-description { border-left: none; padding-left: 0; - margin-top: 35px; - margin-left: 0; + margin: 0; max-width: 100%; } + .services-menu .mega-menu-wrapper .mega-menu-inner { + flex-direction: column !important; + } + .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid { + width: 100% !important; + max-width: 100% !important; + flex: unset !important; + background: #f5faf7; + margin-bottom: 8px; + } + .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container { + border-left: none !important; + border-top: 1px solid #e5e7eb; + margin: 8px 0 0 !important; + padding: 8px 0 0 !important; + width: 100%; + } + .resources-menu .mega-menu-wrapper .mega-menu-inner { + flex-direction: column !important; + } + .resources-menu .mega-menu-wrapper .mega-menu-inner .resources-nav-list, + .resources-menu .mega-menu-wrapper .mega-menu-inner .resource-menu-nav { + width: 100% !important; + max-width: 100% !important; + flex: unset !important; + border-radius: 8px; + margin-bottom: 8px; + padding-left: 4px; + padding-right: 4px; + } + .resources-menu .mega-menu-wrapper .mega-menu-inner .resources-detail-panel, + .resources-menu .mega-menu-wrapper .mega-menu-inner .resource-menu-panels { + border-left: none !important; + border-top: 1px solid #e5e7eb; + margin: 8px 0 0 !important; + padding: 8px 0 0 !important; + width: 100%; + } .press-wrapper .button.inline-button { margin-left: 0 !important; background-color: transparent; @@ -21973,14 +22316,6 @@ Responsive Classes .product-version .dropdown-menu { z-index: 9999; } - .back-button { - display: flex !important; - } - .back-button span { - color: var(--ac-primary); - padding-right: 15px; - font-size: 18px; - } } .embeded-console-button { height: 42px; @@ -22023,8 +22358,9 @@ Responsive Classes .navbar-appscode ul .nav-item { margin-right: 12px; } - .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid) { - grid-template-columns: 1fr 1fr; + .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) { + display: flex; + flex-direction: column; width: 100%; } .mega-menu-wrapper .mega-menu-inner .video-content { @@ -22055,8 +22391,9 @@ Responsive Classes .navbar-appscode ul .nav-item { margin-right: 1.5rem; } - .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid) { - grid-template-columns: 1fr 1fr; + .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) { + display: flex; + flex-direction: column; width: 100%; } .mega-menu-wrapper .mega-menu-inner .video-content { From d59ceb0c10ac9b5e021cff444ef9c1a3d59b42e4 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 10:18:05 +0600 Subject: [PATCH 05/12] Fix navbar resources dropdown Signed-off-by: mohin7 --- hugo_stats.json | 24 +- layouts/partials/menu/resources-nav.html | 209 ++++------------- static/assets/sass/components/_navbar.scss | 250 ++++++--------------- static/assets/sass/main.css | 201 ++++------------- 4 files changed, 163 insertions(+), 521 deletions(-) diff --git a/hugo_stats.json b/hugo_stats.json index dc946915cd..0e50dcfc9c 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -356,7 +356,6 @@ "image", "img", "input", - "is-0", "is-1-mobile", "is-10", "is-10-tablet", @@ -577,23 +576,14 @@ "registration-form-wrapper", "resource-card", "resource-content", - "resource-menu", - "resource-menu-nav", - "resource-menu-panel", - "resource-menu-panel-footer", - "resource-menu-panels", - "resource-menu-tab", - "resource-menu-tab-desc", - "resource-menu-tab-title", - "resource-menu-view-all", - "resource-panel-card", - "resource-panel-card-desc", - "resource-panel-card-icon", - "resource-panel-card-info", - "resource-panel-card-title", - "resource-panel-cards", "resource-thumbnail", "resources-menu", + "resources-single-desc", + "resources-single-icon", + "resources-single-info", + "resources-single-item", + "resources-single-list", + "resources-single-title", "reverse-column-mobile", "reverse-row-order", "right-content", @@ -745,8 +735,6 @@ "4credit-request-and-payment-procedures", "5sla-exclusions", "ac-sign-in-button", - "acResourceNav", - "acResourcePanels", "accounts", "acknowledgement", "afbbc", diff --git a/layouts/partials/menu/resources-nav.html b/layouts/partials/menu/resources-nav.html index 76e6fd04c1..a4c43b0142 100644 --- a/layouts/partials/menu/resources-nav.html +++ b/layouts/partials/menu/resources-nav.html @@ -1,176 +1,55 @@ {{ $site := .site }} -{{/* Fetch webinar data */}} -{{ $webinars := slice }} -{{ with resources.GetRemote "https://x.appscode.com/_/playlists/PLoiT1Gv2KR1hAtDDW7fHEi-s2y2H3DOgx" }} - {{ with .Err }} - {{ warnf "webinar fetch error: %s" . }} - {{ else }} - {{ $webinars = first 4 (.Content | transform.Unmarshal) }} - {{ end }} -{{ end }} +
    -{{ $tabs := slice - (dict "id" "blog" "title" "Blog" "tabDesc" "Articles, tutorials & insights") - (dict "id" "docs" "title" "Docs" "tabDesc" "Guides, references & API docs") - (dict "id" "webinars" "title" "Webinars" "tabDesc" "Live & on-demand sessions") - (dict "id" "learn" "title" "Learn" "tabDesc" "Hands-on learning paths") - (dict "id" "videos" "title" "Videos" "tabDesc" "Tutorials, demos & walkthroughs") -}} - -
    - - {{/* Left: tabs */}} -
    -
    - {{ range $i, $tab := $tabs }} - - {{ end }} + +
    +
    -
    - - {{/* Right: panels */}} -
    -
    - - {{/* ── Blog ── */}} -
    -
    - -
    - -
    -
    - Engineering Blog - Deep-dives, tutorials, and product updates from the AppsCode engineering team. -
    -     -
    -
    -

    Stay up to date with guides, tutorials, and best practices.

    - - Visit the Blog - - -
    -
    - - {{/* ── Docs ── */}} -
    -
    - -
    - -
    -
    - Documentation Hub - Setup guides, API references, and operational runbooks for all AppsCode products. -
    -     -
    -
    -

    Everything you need to deploy and manage databases on Kubernetes.

    - - Open Docs - - -
    -
    +
    + Blog + Articles, tutorials & insights +
    + - {{/* ── Webinars ── */}} -
    -
    - {{ range $webinars }} - {{ $videoId := .contentDetails.videoId }} - {{ $title := .snippet.title }} - {{ $desc := .snippet.description | plainify | truncate 80 }} - -
    - -
    -
    - {{ $title | truncate 55 }} - {{ $desc }} -
    -     - {{ end }} -
    -
    -

    Tune in for live demos, deep-dives, and expert database sessions.

    - - All Webinars - - -
    -
    + +
    + +
    +
    + Docs + Guides, references & API docs +
    +     - {{/* ── Learn ── */}} -
    -
    - -
    - -
    -
    - Learning Paths - Structured paths to master Kubernetes, databases, and cloud-native tools. -
    -     -
    -
    -

    Hands-on learning paths to help your team get productive with AppsCode tools.

    - - Start Learning - - -
    -
    + +
    + +
    +
    + Webinars + Live & on-demand sessions +
    +     - {{/* ── Videos ── */}} -
    -
    - -
    - -
    -
    - YouTube Channel - Product demos, tutorials, and live session recordings on the AppsCode YouTube channel. -
    -     -
    -
    -

    Explore tutorials, product demos, and live session recordings.

    - - Watch on YouTube - - -
    -
    + +
    + +
    +
    + Learn + Hands-on learning paths +
    +     + +
    + +
    +
    + Videos + Tutorials, demos & walkthroughs
    -
    +
    - - diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 25a0f7a603..7be7b118f7 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -312,8 +312,8 @@ box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.10), 0 24px 48px -8px rgba(0,0,0,0.08); padding: 0.75rem; width: auto; - min-width: 360px; - max-width: 440px; + min-width: 420px; + max-width: 450px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; @@ -355,11 +355,11 @@ .single-product { display: grid; - grid-template-columns: 40px 1fr 16px; + grid-template-columns: 32px 1fr 14px; align-items: center; - padding: 10px 12px; - gap: 12px; - border-radius: 8px; + padding: 7px 10px; + gap: 10px; + border-radius: 7px; transition: background-color 0.13s ease; cursor: pointer; text-decoration: none; @@ -369,7 +369,7 @@ .product-logo { background: $ac-white; - box-shadow: 0 1px 6px rgba(0,0,0,0.08); + box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .navigate-icon .icon { @@ -380,19 +380,19 @@ } .product-logo { - height: 40px; - width: 40px; + height: 32px; + width: 32px; display: flex; align-items: center; justify-content: center; background: #edf7f1; - border-radius: 10px; + border-radius: 7px; flex-shrink: 0; transition: background-color 0.13s ease, box-shadow 0.13s ease; img { - height: 24px; - width: 24px; + height: 18px; + width: 18px; object-fit: contain; } } @@ -401,18 +401,18 @@ min-width: 0; h2 { - font-size: 14px; + font-size: 13px; font-weight: 600; color: $ac-color-heading; - line-height: 1.3; + line-height: 1.25; letter-spacing: -0.01em; } p { - font-size: 14px; + font-size: 13px; color: #6b7280; - line-height: 1.5; - margin-top: 4px; + line-height: 1.4; + margin-top: 2px; } } @@ -861,193 +861,71 @@ // --- Resources dropdown --- .resources-menu { .mega-menu-wrapper { - min-width: 860px; - max-width: 960px; - padding: 0.75rem; - - .mega-menu-inner { - overflow: visible; - } + min-width: 260px; + max-width: 320px; + padding: 0.375rem; } } -.resource-menu { - width: 100%; - - // Left: tab list - .resource-menu-nav { - display: flex; - flex-direction: column; - gap: 2px; - padding: 0.375rem; - background: #f5faf7; - border-radius: 8px; - height: 100%; - } +.resources-single-list { + display: flex; + flex-direction: column; + gap: 2px; + background: #f5faf7; + border-radius: 8px; + padding: 0.375rem; - .resource-menu-tab { + .resources-single-item { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; - padding: 0.6rem 0.75rem; - border: 1px solid transparent; + align-items: center; + gap: 10px; + padding: 9px 10px; border-radius: 6px; - background: transparent; - text-align: left; + text-decoration: none; cursor: pointer; + transition: background-color 0.13s ease; width: 100%; - transition: background-color 0.13s ease, border-color 0.13s ease; - - .resource-menu-tab-title { - font-size: 14px; - font-weight: 600; - color: $ac-color-heading; - line-height: 1.3; - letter-spacing: -0.01em; - } - - .resource-menu-tab-desc { - font-size: 12px; - color: #6b7280; - line-height: 1.4; - } - - &:hover { - background-color: #dae6df; - } - - &.is-active { - background-color: $ac-white; - border-color: rgba(0, 166, 81, 0.15); - box-shadow: 0 1px 4px rgba(0,0,0,0.07); - - .resource-menu-tab-title { color: $ac-primary; } - } - } - - // Right: panels - .resource-menu-panels { - padding-left: 0.875rem; - border-left: 1px solid #e5e7eb; - display: flex; - flex-direction: column; - } - - .resource-menu-panel { - display: none; - flex-direction: column; - gap: 0.75rem; - height: 100%; - - &.is-active { + box-sizing: border-box; + + .resources-single-icon { + height: 32px; + width: 32px; + min-width: 32px; + flex-shrink: 0; + background: #e0f2e9; + border-radius: 6px; display: flex; + align-items: center; + justify-content: center; + color: $ac-primary; + transition: background-color 0.13s ease; } - // Cards - .resource-panel-cards { + .resources-single-info { display: flex; flex-direction: column; - gap: 2px; - flex: 1; - - .resource-panel-card { - display: flex; - align-items: flex-start; - gap: 10px; - padding: 8px 10px; - border-radius: 6px; - transition: background-color 0.13s ease; - cursor: pointer; - text-decoration: none; + gap: 1px; + min-width: 0; - &:hover { - background-color: #f0faf4; - - .resource-panel-card-icon { - background: $ac-white; - box-shadow: 0 1px 4px rgba(0,0,0,0.10); - } - - .resource-panel-card-title { - color: $ac-color-heading; - } - } - - .resource-panel-card-icon { - height: 40px; - width: 40px; - min-width: 40px; - flex-shrink: 0; - background: #edf7f1; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - color: $ac-primary; - transition: background-color 0.15s ease, box-shadow 0.15s ease; - margin-top: 0; - } - - .resource-panel-card-info { - display: flex; - flex-direction: column; - gap: 2px; - min-width: 0; - - .resource-panel-card-title { - font-size: 14px; - font-weight: 600; - color: $ac-color-heading; - line-height: 1.3; - letter-spacing: -0.01em; - } - - .resource-panel-card-desc { - font-size: 12.5px; - color: #6b7280; - line-height: 1.45; - } - } + .resources-single-title { + font-size: 13px; + font-weight: 600; + color: $ac-color-heading; + line-height: 1.3; } - } - // Footer - .resource-menu-panel-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - padding-top: 0.625rem; - border-top: 1px solid #efefef; - - p { + .resources-single-desc { font-size: 11.5px; - color: #888; - line-height: 1.4; - margin: 0; - flex: 1; + color: #6b7280; + line-height: 1.3; } + } - .resource-menu-view-all { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 12px; - font-weight: 600; - color: $ac-primary; - white-space: nowrap; - text-decoration: none; - padding: 5px 10px; - border-radius: 6px; - background: #e0f2e9; - transition: background-color 0.13s ease; - flex-shrink: 0; + &:hover { + background-color: #dae6df; - &:hover { - background-color: #c8ecd6; - text-decoration: none; - } + .resources-single-icon { + background: #c8ecd6; } } } @@ -1121,7 +999,7 @@ overflow: hidden; h2 { - font-size: 13.5px; + font-size: 13px; font-weight: 600; color: $ac-color-heading; line-height: 1.3; @@ -1205,7 +1083,7 @@ min-width: 0; h2 { - font-size: 13.5px; + font-size: 13px; font-weight: 600; color: $ac-color-heading; line-height: 1.3; diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index b805ae2a76..eca9c059e2 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -21111,8 +21111,8 @@ Responsive Classes box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 24px 48px -8px rgba(0, 0, 0, 0.08); padding: 0.75rem; width: auto; - min-width: 360px; - max-width: 440px; + min-width: 420px; + max-width: 450px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; @@ -21151,11 +21151,11 @@ Responsive Classes } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product { display: grid; - grid-template-columns: 40px 1fr 16px; + grid-template-columns: 32px 1fr 14px; align-items: center; - padding: 10px 12px; - gap: 12px; - border-radius: 8px; + padding: 7px 10px; + gap: 10px; + border-radius: 7px; transition: background-color 0.13s ease; cursor: pointer; text-decoration: none; @@ -21165,7 +21165,7 @@ Responsive Classes } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo { background: #ffffff; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon { opacity: 1; @@ -21173,36 +21173,36 @@ Responsive Classes transform: translate(1px, -1px); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo { - height: 40px; - width: 40px; + height: 32px; + width: 32px; display: flex; align-items: center; justify-content: center; background: #edf7f1; - border-radius: 10px; + border-radius: 7px; flex-shrink: 0; transition: background-color 0.13s ease, box-shadow 0.13s ease; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { - height: 24px; - width: 24px; + height: 18px; + width: 18px; object-fit: contain; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info { min-width: 0; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 { - font-size: 14px; + font-size: 13px; font-weight: 600; color: #171B1C; - line-height: 1.3; + line-height: 1.25; letter-spacing: -0.01em; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p { - font-size: 14px; + font-size: 13px; color: #6b7280; - line-height: 1.5; - margin-top: 4px; + line-height: 1.4; + margin-top: 2px; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon { display: flex; @@ -21569,169 +21569,66 @@ Responsive Classes } .resources-menu .mega-menu-wrapper { - min-width: 860px; - max-width: 960px; - padding: 0.75rem; -} -.resources-menu .mega-menu-wrapper .mega-menu-inner { - overflow: visible; + min-width: 260px; + max-width: 320px; + padding: 0.375rem; } -.resource-menu { - width: 100%; -} -.resource-menu .resource-menu-nav { +.resources-single-list { display: flex; flex-direction: column; gap: 2px; - padding: 0.375rem; background: #f5faf7; border-radius: 8px; - height: 100%; -} -.resource-menu .resource-menu-tab { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; - padding: 0.6rem 0.75rem; - border: 1px solid transparent; - border-radius: 6px; - background: transparent; - text-align: left; - cursor: pointer; - width: 100%; - transition: background-color 0.13s ease, border-color 0.13s ease; -} -.resource-menu .resource-menu-tab .resource-menu-tab-title { - font-size: 14px; - font-weight: 600; - color: #171B1C; - line-height: 1.3; - letter-spacing: -0.01em; -} -.resource-menu .resource-menu-tab .resource-menu-tab-desc { - font-size: 12px; - color: #6b7280; - line-height: 1.4; -} -.resource-menu .resource-menu-tab:hover { - background-color: #dae6df; -} -.resource-menu .resource-menu-tab.is-active { - background-color: #ffffff; - border-color: rgba(0, 166, 81, 0.15); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); -} -.resource-menu .resource-menu-tab.is-active .resource-menu-tab-title { - color: var(--ac-primary); -} -.resource-menu .resource-menu-panels { - padding-left: 0.875rem; - border-left: 1px solid #e5e7eb; - display: flex; - flex-direction: column; -} -.resource-menu .resource-menu-panel { - display: none; - flex-direction: column; - gap: 0.75rem; - height: 100%; -} -.resource-menu .resource-menu-panel.is-active { - display: flex; -} -.resource-menu .resource-menu-panel .resource-panel-cards { - display: flex; - flex-direction: column; - gap: 2px; - flex: 1; + padding: 0.375rem; } -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card { +.resources-single-list .resources-single-item { display: flex; - align-items: flex-start; + align-items: center; gap: 10px; - padding: 8px 10px; + padding: 9px 10px; border-radius: 6px; - transition: background-color 0.13s ease; - cursor: pointer; text-decoration: none; + cursor: pointer; + transition: background-color 0.13s ease; + width: 100%; + box-sizing: border-box; } -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card:hover { - background-color: #f0faf4; -} -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card:hover .resource-panel-card-icon { - background: #ffffff; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); -} -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card:hover .resource-panel-card-title { - color: #171B1C; -} -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-icon { - height: 40px; - width: 40px; - min-width: 40px; +.resources-single-list .resources-single-item .resources-single-icon { + height: 32px; + width: 32px; + min-width: 32px; flex-shrink: 0; - background: #edf7f1; - border-radius: 10px; + background: #e0f2e9; + border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ac-primary); - transition: background-color 0.15s ease, box-shadow 0.15s ease; - margin-top: 0; + transition: background-color 0.13s ease; } -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-info { +.resources-single-list .resources-single-item .resources-single-info { display: flex; flex-direction: column; - gap: 2px; + gap: 1px; min-width: 0; } -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-info .resource-panel-card-title { - font-size: 14px; +.resources-single-list .resources-single-item .resources-single-info .resources-single-title { + font-size: 13px; font-weight: 600; color: #171B1C; line-height: 1.3; - letter-spacing: -0.01em; } -.resource-menu .resource-menu-panel .resource-panel-cards .resource-panel-card .resource-panel-card-info .resource-panel-card-desc { - font-size: 12.5px; - color: #6b7280; - line-height: 1.45; -} -.resource-menu .resource-menu-panel .resource-menu-panel-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - padding-top: 0.625rem; - border-top: 1px solid #efefef; -} -.resource-menu .resource-menu-panel .resource-menu-panel-footer p { +.resources-single-list .resources-single-item .resources-single-info .resources-single-desc { font-size: 11.5px; - color: #888; - line-height: 1.4; - margin: 0; - flex: 1; + color: #6b7280; + line-height: 1.3; } -.resource-menu .resource-menu-panel .resource-menu-panel-footer .resource-menu-view-all { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 12px; - font-weight: 600; - color: var(--ac-primary); - white-space: nowrap; - text-decoration: none; - padding: 5px 10px; - border-radius: 6px; - background: #e0f2e9; - transition: background-color 0.13s ease; - flex-shrink: 0; +.resources-single-list .resources-single-item:hover { + background-color: #dae6df; } -.resource-menu .resource-menu-panel .resource-menu-panel-footer .resource-menu-view-all:hover { - background-color: #c8ecd6; - text-decoration: none; +.resources-single-list .resources-single-item:hover .resources-single-icon { + background: #c8ecd6; } .services-menu .mega-menu-wrapper { @@ -21797,7 +21694,7 @@ Responsive Classes overflow: hidden; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info h2 { - font-size: 13.5px; + font-size: 13px; font-weight: 600; color: #171B1C; line-height: 1.3; @@ -21868,7 +21765,7 @@ Responsive Classes min-width: 0; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 { - font-size: 13.5px; + font-size: 13px; font-weight: 600; color: #171B1C; line-height: 1.3; From ac838c7ee7346403c88a4dce07dbc5484346677a Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 11:11:42 +0600 Subject: [PATCH 06/12] Remove refactor scss Signed-off-by: mohin7 --- hugo_stats.json | 7 - layouts/partials/header/header.html | 16 +- layouts/partials/menu/resources-nav.html | 87 +++-- static/assets/sass/components/_navbar.scss | 390 +++------------------ static/assets/sass/main.css | 324 +++-------------- 5 files changed, 159 insertions(+), 665 deletions(-) diff --git a/hugo_stats.json b/hugo_stats.json index 0e50dcfc9c..d07fcc51f7 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -438,7 +438,6 @@ "is-services", "is-shadowless", "is-show", - "is-size-6", "is-size-7", "is-small", "is-sticky", @@ -578,12 +577,6 @@ "resource-content", "resource-thumbnail", "resources-menu", - "resources-single-desc", - "resources-single-icon", - "resources-single-info", - "resources-single-item", - "resources-single-list", - "resources-single-title", "reverse-column-mobile", "reverse-row-order", "right-content", diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index 3bacac652e..44b15500ab 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -72,7 +72,7 @@ {{ $p.icon.alt }}
    -

    {{ $p.name }} +

    {{ $p.name }} {{ if eq ($p.name) "KubeStash" }} New {{ end }} @@ -97,7 +97,7 @@

    {{ $p.name }} {{ $p.icon.alt }}

    -

    {{ $p.name }}

    +

    {{ $p.name }}

    {{ $p.tagline | plainify }}

    @@ -118,7 +118,7 @@

    {{ $p.name }}

    {{ $p.icon.alt }}
    -

    {{ $p.name }}

    +

    {{ $p.name }}

    {{ $p.tagline | plainify }}

    @@ -139,7 +139,7 @@

    {{ $p.name }}

    {{ $p.icon.alt }}
    -

    {{ $p.name }}

    +

    {{ $p.name }}

    {{ $p.tagline | plainify }}

    @@ -319,7 +319,7 @@

    {{ $p.name }}

    -

    {{ $service.title }}

    +

    {{ $service.title }}

    {{ $service.description }}

    -

    {{ $offering.title }} +

    {{ $offering.title }}

    {{ $offering.description }}

    @@ -389,9 +389,9 @@

    {{ $offering.title }}

    -
  • + diff --git a/layouts/partials/menu/resources-nav.html b/layouts/partials/menu/resources-nav.html index a4c43b0142..45cf1c21f7 100644 --- a/layouts/partials/menu/resources-nav.html +++ b/layouts/partials/menu/resources-nav.html @@ -1,54 +1,79 @@ {{ $site := .site }} -
    +
    - -
    - + + -
    - Blog - Articles, tutorials & insights +
    +

    Blog

    +

    Articles, tutorials & insights

    +
    +
    + + +
    - -
    - + + +
    +

    Docs

    +

    Guides, references & API docs

    -
    - Docs - Guides, references & API docs +
    + + +
    - -
    - + + +
    +

    Webinars

    +

    Live & on-demand sessions

    -
    - Webinars - Live & on-demand sessions +
    + + +
    - -
    - + + -
    - Learn - Hands-on learning paths +
    +

    Learn

    +

    Hands-on learning paths

    +
    +
    + + +
    - -
    - + + +
    +

    Videos

    +

    Tutorials, demos & walkthroughs

    -
    - Videos - Tutorials, demos & walkthroughs +
    + + +
    diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 7be7b118f7..0df67ab628 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -23,7 +23,7 @@ } .buttons.has-addons .button { - font-size: 14px; + font-size: $font-size-normal; } } } @@ -207,7 +207,7 @@ // Nav trigger .link { - font-size: 14px; + font-size: $font-size-normal; font-weight: 500; font-family: $ac-font-heading; color: $ac-color-heading; @@ -232,7 +232,7 @@ .fa { transition: transform 0.2s ease; - font-size: 0.8rem; + font-size: $font-size-extra-small; } } } @@ -312,8 +312,8 @@ box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.10), 0 24px 48px -8px rgba(0,0,0,0.08); padding: 0.75rem; width: auto; - min-width: 420px; - max-width: 450px; + min-width: 380px; + max-width: 420px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; @@ -339,7 +339,7 @@ gap: 4px; .single-product { - grid-template-columns: 36px auto 1.2rem; + grid-template-columns: 40px auto 1.2rem; padding: 0.6rem; .product-logo { @@ -355,11 +355,11 @@ .single-product { display: grid; - grid-template-columns: 32px 1fr 14px; + grid-template-columns: 40px 1fr 14px; align-items: center; - padding: 7px 10px; + padding: 8px 10px; gap: 10px; - border-radius: 7px; + border-radius: 6px; transition: background-color 0.13s ease; cursor: pointer; text-decoration: none; @@ -380,28 +380,33 @@ } .product-logo { - height: 32px; - width: 32px; + height: 40px; + width: 40px; display: flex; align-items: center; justify-content: center; background: #edf7f1; - border-radius: 7px; + border-radius: 8px; flex-shrink: 0; + color: $ac-primary; transition: background-color 0.13s ease, box-shadow 0.13s ease; img { - height: 18px; - width: 18px; + height: 20px; + width: 20px; object-fit: contain; } + + iconify-icon { + display: flex; + } } .product-info { min-width: 0; h2 { - font-size: 13px; + font-size: $font-size-semi-normal; font-weight: 600; color: $ac-color-heading; line-height: 1.25; @@ -409,8 +414,8 @@ } p { - font-size: 13px; - color: #6b7280; + font-size: $font-size-extra-small; + color: $color-text-muted; line-height: 1.4; margin-top: 2px; } @@ -467,192 +472,6 @@ } } -// --- Linkable nav items --- -.linkable-nav-items { - width: 500px; - float: left; - - ul { - display: grid; - grid-template-columns: auto auto; - grid-gap: 0.5rem; - - li { - width: 250px; - - a { - display: inline-flex; - align-items: center; - font-size: 0.875rem; - letter-spacing: 0.009rem; - color: $ac-color-heading; - font-weight: 500; - transition: 0.3s; - padding-left: 0; - - &:hover { - color: $ac-primary; - - span:last-child { - padding-left: 1rem; - } - } - - span { - display: flex; - align-items: center; - font-size: 1rem; - - &:last-child { - padding-left: 0.5rem; - } - - img { - height: 1rem; - margin-right: 1rem; - } - } - } - } - } -} - -// --- Resources list --- -.resources-list { - display: flex; - flex-direction: column; - - .list-items { - h2 { - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - color: #9ca3af; - text-transform: uppercase; - margin-bottom: 12px; - padding: 0 2px; - } - - ul { - margin: 0; - padding: 0; - list-style: none; - - li a { - font-size: 14px; - font-weight: 500; - color: $ac-color-heading; - display: flex; - align-items: center; - gap: 6px; - padding: 8px 2px; - padding-left: 0; - line-height: 1; - border-radius: 6px; - transition: color 0.15s ease, padding-left 0.15s ease; - - span { - font-size: 14px; - } - - &:hover { - color: $ac-primary; - padding-left: 4px; - text-decoration: none; - } - } - } - } -} - -// --- Press wrapper --- -.press-wrapper { - .single-press { - margin: 0 0 1.5rem; - display: flex; - align-items: center; - transition: 0.3s; - - &:hover h6 { - color: $ac-primary; - } - - .calender { - text-align: center; - height: 90px; - display: inline-flex; - align-items: center; - justify-content: flex-start; - flex-direction: column; - margin-right: 1rem; - border-radius: 4px; - - .date { - width: 84px; - height: 45px; - background-color: #9dffcd; - font-weight: 500; - font-size: 28px; - line-height: 140%; - letter-spacing: 0.4px; - color: $ac-primary; - display: flex; - align-items: center; - justify-content: center; - } - - .month { - width: 84px; - height: 45px; - background: #ccffe5; - font-family: Roboto; - font-weight: 300; - font-size: 18px; - line-height: 140%; - letter-spacing: 0.4px; - color: $ac-primary; - display: flex; - align-items: center; - justify-content: center; - } - } - - .description { - max-width: 327px; - - h6 { - font-size: 1rem; - margin-bottom: 0; - letter-spacing: 0; - font-weight: 500; - display: block; - - &:after { - position: inherit; - } - } - - .author { - font-weight: 400; - font-size: 0.875rem; - letter-spacing: 0.4px; - margin-bottom: 0.5rem; - display: block; - color: #1c1c1c; - } - - p { - font-size: 0.875rem; - color: #636363; - line-height: 150%; - } - } - } - - .button.inline-button { - margin-left: 100px !important; - } -} // --- Community items --- .community-items { @@ -693,7 +512,7 @@ border: none; padding-left: 0; padding-right: 0; - font-size: 14px; + font-size: $font-size-normal; font-weight: 500; background-color: transparent; color: $ac-white; @@ -790,7 +609,7 @@ } &::placeholder { - color: #636363; + color: $ac-gray-dark; } } } @@ -810,7 +629,7 @@ top: 0; width: 100%; height: 100%; - background: #ffffff; + background: $ac-white; z-index: -1; transition: 0.5s ease-in-out; } @@ -863,80 +682,17 @@ .mega-menu-wrapper { min-width: 260px; max-width: 320px; - padding: 0.375rem; + padding: 0.75rem; } } -.resources-single-list { - display: flex; - flex-direction: column; - gap: 2px; - background: #f5faf7; - border-radius: 8px; - padding: 0.375rem; - - .resources-single-item { - display: flex; - align-items: center; - gap: 10px; - padding: 9px 10px; - border-radius: 6px; - text-decoration: none; - cursor: pointer; - transition: background-color 0.13s ease; - width: 100%; - box-sizing: border-box; - - .resources-single-icon { - height: 32px; - width: 32px; - min-width: 32px; - flex-shrink: 0; - background: #e0f2e9; - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - color: $ac-primary; - transition: background-color 0.13s ease; - } - - .resources-single-info { - display: flex; - flex-direction: column; - gap: 1px; - min-width: 0; - - .resources-single-title { - font-size: 13px; - font-weight: 600; - color: $ac-color-heading; - line-height: 1.3; - } - - .resources-single-desc { - font-size: 11.5px; - color: #6b7280; - line-height: 1.3; - } - } - - &:hover { - background-color: #dae6df; - - .resources-single-icon { - background: #c8ecd6; - } - } - } -} // --- Services dropdown --- .services-menu { .mega-menu-wrapper { min-width: 860px; max-width: 960px; - padding: 0.875rem; + padding: 0.75rem; .mega-menu-inner { display: flex; @@ -980,15 +736,15 @@ max-width: 40px; flex-shrink: 0; background: #edf7f1; - border-radius: 10px; + border-radius: 8px; display: flex; align-items: center; justify-content: center; color: $ac-primary; img { - height: 16px; - width: 16px; + height: 20px; + width: 20px; object-fit: contain; } } @@ -999,7 +755,7 @@ overflow: hidden; h2 { - font-size: 13px; + font-size: $font-size-semi-normal; font-weight: 600; color: $ac-color-heading; line-height: 1.3; @@ -1016,7 +772,7 @@ } &:hover { - background-color: #dae6df; + background-color: #f0faf4; .product-info h2 { color: $ac-color-heading; @@ -1048,7 +804,7 @@ .offering-description-container { flex: 1; min-width: 0; - border-left: 1px solid #e5e7eb; + border-left: 1px solid $color-border-light; margin-left: 0.625rem; padding-left: 0.625rem; display: flex; @@ -1076,14 +832,14 @@ cursor: pointer; width: 100%; text-decoration: none; - gap: 0; + gap: 10px; .product-info { flex: 1; min-width: 0; h2 { - font-size: 13px; + font-size: $font-size-semi-normal; font-weight: 600; color: $ac-color-heading; line-height: 1.3; @@ -1108,8 +864,8 @@ } p { - font-size: 12.5px; - color: #6b7280; + font-size: $font-size-extra-small; + color: $color-text-muted; margin-top: 3px; line-height: 1.4; } @@ -1142,7 +898,7 @@ .offering-description-container { border-left: none; - border-top: 1px solid #e5e7eb; + border-top: 1px solid $color-border-light; margin-left: 0; padding-left: 0; margin-top: 0.5rem; @@ -1272,7 +1028,7 @@ margin-left: 0; width: 100%; height: 48px; - font-size: 15px; + font-size: $font-size-semi-normal; } // Main nav list @@ -1288,7 +1044,7 @@ li.nav-item { width: 100%; margin: 0; - border-bottom: 1px solid #f3f3f3; + border-bottom: 1px solid $ac-white-lighter; &:last-child { border-bottom: none; } @@ -1296,7 +1052,7 @@ display: flex; width: 100%; padding: 15px 4px; - font-size: 15px; + font-size: $font-size-semi-normal; font-weight: 500; line-height: 1.3; justify-content: space-between; @@ -1308,8 +1064,8 @@ &:hover { color: $ac-primary; background: transparent; } .fa { - font-size: 12px; - color: #9ca3af; + font-size: $font-size-extra-small; + color: $color-text-muted; transition: transform 0.2s ease; } } @@ -1327,11 +1083,11 @@ left: auto !important; top: auto !important; padding: 8px 20px 12px !important; - background: #fafafa; + background: $color-surface-subtle; box-shadow: none; border: none; - border-top: 1px solid #f0f0f0; - border-bottom: 1px solid #f0f0f0; + border-top: 1px solid $color-border-light; + border-bottom: 1px solid $color-border-light; border-radius: 0; } @@ -1355,7 +1111,7 @@ gap: 0; padding-top: 16px; margin-top: 8px; - border-top: 1px solid #f0f0f0; + border-top: 1px solid $color-border-light; ul { display: flex; @@ -1365,7 +1121,7 @@ margin: 0 0 16px; li.nav-item { - border-bottom: 1px solid #f3f3f3; + border-bottom: 1px solid $ac-white-lighter; &:last-child { border-bottom: none; } @@ -1373,7 +1129,7 @@ display: flex; width: 100%; padding: 14px 4px; - font-size: 15px; + font-size: $font-size-semi-normal; font-weight: 500; border-radius: 0; color: $ac-color-heading; @@ -1392,7 +1148,7 @@ .button.ac-button { width: 100%; height: 44px; - font-size: 14px; + font-size: $font-size-normal; } } } @@ -1409,10 +1165,6 @@ } } - .resources-list { - flex-direction: column; - } - .mega-menu-wrapper { width: calc(100% + 40px) !important; min-width: 0 !important; @@ -1461,8 +1213,8 @@ } .product-info { - h2 { font-size: 14px; font-weight: 600; color: $ac-color-heading; } - p { font-size: 12.5px; margin-top: 2px; color: #6b7280; } + h2 { font-size: $font-size-semi-normal; font-weight: 600; color: $ac-color-heading; } + p { font-size: $font-size-extra-small; margin-top: 2px; color: $color-text-muted; } } .navigate-icon .icon { @@ -1493,11 +1245,7 @@ // Services: stack left + right panels .services-menu .mega-menu-inner, - .offering-description-container, - .resources-nav-list, - .resources-detail-panel, - .resource-menu-nav, - .resource-menu-panels { + .offering-description-container { flex-direction: column !important; width: 100% !important; border-left: none !important; @@ -1531,43 +1279,13 @@ .offering-description-container { border-left: none !important; - border-top: 1px solid #e5e7eb; + border-top: 1px solid $color-border-light; margin: 8px 0 0 !important; padding: 8px 0 0 !important; width: 100%; } } - // Resources two-panel: stack on mobile - .resources-menu .mega-menu-wrapper .mega-menu-inner { - flex-direction: column !important; - - .resources-nav-list, - .resource-menu-nav { - width: 100% !important; - max-width: 100% !important; - flex: unset !important; - border-radius: 8px; - margin-bottom: 8px; - padding-left: 4px; - padding-right: 4px; - } - - .resources-detail-panel, - .resource-menu-panels { - border-left: none !important; - border-top: 1px solid #e5e7eb; - margin: 8px 0 0 !important; - padding: 8px 0 0 !important; - width: 100%; - } - } - - .press-wrapper .button.inline-button { - margin-left: 0 !important; - background-color: transparent; - } - .navbar-appscode-wrapper.navbar-product { .navbar-appscode .navbar-right { top: 47px; diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index eca9c059e2..dc904dcd72 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -21040,7 +21040,7 @@ Responsive Classes } .navbar-appscode ul .nav-item .link .fa { transition: transform 0.2s ease; - font-size: 0.8rem; + font-size: 12px; } .whats-new { @@ -21111,8 +21111,8 @@ Responsive Classes box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 24px 48px -8px rgba(0, 0, 0, 0.08); padding: 0.75rem; width: auto; - min-width: 420px; - max-width: 450px; + min-width: 380px; + max-width: 420px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; @@ -21136,7 +21136,7 @@ Responsive Classes gap: 4px; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product { - grid-template-columns: 36px auto 1.2rem; + grid-template-columns: 40px auto 1.2rem; padding: 0.6rem; } .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo { @@ -21151,11 +21151,11 @@ Responsive Classes } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product { display: grid; - grid-template-columns: 32px 1fr 14px; + grid-template-columns: 40px 1fr 14px; align-items: center; - padding: 7px 10px; + padding: 8px 10px; gap: 10px; - border-radius: 7px; + border-radius: 6px; transition: background-color 0.13s ease; cursor: pointer; text-decoration: none; @@ -21173,34 +21173,38 @@ Responsive Classes transform: translate(1px, -1px); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo { - height: 32px; - width: 32px; + height: 40px; + width: 40px; display: flex; align-items: center; justify-content: center; background: #edf7f1; - border-radius: 7px; + border-radius: 8px; flex-shrink: 0; + color: var(--ac-primary); transition: background-color 0.13s ease, box-shadow 0.13s ease; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { - height: 18px; - width: 18px; + height: 20px; + width: 20px; object-fit: contain; } +.mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo iconify-icon { + display: flex; +} .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info { min-width: 0; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 { - font-size: 13px; + font-size: 15px; font-weight: 600; color: #171B1C; line-height: 1.25; letter-spacing: -0.01em; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p { - font-size: 13px; - color: #6b7280; + font-size: 12px; + color: #6a7282; line-height: 1.4; margin-top: 2px; } @@ -21243,163 +21247,6 @@ Responsive Classes transition: 0.3s ease-in-out; } -.linkable-nav-items { - width: 500px; - float: left; -} -.linkable-nav-items ul { - display: grid; - grid-template-columns: auto auto; - grid-gap: 0.5rem; -} -.linkable-nav-items ul li { - width: 250px; -} -.linkable-nav-items ul li a { - display: inline-flex; - align-items: center; - font-size: 0.875rem; - letter-spacing: 0.009rem; - color: #171B1C; - font-weight: 500; - transition: 0.3s; - padding-left: 0; -} -.linkable-nav-items ul li a:hover { - color: var(--ac-primary); -} -.linkable-nav-items ul li a:hover span:last-child { - padding-left: 1rem; -} -.linkable-nav-items ul li a span { - display: flex; - align-items: center; - font-size: 1rem; -} -.linkable-nav-items ul li a span:last-child { - padding-left: 0.5rem; -} -.linkable-nav-items ul li a span img { - height: 1rem; - margin-right: 1rem; -} - -.resources-list { - display: flex; - flex-direction: column; -} -.resources-list .list-items h2 { - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - color: #9ca3af; - text-transform: uppercase; - margin-bottom: 12px; - padding: 0 2px; -} -.resources-list .list-items ul { - margin: 0; - padding: 0; - list-style: none; -} -.resources-list .list-items ul li a { - font-size: 14px; - font-weight: 500; - color: #171B1C; - display: flex; - align-items: center; - gap: 6px; - padding: 8px 2px; - padding-left: 0; - line-height: 1; - border-radius: 6px; - transition: color 0.15s ease, padding-left 0.15s ease; -} -.resources-list .list-items ul li a span { - font-size: 14px; -} -.resources-list .list-items ul li a:hover { - color: var(--ac-primary); - padding-left: 4px; - text-decoration: none; -} - -.press-wrapper .single-press { - margin: 0 0 1.5rem; - display: flex; - align-items: center; - transition: 0.3s; -} -.press-wrapper .single-press:hover h6 { - color: var(--ac-primary); -} -.press-wrapper .single-press .calender { - text-align: center; - height: 90px; - display: inline-flex; - align-items: center; - justify-content: flex-start; - flex-direction: column; - margin-right: 1rem; - border-radius: 4px; -} -.press-wrapper .single-press .calender .date { - width: 84px; - height: 45px; - background-color: #9dffcd; - font-weight: 500; - font-size: 28px; - line-height: 140%; - letter-spacing: 0.4px; - color: var(--ac-primary); - display: flex; - align-items: center; - justify-content: center; -} -.press-wrapper .single-press .calender .month { - width: 84px; - height: 45px; - background: #ccffe5; - font-family: Roboto; - font-weight: 300; - font-size: 18px; - line-height: 140%; - letter-spacing: 0.4px; - color: var(--ac-primary); - display: flex; - align-items: center; - justify-content: center; -} -.press-wrapper .single-press .description { - max-width: 327px; -} -.press-wrapper .single-press .description h6 { - font-size: 1rem; - margin-bottom: 0; - letter-spacing: 0; - font-weight: 500; - display: block; -} -.press-wrapper .single-press .description h6:after { - position: inherit; -} -.press-wrapper .single-press .description .author { - font-weight: 400; - font-size: 0.875rem; - letter-spacing: 0.4px; - margin-bottom: 0.5rem; - display: block; - color: #1c1c1c; -} -.press-wrapper .single-press .description p { - font-size: 0.875rem; - color: #636363; - line-height: 150%; -} -.press-wrapper .button.inline-button { - margin-left: 100px !important; -} - .community-items { display: flex; align-items: center; @@ -21510,7 +21357,7 @@ Responsive Classes outline: none; } .ac-searchbar input[type=search]::placeholder { - color: #636363; + color: #5f5f5f; } .header--fixed { @@ -21571,70 +21418,13 @@ Responsive Classes .resources-menu .mega-menu-wrapper { min-width: 260px; max-width: 320px; - padding: 0.375rem; -} - -.resources-single-list { - display: flex; - flex-direction: column; - gap: 2px; - background: #f5faf7; - border-radius: 8px; - padding: 0.375rem; -} -.resources-single-list .resources-single-item { - display: flex; - align-items: center; - gap: 10px; - padding: 9px 10px; - border-radius: 6px; - text-decoration: none; - cursor: pointer; - transition: background-color 0.13s ease; - width: 100%; - box-sizing: border-box; -} -.resources-single-list .resources-single-item .resources-single-icon { - height: 32px; - width: 32px; - min-width: 32px; - flex-shrink: 0; - background: #e0f2e9; - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - color: var(--ac-primary); - transition: background-color 0.13s ease; -} -.resources-single-list .resources-single-item .resources-single-info { - display: flex; - flex-direction: column; - gap: 1px; - min-width: 0; -} -.resources-single-list .resources-single-item .resources-single-info .resources-single-title { - font-size: 13px; - font-weight: 600; - color: #171B1C; - line-height: 1.3; -} -.resources-single-list .resources-single-item .resources-single-info .resources-single-desc { - font-size: 11.5px; - color: #6b7280; - line-height: 1.3; -} -.resources-single-list .resources-single-item:hover { - background-color: #dae6df; -} -.resources-single-list .resources-single-item:hover .resources-single-icon { - background: #c8ecd6; + padding: 0.75rem; } .services-menu .mega-menu-wrapper { min-width: 860px; max-width: 960px; - padding: 0.875rem; + padding: 0.75rem; } .services-menu .mega-menu-wrapper .mega-menu-inner { display: flex; @@ -21677,15 +21467,15 @@ Responsive Classes max-width: 40px; flex-shrink: 0; background: #edf7f1; - border-radius: 10px; + border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ac-primary); } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo img { - height: 16px; - width: 16px; + height: 20px; + width: 20px; object-fit: contain; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info { @@ -21694,7 +21484,7 @@ Responsive Classes overflow: hidden; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info h2 { - font-size: 13px; + font-size: 15px; font-weight: 600; color: #171B1C; line-height: 1.3; @@ -21707,7 +21497,7 @@ Responsive Classes display: none !important; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover { - background-color: #dae6df; + background-color: #f0faf4; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover .product-info h2 { color: #171B1C; @@ -21758,14 +21548,14 @@ Responsive Classes cursor: pointer; width: 100%; text-decoration: none; - gap: 0; + gap: 10px; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info { flex: 1; min-width: 0; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 { - font-size: 13px; + font-size: 15px; font-weight: 600; color: #171B1C; line-height: 1.3; @@ -21787,8 +21577,8 @@ Responsive Classes height: 13px; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info p { - font-size: 12.5px; - color: #6b7280; + font-size: 12px; + color: #6a7282; margin-top: 3px; line-height: 1.4; } @@ -21931,7 +21721,7 @@ Responsive Classes .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item { width: 100%; margin: 0; - border-bottom: 1px solid #f3f3f3; + border-bottom: 1px solid #f1f1f1; } .navbar-appscode .navbar-right > .is-flex > ul li.nav-item:last-child, .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item:last-child { @@ -21959,7 +21749,7 @@ Responsive Classes .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link .fa, .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link .fa { font-size: 12px; - color: #9ca3af; + color: #6a7282; transition: transform 0.2s ease; } .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .mega-menu-wrapper, @@ -21978,8 +21768,8 @@ Responsive Classes background: #fafafa; box-shadow: none; border: none; - border-top: 1px solid #f0f0f0; - border-bottom: 1px solid #f0f0f0; + border-top: 1px solid #e5e7eb; + border-bottom: 1px solid #e5e7eb; border-radius: 0; } .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .link, @@ -22003,7 +21793,7 @@ Responsive Classes gap: 0; padding-top: 16px; margin-top: 8px; - border-top: 1px solid #f0f0f0; + border-top: 1px solid #e5e7eb; } .navbar-appscode .navbar-right .navbar-right-group ul { display: flex; @@ -22013,7 +21803,7 @@ Responsive Classes margin: 0 0 16px; } .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item { - border-bottom: 1px solid #f3f3f3; + border-bottom: 1px solid #f1f1f1; } .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item:last-child { border-bottom: none; @@ -22054,9 +21844,6 @@ Responsive Classes .navbar-appscode .navbar-right.is-visible { display: flex; } - .resources-list { - flex-direction: column; - } .mega-menu-wrapper { width: calc(100% + 40px) !important; min-width: 0 !important; @@ -22105,14 +21892,14 @@ Responsive Classes width: 24px; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 { - font-size: 14px; + font-size: 15px; font-weight: 600; color: #171B1C; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p { - font-size: 12.5px; + font-size: 12px; margin-top: 2px; - color: #6b7280; + color: #6a7282; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon .icon { opacity: 0; @@ -22139,11 +21926,7 @@ Responsive Classes background: transparent; } .mega-menu-wrapper .mega-menu-inner .services-menu .mega-menu-inner, - .mega-menu-wrapper .mega-menu-inner .offering-description-container, - .mega-menu-wrapper .mega-menu-inner .resources-nav-list, - .mega-menu-wrapper .mega-menu-inner .resources-detail-panel, - .mega-menu-wrapper .mega-menu-inner .resource-menu-nav, - .mega-menu-wrapper .mega-menu-inner .resource-menu-panels { + .mega-menu-wrapper .mega-menu-inner .offering-description-container { flex-direction: column !important; width: 100% !important; border-left: none !important; @@ -22176,31 +21959,6 @@ Responsive Classes padding: 8px 0 0 !important; width: 100%; } - .resources-menu .mega-menu-wrapper .mega-menu-inner { - flex-direction: column !important; - } - .resources-menu .mega-menu-wrapper .mega-menu-inner .resources-nav-list, - .resources-menu .mega-menu-wrapper .mega-menu-inner .resource-menu-nav { - width: 100% !important; - max-width: 100% !important; - flex: unset !important; - border-radius: 8px; - margin-bottom: 8px; - padding-left: 4px; - padding-right: 4px; - } - .resources-menu .mega-menu-wrapper .mega-menu-inner .resources-detail-panel, - .resources-menu .mega-menu-wrapper .mega-menu-inner .resource-menu-panels { - border-left: none !important; - border-top: 1px solid #e5e7eb; - margin: 8px 0 0 !important; - padding: 8px 0 0 !important; - width: 100%; - } - .press-wrapper .button.inline-button { - margin-left: 0 !important; - background-color: transparent; - } .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right { top: 47px; } From c917494ca4c061793b51ddda2cd9decca98f4058 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 11:35:56 +0600 Subject: [PATCH 07/12] Update navbar Signed-off-by: mohin7 --- layouts/partials/header/header.html | 3 - layouts/partials/menu/resources-nav.html | 2 +- .../assets/sass/base/utilities/_themes.scss | 86 +- static/assets/sass/components/_navbar.scss | 1206 +++++++---------- static/assets/sass/main.css | 532 ++++---- 5 files changed, 834 insertions(+), 995 deletions(-) diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index 44b15500ab..2e20defafa 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -389,9 +389,6 @@

    {{ $offering.title }}

    • - diff --git a/layouts/partials/menu/resources-nav.html b/layouts/partials/menu/resources-nav.html index 45cf1c21f7..bb6c2debbd 100644 --- a/layouts/partials/menu/resources-nav.html +++ b/layouts/partials/menu/resources-nav.html @@ -32,7 +32,7 @@

    Docs

    - + diff --git a/static/assets/sass/base/utilities/_themes.scss b/static/assets/sass/base/utilities/_themes.scss index c06e662196..9b99796bf7 100644 --- a/static/assets/sass/base/utilities/_themes.scss +++ b/static/assets/sass/base/utilities/_themes.scss @@ -1,5 +1,11 @@ :root { - --ac-primary: #00a651; + --ac-primary: #00a651; + + // Navbar menu tints — derived from --ac-primary, overridden per product below + --menu-icon-bg: #edf7f1; // icon container resting fill (primary ~8% opacity) + --menu-hover-bg: #f0faf4; // row hover background (primary ~5% opacity) + --menu-icon-active: #c8ecd6; // icon container active state (primary ~22% opacity) + --menu-sidebar-bg: #f5faf7; // services left-panel tint (primary ~3% opacity) } $ac-primary: var(--ac-primary); @@ -23,54 +29,106 @@ body { // --ac-primary: #{$ac-primary}; &.guard { - --ac-primary: #{$guard-primary}; + --ac-primary: #{$guard-primary}; + --menu-icon-bg: #fdf0ec; + --menu-hover-bg: #fef5f2; + --menu-icon-active: #f8cfc4; + --menu-sidebar-bg: #fef8f6; } &.kubedb { - --ac-primary: #{$kubedb-primary}; + --ac-primary: #{$kubedb-primary}; + --menu-icon-bg: #ededfb; + --menu-hover-bg: #f3f3fd; + --menu-icon-active: #c5c5f0; + --menu-sidebar-bg: #f7f7fe; } &.kubeci { - --ac-primary: #{$kubeci-primary}; + --ac-primary: #{$kubeci-primary}; + --menu-icon-bg: #e8ebee; + --menu-hover-bg: #f0f2f4; + --menu-icon-active: #bec7cf; + --menu-sidebar-bg: #f5f6f8; } &.kubed { - --ac-primary: #{$kubed-primary}; + --ac-primary: #{$kubed-primary}; + --menu-icon-bg: #e8f3fc; + --menu-hover-bg: #f0f7fd; + --menu-icon-active: #bcd9f5; + --menu-sidebar-bg: #f5fafe; } &.kubesheild { - --ac-primary: #{$kubesheild-primary}; + --ac-primary: #{$kubesheild-primary}; + --menu-icon-bg: #eae9fb; + --menu-hover-bg: #f2f2fd; + --menu-icon-active: #bfbbf4; + --menu-sidebar-bg: #f6f6fe; } &.kubevault { - --ac-primary: #{$kubevault-primary}; + --ac-primary: #{$kubevault-primary}; + --menu-icon-bg: #e8eefb; + --menu-hover-bg: #f0f4fd; + --menu-icon-active: #bccef5; + --menu-sidebar-bg: #f5f7fe; } &.kubeform { - --ac-primary: #{$kubeform-primary}; + --ac-primary: #{$kubeform-primary}; + --menu-icon-bg: #f0eae9; + --menu-hover-bg: #f6f2f1; + --menu-icon-active: #d9bcb9; + --menu-sidebar-bg: #f9f6f5; } &.searchlight { - --ac-primary: #{$searchlight-primary}; + --ac-primary: #{$searchlight-primary}; + --menu-icon-bg: #e7e8ec; + --menu-hover-bg: #eff0f3; + --menu-icon-active: #bcbfca; + --menu-sidebar-bg: #f4f5f7; } &.pharmer { - --ac-primary: #{$pharmer-primary}; + --ac-primary: #{$pharmer-primary}; + --menu-icon-bg: #f3edf7; + --menu-hover-bg: #f8f3fb; + --menu-icon-active: #dcc2ea; + --menu-sidebar-bg: #faf7fc; } &.service-broker { - --ac-primary: #{$service-broker-primary}; + --ac-primary: #{$service-broker-primary}; + --menu-icon-bg: #e8f8f6; + --menu-hover-bg: #f0fbfa; + --menu-icon-active: #bceae5; + --menu-sidebar-bg: #f4fdfb; } &.stash { - --ac-primary: #{$stash-primary}; + --ac-primary: #{$stash-primary}; + --menu-icon-bg: #eeebfc; + --menu-hover-bg: #f4f2fd; + --menu-icon-active: #cfc5f6; + --menu-sidebar-bg: #f8f7fe; } &.swift { - --ac-primary: #{$swift-primary}; + --ac-primary: #{$swift-primary}; + --menu-icon-bg: #eaecf8; + --menu-hover-bg: #f1f2fb; + --menu-icon-active: #c0c5ee; + --menu-sidebar-bg: #f5f6fc; } &.voyager { - --ac-primary: #{$voyager-primary}; + --ac-primary: #{$voyager-primary}; + --menu-icon-bg: #eaeaf5; + --menu-hover-bg: #f1f1f9; + --menu-icon-active: #bfbfe3; + --menu-sidebar-bg: #f5f5fb; } } diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 0df67ab628..c78730f031 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -1,4 +1,18 @@ -// --- Navbar area --- +// Shared transitions +$t-fast: 0.13s ease; // micro-interactions (hover, opacity) +$t-medium: 0.2s ease; // chevron rotate, menu reveal + +// Shared geometry +$menu-icon-size: 40px; // product-logo box +$menu-icon-radius: 8px; // product-logo corner +$menu-row-radius: 6px; // single-product row corner +$menu-letter-sp: -0.01em; // heading letter-spacing + + +// ============================================================================= +// 1. Layout shell +// ============================================================================= + .navbar-area { position: relative; z-index: 99; @@ -14,17 +28,9 @@ will-change: transform; transition: transform 200ms linear; - .mega-menu-wrapper { - top: 57px; - } - - .navbar-left .navbar-brand a img { - height: 1.58rem; - } - - .buttons.has-addons .button { - font-size: $font-size-normal; - } + .mega-menu-wrapper { top: 57px; } + .navbar-left .navbar-brand a img { height: 1.58rem; } + .buttons.has-addons .button { font-size: $font-size-normal; } } } @@ -47,47 +53,39 @@ } } - .navbar-right .button.ac-button { - height: 40px; - } - &.documentation-menu { margin-left: 349px; background-color: $ac-white; border-left: 1px solid $ac-white-light; - .mega-menu-wrapper { - top: 104px; - } + .mega-menu-wrapper { top: 104px; } .navbar-right { width: 100%; justify-content: space-between; - .ac-searchbar { - width: 49%; - } + .ac-searchbar { width: 49%; } } - ul .nav-item .link { - &.is-active { - position: relative; - z-index: 1; + ul .nav-item .link.is-active { + position: relative; + z-index: 1; - &:after { - position: absolute; - content: ""; - left: 0; - bottom: -8px; - width: 100%; - height: 4px; - background: $ac-primary; - border-radius: 3px 3px 0 0; - } + &:after { + position: absolute; + content: ""; + left: 0; + bottom: -8px; + width: 100%; + height: 4px; + background: $ac-primary; + border-radius: 3px 3px 0 0; } } } + .navbar-right .button.ac-button { height: 40px; } + .navbar-left { display: flex; align-items: center; @@ -101,9 +99,7 @@ display: flex; align-items: center; - img { - height: 1.875rem; - } + img { height: 1.875rem; } } } } @@ -132,9 +128,7 @@ display: flex; margin-left: 16px; - @include touch { - margin-left: 0; - } + @include touch { margin-left: 0; } } .buttons { @@ -148,14 +142,8 @@ } .button { - &:has(.tag) { - gap: 4px; - } - - .tag { - background-color: $ac-primary; - color: $ac-white; - } + &:has(.tag) { gap: 4px; } + .tag { background-color: $ac-primary; color: $ac-white; } } } @@ -167,79 +155,72 @@ .buttons { width: 100%; - - .button { - width: 100%; - margin-right: 0; - } + .button { width: 100%; margin-right: 0; } } } } } +} - // --- Nav items --- - ul { - .nav-item { - position: relative; - margin-right: 2rem; - - &:last-child { - margin-right: 0; - } - // Open state - &.is-active { - .link { - color: $ac-primary; +// ============================================================================= +// 2. Nav items & trigger +// ============================================================================= - i.fa { - transform: rotate(-180deg); - } - } +.navbar-appscode ul .nav-item { + position: relative; + margin-right: 2rem; - .mega-menu-wrapper { - display: block !important; - opacity: 1 !important; - pointer-events: auto !important; - transform: translateX(-30%) translateY(0px) !important; - } - } + &:last-child { margin-right: 0; } - // Nav trigger - .link { - font-size: $font-size-normal; - font-weight: 500; - font-family: $ac-font-heading; - color: $ac-color-heading; - line-height: 1; - border: none; - background-color: transparent; - cursor: pointer; - margin: 0; - padding: 0.75rem 0.25rem; - display: inline-flex; - align-items: center; - gap: 0.3rem; - transition: color 0.15s ease; - position: relative; - letter-spacing: -0.01em; - z-index: 1; + &.is-active { + .link { + color: $ac-primary; + i.fa { transform: rotate(-180deg); } + } - &.is-active, - &:hover { - color: $ac-primary; - } + .mega-menu-wrapper { + display: block !important; + opacity: 1 !important; + pointer-events: auto !important; + transform: translateX(-30%) translateY(0px) !important; + } + } - .fa { - transition: transform 0.2s ease; - font-size: $font-size-extra-small; - } - } + .link { + font-size: $font-size-normal; + font-weight: 500; + font-family: $ac-font-heading; + color: $ac-color-heading; + line-height: 1; + border: none; + background-color: transparent; + cursor: pointer; + margin: 0; + padding: 0.75rem 0.25rem; + display: inline-flex; + align-items: center; + gap: 0.3rem; + transition: color 0.15s ease; + position: relative; + letter-spacing: $menu-letter-sp; + z-index: 1; + + &.is-active, + &:hover { color: $ac-primary; } + + .fa { + font-size: $font-size-extra-small; + transition: transform $t-medium; } } } -// --- Whats-new badge --- + +// ============================================================================= +// 3. Utility components +// ============================================================================= + .whats-new { position: absolute; z-index: 1; @@ -251,7 +232,8 @@ line-height: 1.2; display: none; - &:before { + &:before, + &:after { content: ""; position: absolute; z-index: -1; @@ -262,33 +244,20 @@ width: 2rem; height: 1rem; background: $ac-primary; + } + + &:before { border-radius: 2px; animation: pulse-border 1500ms ease-out infinite; } &:after { - content: ""; - position: absolute; - z-index: -1; - left: 50%; - top: 50%; - transform: translateX(-50%) translateY(-50%); - display: block; - width: 2rem; - height: 1rem; - background: $ac-primary; transition: all 200ms; } @keyframes pulse-border { - 0% { - transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); - opacity: 1; - } - 100% { - transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); - opacity: 0; - } + 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } + 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } } @@ -298,7 +267,79 @@ padding: 0 0.5rem; } -// --- Mega menu panel --- +.navbar-burger { + height: 30px; + width: 30px; + border-radius: 4px; + + &.is-active i.fa { + transform: rotate(-180deg); + transform-origin: 10px; + } + + span { height: 1.5px; } +} + + +// ============================================================================= +// 4. Auxiliary components +// ============================================================================= + +.header--fixed { + position: fixed; + z-index: 9999; + right: 0; + left: 0; + top: 0; + + &::after { + position: absolute; + content: ""; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: $ac-white; + z-index: -1; + transition: 0.5s ease-in-out; + } +} + +.ac-searchbar { + position: relative; + z-index: 1; + padding: 0 20px; + border-left: 1px solid $ac-white-light; + + label .fa { color: $ac-color-heading; } + + input[type="search"] { + border: none; + background-color: transparent; + color: $ac-color-text; + font-size: 0.875rem; + width: 270px; + padding: 0.2rem 0.875rem; + + &:focus { border: none; outline: none; } + &::placeholder { color: $ac-gray-dark; } + } +} + +.embeded-console-button { + height: 42px; + margin-bottom: 4px; + width: 185px; + overflow: hidden; + + @include mobile { width: 100%; } +} + + +// ============================================================================= +// 5. Mega menu base +// ============================================================================= + .mega-menu-wrapper { display: none; position: absolute; @@ -321,18 +362,15 @@ .mega-menu-inner { overflow: visible; - // --- Products grid --- + .product-description:not(.offering-content) { display: none !important; } + + .video-content { display: none; } + .product-menu { display: flex; flex-direction: column; gap: 2px; - &:not(.services-grid):not(.database-list) { - display: flex; - flex-direction: column; - gap: 2px; - } - &.database-list { display: grid; grid-template-columns: auto auto auto; @@ -360,12 +398,12 @@ padding: 8px 10px; gap: 10px; border-radius: 6px; - transition: background-color 0.13s ease; + transition: background-color $t-fast; cursor: pointer; text-decoration: none; &:hover { - background-color: #f0faf4; + background-color: var(--menu-hover-bg); .product-logo { background: $ac-white; @@ -380,26 +418,19 @@ } .product-logo { - height: 40px; - width: 40px; + height: $menu-icon-size; + width: $menu-icon-size; display: flex; align-items: center; justify-content: center; - background: #edf7f1; - border-radius: 8px; + background: var(--menu-icon-bg); + border-radius: $menu-icon-radius; flex-shrink: 0; color: $ac-primary; - transition: background-color 0.13s ease, box-shadow 0.13s ease; - - img { - height: 20px; - width: 20px; - object-fit: contain; - } + transition: background-color $t-fast, box-shadow $t-fast; - iconify-icon { - display: flex; - } + img { height: 20px; width: 20px; object-fit: contain; } + iconify-icon { display: flex; } } .product-info { @@ -410,7 +441,7 @@ font-weight: 600; color: $ac-color-heading; line-height: 1.25; - letter-spacing: -0.01em; + letter-spacing: $menu-letter-sp; } p { @@ -431,486 +462,339 @@ color: $ac-primary; opacity: 0; visibility: hidden; - transition: opacity 0.13s ease, transform 0.13s ease; + transition: opacity $t-fast, transform $t-fast; } } } } - - // --- Product description sidebar --- - .product-description:not(.offering-content) { - display: none !important; - } } } -// --- Inline button --- -.button.ac-button.inline-button { - border: none; - height: auto; - margin: 0; - padding: 0.5rem 0; - display: inline-flex; - align-items: center; - justify-content: flex-start; - - &:hover { - background-color: transparent; - border: none; - color: $ac-primary; - - .material-icons { - margin-left: 1rem; - } - } +// ============================================================================= +// 6. Dropdown variants +// ============================================================================= - .material-icons { - font-size: 1rem; - margin-left: 0.5rem; - transition: 0.3s ease-in-out; - } +.resources-menu .mega-menu-wrapper { + min-width: 260px; + max-width: 320px; + padding: 0.75rem; } +.services-menu .mega-menu-wrapper { + min-width: 860px; + max-width: 960px; + padding: 0.75rem; -// --- Community items --- -.community-items { - display: flex; - align-items: center; - - .community-item { - border: 1px solid #636363; + .mega-menu-inner { display: flex; - align-items: center; - justify-content: center; - border-radius: 2px; - width: 2.5rem; - height: 2.5rem; - margin-right: 0.5rem; - transition: 0.3s; - - &:hover { - background-color: $ac-primary; - border-color: $ac-primary; - - img { - filter: brightness(10); - } - } - - &:last-child { - margin-right: 0; - } - } -} - -// --- Responsive menu --- -.responsive-menu { - background-color: $ac-primary; + flex-direction: row; + align-items: stretch; + gap: 0; + overflow: visible; - .button { - border: none; - padding-left: 0; - padding-right: 0; - font-size: $font-size-normal; - font-weight: 500; - background-color: transparent; - color: $ac-white; + // Left: service category list + .product-menu.services-grid { + flex: 0 0 300px; + width: 300px; + min-width: 300px; + max-width: 300px; + display: flex !important; + flex-direction: column; + gap: 2px; + background: var(--menu-sidebar-bg); + border-radius: $menu-icon-radius; + padding: 0.375rem; + overflow: hidden; - &.is-active { - color: #d2d2d2; - } - } -} + .single-product { + display: flex !important; + flex-direction: row !important; + grid-template-columns: unset !important; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: $menu-row-radius; + transition: background-color $t-fast, border-color $t-fast; + cursor: pointer; + width: 100%; + text-decoration: none; + box-sizing: border-box; -// --- Product version dropdown --- -.product-version { - .dropdown { - .dropdown-trigger .button { - font-size: 0.813rem; - width: 210px; - height: 2rem; - border-radius: 2px; - padding: 2px 15px; - color: $ac-color-heading; - border: 1px solid $ac-white-light; + .product-logo { + height: $menu-icon-size; + width: $menu-icon-size; + min-width: $menu-icon-size; + max-width: $menu-icon-size; + flex-shrink: 0; + background: var(--menu-icon-bg); + border-radius: $menu-icon-radius; + display: flex; + align-items: center; + justify-content: center; + color: $ac-primary; - .arrow { - color: #999999; - font-size: 0.9rem; - } - } + img { height: 20px; width: 20px; object-fit: contain; } + } - .dropdown-menu { - * { - scrollbar-width: auto; - scrollbar-color: #ebebeb #fafafd; - } + .product-info { + flex: 1; + min-width: 0; + overflow: hidden; - *::-webkit-scrollbar { - width: 12px; - } + h2 { + font-size: $font-size-semi-normal; + font-weight: 600; + color: $ac-color-heading; + line-height: 1.3; + letter-spacing: $menu-letter-sp; + } - *::-webkit-scrollbar-track { - background: #fafafd; - } + p { display: none !important; } + } - *::-webkit-scrollbar-thumb { - background-color: #ebebeb; - border-radius: 10px; - border: 3px solid #fafafd; - } + .navigate-icon { display: none !important; } - .dropdown-content { - max-height: 420px; - overflow-y: auto; + &:hover { + background-color: var(--menu-hover-bg); + .product-info h2 { color: $ac-color-heading; } + } - .dropdown-item { - font-size: 0.813rem; - color: $ac-color-heading; + &.is-active { + .product-logo { background: var(--menu-icon-active); } + .product-info h2 { font-weight: 600; color: $ac-color-heading; } } } - } - } - .new-item { - background-color: $ac-primary; - font-size: 0.813rem; - color: $ac-white; - border-radius: 2px; - height: 1.2rem; - padding: 2px 5px; - line-height: 1.2; - } -} - -// --- Navbar search --- -.ac-searchbar { - position: relative; - z-index: 1; - padding: 0 20px; - border-left: 1px solid $ac-white-light; - - label .fa { - color: $ac-color-heading; - } - - input[type="search"] { - border: none; - background-color: transparent; - color: $ac-color-text; - font-size: 0.875rem; - width: 270px; - padding: 0.2rem 0.875rem; - - &:focus { - border: none; - outline: none; - } - - &::placeholder { - color: $ac-gray-dark; + @include touch { + flex: unset; + width: 100%; + min-width: unset; + max-width: unset; + background: transparent; + } } - } -} - -// --- Fixed / headroom --- -.header--fixed { - position: fixed; - z-index: 9999; - right: 0; - left: 0; - top: 0; - - &::after { - position: absolute; - content: ""; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: $ac-white; - z-index: -1; - transition: 0.5s ease-in-out; - } - - &.headroom--unpinned::after { - transition: transform 500ms linear; - } -} - -.headroom { - will-change: transform; - transition: transform 200ms linear; -} - -.headroom--pinned { - transform: translateY(0px); - transition: transform 500ms linear; -} - -.headroom--unpinned { - transform: translateY(-165px); - - .navbar-area.navbar-fixed { - transform: translateY(135px); - } - - .navbar-appscode-wrapper.navbar-product { - transform: translateY(104px); - } -} - -// --- Navbar burger --- -.navbar-burger { - height: 30px; - width: 30px; - border-radius: 4px; - - &.is-active i.fa { - transform: rotate(-180deg); - transform-origin: 10px; - } - - span { - height: 1.5px; - } -} - -// --- Resources dropdown --- -.resources-menu { - .mega-menu-wrapper { - min-width: 260px; - max-width: 320px; - padding: 0.75rem; - } -} - -// --- Services dropdown --- -.services-menu { - .mega-menu-wrapper { - min-width: 860px; - max-width: 960px; - padding: 0.75rem; - - .mega-menu-inner { + // Right: offerings panel + .offering-description-container { + flex: 1; + min-width: 0; + border-left: 1px solid $color-border-light; + margin-left: 0.625rem; + padding-left: 0.625rem; display: flex; - flex-direction: row; - align-items: stretch; - gap: 0; - overflow: visible; + flex-direction: column; + justify-content: flex-start; - // Left: category list - .product-menu.services-grid { - flex: 0 0 300px; - width: 300px; - min-width: 300px; - max-width: 300px; - display: flex !important; + .product-description.offering-content { + display: none; flex-direction: column; gap: 2px; - background: #f5faf7; - border-radius: 8px; - padding: 0.375rem; - overflow: hidden; - .single-product { + &.is-block { display: flex !important; } + + a.single-product { display: flex !important; flex-direction: row !important; grid-template-columns: unset !important; align-items: center; - gap: 8px; padding: 8px 10px; - border-radius: 6px; - transition: background-color 0.13s ease, border-color 0.13s ease; + border-radius: $menu-row-radius; + border-left: 3px solid transparent; + transition: background-color $t-fast; cursor: pointer; width: 100%; text-decoration: none; - box-sizing: border-box; - - .product-logo { - height: 40px; - width: 40px; - min-width: 40px; - max-width: 40px; - flex-shrink: 0; - background: #edf7f1; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - color: $ac-primary; - - img { - height: 20px; - width: 20px; - object-fit: contain; - } - } + gap: 10px; .product-info { flex: 1; min-width: 0; - overflow: hidden; h2 { font-size: $font-size-semi-normal; font-weight: 600; color: $ac-color-heading; line-height: 1.3; - letter-spacing: -0.01em; + letter-spacing: $menu-letter-sp; + display: flex; + align-items: center; + justify-content: space-between; + + .arrow-right { + opacity: 0; + transition: opacity $t-fast, transform $t-fast; + color: $ac-primary; + display: inline-flex; + flex-shrink: 0; + margin-left: 0.25rem; + + svg { width: 13px; height: 13px; } + } } p { - display: none !important; + font-size: $font-size-extra-small; + color: $color-text-muted; + margin-top: 3px; + line-height: 1.4; } } - .navigate-icon { - display: none !important; - } + .navigate-icon { display: none !important; } &:hover { - background-color: #f0faf4; - - .product-info h2 { - color: $ac-color-heading; - } - } - - &.is-active { - .product-logo { - background: #c8ecd6; - } + background-color: var(--menu-hover-bg); .product-info h2 { + color: $ac-primary; font-weight: 600; - color: $ac-color-heading; + + .arrow-right { opacity: 1; transform: translateX(3px); } } } } - - @include touch { - flex: unset; - width: 100%; - min-width: unset; - max-width: unset; - background: transparent; - } } + } + + @include touch { + flex-direction: column; - // Right: offerings panel .offering-description-container { - flex: 1; - min-width: 0; - border-left: 1px solid $color-border-light; - margin-left: 0.625rem; - padding-left: 0.625rem; - display: flex; - flex-direction: column; - justify-content: flex-start; + border-left: none; + border-top: 1px solid $color-border-light; + margin-left: 0; + padding-left: 0; + margin-top: 0.5rem; + padding-top: 0.5rem; + width: 100%; + } + } + } +} - .product-description.offering-content { - display: none; - flex-direction: column; - gap: 2px; - &.is-block { - display: flex !important; - } +// ============================================================================= +// 7. Standalone widgets +// ============================================================================= - a.single-product { - display: flex !important; - flex-direction: row !important; - grid-template-columns: unset !important; - align-items: center; - padding: 8px 10px; - border-radius: 6px; - border-left: 3px solid transparent; - transition: background-color 0.13s ease; - cursor: pointer; - width: 100%; - text-decoration: none; - gap: 10px; - - .product-info { - flex: 1; - min-width: 0; - - h2 { - font-size: $font-size-semi-normal; - font-weight: 600; - color: $ac-color-heading; - line-height: 1.3; - letter-spacing: -0.01em; - display: flex; - align-items: center; - justify-content: space-between; - - .arrow-right { - opacity: 0; - transition: opacity 0.13s ease, transform 0.13s ease; - color: $ac-primary; - display: inline-flex; - flex-shrink: 0; - margin-left: 0.25rem; - - svg { - width: 13px; - height: 13px; - } - } - } +.community-items { + display: flex; + align-items: center; - p { - font-size: $font-size-extra-small; - color: $color-text-muted; - margin-top: 3px; - line-height: 1.4; - } - } + .community-item { + border: 1px solid #636363; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + width: 2.5rem; + height: 2.5rem; + margin-right: 0.5rem; + transition: 0.3s; - .navigate-icon { - display: none !important; - } + &:last-child { margin-right: 0; } - &:hover { - background-color: #f0faf4; - // border-left-color: $ac-primary; + &:hover { + background-color: $ac-primary; + border-color: $ac-primary; + img { filter: brightness(10); } + } + } +} - .product-info h2 { - color: $ac-primary; - font-weight: 600; +.responsive-menu { + background-color: $ac-primary; - .arrow-right { - opacity: 1; - transform: translateX(3px); - } - } - } - } - } + .button { + border: none; + padding-left: 0; + padding-right: 0; + font-size: $font-size-normal; + font-weight: 500; + background-color: transparent; + color: $ac-white; + + &.is-active { color: #d2d2d2; } + } +} + +.product-version { + .dropdown { + .dropdown-trigger .button { + font-size: 0.813rem; + width: 210px; + height: 2rem; + border-radius: 2px; + padding: 2px 15px; + color: $ac-color-heading; + border: 1px solid $ac-white-light; + + .arrow { color: #999999; font-size: 0.9rem; } + } + + .dropdown-menu { + * { + scrollbar-width: auto; + scrollbar-color: #ebebeb #fafafd; } - @include touch { - flex-direction: column; + *::-webkit-scrollbar { width: 12px; } + *::-webkit-scrollbar-track { background: #fafafd; } + *::-webkit-scrollbar-thumb { + background-color: #ebebeb; + border-radius: 10px; + border: 3px solid #fafafd; + } - .offering-description-container { - border-left: none; - border-top: 1px solid $color-border-light; - margin-left: 0; - padding-left: 0; - margin-top: 0.5rem; - padding-top: 0.5rem; - width: 100%; - } + .dropdown-content { + max-height: 420px; + overflow-y: auto; + + .dropdown-item { font-size: 0.813rem; color: $ac-color-heading; } } } } + + .new-item { + background-color: $ac-primary; + font-size: 0.813rem; + color: $ac-white; + border-radius: 2px; + height: 1.2rem; + padding: 2px 5px; + line-height: 1.2; + } +} + +.button.ac-button.inline-button { + border: none; + height: auto; + margin: 0; + padding: 0.5rem 0; + display: inline-flex; + align-items: center; + justify-content: flex-start; + + &:hover { + background-color: transparent; + border: none; + color: $ac-primary; + .material-icons { margin-left: 1rem; } + } + + .material-icons { + font-size: 1rem; + margin-left: 0.5rem; + transition: 0.3s ease-in-out; + } } -// --- Responsive overrides --- + +// ============================================================================= +// 8. Responsive — touch / mobile +// ============================================================================= + @include touch { .navbar-burger { display: flex !important; @@ -921,45 +805,10 @@ justify-content: center; cursor: pointer; - span { - background-color: $ac-color-heading; - } - } - - .headroom--unpinned { - .navbar-appscode-wrapper { - &.navbar-product { - padding: 0; - transform: translateY(104px); - - .navbar-appscode .navbar-right { - top: 47px; - } - } - } + span { background-color: $ac-color-heading; } } .navbar-appscode { - &.container { - padding: 0.5rem 15px; - } - - &.documentation-menu { - margin-left: 0; - padding: 0; - - ul .nav-item .link.is-active:after { - display: none; - } - - .navbar-right { - position: fixed; - width: 80%; - border-right: 1px solid $ac-white-light; - } - } - - // Mobile navbar bar — logo + burger on one row &.container, & { height: 60px; @@ -970,6 +819,16 @@ background: $ac-white; } + &.container { padding: 0.5rem 15px; } + + &.documentation-menu { + margin-left: 0; + padding: 0; + + ul .nav-item .link.is-active:after { display: none; } + .navbar-right { position: fixed; width: 80%; border-right: 1px solid $ac-white-light; } + } + .navbar-left { width: auto; flex: 1; @@ -981,17 +840,10 @@ align-items: center; justify-content: space-between; - a img { - height: 1.5rem !important; - } + a img { height: 1.5rem !important; } } - ul { - position: absolute; - right: 20%; - opacity: 0; - visibility: hidden; - } + ul { position: absolute; right: 20%; opacity: 0; visibility: hidden; } } .navbar-right { @@ -1012,6 +864,8 @@ border-top: 1px solid $ac-white-light; gap: 0; + &.is-visible { display: flex; } + .is-flex.is-justify-content-space-between { flex-direction: column; align-items: flex-start; @@ -1019,10 +873,7 @@ gap: 0; } - .is-primary.ml-8 { - margin-left: 0 !important; - margin-top: 12px; - } + .is-primary.ml-8 { margin-left: 0 !important; margin-top: 12px; } .button.ac-button.is-primary { margin-left: 0; @@ -1031,7 +882,6 @@ font-size: $font-size-semi-normal; } - // Main nav list > .is-flex > ul, ul.navbar-left-group { display: flex; @@ -1059,18 +909,17 @@ align-items: center; border-radius: 0; color: $ac-color-heading; - transition: color 0.13s ease; + transition: color $t-fast; &:hover { color: $ac-primary; background: transparent; } .fa { font-size: $font-size-extra-small; color: $color-text-muted; - transition: transform 0.2s ease; + transition: transform $t-medium; } } - // Dropdown opens inline .mega-menu-wrapper { display: none; position: static !important; @@ -1095,7 +944,6 @@ .link { color: $ac-primary; background: transparent; - .fa { transform: rotate(-180deg); color: $ac-primary; } } .mega-menu-wrapper { display: block !important; } @@ -1103,7 +951,6 @@ } } - // Right group (partner, support, buttons) .navbar-right-group { width: 100%; flex-direction: column; @@ -1133,7 +980,7 @@ font-weight: 500; border-radius: 0; color: $ac-color-heading; - transition: color 0.13s ease; + transition: color $t-fast; &:hover { color: $ac-primary; background: transparent; } } } @@ -1145,6 +992,7 @@ gap: 10px; iframe { width: 100%; height: 44px; } + .button.ac-button { width: 100%; height: 44px; @@ -1158,13 +1006,10 @@ margin-top: 20px; gap: 8px; } - - &.is-visible { - display: flex; - } } } + // Mega menu: full-width inline on mobile .mega-menu-wrapper { width: calc(100% + 40px) !important; min-width: 0 !important; @@ -1188,7 +1033,6 @@ .mega-menu-inner { overflow: visible; - // Products: single column, compact cards .product-menu { display: flex !important; flex-direction: column; @@ -1204,10 +1048,10 @@ border-radius: 8px; .product-logo { - height: 40px; - width: 40px; + height: $menu-icon-size; + width: $menu-icon-size; border-radius: 10px; - background: #edf7f1 !important; + background: var(--menu-icon-bg) !important; img { height: 24px; width: 24px; } } @@ -1224,26 +1068,18 @@ color: $ac-primary; } - &:hover, &.is-active { - background-color: #f0faf4; - + &:hover, + &.is-active { + background-color: var(--menu-hover-bg); .product-logo { background: $ac-white !important; } .navigate-icon .icon { opacity: 1; visibility: visible; } } } - &.database-list { - grid-template-columns: 1fr !important; - } - - &.services-grid { - grid-template-columns: 1fr !important; - width: 100%; - background: transparent; - } + &.database-list { grid-template-columns: 1fr !important; } + &.services-grid { grid-template-columns: 1fr !important; width: 100%; background: transparent; } } - // Services: stack left + right panels .services-menu .mega-menu-inner, .offering-description-container { flex-direction: column !important; @@ -1265,7 +1101,7 @@ } } - // Services two-panel: stack on mobile + // Services two-panel: stacked on mobile .services-menu .mega-menu-wrapper .mega-menu-inner { flex-direction: column !important; @@ -1273,7 +1109,7 @@ width: 100% !important; max-width: 100% !important; flex: unset !important; - background: #f5faf7; + background: var(--menu-sidebar-bg); margin-bottom: 8px; } @@ -1286,79 +1122,39 @@ } } - .navbar-appscode-wrapper.navbar-product { - .navbar-appscode .navbar-right { - top: 47px; - } + .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right { + top: 47px; } .product-version { - &.pl-20 { - padding-left: 10px; - } - - .dropdown .dropdown-trigger .button { - width: 190px; - } - - .dropdown-menu { - z-index: 9999; - } + &.pl-20 { padding-left: 10px; } + .dropdown .dropdown-trigger .button { width: 190px; } + .dropdown-menu { z-index: 9999; } } - } -// --- Embedded console button --- -.embeded-console-button { - height: 42px; - margin-bottom: 4px; - width: 185px; - overflow: hidden; - @include mobile { - width: 100%; - } -} +// ============================================================================= +// 9. Responsive — desktop / widescreen / fullhd +// ============================================================================= -// --- Desktop only --- @include desktop-only { - .navbar-burger { - display: none !important; - } + .navbar-burger { display: none !important; } .navbar-appscode { - &.documentation-menu { - margin-left: 0; - border-left: none; - } + &.documentation-menu { margin-left: 0; border-left: none; } - .navbar-left .navbar-brand { - margin-right: 1rem; - } + .navbar-left .navbar-brand { margin-right: 1rem; } .navbar-right { width: calc(100% - 180px); - - .community-items.ml-70 { - margin-left: 10px !important; - } - - .buttons { - min-width: 354px !important; - } - - .button.ac-button { - padding: 0.5rem 1rem; - } + .community-items.ml-70 { margin-left: 10px !important; } + .buttons { min-width: 354px !important; } + .button.ac-button { padding: 0.5rem 1rem; } } - .navbar-right-group { - gap: 8px !important; - } - - ul .nav-item { - margin-right: 12px; - } + .navbar-right-group { gap: 8px !important; } + ul .nav-item { margin-right: 12px; } } .mega-menu-wrapper .mega-menu-inner { @@ -1367,47 +1163,26 @@ flex-direction: column; width: 100%; } - - .video-content { - display: none; - } } .product-version { - &.ml-20 { - margin-left: 4px !important; - } - - .dropdown .dropdown-trigger .button { - width: 180px; - padding: 2px 5px; - } + &.ml-20 { margin-left: 4px !important; } + .dropdown .dropdown-trigger .button { width: 180px; padding: 2px 5px; } } } -// --- Widescreen only --- @include widescreen-only { - .navbar-burger { - display: none !important; - } + .navbar-burger { display: none !important; } .navbar-appscode { - &.documentation-menu { - margin-left: 0; - border-left: none; - } + &.documentation-menu { margin-left: 0; border-left: none; } .navbar-right { width: calc(100% - 180px); - - .community-items.ml-70 { - margin-left: 10px !important; - } + .community-items.ml-70 { margin-left: 10px !important; } } - ul .nav-item { - margin-right: 1.5rem; - } + ul .nav-item { margin-right: 1.5rem; } } .mega-menu-wrapper .mega-menu-inner { @@ -1416,16 +1191,11 @@ flex-direction: column; width: 100%; } - - .video-content { - display: none; - } } } -// --- Full HD --- @include fullhd { - .navbar-appscode .navbar-left .navbar-brand { - margin-right: 3rem; - } + .navbar-appscode .navbar-left .navbar-brand { margin-right: 3rem; } + + .mega-menu-wrapper .mega-menu-inner .video-content { display: block; } } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index dc904dcd72..0c5b7c3bcc 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -18147,46 +18147,102 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { :root { --ac-primary: #00a651; + --menu-icon-bg: #edf7f1; + --menu-hover-bg: #f0faf4; + --menu-icon-active: #c8ecd6; + --menu-sidebar-bg: #f5faf7; } body.guard { --ac-primary: #d84e27; + --menu-icon-bg: #fdf0ec; + --menu-hover-bg: #fef5f2; + --menu-icon-active: #f8cfc4; + --menu-sidebar-bg: #fef8f6; } body.kubedb { --ac-primary: #4d4dcb; + --menu-icon-bg: #ededfb; + --menu-hover-bg: #f3f3fd; + --menu-icon-active: #c5c5f0; + --menu-sidebar-bg: #f7f7fe; } body.kubeci { --ac-primary: #2c3e50; + --menu-icon-bg: #e8ebee; + --menu-hover-bg: #f0f2f4; + --menu-icon-active: #bec7cf; + --menu-sidebar-bg: #f5f6f8; } body.kubed { --ac-primary: #1c7bd4; + --menu-icon-bg: #e8f3fc; + --menu-hover-bg: #f0f7fd; + --menu-icon-active: #bcd9f5; + --menu-sidebar-bg: #f5fafe; } body.kubesheild { --ac-primary: #2516c7; + --menu-icon-bg: #eae9fb; + --menu-hover-bg: #f2f2fd; + --menu-icon-active: #bfbbf4; + --menu-sidebar-bg: #f6f6fe; } body.kubevault { --ac-primary: #326ce5; + --menu-icon-bg: #e8eefb; + --menu-hover-bg: #f0f4fd; + --menu-icon-active: #bccef5; + --menu-sidebar-bg: #f5f7fe; } body.kubeform { --ac-primary: #592217; + --menu-icon-bg: #f0eae9; + --menu-hover-bg: #f6f2f1; + --menu-icon-active: #d9bcb9; + --menu-sidebar-bg: #f9f6f5; } body.searchlight { --ac-primary: #111738; + --menu-icon-bg: #e7e8ec; + --menu-hover-bg: #eff0f3; + --menu-icon-active: #bcbfca; + --menu-sidebar-bg: #f4f5f7; } body.pharmer { --ac-primary: #8e44ad; + --menu-icon-bg: #f3edf7; + --menu-hover-bg: #f8f3fb; + --menu-icon-active: #dcc2ea; + --menu-sidebar-bg: #faf7fc; } body.service-broker { --ac-primary: #29b4a2; + --menu-icon-bg: #e8f8f6; + --menu-hover-bg: #f0fbfa; + --menu-icon-active: #bceae5; + --menu-sidebar-bg: #f4fdfb; } body.stash { --ac-primary: #5e2dea; + --menu-icon-bg: #eeebfc; + --menu-hover-bg: #f4f2fd; + --menu-icon-active: #cfc5f6; + --menu-sidebar-bg: #f8f7fe; } body.swift { --ac-primary: #3f51b6; + --menu-icon-bg: #eaecf8; + --menu-hover-bg: #f1f2fb; + --menu-icon-active: #c0c5ee; + --menu-sidebar-bg: #f5f6fc; } body.voyager { --ac-primary: #2d2a78; + --menu-icon-bg: #eaeaf5; + --menu-hover-bg: #f1f1f9; + --menu-icon-active: #bfbfe3; + --menu-sidebar-bg: #f5f5fb; } html, @@ -20891,9 +20947,6 @@ Responsive Classes transform: translateY(6px); min-height: auto; } -.navbar-appscode .navbar-right .button.ac-button { - height: 40px; -} .navbar-appscode.documentation-menu { margin-left: 349px; background-color: #ffffff; @@ -20923,6 +20976,9 @@ Responsive Classes background: var(--ac-primary); border-radius: 3px 3px 0 0; } +.navbar-appscode .navbar-right .button.ac-button { + height: 40px; +} .navbar-appscode .navbar-left { display: flex; align-items: center; @@ -20997,6 +21053,7 @@ Responsive Classes margin-right: 0; } } + .navbar-appscode ul .nav-item { position: relative; margin-right: 2rem; @@ -21039,8 +21096,8 @@ Responsive Classes color: var(--ac-primary); } .navbar-appscode ul .nav-item .link .fa { - transition: transform 0.2s ease; font-size: 12px; + transition: transform 0.2s ease; } .whats-new { @@ -21054,7 +21111,7 @@ Responsive Classes line-height: 1.2; display: none; } -.whats-new:before { +.whats-new:before, .whats-new:after { content: ""; position: absolute; z-index: -1; @@ -21065,20 +21122,12 @@ Responsive Classes width: 2rem; height: 1rem; background: var(--ac-primary); +} +.whats-new:before { border-radius: 2px; animation: pulse-border 1500ms ease-out infinite; } .whats-new:after { - content: ""; - position: absolute; - z-index: -1; - left: 50%; - top: 50%; - transform: translateX(-50%) translateY(-50%); - display: block; - width: 2rem; - height: 1rem; - background: var(--ac-primary); transition: all 200ms; } @keyframes pulse-border { @@ -21098,6 +21147,75 @@ Responsive Classes padding: 0 0.5rem; } +.navbar-burger { + height: 30px; + width: 30px; + border-radius: 4px; +} +.navbar-burger.is-active i.fa { + transform: rotate(-180deg); + transform-origin: 10px; +} +.navbar-burger span { + height: 1.5px; +} + +.header--fixed { + position: fixed; + z-index: 9999; + right: 0; + left: 0; + top: 0; +} +.header--fixed::after { + position: absolute; + content: ""; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #ffffff; + z-index: -1; + transition: 0.5s ease-in-out; +} + +.ac-searchbar { + position: relative; + z-index: 1; + padding: 0 20px; + border-left: 1px solid #e7e7e7; +} +.ac-searchbar label .fa { + color: #171B1C; +} +.ac-searchbar input[type=search] { + border: none; + background-color: transparent; + color: #515D63; + font-size: 0.875rem; + width: 270px; + padding: 0.2rem 0.875rem; +} +.ac-searchbar input[type=search]:focus { + border: none; + outline: none; +} +.ac-searchbar input[type=search]::placeholder { + color: #5f5f5f; +} + +.embeded-console-button { + height: 42px; + margin-bottom: 4px; + width: 185px; + overflow: hidden; +} +@media screen and (max-width: 768px) { + .embeded-console-button { + width: 100%; + } +} + .mega-menu-wrapper { display: none; position: absolute; @@ -21120,12 +21238,13 @@ Responsive Classes .mega-menu-wrapper .mega-menu-inner { overflow: visible; } -.mega-menu-wrapper .mega-menu-inner .product-menu { - display: flex; - flex-direction: column; - gap: 2px; +.mega-menu-wrapper .mega-menu-inner .product-description:not(.offering-content) { + display: none !important; } -.mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) { +.mega-menu-wrapper .mega-menu-inner .video-content { + display: none; +} +.mega-menu-wrapper .mega-menu-inner .product-menu { display: flex; flex-direction: column; gap: 2px; @@ -21161,7 +21280,7 @@ Responsive Classes text-decoration: none; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover { - background-color: #f0faf4; + background-color: var(--menu-hover-bg); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo { background: #ffffff; @@ -21178,7 +21297,7 @@ Responsive Classes display: flex; align-items: center; justify-content: center; - background: #edf7f1; + background: var(--menu-icon-bg); border-radius: 8px; flex-shrink: 0; color: var(--ac-primary); @@ -21220,200 +21339,6 @@ Responsive Classes visibility: hidden; transition: opacity 0.13s ease, transform 0.13s ease; } -.mega-menu-wrapper .mega-menu-inner .product-description:not(.offering-content) { - display: none !important; -} - -.button.ac-button.inline-button { - border: none; - height: auto; - margin: 0; - padding: 0.5rem 0; - display: inline-flex; - align-items: center; - justify-content: flex-start; -} -.button.ac-button.inline-button:hover { - background-color: transparent; - border: none; - color: var(--ac-primary); -} -.button.ac-button.inline-button:hover .material-icons { - margin-left: 1rem; -} -.button.ac-button.inline-button .material-icons { - font-size: 1rem; - margin-left: 0.5rem; - transition: 0.3s ease-in-out; -} - -.community-items { - display: flex; - align-items: center; -} -.community-items .community-item { - border: 1px solid #636363; - display: flex; - align-items: center; - justify-content: center; - border-radius: 2px; - width: 2.5rem; - height: 2.5rem; - margin-right: 0.5rem; - transition: 0.3s; -} -.community-items .community-item:hover { - background-color: var(--ac-primary); - border-color: var(--ac-primary); -} -.community-items .community-item:hover img { - filter: brightness(10); -} -.community-items .community-item:last-child { - margin-right: 0; -} - -.responsive-menu { - background-color: var(--ac-primary); -} -.responsive-menu .button { - border: none; - padding-left: 0; - padding-right: 0; - font-size: 14px; - font-weight: 500; - background-color: transparent; - color: #ffffff; -} -.responsive-menu .button.is-active { - color: #d2d2d2; -} - -.product-version .dropdown .dropdown-trigger .button { - font-size: 0.813rem; - width: 210px; - height: 2rem; - border-radius: 2px; - padding: 2px 15px; - color: #171B1C; - border: 1px solid #e7e7e7; -} -.product-version .dropdown .dropdown-trigger .button .arrow { - color: #999999; - font-size: 0.9rem; -} -.product-version .dropdown .dropdown-menu * { - scrollbar-width: auto; - scrollbar-color: #ebebeb #fafafd; -} -.product-version .dropdown .dropdown-menu *::-webkit-scrollbar { - width: 12px; -} -.product-version .dropdown .dropdown-menu *::-webkit-scrollbar-track { - background: #fafafd; -} -.product-version .dropdown .dropdown-menu *::-webkit-scrollbar-thumb { - background-color: #ebebeb; - border-radius: 10px; - border: 3px solid #fafafd; -} -.product-version .dropdown .dropdown-menu .dropdown-content { - max-height: 420px; - overflow-y: auto; -} -.product-version .dropdown .dropdown-menu .dropdown-content .dropdown-item { - font-size: 0.813rem; - color: #171B1C; -} -.product-version .new-item { - background-color: var(--ac-primary); - font-size: 0.813rem; - color: #ffffff; - border-radius: 2px; - height: 1.2rem; - padding: 2px 5px; - line-height: 1.2; -} - -.ac-searchbar { - position: relative; - z-index: 1; - padding: 0 20px; - border-left: 1px solid #e7e7e7; -} -.ac-searchbar label .fa { - color: #171B1C; -} -.ac-searchbar input[type=search] { - border: none; - background-color: transparent; - color: #515D63; - font-size: 0.875rem; - width: 270px; - padding: 0.2rem 0.875rem; -} -.ac-searchbar input[type=search]:focus { - border: none; - outline: none; -} -.ac-searchbar input[type=search]::placeholder { - color: #5f5f5f; -} - -.header--fixed { - position: fixed; - z-index: 9999; - right: 0; - left: 0; - top: 0; -} -.header--fixed::after { - position: absolute; - content: ""; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: #ffffff; - z-index: -1; - transition: 0.5s ease-in-out; -} -.header--fixed.headroom--unpinned::after { - transition: transform 500ms linear; -} - -.headroom { - will-change: transform; - transition: transform 200ms linear; -} - -.headroom--pinned { - transform: translateY(0px); - transition: transform 500ms linear; -} - -.headroom--unpinned { - transform: translateY(-165px); -} -.headroom--unpinned .navbar-area.navbar-fixed { - transform: translateY(135px); -} -.headroom--unpinned .navbar-appscode-wrapper.navbar-product { - transform: translateY(104px); -} - -.navbar-burger { - height: 30px; - width: 30px; - border-radius: 4px; -} -.navbar-burger.is-active i.fa { - transform: rotate(-180deg); - transform-origin: 10px; -} -.navbar-burger span { - height: 1.5px; -} .resources-menu .mega-menu-wrapper { min-width: 260px; @@ -21441,7 +21366,7 @@ Responsive Classes display: flex !important; flex-direction: column; gap: 2px; - background: #f5faf7; + background: var(--menu-sidebar-bg); border-radius: 8px; padding: 0.375rem; overflow: hidden; @@ -21466,7 +21391,7 @@ Responsive Classes min-width: 40px; max-width: 40px; flex-shrink: 0; - background: #edf7f1; + background: var(--menu-icon-bg); border-radius: 8px; display: flex; align-items: center; @@ -21497,13 +21422,13 @@ Responsive Classes display: none !important; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover { - background-color: #f0faf4; + background-color: var(--menu-hover-bg); } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover .product-info h2 { color: #171B1C; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-logo { - background: #c8ecd6; + background: var(--menu-icon-active); } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-info h2 { font-weight: 600; @@ -21586,7 +21511,7 @@ Responsive Classes display: none !important; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover { - background-color: #f0faf4; + background-color: var(--menu-hover-bg); } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover .product-info h2 { color: var(--ac-primary); @@ -21611,6 +21536,117 @@ Responsive Classes } } +.community-items { + display: flex; + align-items: center; +} +.community-items .community-item { + border: 1px solid #636363; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + width: 2.5rem; + height: 2.5rem; + margin-right: 0.5rem; + transition: 0.3s; +} +.community-items .community-item:last-child { + margin-right: 0; +} +.community-items .community-item:hover { + background-color: var(--ac-primary); + border-color: var(--ac-primary); +} +.community-items .community-item:hover img { + filter: brightness(10); +} + +.responsive-menu { + background-color: var(--ac-primary); +} +.responsive-menu .button { + border: none; + padding-left: 0; + padding-right: 0; + font-size: 14px; + font-weight: 500; + background-color: transparent; + color: #ffffff; +} +.responsive-menu .button.is-active { + color: #d2d2d2; +} + +.product-version .dropdown .dropdown-trigger .button { + font-size: 0.813rem; + width: 210px; + height: 2rem; + border-radius: 2px; + padding: 2px 15px; + color: #171B1C; + border: 1px solid #e7e7e7; +} +.product-version .dropdown .dropdown-trigger .button .arrow { + color: #999999; + font-size: 0.9rem; +} +.product-version .dropdown .dropdown-menu * { + scrollbar-width: auto; + scrollbar-color: #ebebeb #fafafd; +} +.product-version .dropdown .dropdown-menu *::-webkit-scrollbar { + width: 12px; +} +.product-version .dropdown .dropdown-menu *::-webkit-scrollbar-track { + background: #fafafd; +} +.product-version .dropdown .dropdown-menu *::-webkit-scrollbar-thumb { + background-color: #ebebeb; + border-radius: 10px; + border: 3px solid #fafafd; +} +.product-version .dropdown .dropdown-menu .dropdown-content { + max-height: 420px; + overflow-y: auto; +} +.product-version .dropdown .dropdown-menu .dropdown-content .dropdown-item { + font-size: 0.813rem; + color: #171B1C; +} +.product-version .new-item { + background-color: var(--ac-primary); + font-size: 0.813rem; + color: #ffffff; + border-radius: 2px; + height: 1.2rem; + padding: 2px 5px; + line-height: 1.2; +} + +.button.ac-button.inline-button { + border: none; + height: auto; + margin: 0; + padding: 0.5rem 0; + display: inline-flex; + align-items: center; + justify-content: flex-start; +} +.button.ac-button.inline-button:hover { + background-color: transparent; + border: none; + color: var(--ac-primary); +} +.button.ac-button.inline-button:hover .material-icons { + margin-left: 1rem; +} +.button.ac-button.inline-button .material-icons { + font-size: 1rem; + margin-left: 0.5rem; + transition: 0.3s ease-in-out; +} + @media screen and (max-width: 1023px) { .navbar-burger { display: flex !important; @@ -21624,12 +21660,13 @@ Responsive Classes .navbar-burger span { background-color: #171B1C; } - .headroom--unpinned .navbar-appscode-wrapper.navbar-product { - padding: 0; - transform: translateY(104px); - } - .headroom--unpinned .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right { - top: 47px; + .navbar-appscode.container, .navbar-appscode { + height: 60px; + padding: 0 16px; + display: flex; + align-items: center; + justify-content: space-between; + background: #ffffff; } .navbar-appscode.container { padding: 0.5rem 15px; @@ -21646,14 +21683,6 @@ Responsive Classes width: 80%; border-right: 1px solid #e7e7e7; } - .navbar-appscode.container, .navbar-appscode { - height: 60px; - padding: 0 16px; - display: flex; - align-items: center; - justify-content: space-between; - background: #ffffff; - } .navbar-appscode .navbar-left { width: auto; flex: 1; @@ -21692,6 +21721,9 @@ Responsive Classes border-top: 1px solid #e7e7e7; gap: 0; } + .navbar-appscode .navbar-right.is-visible { + display: flex; + } .navbar-appscode .navbar-right .is-flex.is-justify-content-space-between { flex-direction: column; align-items: flex-start; @@ -21841,9 +21873,6 @@ Responsive Classes margin-top: 20px; gap: 8px; } - .navbar-appscode .navbar-right.is-visible { - display: flex; - } .mega-menu-wrapper { width: calc(100% + 40px) !important; min-width: 0 !important; @@ -21885,7 +21914,7 @@ Responsive Classes height: 40px; width: 40px; border-radius: 10px; - background: #edf7f1 !important; + background: var(--menu-icon-bg) !important; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { height: 24px; @@ -21908,7 +21937,7 @@ Responsive Classes color: var(--ac-primary); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active { - background-color: #f0faf4; + background-color: var(--menu-hover-bg); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .product-logo { background: #ffffff !important; @@ -21949,7 +21978,7 @@ Responsive Classes width: 100% !important; max-width: 100% !important; flex: unset !important; - background: #f5faf7; + background: var(--menu-sidebar-bg); margin-bottom: 8px; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container { @@ -21972,18 +22001,6 @@ Responsive Classes z-index: 9999; } } -.embeded-console-button { - height: 42px; - margin-bottom: 4px; - width: 185px; - overflow: hidden; -} -@media screen and (max-width: 768px) { - .embeded-console-button { - width: 100%; - } -} - @media screen and (min-width: 1024px) and (max-width: 1215px) { .navbar-burger { display: none !important; @@ -22018,9 +22035,6 @@ Responsive Classes flex-direction: column; width: 100%; } - .mega-menu-wrapper .mega-menu-inner .video-content { - display: none; - } .product-version.ml-20 { margin-left: 4px !important; } @@ -22051,14 +22065,14 @@ Responsive Classes flex-direction: column; width: 100%; } - .mega-menu-wrapper .mega-menu-inner .video-content { - display: none; - } } @media screen and (min-width: 1408px) { .navbar-appscode .navbar-left .navbar-brand { margin-right: 3rem; } + .mega-menu-wrapper .mega-menu-inner .video-content { + display: block; + } } .ac-preloader { position: fixed; From 8072a0fa19e74fffe5bf5c92e9202ee589bedb20 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 11:42:57 +0600 Subject: [PATCH 08/12] Remove resource nav Signed-off-by: mohin7 --- layouts/partials/menu/resource-card.html | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 layouts/partials/menu/resource-card.html diff --git a/layouts/partials/menu/resource-card.html b/layouts/partials/menu/resource-card.html deleted file mode 100644 index f2966d2fbc..0000000000 --- a/layouts/partials/menu/resource-card.html +++ /dev/null @@ -1,23 +0,0 @@ -{{ $url := .url | default "#" }} -{{ $title := .title | default "" }} -{{ $desc := .desc | default "" }} -{{ $icon := .icon | default "lucide:box" }} -{{ $iconImg := .iconImg | default "" }} -{{ $external := .external | default false }} - - -
    - {{ if $iconImg }} - {{ $title }} - {{ else }} - - {{ end }} -
    -
    - {{ $title }} - {{ if $desc }}{{ $desc }}{{ end }} -
    - - - -     From 25cbfa0d889a3fb24cbcea83304305bbfaa1aaa0 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 11:52:29 +0600 Subject: [PATCH 09/12] Refactor scss files Signed-off-by: mohin7 --- .../assets/sass/base/utilities/_themes.scss | 86 +++---------------- static/assets/sass/components/_navbar.scss | 26 +++--- static/assets/sass/main.css | 76 +++------------- 3 files changed, 40 insertions(+), 148 deletions(-) diff --git a/static/assets/sass/base/utilities/_themes.scss b/static/assets/sass/base/utilities/_themes.scss index 9b99796bf7..c06e662196 100644 --- a/static/assets/sass/base/utilities/_themes.scss +++ b/static/assets/sass/base/utilities/_themes.scss @@ -1,11 +1,5 @@ :root { - --ac-primary: #00a651; - - // Navbar menu tints — derived from --ac-primary, overridden per product below - --menu-icon-bg: #edf7f1; // icon container resting fill (primary ~8% opacity) - --menu-hover-bg: #f0faf4; // row hover background (primary ~5% opacity) - --menu-icon-active: #c8ecd6; // icon container active state (primary ~22% opacity) - --menu-sidebar-bg: #f5faf7; // services left-panel tint (primary ~3% opacity) + --ac-primary: #00a651; } $ac-primary: var(--ac-primary); @@ -29,106 +23,54 @@ body { // --ac-primary: #{$ac-primary}; &.guard { - --ac-primary: #{$guard-primary}; - --menu-icon-bg: #fdf0ec; - --menu-hover-bg: #fef5f2; - --menu-icon-active: #f8cfc4; - --menu-sidebar-bg: #fef8f6; + --ac-primary: #{$guard-primary}; } &.kubedb { - --ac-primary: #{$kubedb-primary}; - --menu-icon-bg: #ededfb; - --menu-hover-bg: #f3f3fd; - --menu-icon-active: #c5c5f0; - --menu-sidebar-bg: #f7f7fe; + --ac-primary: #{$kubedb-primary}; } &.kubeci { - --ac-primary: #{$kubeci-primary}; - --menu-icon-bg: #e8ebee; - --menu-hover-bg: #f0f2f4; - --menu-icon-active: #bec7cf; - --menu-sidebar-bg: #f5f6f8; + --ac-primary: #{$kubeci-primary}; } &.kubed { - --ac-primary: #{$kubed-primary}; - --menu-icon-bg: #e8f3fc; - --menu-hover-bg: #f0f7fd; - --menu-icon-active: #bcd9f5; - --menu-sidebar-bg: #f5fafe; + --ac-primary: #{$kubed-primary}; } &.kubesheild { - --ac-primary: #{$kubesheild-primary}; - --menu-icon-bg: #eae9fb; - --menu-hover-bg: #f2f2fd; - --menu-icon-active: #bfbbf4; - --menu-sidebar-bg: #f6f6fe; + --ac-primary: #{$kubesheild-primary}; } &.kubevault { - --ac-primary: #{$kubevault-primary}; - --menu-icon-bg: #e8eefb; - --menu-hover-bg: #f0f4fd; - --menu-icon-active: #bccef5; - --menu-sidebar-bg: #f5f7fe; + --ac-primary: #{$kubevault-primary}; } &.kubeform { - --ac-primary: #{$kubeform-primary}; - --menu-icon-bg: #f0eae9; - --menu-hover-bg: #f6f2f1; - --menu-icon-active: #d9bcb9; - --menu-sidebar-bg: #f9f6f5; + --ac-primary: #{$kubeform-primary}; } &.searchlight { - --ac-primary: #{$searchlight-primary}; - --menu-icon-bg: #e7e8ec; - --menu-hover-bg: #eff0f3; - --menu-icon-active: #bcbfca; - --menu-sidebar-bg: #f4f5f7; + --ac-primary: #{$searchlight-primary}; } &.pharmer { - --ac-primary: #{$pharmer-primary}; - --menu-icon-bg: #f3edf7; - --menu-hover-bg: #f8f3fb; - --menu-icon-active: #dcc2ea; - --menu-sidebar-bg: #faf7fc; + --ac-primary: #{$pharmer-primary}; } &.service-broker { - --ac-primary: #{$service-broker-primary}; - --menu-icon-bg: #e8f8f6; - --menu-hover-bg: #f0fbfa; - --menu-icon-active: #bceae5; - --menu-sidebar-bg: #f4fdfb; + --ac-primary: #{$service-broker-primary}; } &.stash { - --ac-primary: #{$stash-primary}; - --menu-icon-bg: #eeebfc; - --menu-hover-bg: #f4f2fd; - --menu-icon-active: #cfc5f6; - --menu-sidebar-bg: #f8f7fe; + --ac-primary: #{$stash-primary}; } &.swift { - --ac-primary: #{$swift-primary}; - --menu-icon-bg: #eaecf8; - --menu-hover-bg: #f1f2fb; - --menu-icon-active: #c0c5ee; - --menu-sidebar-bg: #f5f6fc; + --ac-primary: #{$swift-primary}; } &.voyager { - --ac-primary: #{$voyager-primary}; - --menu-icon-bg: #eaeaf5; - --menu-hover-bg: #f1f1f9; - --menu-icon-active: #bfbfe3; - --menu-sidebar-bg: #f5f5fb; + --ac-primary: #{$voyager-primary}; } } diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index c78730f031..16be764bbd 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -1,3 +1,9 @@ +// Menu item interaction +$menu-hover-bg: #f0faf4; // row hover background +$menu-icon-bg: #edf7f1; // icon container resting fill +$menu-icon-bg-active: #c8ecd6; // icon container active/selected fill +$menu-sidebar-bg: #f5faf7; // services left-panel background + // Shared transitions $t-fast: 0.13s ease; // micro-interactions (hover, opacity) $t-medium: 0.2s ease; // chevron rotate, menu reveal @@ -403,7 +409,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing text-decoration: none; &:hover { - background-color: var(--menu-hover-bg); + background-color: $menu-hover-bg; .product-logo { background: $ac-white; @@ -423,7 +429,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing display: flex; align-items: center; justify-content: center; - background: var(--menu-icon-bg); + background: $menu-icon-bg; border-radius: $menu-icon-radius; flex-shrink: 0; color: $ac-primary; @@ -502,7 +508,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing display: flex !important; flex-direction: column; gap: 2px; - background: var(--menu-sidebar-bg); + background: $menu-sidebar-bg; border-radius: $menu-icon-radius; padding: 0.375rem; overflow: hidden; @@ -527,7 +533,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing min-width: $menu-icon-size; max-width: $menu-icon-size; flex-shrink: 0; - background: var(--menu-icon-bg); + background: $menu-icon-bg; border-radius: $menu-icon-radius; display: flex; align-items: center; @@ -556,12 +562,12 @@ $menu-letter-sp: -0.01em; // heading letter-spacing .navigate-icon { display: none !important; } &:hover { - background-color: var(--menu-hover-bg); + background-color: $menu-hover-bg; .product-info h2 { color: $ac-color-heading; } } &.is-active { - .product-logo { background: var(--menu-icon-active); } + .product-logo { background: $menu-icon-bg-active; } .product-info h2 { font-weight: 600; color: $ac-color-heading; } } } @@ -644,7 +650,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing .navigate-icon { display: none !important; } &:hover { - background-color: var(--menu-hover-bg); + background-color: $menu-hover-bg; .product-info h2 { color: $ac-primary; @@ -1051,7 +1057,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing height: $menu-icon-size; width: $menu-icon-size; border-radius: 10px; - background: var(--menu-icon-bg) !important; + background: $menu-icon-bg !important; img { height: 24px; width: 24px; } } @@ -1070,7 +1076,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing &:hover, &.is-active { - background-color: var(--menu-hover-bg); + background-color: $menu-hover-bg; .product-logo { background: $ac-white !important; } .navigate-icon .icon { opacity: 1; visibility: visible; } } @@ -1109,7 +1115,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing width: 100% !important; max-width: 100% !important; flex: unset !important; - background: var(--menu-sidebar-bg); + background: $menu-sidebar-bg; margin-bottom: 8px; } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index 0c5b7c3bcc..448f237af9 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -18147,102 +18147,46 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { :root { --ac-primary: #00a651; - --menu-icon-bg: #edf7f1; - --menu-hover-bg: #f0faf4; - --menu-icon-active: #c8ecd6; - --menu-sidebar-bg: #f5faf7; } body.guard { --ac-primary: #d84e27; - --menu-icon-bg: #fdf0ec; - --menu-hover-bg: #fef5f2; - --menu-icon-active: #f8cfc4; - --menu-sidebar-bg: #fef8f6; } body.kubedb { --ac-primary: #4d4dcb; - --menu-icon-bg: #ededfb; - --menu-hover-bg: #f3f3fd; - --menu-icon-active: #c5c5f0; - --menu-sidebar-bg: #f7f7fe; } body.kubeci { --ac-primary: #2c3e50; - --menu-icon-bg: #e8ebee; - --menu-hover-bg: #f0f2f4; - --menu-icon-active: #bec7cf; - --menu-sidebar-bg: #f5f6f8; } body.kubed { --ac-primary: #1c7bd4; - --menu-icon-bg: #e8f3fc; - --menu-hover-bg: #f0f7fd; - --menu-icon-active: #bcd9f5; - --menu-sidebar-bg: #f5fafe; } body.kubesheild { --ac-primary: #2516c7; - --menu-icon-bg: #eae9fb; - --menu-hover-bg: #f2f2fd; - --menu-icon-active: #bfbbf4; - --menu-sidebar-bg: #f6f6fe; } body.kubevault { --ac-primary: #326ce5; - --menu-icon-bg: #e8eefb; - --menu-hover-bg: #f0f4fd; - --menu-icon-active: #bccef5; - --menu-sidebar-bg: #f5f7fe; } body.kubeform { --ac-primary: #592217; - --menu-icon-bg: #f0eae9; - --menu-hover-bg: #f6f2f1; - --menu-icon-active: #d9bcb9; - --menu-sidebar-bg: #f9f6f5; } body.searchlight { --ac-primary: #111738; - --menu-icon-bg: #e7e8ec; - --menu-hover-bg: #eff0f3; - --menu-icon-active: #bcbfca; - --menu-sidebar-bg: #f4f5f7; } body.pharmer { --ac-primary: #8e44ad; - --menu-icon-bg: #f3edf7; - --menu-hover-bg: #f8f3fb; - --menu-icon-active: #dcc2ea; - --menu-sidebar-bg: #faf7fc; } body.service-broker { --ac-primary: #29b4a2; - --menu-icon-bg: #e8f8f6; - --menu-hover-bg: #f0fbfa; - --menu-icon-active: #bceae5; - --menu-sidebar-bg: #f4fdfb; } body.stash { --ac-primary: #5e2dea; - --menu-icon-bg: #eeebfc; - --menu-hover-bg: #f4f2fd; - --menu-icon-active: #cfc5f6; - --menu-sidebar-bg: #f8f7fe; } body.swift { --ac-primary: #3f51b6; - --menu-icon-bg: #eaecf8; - --menu-hover-bg: #f1f2fb; - --menu-icon-active: #c0c5ee; - --menu-sidebar-bg: #f5f6fc; } body.voyager { --ac-primary: #2d2a78; - --menu-icon-bg: #eaeaf5; - --menu-hover-bg: #f1f1f9; - --menu-icon-active: #bfbfe3; - --menu-sidebar-bg: #f5f5fb; } html, @@ -21280,7 +21224,7 @@ Responsive Classes text-decoration: none; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover { - background-color: var(--menu-hover-bg); + background-color: #f0faf4; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo { background: #ffffff; @@ -21297,7 +21241,7 @@ Responsive Classes display: flex; align-items: center; justify-content: center; - background: var(--menu-icon-bg); + background: #edf7f1; border-radius: 8px; flex-shrink: 0; color: var(--ac-primary); @@ -21366,7 +21310,7 @@ Responsive Classes display: flex !important; flex-direction: column; gap: 2px; - background: var(--menu-sidebar-bg); + background: #f5faf7; border-radius: 8px; padding: 0.375rem; overflow: hidden; @@ -21391,7 +21335,7 @@ Responsive Classes min-width: 40px; max-width: 40px; flex-shrink: 0; - background: var(--menu-icon-bg); + background: #edf7f1; border-radius: 8px; display: flex; align-items: center; @@ -21422,13 +21366,13 @@ Responsive Classes display: none !important; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover { - background-color: var(--menu-hover-bg); + background-color: #f0faf4; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover .product-info h2 { color: #171B1C; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-logo { - background: var(--menu-icon-active); + background: #c8ecd6; } .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-info h2 { font-weight: 600; @@ -21511,7 +21455,7 @@ Responsive Classes display: none !important; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover { - background-color: var(--menu-hover-bg); + background-color: #f0faf4; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover .product-info h2 { color: var(--ac-primary); @@ -21914,7 +21858,7 @@ Responsive Classes height: 40px; width: 40px; border-radius: 10px; - background: var(--menu-icon-bg) !important; + background: #edf7f1 !important; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img { height: 24px; @@ -21937,7 +21881,7 @@ Responsive Classes color: var(--ac-primary); } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active { - background-color: var(--menu-hover-bg); + background-color: #f0faf4; } .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .product-logo { background: #ffffff !important; @@ -21978,7 +21922,7 @@ Responsive Classes width: 100% !important; max-width: 100% !important; flex: unset !important; - background: var(--menu-sidebar-bg); + background: #f5faf7; margin-bottom: 8px; } .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container { From ecdca3d613fa176c8b43ab39fe1a47ab2c0e0095 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 14:34:35 +0600 Subject: [PATCH 10/12] Update border radius for buttons Signed-off-by: mohin7 --- layouts/_default/embed_console.html | 2 +- static/assets/sass/components/_button.scss | 4 ++-- static/assets/sass/main.css | 6 +++--- static/assets/sass/pages/_homepage-2026.scss | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/layouts/_default/embed_console.html b/layouts/_default/embed_console.html index 1e120d9f53..26a14c903c 100644 --- a/layouts/_default/embed_console.html +++ b/layouts/_default/embed_console.html @@ -15,7 +15,7 @@ .button.ac-button { border:1px solid var(--ac-primary, #1c1c1c); height: 38px; - border-radius: 0.125rem; + border-radius: 8px; padding-inline: 24px; font-size: .875rem; font-family: roboto,sans-serif; diff --git a/static/assets/sass/components/_button.scss b/static/assets/sass/components/_button.scss index 82c28a997e..78051664b8 100644 --- a/static/assets/sass/components/_button.scss +++ b/static/assets/sass/components/_button.scss @@ -3,7 +3,7 @@ &.ac-button { border-color: $ac-primary; - border-radius: 0.125rem; + border-radius: 8px; font-size: 0.875rem; font-family: $ac-font-paragraph; letter-spacing: 0; @@ -41,7 +41,7 @@ background-color: $ac-white; color: $ac-primary; padding: 2px 6px; - border-radius: 4px; + border-radius: 8px; width: 28px; height: 28px; } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index 448f237af9..bc51d628a9 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -22239,7 +22239,7 @@ a.nav-link.active:after { } .button.ac-button { border-color: var(--ac-primary); - border-radius: 0.125rem; + border-radius: 8px; font-size: 0.875rem; font-family: "Roboto", sans-serif; letter-spacing: 0; @@ -22275,7 +22275,7 @@ a.nav-link.active:after { background-color: #ffffff; color: var(--ac-primary); padding: 2px 6px; - border-radius: 4px; + border-radius: 8px; width: 28px; height: 28px; } @@ -25988,7 +25988,7 @@ Responsive Classes ***********************************************************************************************/ button.ac-button, .button.ac-button { - border-radius: 4px !important; + border-radius: 8px !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0 !important; diff --git a/static/assets/sass/pages/_homepage-2026.scss b/static/assets/sass/pages/_homepage-2026.scss index 9f6276b91c..aa755a1e35 100644 --- a/static/assets/sass/pages/_homepage-2026.scss +++ b/static/assets/sass/pages/_homepage-2026.scss @@ -74,7 +74,7 @@ $color-accent-blue-soft: #f8faff; // product header background button.ac-button, .button.ac-button { - border-radius: 4px !important; + border-radius: 8px !important; font-weight: 700 !important; font-size: $font-size-normal !important; // 14px letter-spacing: 0 !important; From a537b48f388bda66f1b235b5e454d48ae667166e Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 18:22:17 +0600 Subject: [PATCH 11/12] Move left nav items to the right side Signed-off-by: mohin7 --- layouts/partials/header/header.html | 61 +++++++++++----------- static/assets/sass/components/_navbar.scss | 54 +++++++++++++++++-- static/assets/sass/main.css | 54 +++++++++++++++++-- 3 files changed, 133 insertions(+), 36 deletions(-) diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index 2e20defafa..329f932c01 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -54,7 +54,37 @@
      -
    • + +
    + + + + +
    +
      +
    • @@ -389,35 +419,6 @@

      {{ $offering.title }}

      • -
    - - - - -
    -
    • Partner
      • diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index 16be764bbd..a46f83d20b 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -190,6 +190,10 @@ $menu-letter-sp: -0.01em; // heading letter-spacing opacity: 1 !important; pointer-events: auto !important; transform: translateX(-30%) translateY(0px) !important; + + @media (max-width: 1023px) { + transform: translateX(0) !important; + } } } @@ -856,7 +860,7 @@ $menu-letter-sp: -0.01em; // heading letter-spacing display: none; position: fixed; z-index: 998; - top: 100px; + top: 60px; left: 0; right: 0; width: 100%; @@ -971,9 +975,11 @@ $menu-letter-sp: -0.01em; // heading letter-spacing flex-direction: column; width: 100%; gap: 0; - margin: 0 0 16px; + margin: 0; li.nav-item { + width: 100%; + margin: 0; border-bottom: 1px solid $ac-white-lighter; &:last-child { border-bottom: none; } @@ -981,13 +987,52 @@ $menu-letter-sp: -0.01em; // heading letter-spacing .link { display: flex; width: 100%; - padding: 14px 4px; + padding: 15px 4px; font-size: $font-size-semi-normal; font-weight: 500; + line-height: 1.3; + justify-content: space-between; + align-items: center; border-radius: 0; color: $ac-color-heading; transition: color $t-fast; + &:hover { color: $ac-primary; background: transparent; } + + .fa { + font-size: $font-size-extra-small; + color: $color-text-muted; + transition: transform $t-medium; + } + } + + .mega-menu-wrapper { + display: none; + position: static !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + transform: none !important; + left: auto !important; + top: auto !important; + padding: 8px 0 12px !important; + background: $color-surface-subtle; + box-shadow: none; + border: none; + border-top: 1px solid $color-border-light; + border-bottom: 1px solid $color-border-light; + border-radius: 0; + } + + &.is-active { + .link { + color: $ac-primary; + background: transparent; + .fa { transform: rotate(-180deg); color: $ac-primary; } + } + .mega-menu-wrapper { display: block !important; } } } } @@ -996,6 +1041,9 @@ $menu-letter-sp: -0.01em; // heading letter-spacing width: 100%; flex-direction: column; gap: 10px; + padding-top: 16px; + margin-top: 8px; + border-top: 1px solid $color-border-light; iframe { width: 100%; height: 44px; } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index bc51d628a9..914b8f0e5e 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -21017,6 +21017,11 @@ Responsive Classes pointer-events: auto !important; transform: translateX(-30%) translateY(0px) !important; } +@media (max-width: 1023px) { + .navbar-appscode ul .nav-item.is-active .mega-menu-wrapper { + transform: translateX(0) !important; + } +} .navbar-appscode ul .nav-item .link { font-size: 14px; font-weight: 500; @@ -21651,7 +21656,7 @@ Responsive Classes display: none; position: fixed; z-index: 998; - top: 100px; + top: 60px; left: 0; right: 0; width: 100%; @@ -21776,9 +21781,11 @@ Responsive Classes flex-direction: column; width: 100%; gap: 0; - margin: 0 0 16px; + margin: 0; } .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item { + width: 100%; + margin: 0; border-bottom: 1px solid #f1f1f1; } .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item:last-child { @@ -21787,9 +21794,12 @@ Responsive Classes .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link { display: flex; width: 100%; - padding: 14px 4px; + padding: 15px 4px; font-size: 15px; font-weight: 500; + line-height: 1.3; + justify-content: space-between; + align-items: center; border-radius: 0; color: #171B1C; transition: color 0.13s ease; @@ -21798,10 +21808,48 @@ Responsive Classes color: var(--ac-primary); background: transparent; } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link .fa { + font-size: 12px; + color: #6a7282; + transition: transform 0.2s ease; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .mega-menu-wrapper { + display: none; + position: static !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + transform: none !important; + left: auto !important; + top: auto !important; + padding: 8px 0 12px !important; + background: #fafafa; + box-shadow: none; + border: none; + border-top: 1px solid #e5e7eb; + border-bottom: 1px solid #e5e7eb; + border-radius: 0; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item.is-active .link { + color: var(--ac-primary); + background: transparent; + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item.is-active .link .fa { + transform: rotate(-180deg); + color: var(--ac-primary); + } + .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item.is-active .mega-menu-wrapper { + display: block !important; + } .navbar-appscode .navbar-right .navbar-right-group .buttons { width: 100%; flex-direction: column; gap: 10px; + padding-top: 16px; + margin-top: 8px; + border-top: 1px solid #e5e7eb; } .navbar-appscode .navbar-right .navbar-right-group .buttons iframe { width: 100%; From 595b5e069b595f826528aa7e09de0020a30c2f8c Mon Sep 17 00:00:00 2001 From: mohin7 Date: Thu, 4 Jun 2026 18:26:13 +0600 Subject: [PATCH 12/12] Fix responsive issues Signed-off-by: mohin7 --- static/assets/sass/components/_navbar.scss | 3 +++ static/assets/sass/main.css | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index a46f83d20b..75f495b244 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -873,6 +873,9 @@ $menu-letter-sp: -0.01em; // heading letter-spacing justify-content: flex-start; border-top: 1px solid $ac-white-light; gap: 0; + @include touch { + top: 100px; + } &.is-visible { display: flex; } diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index 914b8f0e5e..d7486be279 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -21670,6 +21670,13 @@ Responsive Classes border-top: 1px solid #e7e7e7; gap: 0; } +} +@media screen and (max-width: 1023px) and (max-width: 1023px) { + .navbar-appscode .navbar-right { + top: 100px; + } +} +@media screen and (max-width: 1023px) { .navbar-appscode .navbar-right.is-visible { display: flex; }