/* ============================================================ CrazyPark 1.0 — Design Tokens Black Void 基調 × 微弱ネオン (Neon Pink / Cyan) Linear/Vercel の洗練 × Blade Runner 2049 の色気 ============================================================ */ /* ---- Google Fonts (欧文サンセリフ / 和文セリフ / モノ) ---- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap"); :root { /* ------------------------------------------------------------ COLORS — Black Void 背景は #000 を核に、階層は 2〜4pt ずつだけ持ち上げる。 カラーは "気配" として扱う。原色ぶつけは禁止。 ------------------------------------------------------------ */ /* Void — 背景の階層 */ --void-0: #000000; /* 純黒 / ページ最下層 */ --void-1: #050507; /* body ambient */ --void-2: #0A0A0F; /* section / card base */ --void-3: #101017; /* elevated card */ --void-4: #16161F; /* hover surface */ --void-5: #1E1E2A; /* pressed / active */ /* Foreground — かすれた白 */ --fg-1: #F5F5F7; /* primary text */ --fg-2: #B8B8C4; /* secondary text */ --fg-3: #6E6E7E; /* tertiary / meta */ --fg-4: #45454F; /* disabled / hairline */ --fg-5: #26262E; /* separator */ /* Neon — 差し色 (気配として。透明度で使うのが正) */ --neon-pink: #FF3D8A; --neon-pink-dim: rgba(255, 61, 138, 0.14); --neon-pink-glow: rgba(255, 61, 138, 0.35); --neon-cyan: #00E5FF; --neon-cyan-dim: rgba(0, 229, 255, 0.12); --neon-cyan-glow: rgba(0, 229, 255, 0.30); /* Semantic */ --semantic-danger: #FF3D5A; --semantic-warn: #FFB13D; --semantic-ok: #3DFFA0; --semantic-info: var(--neon-cyan); /* Hairline — Void 上でだけ見えるやつ */ --hairline: rgba(255, 255, 255, 0.06); --hairline-strong: rgba(255, 255, 255, 0.12); /* ------------------------------------------------------------ TYPOGRAPHY — 3段構成 欧文/UI: Inter, ロゴ/見出し: Space Grotesk, 和文本文: Noto Serif JP, モノ: JetBrains Mono ------------------------------------------------------------ */ --font-sans: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; --font-display: "Space Grotesk", "Inter", sans-serif; --font-serif-jp:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* Scale (mobile-first, iPhone 375 主戦場) */ --fs-xxs: 10px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 44px; --fs-5xl: 60px; --lh-tight: 1.10; --lh-snug: 1.30; --lh-normal: 1.55; --lh-loose: 1.75; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; --ls-mono: 0.02em; /* mono/caps 用の広め */ --ls-caps: 0.18em; /* .OVERLINE 用 */ /* ------------------------------------------------------------ SPACING — 4pt グリッド ------------------------------------------------------------ */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; /* Radius — 引き算美学。過剰な丸みは使わない */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --r-5: 14px; --r-6: 20px; --r-full: 999px; /* Elevation — シャドウは基本使わない。代わりに hairline + 微光 */ --shadow-sm: 0 1px 0 rgba(255,255,255,0.03) inset, 0 0 0 1px var(--hairline); --shadow-md: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--hairline-strong), 0 12px 30px -12px rgba(0,0,0,0.8); --shadow-pink-glow: 0 0 0 1px rgba(255,61,138,0.35), 0 0 24px -4px rgba(255,61,138,0.35); --shadow-cyan-glow: 0 0 0 1px rgba(0,229,255,0.35), 0 0 24px -4px rgba(0,229,255,0.30); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; /* Layout */ --container-mobile: 375px; --container-tablet: 768px; --container-desk: 1180px; } /* ============================================================ SEMANTIC BASE ============================================================ */ html, body { background: var(--void-1); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .h-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); } .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } .p, p { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg-2); } .p-jp { font-family: var(--font-serif-jp); font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg-2); font-weight: 400; } .meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); letter-spacing: var(--ls-mono); } .overline { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--ls-caps); } code, .code { font-family: var(--font-mono); font-size: 0.92em; color: var(--neon-cyan); background: var(--void-3); padding: 2px 6px; border-radius: var(--r-2); border: 1px solid var(--hairline); } /* ============================================================ LOGOTYPE — Chromatic Aberration 微かなRGBズレでネオン気配を演出。 使用: ============================================================ */ .cp-logo { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); color: var(--fg-1); position: relative; display: inline-block; text-shadow: -0.6px 0 0 var(--neon-pink), 0.6px 0 0 var(--neon-cyan); } .cp-logo em { font-style: normal; font-weight: 400; color: var(--fg-3); margin-left: 0.35em; font-family: var(--font-mono); letter-spacing: var(--ls-mono); font-size: 0.55em; vertical-align: 0.35em; text-shadow: none; } .cp-logo.lg { font-size: var(--fs-4xl); text-shadow: -1px 0 0 var(--neon-pink), 1px 0 0 var(--neon-cyan); } .cp-logo.xl { font-size: 48px; text-shadow: -1.2px 0 0 var(--neon-pink), 1.2px 0 0 var(--neon-cyan); } /* subtle drift animation */ @keyframes cp-drift { 0%, 100% { text-shadow: -0.6px 0 0 var(--neon-pink), 0.6px 0 0 var(--neon-cyan); } 50% { text-shadow: -1.2px 0 0 var(--neon-pink), 1.2px 0 0 var(--neon-cyan); } } .cp-logo.drift { animation: cp-drift 6s ease-in-out infinite; }