@charset "UTF-8";
/* ============================================================
neon-theme.css
「den」ポートフォリオ用 — NEONモード（ストリートファイター6 の
グリッドステージ風リスキン）
------------------------------------------------------------
使い方:
1. 内、既存の style.css の "後ろ" にこのファイルを読み込む
← 追加
2. 同じく にフォントを追加（任意・推奨）
3. 直前に stage.js を読み込む
------------------------------------------------------------
方針: レイアウト（flex / order / 折返し / メニュー開閉）は
既存 style.css に任せ、本ファイルは配色・装飾・背景のみ上書き。
SIMPLEモード時は stage.js がこの を disabled にして無効化する。
内部クラスの接頭辞 ns- は "neon stage" の略。
============================================================ */
:root {
--bg-deep: #04060d;
--bg-mid: #081427;
--bg-up: #0a1a30;
--grid: #1bd3ff;
--grid-dim: rgba(27, 211, 255, 0.16);
--glow: #36e6ff;
--ink: #d9f4ff;
--ink-dim: #6d90a8;
--warn: #ffce3a;
--ok: #36ffa6;
--line: rgba(27, 211, 255, 0.22);
--panel: rgba(8, 20, 38, 0.82);
--chip: #0e2236; /* タグチップ（暗色＝白単色アイコンが映える） */
--mono: 'JetBrains Mono', 'Inconsolata', monospace;
--disp: 'Chakra Petch', 'Outfit', 'Noto Sans JP', sans-serif;
}
/* ---------- ベース ------------------------------------------ */
html { background: var(--bg-deep); }
body { background: var(--bg-deep) !important; }
/* 本文テキストを明色へ（既存 CSS が要素に #444 を直接指定しているため上書き） */
.content p, .content dd, .content dl, .content h2, .content h4,
.modal p, .modal dd, .modal dt, .modal h3, .modal h4, .modal li,
.modal span, .modal strong {
color: var(--ink);
}
.content a { color: var(--glow); }
/* 見出しはディスプレイ書体に */
header h1 a, .intro h2, .modal__headline--fs { font-family: var(--disp); }
/* ---------- ローディング ------------------------------------ */
#loading { background: var(--bg-deep) !important; }
.spinner {
border-color: rgba(27, 211, 255, 0.18) !important;
border-top-color: var(--glow) !important;
box-shadow: 0 0 26px rgba(54, 230, 255, 0.4);
}
/* ---------- ステージ背景（stage.js が注入） ----------------- */
.ns-stage {
position: fixed; inset: 0; z-index: 0;
overflow: hidden; pointer-events: none;
background: radial-gradient(120% 78% at 50% 92%,
var(--bg-up) 0%, var(--bg-mid) 40%, var(--bg-deep) 80%);
}
/* 奥の薄いバックウォール */
.ns-sky {
position: absolute; left: 0; right: 0; top: 0; height: 52%;
background-image: repeating-linear-gradient(90deg,
transparent 0 80px, var(--grid-dim) 80px 81px);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 88%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 88%, transparent);
opacity: .45;
}
/* 地平線グロー */
.ns-horizon {
position: absolute; left: -10%; right: -10%; top: 48%;
height: 230px; transform: translateY(-50%);
background: radial-gradient(60% 100% at 50% 50%,
rgba(54,230,255,.5) 0%, rgba(54,230,255,.14) 38%, transparent 72%);
filter: blur(2px);
}
.ns-horizon::after {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
background: linear-gradient(90deg, transparent, var(--glow) 22%,
#fff 50%, var(--glow) 78%, transparent);
box-shadow: 0 0 20px 4px rgba(54,230,255,.55);
}
/* パース床グリッド */
.ns-floorwrap {
position: absolute; left: 0; right: 0; top: 48%; bottom: 0;
perspective: 320px; perspective-origin: 50% 0%; overflow: hidden;
}
.ns-floor {
position: absolute; left: 50%; top: 0;
width: 4000px; height: 4000px; margin-left: -2000px;
transform: rotateX(84deg); transform-origin: 50% 0%;
background-image:
repeating-linear-gradient(0deg, transparent 0 116px, var(--grid) 116px 120px),
repeating-linear-gradient(90deg, transparent 0 116px, var(--grid) 116px 120px);
animation: ns-scroll 6s linear infinite;
-webkit-mask-image: radial-gradient(58% 60% at 50% 4%, #000 12%, rgba(0,0,0,.55) 46%, transparent 84%);
mask-image: radial-gradient(58% 60% at 50% 4%, #000 12%, rgba(0,0,0,.55) 46%, transparent 84%);
}
@keyframes ns-scroll { to { background-position: 0 120px, 0 0; } }
/* 漂うダスト */
.ns-dust { position: absolute; inset: 0; }
.ns-dust span {
position: absolute; width: 3px; height: 3px; border-radius: 50%;
background: var(--glow); box-shadow: 0 0 8px 2px rgba(54,230,255,.7);
opacity: 0; animation: ns-drift linear infinite;
}
@keyframes ns-drift {
0% { transform: translateY(20px) scale(.4); opacity: 0; }
14% { opacity: .85; }
86% { opacity: .45; }
100% { transform: translateY(-320px) scale(1); opacity: 0; }
}
/* 画面端の減光 */
.ns-vignette {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
box-shadow: inset 0 0 200px 50px rgba(2,4,9,.7);
}
/* コンテンツをステージより前面へ */
#_container { position: relative; z-index: 1; }
/* ---------- HUD（stage.js が注入） -------------------------- */
.ns-hud {
position: fixed; z-index: 2; pointer-events: none; user-select: none;
font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
color: var(--ink-dim);
}
.ns-hud-bl { left: 14px; bottom: 12px; }
.ns-hud-br { right: 14px; bottom: 12px; text-align: right; }
.ns-tag {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 9px; border: 1px solid var(--line);
background: var(--panel); color: var(--ink);
text-transform: uppercase; backdrop-filter: blur(3px);
}
/* 稼働インジケーター（録画ではないためシアンのドット） */
.ns-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ok); box-shadow: 0 0 9px 2px var(--ok);
animation: ns-pulse 1.6s ease-in-out infinite;
}
@keyframes ns-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ns-hud .ns-ln { margin-top: 5px; }
.ns-hud b { color: var(--glow); }
/* フレーム数値: 桁送りで横ガタつきしないよう等幅化＋幅固定 */
.ns-hud .ns-frame b {
color: var(--warn);
display: inline-block;
min-width: 6.6ch;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ---------- ヘッダー ---------------------------------------- */
header h1 a {
color: #eafbff; letter-spacing: .02em;
text-shadow: 0 0 20px rgba(54,230,255,.45);
}
nav span { color: var(--ink); text-shadow: none; }
@media screen and (min-width: 768px) {
nav span { text-shadow: 0 0 8px rgba(4,8,16,.95); }
}
.header__btn {
border-color: var(--glow) !important;
background: rgba(8,20,38,.6) !important;
}
.header__btn span,
.header__btn span:before,
.header__btn span:after { background: var(--glow); }
#overlay { background: rgba(4,8,16,.82) !important; }
/* ---------- イントロパネル ---------------------------------- */
.intro {
background: var(--panel) !important;
border: 1px solid var(--line);
backdrop-filter: blur(4px);
}
.intro::before, .intro::after {
border-color: var(--glow) !important;
filter: drop-shadow(0 0 4px rgba(54,230,255,.5));
}
.intro h2 { color: #fff; }
.intro .bg-black\/10 { background: rgba(4,8,16,.55) !important; }
.intro dl dt {
background: var(--glow) !important;
color: var(--bg-deep) !important;
}
/* legend（dev frame / library frame） */
aside dl {
background: var(--panel) !important;
border: 1px solid var(--line);
}
aside dl dd { color: var(--ink); }
/* ---------- フィルター（mixitup ボタン） -------------------- */
.mixitup-button-wrap {
background: var(--panel) !important;
border: 1px solid var(--line);
backdrop-filter: blur(4px);
}
.mixitup-button .tag { background: var(--chip); }
.mixitup-button button:not(.mixitup-control-active) .tag:hover {
background: #1a3c55;
box-shadow: 0 0 12px rgba(54,230,255,.35);
}
/* アクティブ: 白アイコンが見えるよう中明度ティール＋発光リング */
.mixitup-control-active .tag {
background: #1f6f93;
box-shadow: 0 0 0 2px var(--glow), 0 0 16px rgba(54,230,255,.6);
}
/* ---------- カード（section） ------------------------------- */
/* 注意: .section は MixItUp のフィルター対象（.mix）。MixItUp は transform で
フィルターアニメーションを行うため、.section に transform を transition
させると「二重アニメーション」と busy エラーの原因になる。
そのため持ち上げ演出は transform ではなく top で行う
（.section は style.css 側で position: relative 指定済み）。 */
.section {
background: var(--panel) !important;
border: 1px solid var(--line);
border-top: 2px solid var(--grid);
box-shadow: none;
backdrop-filter: blur(4px);
transition: top .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.section:not(.close):hover {
top: -5px;
border-color: var(--glow);
box-shadow: 0 14px 38px -12px rgba(54,230,255,.42),
0 0 0 1px rgba(54,230,255,.3) inset;
}
section h3 {
font-family: var(--disp);
color: #eafbff;
letter-spacing: .04em;
text-shadow: 0 0 6px rgba(4,8,16,.95), 0 0 2px #000;
}
.kv { background-color: #0c1a2c; }
/* ---------- タグ（共通・暗色チップ） ------------------------ */
/* アイコンSVGは #ffffff 単色のため、チップは暗色にして白を浮かせる */
.tag {
background: var(--chip) !important;
color: var(--ink);
}
.tag span { color: var(--ink); }
.tag-dev { outline-color: rgba(54, 230, 255, 0.95) !important; } /* dev = 点線 */
.tag-lib { outline-color: rgba(54, 230, 255, 0.95) !important; } /* library = 実線 */
/* ---------- モーダル（fancybox inline） --------------------- */
.fancybox-bg { background: #02040a; }
/* 外枠フレーム＝データパネル */
.fancybox-content {
position: relative;
border: 1px solid var(--line);
background-color: var(--bg-mid) !important;
/* ごく薄いグリッドテクスチャ */
background-image:
repeating-linear-gradient(0deg, transparent 0 39px, rgba(27,211,255,.045) 39px 40px),
repeating-linear-gradient(90deg, transparent 0 39px, rgba(27,211,255,.045) 39px 40px) !important;
}
/* 四隅のコーナーブラケット（左上・右下） */
.fancybox-content::before,
.fancybox-content::after {
content: ""; position: absolute;
width: 22px; height: 22px; pointer-events: none;
filter: drop-shadow(0 0 4px rgba(54,230,255,.6));
}
.fancybox-content::before {
top: -1px; left: -1px;
border-top: 2px solid var(--glow);
border-left: 2px solid var(--glow);
}
.fancybox-content::after {
bottom: -1px; right: -1px;
border-bottom: 2px solid var(--glow);
border-right: 2px solid var(--glow);
}
/* パネル上端の発光ライン（電源オン風） */
.modal { position: relative; }
.modal::before {
content: ""; position: absolute;
top: -16px; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--glow), transparent);
box-shadow: 0 0 12px rgba(54,230,255,.6);
}
/* 見出し: モノスペースの「データ見出し」＋発光下線 */
.modal__headline--fs {
color: #fff;
text-shadow: 0 0 26px rgba(54,230,255,.4);
}
.modal__headline--fs::before {
content: "\25AE PROTOTYPE DATA / \8A66\4F5C\30C7\30FC\30BF"; /* ▍ + 試作データ */
display: block;
font-family: var(--mono); font-size: 12px; font-weight: 500;
letter-spacing: .12em; color: var(--glow);
margin-bottom: 10px;
}
.modal__headline--fs::after {
content: ""; display: block; height: 1px; margin-top: 12px;
background: linear-gradient(90deg, var(--glow), transparent 70%);
}
/* セクション小見出し（◆マーカー付き） */
.modal h4 {
position: relative;
padding-left: 16px;
color: var(--glow);
font-family: var(--disp);
}
.modal h4::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 6px; height: 6px; rotate: 45deg;
transform: translateY(-50%);
background: var(--glow);
box-shadow: 0 0 8px var(--glow);
}
/* リンク・リストマーカー */
.modal a { color: var(--glow); }
.modal li::marker { color: var(--glow); }
/* 画像はテクニカルな二重フレームで囲う */
.modal img {
border: 1px solid var(--line);
outline: 1px solid rgba(54,230,255,.35);
outline-offset: 5px;
box-shadow: 0 0 30px -8px rgba(54,230,255,.4);
}
/* コールアウト枠（bg-black/10）＝注記ブロック化 */
.modal .bg-black\/10 {
background: rgba(4,8,16,.55) !important;
border-left: 3px solid var(--glow);
}
/* コードブロック: 端にラベル、左に発光バー */
.pre {
position: relative;
border: 1px solid var(--line);
border-left: 3px solid var(--glow);
}
.pre::before {
content: "CODE";
position: absolute; top: 6px; right: 10px;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
color: var(--ink-dim);
}
/* スクロールバー */
.fancybox-slide::-webkit-scrollbar,
.fancybox-content::-webkit-scrollbar { width: 9px; }
.fancybox-slide::-webkit-scrollbar-track,
.fancybox-content::-webkit-scrollbar-track { background: var(--bg-deep); }
.fancybox-slide::-webkit-scrollbar-thumb,
.fancybox-content::-webkit-scrollbar-thumb {
background: rgba(54,230,255,.32); border-radius: 2px;
}
.fancybox-slide::-webkit-scrollbar-thumb:hover,
.fancybox-content::-webkit-scrollbar-thumb:hover { background: rgba(54,230,255,.55); }
/* 「このページへ行く」ボタン */
.link {
background: rgba(8,20,38,.7);
border-color: var(--glow);
color: var(--ink);
font-family: var(--mono);
}
.link:hover {
background: rgba(54,230,255,.14);
border-color: #fff;
box-shadow: 0 0 18px rgba(54,230,255,.4);
}
/* バイブコーディング バッジ */
.vibe {
background: rgba(54,230,255,.14) !important;
color: var(--glow) !important;
border: 1px solid var(--line);
}
/* アテンション演出（青く光る部分）をシアンに統一 */
.attention::before { background: var(--glow); }
/* ---------- アクセシビリティ -------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ns-floor, .ns-dust span, .ns-dot { animation: none !important; }
}
/* 小画面では HUD を隠し、画面下中央の切替スイッチと干渉させない */
@media (max-width: 560px) {
.ns-hud { display: none; }
}