Hugging Face's logo

Spaces:
Gagan0141
/
iris-pdt
Sleeping

App Files Community
Gagan0141 commited on
Commit
9952873
·
verified ·
1 Parent(s): 00ecbde

Create static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +171 -0
static/styles.css ADDED
@@ -0,0 +1,171 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Root theme variables */
2
+ :root {
3
+ --bg: #f9fafc;
4
+ --card: #ffffff;
5
+ --primary: #6c63ff;
6
+ --primary-dark: #5548d3;
7
+ --muted: #6b7280;
8
+ --radius: 24px;
9
+ --transition: 0.25s ease;
10
+ font-family: "Inter", sans-serif;
11
+ }
12
+
13
+ body {
14
+ margin: 0;
15
+ background: var(--bg);
16
+ min-height: 100vh;
17
+ display: flex;
18
+ justify-content: center;
19
+ align-items: flex-start;
20
+ padding: 20px;
21
+ }
22
+
23
+ /* Main grid scene */
24
+ .scene {
25
+ display: grid;
26
+ grid-template-columns: 2fr 1fr;
27
+ gap: 22px;
28
+ width: 100%;
29
+ max-width: 1080px;
30
+ position: relative;
31
+ }
32
+
33
+ /* Responsive: stack layout on mobile */
34
+ @media (max-width: 768px) {
35
+ .scene {
36
+ grid-template-columns: 1fr;
37
+ }
38
+ .panel {
39
+ order: -1; /* Show info panel above form */
40
+ }
41
+ }
42
+
43
+ /* Background blob */
44
+ .blob {
45
+ position: absolute;
46
+ inset: 0;
47
+ background: radial-gradient(circle at 30% 20%, #6c63ff22, transparent 70%),
48
+ radial-gradient(circle at 80% 80%, #00c2a822, transparent 70%);
49
+ z-index: -1;
50
+ }
51
+
52
+ /* Card */
53
+ .card {
54
+ background: var(--card);
55
+ padding: 28px;
56
+ border-radius: var(--radius);
57
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
58
+ transition: box-shadow var(--transition);
59
+ }
60
+
61
+ .card:hover {
62
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
63
+ }
64
+
65
+ .hero h1 {
66
+ font-size: clamp(1.5rem, 4vw, 2.2rem);
67
+ font-weight: 800;
68
+ margin: 0;
69
+ color: #111827;
70
+ }
71
+
72
+ .hero p {
73
+ font-size: 0.95rem;
74
+ color: var(--muted);
75
+ margin-top: 6px;
76
+ }
77
+
78
+ /* Form */
79
+ form {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 20px;
83
+ margin-top: 20px;
84
+ }
85
+
86
+ .row {
87
+ display: flex;
88
+ gap: 20px;
89
+ }
90
+
91
+ /* Stack fields on mobile */
92
+ @media (max-width: 600px) {
93
+ .row {
94
+ flex-direction: column;
95
+ gap: 14px;
96
+ }
97
+ }
98
+
99
+ .field {
100
+ flex: 1;
101
+ display: flex;
102
+ flex-direction: column;
103
+ }
104
+
105
+ label {
106
+ font-size: 0.85rem;
107
+ font-weight: 600;
108
+ margin-bottom: 6px;
109
+ }
110
+
111
+ input {
112
+ padding: 14px 16px;
113
+ font-size: 1rem;
114
+ border-radius: var(--radius);
115
+ border: 1px solid #e5e7eb;
116
+ transition: border var(--transition), box-shadow var(--transition);
117
+ outline: none;
118
+ }
119
+
120
+ input:focus {
121
+ border-color: var(--primary);
122
+ box-shadow: 0 0 0 3px #6c63ff33;
123
+ }
124
+
125
+ /* Button */
126
+ .btn {
127
+ background: var(--primary);
128
+ color: #fff;
129
+ border: none;
130
+ padding: 14px 20px;
131
+ border-radius: var(--radius);
132
+ font-size: 1.1rem;
133
+ font-weight: 600;
134
+ cursor: pointer;
135
+ transition: background var(--transition), transform var(--transition);
136
+ width: 100%;
137
+ }
138
+
139
+ .btn:hover {
140
+ background: var(--primary-dark);
141
+ transform: translateY(-2px);
142
+ }
143
+
144
+ .result {
145
+ margin-top: 16px;
146
+ font-size: 1.05rem;
147
+ font-weight: 600;
148
+ text-align: center;
149
+ color: #111827;
150
+ }
151
+
152
+ /* Side panel */
153
+ .panel {
154
+ background: var(--card);
155
+ padding: 20px;
156
+ border-radius: var(--radius);
157
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
158
+ font-size: 0.9rem;
159
+ color: #374151;
160
+ }
161
+
162
+ .iris-illustration {
163
+ width: 100%;
164
+ height: auto;
165
+ margin-bottom: 10px;
166
+ }
167
+
168
+ .small {
169
+ font-size: 0.85rem;
170
+ color: var(--muted);
171
+ }