Delete style.css
Browse files
style.css
DELETED
@@ -1,132 +0,0 @@
|
|
1 |
-
/* style.css */
|
2 |
-
|
3 |
-
:root {
|
4 |
-
--primary-color: #2563eb;
|
5 |
-
--secondary-color: #6b7280;
|
6 |
-
--bg-color: #f9fafb;
|
7 |
-
--text-color: #111827;
|
8 |
-
--border-radius: 0.375rem;
|
9 |
-
--spacing: 1rem;
|
10 |
-
--font-family: 'Inter', sans-serif;
|
11 |
-
}
|
12 |
-
|
13 |
-
*,
|
14 |
-
*::before,
|
15 |
-
*::after {
|
16 |
-
box-sizing: border-box;
|
17 |
-
}
|
18 |
-
|
19 |
-
html {
|
20 |
-
font-size: 100%;
|
21 |
-
scroll-behavior: smooth;
|
22 |
-
}
|
23 |
-
|
24 |
-
body {
|
25 |
-
margin: 0;
|
26 |
-
padding: 0;
|
27 |
-
background-color: var(--bg-color);
|
28 |
-
color: var(--text-color);
|
29 |
-
font-family: var(--font-family);
|
30 |
-
line-height: 1.5;
|
31 |
-
}
|
32 |
-
|
33 |
-
.container {
|
34 |
-
max-width: 800px;
|
35 |
-
margin: 0 auto;
|
36 |
-
padding: var(--spacing);
|
37 |
-
}
|
38 |
-
|
39 |
-
h1 {
|
40 |
-
font-size: 2rem;
|
41 |
-
margin-bottom: calc(var(--spacing) * 1.5);
|
42 |
-
text-align: center;
|
43 |
-
color: var(--primary-color);
|
44 |
-
}
|
45 |
-
|
46 |
-
form {
|
47 |
-
display: flex;
|
48 |
-
flex-direction: column;
|
49 |
-
gap: var(--spacing);
|
50 |
-
margin-bottom: var(--spacing);
|
51 |
-
}
|
52 |
-
|
53 |
-
label {
|
54 |
-
font-weight: 600;
|
55 |
-
margin-bottom: 0.25rem;
|
56 |
-
}
|
57 |
-
|
58 |
-
select,
|
59 |
-
input[type="text"],
|
60 |
-
textarea,
|
61 |
-
button {
|
62 |
-
font-size: 1rem;
|
63 |
-
padding: 0.75rem;
|
64 |
-
border: 1px solid #d1d5db;
|
65 |
-
border-radius: var(--border-radius);
|
66 |
-
width: 100%;
|
67 |
-
}
|
68 |
-
|
69 |
-
select:focus,
|
70 |
-
input:focus,
|
71 |
-
textarea:focus {
|
72 |
-
outline: 2px solid var(--primary-color);
|
73 |
-
border-color: var(--primary-color);
|
74 |
-
}
|
75 |
-
|
76 |
-
button {
|
77 |
-
background-color: var(--primary-color);
|
78 |
-
color: #ffffff;
|
79 |
-
border: none;
|
80 |
-
cursor: pointer;
|
81 |
-
transition: background-color 0.2s ease;
|
82 |
-
}
|
83 |
-
|
84 |
-
button:disabled {
|
85 |
-
opacity: 0.6;
|
86 |
-
cursor: not-allowed;
|
87 |
-
}
|
88 |
-
|
89 |
-
button:hover:not(:disabled) {
|
90 |
-
background-color: #1e40af;
|
91 |
-
}
|
92 |
-
|
93 |
-
#result {
|
94 |
-
margin-top: var(--spacing);
|
95 |
-
padding: var(--spacing);
|
96 |
-
background-color: #ffffff;
|
97 |
-
border: 1px solid #e5e7eb;
|
98 |
-
border-radius: var(--border-radius);
|
99 |
-
min-height: 3rem;
|
100 |
-
}
|
101 |
-
|
102 |
-
@media (min-width: 640px) {
|
103 |
-
form {
|
104 |
-
flex-direction: row;
|
105 |
-
align-items: flex-end;
|
106 |
-
}
|
107 |
-
form > div {
|
108 |
-
flex: 1;
|
109 |
-
}
|
110 |
-
form > button {
|
111 |
-
width: auto;
|
112 |
-
flex-shrink: 0;
|
113 |
-
}
|
114 |
-
}
|
115 |
-
|
116 |
-
/* Accessibility: High contrast for code labels */
|
117 |
-
#result[role="alert"] {
|
118 |
-
border-left: 4px solid var(--primary-color);
|
119 |
-
}
|
120 |
-
|
121 |
-
/* Visually hidden for screen reader announcements */
|
122 |
-
.sr-only {
|
123 |
-
position: absolute;
|
124 |
-
width: 1px;
|
125 |
-
height: 1px;
|
126 |
-
padding: 0;
|
127 |
-
margin: -1px;
|
128 |
-
overflow: hidden;
|
129 |
-
clip: rect(0,0,0,0);
|
130 |
-
white-space: nowrap;
|
131 |
-
border: 0;
|
132 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|