style.css

1	html,
2	body {
3	margin: 0;
4	height: 100%;
5	overflow: hidden;
6	background: #9db4c8;
7	/* A drag steers; it must not scroll, zoom or pull-to-refresh the page. */
8	touch-action: none;
9	overscroll-behavior: none;
10	}
11
12	#scene {
13	display: block;
14	width: 100vw;
15	height: 100dvh;
16	}
17
18	#hint {
19	position: fixed;
20	left: 0;
21	right: 0;
22	bottom: calc(2rem + env(safe-area-inset-bottom));
23	margin: 0;
24	padding: 0 1rem;
25	text-align: center;
26	font: 500 1rem/1.4 system-ui, sans-serif;
27	color: #fff;
28	text-shadow: 0 1px 6px rgb(0 0 0 / 70%);
29	/* The canvas under it takes the drag. */
30	pointer-events: none;
31	transition: opacity 1.5s;
32	}
33
34	#hint.gone {
35	opacity: 0;
36	}
37
38	/* What the skater sees of the lake from under it. */
39	#water {
40	/* It is `hidden` in the page until this stylesheet arrives; from here on, this shows it. */
41	display: grid;
42	position: fixed;
43	inset: 0;
44	place-items: center;
45	background: #06202c;
46	color: #cfe6f2;
47	font: 500 1.4rem/1.4 system-ui, sans-serif;
48	opacity: 0;
49	pointer-events: none;
50	/* Out of the water slowly; into it, below, at once. */
51	transition: opacity 1s;
52	}
53
54	#water.under {
55	opacity: 1;
56	transition: opacity 0.25s 0.15s;
57	}
58
59	/* Every button on the lake is the same button: dark, ringed in white so that it shows
60	against a night sky as well as a day one, and white all through when it is on. */
61	#sound {
62	position: fixed;
63	top: calc(0.75rem + env(safe-area-inset-top));
64	right: calc(0.75rem + env(safe-area-inset-right));
65	width: 2.75rem;
66	height: 2.75rem;
67	padding: 0;
68	border: 2px solid #fff;
69	border-radius: 50%;
70	background: rgb(8 24 34 / 85%);
71	color: #fff;
72	font: 600 1.2rem/1 system-ui, sans-serif;
73	/* A tap on it is a tap, not the start of a drag or a double-tap zoom. */
74	touch-action: manipulation;
75	cursor: pointer;
76	}
77
78	#sound.on {
79	background: #fff;
80	color: #06202c;
81	}
82
83	/* About, Settings and Randomize. */
84	#links {
85	position: fixed;
86	top: calc(0.75rem + env(safe-area-inset-top));
87	left: calc(0.75rem + env(safe-area-inset-left));
88	/* Beside the sound button, and wrapping under themselves, not it, should they not fit. */
89	max-width: calc(100vw - 5rem);
90	display: flex;
91	flex-wrap: wrap;
92	gap: 0.5rem;
93	}
94
95	/* Between one lake and the next: the haze, closing in at once and clearing slowly. */
96	#veil {
97	position: fixed;
98	inset: 0;
99	opacity: 0;
100	pointer-events: none;
101	}
102
103	#veil.clearing {
104	animation: clearing 0.9s ease-out;
105	}
106
107	@keyframes clearing {
108	from {
109	opacity: 1;
110	}
111	}
112
113	#links a,
114	#links button {
115	display: grid;
116	place-items: center;
117	min-height: 2.75rem;
118	padding: 0 0.9rem;
119	border: 2px solid #fff;
120	border-radius: 2rem;
121	background: rgb(8 24 34 / 85%);
122	color: #fff;
123	font: 600 0.95rem/1 system-ui, sans-serif;
124	text-decoration: none;
125	touch-action: manipulation;
126	cursor: pointer;
127	}
128
129	/* The boxes that open over the lake, which waits behind them. */
130	dialog {
131	box-sizing: border-box;
132	width: min(34rem, calc(100vw - 2rem));
133	max-height: calc(100dvh - 2rem);
134	padding: 1.5rem;
135	border: 0;
136	border-radius: 1rem;
137	background: #f4f7fa;
138	color: #0b1a24;
139	font: 400 1rem/1.5 system-ui, sans-serif;
140	overflow-y: auto;
141	/* A long read on a small screen scrolls inside the box, which the page forbids itself. */
142	touch-action: pan-y;
143	}
144
145	dialog::backdrop {
146	background: rgb(6 32 44 / 60%);
147	}
148
149	/* The settings sit at the foot of the screen under a clear view of the lake and the sky,
150	where what they change can be seen changing. */
151	#settings-dialog {
152	margin-bottom: 1rem;
153	max-height: 62dvh;
154	}
155
156	#settings-dialog::backdrop {
157	background: none;
158	}
159
160	dialog h1 {
161	margin: 0 0 0.5rem;
162	font-size: 1.5rem;
163	/* It takes the focus when the box opens, so that the box opens at its top. */
164	outline: none;
165	}
166
167	dialog h2 {
168	margin: 1.25rem 0 0.25rem;
169	font-size: 1.1rem;
170	}
171
172	dialog p,
173	dialog dl {
174	margin: 0 0 0.6rem;
175	}
176
177	dialog dt {
178	font-weight: 600;
179	}
180
181	dialog dd {
182	margin: 0 0 0.4rem;
183	}
184
185	dialog a {
186	color: #0b5a7a;
187	}
188
189	dialog fieldset {
190	margin: 0 0 0.9rem;
191	padding: 0.4rem 0.9rem 0.6rem;
192	border: 1px solid #c3ced8;
193	border-radius: 0.6rem;
194	}
195
196	dialog legend {
197	padding: 0 0.3rem;
198	font-weight: 600;
199	}
200
201	/* A whole line to touch for each choice, not a small circle. */
202	dialog label {
203	display: block;
204	padding: 0.45rem 0;
205	cursor: pointer;
206	}
207
208	dialog label input {
209	width: 1.15rem;
210	height: 1.15rem;
211	margin: 0 0.5rem 0 0;
212	vertical-align: -0.15rem;
213	}
214
215	dialog small {
216	color: #4d6170;
217	}
218
219	dialog button {
220	min-height: 3rem;
221	padding: 0 1.2rem;
222	border: 2px solid #0b1a24;
223	border-radius: 2rem;
224	background: none;
225	color: #0b1a24;
226	font: 600 1rem/1 system-ui, sans-serif;
227	cursor: pointer;
228	}
229
230	dialog button.done {
231	display: block;
232	width: 100%;
233	margin-top: 1rem;
234	background: #0b1a24;
235	color: #fff;
236	}
237
238	/* On a phone held upright: two of the three links to a row beside the sound button. */
239	@media (max-width: 30rem) {
240	#links a,
241	#links button {
242	padding: 0 0.7rem;
243	font-size: 0.9rem;
244	}
245	}
246
247	/* Steering by tilt, on or off, at the foot of the screen. */
248	#tilt-button {
249	position: fixed;
250	left: calc(0.75rem + env(safe-area-inset-left));
251	bottom: calc(0.75rem + env(safe-area-inset-bottom));
252	min-height: 2.75rem;
253	padding: 0 0.9rem;
254	border: 2px solid #fff;
255	border-radius: 2rem;
256	background: rgb(8 24 34 / 85%);
257	color: #fff;
258	font: 600 0.95rem/1 system-ui, sans-serif;
259	touch-action: manipulation;
260	cursor: pointer;
261	}
262
263	#tilt-button.on {
264	background: #fff;
265	color: #06202c;
266	}
267
268	/* The hint keeps clear of it. */
269	#tilt-button:not([hidden]) ~ #hint {
270	bottom: calc(4.5rem + env(safe-area-inset-bottom));
271	}
272
273	/* The pace, and the way to the next one: opposite the tilt button. */
274	#pace-button {
275	position: fixed;
276	right: calc(0.75rem + env(safe-area-inset-right));
277	bottom: calc(0.75rem + env(safe-area-inset-bottom));
278	min-height: 2.75rem;
279	padding: 0 0.9rem;
280	border: 2px solid #fff;
281	border-radius: 2rem;
282	background: rgb(8 24 34 / 85%);
283	color: #fff;
284	font: 600 0.95rem/1 system-ui, sans-serif;
285	touch-action: manipulation;
286	cursor: pointer;
287	}
288
289	/* The hint keeps clear of the buttons at the foot of the screen. */
290	#hint {
291	bottom: calc(4.5rem + env(safe-area-inset-bottom));
292	}
293
294	/* A picture on a button: the shape of a piece of line art, in the colour of the button's words. */
295	.icon {
296	display: inline-block;
297	width: 1.4em;
298	height: 1.4em;
299	vertical-align: -0.35em;
300	background: currentColor;
301	-webkit-mask: var(--icon) center / contain no-repeat;
302	mask: var(--icon) center / contain no-repeat;
303	}
304
305	#pace-button .icon,
306	#tilt-button .icon {
307	margin-right: 0.45em;
308	}