Hugging Face's logo

Spaces:
ameenmarashi
/
SystemRx
Running

App Files Community
ameenmarashi commited on
Commit
4d8e36b
·
verified ·
1 Parent(s): 9213715

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +214 -16
style.css CHANGED
@@ -1,28 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --bg: #eef5ff;
3
+ --panel: rgba(255, 255, 255, 0.9);
4
+ --panel-border: rgba(150, 176, 208, 0.28);
5
+ --text: #13233d;
6
+ --muted: #59708f;
7
+ --accent: #0fcfa7;
8
+ --accent-strong: #09b893;
9
+ --shadow: 0 24px 60px rgba(19, 35, 61, 0.12);
10
+ }
11
+
12
+ * {
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ html {
17
+ scroll-behavior: smooth;
18
+ }
19
+
20
  body {
21
+ margin: 0;
22
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
23
+ color: var(--text);
24
+ background:
25
+ radial-gradient(circle at top left, rgba(15, 207, 167, 0.18), transparent 28%),
26
+ radial-gradient(circle at top right, rgba(79, 140, 255, 0.16), transparent 22%),
27
+ linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
28
+ }
29
+
30
+ a {
31
+ color: inherit;
32
+ }
33
+
34
+ .shell {
35
+ width: min(1080px, calc(100vw - 40px));
36
+ margin: 0 auto;
37
+ padding: 24px 0 48px;
38
+ }
39
+
40
+ .nav {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: space-between;
44
+ gap: 18px;
45
+ padding: 14px 18px;
46
+ border: 1px solid var(--panel-border);
47
+ background: var(--panel);
48
+ border-radius: 22px;
49
+ backdrop-filter: blur(14px);
50
+ box-shadow: var(--shadow);
51
+ }
52
+
53
+ .brand {
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: 4px;
57
+ }
58
+
59
+ .brand strong {
60
+ font-size: 1.15rem;
61
+ }
62
+
63
+ .brand span,
64
+ .nav-links a,
65
+ .muted,
66
+ .footer {
67
+ color: var(--muted);
68
+ }
69
+
70
+ .nav-links {
71
+ display: flex;
72
+ flex-wrap: wrap;
73
+ gap: 16px;
74
+ font-size: 0.95rem;
75
+ }
76
+
77
+ .hero,
78
+ .section,
79
+ .footer {
80
+ margin-top: 22px;
81
+ border: 1px solid var(--panel-border);
82
+ background: var(--panel);
83
+ border-radius: 30px;
84
+ box-shadow: var(--shadow);
85
+ }
86
+
87
+ .hero {
88
+ padding: 52px 40px;
89
+ }
90
+
91
+ .section {
92
+ padding: 30px 28px;
93
+ }
94
+
95
+ .eyebrow {
96
+ display: inline-flex;
97
+ align-items: center;
98
+ gap: 8px;
99
+ padding: 8px 12px;
100
+ border-radius: 999px;
101
+ font-size: 0.85rem;
102
+ font-weight: 700;
103
+ letter-spacing: 0.04em;
104
+ text-transform: uppercase;
105
+ color: var(--accent-strong);
106
+ background: rgba(15, 207, 167, 0.12);
107
  }
108
 
109
  h1 {
110
+ margin: 18px 0 12px;
111
+ font-size: clamp(2.4rem, 5vw, 4.4rem);
112
+ line-height: 0.98;
113
+ }
114
+
115
+ h2 {
116
+ margin: 0 0 14px;
117
+ font-size: clamp(1.4rem, 2vw, 2rem);
118
+ }
119
+
120
+ h3 {
121
+ margin: 0 0 10px;
122
+ font-size: 1.05rem;
123
+ }
124
+
125
+ p,
126
+ li {
127
+ font-size: 1rem;
128
+ line-height: 1.7;
129
  }
130
 
131
+ .lead {
132
+ max-width: 720px;
133
+ font-size: 1.08rem;
134
+ color: var(--muted);
135
+ }
136
+
137
+ .cta-row {
138
+ display: flex;
139
+ flex-wrap: wrap;
140
+ gap: 14px;
141
+ margin-top: 26px;
142
+ }
143
+
144
+ .button {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ min-height: 50px;
149
+ padding: 0 20px;
150
+ border-radius: 999px;
151
+ border: 1px solid transparent;
152
+ text-decoration: none;
153
+ font-weight: 700;
154
+ }
155
+
156
+ .button.primary {
157
+ color: #06241f;
158
+ background: linear-gradient(135deg, var(--accent) 0%, #6ef0d1 100%);
159
+ }
160
+
161
+ .button.secondary {
162
+ border-color: var(--panel-border);
163
+ background: rgba(255, 255, 255, 0.65);
164
+ }
165
+
166
+ .grid {
167
+ display: grid;
168
+ grid-template-columns: repeat(2, minmax(0, 1fr));
169
+ gap: 18px;
170
  }
171
 
172
  .card {
173
+ padding: 20px;
174
+ border-radius: 24px;
175
+ background: rgba(255, 255, 255, 0.8);
176
+ border: 1px solid rgba(150, 176, 208, 0.22);
177
+ }
178
+
179
+ .list {
180
+ margin: 0;
181
+ padding-left: 20px;
182
+ }
183
+
184
+ .meta {
185
+ display: flex;
186
+ flex-wrap: wrap;
187
+ gap: 18px;
188
+ color: var(--muted);
189
+ font-size: 0.95rem;
190
  }
191
 
192
+ .footer {
193
+ padding: 20px 24px;
194
+ font-size: 0.95rem;
195
  }
196
+
197
+ @media (max-width: 820px) {
198
+ .shell {
199
+ width: min(100vw - 24px, 1080px);
200
+ padding-top: 12px;
201
+ }
202
+
203
+ .nav,
204
+ .hero,
205
+ .section,
206
+ .footer {
207
+ border-radius: 24px;
208
+ }
209
+
210
+ .hero {
211
+ padding: 34px 22px;
212
+ }
213
+
214
+ .section {
215
+ padding: 24px 20px;
216
+ }
217
+
218
+ .grid {
219
+ grid-template-columns: 1fr;
220
+ }
221
+
222
+ .nav {
223
+ flex-direction: column;
224
+ align-items: flex-start;
225
+ }
226
+ }