/** * TripLogue 共通テーマ CSS * 2026-07-31 追加: UI アップグレード Step 1（ハイブリッド：上質な余白 + 本のような佇まいの一部要素） * * 使い方：各 HTML の 内に以下を追加 * * これにより CSS 変数と共通スタイルが利用可能になります。 * * 既存の色指定（#4a9d8a / #2a3d3e など）は徐々に var(--primary) 等に置換していく方針。 * 破壊的変更はせず、CSS 変数として「利用できる状態」を先に整えます。 */ :root { /* === カラーパレット（既存の基本色を CSS 変数化） === */ --primary: #4a9d8a; /* メインティール（既存） */ --primary-dark: #3a7d6d; /* ダークティール（既存） */ --primary-rgb: 74, 157, 138; --text-charcoal: #2a3d3e; /* チャコール（既存） */ --text-body: #333333; /* 本文（既存） */ --text-muted: rgba(40, 50, 50, 0.55); /* 抑制テキスト */ --bg-offwhite: #f5f5f2; /* オフホワイト（既存） */ --bg-cream: #faf7f0; /* クリーム（新設・ページめくり時の紙質） */ --border-soft: rgba(120, 130, 130, 0.25); /* === 新設：アンティークゴールド系（アクセント） === */ --accent-gold: #b8956a; /* アンティークゴールド（新設） */ --accent-gold-light: #d4b48f; /* ライトゴールド（区切り線・微細装飾） */ --accent-gold-dark: #8f7150; /* ダークゴールド（テキスト強調） */ /* === タイポグラフィ === */ --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS Mincho", serif; --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", sans-serif; --font-serif-en: "Georgia", "Times New Roman", serif; /* 英字用のセリフ */ /* === 余白（Phase 1 で 1.5 倍に拡張） === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; /* 上質な余白：既存の 24px→40px */ --space-xxl: 64px; /* セクション間の呼吸 */ /* === ラウンド === */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* === トランジション（穏やかで上品） === */ --transition-smooth: 0.35s cubic-bezier(0.4, 0.0, 0.2, 1); --transition-slow: 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); /* === シャドウ（控えめで柔らか） === */ --shadow-soft: 0 2px 12px rgba(42, 61, 62, 0.06); --shadow-elevated: 0 6px 28px rgba(42, 61, 62, 0.10); } /* === 共通ユーティリティクラス（希望する画面で使う） === */ /* 見出しに明朝体の上質感を（既存の見出しに .heading-mincho を付ければ変わる） */ .heading-mincho { font-family: var(--font-mincho); font-weight: 500; letter-spacing: 0.05em; line-height: 1.4; } /* アンティークゴールドの区切り線（セクション見出しの下などに） */ .divider-gold { height: 1px; background: linear-gradient( to right, transparent 0%, var(--accent-gold-light) 20%, var(--accent-gold-light) 80%, transparent 100% ); margin: var(--space-lg) auto; max-width: 200px; } /* 上質なアンカーホバー（下線が左から右に伸びる） */ .link-elegant { position: relative; color: var(--primary-dark); text-decoration: none; display: inline-block; } .link-elegant::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--accent-gold); transition: width var(--transition-smooth); } .link-elegant:hover::after { width: 100%; } /* CTA ボタン用のゴールドアクセント（重要な CTA だけに） */ .btn-gold-accent { position: relative; overflow: hidden; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); } .btn-gold-accent::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(184, 149, 106, 0.15) 50%, transparent 70% ); transform: translateX(-100%); transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); } .btn-gold-accent:hover::before { transform: translateX(100%); } .btn-gold-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-elevated); } /* 上質な引用ブロック（旅の詩やメッセージ用） */ .quote-elegant { font-family: var(--font-mincho); font-size: 15px; line-height: 1.9; color: var(--text-charcoal); padding: var(--space-xl) var(--space-lg); background: var(--bg-cream); border-left: 2px solid var(--accent-gold); position: relative; } .quote-elegant::before { content: '"'; font-family: var(--font-serif-en); font-size: 48px; color: var(--accent-gold-light); position: absolute; top: 8px; left: 16px; line-height: 1; opacity: 0.6; } /* 記念日バッジ（新機能 D 用の準備） */ .anniversary-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--accent-gold); color: white; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; border-radius: 12px; font-family: var(--font-sans); } .anniversary-badge::before { content: '✦'; font-size: 10px; } /* 本の栞ひも風の装飾（フォトブック・しおり表紙用） */ .book-ribbon { position: absolute; top: 0; right: 32px; width: 20px; height: 60px; background: var(--accent-gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); opacity: 0.85; pointer-events: none; } /* ページめくり時のフェード（既存の bookOpenOverlay と併用可） */ .fade-in-elegant { animation: fadeInElegant var(--transition-slow) both; } @keyframes fadeInElegant { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* === タブレット・スマホ調整（余白は少し詰める） === */ @media (max-width: 600px) { :root { --space-xl: 28px; --space-xxl: 44px; } }