main
1/* Reset and Base Styles */
2* {
3 box-sizing: border-box;
4 margin: 0;
5 padding: 0;
6}
7
8body {
9 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
10 line-height: 1.6;
11 color: #333;
12 background-color: #f8f9fa;
13}
14
15.container {
16 max-width: 800px;
17 margin: 0 auto;
18 padding: 0 20px;
19}
20
21/* Header Styles */
22header {
23 background-color: #fff;
24 border-bottom: 1px solid #e9ecef;
25 padding: 1rem 0;
26}
27
28.header-content {
29 display: flex;
30 justify-content: space-between;
31 align-items: center;
32}
33
34.logo {
35 font-size: 1.5rem;
36 font-weight: 600;
37 color: #2c3e50;
38 text-decoration: none;
39}
40
41nav a {
42 text-decoration: none;
43 color: #6c757d;
44 margin-left: 1.5rem;
45 font-weight: 500;
46}
47
48nav a:hover {
49 color: #2c3e50;
50}
51
52/* Main Content */
53main {
54 padding: 2rem 0;
55 min-height: calc(100vh - 160px);
56}
57
58/* Footer */
59footer {
60 background-color: #fff;
61 border-top: 1px solid #e9ecef;
62 padding: 1.5rem 0;
63 margin-top: 2rem;
64 color: #6c757d;
65 font-size: 0.9rem;
66}
67
68.footer-content {
69 text-align: center;
70}
71
72.tagline {
73 font-style: italic;
74 margin-top: 0.5rem;
75}
76
77/* Home Page Styles */
78.hero {
79 text-align: center;
80 padding: 3rem 0;
81}
82
83.hero h1 {
84 font-size: 2.5rem;
85 font-weight: 700;
86 color: #2c3e50;
87 margin-bottom: 1rem;
88}
89
90.hero-subtitle {
91 font-size: 1.2rem;
92 color: #6c757d;
93 margin-bottom: 2rem;
94 max-width: 600px;
95 margin-left: auto;
96 margin-right: auto;
97}
98
99.cta-section {
100 margin: 2rem 0;
101}
102
103.cta-button {
104 display: inline-block;
105 background-color: #2c3e50;
106 color: white;
107 padding: 1rem 2rem;
108 text-decoration: none;
109 border-radius: 8px;
110 font-weight: 600;
111 font-size: 1.1rem;
112 transition: background-color 0.2s;
113}
114
115.cta-button:hover {
116 background-color: #34495e;
117}
118
119.cta-description {
120 margin-top: 0.5rem;
121 color: #6c757d;
122 font-size: 0.9rem;
123}
124
125.features {
126 margin: 4rem 0;
127}
128
129.feature-grid {
130 display: grid;
131 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
132 gap: 2rem;
133 margin-top: 2rem;
134}
135
136.feature {
137 background: white;
138 padding: 1.5rem;
139 border-radius: 8px;
140 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
141}
142
143.feature h3 {
144 color: #2c3e50;
145 margin-bottom: 0.5rem;
146}
147
148.philosophy {
149 background: white;
150 padding: 2rem;
151 border-radius: 8px;
152 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
153 margin: 3rem 0;
154}
155
156.philosophy h2 {
157 color: #2c3e50;
158 margin-bottom: 1rem;
159}
160
161.philosophy p {
162 margin-bottom: 1.5rem;
163 line-height: 1.7;
164}
165
166.philosophy blockquote {
167 font-style: italic;
168 font-size: 1.1rem;
169 color: #6c757d;
170 border-left: 4px solid #2c3e50;
171 padding-left: 1rem;
172 margin: 1rem 0;
173}
174
175/* Submit Page Styles */
176.submit-page {
177 max-width: 600px;
178 margin: 0 auto;
179}
180
181.submit-header {
182 text-align: center;
183 margin-bottom: 3rem;
184}
185
186.submit-header h1 {
187 color: #2c3e50;
188 margin-bottom: 0.5rem;
189}
190
191.submit-header p {
192 color: #6c757d;
193 font-size: 1.1rem;
194}
195
196.submit-form-container {
197 display: grid;
198 gap: 3rem;
199}
200
201.submit-form {
202 background: white;
203 padding: 2rem;
204 border-radius: 8px;
205 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
206}
207
208.form-group {
209 margin-bottom: 1.5rem;
210}
211
212.form-group label {
213 display: block;
214 font-weight: 600;
215 color: #2c3e50;
216 margin-bottom: 0.5rem;
217}
218
219.form-group input,
220.form-group select {
221 width: 100%;
222 padding: 0.75rem;
223 border: 2px solid #e9ecef;
224 border-radius: 4px;
225 font-size: 1rem;
226 transition: border-color 0.2s;
227}
228
229.form-group input:focus,
230.form-group select:focus {
231 outline: none;
232 border-color: #2c3e50;
233}
234
235.form-group small {
236 display: block;
237 margin-top: 0.25rem;
238 color: #6c757d;
239 font-size: 0.9rem;
240}
241
242.submit-button {
243 width: 100%;
244 background-color: #2c3e50;
245 color: white;
246 padding: 1rem 2rem;
247 border: none;
248 border-radius: 8px;
249 font-weight: 600;
250 font-size: 1.1rem;
251 cursor: pointer;
252 transition: background-color 0.2s;
253}
254
255.submit-button:hover {
256 background-color: #34495e;
257}
258
259.submit-info {
260 background: white;
261 padding: 2rem;
262 border-radius: 8px;
263 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
264}
265
266.submit-info h3 {
267 color: #2c3e50;
268 margin-bottom: 1rem;
269}
270
271.submit-info ol {
272 padding-left: 1.2rem;
273}
274
275.submit-info li {
276 margin-bottom: 0.5rem;
277 line-height: 1.6;
278}
279
280/* Responsive Design */
281@media (max-width: 768px) {
282 .container {
283 padding: 0 15px;
284 }
285
286 .header-content {
287 flex-direction: column;
288 gap: 1rem;
289 }
290
291 nav a {
292 margin-left: 1rem;
293 margin-right: 1rem;
294 }
295
296 .hero h1 {
297 font-size: 2rem;
298 }
299
300 .hero-subtitle {
301 font-size: 1.1rem;
302 }
303
304 .feature-grid {
305 grid-template-columns: 1fr;
306 gap: 1rem;
307 }
308
309 .philosophy {
310 padding: 1.5rem;
311 }
312
313 .submit-form,
314 .submit-info {
315 padding: 1.5rem;
316 }
317
318 .submit-form-container {
319 gap: 2rem;
320 }
321}