ReARJ/styles.css at main · ahmed14rasheed20/ReARJ · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

:root{
  --bg: #0f172a;
  --bg-accent: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --card: #0b1220;
  --primary: #22d3ee;
  --primary-700: #06b6d4;
  --ring: rgba(34, 211, 238, .35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}


*{ box-sizing: border-box }
html,body,#root{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, #1f2937 0%, transparent 60%),
    radial-gradient(1000px 600px at 120% 20%, #0ea5e9 0%, transparent 45%),
    radial-gradient(800px 500px at -20% 120%, #22d3ee 0%, transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  line-height: 1.6;
}


.container{
  max-width: 780px;
  margin: 56px auto;
  padding: 0 20px 40px;
}

.title{
  text-align:center;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing:.3px;
  margin: 0 0 28px;
  font-weight: 800;
  text-shadow: 0 2px 30px rgba(34,211,238,.25);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card + .card{ margin-top: 26px }
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.45) }

.card h2{
  margin: 0 0 10px;
  font-size: 22px;
}


.p-sm{ color: var(--muted); margin: 4px 0 14px }


.btn{
  appearance:none; border:0; outline:0;
  padding: 10px 14px; margin-right: 8px;
  border-radius: 12px; font-weight: 600;
  color:#0b1220; background: var(--primary);
  box-shadow: 0 8px 18px var(--ring);
  cursor:pointer; transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px) }
.btn.secondary{
  background: transparent; color: var(--text);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.btn.secondary:hover{ background: rgba(255,255,255,.06) }
.btn.warning{
  background:#f43f5e; color:white; box-shadow: 0 8px 18px rgba(244,63,94,.35);
}

.input{
  width: 100%; max-width: 360px;
  padding: 10px 12px; border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1324; color: var(--text);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.input::placeholder{ color: #64748b }
.input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--ring);
}

/* Helpers */
.stack{ display:flex; gap:8px; flex-wrap:wrap }
.count{ font-size: 18px; margin: 6px 0 16px }
.hr{ height:1px; background: rgba(255,255,255,.06); border:0; margin:18px 0 }
.footer{
  text-align:center; margin-top: 26px; color: var(--muted); font-size: 13px;
}