/** * tp-cursor.css * Turning Point Today — カスタムカーソル 完全版 * * 設計思想: * - ネイティブカーソルを完全置換するツーリング式二重カーソル * - Outer Ring（42px）: 追尾遅延ありのゴールドリング * - Inner Dot（8px）: マウス座標にリアルタイム追従 * - 状態: default / hover（拡大×フロスト） / active（収縮×輝き） / text（縦バー） / link（羽根状ひし形） / magnetic（引力拡大） * - trail（残像）: 8粒の減衰パーティクル * - モバイル（pointer:none / touch デバイス）は完全に無効化 * - Cocoon環境干渉なし（body クラス検知で限定適用） * - GPU最適化: transform / opacity / filter のみアニメーション * - will-change を cursor 要素のみに限定（メモリ効率） * * @package cocoon-child-master * @path /tp-cursor/tp-cursor.css */ /* ================================================================ 0. カーソル有効化判定クラス JS側で .tp-cursor-active を に付与した場合のみ有効 ================================================================ */ /* ── デフォルトカーソル非表示（tp-cursor-active 時のみ） ── */ html.tp-cursor-active, html.tp-cursor-active * { cursor: none !important; } /* ── ただし iframe・input[type=range]は除外 ── */ html.tp-cursor-active iframe, html.tp-cursor-active input[type="range"] { cursor: auto !important; } /* ================================================================ 1. CSS カスタムプロパティ ================================================================ */ :root { /* ─ カーソルカラー（tp-header 準拠） ─ */ --tpc-gold-600: #a07a22; --tpc-gold-500: #c8a44a; --tpc-gold-400: #e2c872; --tpc-gold-100: #f0e4b8; --tpc-cream: #f5f1e8; --tpc-dark: rgba(6, 13, 4, 0.92); --tpc-white: rgba(254, 253, 249, 0.95); /* ─ サイズ ─ */ --tpc-ring-size: 42px; --tpc-dot-size: 8px; --tpc-trail-size: 6px; /* ─ z-index（tp-header の tph-z-progress: 2000 の上） ─ */ --tpc-z: 9999; /* ─ イージング ─ */ --tpc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --tpc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ================================================================ 2. Outer Ring（追尾リング） ================================================================ */ .tp-cursor-ring { position: fixed; top: 0; left: 0; width: var(--tpc-ring-size); height: var(--tpc-ring-size); border-radius: 50%; pointer-events: none; z-index: var(--tpc-z); will-change: transform, opacity; /* ゴールドリング */ border: 1.5px solid var(--tpc-gold-500); background: transparent; /* 初期位置補正（中心合わせ） */ transform: translate( calc(var(--tpc-ring-x, -200px) - var(--tpc-ring-size) / 2), calc(var(--tpc-ring-y, -200px) - var(--tpc-ring-size) / 2) ); /* 追尾遅延トランジション */ transition: transform 0.12s var(--tpc-ease-out), width 0.35s var(--tpc-ease-spring), height 0.35s var(--tpc-ease-spring), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease, filter 0.3s ease; /* 内側グロウ */ box-shadow: 0 0 0 0 rgba(200, 164, 74, 0), inset 0 0 0 0 rgba(200, 164, 74, 0); } /* リング内の微光エフェクト（::before） */ .tp-cursor-ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: radial-gradient( circle at 30% 30%, rgba(226, 200, 114, 0.12) 0%, transparent 70% ); opacity: 0; transition: opacity 0.3s ease; } /* 上下装飾ティック（::after） */ .tp-cursor-ring::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--tpc-gold-400); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; } /* ================================================================ 3. Inner Dot（ドット） ================================================================ */ .tp-cursor-dot { position: fixed; top: 0; left: 0; width: var(--tpc-dot-size); height: var(--tpc-dot-size); border-radius: 50%; pointer-events: none; z-index: calc(var(--tpc-z) + 1); will-change: transform, opacity; background: var(--tpc-gold-400); box-shadow: 0 0 6px rgba(226, 200, 114, 0.8), 0 0 14px rgba(200, 164, 74, 0.4); transform: translate( calc(var(--tpc-dot-x, -200px) - var(--tpc-dot-size) / 2), calc(var(--tpc-dot-y, -200px) - var(--tpc-dot-size) / 2) ); transition: width 0.3s var(--tpc-ease-spring), height 0.3s var(--tpc-ease-spring), background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease; } /* ================================================================ 4. Trail パーティクル（残像粒子 ×8） ================================================================ */ .tp-cursor-trail { position: fixed; top: 0; left: 0; width: var(--tpc-trail-size); height: var(--tpc-trail-size); border-radius: 50%; pointer-events: none; z-index: calc(var(--tpc-z) - 1); will-change: transform, opacity; background: var(--tpc-gold-500); transition: opacity 0.1s linear; } /* ================================================================ 5. 状態: HOVER（リンク・ボタン等のインタラクティブ要素） ================================================================ */ html.tp-cursor-active.is-cursor-hover .tp-cursor-ring { width: 64px; height: 64px; border-color: var(--tpc-gold-400); background: rgba(200, 164, 74, 0.07); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 0 0 1px rgba(200, 164, 74, 0.15), 0 0 18px rgba(200, 164, 74, 0.25), inset 0 0 12px rgba(200, 164, 74, 0.05); } html.tp-cursor-active.is-cursor-hover .tp-cursor-ring::before { opacity: 1; } html.tp-cursor-active.is-cursor-hover .tp-cursor-ring::after { opacity: 0.8; } html.tp-cursor-active.is-cursor-hover .tp-cursor-dot { width: 3px; height: 3px; opacity: 0.6; } /* ================================================================ 6. 状態: LINK（アンカータグ — ひし形変形） ================================================================ */ html.tp-cursor-active.is-cursor-link .tp-cursor-ring { width: 50px; height: 50px; border-color: var(--tpc-gold-400); border-width: 1px; box-shadow: 0 0 20px rgba(226, 200, 114, 0.35), inset 0 0 10px rgba(226, 200, 114, 0.08); /* ひし形 */ border-radius: 4px; transform: translate( calc(var(--tpc-ring-x, -200px) - 25px), calc(var(--tpc-ring-y, -200px) - 25px) ) rotate(45deg) !important; } html.tp-cursor-active.is-cursor-link .tp-cursor-dot { width: 5px; height: 5px; background: var(--tpc-gold-100); box-shadow: 0 0 8px rgba(240, 228, 184, 1), 0 0 20px rgba(226, 200, 114, 0.6); } /* ================================================================ 7. 状態: TEXT（テキスト選択可能領域 — 縦バー） ================================================================ */ html.tp-cursor-active.is-cursor-text .tp-cursor-ring { width: 2px; height: 28px; border-radius: 2px; border: none; background: linear-gradient( to bottom, transparent, var(--tpc-gold-400), var(--tpc-gold-400), transparent ); box-shadow: 0 0 10px rgba(226, 200, 114, 0.6); } html.tp-cursor-active.is-cursor-text .tp-cursor-ring::before, html.tp-cursor-active.is-cursor-text .tp-cursor-ring::after { content: ''; position: absolute; left: 50%; width: 8px; height: 2px; background: var(--tpc-gold-400); border-radius: 2px; transform: translateX(-50%); opacity: 1; transition: none; } html.tp-cursor-active.is-cursor-text .tp-cursor-ring::before { top: 0; } html.tp-cursor-active.is-cursor-text .tp-cursor-ring::after { bottom: 0; top: auto; height: 2px; width: 8px; } html.tp-cursor-active.is-cursor-text .tp-cursor-dot { width: 0; height: 0; opacity: 0; } /* ================================================================ 8. 状態: ACTIVE（mousedown — 収縮 × 強グロウ） ================================================================ */ html.tp-cursor-active.is-cursor-active .tp-cursor-ring { width: 28px; height: 28px; border-color: var(--tpc-gold-100); background: rgba(226, 200, 114, 0.12); box-shadow: 0 0 0 3px rgba(226, 200, 114, 0.25), 0 0 24px rgba(200, 164, 74, 0.6), 0 0 48px rgba(200, 164, 74, 0.2); } html.tp-cursor-active.is-cursor-active .tp-cursor-dot { width: 12px; height: 12px; background: var(--tpc-gold-100); box-shadow: 0 0 10px rgba(240, 228, 184, 1), 0 0 24px rgba(226, 200, 114, 0.8), 0 0 48px rgba(200, 164, 74, 0.4); } /* ================================================================ 9. 状態: MAGNETIC（引力ボタン — マグネット効果） data-cursor="magnetic" 属性付き要素 ================================================================ */ html.tp-cursor-active.is-cursor-magnetic .tp-cursor-ring { width: 76px; height: 76px; border-color: transparent; background: rgba(200, 164, 74, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(200, 164, 74, 0.3), 0 0 30px rgba(200, 164, 74, 0.2), inset 0 0 20px rgba(200, 164, 74, 0.05); border-width: 1px; border-style: solid; border-color: rgba(200, 164, 74, 0.4); } html.tp-cursor-active.is-cursor-magnetic .tp-cursor-dot { opacity: 0; } /* ================================================================ 10. 状態: IMAGE / VIDEO（メディア要素 — 円形ズームアイコン） ================================================================ */ html.tp-cursor-active.is-cursor-media .tp-cursor-ring { width: 56px; height: 56px; border-color: rgba(245, 241, 232, 0.7); background: rgba(6, 13, 4, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } html.tp-cursor-active.is-cursor-media .tp-cursor-ring::before { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e2c872' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 20px no-repeat; inset: 0; border-radius: 50%; } html.tp-cursor-active.is-cursor-media .tp-cursor-dot { opacity: 0; } /* ================================================================ 11. 状態: DRAG（ドラッグ可能要素） ================================================================ */ html.tp-cursor-active.is-cursor-drag .tp-cursor-ring { width: 52px; height: 52px; border-color: rgba(200, 164, 74, 0.6); background: rgba(200, 164, 74, 0.06); } html.tp-cursor-active.is-cursor-drag .tp-cursor-ring::before { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23e2c872' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 2 12 5 15'/%3E%3Cpolyline points='9 5 12 2 15 5'/%3E%3Cpolyline points='15 19 12 22 9 19'/%3E%3Cpolyline points='19 9 22 12 19 15'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3C/svg%3E") center / 22px no-repeat; inset: 0; border-radius: 50%; } html.tp-cursor-active.is-cursor-drag .tp-cursor-dot { opacity: 0; } /* ================================================================ 12. ページ離脱・ウィンドウ外（非表示） ================================================================ */ html.tp-cursor-active.is-cursor-outside .tp-cursor-ring, html.tp-cursor-active.is-cursor-outside .tp-cursor-dot, html.tp-cursor-active.is-cursor-outside .tp-cursor-trail { opacity: 0 !important; } /* ================================================================ 13. 初期非表示（JS初期化完了前） ================================================================ */ .tp-cursor-ring, .tp-cursor-dot, .tp-cursor-trail { opacity: 0; } html.tp-cursor-active .tp-cursor-ring, html.tp-cursor-active .tp-cursor-dot { opacity: 1; } html.tp-cursor-active .tp-cursor-trail { opacity: 0.45; } /* ================================================================ 14. スクロールバー美化 ─ 常時 6px の視認性・操作性を両立するスリムバー ─ カラー : 発光する上品なライトゴールデンイエロー ─ ホバー時: 輝度・グロウ強化で操作中であることを明示 ─ 縦横 : 縦スクロール専用設計（横は最小限） ================================================================ */ /* ── Firefox 対応 ── */ html.tp-cursor-active { scrollbar-width: thin; scrollbar-color: var(--tpc-gold-500) transparent; } /* ── Chrome / Edge / Safari — トラック ── */ html.tp-cursor-active ::-webkit-scrollbar { width: 6px; height: 4px; /* 横スクロールは控えめ */ } html.tp-cursor-active ::-webkit-scrollbar-track { background: transparent; border-radius: 100px; /* トラック自体に極薄の溝を表現：存在感を与えてユーザーに位置を伝える */ box-shadow: inset 0 0 0 1px rgba(200, 164, 74, 0.06); } html.tp-cursor-active ::-webkit-scrollbar-corner { background: transparent; } /* ── 通常状態 ── */ html.tp-cursor-active ::-webkit-scrollbar-thumb { border-radius: 100px; /* 発光ゴールデンイエロー */ background: linear-gradient( 180deg, rgba(240, 228, 184, 0.80) 0%, rgba(200, 164, 74, 0.88) 48%, rgba(160, 122, 34, 0.78) 100% ); /* 繊細なグロウ */ filter: drop-shadow(0 0 3px rgba(226, 200, 114, 0.48)) drop-shadow(0 0 1px rgba(200, 164, 74, 0.32)); } /* ── ホバー状態（輝度・グロウ強化） ── */ html.tp-cursor-active ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(254, 248, 220, 0.98) 0%, rgba(226, 200, 114, 0.96) 42%, rgba(200, 164, 74, 0.90) 100% ); filter: drop-shadow(0 0 7px rgba(240, 228, 184, 0.80)) drop-shadow(0 0 3px rgba(226, 200, 114, 0.95)) drop-shadow(0 0 1px rgba(254, 248, 220, 0.60)); } /* ── ドラッグ中（最大輝度） ── */ html.tp-cursor-active ::-webkit-scrollbar-thumb:active { background: linear-gradient( 180deg, rgba(254, 253, 249, 1.00) 0%, rgba(240, 228, 184, 0.98) 40%, rgba(226, 200, 114, 0.95) 100% ); filter: drop-shadow(0 0 10px rgba(240, 228, 184, 0.90)) drop-shadow(0 0 5px rgba(226, 200, 114, 0.80)) drop-shadow(0 0 2px rgba(254, 253, 249, 0.70)); } /* ================================================================ 15. テキスト選択カラー（カーソルと統一感） ================================================================ */ html.tp-cursor-active ::selection { background: rgba(200, 164, 74, 0.28); color: inherit; } html.tp-cursor-active ::-moz-selection { background: rgba(200, 164, 74, 0.28); color: inherit; } /* ================================================================ 16. モバイル / タッチデバイス — 完全無効化 ================================================================ */ @media (pointer: coarse), (hover: none) { html.tp-cursor-active, html.tp-cursor-active * { cursor: auto !important; } .tp-cursor-ring, .tp-cursor-dot, .tp-cursor-trail { display: none !important; } /* ── スクロールバー設定をすべてリセット ── */ html.tp-cursor-active { scrollbar-width: revert; scrollbar-color: revert; } html.tp-cursor-active ::-webkit-scrollbar, html.tp-cursor-active ::-webkit-scrollbar-track, html.tp-cursor-active ::-webkit-scrollbar-thumb, html.tp-cursor-active ::-webkit-scrollbar-corner { width: revert; height: revert; background: revert; border-radius: revert; box-shadow: revert; filter: revert; } } /* ================================================================ 17. アクセシビリティ：reduced-motion ================================================================ */ @media (prefers-reduced-motion: reduce) { .tp-cursor-ring, .tp-cursor-dot { transition: none !important; } .tp-cursor-trail { display: none !important; } }