/* Web fonts (VT323, DotGothic16) are linked from index.html */
/* ── RESET */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
}
html {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
input, textarea, [contenteditable] {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
:root { --u: calc(100vw / 1440); }
@media (orientation: portrait) {
:root { --u: calc(100vh / 844); --u: calc(100dvh / 844); }
}
/* ── CONTROLS — the size of each part */
:root {
/* ── LANDSCAPE (wide screens) */
--buttons-h: 1; /* carousel buttons + frames + gaps */
--filter-h: 0.8; /* "filter: all" box, top left */
--guestbook-h: 0.8; /* guest book form, bottom centre */
--entries-h: 0.8; /* guest book cards, right edge */
--counter-h: 1; /* visitor counter, bottom */
--loader-h: 0.7; /* ENTER screen: loading bar + ENTER gif */
--about-face: 0.92; /* the face inside the about button (both orientations): 1 = fills it */
/* ── PORTRAIT (tall screens) */
--buttons-v: 1.3;
--filter-v: 1;
--guestbook-v: 1;
--entries-v: 1;
--counter-v: 1;
--loader-v: 0.8;
}
/* Wiring — no need to touch. Each part gets its own unit: the site unit
(--u, THE ONE RULE above) × that part's control. */
:root {
--u-buttons: calc(var(--u) * var(--buttons-h));
--u-filter: calc(var(--u) * var(--filter-h));
--u-guestbook: calc(var(--u) * var(--guestbook-h));
--u-entries: calc(var(--u) * var(--entries-h));
--u-counter: calc(var(--u) * var(--counter-h));
--u-loader: calc(var(--u) * var(--loader-h));
}
@media (orientation: portrait) {
:root {
--u-buttons: calc(var(--u) * var(--buttons-v));
--u-filter: calc(var(--u) * var(--filter-v));
--u-guestbook: calc(var(--u) * var(--guestbook-v));
--u-entries: calc(var(--u) * var(--entries-v));
--u-counter: calc(var(--u) * var(--counter-v));
--u-loader: calc(var(--u) * var(--loader-v));
}
}
/* ── WORLD (rotated on portrait) */
.world {
position: fixed;
inset: 0;
z-index: 0;
}
/* Portrait: rotate the background art to fill the screen.
Buttons live outside .world and stay upright. */
@media (orientation: portrait) {
.world {
inset: auto;
width: 100vh;
width: 100dvh;
height: 100vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
}
/* ── BACKGROUND LOOP */
.bg {
position: fixed;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.bg video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── PARALLAX LAYERS */
.layer {
position: fixed;
inset: 0;
z-index: 5;
overflow: hidden;
pointer-events: none;
will-change: transform;
}
.layer img {
position: absolute;
left: -5%;
top: 50%;
width: 110%;
height: auto;
transform: translateY(-50%);
}
/* ── BUTTONS */
/* ── CAROUSEL SIZING */
:root {
/* ── HORIZONTAL (wide screens) */
--btn-size-h: calc(151 * var(--u-buttons)); /* the button itself */
--btn-gap-h: calc(72 * var(--u-buttons)); /* space between buttons */
--btn-pad-h: calc(14 * var(--u-buttons)); /* breathing room at the ends of the strip */
--btn-deco-h: calc(223 * var(--u-buttons)); /* the frame GIF around each button */
/* ── VERTICAL (tall screens) */
--btn-size-v: calc(101 * var(--u-buttons));
--btn-gap-v: calc(42 * var(--u-buttons));
--btn-pad-v: calc(17 * var(--u-buttons));
--btn-deco-v: calc(143 * var(--u-buttons));
/* ── Both */
--btn-deco-hover: 1.02; /* how much the frame swells on hover */
--btn-max: none; /* safety cap on button width; vertical sets one */
/* Live set — horizontal by default, swapped by the media query. Don't edit. */
--btn-size: var(--btn-size-h);
--btn-gap: var(--btn-gap-h);
--btn-pad: var(--btn-pad-h);
--btn-deco: var(--btn-deco-h);
}
.buttons-frame {
position: fixed;
inset: 0;
z-index: 2;
overflow: hidden;
touch-action: pinch-zoom; /* drags can start here, between the buttons (carousel.js) */
mask-image: var(--edge-dissolve-mask);
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: var(--edge-dissolve-mask);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.buttons {
position: fixed;
inset: 0;
will-change: transform;
display: flex;
justify-content: center;
justify-content: safe center;
align-items: center;
/* landscape: row */
flex-direction: row;
gap: var(--btn-gap);
padding: var(--btn-pad);
/* carousel: the strip is longer than the screen and slides (translate,
carousel.js); the frame around it clips it */
overflow: visible;
/* Touch is dragged and flung by carousel.js itself (like the mouse): the
phone's own scrolling stops dead every time the endless loop jumps. */
touch-action: pinch-zoom;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: default;
}
.buttons.in-band {
cursor: grab;
}
.buttons::-webkit-scrollbar {
display: none;
}
.buttons.dragging {
cursor: grabbing;
}
.btn-wrap {
position: relative;
flex-shrink: 0;
}
/* portrait: vertical column */
@media (orientation: portrait) {
/* No numbers here on purpose — this only points the live tokens at the -v set.
Every button size lives in the one block at the top of the file. */
:root {
--btn-size: var(--btn-size-v);
--btn-gap: var(--btn-gap-v);
--btn-pad: var(--btn-pad-v);
--btn-deco: var(--btn-deco-v);
--btn-max: 80vw; /* a very narrow screen must not push buttons off the sides */
}
.buttons {
flex-direction: column;
}
}
/* Per-button decoration GIF — larger than button, centered, bleeds outside */
.btn-decoration {
position: absolute;
width: var(--btn-deco);
height: var(--btn-deco);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 3;
transition: transform 0.15s ease-out;
}
video.btn-decoration,
canvas.btn-decoration {
filter: url(#luma-alpha);
object-fit: contain;
}
/* Safari's engine (every iPhone browser) doesn't draw that filter on a
playing video — the frames vanished. Screen blending works there. */
html.is-webkit video.btn-decoration,
html.is-webkit canvas.btn-decoration { filter: none; mix-blend-mode: screen; }
/* The one hidden player per button video (button-videos.js). Kept on screen
(tiny, near-invisible) so phones don't pause them as "not visible". */
#bv-players { position: fixed; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0.01; pointer-events: none; z-index: 0; }
#bv-players video { display: block; width: 2px; height: 2px; }
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-panel { display: none !important; }
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls-overlay-play-button { display: none !important; }
.btn-wrap:hover .btn-decoration {
transform: translate(-50%, -50%) scale(var(--btn-deco-hover));
}
/* The frame drawn in code (frame.js) — same box as the frame video. */
.btn-frame {
position: absolute;
width: var(--btn-deco);
height: var(--btn-deco);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: visible;
pointer-events: none; /* indicators only: taps go to the button */
z-index: 4;
transition: transform 0.15s ease-out;
}
.btn-wrap:hover .btn-frame {
transform: translate(-50%, -50%) scale(var(--btn-deco-hover));
}
.btn {
position: relative;
width: var(--btn-size);
height: var(--btn-size);
max-width: var(--btn-max);
overflow: hidden;
text-decoration: none;
display: block;
background: none;
border: none;
padding: 0;
color: inherit;
font: inherit;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* The button's picture: a GIF ![]()
or a video (button-videos.js plays it). */
/* (Button videos are drawn into