/* ========================================================================= BAR ACTX — tokens.css v4.0 [ SEOUL GIRLY / 액트엑스 ] ------------------------------------------------------------------------- 方針: 硬派・無機質・ストリート・サイバーを撤廃し、「韓国カフェとガールズバーの 中間」に置き直す。かわいい7:かっこいい3。 地は真っ黒をやめ、くすみパープルの暗色とミルキーホワイトの明色を交互に置く。 光は原色で刺さずに、白を芯に含んだ柔らかい発光にする。 書体は細字を主役にし、字間と余白で品を作る(太字で押さない)。 規約: 色は全て OKLCH。他CSSからは var() のみ(生の hex/rgb 直書き禁止)。 コントラストは実測値(WCAG 2.1 相対輝度)。淡色に振っても本文は 4.5:1 を割らない。 ========================================================================= */ :root { /* ======================================================================= 1. 地 — くすみパープル(318°)。真っ黒(oklch 9%)からは離す ======================================================================= */ --plum-950: oklch(12.5% 0.026 318); /* 最暗。FOOTER / HERO の底 */ --plum-900: oklch(16.5% 0.030 318); /* 暗セクションの既定 */ --plum-850: oklch(20.5% 0.032 318); /* 一段浮いた面 */ --plum-800: oklch(25.5% 0.032 318); /* 罫・枠 */ /* 明るい地 — ミルキー */ --milk: oklch(96.5% 0.011 340); /* 明セクションの既定。白に桃を一滴 */ --milk-2: oklch(93.5% 0.020 338); /* 淡いピンクの面 */ --lav: oklch(94.5% 0.022 302); /* 淡いラベンダーの面 */ /* ======================================================================= 2. 文字(実測コントラスト) ======================================================================= */ /* 暗地の上 */ --d-hi: oklch(97.5% 0.008 330); /* 17.97:1 見出し・重要本文 */ --d-mid: oklch(81.5% 0.016 330); /* 10.84:1 本文 */ --d-low: oklch(70% 0.020 330); /* 7.18:1 補助 */ --d-faint: oklch(63% 0.022 330); /* 5.48:1 微細ラベル */ /* 明地の上 */ --l-hi: oklch(30% 0.045 320); /* 12.49:1 見出し */ --l-mid: oklch(46% 0.038 320); /* 6.53:1 本文 */ --l-low: oklch(51% 0.036 320); /* 5.26:1 補助(milk-2 でも 4.79:1) */ /* 明地の上で使うアクセント文字(ネオン色は明地では読めないため専用に用意) */ --rose-ink: oklch(50% 0.165 350); /* 5.93:1 明地のピンク文字 */ --lav-ink: oklch(50% 0.150 300); /* 5.78:1 明地の紫文字 */ /* ======================================================================= 3. 罫線 — 半透明の白・淡ピンクで引く。工業的な硬い線にしない ======================================================================= */ --rule-d: oklch(100% 0 0 / .10); /* 暗地の装飾罫 */ --rule-d-2: oklch(100% 0 0 / .17); /* 暗地の構造罫 */ --rule-d-ui: oklch(100% 0 0 / .38); /* 暗地の操作子の縁 */ --rule-l: oklch(30% 0.045 320 / .12); /* 明地の装飾罫 */ --rule-l-2: oklch(30% 0.045 320 / .20); /* 明地の構造罫 */ --rule-l-ui: oklch(30% 0.045 320 / .42); /* 明地の操作子の縁 */ /* ======================================================================= 4. ネオン — 彩度を落とし、白を芯に含ませる。「派手」ではなく「かわいい光」 ======================================================================= */ --neon-rose: oklch(78% 0.140 350); /* 9.08:1 天使の羽。主役 */ --neon-lav: oklch(76% 0.130 300); /* 8.65:1 ラベンダー */ --neon-ice: oklch(88% 0.075 225); /* 13.73:1 アイスブルー */ --neon-mint: oklch(87% 0.085 165); /* クローバー由来。ページ内 最大2回 */ --neon-warm: oklch(88% 0.070 70); /* 橙の管由来。RECRUIT の光だまりのみ */ /* 床(チェッカー)——実写の3色を淡く引用 */ --tile-a: oklch(30% 0.020 318); --tile-b: oklch(88% 0.020 340); --tile-c: oklch(72% 0.045 78); /* ======================================================================= 5. 発光 LEVEL 0–3 白を芯にした3〜4層。原色を強く出さない。 宣言は .lit-1 / .lit-2 / .lit__on の3本のみ。色は変数で差し替える。 ======================================================================= */ --glow-1-rose: 0 0 8px oklch(100% 0 0 / .22), 0 0 16px oklch(78% 0.140 350 / .20); --glow-1-ice: 0 0 8px oklch(100% 0 0 / .22), 0 0 16px oklch(88% 0.075 225 / .20); --glow-1-lav: 0 0 8px oklch(100% 0 0 / .22), 0 0 16px oklch(76% 0.130 300 / .20); --glow-2-rose: 0 0 4px oklch(100% 0 0 / .40), 0 0 14px oklch(78% 0.140 350 / .30), 0 0 30px oklch(78% 0.140 350 / .16); --glow-2-ice: 0 0 4px oklch(100% 0 0 / .40), 0 0 14px oklch(88% 0.075 225 / .30), 0 0 30px oklch(88% 0.075 225 / .16); --glow-2-lav: 0 0 4px oklch(100% 0 0 / .40), 0 0 14px oklch(76% 0.130 300 / .30), 0 0 30px oklch(76% 0.130 300 / .16); /* LEVEL3 も最外周を切り、白を芯に置いた「ふわっと」の範囲に留める(電飾感を出さない) */ --glow-3-rose: 0 0 3px oklch(100% 0 0 / .58), 0 0 11px oklch(88% 0.090 350 / .42), 0 0 28px oklch(78% 0.140 350 / .22); --glow-3-ice: 0 0 3px oklch(100% 0 0 / .58), 0 0 11px oklch(92% 0.055 225 / .42), 0 0 28px oklch(88% 0.075 225 / .22); --glow-3-lav: 0 0 3px oklch(100% 0 0 / .58), 0 0 11px oklch(86% 0.085 300 / .42), 0 0 28px oklch(76% 0.130 300 / .22); /* 既定色 */ --glow-1: var(--glow-1-rose); --glow-2: var(--glow-2-rose); --glow-3: var(--glow-3-rose); /* 面の柔らかい光(box-shadow)。淡く浮かせるためだけに使う */ --lift-1: 0 2px 10px oklch(12.5% 0.026 318 / .28); --lift-2: 0 6px 22px oklch(12.5% 0.026 318 / .34); --halo-rose: 0 0 18px oklch(78% 0.140 350 / .22); --halo-ice: 0 0 18px oklch(88% 0.075 225 / .22); /* ======================================================================= 6. 光だまり・粒子 ======================================================================= */ --bloom-rose: oklch(78% 0.140 350 / .16); --bloom-lav: oklch(76% 0.130 300 / .13); --bloom-ice: oklch(88% 0.075 225 / .10); --bloom-warm: oklch(88% 0.070 70 / .10); --grain: .022; /* 粒子。硬派版の .030 から下げ、ざらつきを弱める */ --hero-t: 0; /* HERO 写真の点灯度。rAF で .hero にだけ設定する */ --wing-x: 59%; /* 羽ネオンの実測座標 */ --wing-y: 23%; /* ======================================================================= 7. 書体 — 細字・丸み・ファッション寄り。Condensed と極太は使わない ======================================================================= */ --font-en: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif; --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif; --font-kr: "Gothic A1", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 太さの段。Black は使わない。見出しでも 500〜600 まで */ --w-thin: 300; --w-base: 400; --w-mid: 500; --w-semi: 600; /* ======================================================================= 8. 文字サイズ。375px を下限、1280px を上限として直線補間 ======================================================================= */ --t-micro: 11px; /* 英字ラベル専用 */ --t-xs: 12.5px; --t-sm: 14px; --t-body: clamp(1rem, 0.11vw + 0.975rem, 1.0625rem); /* 16 → 17 */ --t-lead: clamp(1.0625rem, 0.17vw + 1.03rem, 1.1875rem); /* 17 → 19 */ --t-h3: clamp(19px, 0.55vw + 16.9px, 24px); --t-h2: clamp(27px, 0.9vw + 23.6px, 36px); --t-h2x: clamp(38px, 2.3vw + 29.4px, 60px); /* NEWS / JOIN / FOLLOW */ --t-kr-h: clamp(22px, 0.7vw + 19.4px, 30px); --t-kr-lock: clamp(26px, 1.0vw + 22.3px, 38px); /* HERO の 액트엑스 */ --t-open: clamp(40px, 2.6vw + 30.2px, 64px); --t-price: clamp(54px, 16.5vw, 104px); /* ¥3,000 */ --t-mark: clamp(60px, 19.2vw, 148px); /* ACTX */ /* ======================================================================= 9. 字間 — 全体に広め。余白を感じる組みにする ======================================================================= */ --tr-mark: .06em; /* ロゴ。硬派版の -.028em から開いて軽くする */ --tr-h1: .02em; --tr-h2: .015em; --tr-h3: .01em; --tr-jp: .04em; /* 和文本文 */ --tr-kr: .01em; /* ハングルは開かない */ --tr-label: .22em; --tr-micro: .30em; --tr-wide: .42em; /* ---------- 10. 行送り。ゆったり ---------- */ --lh-mark: 1.0; --lh-head: 1.28; --lh-kr: 1.4; --lh-en: 1.5; --lh-jp: 2.0; /* ---------- 11. 間隔(4ptスケール)。硬派版より一段厚く使う ---------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-18: 4.5rem; --s-24: 6rem; --s-32: 8rem; --s-40: 10rem; /* ---------- 12. 版面 ---------- */ --shell: 76rem; --pad-x: clamp(1.375rem, 5.2vw, 3.5rem); --measure: 32em; --sec-y: var(--s-24); /* 余白を増やす。60rem 以上で --s-32 */ --tap: 44px; --tap-row: 80px; --hair: 1px; /* ---------- 角丸。8〜14px を基準にする ---------- */ --r-sm: 8px; /* タグ・チップ・小さな面 */ --r-md: 12px; /* ボタン・写真・パネル */ --r-lg: 14px; /* 大きな面 */ --r-pill: 999px; /* ピル型ラベルのみ */ /* ---------- 13. 動き。短く・小さく・柔らかく ---------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.25, .6, .3, 1); --d-1: 140ms; --d-2: 220ms; --d-3: 340ms; --d-4: 640ms; --d-5: 900ms; --d-6: 1400ms; --d-house: 600ms; --stagger: 80ms; /* ---------- 14. 重なり(6段) ---------- */ --z-under: -1; --z-base: 0; --z-raise: 10; --z-sticky: 100; --z-veil: 400; --z-cursor: 600; /* ======================================================================= 14b. 面の色(半透明)。style.css から生値を追い出すための受け皿 ======================================================================= */ --veil-w-025: oklch(100% 0 0 / .025); /* 折りたたみの面(暗地) */ --veil-w-04: oklch(100% 0 0 / .04); /* ボタンの面(暗地) */ --veil-w-12: oklch(100% 0 0 / .12); /* ボタン hover の面(暗地) */ --veil-w-16: oklch(100% 0 0 / .16); /* HERO 写真に重ねる白い光 */ --veil-w-30: oklch(100% 0 0 / .30); /* IG グリフの縁 */ --veil-w-50: oklch(100% 0 0 / .50); /* カードの面(明地) */ --veil-w-55: oklch(100% 0 0 / .55); /* ボタン・行の面(明地) */ --veil-w-90: oklch(100% 0 0 / .90); /* ボタン hover の面(明地) */ --tint-rose-10: oklch(78% 0.140 350 / .10); /* 看板の内側に差す桃 */ --tint-rose-16: oklch(78% 0.140 350 / .16); /* タグの下地 */ --tint-rose-90: oklch(78% 0.140 350 / .90); /* IG グリフの塗り */ --tint-lav-12: oklch(76% 0.130 300 / .12); --tint-lav-16: oklch(76% 0.130 300 / .16); --tint-warm-20: oklch(88% 0.070 70 / .20); --tint-ink-08: oklch(30% 0.045 320 / .08); --ring-rose: oklch(78% 0.140 350 / .42); /* カーソルのリング */ /* HERO のスクリム段 */ --scrim-1: oklch(12.5% 0.026 318 / .62); --scrim-2: oklch(12.5% 0.026 318 / .22); --scrim-3: oklch(16.5% 0.030 318 / .70); /* マスク用の不透明色(色ではなく「見せる/隠す」の指定) */ --mask-on: oklch(0% 0 0); /* ======================================================================= 15. セクションの意味論トークン .t-dark / .t-light がこの5つを差し替える。個々のCSSは意味でだけ書く。 ======================================================================= */ --bg: var(--plum-900); --fg: var(--d-hi); --fg-2: var(--d-mid); --fg-3: var(--d-low); --fg-4: var(--d-faint); --rule: var(--rule-d); --rule-2: var(--rule-d-2); --rule-ui:var(--rule-d-ui); --accent-ink: var(--neon-rose); /* 暗地ではネオンそのもの */ --accent-2: var(--neon-ice); } /* 暗いセクション(既定) */ .t-dark{ --bg: var(--plum-900); --fg: var(--d-hi); --fg-2: var(--d-mid); --fg-3: var(--d-low); --fg-4: var(--d-faint); --rule: var(--rule-d); --rule-2: var(--rule-d-2); --rule-ui: var(--rule-d-ui); --accent-ink: var(--neon-rose); --accent-2: var(--neon-ice); background: var(--bg); color: var(--fg-2); } .t-deep{ --bg: var(--plum-950); } /* 明るいセクション */ .t-light{ --bg: var(--milk); --fg: var(--l-hi); --fg-2: var(--l-mid); --fg-3: var(--l-low); --fg-4: var(--l-low); --rule: var(--rule-l); --rule-2: var(--rule-l-2); --rule-ui: var(--rule-l-ui); --accent-ink: var(--rose-ink); --accent-2: var(--lav-ink); background: var(--bg); color: var(--fg-2); } .t-pink { --bg: var(--milk-2); } .t-lav { --bg: var(--lav); } @media (min-width: 60rem) { :root { --sec-y: var(--s-32); } } /* 低い画面ではロゴを一段落とす */ @media (max-height: 700px) { :root { --t-mark: 60px; --t-kr-lock: 24px; } }