@onetype/framework 2.0.52 → 2.0.54

package/addons/render/elements/front/items/self/navigation/navbar/navbar.css

@@ -2,186 +2,846 @@
 
 .e-64d8716d
 {
-	display: flex;
-	flex-direction: column;
+	display: block;
 	width: 100%;
 }
 
 /* Holder */
 
 .e-64d8716d > .holder
+{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background: var(--ot-bg-1);
+	border-bottom: 1px solid transparent;
+	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	z-index: 100;
+}
+
+/* Sticky */
+
+.e-64d8716d > .holder.sticky
+{
+	position: sticky;
+	top: 0;
+}
+
+/* Blur (glassmorphism) */
+
+.e-64d8716d > .holder.blur
+{
+	background: rgba(255, 255, 255, 0.72);
+	backdrop-filter: saturate(180%) blur(20px);
+	-webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+body.dark .e-64d8716d > .holder.blur
+{
+	background: rgba(20, 20, 22, 0.72);
+}
+
+/* Scroll hide */
+
+.e-64d8716d > .holder.hidden
+{
+	transform: translateY(-100%);
+}
+
+/* Shrunk on scroll */
+
+.e-64d8716d > .holder.shrunk
+{
+	box-shadow: 0 1px 0 0 var(--ot-bg-2-border), 0 12px 32px -18px rgba(20, 20, 30, 0.08);
+}
+
+/* ===== BANNER (top slot) ===== */
+
+.e-64d8716d > .holder > .banner
 {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	width: 100%;
-	height: var(--ot-height-l);
-	padding: 0 var(--ot-spacing-m);
+	padding: var(--ot-spacing-s) var(--ot-spacing-l);
+	background: var(--ot-brand-opacity);
 	border-bottom: 1px solid var(--ot-bg-2-border);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-1);
 }
 
-/* Logo */
+/* ===== ACTIONS SLOT (right section) ===== */
 
-.e-64d8716d > .holder > .logo
+.e-64d8716d > .holder > .bar > .section > .actions
 {
 	display: flex;
 	align-items: center;
-	text-decoration: none;
-	flex-shrink: 0;
+	gap: var(--ot-spacing-s);
 }
 
