/* ============================================ MODERN USER MENU STYLES ============================================ Extracted from modern-user-menu.jspf Uses CSS variables from /css/site-vars.css.jspf: - --site-primary, --site-secondary - --site-primary-rgb, --site-secondary-rgb ============================================ */ /* FOUC reveal: critical CSS in hides these with visibility:hidden until this file loads. Once parsed, these rules make them visible. */ .tn-user-area-modern, .tn-auth-buttons-modern { visibility: visible; } /* Outer Container - holds search + user menu */ .tn-user-area-modern { display: flex; align-items: center; gap: 8px; } /* ============================================ SEARCH ICON & POPOVER ============================================ */ .tn-search-trigger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: none; border-radius: 50%; cursor: pointer; color: var(--site-primary); transition: all 0.2s ease; position: relative; z-index: 1002; } .tn-search-trigger:hover { background: var(--user-search-hover-bg); transform: scale(1.1); } .tn-search-trigger:focus { outline: 2px solid var(--site-primary); outline-offset: 2px; } .tn-search-trigger svg { width: 26px; height: 26px; fill: var(--site-primary); filter: var(--user-search-svg-filter); } /* Dark nav: primary is often navy/dark brand — same as header bg, icon vanishes */ html.dark-mode .tn-search-trigger { color: var(--dm-text-primary); } html.dark-mode .tn-search-trigger svg { fill: var(--dm-text-primary); } html.dark-mode .tn-search-trigger:focus { outline-color: var(--dm-accent-text); } /* Search Popover - Animated */ .tn-search-popover { position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-15px) scale(0.9) rotateX(10deg); opacity: 0; visibility: hidden; background: var(--user-search-popover-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--user-search-popover-border); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); border-radius: 16px; padding: 16px 20px; z-index: var(--tn-z-search, 1040) !important; white-space: nowrap; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; transform-style: preserve-3d; perspective: 1000px; isolation: isolate !important; } .tn-search-popover.show { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) scale(1) rotateX(0deg); } .tn-search-popover input[type="text"] { color: var(--color-text); width: 260px; background: var(--user-search-input-bg); border: 2px solid var(--user-search-input-border); padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); outline: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .tn-search-popover input[type="text"]:focus { border-color: var(--site-primary); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 4px rgba(var(--site-secondary-rgb), 0.15), 0 4px 12px rgba(var(--site-secondary-rgb), 0.1); background: var(--user-search-input-focus-bg); transform: translateY(-2px) scale(1.02); } .tn-search-popover input[type="text"]::placeholder { color: var(--color-text-placeholder); } /* Mobile Search Popover */ @media (max-width: 767px) { .tn-search-popover { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%) scale(0.95); width: calc(100% - 24px); max-width: none; margin: 12px; border-radius: 20px; padding: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .tn-search-popover.show { transform: translateY(0) scale(1); } .tn-search-popover input[type="text"] { width: 100%; max-width: 100%; font-size: 16px; padding: 16px 20px; border-radius: 16px; } } /* Visually hidden for accessibility */ .visually-hidden { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } /* User Menu Container */ .tn-user-menu-modern { position: relative; display: flex; align-items: center; } /* User Button - Clickable area */ .tn-user-button-modern { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--user-btn-default-bg) !important; border: none; border-radius: 8px; box-shadow: var(--user-btn-default-shadow) !important; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .tn-user-button-modern:hover { background: var(--user-btn-hover-bg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } /* Avatar Container with Badge */ .tn-avatar-container { position: relative; flex-shrink: 0; } .tn-user-avatar-modern { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--site-secondary); transition: transform 0.2s ease, box-shadow 0.2s ease; color: transparent; /* Hide alt text while image loads */ } .tn-user-button-modern:hover .tn-user-avatar-modern { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Default Avatar (no image) */ .tn-user-avatar-modern--default { width: 42px; height: 42px; border-radius: 50%; background: var(--site-secondary); display: flex; align-items: center; justify-content: center; color: var(--color-text-on-secondary); border: 2px solid var(--site-secondary); } /* T-Mail Badge */ .tn-tmail-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50%; background: var(--site-primary); color: var(--color-text-on-primary); font-size: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* User Info Section */ .tn-user-info-modern { display: flex; flex-direction: column; align-items: flex-start; margin-left: 4px; } .tn-username-modern { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Level & XP Bar Container */ .tn-level-xp-container { display: flex; align-items: center; gap: 6px; margin-top: 2px; } /* Level Badge */ .tn-level-badge { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--color-bg-elevated); color: var(--site-primary); font-size: 11px; font-weight: bold; border: 2px solid var(--site-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* XP Progress Bar */ .tn-xp-bar-container { width: 80px; height: 10px; background: var(--color-bg-muted); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border); } .tn-xp-bar-fill { height: 100%; background: linear-gradient(to bottom, var(--site-primary), var(--site-secondary)); border-radius: 5px; position: relative; width: 0; /* Start at 0 for animation */ } .tn-xp-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: rgba(255, 255, 255, 0.3); border-radius: 5px 5px 0 0; } /* Dropdown Arrow */ .tn-user-arrow-modern { width: 10px; height: 10px; color: var(--color-text-secondary); transition: transform 0.2s ease; margin-left: 4px; } .tn-user-button-modern[aria-expanded="true"] .tn-user-arrow-modern { transform: rotate(180deg); } /* ============================================ DROPDOWN MENU STYLES ============================================ */ .tn-user-dropdown-modern { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--color-bg-surface); border-radius: 12px; box-shadow: var(--user-dropdown-shadow); opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1100; overflow: hidden; } .tn-user-dropdown-modern.active { opacity: 1 !important; visibility: visible !important; } /* Shift dropdown when it would overflow the viewport */ /* The actual shift amount is set via inline style by JavaScript */ /* Dropdown Header (Upgrade CTA) */ .tn-dropdown-upgrade { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 100%); color: var(--color-text-on-primary); text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.2s ease; } .tn-dropdown-upgrade:hover { background: var(--site-gradient); padding-left: 20px; } .tn-dropdown-upgrade svg { fill: var(--color-text-on-primary); } .tn-dropdown-upgrade span { color: var(--color-text-on-primary) !important; } /* Dropdown Content */ .tn-dropdown-content-modern { padding: 8px 0; } /* Menu Item – no visited style change (link and visited same) */ .tn-menu-item-modern, .tn-menu-item-modern:link, .tn-menu-item-modern:visited { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--site-secondary); text-decoration: none !important; font-size: 14px; transition: background-color 0.15s ease, padding-left 0.15s ease !important; position: relative; } .tn-menu-item-modern:hover, .tn-menu-item-modern:visited:hover { background: var(--site-primary); color: var(--color-text-on-primary) !important; padding-left: 20px; text-decoration: none !important; } .tn-menu-item-modern:hover svg { fill: var(--color-text-on-primary) !important; } .tn-menu-item-modern svg { width: 18px; height: 18px; fill: var(--site-secondary); flex-shrink: 0; /* No transition - fill changes instantly on hover */ } /* T-Mail Menu Item Badge */ .tn-menu-tmail-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--site-primary); color: var(--color-text-on-primary); font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; } /* Divider */ .tn-dropdown-divider-modern { height: 1px; background: var(--color-border-light); margin: 4px 16px; } /* Theme Toggle - 3-Way Segmented Control (Light / Auto / Dark) */ .tn-theme-toggle { display: flex; flex-direction: column; padding: 8px 16px 4px; gap: 4px; } /* Segmented Control Container */ .tn-theme-toggle__control { display: flex; background: var(--color-bg-muted); border-radius: 8px; padding: 3px; gap: 2px; } /* Each Option Button */ .tn-theme-toggle__option { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.3px; } .tn-theme-toggle__option:hover { color: var(--color-text); background: var(--color-bg-hover); } .tn-theme-toggle__option.active { color: var(--color-text-on-secondary); background: var(--site-secondary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* When DARK is selected, always use orange highlight */ .tn-theme-toggle__option.active[data-theme="dark"] { background: var(--site-primary) !important; } .tn-theme-toggle__option[data-theme="dark"] { background: transparent !important; color: var(--text-muted) !important; } .tn-theme-toggle__option svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } .tn-theme-toggle__option.active svg { fill: var(--color-text-on-secondary) !important; } /* Status text below toggle */ .tn-theme-toggle__status { font-size: 10px; color: var(--color-text-placeholder); text-align: center; min-height: 0; line-height: 1.2; } .tn-theme-toggle__status:empty { display: none; } /* Logout Item */ .tn-menu-item-logout { color: var(--user-logout-color); } .tn-menu-item-logout svg { fill: var(--user-logout-color); } .tn-menu-item-logout:hover { background: var(--user-logout-hover-bg); color: white !important; } .tn-menu-item-logout:hover svg { fill: white !important; } /* ============================================ DARK MODE – User menu readability (Bears, Cubs HQ, Bulls HQ, etc.) ============================================ Menu items use --site-secondary for text and icons; on Cubs/Bulls that’s red/blue, so red text and blue icons disappear on the dark dropdown. Use explicit light colors so we win regardless of load order or missing vars. ============================================ */ html.dark-mode .tn-username-modern { color: #f1f5f9 !important; } html.dark-mode .tn-level-badge { background: var(--dm-bg-elevated); color: #f1f5f9 !important; border-color: var(--site-primary); } html.dark-mode .tn-user-arrow-modern { color: #e2e8f0; } /* Dropdown: light text and icons so red/blue don’t sit on dark maroon */ html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern, html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:link, html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:visited { color: #f1f5f9 !important; } html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern svg { fill: #e2e8f0 !important; } html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:hover, html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:visited:hover { color: #fff !important; } html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:hover svg { fill: #fff !important; } html.dark-mode .tn-theme-toggle__option { color: #e2e8f0 !important; } html.dark-mode .tn-theme-toggle__option:hover { color: #f1f5f9 !important; } html.dark-mode .tn-theme-toggle__option.active { color: #fff !important; } html.dark-mode .tn-theme-toggle__option.active svg { fill: #fff !important; } html.dark-mode .tn-theme-toggle__status { color: #94a3b8 !important; } html.dark-mode .tn-dropdown-divider-modern { background: rgba(255, 255, 255, 0.1); } /* Log In button in dark mode: outline style so it reads as a button (header bg often matches --site-secondary). Same 2px border as base so height matches Sign Up. */ html.dark-mode .tn-btn-login { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.6); } html.dark-mode .tn-btn-login:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } /* ============================================ AUTH BUTTONS (Logged Out State) ============================================ */ .tn-auth-buttons-modern { display: flex; align-items: center; gap: 8px; margin-left: 8px; padding-right: 16px; flex-shrink: 0; /* NEVER shrink - logo shrinks first to ensure buttons are always visible */ } .tn-btn-login { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--site-secondary); color: var(--color-text-on-secondary) !important; border: 2px solid transparent; border-radius: 4px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.2s ease; font-family: 'Graduate', Tahoma, sans-serif; text-transform: uppercase; box-sizing: border-box; } .tn-btn-login:hover { background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--site-secondary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .tn-btn-signup { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--site-primary); color: var(--color-text-on-primary) !important; border: 2px solid transparent; border-radius: 4px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.2s ease; font-family: 'Graduate', Tahoma, sans-serif; text-transform: uppercase; box-sizing: border-box; } .tn-btn-signup:hover { background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--site-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* ============================================ RESPONSIVE STYLES ============================================ */ @media (max-width: 768px) { .tn-user-info-modern { display: none; } .tn-user-button-modern { padding: 4px; } .tn-user-arrow-modern { display: none; } /* Auth buttons - reduce spacing on mobile */ .tn-auth-buttons-modern { margin-left: 0; padding-left: 0; gap: 6px; } .tn-btn-login, .tn-btn-signup { padding: 6px 10px; font-size: 14px; } /* ========================================== ULTIMATE MOBILE BOTTOM SHEET ========================================== */ .tn-user-dropdown-modern { /* CRITICAL: Override ALL desktop positioning */ position: fixed !important; inset: auto 0 0 0 !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; max-height: 85vh; overflow: hidden; /* Glassmorphism effect */ background: var(--color-bg-surface) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); /* Rounded corners with extra radius */ border-radius: 28px 28px 0 0 !important; /* Elevated shadow */ box-shadow: var(--user-mobile-dropdown-shadow) !important; /* HIDDEN STATE: completely off-screen at bottom */ transform: translateY(100%) !important; opacity: 1 !important; visibility: hidden; z-index: 9999 !important; /* Spring animation */ transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.5s !important; will-change: transform; /* Safe area for iPhone + space for bottom ad banner so menu content isn't blocked */ padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 90px); } .tn-user-dropdown-modern.active { /* VISIBLE STATE: slide up into view */ visibility: visible !important; transform: translateY(0%) !important; opacity: 1 !important; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s !important; } /* Drag Handle */ .tn-user-dropdown-modern::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: linear-gradient(90deg, #d1d5db, #9ca3af, #d1d5db); border-radius: 3px; opacity: 0.8; z-index: 10; } /* Dropdown content needs padding for handle and mobile header */ .tn-user-dropdown-modern .tn-dropdown-content-modern { padding-top: 4px; padding-bottom: 120px; /* Extra bottom space so last items clear the bottom ad banner */ /* Account for: mobile header (~120px) + handle (12px) + padding (28px) + safe area (20px) */ max-height: calc(85vh - 180px); min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; /* Ensure scrolling works on all devices */ scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; /* Force hardware acceleration for smooth scrolling */ transform: translateZ(0); -webkit-transform: translateZ(0); } /* Webkit scrollbar styling */ .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar { width: 6px; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-track { background: transparent; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } /* Force scrollbar to always be visible on mobile */ .tn-user-dropdown-modern .tn-dropdown-content-modern { overflow-y: scroll !important; scrollbar-width: auto; /* 'auto' prevents Firefox auto-hide, 'thin' does not */ } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar { width: 8px; display: block !important; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-track { background: transparent; border-radius: 4px; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; min-height: 40px; } /* ========================================== SCROLL INDICATOR - Shows "more content" hint ========================================== */ .tn-scroll-indicator { position: absolute; bottom: calc(env(safe-area-inset-bottom, 20px) + 90px); /* Above bottom ad banner */ left: 0; right: 0; height: 72px; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; /* Fade gradient so the strip reads as a distinct "more below" band */ background: var(--user-scroll-indicator-bg); opacity: 1; transition: opacity 0.3s ease; z-index: 10; /* Thin top edge so the hint reads as a clear footer */ border-top: 1px solid var(--color-border); } .tn-scroll-indicator.hidden { opacity: 0; } .tn-scroll-indicator__chevron { width: 28px; height: 28px; color: var(--user-scroll-indicator-color, var(--site-primary)); animation: scrollBounce 1.2s ease-in-out infinite; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); } .tn-scroll-indicator__text { font-size: 13px; font-weight: 600; color: var(--user-scroll-indicator-color, var(--site-primary)); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; text-shadow: var(--user-scroll-indicator-text-shadow); } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Mobile Menu Items - Larger touch targets */ .tn-user-dropdown-modern .tn-menu-item-modern { padding: 16px 24px; font-size: 16px; font-weight: 500; border-radius: 0; margin: 0; position: relative; /* Staggered animation - only animate opacity, transform, background, and padding */ opacity: 0; transform: translateX(-20px); transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.15s ease, padding-left 0.15s ease; } /* Animate items when menu opens */ .tn-user-dropdown-modern.active .tn-menu-item-modern { opacity: 1; transform: translateX(0); } /* Staggered delays */ .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(1) { transition-delay: 0.05s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(2) { transition-delay: 0.08s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(3) { transition-delay: 0.11s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(4) { transition-delay: 0.14s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(5) { transition-delay: 0.17s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(6) { transition-delay: 0.20s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(7) { transition-delay: 0.23s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(8) { transition-delay: 0.26s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(9) { transition-delay: 0.29s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(10) { transition-delay: 0.32s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(11) { transition-delay: 0.35s; } .tn-user-dropdown-modern.active .tn-menu-item-modern:nth-child(12) { transition-delay: 0.38s; } /* Active/pressed state */ .tn-user-dropdown-modern .tn-menu-item-modern:active { background: rgba(var(--site-secondary-rgb), 0.1); transform: scale(0.98); } /* Icons */ .tn-user-dropdown-modern .tn-menu-item-modern svg { width: 22px; height: 22px; opacity: 0.7; } /* Dividers */ .tn-user-dropdown-modern .tn-dropdown-divider-modern { margin: 8px 24px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } /* Upgrade banner on mobile */ .tn-user-dropdown-modern .tn-dropdown-upgrade { margin: 20px 16px 8px; padding: 16px 20px; border-radius: 16px; font-size: 15px; background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 50%, var(--site-primary) 100%); background-size: 200% 200%; animation: gradientShift 3s ease infinite; box-shadow: 0 8px 24px -4px rgba(var(--site-secondary-rgb), 0.4); } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Theme toggle on mobile - ensure visibility */ .tn-user-dropdown-modern .tn-theme-toggle { margin: 4px 24px 16px; opacity: 0; transform: translateX(-20px); transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .tn-user-dropdown-modern.active .tn-theme-toggle { opacity: 1; transform: translateX(0); transition-delay: 0.40s; } /* Sign out - Make it stand out */ .tn-user-dropdown-modern .tn-menu-item-logout { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.05); opacity: 0; transform: translateX(-20px); transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.15s ease, padding-left 0.15s ease; } .tn-user-dropdown-modern.active .tn-menu-item-logout { opacity: 1; transform: translateX(0); transition-delay: 0.43s; } /* ========================================== MOBILE USER HEADER ========================================== */ .tn-mobile-user-header { display: flex; align-items: center; gap: 14px; padding: 28px 20px 16px; background: var(--user-mobile-header-bg); border-bottom: var(--user-mobile-header-border); box-shadow: none; position: relative; } .tn-mobile-user-header__avatar { position: relative; flex-shrink: 0; } .tn-mobile-user-header__avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--site-secondary); box-shadow: 0 4px 12px rgba(var(--site-primary-rgb), 0.2); } .tn-mobile-user-header__avatar-default { width: 56px; height: 56px; border-radius: 50%; background: var(--site-gradient); display: flex; align-items: center; justify-content: center; color: var(--color-text-on-primary); border: 3px solid var(--site-secondary); } .tn-mobile-header-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--site-primary); color: var(--color-text-on-primary); font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 6px rgba(var(--site-secondary-rgb), 0.4); } .tn-mobile-user-header__info { flex: 1; min-width: 0; } .tn-mobile-user-header__name { display: block; font-size: 18px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; text-shadow: none; } .tn-mobile-user-header__level { display: flex; align-items: center; gap: 8px; } .tn-mobile-level-badge { padding: 3px 10px; border-radius: 12px; background: linear-gradient(135deg, var(--site-primary), var(--site-secondary)); color: var(--color-text-on-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(var(--site-secondary-rgb), 0.3); } .tn-mobile-xp-bar { flex: 1; height: 8px; background: var(--color-bg-muted); border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .tn-mobile-xp-fill { height: 100%; background: linear-gradient(90deg, var(--site-primary), #fbbf24, var(--site-primary)); background-size: 200% 100%; border-radius: 4px; animation: xpShimmer 2s ease-in-out infinite; } @keyframes xpShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .tn-mobile-xp-text { font-size: 11px; font-weight: 600; color: var(--text-muted); min-width: 32px; text-align: right; } .tn-mobile-close-btn { position: absolute; top: 24px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--user-mobile-close-bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all 0.2s ease; } .tn-mobile-close-btn:hover, .tn-mobile-close-btn:active { background: var(--user-mobile-close-hover-bg); color: var(--color-text); transform: rotate(90deg); } /* Mobile menu item – no visited style change */ .tn-user-dropdown-modern .tn-menu-item-modern, .tn-user-dropdown-modern .tn-menu-item-modern:link, .tn-user-dropdown-modern .tn-menu-item-modern:visited { color: var(--site-secondary) !important; } .tn-user-dropdown-modern .tn-menu-item-modern svg { fill: var(--site-secondary) !important; opacity: 1 !important; } .tn-user-dropdown-modern .tn-menu-item-modern:hover { background: var(--site-primary) !important; color: var(--color-text-on-primary) !important; } .tn-user-dropdown-modern .tn-menu-item-modern:hover svg { fill: var(--color-text-on-primary) !important; } /* Dark mode on mobile: light text/icons, no visited style change */ html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern, html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:link, html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:visited { color: #f1f5f9 !important; } html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern svg { fill: #e2e8f0 !important; } html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:hover, html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:visited:hover { color: #fff !important; } html.dark-mode .tn-user-dropdown-modern .tn-menu-item-modern:hover svg { fill: #fff !important; } /* Mobile scrollbar custom styling */ .tn-user-dropdown-modern .tn-dropdown-content-modern { scrollbar-color: var(--color-border) transparent; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-track { background: transparent; } .tn-user-dropdown-modern .tn-dropdown-content-modern::-webkit-scrollbar-thumb { background: var(--color-border); } /* Show mobile header on mobile */ .tn-mobile-user-header { display: flex !important; } } /* Hide mobile header on desktop (default) */ .tn-mobile-user-header { display: none; } /* Mobile overlay with backdrop blur */ .tn-mobile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); pointer-events: none; transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1); z-index: 9998; } .tn-mobile-overlay.active { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); pointer-events: auto; } /* Hide scroll indicator on desktop only - mobile shows it inside the slide-up menu */ @media (min-width: 768px) { .tn-scroll-indicator { display: none; } } @media (max-width: 480px) { .tn-btn-login, .tn-btn-signup { padding: 6px 8px; font-size: 12px; } }