/* ============================================ * EdenCode Blog Common CSS * 全記事共通スタイル * カテゴリは等で指定 * ============================================ */ /* --- CSS変数 --- */ :root { --bg: #0a0e14; --surface: #111820; --border: #1e2d3d; --accent: #00d4aa; --accent2: #ff6b35; --accent3: #7c6aff; --text: #c9d1d9; --text-dim: #7a8fa0; --mono: 'Share Tech Mono', monospace; --sans: 'Noto Sans JP', sans-serif; /* テキスト系グレー統一値 */ --text-bright: #e0e8f0; /* 強調テキスト（strong） */ --text-mid: #c4ccd7; /* 戻るリンク・薄めの本文 */ --text-subtitle:#7ab4e8; /* サブタイトル */ --text-meta: #8a9ab0; /* メタ情報（By/Assistant） */ --text-quote: #b0b8d0; /* 引用ブロック */ --text-trouble: #e8c4b0; /* トラブルカードタイトル */ /* カテゴリカラー（デフォルト：accent） */ --cat-color: #00d4aa; --cat-rgb: 0,212,170; } /* --- カテゴリカラー定義 --- */ /* 新カテゴリ追加時はここに1行追加するだけ */ body.cat-uefn { --cat-color: #a3e635; --cat-rgb: 163,230,53; } body.cat-log { --cat-color: #ff6b35; --cat-rgb: 255,107,53; } body.cat-lab { --cat-color: #b39dff; --cat-rgb: 179,157,255; } /* --- リセット --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* --- ボディ --- */ body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.8; min-height: 100vh; } /* グリッド背景 */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,212,170,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,170,0.02) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* --- ナビゲーション --- */ nav { position: fixed; top: 0; width: 100%; z-index: 9999; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; background: rgba(10,14,20,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.2em; color: #fff; text-decoration: none; } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.15em; color: var(--text-dim); text-decoration: none; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: var(--accent); } /* --- 前後ナビ（ポップアップ） --- */ .sub-nav { position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-16px); z-index: 9999; padding: 6px 4px; display: flex; justify-content: center; align-items: center; gap: 4px; background: rgba(10,14,20,0.95); backdrop-filter: blur(12px); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 0 12px rgba(0,212,170,0.25); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; width: max-content; white-space: nowrap; } .sub-nav.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; } .sub-nav-link { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: 6px 18px; white-space: nowrap; transition: color 0.2s; } .sub-nav-link:hover { color: #fff; } .sub-nav-link.center { color: var(--accent); } /* --- ヒーローエリア --- */ .post-hero { width: 100%; height: 60vh; min-height: 360px; margin-top: 61px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface); } /* サムネイル画像 */ .post-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.75; } .post-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(0,212,170,0.15), transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(124,106,255,0.12), transparent 60%); } .post-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 10%, var(--bg) 80%); z-index: 2; } .post-hero-emoji { font-size: 8rem; opacity: 0.45; position: relative; z-index: 1; } /* カテゴリバッジ（ヒーロー左上） */ .post-hero-badge { position: absolute; top: 24px; left: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; background: rgba(10,14,20,0.55); border: 1px solid rgba(var(--cat-rgb), 0.8); backdrop-filter: blur(6px); color: var(--cat-color); z-index: 3; } /* --- コンテンツコンテナ --- */ .container { max-width: 860px; margin: -35vh auto 0; padding: 0 24px 100px; position: relative; z-index: 10; } /* --- 戻るリンク --- */ .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-mid); text-decoration: none; margin: 40px 0 48px; transition: color 0.2s; } .back-link:hover { color: var(--accent); } /* --- 記事ヘッダー（カテゴリカラー適用） --- */ .post-header { border-left: 3px solid var(--cat-color); padding-left: 24px; margin-bottom: 64px; } .post-tag { font-family: var(--mono); font-size: 11px; color: var(--cat-color); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; } .post-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 20px; } /* タイトル内アクセント（カテゴリカラー） */ .post-title span { color: var(--cat-color); } /* サブタイトル（タイトル下の小さい説明文） */ /* .post-title span より詳細度を上げて確実に上書き */ .post-subtitle, .post-title .post-subtitle { display: block; font-size: 0.55em; color: var(--text-subtitle); font-weight: 300; } /* 色指定バリアント */ .post-title .orange { color: var(--accent2); } .post-title .teal { color: var(--accent); } /* メタ情報 */ .post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .post-date { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 2px; } .post-sep { color: var(--border); } .post-meta-item { font-family: var(--mono); font-size: 12px; color: var(--text-meta); letter-spacing: 1px; } /* --- セクション --- */ section { margin-bottom: 56px; } .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .step-num { font-family: var(--mono); font-size: 11px; color: var(--cat-color); background: rgba(var(--cat-rgb), 0.08); border: 1px solid rgba(var(--cat-rgb), 0.25); padding: 2px 10px; border-radius: 2px; white-space: nowrap; } h2 { font-size: 18px; font-weight: 700; color: #fff; } /* --- カード --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 24px; margin-bottom: 16px; position: relative; overflow: hidden; font-size: 14px; line-height: 1.9; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--cat-color); opacity: 0.35; } /* バリアント */ .card.purple::before { background: var(--accent3); } .card.orange::before { background: var(--accent2); } .card.teal::before { background: var(--accent); } .card p { margin-bottom: 10px; } .card p:last-child { margin-bottom: 0; } /* --- テキスト装飾 --- */ strong { color: var(--text-bright); font-weight: 700; } .highlight { color: var(--accent); } .highlight-orange { color: var(--accent2); } .highlight-purple { color: var(--accent3); } /* インラインコード */ .code-inline { font-family: var(--mono); background: rgba(0,212,170,0.08); color: var(--accent); padding: 1px 6px; border-radius: 2px; font-size: 0.9em; } /* 引用ブロック */ .insight-quote { border-left: 3px solid var(--accent3); padding: 12px 20px; margin: 20px 0; background: rgba(124,106,255,0.05); border-radius: 0 4px 4px 0; font-style: italic; color: var(--text-quote); font-size: 15px; line-height: 1.7; } /* トラブルカード */ .trouble-card { background: rgba(224,112,80,0.06); border: 1px solid rgba(224,112,80,0.25); border-radius: 4px; padding: 20px 24px; margin-bottom: 12px; font-size: 14px; line-height: 1.85; } .trouble-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--accent2); text-transform: uppercase; margin-bottom: 6px; } .trouble-title { font-weight: 700; color: var(--text-trouble); margin-bottom: 8px; font-size: 14px; } .trouble-body { color: var(--text-dim); font-size: 13px; } .trouble-body code { font-family: var(--mono); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 2px; color: #7ec8a0; } /* サマリーボックス */ .summary-box { background: linear-gradient(135deg, rgba(var(--cat-rgb),0.05), rgba(124,106,255,0.05)); border: 1px solid rgba(var(--cat-rgb), 0.2); border-radius: 6px; padding: 32px; margin-top: 16px; } .summary-box h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--cat-color); text-transform: uppercase; margin-bottom: 16px; } .summary-box p { font-size: 14px; line-height: 1.9; color: var(--text); } /* --- コードブロック --- */ .code-block { background: #060c12; border: 1px solid var(--border); border-radius: 4px; padding: 14px 18px; margin: 14px 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; overflow-x: auto; color: #7ec8a0; } .code-block .cm { color: #4a6070; } /* --- カテゴリタブ --- */ .category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 64px 0 0; padding-top: 20px; border-top: 1px solid var(--border); } .tab { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 4px 14px; border: 1px solid var(--border); border-radius: 2px; color: var(--text-dim); text-decoration: none; transition: all 0.2s; } .tab:hover, .tab.active { border-color: var(--accent); color: var(--accent); } /* --- フッター --- */ footer { margin-top: 80px; padding: 24px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--text-dim); display: flex; justify-content: space-between; position: relative; z-index: 1; } /* --- レスポンシブ --- */ @media (max-width: 768px) { nav { padding: 16px 20px; } .nav-links { gap: 20px; } .post-hero { height: 40vh; } .post-hero-emoji { font-size: 5rem; } .container { padding: 0 16px 80px; } }