Hugging Face's logo

Spaces:
nileagi
/
README
Running

App Files Community
nsomazr commited on
Commit
fa9a4d2
·
verified ·
1 Parent(s): 3aa8eac

Style org card from NileAGI mission and services pages

Browse files
Files changed (1) hide show
  1. style.css +210 -21
style.css CHANGED
@@ -1,44 +1,233 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 0;
3
  margin: 0;
4
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
5
- line-height: 1.55;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  }
7
 
8
  h1 {
9
- font-size: 1.4rem;
 
 
 
 
 
 
 
 
10
  font-weight: 650;
11
- margin: 0 0 0.65rem;
 
 
 
 
 
 
 
12
  }
13
 
14
  p {
15
- font-size: 0.95rem;
16
- margin: 0 0 0.7rem;
17
- opacity: 0.92;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
 
20
  .lede {
21
- opacity: 0.85;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
 
24
  blockquote {
25
- margin: 0.85rem 0 1rem;
26
- padding: 0.15rem 0 0.15rem 0.85rem;
27
- border-left: 3px solid #e11d48;
28
- font-size: 1.02rem;
29
- font-style: italic;
30
- opacity: 0.95;
 
31
  }
32
 
33
- a {
34
- color: inherit;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
 
37
- .links {
38
- margin-top: 1rem;
39
  margin-bottom: 0;
40
  }
41
 
42
- .card {
43
- max-width: 640px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  }
 
1
+ :root {
2
+ --navy: #1a1f36;
3
+ --body: #374151;
4
+ --red: #ff003c;
5
+ --pink: #fff0f3;
6
+ --mist: #e8ecf7;
7
+ --ink: #0a1172;
8
+ --white: #ffffff;
9
+ }
10
+
11
+ * {
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ html,
16
  body {
 
17
  margin: 0;
18
+ padding: 0;
19
+ }
20
+
21
+ body {
22
+ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
23
+ color: var(--navy);
24
+ background: var(--white);
25
+ line-height: 1.65;
26
+ }
27
+
28
+ .hero,
29
+ .mission,
30
+ .services,
31
+ footer {
32
+ padding: 2rem 1.25rem;
33
+ max-width: 920px;
34
+ margin: 0 auto;
35
  }
36
 
37
  h1 {
38
+ font-size: clamp(1.65rem, 4vw, 2.35rem);
39
+ font-weight: 700;
40
+ letter-spacing: -0.02em;
41
+ line-height: 1.2;
42
+ margin: 0 0 0.85rem;
43
+ }
44
+
45
+ h2 {
46
+ font-size: clamp(1.35rem, 3vw, 1.85rem);
47
  font-weight: 650;
48
+ margin: 0 0 1.1rem;
49
+ }
50
+
51
+ h3 {
52
+ font-size: 1.15rem;
53
+ font-weight: 650;
54
+ line-height: 1.3;
55
+ margin: 0 0 0.55rem;
56
  }
57
 
58
  p {
59
+ margin: 0 0 0.85rem;
60
+ color: var(--body);
61
+ font-size: 1.02rem;
62
+ }
63
+
64
+ .eyebrow {
65
+ font-size: 0.72rem;
66
+ font-weight: 700;
67
+ letter-spacing: 0.2em;
68
+ text-transform: uppercase;
69
+ margin: 0 0 0.65rem;
70
+ color: var(--navy);
71
+ opacity: 0.7;
72
+ }
73
+
74
+ .eyebrow.red {
75
+ color: var(--red);
76
+ opacity: 1;
77
  }
78
 
79
  .lede {
80
+ font-size: 1.05rem;
81
+ max-width: 40rem;
82
+ }
83
+
84
+ .cta {
85
+ display: flex;
86
+ flex-wrap: wrap;
87
+ gap: 0.65rem;
88
+ margin-top: 1.25rem;
89
+ }
90
+
91
+ .btn-primary,
92
+ .btn-ghost {
93
+ display: inline-block;
94
+ padding: 0.55rem 1.1rem;
95
+ border-radius: 999px;
96
+ text-decoration: none;
97
+ font-size: 0.92rem;
98
+ font-weight: 600;
99
+ }
100
+
101
+ .btn-primary {
102
+ background: var(--red);
103
+ color: var(--white);
104
+ }
105
+
106
+ .btn-ghost {
107
+ background: var(--white);
108
+ color: var(--navy);
109
+ border: 1px solid var(--navy);
110
  }
111
 
112
  blockquote {
113
+ position: relative;
114
+ margin: 0 0 1.75rem;
115
+ padding: 3.25rem 1.5rem 2.75rem 1.35rem;
116
+ background: var(--pink);
117
+ border-left: 4px solid var(--red);
118
+ border-radius: 1rem;
119
+ overflow: hidden;
120
  }
121
 
122
+ blockquote p {
123
+ margin: 0;
124
+ color: var(--navy);
125
+ font-size: clamp(1.25rem, 3.2vw, 1.85rem);
126
+ font-weight: 700;
127
+ line-height: 1.3;
128
+ }
129
+
130
+ .q {
131
+ position: absolute;
132
+ color: var(--red);
133
+ font-family: Georgia, "Times New Roman", serif;
134
+ font-size: clamp(3.5rem, 12vw, 5.5rem);
135
+ line-height: 0.8;
136
+ opacity: 0.9;
137
+ pointer-events: none;
138
+ }
139
+
140
+ .q-open {
141
+ top: 0.15rem;
142
+ left: 0.55rem;
143
+ }
144
+
145
+ .q-close {
146
+ right: 0.7rem;
147
+ bottom: -0.35rem;
148
  }
149
 
150
+ .prose p:last-child {
 
151
  margin-bottom: 0;
152
  }
153
 
154
+ .services {
155
+ background: var(--mist);
156
+ max-width: none;
157
+ padding-left: 0;
158
+ padding-right: 0;
159
+ }
160
+
161
+ .services header,
162
+ .services .grid {
163
+ max-width: 920px;
164
+ margin-left: auto;
165
+ margin-right: auto;
166
+ padding-left: 1.25rem;
167
+ padding-right: 1.25rem;
168
+ }
169
+
170
+ .services header {
171
+ text-align: center;
172
+ margin-bottom: 1.5rem;
173
+ }
174
+
175
+ .services header p {
176
+ max-width: 36rem;
177
+ margin-left: auto;
178
+ margin-right: auto;
179
+ }
180
+
181
+ .rule {
182
+ width: 3rem;
183
+ height: 2px;
184
+ background: var(--red);
185
+ margin: 0 auto 1rem;
186
+ }
187
+
188
+ .grid {
189
+ display: grid;
190
+ grid-template-columns: 1fr;
191
+ gap: 1rem;
192
+ }
193
+
194
+ @media (min-width: 720px) {
195
+ .grid {
196
+ grid-template-columns: repeat(3, 1fr);
197
+ }
198
+ }
199
+
200
+ article {
201
+ background: var(--white);
202
+ border: 1px solid rgba(10, 17, 114, 0.08);
203
+ box-shadow: 0 4px 24px rgba(10, 17, 114, 0.08);
204
+ border-radius: 1rem;
205
+ padding: 1.35rem 1.25rem 1.2rem;
206
+ border-top: 3px solid var(--red);
207
+ }
208
+
209
+ .cat {
210
+ display: inline-block;
211
+ font-size: 0.7rem;
212
+ font-weight: 700;
213
+ letter-spacing: 0.16em;
214
+ text-transform: uppercase;
215
+ color: var(--red);
216
+ margin-bottom: 0.4rem;
217
+ }
218
+
219
+ article p {
220
+ font-size: 0.95rem;
221
+ margin: 0;
222
+ }
223
+
224
+ footer {
225
+ text-align: center;
226
+ font-size: 0.95rem;
227
+ color: var(--body);
228
+ }
229
+
230
+ footer a {
231
+ color: var(--navy);
232
+ font-weight: 600;
233
  }