mirror of
https://github.com/tiennm99/reigen.git
synced 2026-08-04 11:23:34 +00:00
tiennm99
57c30722ae
Single-scroll static page about Reigen Arataka from Mob Psycho 100: profile, personality, real skills against the performed "techniques", quotes, relationships and spoiler-gated story arcs. All artwork is hand-authored CSS/SVG — the repo carries no character images at all, since the series is copyrighted. The footer states the page is unofficial and non-commercial and gives a takedown contact. Content is progressive-enhancement safe: every section lives in the markup, and the reveal animations only arm themselves once the observer is attached, so a failed module can never leave content invisible. Facts that sources disagreed on (birthday, English voice actor) are omitted rather than published, and quotes carry no episode citation because none could be verified. Removes the unrelated PixiJS point-cloud demo that previously occupied the repo root.
1021 lines
30 KiB
CSS
1021 lines
30 KiB
CSS
/* =========================================================================
|
|
Reigen Arataka — unofficial fan tribute
|
|
All visual art in this file is original hand-authored CSS/SVG.
|
|
Layout: single long scroll, mobile-first, no build step.
|
|
========================================================================= */
|
|
|
|
/* ------------------------------- TOKENS ------------------------------- */
|
|
:root {
|
|
/* Colour — "poster paint on newsprint" reading of the series' palette */
|
|
--ink: #0c0c11; /* page base */
|
|
--ink-2: #14141c; /* raised surface */
|
|
--ink-3: #1d1d28; /* card surface */
|
|
--line: #2c2c3a; /* hairline borders */
|
|
--line-2: #3d3d50;
|
|
|
|
--paper: #f2ede2; /* primary text (11.9:1 on --ink) */
|
|
--paper-dim: #b8b2a6; /* secondary text (7.0:1 on --ink) */
|
|
--paper-mute: #8f8a80; /* tertiary / fine print (4.6:1 on --ink) */
|
|
|
|
--magenta: #ff3d7f; /* aura / accent (5.6:1 on --ink) */
|
|
--teal: #17d6c6; /* aura / links (10.4:1 on --ink) */
|
|
--acid: #d8f24a; /* highlight (14.9:1 on --ink) */
|
|
--tan: #d9b483; /* the suit (8.4:1 on --ink) */
|
|
--tan-dark: #b18f66;
|
|
|
|
/* Type */
|
|
--f-display: 'Archivo Black', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
|
|
--f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
|
|
--f-quote: 'Newsreader', Georgia, 'Times New Roman', serif;
|
|
--f-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
|
|
/* Latin webfonts carry no kanji — Japanese text needs its own stack. */
|
|
--f-ja: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic',
|
|
'Meiryo', 'MS PGothic', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
|
|
|
|
--fs-xs: 0.75rem;
|
|
--fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
|
|
--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
|
|
--fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
|
|
--fs-lg: clamp(1.3125rem, 1.16rem + 0.75vw, 1.875rem);
|
|
--fs-xl: clamp(1.625rem, 1.32rem + 1.5vw, 2.75rem);
|
|
--fs-2xl: clamp(2rem, 1.5rem + 2.6vw, 3.75rem);
|
|
--fs-hero: clamp(2.75rem, 1.4rem + 9.4vw, 8.5rem);
|
|
|
|
/* Space */
|
|
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
|
|
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
|
|
--sp-9: clamp(3.5rem, 2rem + 7vw, 7rem);
|
|
|
|
--measure: 62ch;
|
|
--wrap: 74rem;
|
|
--pad: clamp(1rem, 0.5rem + 2.5vw, 3rem);
|
|
--radius: 2px;
|
|
/* Anchor offset for the sticky header. Mobile-first: the header stacks the
|
|
brand over the nav strip (~98px). Overridden at >=56rem where it is one row. */
|
|
--header-h: 6.25rem;
|
|
|
|
/* Motion */
|
|
--dur-fast: 150ms;
|
|
--dur: 240ms;
|
|
--dur-reveal: 560ms;
|
|
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
|
|
}
|
|
|
|
/* ------------------------------- RESET -------------------------------- */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
font-family: var(--f-body);
|
|
font-size: var(--fs-base);
|
|
line-height: 1.6;
|
|
font-synthesis-weight: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Subtle halftone texture — decorative, never intercepts input. */
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(circle at center, rgba(242,237,226,0.5) 0.5px, transparent 0.6px);
|
|
background-size: 4px 4px;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; }
|
|
p, ul, ol, figure, table, blockquote { margin: 0; }
|
|
ul, ol { padding: 0; list-style: none; }
|
|
img, svg { max-width: 100%; }
|
|
table { border-collapse: collapse; }
|
|
cite { font-style: italic; }
|
|
|
|
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
|
|
a:hover { color: var(--acid); }
|
|
|
|
:focus-visible {
|
|
outline: 3px solid var(--acid);
|
|
outline-offset: 3px;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
[lang="ja"] { font-family: var(--f-ja); }
|
|
|
|
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
|
|
|
|
.visually-hidden {
|
|
position: absolute; width: 1px; height: 1px;
|
|
margin: -1px; padding: 0; border: 0;
|
|
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
|
|
}
|
|
|
|
/* ---------------------------- SKIP LINK -------------------------------- */
|
|
.skip-link {
|
|
position: absolute;
|
|
left: var(--sp-4);
|
|
top: -6rem;
|
|
z-index: 100;
|
|
padding: var(--sp-3) var(--sp-5);
|
|
background: var(--acid);
|
|
color: var(--ink);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: top var(--dur) var(--ease);
|
|
}
|
|
.skip-link:focus { top: var(--sp-3); color: var(--ink); }
|
|
|
|
/* ------------------------------ HEADER -------------------------------- */
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: rgba(12, 12, 17, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.site-header__inner {
|
|
max-width: var(--wrap);
|
|
margin-inline: auto;
|
|
padding: 0 var(--pad);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
padding: var(--sp-3) 0 var(--sp-2);
|
|
color: var(--paper);
|
|
text-decoration: none;
|
|
min-height: 44px;
|
|
}
|
|
.brand__mark {
|
|
flex: none;
|
|
width: 2rem; height: 2rem;
|
|
display: grid; place-items: center;
|
|
background: var(--magenta);
|
|
color: var(--ink);
|
|
font-size: 1.25rem; /* 霊 is a dense glyph — needs the extra size to read */
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
}
|
|
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
|
|
.brand__text b { font-size: var(--fs-sm); letter-spacing: 0.01em; }
|
|
.brand__text small {
|
|
font-family: var(--f-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-mute);
|
|
}
|
|
.brand:hover .brand__text b { color: var(--acid); }
|
|
|
|
/* Nav: horizontal scroller on narrow screens, never widens the page. */
|
|
.site-nav { position: relative; margin-inline: calc(var(--pad) * -1); }
|
|
|
|
/* Fade at the right edge hints that the strip scrolls. Removed once the
|
|
nav fits on one line at >=56rem. */
|
|
.site-nav::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0; top: 0; bottom: 0;
|
|
width: 2.5rem;
|
|
pointer-events: none;
|
|
background: linear-gradient(90deg, rgba(12,12,17,0), rgba(12,12,17,0.95));
|
|
}
|
|
.site-nav ul {
|
|
display: flex;
|
|
gap: var(--sp-1);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
padding: 0 var(--pad) var(--sp-2);
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
.site-nav ul::-webkit-scrollbar { display: none; }
|
|
.site-nav li { flex: none; scroll-snap-align: start; }
|
|
.site-nav a {
|
|
display: block;
|
|
padding: var(--sp-2) var(--sp-3);
|
|
color: var(--paper-dim);
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
border: 1px solid transparent;
|
|
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
|
|
}
|
|
.site-nav a:hover { color: var(--paper); border-color: var(--line-2); }
|
|
.site-nav a[aria-current="true"] {
|
|
color: var(--ink);
|
|
background: var(--acid);
|
|
border-color: var(--acid);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (min-width: 56rem) {
|
|
/* Brand and nav share one row from here, so the header is shorter. */
|
|
:root { --header-h: 4.25rem; }
|
|
.site-header__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-5); }
|
|
.brand { padding: var(--sp-4) 0; }
|
|
.site-nav { margin-inline: 0; }
|
|
.site-nav::after { display: none; }
|
|
.site-nav ul { padding: 0; overflow-x: visible; }
|
|
}
|
|
|
|
/* ------------------------------- HERO --------------------------------- */
|
|
.hero {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
padding: var(--sp-8) var(--pad) var(--sp-9);
|
|
min-height: min(92svh, 54rem);
|
|
display: grid;
|
|
align-content: center;
|
|
}
|
|
|
|
/* --- hero art: aura blobs + rays + abstract suited figure --- */
|
|
.hero__art {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
/* Scrim: keeps the art bright on the right, guarantees text contrast on the
|
|
left where the copy sits. Without this the aura undercuts AA on the kicker. */
|
|
.hero__art::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
/* darkens the copy side */
|
|
linear-gradient(90deg,
|
|
rgba(12,12,17,0.85) 0%, rgba(12,12,17,0.60) 32%,
|
|
rgba(12,12,17,0.15) 55%, rgba(12,12,17,0) 70%),
|
|
/* tames the aura glare behind the kicker on narrow screens */
|
|
linear-gradient(180deg, rgba(12,12,17,0.35) 0%, rgba(12,12,17,0) 40%);
|
|
}
|
|
|
|
.aura {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(46px);
|
|
opacity: 0.5;
|
|
}
|
|
.aura--a {
|
|
width: 34rem; height: 34rem;
|
|
right: -12rem; top: -10rem;
|
|
background: radial-gradient(circle at 50% 50%, var(--magenta) 0%, rgba(255,61,127,0) 68%);
|
|
}
|
|
.aura--b {
|
|
width: 30rem; height: 30rem;
|
|
left: -12rem; bottom: -8rem;
|
|
background: radial-gradient(circle at 50% 50%, var(--teal) 0%, rgba(23,214,198,0) 68%);
|
|
opacity: 0.4;
|
|
}
|
|
.aura--c {
|
|
width: 22rem; height: 22rem;
|
|
right: 8%; bottom: 6%;
|
|
background: radial-gradient(circle at 50% 50%, var(--acid) 0%, rgba(216,242,74,0) 66%);
|
|
opacity: 0.16;
|
|
}
|
|
|
|
.rays {
|
|
position: absolute;
|
|
right: -6rem;
|
|
top: 50%;
|
|
translate: 0 -50%;
|
|
width: 30rem;
|
|
color: var(--tan);
|
|
opacity: 0.22;
|
|
}
|
|
|
|
.figure {
|
|
position: absolute;
|
|
right: -3rem;
|
|
bottom: -2rem;
|
|
width: 15rem;
|
|
opacity: 0.5;
|
|
}
|
|
.fg-jacket { fill: var(--tan); }
|
|
.fg-lapel { fill: var(--tan-dark); }
|
|
.fg-head { fill: var(--tan); }
|
|
.fg-neck { fill: var(--tan-dark); }
|
|
.fg-hair { fill: #4a3a2e; }
|
|
.fg-shirt { fill: #26222b; }
|
|
.fg-tie { fill: var(--magenta); }
|
|
.fg-tie2 { fill: #c9265d; }
|
|
|
|
@media (min-width: 48rem) {
|
|
.figure { width: 20rem; right: 2%; opacity: 0.72; }
|
|
.rays { right: 0; width: 36rem; opacity: 0.3; }
|
|
}
|
|
@media (min-width: 68rem) {
|
|
.figure { width: 25rem; right: 6%; }
|
|
}
|
|
|
|
/* --- hero text --- */
|
|
.hero__body {
|
|
position: relative;
|
|
max-width: var(--wrap);
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.kicker {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--magenta);
|
|
margin-bottom: var(--sp-3);
|
|
}
|
|
.kicker--strike span {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-right: 0.2em;
|
|
}
|
|
.kicker--strike span::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; right: 0; top: 52%;
|
|
height: 2px;
|
|
background: var(--magenta);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.hero__title {
|
|
font-family: var(--f-display);
|
|
font-size: var(--fs-hero);
|
|
line-height: 0.86;
|
|
letter-spacing: -0.03em;
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--sp-3);
|
|
}
|
|
.hero__title span { display: block; }
|
|
.hero__title span:last-child { color: var(--tan); }
|
|
|
|
.hero__ja {
|
|
font-size: var(--fs-lg);
|
|
font-weight: 500;
|
|
letter-spacing: 0.28em;
|
|
color: var(--paper-dim);
|
|
margin-bottom: var(--sp-5);
|
|
}
|
|
|
|
.hero__claim {
|
|
font-family: var(--f-quote);
|
|
font-style: italic;
|
|
font-size: var(--fs-md);
|
|
color: var(--acid);
|
|
border-left: 3px solid var(--acid);
|
|
padding-left: var(--sp-4);
|
|
margin-bottom: var(--sp-5);
|
|
max-width: 34ch;
|
|
}
|
|
|
|
.hero__tagline {
|
|
max-width: 46ch;
|
|
color: var(--paper-dim);
|
|
margin-bottom: var(--sp-6);
|
|
}
|
|
|
|
.stat-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--sp-3);
|
|
margin-bottom: var(--sp-6);
|
|
}
|
|
.stat-chips li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--sp-3);
|
|
padding: var(--sp-2) var(--sp-4);
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--line);
|
|
border-left: 3px solid var(--teal);
|
|
}
|
|
.stat-chips__k {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
}
|
|
.stat-chips__v {
|
|
font-family: var(--f-display);
|
|
font-size: var(--fs-md);
|
|
color: var(--acid);
|
|
}
|
|
.stat-chips li:has(.stat-chips__v--zero) { border-left-color: var(--magenta); }
|
|
.stat-chips__v--zero { color: var(--magenta); }
|
|
|
|
.hero__note {
|
|
max-width: 52ch;
|
|
font-size: var(--fs-sm);
|
|
color: var(--paper-dim);
|
|
border-top: 1px solid var(--line);
|
|
padding-top: var(--sp-4);
|
|
}
|
|
|
|
/* Below the wide breakpoint the suited figure sits directly behind this fine
|
|
print and dropped it under AA (measured 3.35:1 at 320px). A solid backdrop
|
|
takes the art out from behind the text entirely. */
|
|
@media (max-width: 47.9375rem) {
|
|
.hero__note {
|
|
position: relative;
|
|
z-index: 1;
|
|
/* Solid behind every glyph, fading only across the bottom padding so the
|
|
backdrop's edge doesn't slice visibly through the figure behind it. */
|
|
background: linear-gradient(
|
|
to bottom,
|
|
var(--ink) 0,
|
|
var(--ink) calc(100% - var(--sp-3)),
|
|
rgba(12, 12, 17, 0) 100%
|
|
);
|
|
padding-bottom: var(--sp-3);
|
|
}
|
|
}
|
|
|
|
.scroll-cue {
|
|
position: absolute;
|
|
left: var(--pad);
|
|
bottom: var(--sp-4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
font-family: var(--f-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-mute);
|
|
}
|
|
.scroll-cue span {
|
|
width: 2.5rem;
|
|
height: 1px;
|
|
background: var(--paper-mute);
|
|
animation: cue 2.4s var(--ease) infinite;
|
|
transform-origin: left center;
|
|
}
|
|
@keyframes cue {
|
|
0%, 100% { transform: scaleX(0.4); opacity: 0.4; }
|
|
50% { transform: scaleX(1); opacity: 1; }
|
|
}
|
|
|
|
/* ------------------------- SALT-SPLASH RULE ---------------------------- */
|
|
/* Hand-placed dot field standing in for a thrown handful of salt. */
|
|
.salt-rule {
|
|
height: 3.5rem;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
background-image:
|
|
radial-gradient(circle at 4% 60%, var(--tan) 0 2.6px, transparent 2.7px),
|
|
radial-gradient(circle at 9% 35%, var(--tan) 0 1.6px, transparent 1.7px),
|
|
radial-gradient(circle at 14% 72%, var(--tan) 0 2.1px, transparent 2.2px),
|
|
radial-gradient(circle at 20% 44%, var(--paper-dim) 0 1.2px, transparent 1.3px),
|
|
radial-gradient(circle at 26% 66%, var(--tan) 0 2.8px, transparent 2.9px),
|
|
radial-gradient(circle at 32% 30%, var(--tan) 0 1.4px, transparent 1.5px),
|
|
radial-gradient(circle at 38% 58%, var(--paper-dim) 0 2px, transparent 2.1px),
|
|
radial-gradient(circle at 44% 76%, var(--tan) 0 1.3px, transparent 1.4px),
|
|
radial-gradient(circle at 50% 40%, var(--tan) 0 2.4px, transparent 2.5px),
|
|
radial-gradient(circle at 56% 64%, var(--paper-dim) 0 1.5px, transparent 1.6px),
|
|
radial-gradient(circle at 62% 32%, var(--tan) 0 2.2px, transparent 2.3px),
|
|
radial-gradient(circle at 68% 70%, var(--tan) 0 1.7px, transparent 1.8px),
|
|
radial-gradient(circle at 74% 48%, var(--paper-dim) 0 2.6px, transparent 2.7px),
|
|
radial-gradient(circle at 80% 26%, var(--tan) 0 1.2px, transparent 1.3px),
|
|
radial-gradient(circle at 86% 62%, var(--tan) 0 2px, transparent 2.1px),
|
|
radial-gradient(circle at 92% 38%, var(--paper-dim) 0 1.6px, transparent 1.7px),
|
|
radial-gradient(circle at 97% 68%, var(--tan) 0 2.3px, transparent 2.4px);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ----------------------------- SECTIONS -------------------------------- */
|
|
.section {
|
|
max-width: var(--wrap);
|
|
margin-inline: auto;
|
|
padding: var(--sp-9) var(--pad);
|
|
scroll-margin-top: calc(var(--header-h) + 1rem);
|
|
}
|
|
|
|
.section__head { margin-bottom: var(--sp-7); max-width: var(--measure); }
|
|
.section__num {
|
|
font-family: var(--f-display);
|
|
font-size: var(--fs-md);
|
|
color: var(--magenta);
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
.section h2 {
|
|
font-family: var(--f-display);
|
|
font-size: var(--fs-2xl);
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.025em;
|
|
line-height: 0.95;
|
|
}
|
|
.section__lede {
|
|
margin-top: var(--sp-4);
|
|
font-size: var(--fs-md);
|
|
color: var(--paper-dim);
|
|
}
|
|
|
|
.fine-print {
|
|
margin-top: var(--sp-4);
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
line-height: 1.7;
|
|
color: var(--paper-mute);
|
|
}
|
|
.fine-print--wide { max-width: var(--measure); margin-top: var(--sp-6); }
|
|
|
|
@media (min-width: 56rem) {
|
|
.section__head { display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--sp-5); max-width: none; }
|
|
.section__num { grid-row: 1 / span 2; margin: 0; padding-top: 0.35em; }
|
|
.section__lede { max-width: var(--measure); }
|
|
}
|
|
|
|
/* --------------------------- PROFILE TABLE ----------------------------- */
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--line);
|
|
background: var(--ink-2);
|
|
}
|
|
|
|
.data-table { width: 100%; font-size: var(--fs-sm); }
|
|
.data-table td { color: var(--paper); }
|
|
.data-table th {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-mute);
|
|
text-align: left;
|
|
}
|
|
.t-ja { color: var(--tan); letter-spacing: 0.12em; margin-left: 0.4em; white-space: nowrap; }
|
|
|
|
/* Narrow screens: label above value, one block per row. Reads far better at
|
|
320px than a horizontally scrolling grid. ARIA roles in the markup keep the
|
|
table semantics intact. */
|
|
@media (max-width: 43.999rem) {
|
|
.data-table tr { display: block; padding: var(--sp-4) var(--sp-4); }
|
|
.data-table tr + tr { border-top: 1px solid var(--line); }
|
|
.data-table th,
|
|
.data-table td { display: block; padding: 0; }
|
|
.data-table th { margin-bottom: var(--sp-1); }
|
|
}
|
|
|
|
@media (min-width: 44rem) {
|
|
.data-table th,
|
|
.data-table td { padding: var(--sp-4) var(--sp-5); vertical-align: top; }
|
|
.data-table th { width: 32%; white-space: nowrap; }
|
|
.data-table tr + tr th,
|
|
.data-table tr + tr td { border-top: 1px solid var(--line); }
|
|
.data-table tbody tr:hover td { background: var(--ink-3); }
|
|
}
|
|
/* ------------------------------ PROSE ---------------------------------- */
|
|
.section--who { border-top: 1px solid var(--line); }
|
|
|
|
.prose { max-width: var(--measure); font-size: var(--fs-md); }
|
|
.prose p + p { margin-top: var(--sp-5); }
|
|
.prose em { color: var(--acid); font-style: italic; }
|
|
|
|
.prose__drop::first-letter {
|
|
float: left;
|
|
font-family: var(--f-display);
|
|
font-size: 3.6em;
|
|
line-height: 0.78;
|
|
padding: 0.06em 0.12em 0 0;
|
|
color: var(--magenta);
|
|
}
|
|
|
|
.pull {
|
|
margin-top: var(--sp-6);
|
|
padding: var(--sp-5) 0 var(--sp-5) var(--sp-5);
|
|
border-left: 3px solid var(--teal);
|
|
font-family: var(--f-quote);
|
|
font-style: italic;
|
|
font-size: var(--fs-lg);
|
|
line-height: 1.35;
|
|
color: var(--paper);
|
|
}
|
|
|
|
/* ----------------------------- TRAITS ---------------------------------- */
|
|
.trait-grid {
|
|
display: grid;
|
|
gap: 1px;
|
|
background: var(--line);
|
|
border: 1px solid var(--line);
|
|
}
|
|
@media (min-width: 40rem) { .trait-grid { grid-template-columns: 1fr 1fr; } }
|
|
@media (min-width: 64rem) { .trait-grid { grid-template-columns: repeat(3, 1fr); } }
|
|
|
|
.trait {
|
|
background: var(--ink-2);
|
|
padding: var(--sp-5);
|
|
transition: background var(--dur) var(--ease);
|
|
}
|
|
.trait:hover { background: var(--ink-3); }
|
|
.trait h3 {
|
|
font-size: var(--fs-md);
|
|
margin-bottom: var(--sp-3);
|
|
color: var(--tan);
|
|
}
|
|
.trait p { font-size: var(--fs-sm); color: var(--paper-dim); }
|
|
|
|
/* --------------------------- ABILITIES SPLIT --------------------------- */
|
|
.split { display: grid; gap: var(--sp-5); }
|
|
@media (min-width: 58rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
|
|
|
|
.panel {
|
|
padding: var(--sp-5);
|
|
border: 1px solid var(--line);
|
|
background: var(--ink-2);
|
|
}
|
|
.panel--real { border-top: 4px solid var(--teal); }
|
|
.panel--fake { border-top: 4px solid var(--magenta); }
|
|
|
|
.panel__tag {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
.panel--real .panel__tag { color: var(--teal); }
|
|
.panel--fake .panel__tag { color: var(--magenta); }
|
|
|
|
.panel__title {
|
|
font-family: var(--f-display);
|
|
font-size: var(--fs-lg);
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--sp-5);
|
|
}
|
|
.panel__intro { font-size: var(--fs-sm); color: var(--paper-dim); margin-bottom: var(--sp-5); }
|
|
|
|
.skill-list li + li { margin-top: var(--sp-5); }
|
|
.skill-list__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--paper-mute); }
|
|
|
|
/* "100%"-style segmented meter */
|
|
.meter__head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--sp-2);
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
.meter__label { font-weight: 600; font-size: var(--fs-sm); }
|
|
.meter__val {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--teal);
|
|
}
|
|
.meter--zero .meter__val { color: var(--magenta); }
|
|
|
|
.meter__track {
|
|
position: relative;
|
|
display: block;
|
|
height: 0.75rem;
|
|
background: var(--ink);
|
|
border: 1px solid var(--line-2);
|
|
overflow: hidden;
|
|
}
|
|
.meter__fill {
|
|
display: block;
|
|
height: 100%;
|
|
width: var(--pct, 0%);
|
|
background-image:
|
|
repeating-linear-gradient(90deg, var(--teal) 0 8px, transparent 8px 11px);
|
|
background-size: 11px 100%;
|
|
transform-origin: left center;
|
|
}
|
|
.meter--zero .meter__fill { background-image: none; }
|
|
/* Empty-state hatching so the 0% bar still reads as intentional. */
|
|
.meter--zero .meter__track {
|
|
border-color: var(--magenta);
|
|
background-image: repeating-linear-gradient(135deg, rgba(255,61,127,0.28) 0 4px, transparent 4px 9px);
|
|
}
|
|
|
|
.punchline {
|
|
margin-top: var(--sp-7);
|
|
padding-top: var(--sp-5);
|
|
border-top: 1px solid var(--line);
|
|
font-family: var(--f-display);
|
|
font-size: var(--fs-lg);
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
max-width: 40ch;
|
|
}
|
|
.punchline::first-line { color: var(--magenta); }
|
|
|
|
/* -------------------------- FAKE TECHNIQUES ---------------------------- */
|
|
.tech-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
|
|
.tech {
|
|
position: relative;
|
|
background: var(--ink-3);
|
|
padding: var(--sp-5) var(--sp-5) var(--sp-5) 4.25rem;
|
|
}
|
|
.tech__icon {
|
|
position: absolute;
|
|
left: var(--sp-3);
|
|
top: calc(var(--sp-5) - 0.1rem);
|
|
width: 2.75rem;
|
|
height: 1.75rem;
|
|
color: var(--tan);
|
|
}
|
|
.tech h4 {
|
|
font-size: var(--fs-md);
|
|
margin-bottom: var(--sp-2);
|
|
color: var(--magenta);
|
|
}
|
|
.tech p { font-size: var(--fs-sm); color: var(--paper-dim); }
|
|
|
|
/* ------------------------------ QUOTES --------------------------------- */
|
|
.section--quotes {
|
|
border-block: 1px solid var(--line);
|
|
background:
|
|
radial-gradient(60rem 40rem at 85% 0%, rgba(23,214,198,0.09), transparent 70%),
|
|
radial-gradient(50rem 34rem at 0% 100%, rgba(255,61,127,0.09), transparent 70%);
|
|
max-width: none;
|
|
}
|
|
.section--quotes > * { max-width: var(--wrap); margin-inline: auto; }
|
|
|
|
.quote-stack { display: grid; gap: var(--sp-5); }
|
|
@media (min-width: 52rem) {
|
|
.quote-stack { grid-template-columns: 1fr 1fr; }
|
|
.quote--lead { grid-column: 1 / -1; }
|
|
}
|
|
|
|
.quote {
|
|
position: relative;
|
|
padding: var(--sp-6) var(--sp-5) var(--sp-5);
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--line);
|
|
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
|
|
}
|
|
.quote:hover { border-color: var(--line-2); }
|
|
|
|
.quote__glyph {
|
|
position: absolute;
|
|
top: calc(var(--sp-5) * -0.1);
|
|
left: var(--sp-5);
|
|
translate: 0 -50%;
|
|
width: 2.1rem;
|
|
height: 1.7rem;
|
|
color: var(--magenta);
|
|
background: var(--ink-2);
|
|
padding-inline: var(--sp-2);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.quote blockquote p {
|
|
font-family: var(--f-quote);
|
|
font-size: var(--fs-md);
|
|
font-style: italic;
|
|
line-height: 1.45;
|
|
color: var(--paper);
|
|
}
|
|
.quote--lead blockquote p { font-size: var(--fs-lg); line-height: 1.4; }
|
|
.quote--short blockquote p { font-size: var(--fs-lg); color: var(--acid); }
|
|
|
|
/* --------------------------- RELATIONSHIPS ----------------------------- */
|
|
.rel-list { display: grid; gap: var(--sp-4); }
|
|
@media (min-width: 44rem) { .rel-list { grid-template-columns: 1fr 1fr; } }
|
|
@media (min-width: 66rem) { .rel-list { grid-template-columns: repeat(3, 1fr); } }
|
|
|
|
.rel {
|
|
padding: var(--sp-5);
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--line);
|
|
border-left: 3px solid var(--line-2);
|
|
transition: border-left-color var(--dur) var(--ease), background var(--dur) var(--ease);
|
|
}
|
|
.rel:hover { border-left-color: var(--teal); background: var(--ink-3); }
|
|
.rel--primary { border-left-color: var(--magenta); }
|
|
@media (min-width: 44rem) { .rel--primary { grid-column: 1 / -1; } }
|
|
|
|
.rel__role {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-mute);
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
.rel h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
|
|
.rel--primary h3 { font-size: var(--fs-lg); }
|
|
.rel__alt {
|
|
display: block;
|
|
font-family: var(--f-body);
|
|
font-size: var(--fs-sm);
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
color: var(--tan);
|
|
margin-top: var(--sp-1);
|
|
}
|
|
.rel p:last-child { font-size: var(--fs-sm); color: var(--paper-dim); }
|
|
|
|
/* ------------------------------- ARCS ---------------------------------- */
|
|
.section--arcs { border-top: 1px solid var(--line); }
|
|
|
|
.timeline { position: relative; display: grid; gap: var(--sp-4); padding-left: var(--sp-5); }
|
|
.timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px; top: 0.75rem; bottom: 0.75rem;
|
|
width: 1px;
|
|
background: linear-gradient(180deg, var(--magenta), var(--teal));
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.arc { position: relative; }
|
|
.arc::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(var(--sp-5) * -1);
|
|
top: 0.7rem;
|
|
width: 7px; height: 7px;
|
|
background: var(--teal);
|
|
border-radius: 50%;
|
|
}
|
|
.arc--spoiler::before { background: var(--magenta); }
|
|
|
|
.arc__when {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--teal);
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
.arc--spoiler .arc__when { color: var(--magenta); }
|
|
.arc h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
|
|
.arc > p:last-child,
|
|
.spoiler__body p:last-child { max-width: var(--measure); color: var(--paper-dim); }
|
|
|
|
/* Spoiler disclosure */
|
|
.spoiler { border: 1px dashed var(--line-2); background: var(--ink-2); }
|
|
.spoiler[open] { border-style: solid; border-color: var(--line); }
|
|
|
|
.spoiler > summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
padding: var(--sp-4) var(--sp-5);
|
|
min-height: 44px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
transition: background var(--dur-fast) var(--ease);
|
|
}
|
|
.spoiler > summary::-webkit-details-marker { display: none; }
|
|
.spoiler > summary:hover { background: var(--ink-3); }
|
|
|
|
.spoiler__badge {
|
|
flex: none;
|
|
padding: 0.2rem var(--sp-3);
|
|
background: var(--magenta);
|
|
color: var(--ink);
|
|
font-family: var(--f-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.spoiler__label {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
}
|
|
.spoiler > summary::after {
|
|
content: "reveal";
|
|
margin-left: auto;
|
|
font-family: var(--f-mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--acid);
|
|
}
|
|
.spoiler[open] > summary::after { content: "hide"; }
|
|
|
|
.spoiler__body { padding: 0 var(--sp-5) var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
|
|
|
|
/* ------------------------------ FOOTER --------------------------------- */
|
|
.site-footer { border-top: 1px solid var(--line); background: var(--ink-2); }
|
|
.site-footer__inner {
|
|
max-width: var(--wrap);
|
|
margin-inline: auto;
|
|
padding: var(--sp-8) var(--pad) var(--sp-7);
|
|
display: grid;
|
|
gap: var(--sp-7);
|
|
}
|
|
@media (min-width: 56rem) {
|
|
.site-footer__inner { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); }
|
|
}
|
|
|
|
.site-footer h2 {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
font-weight: 500;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--acid);
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
.disclaimer p { font-size: var(--fs-sm); color: var(--paper-dim); max-width: 60ch; }
|
|
.disclaimer p + p { margin-top: var(--sp-3); }
|
|
.disclaimer strong { color: var(--paper); }
|
|
|
|
.sources__intro { font-size: var(--fs-sm); color: var(--paper-mute); margin-bottom: var(--sp-3); }
|
|
.sources ul { display: grid; }
|
|
.sources li { font-size: var(--fs-sm); padding-left: var(--sp-4); position: relative; }
|
|
/* Padded to keep each link's tap target at least 24px tall. */
|
|
.sources a { display: inline-block; padding-block: var(--sp-2); }
|
|
.sources li::before {
|
|
content: "";
|
|
position: absolute;
|
|
/* Link padding-top plus half the 1.6 line-height, so the dash centres on the
|
|
first text line at any font size rather than at a fixed offset. */
|
|
left: 0; top: calc(var(--sp-2) + 0.8em);
|
|
width: 5px; height: 1px;
|
|
background: var(--paper-mute);
|
|
}
|
|
|
|
.site-footer__base {
|
|
max-width: var(--wrap);
|
|
margin-inline: auto;
|
|
padding: var(--sp-4) var(--pad) var(--sp-6);
|
|
border-top: 1px solid var(--line);
|
|
font-family: var(--f-mono);
|
|
font-size: var(--fs-xs);
|
|
color: var(--paper-mute);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--sp-2) var(--sp-3);
|
|
align-items: center;
|
|
}
|
|
.site-footer__base > span:first-child { color: var(--magenta); }
|
|
|
|
/* --------------------------- SCROLL REVEAL ----------------------------- */
|
|
/* Hidden state applies ONLY when JS is running (html.js) — a no-JS visitor
|
|
and any browser that never fires the observer sees fully visible content. */
|
|
.js [data-reveal] {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
transition:
|
|
opacity var(--dur-reveal) var(--ease),
|
|
transform var(--dur-reveal) var(--ease);
|
|
transition-delay: var(--reveal-delay, 0ms);
|
|
}
|
|
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
|
|
|
|
.js [data-reveal] .meter__fill {
|
|
transform: scaleX(0);
|
|
transition: transform 900ms var(--ease) 180ms;
|
|
}
|
|
.js [data-reveal].is-revealed .meter__fill { transform: scaleX(1); }
|
|
|
|
/* --------------------------- REDUCED MOTION ---------------------------- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after {
|
|
animation-duration: 1ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 1ms !important;
|
|
transition-delay: 0ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
.js [data-reveal] { opacity: 1; transform: none; }
|
|
.js [data-reveal] .meter__fill,
|
|
.js [data-reveal].is-revealed .meter__fill { transform: none; }
|
|
.scroll-cue span { animation: none; transform: none; opacity: 0.7; }
|
|
}
|
|
|
|
/* ------------------------------ PRINT ---------------------------------- */
|
|
@media print {
|
|
body { background: #fff; color: #000; }
|
|
body::after, .hero__art, .site-nav, .scroll-cue, .salt-rule { display: none; }
|
|
.js [data-reveal] { opacity: 1 !important; transform: none !important; }
|
|
a { color: #000; }
|
|
}
|