hotpotatoEN/styles.css at main · elbill/hotpotatoEN · 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
/* Styles for Hot Potato */
:root{
  --bg: #0b0b0f;
  --fg: #ffffff;
  --accent: #ff7a1a;
  --muted: #98a2b3;
}
@font-face{
  font-family:'AdigianaUltra';
  src: url('/assets/fonts/Adigiana Ultra.ttf') format('truetype');
  font-display: swap;
}
@font-face{
  font-family:'PotatoSansBold';
  src: url('/assets/fonts/Potato_sans-Bold.otf') format('opentype');
  font-display: swap;
}
@font-face{
  font-family:'PotatoSansBlack';
  src: url('/assets/fonts/Potato_sans-Black.otf') format('opentype');
  font-display: swap;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; height:100%; background:var(--bg);
  color:var(--fg); font-family: PotatoSansBold, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.container{
  min-height:100vh; display:flex; flex-direction:column;
  background: url('/assets/background.jpg') center/cover no-repeat;
}
.overlay{
  background: rgba(0,0,0,0.38);
  min-height:100vh; padding: clamp(12px, 3vw, 36px);
}
header h1{
  font-family: AdigianaUltra, PotatoSansBlack, system-ui, sans-serif;
  font-weight:900; letter-spacing:.5px; margin:0 0 8px 0;
  font-size: clamp(28px, 4vw, 56px);
  text-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.tagline{ color: var(--muted); margin-bottom: 20px; }
.card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: clamp(12px, 2.2vw, 24px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.controls{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px; }
button, .btn{
  border:0; border-radius: 14px; padding: 14px 18px;
  font-size: clamp(16px, 2.5vw, 18px); font-weight:700;
  background: var(--accent); color:#111; cursor:pointer;
  box-shadow: 0 6px 14px rgba(255,122,26,0.3);
}
button.secondary{
  background:#1a1f2e; color:#fff; border:1px solid rgba(255,255,255,0.14);
}
button.ghost{
  background:transparent; border:1px dashed rgba(255,255,255,0.3); color:#fff;
}
button:focus{ outline: 3px solid #ffd36d; outline-offset: 2px; }
.lang-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.lang-item{
  background: linear-gradient(135deg, rgba(31,39,58,0.95), rgba(45,55,82,0.95));
  border:1px solid rgba(255,255,255,0.28);
  border-radius:14px;
  padding:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  cursor:pointer;
  color:#f5f7ff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 10px 24px rgba(12,16,26,0.45);
}
.lang-item:hover,
.lang-item:focus-visible{
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 12px 28px rgba(12,16,26,0.55);
  transform: translateY(-2px);
}
.lang-item.current{
  background: linear-gradient(135deg, #ff9a3c, #ff7a1a);
  color:#141005;
  border-color: rgba(255,229,195,0.9);
  text-shadow: none;
  box-shadow: 0 12px 28px rgba(255,122,26,0.45);
}
.lang-item.current:hover,
.lang-item.current:focus-visible{
  border-color: rgba(255,239,214,1);
  box-shadow: 0 16px 32px rgba(255,122,26,0.55);
}
.badge{ display:inline-flex; align-items:center; gap:8px; }
.state-indicator{ margin-top: 6px; color:#ffe2c4; }
#playingViz{ margin-top:18px; display:none; justify-content:center; align-items:center; min-height: 160px; }
#playingViz img{ max-width: min(360px, 86vw); border-radius: 16px; border:2px solid rgba(255,255,255,0.18); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
#promptScreen{ display:none; text-align:center; }
.prompt-box{
  margin-top: 12px;
  background: rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
}
.prompt-text{
  font-size: clamp(20px, 3.6vw, 30px);
  line-height: 1.35;
}
.small{ font-size: 14px; }
footer{ margin-top:auto; padding-top: 24px; color: var(--muted); font-size: 14px; }
.settings{ margin-top:12px }
.category-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.category-list label{
  background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding:8px 12px; display:flex; gap:8px; align-items:center; cursor:pointer;
}
.gif-lg{ width: min(520px, 92vw); border-radius: 18px; margin: 8px auto; display:block; border:2px solid rgba(255,255,255,0.2) }
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }