@media (max-width: 960px) {
:root {
--ait-public-mobile-topbar-height: 68px;
--ait-public-mobile-topbar-offset: env(safe-area-inset-top, 0px);
--ait-public-mobile-topbar-z: 910;
}
body:not(.page-admin).shell-guest,
body:not(.page-admin).shell-app {
scroll-padding-top: calc(var(--ait-public-mobile-topbar-height) + var(--ait-public-mobile-topbar-offset) + 10px);
}
body:not(.page-admin).shell-guest .main,
body:not(.page-admin).shell-app .main {
padding-top: calc(var(--ait-public-mobile-topbar-height) + var(--ait-public-mobile-topbar-offset));
}
body:not(.page-admin).shell-guest .topbar,
body:not(.page-admin).shell-app .topbar {
position: fixed;
top: var(--ait-public-mobile-topbar-offset);
left: 0;
right: 0;
bottom: auto;
z-index: var(--ait-public-mobile-topbar-z);
width: 100vw;
max-width: 100vw;
min-height: var(--ait-public-mobile-topbar-height);
margin: 0 ;
padding: 11px 18px ;
box-sizing: border-box;
display: flex;
align-items: center ;
justify-content: space-between ;
flex-wrap: nowrap;
gap: 10px ;
transform: translate3d(0, 0, 0);
background: linear-gradient(180deg, rgba(5, 12, 28, 0.98), rgba(5, 12, 28, 0.90)) ;
border-bottom: 1px solid rgba(112, 136, 196, 0.22) ;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) ;
backdrop-filter: blur(18px) ;
-webkit-backdrop-filter: blur(18px) ;
}
body.theme-light:not(.page-admin).shell-guest .topbar,
body.theme-light:not(.page-admin).shell-app .topbar {
background: linear-gradient(180deg, rgba(235, 244, 255, 0.98), rgba(224, 236, 252, 0.92)) ;
border-bottom-color: rgba(135, 156, 202, 0.30) ;
box-shadow: 0 12px 28px rgba(72, 98, 146, 0.12) ;
}
body:not(.page-admin).shell-guest .topbar-left,
body:not(.page-admin).shell-app .topbar-left,
body:not(.page-admin).shell-guest .topbar-right,
body:not(.page-admin).shell-app .topbar-right {
display: flex;
align-items: center ;
flex-wrap: nowrap;
min-width: 0;
}
body:not(.page-admin).shell-guest .topbar-left,
body:not(.page-admin).shell-app .topbar-left {
flex: 1 1 auto;
gap: 10px ;
}
body:not(.page-admin).shell-guest .topbar-right,
body:not(.page-admin).shell-app .topbar-right {
flex: 0 1 auto;
justify-content: flex-end ;
max-width: min(68vw, 460px);
gap: 8px ;
}
body:not(.page-admin).shell-guest .topbar-branding,
body:not(.page-admin).shell-app .topbar-branding,
body:not(.page-admin).shell-guest .brand-title,
body:not(.page-admin).shell-app .brand-title {
min-width: 0;
max-width: 34vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.page-admin).shell-guest .topbar-right > a,
body:not(.page-admin).shell-app .topbar-right > a {
min-height: 42px;
padding: 0 14px ;
border-radius: 14px ;
display: inline-flex;
align-items: center ;
justify-content: center ;
white-space: nowrap;
font-size: 13px ;
line-height: 1 ;
}
body:not(.page-admin).shell-guest .topbar-account-box,
body:not(.page-admin).shell-app .topbar-account-box,
body:not(.page-admin).shell-guest .account-box,
body:not(.page-admin).shell-app .account-box,
body:not(.page-admin).shell-guest .account-trigger,
body:not(.page-admin).shell-app .account-trigger {
min-width: 0;
max-width: 100%;
}
body:not(.page-admin).shell-guest .account-trigger,
body:not(.page-admin).shell-app .account-trigger {
grid-template-columns: auto minmax(0, 1fr) auto;
}
body:not(.page-admin).shell-guest .account-trigger .user-meta,
body:not(.page-admin).shell-app .account-trigger .user-meta,
body:not(.page-admin).shell-guest .account-user-line,
body:not(.page-admin).shell-app .account-user-line {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.page-admin).shell-guest .content-area,
body:not(.page-admin).shell-app .content-area {
scroll-padding-top: calc(var(--ait-public-mobile-topbar-height) + var(--ait-public-mobile-topbar-offset) + 10px);
}
}
@media (max-width: 430px) {
:root {
--ait-public-mobile-topbar-height: 66px;
}
body:not(.page-admin).shell-guest .topbar,
body:not(.page-admin).shell-app .topbar {
padding-inline: 14px ;
gap: 8px ;
}
body:not(.page-admin).shell-guest .topbar-right,
body:not(.page-admin).shell-app .topbar-right {
max-width: min(70vw, 330px);
gap: 6px ;
}
body:not(.page-admin).shell-guest .topbar-right > a,
body:not(.page-admin).shell-app .topbar-right > a {
min-height: 40px;
padding-inline: 11px ;
font-size: 12px ;
}
}
@media (max-width: 960px) {
:root {
--ait-mobile-drawer-overlay-z: 7100;
--ait-mobile-drawer-z: 7200;
}
body.sidebar-open::before {
z-index: var(--ait-mobile-drawer-overlay-z);
}
body.sidebar-open .sidebar,
body.sidebar-open .sidebar.open,
body.sidebar-open .sidebar.mobile-open,
body.page-admin.shell-admin.sidebar-open .sidebar,
body.page-admin.shell-admin.sidebar-open .sidebar.open,
body.page-admin.shell-admin.sidebar-open .sidebar.mobile-open,
body.page-admin.shell-admin.sidebar-open .sidebar.sidebar-admin-v15 {
z-index: var(--ait-mobile-drawer-z);
}
body.page-admin.shell-admin.sidebar-open .main.main-admin-v15 > .topbar,
body.page-admin.shell-admin.sidebar-open .topbar,
body:not(.page-admin).sidebar-open .topbar {
z-index: 900;
}
body:not(.page-admin).shell-app .topbar-right > .topbar-admin-shortcut,
body:not(.page-admin).shell-guest .topbar-right > .topbar-admin-shortcut,
body:not(.page-admin).shell-app .topbar-admin-shortcut,
body:not(.page-admin).shell-guest .topbar-admin-shortcut {
display: none;
visibility: hidden;
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;
padding: 0 ;
margin: 0 ;
border: 0 ;
overflow: hidden;
pointer-events: none;
}
}
@media (max-width: 640px) {
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar {
grid-template-columns: minmax(0, 1fr);
justify-content: flex-start ;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-left,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-left {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-right,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-right {
display: none;
visibility: hidden;
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;
max-height: 0;
padding: 0 ;
margin: 0 ;
overflow: hidden;
pointer-events: none;
}
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .topbar-branding,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .topbar-branding,
body:not(.page-admin):not([data-authenticated="1"]).shell-guest .brand-title,
body:not(.page-admin):not([data-authenticated="1"]).shell-app .brand-title {
max-width: calc(100vw - 120px);
}
body:not(.page-admin).shell-guest .flash-stack,
body:not(.page-admin).shell-app .flash-stack {
top: calc(var(--ait-public-mobile-topbar-height, 68px) + env(safe-area-inset-top, 0px) + 10px);
left: 12px;
right: 12px;
width: auto;
max-width: none;
z-index: 930;
}
body:not(.page-admin).shell-guest .flash,
body:not(.page-admin).shell-app .flash {
text-align: center ;
}
}
@media (max-width: 960px) {
body.sidebar-open::before {
z-index: var(--ait-mobile-drawer-overlay-z, 7100);
}
body.sidebar-open .sidebar,
body.sidebar-open .sidebar.open,
body.sidebar-open .sidebar.mobile-open,
body.page-admin.shell-admin.sidebar-open .sidebar,
body.page-admin.shell-admin.sidebar-open .sidebar.open,
body.page-admin.shell-admin.sidebar-open .sidebar.mobile-open,
body.page-admin.shell-admin.sidebar-open .sidebar.sidebar-admin-v15 {
z-index: var(--ait-mobile-drawer-z, 7200);
}
body.sidebar-open .topbar,
body.page-admin.shell-admin.sidebar-open .topbar,
body.page-admin.shell-admin.sidebar-open .main.main-admin-v15 > .topbar {
z-index: 900;
}
}