git » sparkle-arcade » master » tree

[master] / styles.css 

  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
:root {
  --bg-top: #f9e7ff;
  --bg-bottom: #dff6ff;
  --card-bg: rgba(255, 255, 255, 0.95);
  --accent: #ff80c8;
  --accent-2: #a8c4ff;
  --text: #3e2d4f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Nunito', system-ui, sans-serif;
  background: radial-gradient(circle at top, var(--bg-top), var(--bg-bottom));
  color: var(--text);
}

.emojis {
  position: fixed;
  inset: 0;
  font-size: max(5rem, 7vw);
  opacity: 0.05;
  pointer-events: none;
  text-align: center;
  padding-top: 2rem;
  letter-spacing: 2rem;
}

.frame {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem clamp(1rem, 4vw, 4rem) 5rem;
  position: relative;
  z-index: 1;
}

.hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

h1, h2, h3 {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  margin: 0 0 0.5rem;
  color: var(--accent);
}

.subhead {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  color: #7c6797;
}

.intro {
  max-width: 720px;
  margin: 0.5rem auto 0;
  color: #5f4a74;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.game-card {
  background: var(--card-bg);
  border-radius: 1.8rem;
  padding: 1.8rem;
  box-shadow: 0 16px 40px rgba(178, 145, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.badge {
  align-self: flex-start;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: white;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}

.game-card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: #6d5a87;
}

.btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: white;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(255, 128, 200, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(168, 196, 255, 0.4);
}

.instructions {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1.5rem;
  box-shadow: 0 14px 35px rgba(137, 190, 255, 0.3);
  text-align: center;
}

@media (max-width: 600px) {
  .frame {
    padding-bottom: 3rem;
  }

  .game-card {
    padding: 1.4rem;
  }
}