/* ================================================================================
* 📋 ファイル名: app/assets/stylesheets/luxury_common.css
* 📊 リファクタリング基準: 【✅ 問題なし】
* 現在の行数: 471行 (コメント除外後の実行行数: 約350行)
* ✅ 300行未満: 完璧
* ✅ 500行未満: 問題なし ← 【現在の状態】
* ⚠️ 700行未満: 注意喚起・リファクタリング要検討
* 🚨 700行以上: リファクタリング必須
* ※コメント行は行数カウントから除外
*
* 🎨 目的: ラグジュアリーデザイン共通定義 - UI/UX統一化
* 📅 作成日: 2025-11-02
* 🎯 基準: ログイン画面（app/views/devise/sessions/new.html.erb）
*
* 【デザインコンセプト】
* エグゼクティブポータルとしてのプレミアム感を全画面で統一
* - 3層の動的背景パターン
* - 脈動するグローエフェクト
* - 強力なグラスモーフィズム
* - エレガントなアニメーション
*
* 【適用対象画面】
* - ダッシュボード（home/index.html.erb）
* - タスクプロジェクト一覧（task_projects/index.html.erb）
* - カンバンボード（task_projects/board.html.erb）
* - アカウント設定（accounts/show.html.erb）
* - その他全画面
*
* 【実装ロードマップ】
* Phase 1: 共通CSSファイル作成（本ファイル）✅
* Phase 2: application.html.erb更新
* Phase 3: ダッシュボード適用
* Phase 4-6: 他画面への展開
* Phase 7: 全画面検証・最適化
* ================================================================================
*/
/* ========================================
* 1. プレミアム背景パターン（3層構造）
* ========================================
* ログイン画面基準の高品質背景デザイン
*
* 【仕様】
* - 3層の放射状グラデーション（奥行き感の演出）
* - 異なるサイズ: 600px / 800px / 1000px
* - 透明度のグラデーション: 0.08 → 0.05 → 0.03
* - 20秒周期のゆっくりとした動き
*
* 【配置】
* - 第1層（25%, 25%）: 左上からの光（最も明るい）
* - 第2層（75%, 75%）: 右下からの光（中間の明るさ）
* - 第3層（50%, 50%）: 中央からの光（最も薄い）
*
* 【使用方法】
*
======================================== */
.luxury-bg-premium {
position: fixed; /* 画面全体に固定 */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
/* 第1層: 左上の明るい光 */
radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
/* 第2層: 右下の中間の光 */
radial-gradient(circle at 75% 75%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
/* 第3層: 中央の薄い光 */
radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
background-size: 600px 600px, 800px 800px, 1000px 1000px; /* 異なるサイズで奥行き感 */
animation: luxuryPatternFloat 20s ease-in-out infinite; /* 20秒周期の動き */
z-index: 0; /* 最背面に配置 */
pointer-events: none; /* マウスイベントを通過させる */
}
/* ========================================
* 2. プレミアムグローエフェクト
* ========================================
* カード要素を包む脈動する光の効果
*
* 【仕様】
* - 放射状のゴールドグラデーション
* - 4秒周期で脈動（呼吸感）
* - opacity変化: 0.6 ↔ 0.8
* - scale変化: 1.0 ↔ 1.05
*
* 【配置】
* - カード要素の親要素（relative）内に配置
* - カードより大きいサイズ（200%）で包み込む
*
* 【使用方法】
*
======================================== */
.luxury-glow-premium {
position: absolute; /* 親要素基準で配置 */
top: -50%; /* カードより大きく配置 */
left: -50%;
width: 200%; /* カードの2倍のサイズ */
height: 200%;
background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%); /* 中心が明るいゴールドの光 */
opacity: 0.6; /* 基本透明度 */
animation: luxuryGlowPulse 4s ease-in-out infinite; /* 4秒周期で脈動 */
pointer-events: none; /* マウスイベントを通過させる */
z-index: 1; /* 背景の上、コンテンツの下 */
}
/* ========================================
* 3. プレミアムカードデザイン
* ========================================
* グラスモーフィズム（frosted glass）効果を持つカード
*
* 【仕様】
* - 半透明の白グラデーション背景
* - 強力なぼかし効果（25px）
* - 大きなシャドウで浮遊感
* - 大きめの角丸で柔らかい印象
*
* 【デザイン要素】
* - backdrop-filter: ガラス越しに見えるような効果
* - box-shadow: 0 30px 80px で立体感
* - border-radius: 24px で洗練された印象
*
* 【使用方法】
*
======================================== */
.luxury-card-premium {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%); /* 半透明の白グラデーション */
backdrop-filter: blur(25px); /* 強力なぼかし効果（グラスモーフィズム） */
-webkit-backdrop-filter: blur(25px); /* Safari対応 */
border: 1px solid rgba(255, 255, 255, 0.15); /* 微妙な白の縁取り */
border-radius: 24px; /* 大きめの角丸 */
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); /* 大きなシャドウで浮遊感 */
position: relative; /* グローエフェクト配置の基準 */
overflow: hidden; /* はみ出し防止 */
}
/* ========================================
* 4. プレミアムカード（中サイズ）
* ========================================
* 統計カードや小さめのカード要素用
*
* 【ログイン画面との差分】
* - シャドウを少し小さめに調整（視覚的バランス）
* - その他の要素はプレミアムカードと同じ
======================================== */
.luxury-card-premium-medium {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px; /* 少し小さめの角丸 */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); /* 中程度のシャドウ */
position: relative;
overflow: hidden;
}
/* ========================================
* 5. 共通アニメーション定義
* ========================================
* 全画面で使用するアニメーション効果
======================================== */
/* 背景パターンの浮遊アニメーション（20秒周期） */
@keyframes luxuryPatternFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-20px, -10px) rotate(1deg);
}
50% {
transform: translate(15px, -15px) rotate(-1deg);
}
75% {
transform: translate(-10px, 10px) rotate(0.5deg);
}
}
/* グローエフェクトの脈動アニメーション（4秒周期） */
@keyframes luxuryGlowPulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
/* カード出現アニメーション（ページロード時） */
@keyframes luxuryCardAppear {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ========================================
* 6. プレミアムロゴデザイン
* ========================================
* ロゴアイコンの統一デザイン
*
* 【注意】
* サイズはサイドバーのレイアウトに影響するため、
* 既存の48x48pxを維持し、視覚効果のみを強化
======================================== */
.luxury-logo-premium {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); /* ゴールドグラデーション */
border-radius: 16px; /* 既存サイズ維持（サイドバーレイアウト保持） */
box-shadow:
0 20px 40px rgba(255, 215, 0, 0.3), /* 大きなシャドウ（ログイン画面基準） */
0 0 0 1px rgba(255, 215, 0, 0.2); /* 微妙な縁取り */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* ロゴのぼかしグロー効果 */
.luxury-logo-premium::before {
content: '';
position: absolute;
inset: 2px; /* ロゴの内側に配置 */
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
border-radius: 14px;
z-index: -1; /* ロゴの背後に配置 */
filter: blur(20px); /* 強力なぼかし（ログイン画面基準） */
opacity: 0.7; /* 高めのopacity（ログイン画面基準） */
}
/* ========================================
* 7. サイドバー背景強化
* ========================================
* サイドバーのグラスモーフィズム効果を強化
======================================== */
.sidebar-premium {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%); /* 透明度を少し上げる */
backdrop-filter: blur(25px); /* ぼかし効果を強化（20px → 25px） */
-webkit-backdrop-filter: blur(25px); /* Safari対応 */
border-right: 1px solid rgba(255, 255, 255, 0.12); /* 縁取りを少し強化 */
}
/* サイドバーのゴールド縦線エフェクト */
.sidebar-premium::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(255, 215, 0, 0.4) 50%, transparent 100%); /* ゴールドを少し強化 */
z-index: 1;
}
/* ========================================
* 8. ヘッダー・コントロールバー統一デザイン
* ========================================
* ページ上部のヘッダー・コントロールバー要素
======================================== */
.luxury-header-premium {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-bottom: 1px solid rgba(255, 215, 0, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.1),
0 4px 20px rgba(0, 0, 0, 0.3);
}
/* ========================================
* 9. プレミアムボタンデザイン
* ========================================
* ゴールドグラデーションのアクションボタン
======================================== */
.luxury-btn-premium {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #000;
border: none;
border-radius: 12px;
font-weight: 700;
padding: 16px 24px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ボタンのシマーエフェクト */
.luxury-btn-premium::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.luxury-btn-premium:hover::before {
transform: translateX(100%); /* ホバー時にシマーが流れる */
}
.luxury-btn-premium:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
}
.luxury-btn-premium:active {
transform: translateY(0);
}
/* ========================================
* 10. タイトル・見出しの統一デザイン
* ========================================
* ゴールドグラデーションテキスト
======================================== */
.luxury-title-premium {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%); /* 3色グラデーション */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.3); /* ゴールドの発光効果 */
margin: 0;
}
/* ========================================
* 11. 入力フィールドの統一デザイン
* ========================================
* フォーム入力要素のプレミアムデザイン
======================================== */
.luxury-input-premium {
width: 100%;
padding: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #fff;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.luxury-input-premium::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.luxury-input-premium:focus {
outline: none;
border-color: rgba(255, 215, 0, 0.5);
background: rgba(255, 255, 255, 0.08);
box-shadow:
0 0 0 3px rgba(255, 215, 0, 0.1),
0 8px 25px rgba(255, 215, 0, 0.1);
}
/* ========================================
* 12. レスポンシブ対応
* ========================================
* モバイル・タブレットでの最適化
======================================== */
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
.luxury-bg-premium {
background-size: 500px 500px, 600px 600px, 800px 800px; /* サイズを少し小さく */
}
.luxury-card-premium {
border-radius: 20px; /* 角丸を少し小さく */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
}
/* モバイル（768px以下） */
@media (max-width: 768px) {
.luxury-bg-premium {
background-size: 400px 400px, 500px 500px, 600px 600px; /* さらに小さく */
}
.luxury-card-premium {
border-radius: 16px; /* 角丸をさらに小さく */
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
padding: 32px 24px;
}
.luxury-title-premium {
font-size: 1.75rem; /* タイトルサイズを調整 */
}
}
/* 小型モバイル（480px以下） */
@media (max-width: 480px) {
.luxury-bg-premium {
background-size: 300px 300px, 400px 400px, 500px 500px;
}
.luxury-card-premium {
border-radius: 12px;
padding: 24px 20px;
}
}
/* ========================================
* 13. ユーティリティクラス
* ========================================
* 便利なヘルパークラス
======================================== */
/* 相対配置コンテナ（グロー配置用） */
.luxury-container-relative {
position: relative;
}
/* グラデーションテキスト（ゴールド） */
.luxury-text-gradient {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ゴールドカラー */
.luxury-color-gold {
color: #FFD700;
}
/* ========================================
* 14. アニメーション制御
* ========================================
* パフォーマンス最適化のための制御
======================================== */
/* アニメーションを無効化するユーザー設定に対応 */
@media (prefers-reduced-motion: reduce) {
.luxury-bg-premium,
.luxury-glow-premium,
.luxury-card-premium {
animation: none;
}
.luxury-btn-premium::before {
transition: none;
}
}
/* ========================================
* 15. ブラウザ互換性対応
* ========================================
* 古いブラウザでのフォールバック
======================================== */
/* backdrop-filter非対応ブラウザ用フォールバック */
@supports not (backdrop-filter: blur(25px)) {
.luxury-card-premium,
.luxury-card-premium-medium {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.10) 100%); /* 透明度を少し上げる */
}
.sidebar-premium {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
}
}