/* ============================================================ litlink boost! — Design Tokens VibeBox規格準拠 / Anti-Slop適用 ============================================================ */ :root { /* ── Brand ── */ --litlink: #9494F9; /* lit.link メインカラー */ --violet: #6464FD; /* グラデ/アクセント */ --violet-dim: #4444CC; --violet-bright: #8080FF; --violet-glow: rgba(100,100,253,.35); --violet-trace: rgba(100,100,253,.12); --energy: #22D3EE; /* 発射エネルギー（シアン） */ --energy-glow: rgba(34,211,238,.4); --xp: #7C5CFF; /* XP・成長 */ /* ── Boost State Colors ── */ --gauge-low: #6464FD; --gauge-mid: #22D3EE; /* エネルギー充填 */ --gauge-near: #f59e0b; /* 80%+ — 緊張 */ --gauge-full: #ff6b35; /* 100% — IGNITE 瞬間のみ */ /* ── Background ── */ --bg-base: #080810; --bg-surface: #10101e; --bg-elevated: #191928; --bg-overlay: rgba(8,8,16,.88); /* ── Text ── */ --text-primary: #f0f0f8; --text-secondary: #8888a8; --text-muted: #8a8aa6; /* on #080810 ≈ 4.9:1（WCAG AA） */ --text-inverse: #080810; /* ── Semantic ── */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; /* ── Border ── */ --border: rgba(255,255,255,.08); --border-focus: rgba(100,100,253,.6); /* ── Spacing (8pt grid) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Radius ── */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px; /* ── Font ── */ --font: "Noto Sans JP", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", monospace; /* ── Motion ── */ --ease-bounce: cubic-bezier(.34,1.56,.64,1); --ease-snap: cubic-bezier(.2,0,0,1); --ease-spring: cubic-bezier(.4,0,.2,1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-gauge: 600ms; /* ── Surface shadow ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.5); --shadow-lg: 0 12px 40px rgba(0,0,0,.6); --shadow-violet: 0 0 32px rgba(100,100,253,.4); /* ── Mobile shell ── */ --bottom-nav-h: 68px; --status-bar-h: env(safe-area-inset-top, 0px); --home-indicator-h: env(safe-area-inset-bottom, 0px); /* ── Festival accents（CEOモック 2026-07） ── */ --pink: #F5308A; /* ホットピンク: LIVE・強調数値・1位推す */ --pink-soft: rgba(245,48,138,.12); --grad-cta: linear-gradient(135deg, #6464FD 0%, #B455FD 100%); --grad-gauge: linear-gradient(135deg, #B455FD 0%, #F5308A 100%); } /* ============================================================ Creator App ライトテーマ（CEOイメージモック準拠・2026-07-02） creator/index.html の でのみ有効。 Ops/Client の boost-b2b-light.css とは独立。 ============================================================ */ [data-theme="light-boost"] { --bg-base: #F4F2FB; /* 淡ラベンダー */ --bg-surface: #FFFFFF; /* 白カード */ --bg-elevated: #EFECF9; --bg-overlay: rgba(244,242,251,.92); --text-primary: #1B1830; --text-secondary: #5D5977; --text-muted: #6E6A86; /* on #FFF ≈ 5.2:1（WCAG AA） */ --text-inverse: #FFFFFF; --border: rgba(27,24,48,.08); --border-focus: rgba(100,100,253,.55); --violet-glow: rgba(100,100,253,.22); --violet-trace: rgba(100,100,253,.09); --energy-glow: rgba(180,85,253,.3); --gauge-near: #F5308A; /* near=ピンク（モック準拠） */ --shadow-sm: 0 1px 3px rgba(60,50,120,.08); --shadow-md: 0 6px 20px rgba(60,50,120,.1); --shadow-lg: 0 14px 44px rgba(60,50,120,.14); --shadow-violet: 0 8px 28px rgba(100,100,253,.22); } /* ── Keyframes ── */ @keyframes fadeIn { from { opacity:0 } to { opacity:1 } } @keyframes slideUp { from { transform:translateY(12px); opacity:0 } to { transform:none; opacity:1 } } @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 12px var(--violet-glow) } 50% { box-shadow: 0 0 40px var(--violet-glow) } } @keyframes gauge-fill { from { width:0 } to { width:var(--pct,0%) } } @keyframes ignite { 0% { transform: scale(1); opacity:1 } 40% { transform: scale(1.08); box-shadow: 0 0 80px var(--violet), 0 0 160px var(--violet-glow) } 60% { transform: scale(.95); } 100% { transform: scale(1); box-shadow: none; opacity:1 } } @keyframes ripple { 0% { transform: scale(0); opacity:.6 } 100% { transform: scale(3); opacity:0 } } @keyframes float-up { 0% { transform: translateY(0); opacity:1 } 100% { transform: translateY(-60px); opacity:0 } } @keyframes count-up { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform:none } } @keyframes spin { to { transform: rotate(360deg) } } @keyframes confetti-fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1 } 100% { transform: translateY(110vh) rotate(720deg); opacity: .6 } } @keyframes sticker-pop { 0% { transform: scale(0) rotate(-12deg); opacity: 0 } 60% { transform: scale(1.2) rotate(4deg); opacity: 1 } 100% { transform: scale(1) rotate(0deg); opacity: 1 } } @keyframes cheer-float { 0% { transform: translateY(8px); opacity: 0 } 15% { transform: none; opacity: 1 } 85% { transform: none; opacity: 1 } 100% { transform: translateY(-6px); opacity: 0 } } @keyframes sparkle { 0%, 100% { opacity: .4; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.1) } } /* ── Reduced motion: 全アニメーション/トランジション停止 ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── 演出ひかえめモード（設定トグル / localStorage BOOST_FX=min） ── */ body[data-fx="min"] *, body[data-fx="min"] *::before, body[data-fx="min"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }