<スタイル> /* ========================================= 1. 全局背景与基础設定 (Dark & Kawaii) ========================================= */ .アンバサダーページ { 背景色: #0d0c0c; 色: #d4d4d4; フォントファミリー: 'Inter'、'Helvetica Neue'、Helvetica、Arial、サンセリフ; パディング: 80 ピクセル 20 ピクセル; 行の高さ: 1.6; ボックスのサイズ設定: ボーダーボックス; } .ambassador-container { max-width: 1050px; margin: 0 auto; } /* ========================================= 2. ヘッドセクション (Hero Section) ========================================== */ .ambassador-hero { text-align: center; margin-bottom: 80px; } .ambassador-hero h1 { color: #ffffff; font-size: 3.5rem; font-weight: 800; letter-spacing: 2px; テキスト変換: 大文字; マージン-ボトム: 24px; テキストシャドウ: 0 10px 40px rgba(255, 182, 193, 0.15); /* 淡淡の粉色発光 */ } .アンバサダーヒーローp { 色: #888888; フォントサイズ: 1.15rem; 最大幅: 680ピクセル; マージン: 0 自動; 行の高さ: 1.8; フォントの太さ: 300; } /* ========================================= 3. 核心網格布局と高級卡片 ========================================= */ .grid-2 { 表示: グリッド; グリッド テンプレート列:repeat(2, 1fr); ギャップ: 32px; マージン-ボトム: 32px; } /* 顶级感卡片：边缘高光 + 极细透明边框 */ .ダークカード { 背景: 線形グラデーション(180度、rgba(22、21、21、0.8) 0%、rgba(13、12、12、0.9) 100%); ボーダー: 1px ソリッド rgba(255, 255, 255, 0.04); ボーダートップ: 1px ソリッド rgba(255, 255, 255, 0.12); ボックスシャドウ: 0 20px 50px rgba(0,0,0,0.5); パディング: 45 ピクセル 45 ピクセル; 境界半径: 20px; 遷移: すべて 0.5 秒の 3 次ベジェ (0.165, 0.84, 0.44, 1); 位置: 相対的; } .dark-card:hover { 境界線の色: rgba(255, 182, 193, 0.15); /* 悬停止時間边框透出一点粉色 */ ボーダートップ: 1px ソリッド rgba(255, 182, 193, 0.3); 変換：translateY(-8px); ボックスシャドウ: 0 30px 60px rgba(0,0,0,0.7)、0 0 40px rgba(255,182,193,0.03) インセット; } /* ========================================= ✨ 可爱元素设计 (かわいいアイコンと箇条書き) ========================================= */ .cute-icon { 表示: インラインブロック; マージン右: 12px; フォントサイズ: 1.6rem; トランジション: すべて 0.4 秒の 3 次ベジェ (0.175、0.885、0.32、1.275); /* 软萌的弹性アニメーション画 */ } /* 鼠标悬停止卡片時，小图标会放大并轻轻歪头，并散播粉色光晕 */ .dark-card:hover .cute-icon、.apply-section:hover .cute-icon { 変換: スケール(1.15) 回転(-8度); フィルター: ドロップシャドウ(0 0 10px rgba(255, 182, 193, 0.6)); } .dark-card h3 { ディスプレイ: フレックス; 整列項目: 中央; 色: #ffffff; フォントサイズ: 1.4rem; マージントップ: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 15px; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; } /* 動漫風星芒リスト */ .dark-card ul { list-style: none; padding: 0; margin: 0; } .dark-card ul li { position: relative; padding-left: 28px; margin-bottom: 18px; color: #999999; font-size: 1.05rem; line-height: 1.6; transition: color 0.3s ease; } .dark-card:hover ul li { color: #cccccc; } /* 用 ✧ 代替原来のポイント */ .dark-card ul li::before { 内容: '✧'; 位置: 絶対; 左: 0; トップ: 0; カラー:#555; フォントサイズ: 1.2rem; トランジション: すべて 0.4 秒の緩和。 } .dark-card:hover ul li::before { 色: #ffb6c1; /* 悬停止時星芒变成樱花粉 */ テキストシャドウ: 0 0 8px rgba(255, 182, 193, 0.5); } /* ========================================= 4. 底部申請区块 (申請セクション) ========================================= */ .apply-section { 背景: 線形グラデーション(180度、#111010 0%、#050505 100%); ボーダー: 1px ソリッド rgba(255, 255, 255, 0.03); ボーダートップ: 1px ソリッド rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px rgba(0,0,0,0.8); padding: 80px 20px; text-align: center; border-radius: 20px; margin-top: 60px; transition: all 0.4s ease; } .apply-section h2 { display: flex; justify-content: center; align-items: center; color: #ffffff; font-size: 2.2rem; margin-top: 0; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; } .apply-section p { color: #777777; margin-bottom: 45px; font-weight: 300; } /* 邮箱要求展示框 - 细腻の溝感 */ .メールボックス { 背景: rgba(0, 0, 0, 0.4); パディング: 35 ピクセル 45 ピクセル; マージン: 0 自動 45px 自動; 最大幅: 500ピクセル; ボーダー: 1px ソリッド rgba(255,255,255,0.03); 境界半径: 16px; テキスト整列: 左; ボックスシャドウ: インセット 0 4px 20px rgba(0,0,0,0.6); } .email-box ul { list-style-type: none;パディング: 0;マージン: 0; } .email-box li { ディスプレイ: フレックス; 整列項目: 中央; margin-bottom: 18px; color: #b3b3b3; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); padding-bottom: 18px; } .email-box li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } /* ファンカラーシステム 番号変更 */ .step-num { color: #ffb6c1; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; margin-right: 18px; font-weight: bold; background: rgba(255, 182, 193, 0.1); padding: 4px 8px; border-radius: 6px; } /* ========================================= 5. メール直显按钮 (Email Display Button) ========================================== */ .btn-wrapper { display: inline-flex; flex-direction: column; align-items: center; } .apply-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 12px; background-color: #ffffff !important; color: #000000 !important; text-decoration: none !important; padding: 20px 45px; font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; border-radius: 50px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 10px 30px rgba(255,255,255,0.1); } .apply-btn:hover { background-color: #ffb6c1 !important; /* 悬停止变成可爱的初恋粉 */ 変換：translateY(-4px); ボックスシャドウ: 0 15px 40px rgba(255,182,193,0.3); } .btn-ヒント { マージントップ: 15px !重要; フォントサイズ: 0.85rem; 色: #666 !重要; 文字間隔: 1px; テキスト変換: 大文字; } .outro-text { テキスト整列: 中央; 色: #b3b3b3; マージントップ: 50px; フォントサイズ: 0.9rem; 行の高さ: 1.8; } /* ========================================= 6. 📱ハンド机端深度适配 ========================================= */ @media (最大幅: 768px) { .ambassador-page { パディング: 40px 15px; } .ambassador-hero { margin-bottom: 50px; } .アンバサダーヒーロー h1 { フォントサイズ: 2.2rem; 文字間隔: 1px; } .grid-2 { グリッド テンプレート列: 1fr; ギャップ: 24px; } .dark-card { padding: 35px 25px; } .dark-card h3 { font-size: 1.25rem; } .apply-section { padding: 50px 20px; margin-top: 40px; } .apply-section h2 { font-size: 1.8rem; } .email-box { padding: 30px 20px; } .apply-btn { width: 100%; box-sizing: border-box; padding: 16px 15px; font-size: 1rem; } }