-.e-64d8716d > .holder > .logo > .logo-icon
+/* ===== BAR ===== */
+
+.e-64d8716d > .holder > .bar
 {
-	height: var(--ot-size-m);
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	width: 100%;
+	height: 64px;
+	padding: 0 var(--ot-spacing-l);
+	transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.e-64d8716d > .holder > .logo > .logo-arrow
+.e-64d8716d > .holder.shrunk > .bar
 {
-	display: none;
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
+	height: 56px;
+}
+
+/* Border bottom variant */
+
+.e-64d8716d > .holder.border-bottom
+{
+	border-bottom-color: var(--ot-bg-2-border);
+}
+
+/* Clean variant */
+
+.e-64d8716d > .holder.clean
+{
+	background: transparent !important;
+	border-bottom-color: transparent !important;
 }
 
-/* Tabs */
+/* Background variants */
+
+.e-64d8716d > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-64d8716d > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-64d8716d > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-64d8716d > .holder.bg-4 { background: var(--ot-bg-4); }
+
+/* ===== SECTIONS ===== */
 
-.e-64d8716d > .holder > .tabs
+.e-64d8716d > .holder > .bar > .section
 {
 	display: flex;
 	align-items: center;
-	margin-left: var(--ot-spacing-m);
-	border-left: 1px solid var(--ot-bg-2-border);
-	height: 100%;
+	gap: var(--ot-spacing-s);
+	min-width: 0;
+}
+
+.e-64d8716d > .holder > .bar > .section.left
+{
+	flex: 1 1 auto;
+}
+
+.e-64d8716d > .holder > .bar > .section.center
+{
+	flex: 1 1 auto;
+	justify-content: center;
+}
+
+.e-64d8716d > .holder > .bar > .section.right
+{
+	flex: 0 1 auto;
+	margin-left: auto;
 }
 
-.e-64d8716d > .holder .tab
+/* ===== BRAND ===== */
+
+.e-64d8716d > .holder > .bar > .section > .brand
+{
+	display: inline-flex;
+	align-items: center;
+	padding: 6px 8px;
+	margin-left: -8px;
+	border-radius: var(--ot-radius-s);
+	text-decoration: none;
+	color: inherit;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-64d8716d > .holder > .bar > .section > .brand:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.e-64d8716d > .holder > .bar > .section > .brand > .brand-logo
+{
+	display: block;
+	height: 24px;
+	width: auto;
+}
+
+/* ===== CRUMBS ===== */
+
+.e-64d8716d > .holder > .bar > .section > .crumbs
 {
 	display: flex;
 	align-items: center;
-	height: 100%;
-	gap: var(--ot-spacing-s);
-	padding: 0 var(--ot-spacing-m);
-	border-right: 1px solid var(--ot-bg-2-border);
+	gap: 4px;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.e-64d8716d > .holder > .bar > .section > .crumbs > .crumb
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 8px;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-2);
 	text-decoration: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 	white-space: nowrap;
-	transition: color 0.15s ease, background 0.15s ease;
+	position: relative;
+}
+
+.e-64d8716d > .holder > .bar > .section > .crumbs > .crumb:not(:last-child)
+{
+	margin-right: 12px;
+}
+
+.e-64d8716d > .holder > .bar > .section > .crumbs > .crumb:not(:last-child)::after
+{
+	content: '/';
+	position: absolute;
+	right: -10px;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--ot-text-3);
+	font-weight: 400;
+	opacity: 0.6;
+}
+
+.e-64d8716d > .holder > .bar > .section > .crumbs > .crumb:hover
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+}
+
+.e-64d8716d > .holder > .bar > .section > .crumbs > .crumb:last-child
+{
+	color: var(--ot-text-1);
+	font-weight: 600;
+}
+
+.e-64d8716d > .holder > .bar > .section > .crumbs > .crumb > i
+{
+	font-size: 16px;
+}
+
+/* ===== NAV ===== */
+
+.e-64d8716d > .holder > .bar > .section .nav
+{
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.e-64d8716d > .holder > .bar > .section .nav .nav-item
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 12px;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
 	font-weight: 500;
 	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+	white-space: nowrap;
+	cursor: pointer;
 }
 
-.e-64d8716d > .holder .tab > i
+.e-64d8716d > .holder > .bar > .section .nav .nav-item:hover:not(.disabled)
 {
-	font-size: var(--ot-size-m);
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
 }
 
-.e-64d8716d > .holder .tab:hover,
-.e-64d8716d > .holder .tab.active
+.e-64d8716d > .holder > .bar > .section .nav .nav-item.active
 {
 	color: var(--ot-text-1);
+	background: var(--ot-bg-2);
+	font-weight: 600;
 }
 
-/* Right */
+.e-64d8716d > .holder > .bar > .section .nav .nav-item.disabled
+{
+	opacity: 0.45;
+	cursor: not-allowed;
+	pointer-events: none;
+}
 
