/**
* Profile structure — layout & components only.
* Skin via themes/*.css (CSS variables). Do not put colors here.
*
* Identity model
* slug — stable URL key (and later Discord / account id). /nietzsche
* name — character display name only. Nietzsche
* No vanity handles. Links go to the slug path; visible text is the name.
*
* Usage:
*
*
*
*/
* { box-sizing: border-box; }
html {
min-height: 100%;
/* Clip sideways overflow so marquees / nav cannot grow the layout viewport
(mobile browsers then shrink-to-fit and the page feels like it zooms forever). */
overflow-x: clip;
max-width: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.35;
background-color: var(--bg);
background-image: var(--bg-image, none);
background-attachment: fixed;
overflow-x: clip;
max-width: 100%;
}
a {
color: var(--link);
text-decoration: underline;
}
a:hover {
color: var(--link-hover);
}
/* Top nav (Veilfall-ish). Hidden when opened inside Veilchat IE shell (?embed=1). */
html.veilspace-embed .topnav,
body.veilspace-embed .topnav {
display: none !important;
}
.topnav {
margin: 0 0 10px;
padding: 0;
border: 0;
background: var(--nav-bg);
box-shadow: var(--nav-shadow, none);
}
.topnav-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px 12px;
width: 100%;
max-width: none;
margin: 0;
padding: 4px 10px;
min-height: 32px;
}
.topnav-brand {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
margin-right: 4px;
text-decoration: none;
color: var(--nav-text);
}
.topnav-brand:hover {
color: var(--nav-text-hover);
text-decoration: none;
}
.topnav-brand img {
display: block;
height: 28px;
width: auto;
image-rendering: auto;
filter: none;
}
.topnav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
flex: 0 1 auto;
font-family: var(--font-ui);
font-size: 11px;
}
.topnav-links a {
color: var(--nav-link);
text-decoration: none;
padding: 2px 4px;
}
.topnav-links a:hover {
color: var(--nav-text-hover);
text-decoration: underline;
}
.topnav-links .sep {
color: var(--nav-sep);
padding: 0 2px;
user-select: none;
}
.scry {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex: 0 0 auto;
}
.scry-adv {
font-family: var(--font-ui);
font-size: 9px;
color: var(--nav-sep);
text-decoration: none;
white-space: nowrap;
}
.scry-adv:hover {
color: var(--nav-link);
text-decoration: underline;
}
.scry-input {
width: 110px;
max-width: 28vw;
margin: 0;
padding: 2px 5px;
border: 1px solid var(--nav-border);
background: var(--nav-input-bg);
color: var(--nav-text);
font: 11px var(--font-ui);
}
.scry-input::placeholder {
color: var(--nav-sep);
}
.scry-btn {
margin: 0;
padding: 2px 8px;
border: 1px solid var(--nav-border);
background: var(--nav-btn-bg);
color: var(--nav-text);
font: 700 11px var(--font-ui);
cursor: pointer;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.scry-btn:hover {
background: var(--nav-btn-hover);
color: #fff;
}
@media (max-width: 640px) {
.topnav-inner { flex-wrap: wrap; }
.scry { margin-left: auto; }
/* iOS zooms the whole page when focusing inputs under 16px. */
.scry-input { font-size: 16px; max-width: 42vw; }
body { background-attachment: scroll; }
}
.page {
max-width: 960px;
width: 100%;
margin: 12px auto 40px;
padding: 0 10px;
overflow-x: clip;
}
.layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 12px;
align-items: start;
}
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; }
}
/* —— Boxes —— */
.box {
background: var(--box-bg);
border: 1px solid var(--box-border);
box-shadow: var(--box-shadow);
margin-bottom: 12px;
overflow: hidden;
}
.box h2,
.box h3 {
margin: 0;
padding: 6px 10px;
background: var(--head-bg);
border-bottom: 1px solid var(--box-border);
color: var(--head-text);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
}
.box h3::after {
content: var(--head-mark);
color: var(--accent);
}
.box > p,
.box > h4,
.blurbs > p,
.blurbs > h4 {
margin: 8px 10px;
}
/* —— Contact / portrait / vitals —— */
.contact h2 {
font-family: var(--font-display);
font-size: 22px;
text-align: center;
color: var(--accent);
background: var(--head-bg);
border-bottom: 1px solid var(--box-border);
}
.user-slug {
margin: -2px 10px 8px;
text-align: center;
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.user-slug a {
color: var(--text-muted);
text-decoration: none;
}
.user-slug a:hover {
color: var(--link-hover);
}
.portrait-wrap {
margin: 0;
text-align: center;
}
.portrait {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center top;
margin: 0;
border: 0;
background: var(--box-bg);
}
.portrait-ph {
width: 100%;
max-width: none;
aspect-ratio: 1 / 1;
min-height: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-bottom: 1px solid var(--box-border);
background: var(--bg);
color: var(--text-muted);
font: italic 12px var(--font-body);
text-align: center;
}
.contact > p {
margin: 6px 10px;
font-size: 13px;
}
.contact > p strong {
font-family: var(--font-ui);
font-size: 11px;
color: var(--label);
}
/* —— Contact action grid (2×3) —— */
.contact-table.eq-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 10px;
padding: 0;
border: 1px solid var(--btn-edge);
border-radius: 3px;
overflow: hidden;
background: var(--btn-well);
}
.contact-table.eq-actions div {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
margin: 0;
padding: 6px 8px 7px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
text-align: left;
color: var(--btn-text);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
cursor: pointer;
border: 0;
border-right: 1px solid var(--btn-seam);
border-bottom: 1px solid var(--btn-seam);
background: var(--btn-grad);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.35);
user-select: none;
}
.contact-table.eq-actions div:nth-child(2n) { border-right: 0; }
.contact-table.eq-actions div:nth-last-child(-n + 2) { border-bottom: 0; }
.contact-table.eq-actions div:hover {
color: #fff;
background: var(--btn-grad-hover);
}
.contact-table.eq-actions div:active {
padding-top: 7px;
padding-bottom: 6px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}
.contact-table.eq-actions .ico {
flex: 0 0 14px;
width: 14px;
text-align: center;
font-size: 12px;
line-height: 1;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
}
/* —— Interests —— */
.interests {
width: calc(100% - 20px);
margin: 10px;
border-collapse: collapse;
font-size: 12px;
}
.interests th {
width: 72px;
vertical-align: top;
text-align: left;
color: var(--label);
padding: 4px 6px 4px 0;
font-family: var(--font-ui);
font-size: 11px;
}
.interests td {
padding: 4px 0;
color: var(--text);
border-bottom: 1px dotted var(--rule);
}
/* —— media player —— */
.player-inner {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 8px 10px;
border: 0;
background: var(--player-bg);
width: 100%;
max-width: 100%;
overflow: hidden;
}
.track-scroll {
position: relative;
flex: 1;
min-width: 0;
overflow: hidden;
/* Keep marquee out of document flow so padding-left:100% cannot widen the page. */
height: 1.3em;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.track-scroll .track {
position: absolute;
left: 0;
top: 0;
display: inline-block;
margin: 0;
padding-left: 100%;
white-space: nowrap;
font: 11px/1.3 var(--font-mono);
color: var(--marquee-text);
animation: track-marquee 18s linear infinite;
will-change: transform;
}
.track-scroll .track strong {
font-weight: 700;
color: var(--marquee-artist);
}
@keyframes track-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.eq-bars {
display: flex;
align-items: flex-end;
gap: 2px;
}
.player-inner .eq-bars {
flex: 0 0 auto;
justify-content: flex-end;
height: 14px;
margin: 0;
}
.eq-bars i {
display: block;
width: 3px;
background: var(--eq-bar);
transform-origin: bottom center;
animation: eq 0.55s ease-in-out infinite alternate;
}
@keyframes eq {
from { transform: scaleY(0.35); }
to { transform: scaleY(1); }
}
/* —— media player playlist row (optional under .player) —— */
.wa-playlist {
margin: 0;
border-top: 1px solid #1a1a1a;
background: #2e2e2e;
color: #d0d0d0;
font: 11px/1.2 Tahoma, "Segoe UI", Arial, sans-serif;
}
.wa-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px 4px 8px;
background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 45%, #323232 100%);
border: 1px solid #2a2a2a;
border-top-color: #5a5a5a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.wa-row + .wa-row {
border-top: 0;
}
.wa-row--stub {
opacity: 0.55;
}
.wa-row--stub .wa-title {
font-style: italic;
}
.wa-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #e8e8e8;
text-shadow: 0 1px 0 #000;
}
.wa-controls {
display: flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
}
.wa-btn {
width: 22px;
height: 18px;
padding: 0;
border: 1px solid #1a1a1a;
border-radius: 2px;
background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 50%, #3a3a3a 100%);
color: #f0f0f0;
font-size: 9px;
line-height: 1;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.wa-btn:hover:not(:disabled) {
background: linear-gradient(180deg, #7a7a7a 0%, #5a5a5a 50%, #4a4a4a 100%);
}
.wa-btn:active:not(:disabled) {
background: #2a2a2a;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.wa-btn:disabled {
cursor: default;
opacity: 0.45;
}
/* Inverted play while that row is playing */
.wa-btn.wa-play.is-inverted,
.wa-row.is-playing .wa-btn.wa-play {
background: #e8e8e8;
color: #1a1a1a;
border-color: #0a0a0a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.wa-row.is-playing .wa-title {
color: #fff;
}
.eq-bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq-bars i:nth-child(2) { height: 70%; animation-delay: 0.05s; }
.eq-bars i:nth-child(3) { height: 100%; animation-delay: 0.1s; }
.eq-bars i:nth-child(4) { height: 55%; animation-delay: 0.15s; }
.eq-bars i:nth-child(5) { height: 85%; animation-delay: 0.2s; }
.eq-bars i:nth-child(6) { height: 45%; animation-delay: 0.25s; }
.eq-bars i:nth-child(7) { height: 65%; animation-delay: 0.3s; }
/* —— VeilNet identity banner (right rail, optional) ——
Image only — no text overlays. Swap --veilnet-banner or ![]()
src per character. */
.identity {
padding: 0;
overflow: hidden;
}
.identity-art {
display: block;
width: 100%;
aspect-ratio: 16 / 5;
max-height: 180px;
margin: 0;
padding: 0;
border: 0;
background: var(--bg) center / cover no-repeat;
background-image: var(--veilnet-banner);
overflow: hidden;
}
.identity-art img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* —— Blurbs —— */
.blurbs h4 {
color: var(--accent);
font-family: var(--font-ui);
font-size: 12px;
margin-bottom: 2px;
}
.quest-title .muted {
font-weight: 400;
font-style: italic;
opacity: 0.75;
color: var(--text-muted);
}
/* —— Questionable Log —— */
.qlog {
margin: 0;
padding: 0 0 4px;
}
.qlog-entry,
.qlog-away {
margin: 0 10px 12px;
padding-bottom: 4px;
border-bottom: 1px dotted var(--rule);
}
.qlog-entry:last-child,
.qlog-away:last-child {
border-bottom: 0;
margin-bottom: 6px;
}
.qlog-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 4px;
text-align: left;
}
.qlog-title {
margin: 0;
font: 700 13px var(--font-ui);
color: var(--text);
text-align: left;
}
.qlog-date,
time.qlog-date {
font: 11px var(--font-ui);
color: var(--text-muted);
white-space: nowrap;
cursor: help;
}
.qlog-summary {
margin: 0 0 6px;
padding-left: 14px;
font-style: italic;
color: var(--text-muted);
font-size: 12px;
text-align: left;
}
.qlog-details {
margin: 0;
padding-left: 14px;
}
.qlog-details > summary {
list-style: none;
cursor: pointer;
font: 11px var(--font-ui);
color: var(--link);
user-select: none;
}
.qlog-details > summary::-webkit-details-marker { display: none; }
.qlog-details > summary::before {
content: "▸ ";
color: var(--accent);
}
.qlog-details[open] > summary::before {
content: "▾ ";
}
.qlog-details > summary .count {
color: var(--text-muted);
}
.qlog-more {
margin-top: 4px;
}
.qlog-body {
margin: 6px 0 0;
padding: 8px;
border: 0;
background: var(--wash);
white-space: pre-wrap;
font-size: 12px;
line-height: 1.4;
}
.qlog-comments {
margin: 0 0 0 14px;
padding: 0;
}
.rumors.qlog-comments {
margin: 0 10px 8px;
}
.qlog-comments > hr {
margin: 10px 0 8px;
border: 0;
border-top: 1px dotted var(--rule);
}
.qlog-comment {
display: grid;
grid-template-columns: 41px 1fr;
gap: 8px;
margin: 0 0 4px;
padding: 6px 4px 10px;
border: 0;
background: var(--wash);
}
.qlog-comment .qlog-replies {
margin: 6px 0 0;
padding: 0 0 0 10px;
border-left: 1px dotted var(--rule);
}
.qlog-comment .qlog-replies .qlog-comment {
margin-bottom: 2px;
}
/* Cap visual indent after a few nests (deeper replies still render). */
.qlog-replies .qlog-replies .qlog-replies .qlog-replies {
margin-left: 0;
padding-left: 8px;
}
.qlog-away .qlog-comment {
margin: 0;
padding-left: 0;
}
.qlog-av {
width: 41px;
height: 41px;
border: 1px solid var(--box-border);
overflow: hidden;
background: var(--bg);
display: block;
text-decoration: none;
flex-shrink: 0;
}
.qlog-av img {
width: 41px;
height: 41px;
object-fit: cover;
display: block;
}
.qlog-av:hover {
outline: 1px solid var(--accent);
outline-offset: 0;
}
.qlog-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font: 11px var(--font-ui);
margin-bottom: 2px;
}
.qlog-meta .who {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qlog-meta .name,
.qlog-meta a.name {
font-weight: 700;
color: var(--link);
text-decoration: none;
}
.qlog-meta a.name:hover,
.qlog-meta a.target:hover {
color: var(--link-hover);
text-decoration: underline;
}
.qlog-meta .arrow,
.qlog-meta .bull {
color: var(--text-muted);
font-weight: 400;
}
.qlog-meta .target,
.qlog-meta a.target {
font-weight: 700;
color: var(--text-muted);
text-decoration: none;
}
.qlog-meta a.target {
color: var(--link);
}
.qlog-meta .ref {
font-style: italic;
color: var(--text-muted);
}
.qlog-meta .ref.gossip {
font-style: normal;
color: var(--accent);
}
.qlog-meta .time,
.qlog-meta time.time {
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
text-align: right;
cursor: help;
}
.qlog-text {
margin: 0;
font-size: 12px;
color: var(--text);
}
/* —— Featured Allies —— */
.friend-count {
margin: 6px 10px;
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
.top8 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin: 8px;
}
.col-left .top8 {
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin: 4px;
}
.col-left .friend {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.col-left .friend-avatar {
margin: 0 0 1px;
border-width: 1px;
}
.col-left .friend-name {
display: block;
font-size: 8px;
line-height: 1.1;
padding: 0 1px 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.col-left a.friend:hover .friend-avatar {
outline: 1px solid var(--accent);
}
@media (max-width: 560px) {
.top8 { grid-template-columns: repeat(2, 1fr); }
}
.friend {
text-align: center;
padding: 4px;
border: 1px solid var(--rule);
background: var(--box-bg);
text-decoration: none;
color: inherit;
display: block;
}
a.friend:hover {
border-color: var(--accent);
text-shadow: none;
}
a.friend:hover .friend-name {
color: var(--link-hover);
text-decoration: underline;
}
.friend-inert {
cursor: default;
opacity: 0.8;
}
.friend-avatar {
width: 100%;
aspect-ratio: 1;
margin: 0 0 3px;
border: 1px solid var(--box-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 14px;
color: var(--text-muted);
background: var(--bg);
overflow: hidden;
}
.friend-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
/* Face crop: override --face-y / --face-zoom per portrait */
object-position: center var(--face-y, 18%);
transform: scale(var(--face-zoom, 1.55));
transform-origin: center var(--face-y, 18%);
display: block;
}
.friend-name {
display: block;
font-family: var(--font-ui);
font-size: 11px;
color: var(--link);
}
.friend-inert .friend-name {
color: var(--text-muted);
}
/* —— Footer —— */
.footer {
margin-top: 16px;
padding: 12px 10px;
border-top: 1px solid var(--box-border);
text-align: center;
color: var(--text-muted);
font-size: 12px;
}
.footer .tiny {
margin: 6px 0 0;
font-size: 11px;
}