/** * AINNA People profile — shared Futuristic White Lofi shell * Per-person accent: set --profile-accent on * Theme attrs: light/dark (standard) or day/night (Masli legacy) */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --profile-bg:#FAFAF8; --profile-surface:#fff; --profile-text:#1A1A1E; --profile-muted:#5C5C66; --profile-border:rgba(0,0,0,.08); --profile-accent:#7B9FD4; --profile-accent-soft:#C4B5E8; --profile-radius:16px; --profile-shadow:0 8px 32px rgba(155,181,206,.12); } [data-theme="dark"], [data-theme="night"]{ --profile-bg:#0a0a0f; --profile-surface:#12121a; --profile-text:#fff; --profile-muted:#a0a0b0; --profile-border:rgba(255,255,255,.08); --profile-shadow:0 8px 32px rgba(0,0,0,.35); } [data-theme="light"], [data-theme="day"]{ --profile-bg:#FAFAF8; --profile-surface:#fff; --profile-text:#1A1A1E; --profile-muted:#5C5C66; --profile-border:rgba(0,0,0,.08); --profile-shadow:0 8px 32px rgba(155,181,206,.12); } body.profile-page{ font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--profile-bg); color:var(--profile-text); overflow-x:hidden; transition:background .4s ease,color .4s ease; -webkit-font-smoothing:antialiased; } .profile-hero-pan{ overflow:hidden; position:relative; } .profile-hero-pan img{ width:100%; height:auto; display:block; animation:profile-pan 18s ease-in-out infinite alternate; transform-origin:center center; } @keyframes profile-pan{ from{transform:scale(1) translate(0,0)} to{transform:scale(1.08) translate(-2%,-1%)} } .profile-card{ background:var(--profile-surface); border:1px solid var(--profile-border); border-radius:var(--profile-radius); box-shadow:var(--profile-shadow); } .profile-section-title{ font-size:clamp(1.25rem,2.5vw,1.6rem); font-weight:700; margin-bottom:1rem; color:var(--profile-text); } .profile-muted{color:var(--profile-muted)} .profile-link{ color:var(--profile-accent); font-weight:600; text-decoration:none; } .profile-link:hover{text-decoration:underline} @media (prefers-reduced-motion:reduce){ .profile-hero-pan img{animation:none} } /* ── Hero actions bar (shared across all profile pages) ── */ .hero-content { position: relative; padding-top: 60px; } .hero-actions-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: rgba(0,0,0,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); } @media (max-width: 768px) { .hero-content { padding-top: 52px; } .hero-actions-bar { gap: 6px; padding: 6px 10px; } } .profile-dropdown-inline { display: inline-flex; align-items: center; position: relative; } .profile-dropdown-inline .profile-dropdown-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: var(--profile-text, var(--text-primary)); cursor: pointer; font-weight: 600; font-size: 13px; transition: all .2s ease; } .profile-dropdown-inline .profile-dropdown-btn:hover { border-color: rgba(0,245,255,.35); background: rgba(0,0,0,.55); } .profile-dropdown-inline .profile-dropdown-menu { position: absolute; left: 0; top: calc(100% + 8px); width: min(400px, calc(100vw - 32px)); background: rgba(0,0,0,.82); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; z-index: 50; } .profile-dropdown-inline .profile-dropdown-head { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--profile-muted, var(--text-secondary)); } .profile-dropdown-inline .profile-nav-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; } .profile-dropdown-inline .profile-nav-link, .profile-dropdown-inline .profile-nav-loading { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.42); color: var(--profile-text, #fff); text-decoration: none; font-size: 12px; font-weight: 700; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .profile-dropdown-inline .profile-nav-link:hover { transform: translateY(-1px); background: rgba(0,245,255,.10); border-color: rgba(0,245,255,.42); } .profile-dropdown-inline .profile-nav-link.active { background: linear-gradient(135deg, rgba(0,245,255,.22), rgba(139,92,246,.20)); border-color: rgba(0,245,255,.5); color: #fff; } .profile-dropdown-inline .profile-nav-meta { font-size: 10px; font-weight: 500; opacity: .75; margin-top: 2px; } @media (max-width: 768px) { .profile-dropdown-inline .profile-nav-items { grid-template-columns: 1fr; } } .hero-toggle-group { display: inline-flex; align-items: center; gap: 6px; } .hero-toggle-group .ainna-theme-switch.theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1.5px solid rgba(99, 102, 241, 0.35); background: rgba(255,255,255,0.12); cursor: pointer; transition: all .2s ease; height: 30px; } .hero-toggle-group .ainna-theme-switch.theme-toggle:hover { border-color: rgba(99, 102, 241, 0.65); transform: translateY(-1px); } .hero-toggle-group .ainna-theme-switch-label { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--profile-muted, var(--text-secondary)); line-height: 1; white-space: nowrap; display: inline !important; } .hero-toggle-group .ainna-theme-switch-track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(15,23,42,0.9)); border: 1px solid rgba(26,26,26,0.14); flex-shrink: 0; } .hero-toggle-group .ainna-theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 0 8px rgba(129,140,248,0.45); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .hero-toggle-group .ainna-theme-switch.is-night .ainna-theme-switch-thumb { transform: translateX(14px); } .hero-toggle-group .ainna-boost-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; height: 30px; border-radius: 999px; border: 1.5px solid rgba(245, 158, 11, 0.35); background: rgba(255,255,255,0.10); cursor: pointer; font-size: 13px; transition: all .2s ease; color: var(--profile-text, var(--text-primary)); } .hero-toggle-group .ainna-boost-toggle:hover { border-color: rgba(245, 158, 11, 0.65); transform: translateY(-1px); } .hero-toggle-group .hero-bank-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; height: 30px; border-radius: 999px; border: 1.5px solid rgba(99, 102, 241, 0.5); background: rgba(99, 102, 241, 0.15); text-decoration: none; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: normal; text-transform: none; line-height: inherit; white-space: nowrap; transition: all .2s ease; cursor: pointer; color: #c7d2fe; } .hero-toggle-group .hero-bank-btn:hover { border-color: rgba(99, 102, 241, 0.8); transform: translateY(-1px); background: rgba(99, 102, 241, 0.25); color: #e0e7ff; } html[data-theme="dark"] .hero-toggle-group .hero-bank-btn, html[data-theme="night"] .hero-toggle-group .hero-bank-btn { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.5); color: #a5b4fc; } html[data-theme="dark"] .hero-toggle-group .hero-bank-btn:hover, html[data-theme="night"] .hero-toggle-group .hero-bank-btn:hover { background: rgba(99, 102, 241, 0.3); border-color: rgba(99, 102, 241, 0.7); color: #c7d2fe; } html[data-theme="dark"] .hero-toggle-group .ainna-theme-switch.theme-toggle, html[data-theme="night"] .hero-toggle-group .ainna-theme-switch.theme-toggle { background: rgba(30, 41, 59, 0.8); border-color: rgba(99, 102, 241, 0.45); } html[data-theme="dark"] .hero-toggle-group .ainna-boost-toggle, html[data-theme="night"] .hero-toggle-group .ainna-boost-toggle { background: rgba(30, 41, 59, 0.8); border-color: rgba(245, 158, 11, 0.45); } /* Light mode — hero text on dark bg stays readable */ [data-theme="light"] .hero .tagline, [data-theme="light"] .hero-info span { color: #cbd5e1; }