-.e-64d8716d > .holder > .right
+.e-64d8716d > .holder > .bar > .section .nav .nav-item > i
 {
-	display: flex;
+	font-size: 18px;
+}
+
+.e-64d8716d > .holder > .bar > .section .nav .nav-item > .nav-chevron
+{
+	font-size: 16px;
+	opacity: 0.5;
+	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-64d8716d > .holder > .bar > .section .nav .nav-item.has-children:hover > .nav-chevron
+{
+	transform: rotate(180deg);
+}
+
+.e-64d8716d > .holder > .bar > .section .nav .nav-item > .nav-badge
+{
+	display: inline-flex;
 	align-items: center;
-	margin-left: auto;
-	border-left: 1px solid var(--ot-bg-2-border);
+	justify-content: center;
+	min-width: 18px;
+	height: 18px;
+	padding: 0 5px;
+	background: var(--ot-brand);
+	color: #fff;
+	border-radius: 100px;
+	font-size: 10px;
+	font-weight: 700;
+	line-height: 1;
+}
+
+/* ===== BELL (notifications) ===== */
+
+.e-64d8716d > .holder > .bar > .section .bell
+{
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 38px;
+	height: 38px;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-64d8716d > .holder > .bar > .section .bell:hover
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+}
+
+.e-64d8716d > .holder > .bar > .section .bell > i
+{
+	font-size: 20px;
+}
+
+.e-64d8716d > .holder > .bar > .section .bell > .bell-badge
+{
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 16px;
+	height: 16px;
+	padding: 0 4px;
+	background: var(--ot-red);
+	color: #fff;
+	border: 2px solid var(--ot-bg-1);
+	border-radius: 100px;
+	font-size: 9px;
+	font-weight: 700;
+	line-height: 1;
+}
+
+/* ===== USER TRIGGER ===== */
+
+.e-64d8716d > .holder > .bar > .section .user-trigger
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 6px 4px 4px;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: 100px;
+	cursor: pointer;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-64d8716d > .holder > .bar > .section .user-trigger:hover
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-2-border);
+}
+
+.e-64d8716d > .holder > .bar > .section .user-avatar-small
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--ot-bg-3);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+.e-64d8716d > .holder > .bar > .section .user-avatar-small > img
+{
+	width: 100%;
 	height: 100%;
+	object-fit: cover;
 }
 
-/* Burger */
+.e-64d8716d > .holder > .bar > .section .user-avatar-small.user-avatar-fallback > i
+{
+	font-size: 18px;
+}
+
+.e-64d8716d > .holder > .bar > .section .user-chevron > i
+{
+	font-size: 18px;
+	color: var(--ot-text-3);
+}
+
+/* ===== BURGER ===== */
 
-.e-64d8716d > .holder > .burger
+.e-64d8716d > .holder > .bar > .burger
 {
 	display: none;
 	align-items: center;
 	justify-content: center;
-	width: var(--ot-height-m);
-	height: var(--ot-height-m);
-	margin-left: auto;
-	background: none;
+	width: 40px;
+	height: 40px;
+	background: transparent;
 	border: none;
-	color: var(--ot-text-2);
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-1);
 	cursor: pointer;
+	margin-left: auto;
+}
+
+.e-64d8716d > .holder > .bar > .burger:hover
+{
+	background: var(--ot-bg-2);
 }
 
-.e-64d8716d > .holder > .burger > i
+.e-64d8716d > .holder > .bar > .burger > i
 {
-	font-size: var(--ot-size-l);
+	font-size: 22px;
 }
 
-/* Menu */
+/* ===== MOBILE DRAWER ===== */
 
