Hugging Face's logo

Spaces:
spwotton
/
mpp5525
Running

App Files Community
spwotton commited on
Commit
d1c289f
·
verified ·
1 Parent(s): 009cc03

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +101 -18
style.css CHANGED
@@ -1,28 +1,111 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ /* === Font & Typography === */
2
+ :root {
3
+ --font-sans: "Nunito Sans", sans-serif;
4
+ --font-size-base: 16px;
5
+ --line-height-base: 1.5;
6
+ --font-weight-light: 300;
7
+ --font-weight-bold: 700;
8
+
9
+ --color-primary: #2563eb; /* Tailwind's blue-600 */
10
+ --color-dark: #1e293b; /* slate-800 */
11
+ --color-light: #f9fafb;
12
+ --color-white: #ffffff;
13
+ --color-text: #374151;
14
+ --color-muted: #6b7280;
15
+ }
16
+
17
+ /* === Reset === */
18
  body {
19
+ margin: 0;
20
+ font-family: var(--font-sans);
21
+ font-size: var(--font-size-base);
22
+ line-height: var(--line-height-base);
23
+ color: var(--color-text);
24
+ background-color: var(--color-white);
25
+ }
26
+
27
+ /* === Layout === */
28
+ .container {
29
+ max-width: 1200px;
30
+ margin: 0 auto;
31
+ padding: 1rem;
32
+ }
33
+
34
+ .section {
35
+ padding: 4rem 1rem;
36
+ }
37
+
38
+ .text-center {
39
+ text-align: center;
40
+ }
41
+
42
+ /* === Hero === */
43
+ .hero-section {
44
+ position: relative;
45
+ height: 350px;
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ text-align: center;
50
+ color: white;
51
+ background: url('https://images.unsplash.com/photo-1581090763521-0ea28fe02f53?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat;
52
+ transition: background 0.3s ease;
53
+ }
54
+
55
+ .overlay-gradient {
56
+ position: absolute;
57
+ inset: 0;
58
+ background: linear-gradient(135deg, rgba(107, 107, 107, 0.7), rgba(30, 41, 59, 0.8));
59
+ z-index: 1;
60
+ }
61
+
62
+ .hero-content {
63
+ position: relative;
64
+ z-index: 2;
65
+ max-width: 800px;
66
+ padding: 0 1rem;
67
+ }
68
+
69
+ /* === Buttons === */
70
+ .btn {
71
+ display: inline-block;
72
+ padding: 0.75rem 1.5rem;
73
+ font-weight: var(--font-weight-bold);
74
+ border-radius: 0.5rem;
75
+ text-decoration: none;
76
+ transition: all 0.2s ease;
77
+ }
78
+
79
+ .btn-primary {
80
+ background-color: var(--color-white);
81
+ color: var(--color-primary);
82
+ }
83
+
84
+ .btn-primary:hover {
85
+ background-color: #f0f4ff;
86
  }
87
 
88
+ /* === Table === */
89
+ .table {
90
+ width: 100%;
91
+ border-collapse: collapse;
92
  }
93
 
94
+ .table th,
95
+ .table td {
96
+ padding: 1rem;
97
+ border-bottom: 1px solid #e5e7eb;
98
+ text-align: left;
99
  }
100
 
101
+ .table tbody tr:nth-child(even) {
102
+ background-color: var(--color-light);
 
 
 
 
103
  }
104
 
105
+ /* === Footer === */
106
+ .footer {
107
+ background-color: #111827;
108
+ color: white;
109
+ padding: 2rem 1rem;
110
+ text-align: center;
111
  }