/* ========================================================================== STEEL LIVE — Design Tokens v2.0 -------------------------------------------------------------------------- アートディレクション: CINEMATIC / GLOBAL 70% + LUXURY / MINIMAL 30% 参照するのはテック企業ではなく、世界展開するプレミアムスポーツブランド。 v2 の原則: 1. 角丸を持たない（--r-* はすべて 0） 2. 色ではなく「光の温度」で世界と日本を語る（冷=世界 / 温=日本） 3. グラデーションは HOME 内 2 箇所のみ 4. 面を区切るのは枠線ではなく余白 確定済み（2026-09-02） 「ロゴ素材の受領後に確定する」という条件付きの暫定扱いは終了した。 正式ロゴ（design/logo/steellive-logo２.png 由来 / src/assets/img/logo.png） とうまの助を受領し、実画素を採取して以下を確認済み。 ロゴ明部の約 70% が暖色の金（#e0b070 / #c09060 / #b08050 系）、 約 19% が中立の鋼（#808090 系）＝「金 ＋ 鋼」の金属マーク。 → 鋼は --metal-100〜400、金は --champagne と三角の太陽の rgba(250,198,138) / rgba(232,160,100) が同じ色域に収まっている。 書体は正式ロゴのレターマークを再現するものではなく、 その隣に置いて成立する組み合わせとして選んだもの（下の書体ブロック参照）。 いずれも値は変更していない。今後の変更はブランド判断として行う。 ========================================================================== */ :root { /* ── 闇 ────────────────────────────────────────────────────────────── */ --sl-black: #07080a; /* v1 の #0a0d12 より暗く、冷たく */ --sl-ink: #0c0e12; --sl-hairline: #1b1f25; /* 罫線はここまで暗く。UI の枠線には使わない */ /* ── 金属（スチール・ランプ4段） ──────────────────────────────────── 単色ではなく階調で扱う。文字や縁に「光を受けた金属」を作るため。 */ --metal-100: #f2f4f6; /* ハイライト */ --metal-200: #b9c0c7; --metal-300: #6e767e; --metal-400: #33383e; /* 陰 */ /* ── 紙（明色面 / COMPANY 章） ──────────────────────────────────── */ --sl-paper: #f4f2ee; /* 温かいオフホワイト。純白にしない */ --sl-paper-ink: #14171b; --sl-paper-dim: #5d635f; --sl-paper-line: #d8d4cc; /* ── ただ一つのアクセント ──────────────────────────────────────── ダーツの着弾。画面占有率 2% 以下に抑える。 */ --sl-impact: #c8102e; /* ── 光（世界=冷 / 日本=温）────────────────────────────────────── UI の色分けではなく、背景の光源として使う。 */ --light-cold: rgba(176, 205, 235, 0.10); --light-warm: rgba(200, 16, 46, 0.10); /* ══ v3: 空と時間 ════════════════════════════════════════════════ HOME をひとつの空の下の物語として扱うための時刻別の色。 主役の優先順位は 1 タイポグラフィ / 2 一本の軌道 / 3 三角の太陽 / 4 青空・昼夜 / 5 月 / 6 虹 / 7 星 色はこの順位を崩さない濃度に抑える。 */ --sky-predawn: #050810; /* 04:40 HERO・CONTACT（円環の始点と終点） */ --sky-dawn-1: #0a1428; /* 05:00 */ --sky-dawn-2: #12305e; /* 05:20 STATEMENT */ --sky-day-zenith: #0f3f8f; /* 11:00 天頂（地平より暗い＝本物の空） */ --sky-day-horiz: #2f74c6; /* 11:00 地平 */ --sky-night: #080c1a; /* 夜側 */ /* 三角の太陽。黄色は使わない。白〜シャンパンの光として扱う */ --champagne: #f4f0e6; --champagne-dim: rgba(244, 240, 230, 0.16); /* 月。青みのある白。リアルな月面は描かない */ --moon: #e8ecf2; /* 星。1px の点。不透明度は 3 段階のみ使う */ --star: #cfd8e6; --star-o1: 0.15; --star-o2: 0.30; --star-o3: 0.55; /* 一本の軌道。ページを貫く 1px */ --trace: rgba(242, 244, 246, 0.55); --trace-dim: rgba(242, 244, 246, 0.28); /* ── セマンティック ─────────────────────────────────────────────── */ --bg: var(--sl-black); --bg-alt: var(--sl-ink); --fg: var(--metal-200); --fg-strong: var(--metal-100); --fg-dim: var(--metal-300); --border: var(--sl-hairline); /* ── CONNECT GRADIENT ──────────────────────────────────────────── v2 では常用しない。HOME 内での使用は次の 2 箇所のみ: (1) CONNECT 章を横断するヘアライン (2) HERO の鏡面パス（モーション実装時） バッジ・ボタン・見出し罫には使わないこと。 */ --sl-connect: linear-gradient(90deg, rgba(176, 205, 235, 0.55) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(200, 16, 46, 0.65) 100%); /* 金属の質感を文字に与えるランプ */ --metal-fill: linear-gradient(176deg, var(--metal-100) 0%, #dfe4e9 28%, var(--metal-200) 58%, #cdd3d9 82%, var(--metal-100) 100%); /* フィルムグレイン。これが「映画的か CSS 的か」を分ける */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* ── 書体 ──────────────────────────────────────────────────────── */ /* ディスプレイ: 中立的なネオグロテスク。詰めて大きく組んだとき、 幾何学サンセリフより「広告組版」に見える。 正式ロゴのレターマークを再現する書体ではない。ロゴは画像として置き、 その隣で主張しすぎない中立面として Archivo を当てている。 */ --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ステートメント専用の明朝。UI・説明文には使わないこと。 */ --font-serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; /* 機能テキストはゴシックを維持 */ --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; /* ── タイポスケール ────────────────────────────────────────────── v2 では最大値を大きく引き上げ、中間段階を減らす。 1画面に同時に出す文字サイズは最大2種類。 */ --fs-xs: 0.6875rem; /* 11px 指標的ラベル */ --fs-sm: 0.8125rem; --fs-base: 1rem; --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); --fs-xl: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); --fs-2xl: clamp(2.25rem, 1.4rem + 4vw, 5rem); /* HERO 用。768px 未満で有効（それ以上は行構成ごとに hero.css で上書き）。 v3 再調整: 画面を文字で埋めるのをやめ、ロゴと余白に場所を返す。 320px:35 / 375px:40 / 390px:42 / 430px:46 */ --fs-hero: clamp(2rem, 10.8vw, 3.25rem); /* 行間にも空を戻す（v3 再調整前は 0.86） */ --lh-hero: 1.06; --lh-tight: 1.05; --lh-heading: 1.3; --lh-body: 1.9; /* 大きく組むほど詰める（v1 は広げていた）。 ただし詰めすぎると塊に見えるため、v3 再調整で -0.03em から緩めた */ --ls-hero: -0.01em; --ls-display: -0.01em; --ls-label: 0.24em; /* 極小ラベルは大きく広げる */ --ls-body: 0.02em; --fw-regular: 400; --fw-medium: 500; --fw-bold: 800; /* ── 余白 ─────────────────────────────────────────────────────── v2 では余白そのものが構造。段階を大きく取る。 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 28px; --sp-5: 48px; --sp-6: 88px; --sp-7: 140px; --sp-8: 220px; --sp-section: clamp(88px, 12vw, 220px); /* ── レイアウト ─────────────────────────────────────────────────── */ --container: 1440px; /* v2 は画面を広く使う */ --container-narrow: 900px; --gutter: clamp(24px, 5.5vw, 88px); --header-h: 64px; --header-h-lg: 88px; /* ── 角丸: v2 は例外なくゼロ ────────────────────────────────────── */ --r-sm: 0; --r-md: 0; --r-pill: 0; --bw: 1px; /* ── モーション ─────────────────────────────────────────────────── */ --dur-fast: 200ms; --dur-base: 420ms; --dur-slow: 900ms; --ease: cubic-bezier(0.16, 0.84, 0.24, 1); /* ── z-index ────────────────────────────────────────────────────── */ --z-uma: 40; --z-header: 100; --z-nav: 200; --z-skip: 300; /* ── 差し替え枠（素材待ち）の可視化 ───────────────────────────────── */ --slot-line: #5d4f22; --slot-fg: #c2a145; --slot-bg: rgba(194, 161, 69, 0.06); } /* ========================================================================== ブレイクポイント（メディアクエリでは変数が使えないため定数として記録） 320 / 375 / 390 / 430 / 600 / 768 / 1024 / 1440 / 1920(社員総会 16:9) ========================================================================== */