.turbo-header-template {
z-index: 99999 !important;
position: relative;
} :root {
--nav-header-height: 72px;
--nav-primary: #111111;
--nav-text: #111111;
--nav-text-muted: #666666;
--nav-border: #e5e5e5;
--nav-bg: #ffffff;
--nav-bg-hover: #f5f5f5;
--nav-radius: 8px;
--nav-radius-lg: 12px;
--nav-radius-full: 999px;
} .collabable-layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.collabable-layout__body {
display: flex;
flex: 1;
padding-top: var(--nav-header-height);
}
.collabable-layout__main {
flex: 1;
min-width: 0;
padding: 24px 80px;
}
@media (max-width: 900px) {
.collabable-layout__main {
padding: 24px 40px;
}
}
@media (max-width: 768px) {
.collabable-layout__main {
padding: 16px 20px;
}
}
@media (max-width: 480px) {
.collabable-layout__main {
padding: 12px 0;
}
} .collabable-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-header-height);
background: var(--nav-bg);
border-bottom: 1px solid var(--nav-border);
z-index: 1000;
}
.collabable-header__inner {
display: flex;
align-items: center;
gap: 24px;
height: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 24px;
} .collabable-header__menu-toggle {
display: none;
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
color: var(--nav-text);
padding: 0;
align-items: center;
justify-content: center;
}
@media (max-width: 1024px) {
.collabable-header__menu-toggle {
display: flex;
} .collabable-header {
display: none;
}
} .collabable-header__logo {
display: flex;
align-items: center;
text-decoration: none;
font-size: 22px;
font-weight: 500;
color: var(--nav-text);
flex-shrink: 0;
}
.collabable-header__logo-text {
font-weight: 400;
}
.collabable-header__logo-ai {
font-weight: 600;
} .collabable-header__tabs {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.collabable-header__tab {
padding: 8px 12px;
font-size: 14px;
color: var(--nav-text-muted);
text-decoration: none;
border-radius: var(--nav-radius);
transition: color 0.2s, background 0.2s;
}
.collabable-header__tab:hover {
color: var(--nav-text);
background: var(--nav-bg-hover);
}
.collabable-header__tab.is-active {
color: var(--nav-text) !important;
font-weight: 500 !important;
}  .tahefobu-nav-menu > li {
vertical-align: middle !important;
}
.tahefobu-nav-menu .current-menu-item > .tahefobu-menu-item {
background: rgba(255, 255, 255, 0.18) !important;
backdrop-filter: blur(20px) saturate(140%) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
border-radius: 32px !important;
padding: 16px 48px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 12px rgba(0, 0, 0, 0.10) !important;
position: relative !important;
}
@media (max-width: 900px) {
.collabable-header__tabs {
display: none;
}
} .collabable-header__search {
flex: 1;
max-width: 560px;
}
.collabable-header__search-form {
display: flex;
align-items: center;
background: var(--nav-bg);
border: 1px solid var(--nav-border);
border-radius: var(--nav-radius);
padding: 4px 4px 4px 12px;
}
.collabable-header__search-icon {
color: var(--nav-text-muted);
flex-shrink: 0;
}
.collabable-header__search-input {
flex: 1;
border: none;
background: transparent;
padding: 10px 12px;
font-size: 15px;
color: var(--nav-text);
outline: none;
min-width: 0;
}
.collabable-header__search-input::placeholder {
color: var(--nav-text-muted);
}
.collabable-header__search-btn {
flex-shrink: 0;
padding: 10px 20px;
background: var(--nav-primary);
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.collabable-header__search-btn:hover {
background: #f0f0f0;
}
@media (max-width: 768px) {
.collabable-header__search {
display: none;
}
} .collabable-header__user {
flex-shrink: 0;
}
.collabable-header__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
background: #1F1F1F;
border: none;
}
.collabable-header__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.collabable-header__login-btn {
padding: 10px 20px;
background: var(--nav-primary);
color: white;
text-decoration: none;
border-radius: var(--nav-radius-full);
font-size: 14px;
font-weight: 500;
transition: background 0.2s;
}
.collabable-header__login-btn:hover {
background: #333;
color: white;
} .collabable-user-menu {
display: inline-flex;
align-items: center;
gap: 12px;
position: relative;
} .collabable-user-menu__signin {
font-size: 14px;
font-weight: 500;
color: #fff;
text-decoration: none;
padding: 8px 4px;
}
.collabable-user-menu__signin:hover {
color: #fff;
}
.collabable-user-menu__getstarted {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: #4E4E4E;
color: #fff;
text-decoration: none;
border-radius: var(--nav-radius-full);
font-size: 14px;
font-weight: 600;
}
.collabable-user-menu__getstarted:hover,
.collabable-user-menu__getstarted:active,
.collabable-user-menu__getstarted:focus {
background: #4E4E4E;
color: #fff;
} .collabable-user-menu--loading {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
}
.collabable-user-menu__skeleton-circle {
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--nav-bg-hover, #f0f0f0);
animation: collabable-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes collabable-skeleton-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
} .collabable-user-menu__trigger {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: #1F1F1F;
cursor: pointer;
padding: 0;
overflow: visible;
position: relative;
color: var(--nav-text-muted);
}
.collabable-user-menu__dot {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: #CF0000;
border-radius: 50%;
border: 2px solid #fff;
pointer-events: none;
animation: collabable-dot-pulse 2s ease-in-out 1;
}
@keyframes collabable-dot-pulse {
0% { transform: scale(1); }
15% { transform: scale(1.5); }
30% { transform: scale(1); }
}
.collabable-user-menu__trigger img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.collabable-user-menu__trigger:hover,
.collabable-user-menu.is-open .collabable-user-menu__trigger {
opacity: 0.85;
} .collabable-user-menu__dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 260px;
background: #fff;
border-radius: var(--nav-radius-lg);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
z-index: 1050;
padding: 8px 0;
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: visibility 0.15s, opacity 0.15s, transform 0.15s;
}
.collabable-user-menu.is-open .collabable-user-menu__dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
} .collabable-user-menu__user-info {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.collabable-user-menu__avatar-lg {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #1F1F1F;
display: flex;
align-items: center;
justify-content: center;
border: none;
}
.collabable-user-menu__avatar-lg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.collabable-user-menu__user-details {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.collabable-user-menu__name {
font-size: 15px;
font-weight: 600;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.collabable-user-menu__role {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--nav-radius-full);
width: fit-content;
}
.collabable-user-menu__role--host     { background: #CF0000; color: #fff; }
.collabable-user-menu__role--guest    { background: #27ae60; color: #fff; }
.collabable-user-menu__role--both     { background: #CF0000; color: #fff; }
.collabable-user-menu__role--studio   { background: #e67e22; color: #fff; }
.collabable-user-menu__role--member   { background: #999; color: #fff; } .collabable-user-menu__divider {
height: 1px;
background: #f0f0f0;
margin: 4px 12px;
} .collabable-user-menu__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
font-size: 14px;
color: #333;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.collabable-user-menu__item:hover {
background: #f5f5f5;
color: #333;
}
.collabable-user-menu__item svg {
flex-shrink: 0;
color: #999;
}
.collabable-user-menu__item:hover svg {
color: #333;
} .collabable-user-menu__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #CF0000;
color: #fff;
border-radius: var(--nav-radius-full);
font-size: 11px;
font-weight: 700;
margin-left: auto;
} .collabable-user-menu__item--danger {
color: #CF0000;
}
.collabable-user-menu__item--danger:hover {
background: #fef2f2;
color: #CF0000;
}
.collabable-user-menu__item--danger svg {
color: #CF0000;
}
.collabable-user-menu__item--danger:hover svg {
color: #CF0000;
} @media (max-width: 480px) {
.collabable-user-menu__dropdown {
width: 240px;
}
.collabable-user-menu__getstarted {
padding: 8px 16px;
font-size: 13px;
}
} @media (max-width: 600px) {
.collabable-header__inner {
padding: 0 16px;
gap: 12px;
}
.collabable-header__logo {
font-size: 18px;
}
} .collabable-mobile-countdown {
display: none;
}
.collabable-mobile-header {
display: none;
}
@media (max-width: 1024px) {
.collabable-mobile-countdown {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
}
.collabable-mobile-countdown + .collabable-mobile-header {
top: 38px;
}
.collabable-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background: #0a0a0a;
z-index: 1000;
padding: 0 16px;
} body {
padding-top: 70px;
} body.collabable-prelaunch {
padding-top: 108px;
} body.home {
padding-top: 70px;
} body.home.collabable-prelaunch {
padding-top: 108px;
}
.collabable-mobile-header__hamburger {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
color: #fff !important;
padding: 0;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.collabable-mobile-header__hamburger:focus,
.collabable-mobile-header__hamburger:active,
.collabable-mobile-header__hamburger:hover {
color: #fff !important;
background: transparent;
outline: none;
}
.collabable-mobile-header__logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-decoration: none;
display: flex;
align-items: center;
}
.collabable-mobile-header__logo img {
height: 36px;
width: auto;
display: block;
}
.collabable-mobile-header__action {
flex-shrink: 0;
}
.collabable-mobile-header__signup {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
}
.collabable-mobile-header__signup:hover {
color: #fff;
}
.collabable-mobile-header__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
background: #1F1F1F;
border: none;
}
.collabable-mobile-header__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
} .collabable-mobile-overlay,
.collabable-mobile-drawer {
display: none;
}
@media (max-width: 1024px) { .collabable-mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1100;
}
.collabable-mobile-overlay.is-visible {
display: block;
} .collabable-mobile-drawer {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 85%;
max-width: 340px;
background: #0a0a0a;
z-index: 1200;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.collabable-mobile-drawer.is-open {
transform: translateX(0);
} .collabable-mobile-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
flex-shrink: 0;
}
.collabable-mobile-drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
-webkit-tap-highlight-color: transparent;
border: none;
background: transparent;
cursor: pointer;
color: #fff !important;
padding: 0;
outline: none;
}
.collabable-mobile-drawer__close:focus,
.collabable-mobile-drawer__close:active,
.collabable-mobile-drawer__close:hover {
color: #fff !important;
background: transparent;
outline: none;
}
.collabable-mobile-drawer__logo {
text-decoration: none;
display: flex;
align-items: center;
}
.collabable-mobile-drawer__logo img {
height: 24px;
width: auto;
display: block;
}
.collabable-mobile-drawer__signup {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
.collabable-mobile-drawer__signup:hover {
color: #fff;
} .collabable-mobile-drawer__nav {
display: flex;
flex-direction: column;
padding: 8px 24px 24px;
}
.collabable-mobile-drawer__link {
color: #fff;
font-size: 16px;
font-weight: 400;
padding: 14px 0;
text-decoration: none;
border-bottom: none;
}
.collabable-mobile-drawer__link:hover {
color: rgba(255, 255, 255, 0.7);
}
.collabable-mobile-drawer__link.is-active {
font-weight: 600;
color: #fff;
} .collabable-mobile-drawer__section {
padding: 16px 24px;
border-top: none;
}
.collabable-mobile-drawer__title {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.4);
text-transform: capitalize;
letter-spacing: 0.3px;
margin: 0 0 12px;
} .collabable-mobile-drawer__carousel {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.collabable-mobile-drawer__carousel::-webkit-scrollbar {
display: none;
}
.collabable-mobile-drawer__carousel.is-autoscrolling {
scroll-behavior: smooth;
} .collabable-mobile-drawer__card {
flex: 0 0 240px;
scroll-snap-align: start;
position: relative;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
display: block;
}
.collabable-mobile-drawer__card img,
.collabable-mobile-drawer__card-color {
width: 100%;
height: 100%;
object-fit: cover;
}
.collabable-mobile-drawer__card--news {
aspect-ratio: 16/9;
}
.collabable-mobile-drawer__card--featured {
flex: 0 0 280px;
height: 160px;
}
.collabable-mobile-drawer__card--category {
flex: 0 0 240px;
height: 140px;
}
.collabable-mobile-drawer__card-color {
position: absolute;
inset: 0;
} .collabable-mobile-drawer__card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
color: #fff;
display: flex;
flex-direction: column;
gap: 2px;
}
.collabable-mobile-drawer__card--category .collabable-mobile-drawer__card-overlay {
background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.3));
inset: 0;
justify-content: center;
}
.collabable-mobile-drawer__card-title {
font-size: 14px;
font-weight: 600;
}
.collabable-mobile-drawer__card-desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.collabable-mobile-drawer__card-badge {
display: inline-block;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 4px;
width: fit-content;
}
.collabable-mobile-drawer__card-badge--sponsored {
background: #CF0000;
color: #fff;
}
.collabable-mobile-drawer__card-name {
font-size: 15px;
font-weight: 600;
}
.collabable-mobile-drawer__card-role {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
.collabable-mobile-drawer__card-count {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}
}