@@ -11,57 +11,117 @@ body {
1111}
1212
1313body {
14- font-family : system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI" , sans-serif;
14+ padding : 10px 15px ;
15+ min-height : 99% ;
16+ width : min (1000px , 95vw );
17+ margin : 0 auto;
18+ color : # ecdcf9 ;
19+ background : # 241634 ;
20+ font-family : cursor, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono" , "Courier New" ,
21+ monospace;
1522 line-height : 1.5 ;
16- color : # 111827 ;
17- background : # 0f172a ;
23+ overflow-x : hidden ;
24+ font-size : min ( 18 px , calc ( 1.1 vw + 7 px )) ;
1825}
1926
2027.page {
2128 max-width : 960px ;
2229 margin : 0 auto;
23- padding : 24px 16px 40px ;
30+ padding : 18px 16px 32px ;
31+ border-radius : 10px ;
32+ background : # 1a1027 ;
33+ border : 1px solid rgba (201 , 146 , 246 , 0.35 );
34+ box-shadow : 0 18px 40px rgba (0 , 0 , 0 , 0.7 );
2435}
2536
2637.page-header {
2738 margin-bottom : 24px ;
28- color : # e5e7eb ;
39+ color : # ecdcf9 ;
40+ }
41+
42+ .page-header-links {
43+ margin-top : 12px ;
44+ display : flex;
45+ flex-wrap : wrap;
46+ gap : 8px ;
2947}
3048
3149.page-header h1 {
32- margin : 0 0 8px ;
33- font-size : 1.8rem ;
50+ margin : 0 0 6px ;
51+ font-size : 1.6rem ;
52+ color : # ecdcf9 ;
53+ }
54+
55+ .page-header h1 ::before {
56+ content : "$ " ;
57+ color : # c992f6 ;
3458}
3559
3660.page-header p {
3761 margin : 0 ;
3862 max-width : 640px ;
39- color : # d1d5db ;
63+ color : # d9c8ff ;
64+ }
65+
66+ .header-link-code {
67+ display : inline-flex;
68+ align-items : center;
69+ gap : 6px ;
70+ padding : 4px 10px ;
71+ border-radius : 6px ;
72+ font-family : ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono" , "Courier New" ,
73+ monospace;
74+ font-size : 0.8rem ;
75+ text-decoration : none;
76+ color : # e7d0ff ;
77+ background : # 241634 ;
78+ border : 1px solid rgba (201 , 146 , 246 , 0.6 );
79+ transition : background 0.15s ease, border-color 0.15s ease, transform 0.05s ease,
80+ box-shadow 0.15s ease;
81+ }
82+
83+ .header-link-code : hover {
84+ background : # 2b183f ;
85+ border-color : # c992f6 ;
86+ box-shadow : 0 8px 18px rgba (0 , 0 , 0 , 0.85 );
87+ transform : translateY (-1px );
88+ }
89+
90+ .header-link-prefix {
91+ color : # 8ae9c1 ;
92+ }
93+
94+ .header-link-command {
95+ color : # e5e7eb ;
96+ }
97+
98+ .header-link-label {
99+ color : # 93c5fd ;
40100}
41101
42102.card {
43- background : # 020617 ;
44- border-radius : 12 px ;
45- padding : 20 px 18px ;
46- margin-bottom : 18 px ;
47- box-shadow : 0 16 px 30 px rgba (15 , 23 , 42 , 0.6 );
48- border : 1px solid rgba (148 , 163 , 184 , 0.25 );
103+ background : # 140b21 ;
104+ border-radius : 8 px ;
105+ padding : 18px 16 px ;
106+ margin-bottom : 16 px ;
107+ box-shadow : 0 12 px 24 px rgba (0 , 0 , 0 , 0.8 );
108+ border : 1px solid rgba (201 , 146 , 246 , 0.35 );
49109}
50110
51111.card h2 {
52112 margin-top : 0 ;
53113 margin-bottom : 12px ;
54114 font-size : 1.25rem ;
55- color : # e5e7eb ;
115+ color : # e7d0ff ;
56116}
57117
58118.card p ,
59119.card li {
60- color : # cbd5f5 ;
120+ color : # ecdcf9 ;
61121}
62122
63123.form-section {
64- border-top : 1px solid rgba (148 , 163 , 184 , 0.25 );
124+ border-top : 1px solid rgba (201 , 146 , 246 , 0.3 );
65125 padding-top : 14px ;
66126 margin-top : 14px ;
67127}
@@ -86,23 +146,23 @@ body {
86146.field-row label {
87147 font-size : 0.85rem ;
88148 margin-bottom : 4px ;
89- color : # 9ca3af ;
149+ color : # d3b9ff ;
90150}
91151
92152.field-row input ,
93153.field-row textarea ,
94154.field-row select {
95155 border-radius : 8px ;
96- border : 1px solid rgba (148 , 163 , 184 , 0.6 );
156+ border : 1px solid rgba (201 , 146 , 246 , 0.55 );
97157 padding : 8px 10px ;
98158 font-size : 0.95rem ;
99- background : # 020617 ;
100- color : # e5e7eb ;
159+ background : # 241634 ;
160+ color : # ecdcf9 ;
101161}
102162
103163.field-row input ::placeholder ,
104164.field-row textarea ::placeholder {
105- color : # 6b7280 ;
165+ color : # 8b6fae ;
106166}
107167
108168.field-row textarea {
@@ -115,10 +175,10 @@ body {
115175 font-size : 0.75rem ;
116176 line-height : 1.2 ;
117177 padding : 12px ;
118- background : rgba ( 15 , 23 , 42 , 0.6 ) ;
178+ background : # 241634 ;
119179 border-radius : 8px ;
120- border : 1px solid rgba (148 , 163 , 184 , 0.3 );
121- color : # 94a3b8 ;
180+ border : 1px solid rgba (201 , 146 , 246 , 0.5 );
181+ color : # e7d0ff ;
122182 margin : 0 ;
123183 overflow-x : auto;
124184 white-space : pre;
@@ -155,20 +215,20 @@ body {
155215}
156216
157217# generateBtn {
158- background : linear-gradient ( 135 deg , # 4f46e5 , # 06b6d4 ) ;
159- color : white ;
160- box-shadow : 0 10px 20px rgba (59 , 130 , 246 , 0.4 );
218+ background : # c992f6 ;
219+ color : # 241634 ;
220+ box-shadow : 0 10px 20px rgba (0 , 0 , 0 , 0.7 );
161221}
162222
163223# generateBtn : hover {
164- box-shadow : 0 12px 26px rgba (59 , 130 , 246 , 0.5 );
224+ box-shadow : 0 12px 26px rgba (0 , 0 , 0 , 0.9 );
165225 transform : translateY (-1px );
166226}
167227
168228# downloadBtn {
169229 background : transparent;
170- color : # e5e7eb ;
171- border : 1px solid rgba (148 , 163 , 184 , 0.7 );
230+ color : # e7d0ff ;
231+ border : 1px solid rgba (201 , 146 , 246 , 0.7 );
172232}
173233
174234# downloadBtn : disabled {
@@ -179,20 +239,20 @@ body {
179239.output {
180240 width : 100% ;
181241 border-radius : 10px ;
182- border : 1px solid rgba (148 , 163 , 184 , 0.6 );
242+ border : 1px solid rgba (201 , 146 , 246 , 0.6 );
183243 padding : 10px ;
184244 font-family : ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono" , "Courier New" , monospace;
185245 font-size : 0.85rem ;
186- background : # 020617 ;
187- color : # e5e7eb ;
246+ background : # 241634 ;
247+ color : # ecdcf9 ;
188248}
189249
190250ol {
191251 padding-left : 20px ;
192252}
193253
194254code {
195- background : rgba ( 15 , 23 , 42 , 0.8 ) ;
255+ background : # 241634 ;
196256 padding : 2px 4px ;
197257 border-radius : 4px ;
198258 font-size : 0.85em ;
@@ -203,7 +263,7 @@ code {
203263 top : 8px ;
204264 right : 14px ;
205265 font-size : 12px ;
206- color : # 94a3b8 ;
266+ color : # e7d0ff ;
207267 opacity : 0.8 ;
208268 pointer-events : none;
209269}
0 commit comments