/* banichimu.live — public profile page styles (server-rendered). Reproduces profile-app.jsx inline styles as classes. Accent is themed via the `--accent` custom property set on . */ .dot-sep { margin: 0 18px; color: var(--bone-faint); } .profile-main { position: relative; max-width: 560px; margin: 0 auto; padding: 64px 24px 120px; z-index: 5; } /* top crumb row */ .profile-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .crumb, .copy-btn { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); transition: color 0.2s; } .crumb:hover { color: var(--bone); } .copy-btn.copied { color: var(--accent); } /* hero */ .hero { position: relative; } .hero-sticker { position: relative; width: 140px; height: 140px; margin: 0 auto 20px; } .hero-sticker-img { width: 100%; height: 100%; filter: drop-shadow(0 0 24px rgba(182,156,255,0.4)); } /* fallback sticker (no custom upload) */ .fallback-sticker { width: 100%; height: 100%; border-radius: 50%; background: var(--void); border: 1px solid var(--bone); position: relative; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 24px rgba(182,156,255,0.4)); } .fallback-ring-glow { position: absolute; inset: 6px; border-radius: 50%; background: var(--holo-grad); opacity: 0.25; filter: blur(3px); } .fallback-ring-inner { position: absolute; inset: 14px; border-radius: 50%; background: var(--void); border: 1px solid rgba(244,242,238,0.25); } .fallback-initial { position: relative; z-index: 2; font-family: var(--ff-script); font-size: 56px; color: var(--accent); text-shadow: 0 0 16px rgba(182,156,255,0.6); } .fallback-arc { position: absolute; inset: 0; width: 100%; height: 100%; } .wordmark { margin: 0; font-family: var(--ff-script); font-size: clamp(48px, 12vw, 72px); text-align: center; color: var(--bone); letter-spacing: -0.01em; line-height: 0.95; } .tagline-row { margin-top: 6px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } .tagline { font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; text-shadow: 0 0 12px var(--accent); } .bio { margin-top: 18px; text-align: center; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--bone-dim); text-transform: uppercase; } .profile-divider { margin: 32px 0 24px; } .holo-bar-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } /* section label */ .section-label { display: flex; align-items: baseline; gap: 12px; } .sl-n { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--bone-faint); } .sl-title { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.4em; color: var(--bone); text-transform: uppercase; } .sl-rule { flex: 1; height: 1px; background: var(--border); } .sl-count { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--bone-faint); } /* link list */ .link-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .link-card { position: relative; text-align: left; padding: 16px 20px; background: var(--void); border: 1px solid rgba(244,242,238,0.18); border-radius: 14px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; overflow: hidden; transition: all 0.24s cubic-bezier(0.22,1,0.36,1); } .link-card.primary { padding: 20px 20px 18px; border-color: var(--bone); box-shadow: 0 0 16px rgba(182,156,255,0.18); } .link-card:hover { border-color: var(--bone); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 67%, transparent); } .link-card:active { transform: translateY(1px); opacity: 0.85; } /* sliced bottom-left corner on the primary card */ .link-corner { position: absolute; left: -1px; bottom: -1px; width: 60px; height: 24px; background: var(--holo-grad); clip-path: polygon(0 0, 0 100%, 100% 100%); } /* left edge holo bar appears on hover */ .link-hover-bar { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--holo-grad); opacity: 0; transition: opacity 0.2s; } .link-card:hover .link-hover-bar { opacity: 1; } .link-icon { width: 40px; height: 40px; border: 1px solid rgba(244,242,238,0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--bone); transition: all 0.24s; } .link-icon svg { width: 20px; height: 20px; } .link-card:hover .link-icon { color: var(--accent); border-color: var(--accent); } .link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .link-label { font-family: var(--ff-mono); font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); line-height: 1.05; } .link-card.primary .link-label { font-family: var(--ff-script); font-size: 28px; letter-spacing: -0.01em; text-transform: none; } .link-meta { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.24s; } .link-card:hover .link-meta { color: var(--accent); } .link-arrow { font-family: var(--ff-mono); font-size: 14px; letter-spacing: -0.05em; color: var(--bone-dim); transition: all 0.24s; white-space: nowrap; } .link-card:hover .link-arrow { color: var(--accent); transform: translateX(4px); } /* footer */ .profile-foot { margin-top: 64px; } .profile-foot .holo-bar { margin-bottom: 20px; } .foot-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--bone-faint); text-transform: uppercase; } .foot-mark { margin-top: 28px; text-align: center; font-family: var(--ff-script); font-size: 28px; color: var(--bone-dim); } .foot-sub { margin-top: 4px; text-align: center; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.4em; color: var(--bone-faint); text-transform: uppercase; } /* live-dot pulse uses --accent here instead of the fixed pink */ .live-dot { background: var(--accent); } /* music history panel (populated live by /ds/music-history.js) */ .music-panel { margin-top: 16px; } .music-now { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--void); } .music-now.paused { border-color: var(--border); } .music-now-tag { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--accent); white-space: nowrap; text-transform: uppercase; } .music-now.paused .music-now-tag { color: var(--bone-faint); } .music-now-title { min-width: 0; color: var(--bone); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .music-item { display: flex; align-items: baseline; gap: 12px; padding: 8px 4px; border-bottom: 1px dashed rgba(244,242,238,0.10); } .music-item .mi-n { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--bone-faint); white-space: nowrap; } .music-item .mi-title { min-width: 0; color: var(--bone); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-item .mi-artist { margin-left: auto; font-size: 11px; color: var(--bone-faint); white-space: nowrap; } .music-empty { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--bone-faint); padding: 8px 0; }