Hugging Face's logo

Spaces:
tonyassi
/
glucose-goddess
Running

App Files Community
tonyassi commited on
Commit
b50d145
·
verified ·
1 Parent(s): 2fd16aa

Update src/app.css

Browse files
Files changed (1) hide show
  1. src/app.css +52 -60
src/app.css CHANGED
@@ -1,79 +1,71 @@
1
- :root {
2
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3
- line-height: 1.5;
4
- font-weight: 400;
5
 
6
- color-scheme: light dark;
7
- color: rgba(255, 255, 255, 0.87);
8
- background-color: #242424;
9
 
10
- font-synthesis: none;
11
- text-rendering: optimizeLegibility;
12
- -webkit-font-smoothing: antialiased;
13
- -moz-osx-font-smoothing: grayscale;
14
  }
15
 
16
- a {
17
- font-weight: 500;
18
- color: #646cff;
19
- text-decoration: inherit;
20
- }
21
- a:hover {
22
- color: #535bf2;
23
- }
24
 
25
- body {
26
  margin: 0;
27
- display: flex;
28
- place-items: center;
29
- min-width: 320px;
30
- min-height: 100vh;
 
 
 
 
 
31
  }
32
 
33
- h1 {
34
- font-size: 3.2em;
 
35
  line-height: 1.1;
 
 
 
36
  }
37
 
38
  .card {
39
- padding: 2em;
 
 
 
 
40
  }
41
 
42
- #app {
43
- max-width: 1280px;
44
- margin: 0 auto;
45
- padding: 2rem;
46
- text-align: center;
47
  }
 
 
48
 
49
- button {
50
- border-radius: 8px;
51
- border: 1px solid transparent;
52
- padding: 0.6em 1.2em;
53
- font-size: 1em;
54
- font-weight: 500;
55
- font-family: inherit;
56
- background-color: #1a1a1a;
57
- cursor: pointer;
58
- transition: border-color 0.25s;
59
- }
60
- button:hover {
61
- border-color: #646cff;
62
- }
63
- button:focus,
64
- button:focus-visible {
65
- outline: 4px auto -webkit-focus-ring-color;
66
  }
67
 
68
- @media (prefers-color-scheme: light) {
69
- :root {
70
- color: #213547;
71
- background-color: #ffffff;
72
- }
73
- a:hover {
74
- color: #747bff;
75
- }
76
- button {
77
- background-color: #f9f9f9;
78
- }
 
 
79
  }
 
1
+ :root{
2
+ --brand-bg: #191f70;
3
+ --brand-pink: #df4085;
4
+ --brand-white: #ffffff;
5
 
6
+ --font-serif: "Bodoni Moda", "Bodoni", "Didot", serif;
7
+ --font-sans: "Avenir Next", "Avenir", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 
8
 
9
+ --card-radius: 24px;
10
+ --shadow: 0 8px 24px rgba(0,0,0,.15);
 
 
11
  }
12
 
13
+ * { box-sizing: border-box; }
 
 
 
 
 
 
 
14
 
15
+ html, body {
16
  margin: 0;
17
+ background: var(--brand-bg);
18
+ color: var(--brand-white);
19
+ font-family: var(--font-sans);
20
+ }
21
+
22
+ .container {
23
+ max-width: 1060px;
24
+ margin: 0 auto;
25
+ padding: clamp(16px, 3vw, 32px);
26
  }
27
 
28
+ .h1 {
29
+ font-family: var(--font-serif);
30
+ font-weight: 700;
31
  line-height: 1.1;
32
+ letter-spacing: .2px;
33
+ font-size: clamp(28px, 4.2vw, 56px);
34
+ margin: 12px 0 20px;
35
  }
36
 
37
  .card {
38
+ background: var(--brand-white);
39
+ color: #0c0c21;
40
+ border-radius: var(--card-radius);
41
+ box-shadow: var(--shadow);
42
+ padding: clamp(16px, 2.6vw, 28px);
43
  }
44
 
45
+ .legend {
46
+ display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
47
+ font-size: 14px;
 
 
48
  }
49
+ .legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
50
+ .legend img { height: 28px; width: auto; }
51
 
52
+ .badge {
53
+ display:inline-flex; align-items:center; gap:8px;
54
+ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600;
55
+ background:#eef1ff; color:#222a8a;
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  }
57
 
58
+ .footer-note { opacity:.8; font-size:12px; margin-top:12px; }
59
+
60
+ .tooltip {
61
+ position: absolute;
62
+ pointer-events: none;
63
+ background: #ffffff;
64
+ color: #111125;
65
+ padding: 8px 10px;
66
+ border-radius: 10px;
67
+ box-shadow: 0 6px 16px rgba(0,0,0,.2);
68
+ font-size: 12px;
69
+ max-width: 220px;
70
+ border: 1px solid rgba(0,0,0,.05);
71
  }