-.e-64d8716d > .menu
+.e-64d8716d > .holder > .drawer
 {
 	display: none;
 	flex-direction: column;
-	border-bottom: 1px solid var(--ot-bg-2-border);
+	padding: var(--ot-spacing-m) var(--ot-spacing-l) var(--ot-spacing-l);
+	border-top: 1px solid var(--ot-bg-2-border);
+	max-height: calc(100vh - 64px);
+	overflow-y: auto;
+	animation: e-64d8716d-drawer-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes e-64d8716d-drawer-in
+{
+	from { opacity: 0; transform: translateY(-4px); }
+	to { opacity: 1; transform: translateY(0); }
 }
 
-.e-64d8716d > .menu > .link
+.e-64d8716d > .holder > .drawer > .drawer-user
 {
 	display: flex;
 	align-items: center;
 	gap: var(--ot-spacing-s);
-	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
+	background: var(--ot-bg-2);
+	border-radius: var(--ot-radius-m);
+	margin-bottom: var(--ot-spacing-m);
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-user > .drawer-user-avatar
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--ot-bg-3);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-user > .drawer-user-avatar > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-user > .drawer-user-avatar.drawer-user-avatar-fallback > i
+{
+	font-size: 22px;
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-user > .drawer-user-text
+{
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-user > .drawer-user-text > .drawer-user-name
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-user > .drawer-user-text > .drawer-user-email
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+}
+
+.e-64d8716d > .holder > .drawer > .drawer-nav,
+.e-64d8716d > .holder > .drawer > .drawer-user-menu
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.e-64d8716d > .holder > .drawer .drawer-item
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: 12px 14px;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
 	font-size: var(--ot-size-m);
 	font-weight: 500;
+	color: var(--ot-text-1);
+	text-decoration: none;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-64d8716d > .holder > .drawer .drawer-item:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.e-64d8716d > .holder > .drawer .drawer-item.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+.e-64d8716d > .holder > .drawer .drawer-item > i
+{
+	font-size: 20px;
+}
+
+.e-64d8716d > .holder > .drawer .drawer-item > .drawer-badge
+{
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 6px;
+	background: var(--ot-brand);
+	color: #fff;
+	border-radius: 100px;
+	font-size: 10px;
+	font-weight: 700;
+}
+
+.e-64d8716d > .holder > .drawer .drawer-group
+{
+	margin: var(--ot-spacing-s) 0;
+}
+
+.e-64d8716d > .holder > .drawer .drawer-group > .drawer-group-head
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: 10px 14px;
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+}
+
+.e-64d8716d > .holder > .drawer .drawer-group > .drawer-group-head > i
+{
+	font-size: 16px;
+}
+
+.e-64d8716d > .holder > .drawer .drawer-group > .drawer-child
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: 10px 14px 10px 36px;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
 	color: var(--ot-text-2);
 	text-decoration: none;
-	border-bottom: 1px solid var(--ot-bg-2-border);
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.e-64d8716d > .menu > .link > i
+.e-64d8716d > .holder > .drawer .drawer-group > .drawer-child:hover
 {
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+}
+
+.e-64d8716d > .holder > .drawer .drawer-separator
+{
+	height: 1px;
+	background: var(--ot-bg-2-border);
+	margin: var(--ot-spacing-s) 0;
+}
+
+/* ===== DROPDOWN (navbar items children) ===== */
+
+.navbar-dropdown
+{
+	display: flex;
+	flex-direction: column;
+	padding: 6px;
+	background: var(--ot-bg-1);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	box-shadow: 0 12px 32px -12px rgba(20, 20, 30, 0.16);
+	min-width: 240px;
+	max-width: 320px;
+}
+
+.navbar-dropdown > .dropdown-item
+{
+	display: flex;
+	align-items: flex-start;
+	gap: var(--ot-spacing-s);
+	padding: 10px 12px;
+	border-radius: var(--ot-radius-s);
+	text-decoration: none;
+	color: var(--ot-text-1);
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.navbar-dropdown > .dropdown-item:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.navbar-dropdown > .dropdown-item > .dropdown-icon
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+	flex-shrink: 0;
+}
+
+.navbar-dropdown > .dropdown-item > .dropdown-icon > i
+{
+	font-size: 18px;
+}
+
+.navbar-dropdown > .dropdown-item > .dropdown-text
+{
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+	min-width: 0;
+}
+
+.navbar-dropdown > .dropdown-item > .dropdown-text > .dropdown-label
+{
+	font-family: var(--ot-font-primary);
 	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+	line-height: 1.3;
+}
+
+.navbar-dropdown > .dropdown-item > .dropdown-text > .dropdown-description
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	line-height: 1.4;
+}
+
+/* ===== USER MENU POPUP ===== */
+
+.navbar-user-menu
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--ot-bg-1);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	box-shadow: 0 12px 32px -12px rgba(20, 20, 30, 0.16);
+	min-width: 260px;
+	overflow: hidden;
+}
+
+.navbar-user-menu > .user-head
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-m);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.navbar-user-menu > .user-head > .user-avatar
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--ot-bg-2);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
 }
 
