/* =========================================================== ROSTER — shared layout for BRS / FW character grids Faction color is set per-page via [data-faction] on . =========================================================== */ [data-faction="brs"] { --acc: var(--brs-primary); --acc-2: var(--brs-secondary); --acc-line: var(--brs-line); --acc-glow: rgba(217, 70, 239, 0.55); --acc-soft: rgba(217, 70, 239, 0.08); } [data-faction="fw"] { --acc: var(--fw-primary); --acc-2: var(--fw-secondary); --acc-line: var(--fw-line); --acc-glow: rgba(6, 182, 212, 0.55); --acc-soft: rgba(6, 182, 212, 0.08); } body { background: radial-gradient(ellipse 50% 40% at 50% 0%, var(--acc-soft), transparent 60%), radial-gradient(ellipse 40% 30% at 50% 100%, var(--acc-soft), transparent 60%), var(--bg-primary); background-attachment: fixed; min-height: 100vh; } /* global texture */ .global-fx { position: fixed; inset: 0; pointer-events: none; z-index: 200; } .global-fx .scanlines { position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px); mix-blend-mode: overlay; } .global-fx .noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: overlay; } .shell { position: relative; max-width: 1480px; margin: 0 auto; padding: 22px 32px 100px; z-index: 1; } /* ============== TOP HUD ============== */ .doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--hairline); padding: 14px 8px; } .doc-top .group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .id-block { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.16em; color: var(--text-primary); } .id-block .k { color: var(--text-muted); } .back-link { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .back-link:hover { color: var(--text-primary); } .back-link svg { width: 18px; height: 10px; } .live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--danger); text-transform: uppercase; } .live-pill::before { content:''; width:6px; height:6px; background: var(--danger); animation: blink 1s steps(2) infinite; } .signal { display:inline-flex; align-items:flex-end; gap:2px; height: 14px; } .signal i { width:3px; background: var(--text-primary); display:block; } .signal i:nth-child(1){height:4px;opacity:.9} .signal i:nth-child(2){height:7px;opacity:.9} .signal i:nth-child(3){height:10px;opacity:.5} .signal i:nth-child(4){height:13px;opacity:.2} /* ============== HEADER BLOCK ============== */ .fac-head { margin-top: 18px; border: 1px solid var(--hairline); background: linear-gradient(135deg, var(--acc-soft), transparent 50%), rgba(13, 14, 26, 0.55); padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 260px; gap: 40px; align-items: center; position: relative; overflow: hidden; } .fac-head::before, .fac-head::after { content: ''; position: absolute; width: 20px; height: 20px; border: 1px solid var(--acc); pointer-events: none; } .fac-head::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .fac-head::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* big backdrop sigil */ .fac-head .backdrop-sigil { position: absolute; right: -8%; top: -30%; width: 60%; color: var(--acc); opacity: 0.07; pointer-events: none; filter: blur(0.3px); transform: rotate(8deg); } .fac-head .col-left, .fac-head .col-mid, .fac-head .col-right { min-width: 0; } .fac-head .col-left { display: grid; gap: 16px; align-content: center; } .fac-head .eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .fac-head .sigil-row { display: flex; align-items: center; gap: 18px; } .fac-head .sigil-row svg { width: 56px; height: 56px; color: var(--acc); filter: drop-shadow(0 0 14px var(--acc-glow)); } .fac-head .titles { display: grid; gap: 4px; min-width: 0; } .fac-head h1 { font-family: var(--font-display); font-size: clamp(48px, 5.6vw, 84px); line-height: 0.88; letter-spacing: 0.02em; text-transform: uppercase; word-break: keep-all; hyphens: none; } .fac-head h1 .br { display: block; } [data-faction="brs"] .fac-head h1 { text-shadow: 0 0 28px rgba(217,70,239,0.45); } [data-faction="fw"] .fac-head h1 { text-shadow: 0 0 28px rgba(6,182,212,0.45); } .fac-head .kr-name { font-family: var(--font-kr); font-weight: 800; font-size: 16px; letter-spacing: 0.32em; color: var(--text-muted); } .fac-head .col-mid { font-family: var(--font-kr); font-weight: 500; font-size: 16px; line-height: 1.85; color: var(--text-primary); position: relative; z-index: 1; } .fac-head .col-mid .quote { font-family: var(--font-kr); font-weight: 800; font-size: 22px; line-height: 1.45; color: var(--text-primary); border-left: 2px solid var(--acc); padding: 6px 0 6px 18px; margin-bottom: 18px; max-width: 32ch; } .fac-head .col-mid .quote .em { color: var(--acc); } .fac-head .col-mid p { max-width: 42ch; color: var(--text-primary); font-size: 14px; line-height: 1.85; text-wrap: pretty; word-break: keep-all; } .fac-head .col-mid p .dim { color: var(--text-muted); } .fac-head .col-mid p b { color: var(--acc); font-weight: 800; } .fac-head .col-right { display: grid; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; border-left: 1px solid var(--hairline); padding-left: 28px; position: relative; z-index: 1; } .fac-head .col-right .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--hairline); } .fac-head .col-right .row:last-child { border-bottom: 0; } .fac-head .col-right .row b { color: var(--text-primary); font-weight: 500; } .fac-head .col-right .row .acc { color: var(--acc); font-weight: 500; } /* ============== SECTION TITLE BAR ============== */ .sec-bar { margin-top: 44px; display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--hairline-hot); } .sec-bar .lhs { display: grid; gap: 4px; } .sec-bar .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--warning); } .sec-bar h2 { font-family: var(--font-display); font-size: 40px; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; } .sec-bar .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; display: flex; gap: 16px; align-items: center; } .sec-bar .meta b { color: var(--text-primary); font-weight: 500; } .sec-bar .meta .acc { color: var(--acc); font-weight: 500; } /* ============== ROSTER GRID ============== */ .roster { margin-top: 28px; display: grid; gap: 22px; } .roster.cols-5 { grid-template-columns: repeat(5, 1fr); } .roster.cols-4 { grid-template-columns: repeat(4, 1fr); } /* zig-zag intentional offsets — odd cards lift up, even cards drop down */ .roster .card:nth-child(odd) { transform: translateY(-12px); } .roster .card:nth-child(even) { transform: translateY(12px); } .card { position: relative; background: rgba(13, 14, 26, 0.65); border: 1px solid var(--hairline); display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.4s cubic-bezier(.7,.1,.2,1), border-color 0.3s ease, box-shadow 0.3s ease; isolation: isolate; } .card::before, .card::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--hairline-hot); pointer-events: none; z-index: 6; } .card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .card:hover { border-color: var(--acc); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6), 0 0 28px var(--acc-glow); z-index: 5; } .roster .card:nth-child(odd):hover { transform: translateY(-22px); } .roster .card:nth-child(even):hover { transform: translateY(2px); } /* card top — code + risk */ .card .c-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-primary); text-transform: uppercase; border-bottom: 1px dashed var(--hairline); position: relative; z-index: 3; } .card .c-top .id { color: var(--acc); font-weight: 700; } .card .c-top .risk { border: 1px solid var(--warning); color: var(--warning); padding: 2px 6px; font-weight: 700; letter-spacing: 0.18em; } .card .c-top .risk.max { color: var(--danger); border-color: var(--danger); animation: blink 1.4s steps(2) infinite; } .card .c-top .risk.sss { color: var(--danger); border-color: var(--danger); } .card .c-top .risk.inf { color: var(--danger); border-color: var(--danger); } /* image area */ .card .c-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-primary); } .card .c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: contrast(1.06) saturate(1.06) brightness(0.92); transition: filter 0.4s ease, transform 0.6s ease, object-position 0.6s ease; } .card:hover .c-photo img { filter: contrast(1.15) saturate(1.15) brightness(1.0); transform: scale(1.03); } .card .c-photo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px), linear-gradient(to top, rgba(5,5,7,0.85) 0%, rgba(5,5,7,0.0) 35%); pointer-events: none; } .card .c-photo .photo-tag { position: absolute; bottom: 10px; left: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; } .card .c-photo .photo-tag b { color: var(--text-primary); font-weight: 500; } /* name block */ .card .c-name { padding: 14px 14px 4px; display: block; position: relative; z-index: 3; } .card .c-name .kr { font-family: var(--font-kr); font-weight: 900; font-size: 30px; line-height: 34px; height: 34px; color: var(--text-primary); display: block; } .card .c-name .en { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 22px; line-height: 24px; height: 24px; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 6px; } .card .c-name .en .age { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--acc); line-height: 1; } .card .c-name .alias { display: block; font-family: inherit; font-size: 11px; letter-spacing: normal; color: var(--text-primary); margin-top: 12px; line-height: 1; } .card .c-name .alias .alias-name { display: block; font-family: var(--font-kr); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: var(--text-primary); line-height: 22px; height: 22px; text-shadow: 0 0 16px var(--acc-glow); } .card .c-name .alias .alias-role { display: inline-block; margin-top: 9px; padding: 2px 8px 3px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc); border: 1px solid var(--acc-line); background: var(--acc-soft); line-height: 1.3; transition: border-color 0.3s ease, background 0.3s ease; } .card:hover .c-name .alias .alias-role { border-color: var(--acc); background: rgba(0,0,0,0); /* let card glow show through */ } /* legacy fallback — older markup still using .kr-piece */ .card .c-name .alias .kr-piece { display: block; font-family: var(--font-kr); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: var(--text-primary); line-height: 22px; margin-bottom: 2px; } /* stats block — 2 rows of key-val */ .card .c-stats { padding: 10px 14px 14px; display: grid; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; border-top: 1px dashed var(--hairline); margin-top: 8px; position: relative; z-index: 3; } .card .c-stats .row { display: grid; grid-template-columns: 84px 1fr; gap: 8px; } .card .c-stats .row .k { color: var(--text-muted); } .card .c-stats .row .v { color: var(--text-primary); font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: 0.05em; font-size: 11px; line-height: 1.45; } .card .c-stats .row .v.acc { color: var(--acc); } /* weapon row — 2-line composite for FW (and any card that opts in) */ .card .c-stats .row.weapon { align-items: start; padding: 4px 0 2px; } .card .c-stats .row.weapon .k { padding-top: 4px; align-self: start; } .card .c-stats .row.weapon .v { display: grid; gap: 1px; } .card .c-stats .row.weapon .v .w-en { font-family: var(--font-display); font-size: 17px; line-height: 1.05; letter-spacing: 0.05em; color: var(--acc); text-transform: uppercase; text-shadow: 0 0 12px var(--acc-glow); } .card .c-stats .row.weapon .v .w-kr { font-family: var(--font-kr); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.3; margin-top: 1px; } /* signature dialogue */ .card .c-quote { padding: 12px 14px; background: var(--acc-soft); border-top: 1px solid var(--acc-line); font-family: var(--font-kr); font-weight: 500; font-size: 13px; line-height: 1.6; color: var(--text-primary); position: relative; z-index: 3; text-wrap: pretty; /* prevents 1-character orphans on the last line */ word-break: keep-all; /* never break inside a Korean word */ overflow-wrap: anywhere; hanging-punctuation: allow-end; } .card .c-quote::before { content: '＂'; color: var(--acc); font-weight: 800; margin-right: 4px; } .card .c-quote::after { content: '＂'; color: var(--acc); font-weight: 800; margin-left: 0; } /* the last word + closing-quote pair must never split */ .card .c-quote .nb { white-space: nowrap; } /* footer w/ stamp */ .card .c-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; border-top: 1px solid var(--hairline); background: rgba(10, 10, 15, 0.5); position: relative; z-index: 3; } .card .c-foot .file b { color: var(--text-primary); font-weight: 500; } .card .c-foot .open { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); } .card .c-foot .open svg { width: 16px; height: 8px; } .card .c-foot .open svg path { stroke: var(--acc); } /* corner accent strip on card edge */ .card .edge { position: absolute; top: 38px; left: -1px; width: 3px; height: 60px; background: var(--acc); z-index: 5; box-shadow: 0 0 10px var(--acc-glow); } /* the diagonal stamp overlay on hover */ .card .stamp-overlay { position: absolute; top: 50%; right: 6%; transform: translateY(-50%) rotate(-12deg); z-index: 4; border: 3px double currentColor; padding: 6px 14px; font-family: var(--font-header); font-weight: 700; font-size: 22px; letter-spacing: 0.18em; color: var(--danger); text-transform: uppercase; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; background: rgba(5,5,7,0.55); } [data-faction="fw"] .card .stamp-overlay { color: var(--acc); } .card:hover .stamp-overlay { opacity: 0.85; } /* ============== BOTTOM DOC FOOTER ============== */ .doc-foot-nav { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; } .doc-foot-nav .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase; } .doc-foot-nav .meta b { color: var(--text-muted); } .doc-foot-nav .nav-cta { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; background: rgba(10, 10, 15, 0.55); border: 1px solid var(--acc); color: var(--acc); font-family: var(--font-header); font-weight: 600; font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease; } .doc-foot-nav .nav-cta:hover { background: var(--acc); color: var(--bg-primary); letter-spacing: 0.32em; } .doc-foot-nav .nav-cta:hover svg path { stroke: var(--bg-primary); } .doc-foot-nav .nav-cta svg { width: 22px; height: 10px; } /* responsive — fewer columns on smaller screens */ @media (max-width: 1280px) { .roster.cols-5 { grid-template-columns: repeat(3, 1fr); } .roster.cols-4 { grid-template-columns: repeat(3, 1fr); } .roster .card:nth-child(odd), .roster .card:nth-child(even) { transform: none; } .roster .card:nth-child(odd):hover, .roster .card:nth-child(even):hover { transform: translateY(-10px); } } /* ============== CLASSIFIED PLACEHOLDER CARD ============== For the empty 5th slot on FW roster — same dimensions as a real card but with intrigue: dashed border, redacted data, scanning line, oversized "?" glyph. */ .card.classified { cursor: default; border-style: dashed; border-color: var(--acc-line); } .card.classified::before, .card.classified::after { border-color: var(--acc-line); border-style: dashed; } .card.classified:hover { transform: translateY(-12px) !important; border-color: var(--acc); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6), 0 0 28px var(--acc-glow); } .roster .card.classified:nth-child(odd):hover { transform: translateY(-22px) !important; } .roster .card.classified:nth-child(even):hover { transform: translateY(2px) !important; } .card.classified .c-photo { position: relative; background: repeating-linear-gradient(-45deg, rgba(248, 250, 252, 0.035) 0 10px, transparent 10px 20px), radial-gradient(ellipse at center, rgba(13, 14, 26, 0.75) 0%, rgba(5, 5, 7, 0.95) 80%); display: grid; place-items: center; overflow: hidden; } .card.classified .c-photo .lock-glyph { font-family: var(--font-display); font-size: clamp(120px, 14vw, 180px); line-height: 1; color: var(--acc); opacity: 0.32; filter: drop-shadow(0 0 22px var(--acc-glow)); animation: classifiedBreathe 3.4s ease-in-out infinite; } @keyframes classifiedBreathe { 0%, 100% { opacity: 0.22; transform: scale(0.95); } 50% { opacity: 0.55; transform: scale(1.02); } } .card.classified .c-photo .scan { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--acc); box-shadow: 0 0 12px var(--acc), 0 0 24px var(--acc); opacity: 0; animation: classifiedScan 3.4s linear infinite; pointer-events: none; z-index: 2; } @keyframes classifiedScan { 0% { top: 0%; opacity: 0; } 6% { opacity: 0.85; } 94% { opacity: 0.85; } 100% { top: 100%; opacity: 0; } } .card.classified .c-photo .photo-tag { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.42em; color: var(--acc); text-transform: uppercase; z-index: 3; } .card.classified .c-photo .photo-tag b { color: var(--text-primary); font-weight: 600; } .card.classified .c-top .id { color: var(--acc); animation: blink 1.6s steps(2) infinite; } .card.classified .c-top .risk { color: var(--acc); border-color: var(--acc); font-family: var(--font-display); font-size: 14px; line-height: 1; letter-spacing: 0; padding: 1px 7px 3px; } .card.classified .c-name .kr { color: var(--text-muted); letter-spacing: 0.12em; font-weight: 800; } .card.classified .c-name .en { color: var(--text-muted); } .card.classified .c-name .alias { color: var(--text-muted); } .card.classified .c-stats .row .v { display: flex; align-items: center; } .card.classified .c-quote { font-style: italic; color: var(--text-muted); background: rgba(13, 14, 26, 0.6); border-top-style: dashed; } .card.classified .c-quote::before, .card.classified .c-quote::after { color: var(--acc); opacity: 0.6; } .card.classified .c-foot .open { color: var(--text-muted); letter-spacing: 0.32em; } .card.classified .c-foot .open svg path { stroke: var(--text-muted); } .card.classified .stamp-overlay { border-style: dashed; border-width: 2px; color: var(--acc); opacity: 0; } .card.classified:hover .stamp-overlay { opacity: 0.7; } @media (max-width: 1180px) { /* drop the 3-column header before the title forces the mid column to collapse */ .fac-head { grid-template-columns: 1fr; padding: 28px 28px; gap: 24px; } .fac-head .col-right { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 18px; } } @media (max-width: 880px) { .roster.cols-5, .roster.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .roster.cols-5, .roster.cols-4 { grid-template-columns: 1fr; } }