Clone-Fruit-Ninja/index.css at main · matheussiqueira-dev/Clone-Fruit-Ninja · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --bg-deep: #040711;
  --bg-soft: #0a1324;
  --glass: rgba(8, 14, 28, 0.65);
  --text-main: #f8fbff;
  --text-muted: #b6c2d4;
  --accent-gold: #f7cb67;
  --accent-cyan: #6ad6f5;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  background: var(--bg-deep);
  color: var(--text-main);
}

.hero-title {
  font-family: 'Archivo Black', 'Impact', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.font-display {
  font-family: 'Archivo Black', 'Impact', sans-serif;
}

.app-shell {
  background: var(--bg-deep);
  isolation: isolate;
}

.app-gradient {
  background:
    radial-gradient(1200px 760px at -5% -8%, rgba(247, 203, 103, 0.24), transparent 62%),
    radial-gradient(900px 760px at 110% 15%, rgba(106, 214, 245, 0.2), transparent 58%),
    radial-gradient(700px 560px at 80% 100%, rgba(17, 98, 132, 0.22), transparent 60%),
    linear-gradient(170deg, #02040b 0%, #080f1f 52%, #050910 100%);
}

.app-glow {
  background:
    radial-gradient(520px 260px at 18% 22%, rgba(247, 203, 103, 0.3), transparent 62%),
    radial-gradient(560px 300px at 78% 68%, rgba(106, 214, 245, 0.2), transparent 63%);
  mix-blend-mode: screen;
  opacity: 0.78;
}

.app-grid {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 50%, black 45%, transparent 100%);
  opacity: 0.22;
}

.app-noise {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 0.8px, transparent 0.8px);
  background-size: 2px 2px;
  mix-blend-mode: soft-light;
  opacity: 0.14;
}

.glass-card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 38px rgba(2, 8, 20, 0.45);
  animation: reveal-up 420ms ease-out both;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

a,
button,
input {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: none;
}

@media (max-width: 768px) {
  .glass-card {
    backdrop-filter: blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 10px 20px rgba(2, 8, 20, 0.36);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}