Hugging Face's logo

Spaces:
AIAgentforDI
/
WFM
Sleeping

App Files Community
Dhom1 commited on
Commit
a7bc226
·
verified ·
1 Parent(s): f86f683

Update src/style.css

Browse files
Files changed (1) hide show
  1. src/style.css +68 -110
src/style.css CHANGED
@@ -1,130 +1,88 @@
1
- /* === General === */
2
- body {
3
- background-color: #f9fbfc;
 
 
4
  font-family: 'Segoe UI', sans-serif;
5
- }
6
- h1, h2, h3, .stMarkdown h3 {
7
- color: #004c97;
8
- }
9
- p, li {
10
- color: #555555;
11
- font-size: 1.05em;
12
- }
13
- .stDataFrame th {
14
- background-color: #e3f2fd !important;
15
- color: #004c97 !important;
16
- }
17
- .stButton > button {
18
- padding: 15px 30px;
19
- font-size: 16px;
20
- font-weight: bold;
21
- border: none;
22
- border-radius: 12px;
23
- background: linear-gradient(270deg, #36BA01, #009A22, #36BA01);
24
- background-size: 400% 400%;
25
- animation: gradientMove 6s ease infinite;
26
- transition: transform 0.2s ease, box-shadow 0.2s ease;
27
- color: white !important;
28
- cursor: pointer;
29
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
30
- }
31
- /* ✅ Force text inside button to stay white */
32
- .stButton > button * {
33
- color: white !important;
34
- }
35
- .stButton > button:hover {
36
- transform: scale(1.05);
37
- }
38
- .stButton > button:active {
39
- transform: scale(0.95);
40
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
41
- }
42
- @keyframes gradientMove {
43
- 0% { background-position: 0% 50%; }
44
- 50% { background-position: 100% 50%; }
45
- 100% { background-position: 0% 50%; }
46
  }
47
 
48
- /* === Cards with Animated Border === */
49
- .stat-cards {
50
- display: flex;
51
- justify-content: space-between;
52
- gap: 1.5rem;
53
- margin: 2rem 0;
54
- flex-wrap: wrap;
55
  }
56
 
57
- .card-container {
58
- position: relative;
59
- width: 100%;
60
- max-width: 260px;
61
- height: 240px;
 
 
 
62
  }
63
 
64
- .card-background {
65
- position: absolute;
66
- top: -4px;
67
- left: -4px;
68
- width: calc(100% + 8px);
69
- height: calc(100% + 8px);
70
- background: linear-gradient(270deg, #36BA01, #004c97, #36BA01);
71
- background-size: 400% 400%;
72
- animation: gradientMove 5s ease infinite;
73
- border-radius: 16px;
74
- z-index: 0;
75
- transition: transform 0.4s ease;
 
 
76
  }
77
 
78
- .card-background:hover {
79
- transform: scale(1.07);
 
 
 
 
 
 
 
80
  }
81
 
82
- .stat-card {
83
- position: absolute;
84
- top: 0;
85
- left: 0;
86
  width: 100%;
87
  height: 100%;
88
- background: linear-gradient(135deg, #f1fdf9, #ffffff);
89
- padding: 1.5rem;
90
- border-radius: 16px;
91
- box-shadow: 0 6px 18px rgba(0,0,0,0.06);
92
- text-align: center;
93
- transition: transform 0.3s ease;
94
- z-index: 1;
95
- }
96
-
97
- .stat-card:hover {
98
- transform: scale(0.99);
99
  }
100
 
101
- .stat-icon {
102
- font-size: 30px;
103
- margin-bottom: 0.4rem;
104
- color: #004c97;
105
- }
106
- .stat-label {
107
- color: #666;
108
- font-size: 1rem;
109
- }
110
- .stat-value {
111
- font-size: 2rem;
112
- font-weight: bold;
113
- color: #004c97;
114
  }
115
 
116
- .stat-change {
117
- font-size: 0.9rem;
118
- font-weight: 500;
119
- position: absolute;
120
- top: 1rem;
121
- right: 1.2rem;
122
  }
123
- .stat-up { color: #2e7d32; }
124
- .stat-down { color: #c62828; }
125
 
126
- .logo-center {
127
- display: flex;
128
- justify-content: center;
129
- margin-bottom: 1em;
130
  }
 
1
+ /* === Fullscreen AI Landing Theme (Desktop-Focused) === */
2
+ html, body {
3
+ margin: 0;
4
+ padding: 0;
5
+ height: 100%;
6
  font-family: 'Segoe UI', sans-serif;
7
+ background: radial-gradient(ellipse at bottom, #021d34 0%, #000 100%);
8
+ overflow: hidden;
9
+ color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  }
11
 
12
+ /* === Background Animation === */
13
+ .background {
14
+ position: absolute;
15
+ inset: 0;
16
+ overflow: hidden;
17
+ z-index: 0;
 
18
  }
19
 
20
+ .circle {
21
+ position: absolute;
22
+ width: 300px;
23
+ height: 300px;
24
+ background: radial-gradient(circle, #009fe3, #36ba01);
25
+ border-radius: 50%;
26
+ opacity: 0.1;
27
+ animation: float 14s ease-in-out infinite;
28
  }
29
 
30
+ .circle:nth-child(1) {
31
+ top: 15%;
32
+ left: 20%;
33
+ animation-delay: 0s;
34
+ }
35
+ .circle:nth-child(2) {
36
+ top: 60%;
37
+ left: 70%;
38
+ animation-delay: 4s;
39
+ }
40
+ .circle:nth-child(3) {
41
+ top: 80%;
42
+ left: 30%;
43
+ animation-delay: 8s;
44
  }
45
 
46
+ @keyframes float {
47
+ 0%, 100% {
48
+ transform: translateY(0) scale(1);
49
+ opacity: 0.1;
50
+ }
51
+ 50% {
52
+ transform: translateY(-60px) scale(1.3);
53
+ opacity: 0.25;
54
+ }
55
  }
56
 
57
+ /* === Centered Button Layout === */
58
+ .container {
59
+ position: relative;
60
+ z-index: 1;
61
  width: 100%;
62
  height: 100%;
63
+ display: flex;
64
+ justify-content: center;
65
+ align-items: center;
 
 
 
 
 
 
 
 
66
  }
67
 
68
+ /* === AI Agent Button === */
69
+ .stButton > button, .cta-button {
70
+ padding: 1.2rem 3rem;
71
+ font-size: 1.5rem;
72
+ background-color: #009fe3;
73
+ border: none;
74
+ border-radius: 50px;
75
+ color: white !important;
76
+ cursor: pointer;
77
+ transition: all 0.3s ease;
78
+ box-shadow: 0 0 20px rgba(0, 159, 227, 0.5);
 
 
79
  }
80
 
81
+ .stButton > button:hover, .cta-button:hover {
82
+ background-color: #36ba01;
83
+ box-shadow: 0 0 30px rgba(54, 186, 1, 0.5);
 
 
 
84
  }
 
 
85
 
86
+ .stButton > button * {
87
+ color: white !important;
 
 
88
  }