-.e-64d8716d > .menu > .link:hover,
-.e-64d8716d > .menu > .link.active
+.navbar-user-menu > .user-head > .user-avatar > img
 {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.navbar-user-menu > .user-head > .user-avatar.user-avatar-fallback > i
+{
+	font-size: 20px;
+}
+
+.navbar-user-menu > .user-head > .user-text
+{
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.navbar-user-menu > .user-head > .user-text > .user-name
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-m);
+	font-weight: 600;
 	color: var(--ot-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
-/* Background variants */
+.navbar-user-menu > .user-head > .user-text > .user-email
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 
-.e-64d8716d > .holder.bg-1 { background: var(--ot-bg-1); }
-.e-64d8716d > .holder.bg-1 ~ .menu { background: var(--ot-bg-1); }
-.e-64d8716d > .holder.bg-1 .tab:hover, .e-64d8716d > .holder.bg-1 .tab.active { background: var(--ot-bg-1-hover); }
-.e-64d8716d > .holder.bg-1 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-1 ~ .menu > .link.active { background: var(--ot-bg-1-hover); }
+.navbar-user-menu > .user-menu-list
+{
+	display: flex;
+	flex-direction: column;
+	padding: 6px;
+}
 
-.e-64d8716d > .holder.bg-2 { background: var(--ot-bg-2); }
-.e-64d8716d > .holder.bg-2 ~ .menu { background: var(--ot-bg-2); }
-.e-64d8716d > .holder.bg-2 .tab:hover, .e-64d8716d > .holder.bg-2 .tab.active { background: var(--ot-bg-2-hover); }
-.e-64d8716d > .holder.bg-2 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-2 ~ .menu > .link.active { background: var(--ot-bg-2-hover); }
+.navbar-user-menu .user-menu-item
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: 8px 12px;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	text-decoration: none;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
 
-.e-64d8716d > .holder.bg-3 { background: var(--ot-bg-3); }
-.e-64d8716d > .holder.bg-3 ~ .menu { background: var(--ot-bg-3); }
-.e-64d8716d > .holder.bg-3 .tab:hover, .e-64d8716d > .holder.bg-3 .tab.active { background: var(--ot-bg-3-hover); }
-.e-64d8716d > .holder.bg-3 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-3 ~ .menu > .link.active { background: var(--ot-bg-3-hover); }
+.navbar-user-menu .user-menu-item:hover
+{
+	background: var(--ot-bg-2);
+}
 
-.e-64d8716d > .holder.bg-4 { background: var(--ot-bg-4); }
-.e-64d8716d > .holder.bg-4 ~ .menu { background: var(--ot-bg-4); }
-.e-64d8716d > .holder.bg-4 .tab:hover, .e-64d8716d > .holder.bg-4 .tab.active { background: var(--ot-bg-4-hover); }
-.e-64d8716d > .holder.bg-4 ~ .menu > .link:hover, .e-64d8716d > .holder.bg-4 ~ .menu > .link.active { background: var(--ot-bg-4-hover); }
+.navbar-user-menu .user-menu-item > i
+{
+	font-size: 18px;
+	color: var(--ot-text-3);
+}
 
-/* Mobile */
+.navbar-user-menu .user-menu-separator
+{
+	height: 1px;
+	background: var(--ot-bg-2-border);
+	margin: 4px 0;
+}
 
-@media screen and (max-width: 900px)
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 900px)
 {
-	.e-64d8716d > .holder > .tabs,
-	.e-64d8716d > .holder > .right
+	.e-64d8716d > .holder > .bar > .section.center,
+	.e-64d8716d > .holder > .bar > .section .nav,
+	.e-64d8716d > .holder > .bar > .section .bell,
+	.e-64d8716d > .holder > .bar > .section .user-trigger
 	{
 		display: none;
 	}
 
-	.e-64d8716d > .holder > .burger
+	.e-64d8716d > .holder > .bar > .burger
 	{
-		display: flex;
+		display: inline-flex;
 	}
 
-	.e-64d8716d > .menu
+	.e-64d8716d > .holder.open > .drawer
 	{
 		display: flex;
 	}
+
+	.e-64d8716d > .holder > .bar > .section.right
+	{
+		margin-left: 0;
+	}
 }