/* theme.css — トークン・ゾーンテーマ・共通部品 * * ゾーンは2つ（サイト設計図 §0）。技術の境界と世界観の境界を一致させる。 * 暗ゾーン（既定） … 紺×黒×金。トップ〜無料診断〜結果。（省略時も同じ） * 天界ゾーン … 白ベース・光・黄金の門・雲。有料鑑定。 * 白地では白文字が成立しないので、天界は文字色を紺に切り替える。金のUIは両ゾーン共通で成立する。 * * ★ 6診断色（青紫橙茶黄赤）はUIに使わない（設計図 §1⑤）。使ってよい色は 紺・黒・白・金 の系統のみ。 * ★ 2カラム／横背景の切替条件（B案）は1本に統一する： * (min-width: 900px) and (min-height: 600px) and (orientation: landscape) * bg.css・chars.css・result の media もこれと同じ式を使う。変えるときは全部いっしょに変える。 */ :root { /* 暗ゾーン */ --ink-900: #04070f; /* 最暗。暗幕の色 */ --ink-800: #050b1a; /* ヒーロー画像の左端をサンプリングした紺（実測 #030613〜#050b1a） */ --ink-700: #0a0f1f; --ink-600: #141b33; --fg: #f2efe6; /* 本文（生成り寄りの白） */ --fg-muted: rgba(242, 239, 230, 0.72); --gold: #d4af37; --gold-light: #f0d78c; --gold-dim: rgba(212, 175, 55, 0.45); --card-bg: rgba(6, 10, 24, 0.62); --card-border: rgba(212, 175, 55, 0.35); --line: rgba(242, 239, 230, 0.14); /* キャラの glow（全42体）。強度は変数2つで制御し、画面幅で値を分ける（0 で無効）。 * --glow-light … 光36。温白（生成りの白〜金寄り） * --dark-glow … 闇6。青灰 * スマホ（顔版・円）＝ 0.4 / 0.5 ／ PC（全身・2カラム）＝ 0.7 / 0.9（下の @media で上書き） */ --glow-light: 0.4; --dark-glow: 0.5; --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif; --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; --radius: 14px; --content-max: 1200px; color-scheme: dark; } /* PC（2カラム・全身）の glow。条件は上記の1本と同じ式 */ @media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) { :root { --glow-light: 0.7; --dark-glow: 0.9; } } /* 天界ゾーン：白地・紺文字。金はそのまま */ body[data-zone="heaven"] { --fg: #101a3a; --fg-muted: rgba(16, 26, 58, 0.72); --card-bg: rgba(255, 255, 255, 0.72); --card-border: rgba(212, 175, 55, 0.55); --line: rgba(16, 26, 58, 0.14); --gold: #b8922a; /* 白地では少し沈めて可読性を保つ */ --gold-light: #d4af37; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: var(--font-sans); color: var(--fg); background: var(--ink-800); line-height: 1.8; -webkit-font-smoothing: antialiased; } body[data-zone="heaven"] { background: #eef3f6; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } /* 画面の器：背景は bg.css の .screen[data-bg] が担う */ .screen { position: relative; min-height: 100svh; isolation: isolate; } .screen > .screen-inner { position: relative; z-index: 1; max-width: var(--content-max); margin: 0 auto; padding: clamp(20px, 4vw, 48px); } /* 金のボタン（CTA） */ .btn-gold { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.9em 1.8em; border: 1px solid var(--gold); border-radius: 999px; background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.06)); color: var(--gold-light); font-weight: 700; letter-spacing: 0.06em; text-decoration: none; box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15), 0 0 24px rgba(212, 175, 55, 0.18); transition: box-shadow 0.2s, transform 0.2s; } .btn-gold:hover { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 36px rgba(212, 175, 55, 0.35); transform: translateY(-1px); } body[data-zone="heaven"] .btn-gold { color: #6b5316; background: linear-gradient(180deg, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0.12)); } /* カード */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: clamp(16px, 2.5vw, 28px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .card + .card { margin-top: 16px; } .card h2, .card h3 { margin-top: 0; color: var(--gold-light); font-weight: 600; letter-spacing: 0.04em; } body[data-zone="heaven"] .card h2, body[data-zone="heaven"] .card h3 { color: var(--gold); } .eyebrow { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; } .muted { color: var(--fg-muted); } /* 最小ナビ（診断中は消す：設計図 §1） */ .nav { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 4vw, 48px); font-size: 0.9rem; letter-spacing: 0.08em; } /* ブランド＝emblem_sm.svg（高さ28px・js/logo.js がインライン展開・色は --logo）＋テキスト「GENESIS LOG」（字間広め） */ .nav .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-light); font-weight: 600; letter-spacing: 0.22em; font-size: 0.95rem; --logo: var(--gold-light); } .nav .brand .emblem { display: block; height: 28px; width: 28px; } .nav .brand .emblem svg { height: 28px; width: 28px; display: block; } .nav .brand .emblem.is-fallback { display: none; } body[data-zone="heaven"] .nav .brand { --logo: var(--gold); } .nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .nav a { text-decoration: none; color: var(--fg-muted); } .nav a:hover { color: var(--fg); } @media (max-width: 640px) { .nav ul { display: none; } }