styles.css (3134B)
1 @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Playfair+Display:ital@0;1&display=swap"); 2 3 :root { 4 --trinity-navy: #1a2e56; 5 --trinity-gold: #b89a5b; 6 --bg-color: #f8f9fa; 7 --panel-white: #ffffff; 8 --text-main: #1a2e56; 9 --text-sub: #445; 10 --border-color: #ddd; 11 } 12 13 [data-theme="dark"] { 14 --bg-color: #0d1626; 15 --panel-white: #16243d; 16 --text-main: #e2e8f0; 17 --text-sub: #94a3b8; 18 --border-color: #2d3748; 19 } 20 21 body { 22 margin: 0; 23 padding: 0; 24 font-family: "Noto Serif JP", serif; 25 background-color: var(--bg-color); 26 color: var(--text-main); 27 line-height: 1.6; 28 transition: 29 background-color 0.3s, 30 color 0.3s; 31 } 32 33 header { 34 background-color: var(--trinity-navy); 35 color: white; 36 padding: 1rem 2rem; 37 font-family: "Playfair Display", serif; 38 font-style: italic; 39 font-size: 1.5rem; 40 letter-spacing: 0.1em; 41 border-bottom: 3px solid var(--trinity-gold); 42 display: flex; 43 justify-content: space-between; 44 align-items: center; 45 } 46 47 .theme-toggle { 48 cursor: pointer; 49 background: transparent; 50 border: 1px solid rgba(255, 255, 255, 0.4); 51 color: white; 52 font-size: 0.7rem; 53 padding: 4px 12px; 54 border-radius: 2px; 55 letter-spacing: 0.1em; 56 transition: 0.2s; 57 } 58 .theme-toggle:hover { 59 background: rgba(255, 255, 255, 0.1); 60 } 61 62 nav { 63 background: var(--panel-white); 64 padding: 0 2rem; 65 border-bottom: 1px solid var(--border-color); 66 display: flex; 67 gap: 2rem; 68 transition: 69 background-color 0.3s, 70 border-color 0.3s; 71 } 72 73 nav a { 74 text-decoration: none; 75 color: var(--text-main); 76 font-size: 0.9rem; 77 padding: 1rem 0; 78 border-bottom: 2px solid transparent; 79 transition: 0.3s; 80 cursor: pointer; 81 } 82 83 nav a:hover { 84 color: var(--trinity-gold); 85 } 86 87 main { 88 max-width: 800px; 89 margin: 3rem auto; 90 padding: 3rem; 91 background: var(--panel-white); 92 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 93 border-radius: 2px; 94 position: relative; 95 transition: background-color 0.3s; 96 } 97 98 main::before { 99 content: ""; 100 position: absolute; 101 top: 0; 102 left: 0; 103 width: 100%; 104 height: 4px; 105 background: repeating-linear-gradient( 106 90deg, 107 var(--trinity-gold), 108 var(--trinity-gold) 10px, 109 transparent 10px, 110 transparent 20px 111 ); 112 opacity: 0.3; 113 } 114 115 h1 { 116 font-size: 1.8rem; 117 font-weight: 700; 118 border-bottom: 1px solid var(--border-color); 119 padding-bottom: 1rem; 120 margin-bottom: 2rem; 121 display: flex; 122 align-items: center; 123 gap: 1rem; 124 } 125 126 h1::before { 127 content: "■"; 128 font-size: 0.8rem; 129 color: var(--trinity-gold); 130 } 131 132 p { 133 font-size: 1.1rem; 134 color: var(--text-sub); 135 } 136 137 footer { 138 max-width: 800px; 139 margin: 2rem auto; 140 padding: 1rem; 141 font-size: 0.75rem; 142 color: var(--text-sub); 143 text-align: center; 144 border-top: 1px solid var(--border-color); 145 opacity: 0.7; 146 } 147 148 .doc-id { 149 position: absolute; 150 top: 1rem; 151 right: 1rem; 152 font-family: monospace; 153 font-size: 0.7rem; 154 opacity: 0.4; 155 }