/* ============================================================ ☕ Kaffeekränzchen — Shared Header Component Fixed, glassmorphism, avatar + dropdown. Loaded on every page (index, arcade, panel, watch, admin). ============================================================ */ :root { --kkh-height: 62px; --kkh-z: 500; --kkh-gold: #d4a053; --kkh-gold-light: #e8c87e; --kkh-cream: #f4e8d4; --kkh-cream-50: rgba(244, 232, 212, 0.5); --kkh-cream-30: rgba(244, 232, 212, 0.3); --kkh-cream-08: rgba(244, 232, 212, 0.08); --kkh-red: #ef4444; --kkh-discord: #5865F2; } /* Host container — page must provide

or the script falls back to document.body.prepend(). */ .kk-header, .kk-header * { box-sizing: border-box; } /* Fixed bar across the top of every page */ .kk-header { position: fixed; top: 0; left: 0; right: 0; height: var(--kkh-height); display: flex; align-items: center; gap: 16px; padding: 0 24px; z-index: var(--kkh-z); font-family: 'Nunito', 'Outfit', -apple-system, sans-serif; color: var(--kkh-cream); /* Glassmorphism base */ background: rgba(14, 9, 6, 0.62); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border-bottom: 1px solid rgba(244, 232, 212, 0.06); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); transition: background 0.3s ease, border-color 0.3s ease; } /* Reserve space so page content doesn't slide under the fixed header. Pages that already set padding-top themselves can opt out by adding `.kk-no-offset` to . */ body:not(.kk-no-offset) { padding-top: var(--kkh-height); } /* ---- Brand (logo + title) ---- */ .kk-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 0 0 auto; transition: opacity 0.2s ease; } .kk-header__brand:hover { opacity: 0.85; } .kk-header__logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; } .kk-header__title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; } /* ---- Center label (page name, e.g. "Arcade BETA") ---- */ .kk-header__center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } .kk-header__page-label { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; background: rgba(212, 160, 83, 0.1); border: 1px solid rgba(212, 160, 83, 0.25); border-radius: 999px; color: var(--kkh-gold-light); font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; } .kk-header__beta { display: inline-block; padding: 1px 6px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.09em; color: #1a0f08; background: linear-gradient(135deg, #ffd76b, #d4a053); border-radius: 4px; line-height: 1.3; text-transform: uppercase; } /* ---- Right-hand auth cluster ---- */ .kk-header__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; } /* Login button (shown when logged out) */ .kk-header__login { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--kkh-discord); color: #ffffff; text-decoration: none; border-radius: 10px; font-size: 0.85rem; font-weight: 700; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .kk-header__login:hover { background: #4752C4; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(88, 101, 242, 0.35); } /* Avatar pill (shown when logged in, triggers dropdown) */ .kk-header__avatar-btn { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: rgba(244, 232, 212, 0.04); border: 1px solid rgba(244, 232, 212, 0.1); border-radius: 999px; cursor: pointer; font-family: inherit; color: var(--kkh-cream); transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .kk-header__avatar-btn:hover { background: rgba(212, 160, 83, 0.1); border-color: rgba(212, 160, 83, 0.35); } .kk-header__avatar-btn[aria-expanded="true"] { background: rgba(212, 160, 83, 0.14); border-color: rgba(212, 160, 83, 0.5); } .kk-header__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #2b1a12; border: 1px solid rgba(244, 232, 212, 0.1); } .kk-header__name { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kk-header__chevron { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.2s ease; } .kk-header__avatar-btn[aria-expanded="true"] .kk-header__chevron { transform: rotate(180deg); opacity: 1; } /* ---- Dropdown panel ---- */ .kk-header__dropdown { position: absolute; top: calc(var(--kkh-height) - 4px); right: 20px; min-width: 240px; padding: 8px; background: rgba(22, 14, 10, 0.78); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(244, 232, 212, 0.1); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(244, 232, 212, 0.06); display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: calc(var(--kkh-z) + 1); } .kk-header__dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .kk-header__dd-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid rgba(244, 232, 212, 0.08); margin-bottom: 6px; } .kk-header__dd-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2b1a12; } .kk-header__dd-head-text { display: flex; flex-direction: column; min-width: 0; } .kk-header__dd-head-name { font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--kkh-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kk-header__dd-head-sub { font-size: 0.72rem; color: var(--kkh-cream-50); letter-spacing: 0.02em; } .kk-header__dd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--kkh-cream); font-size: 0.88rem; font-weight: 600; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .kk-header__dd-item:hover, .kk-header__dd-item:focus-visible { background: rgba(212, 160, 83, 0.12); color: var(--kkh-gold-light); outline: none; } .kk-header__dd-item.is-active { background: rgba(212, 160, 83, 0.16); color: var(--kkh-gold-light); } .kk-header__dd-item.is-active::after { content: '•'; margin-left: auto; color: var(--kkh-gold); font-size: 1.1rem; line-height: 1; } .kk-header__dd-item-ico { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; opacity: 0.85; } .kk-header__dd-sep { height: 1px; background: rgba(244, 232, 212, 0.08); margin: 6px 4px; } .kk-header__dd-item--danger { color: #fca5a5; } .kk-header__dd-item--danger:hover, .kk-header__dd-item--danger:focus-visible { background: rgba(239, 68, 68, 0.14); color: #fecaca; } /* ---- Responsive ---- */ @media (max-width: 760px) { .kk-header { padding: 0 14px; gap: 10px; } .kk-header__title { display: none; } .kk-header__center { display: none; } .kk-header__name { max-width: 90px; font-size: 0.82rem; } .kk-header__dropdown { right: 10px; left: 10px; min-width: 0; } } @media (max-width: 420px) { .kk-header__name { display: none; } .kk-header__avatar-btn { padding: 4px 10px 4px 4px; gap: 6px; } } /* ---- Placeholder while auth status is loading ---- */ .kk-header__skeleton { width: 110px; height: 36px; border-radius: 999px; background: linear-gradient(90deg, rgba(244, 232, 212, 0.04), rgba(244, 232, 212, 0.08), rgba(244, 232, 212, 0.04)); background-size: 200% 100%; animation: kkh-shimmer 1.4s ease-in-out infinite; } @keyframes kkh-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ---- Compat: hide the OLD per-page navs so the shared header becomes the single source of truth. Safer than deleting the old markup while we migrate, and the new header already reserves the offset via body padding. ---- */ body:not(.kk-keep-legacy-nav) > .navbar, body:not(.kk-keep-legacy-nav) .panel-dashboard > .panel-nav, body:not(.kk-keep-legacy-nav) .w2g-body > .panel-nav, body:not(.kk-keep-legacy-nav) .admin-dashboard > .admin-nav { display: none !important; }