/* ssomniss.com/parallax — full-page forest parallax. * The picture is fixed to the viewport for the whole page and does not change with scroll: the * back stage (sky…meadow) under the text, the front stage (foliage, vines) over it. The text is a * column of full-screen steps scrolling between the two stages, one step per wheel notch (scroll * snap), so the text in the middle of the picture changes while the leaves stay on top. * Pure CSS without JS (or with prefers-reduced-motion): a still picture with the text scrolling * through it. parallax.js adds the pointer parallax, the idle sway and the text fade. * * Scene: one virtual 2048×1143 scene, every layer placed in % of it (build.py, from layout.json * reference points); both stages share its geometry. Colour tokens --sky-top/--sky-mid/ * --sky-bottom/--meadow/--foot are sampled from the art by build.py and set on . */ :root { --ink: #16301f; --ink-2: #2d4a34; --paper: #f7f4e8; --line: rgba(22, 48, 31, .16); --glow: 0 0 16px rgba(247, 244, 232, .95), 0 0 4px rgba(247, 244, 232, .9); /* the whole page is set in monospace (owner's choice); all of these carry Cyrillic */ --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; /* bleed ≥ max |translate| + skew drift of any layer; the skew drift grows with the scene's scale, i.e. with the width once the scene is width-bound — hence the vw term */ --overscan: max(44px, 1.75vw); --ratio: 1.791776; /* 2048 / 1143 */ /* the back scene's height in viewport units (same cover formula as .scene): the title is sized from it, so it keeps its share of the picture and fits between the vine tips */ --scene-h: max(calc((100vw + 2 * var(--overscan)) / var(--ratio)), calc(100vh + 2 * var(--overscan))); } *, *::before, *::after { box-sizing: border-box; } html { background: #446138; scroll-snap-type: y mandatory; /* one step per wheel notch */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font: 16px/1.55 var(--mono); color: var(--ink); background: var(--meadow); } /* ── the picture: fixed, the same for the whole page ─────────────────────── */ .stage { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; /* mobile: not resized when the URL bar slides away */ overflow: hidden; container-type: size; pointer-events: none; } .stage--back { z-index: 0; /* placeholder in the art's own colours while the layers load */ background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 48%, var(--sky-bottom) 62%, var(--meadow) 80%); } .stage--front { z-index: 2; } /* the leaves are always above the text */ /* cover: scale = max(width / 2048, height / 1143), plus overscan on every side, centred */ .scene { --sw: max(calc(100cqw + 2 * var(--overscan)), calc((100cqh + 2 * var(--overscan)) * var(--ratio))); position: absolute; left: 50%; top: 50%; width: var(--sw); aspect-ratio: 2048 / 1143; translate: -50% -50%; } /* Short landscape (phone on its side, low laptop windows): the text needs ~300 px whatever the * scene's scale — the hanging vines are lifted and the plants lowered by the missing height. * Before the portrait rule, which wins at exactly 1:1. */ @container (min-aspect-ratio: 1 / 1) and (max-height: 640px) { .scene--vines { translate: -50% calc(-50% - clamp(0px, 640px - 100cqh, 160px)); } .scene--foliage { translate: -50% calc(-50% + clamp(0px, 640px - 100cqh, 160px) / 2); } } /* Narrow / portrait: the foreground frame is shrunk and pinned to the top (vines) and bottom * (foliage) instead of following the back scene's cover crop, so it frames the text. */ @container (max-aspect-ratio: 1 / 1) { .scene--vines, .scene--foliage { --sw: max(calc(100cqw + 2 * var(--overscan)), calc(100cqw * 1.6)); translate: -50% 0; } .scene--vines { top: calc(-1 * var(--overscan)); } .scene--foliage { top: auto; bottom: calc(-1 * var(--overscan)); } } .layer { position: absolute; display: block; margin: 0; pointer-events: none; user-select: none; -webkit-user-select: none; } .layer img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; } .scene--foliage .layer { transform-origin: 50% 100%; } /* grass sways from its base */ .scene--vines .layer { transform-origin: 50% 0; } /* vines swing from where they hang */ .motion-full .layer[data-motion] { will-change: transform; } /* ── the text: full-screen steps between the two stages ──────────────────── */ .story { position: relative; z-index: 1; } .step { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; /* the text stands at 47 % of the screen (parallax.js FOCUS): below the vine tips, above the grass */ padding: 14vh 20px 20vh; padding: 14svh 20px 20svh; scroll-snap-align: start; scroll-snap-stop: always; } .step__inner { width: 100%; max-width: 560px; text-align: center; } .step__inner--wide { max-width: 820px; } /* maps and screenshots come from the site's cron manifests via parallax.js: without it (or when a manifest is empty) their step and menu panel are left out */ html:not(.js) [data-needs], [data-needs].is-empty { display: none; } .js .step__inner { will-change: opacity; } .title { margin: 0; font-size: clamp(3rem, min(calc(var(--scene-h) * .058), 1.6rem + 6.2vw), 6.25rem); font-weight: 800; line-height: 1; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(247, 244, 232, .55), 0 0 30px rgba(247, 244, 232, .75); } .lead { margin: .9rem auto 0; max-width: 34ch; font-size: clamp(1rem, .92rem + .45vw, 1.22rem); font-weight: 600; color: var(--ink-2); text-shadow: var(--glow); } .step h2 { margin: 0 0 14px; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 800; line-height: 1.05; text-shadow: 0 2px 0 rgba(247, 244, 232, .5), 0 0 24px rgba(247, 244, 232, .8); } .kicker { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-shadow: var(--glow); } .panel { margin: 0; padding: 18px 22px; text-align: left; background: rgba(247, 244, 232, .9); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(22, 48, 31, .18); } .panel p { margin: 0 0 10px; color: #33503b; } .panel .cmd { margin: 0; } .panel a { color: #245f33; font-weight: 700; } .note, .hint, .copy { margin: 1.1rem 0 0; font-size: .9rem; font-weight: 600; color: var(--ink-2); text-shadow: var(--glow); } .hint { margin-top: 1.6rem; letter-spacing: .04em; } .ip { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 1.4rem; padding: 8px 8px 8px 16px; background: rgba(247, 244, 232, .9); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 24px rgba(22, 48, 31, .14); } .ip__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .ip__addr { font: 600 1.05rem/1.2 var(--mono); color: var(--ink); background: none; padding: 0; } .actions, .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 1.1rem 0 0; } .links { gap: 8px 22px; } .links a { color: var(--ink); font-weight: 700; text-shadow: var(--glow); } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 12px; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s; } .btn--primary { background: var(--ink); color: var(--paper); box-shadow: 0 6px 20px rgba(22, 48, 31, .28); } .btn--primary:hover { background: #22452d; } .btn--ghost { background: rgba(247, 244, 232, .9); color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--paper); } .btn--copy { display: none; min-height: 36px; padding: 6px 12px; background: var(--ink); color: var(--paper); font-size: .9rem; } .js .btn--copy { display: inline-flex; } .btn--small { min-height: 32px; padding: 4px 10px; font-size: .85rem; } .btn:focus-visible, a:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; } @media (hover: hover) { .btn:hover { transform: translateY(-1px); } } .facts__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); } .facts__row:first-child { border-top: 0; padding-top: 0; } .facts__row:last-child { padding-bottom: 0; } .facts dt { color: #4a6650; } .facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } code { font-family: var(--mono); font-size: .95em; background: rgba(22, 48, 31, .08); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; } /* ── menu: the paw, the blur veil, the section panels ────────────────────── */ .paw { display: none; /* works only with parallax.js */ position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: 0 5px 14px rgba(22, 48, 31, .35); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); } .js .paw { display: block; } .paw:hover { transform: rotate(-8deg) scale(1.06); } .paw:active { transform: scale(.92); } .paw:focus-visible { outline: 3px solid #f2c14e; outline-offset: 3px; } .paw__img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .25s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); } .paw__img--open { opacity: 0; transform: rotate(-120deg) scale(.5); } .menu-open .paw__img--idle { opacity: 0; transform: rotate(120deg) scale(.5); } .menu-open .paw__img--open { opacity: 1; transform: none; } /* the picture and the text go soft behind the open menu; the blur itself is static, only the veil's opacity is animated, and parallax.js pauses the layers meanwhile */ .veil { position: fixed; inset: 0; z-index: 15; background: rgba(247, 244, 232, .14); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); opacity: 0; visibility: hidden; transition: opacity .45s ease .15s, visibility 0s linear .6s; } .menu-open .veil { opacity: 1; visibility: visible; transition: opacity .35s ease; } .menu { --w: min(300px, calc(100vw - 24px), calc((100vh - 150px) * .5625)); /* 7 panels fit */ --off: calc(-2 * var(--w) - 60px); /* fully off-screen */ position: fixed; z-index: 18; top: calc(max(12px, env(safe-area-inset-top)) + 72px); left: max(12px, env(safe-area-inset-left)); display: grid; grid-template-columns: var(--w); gap: 10px; visibility: hidden; transition: visibility 0s linear .8s; /* stays visible while the panels slide away */ } .menu-open .menu { visibility: visible; transition: none; } @media (max-height: 560px) and (min-aspect-ratio: 1 / 1) { /* phone on its side: two columns */ .menu { --w: min(280px, calc((100vw - 34px) / 2), calc((100vh - 120px) * .984)); grid-template-columns: repeat(2, var(--w)); } } .menu__item { position: relative; display: block; aspect-ratio: 378 / 96; text-decoration: none; opacity: 0; transform: translateX(var(--off)) rotate(-10deg); /* closing: the panels slide away to the left, bottom one first, speeding up */ transition: transform .5s cubic-bezier(.55, 0, .8, .2) calc((6 - var(--i)) * 40ms), opacity .2s linear calc((6 - var(--i)) * 40ms + .3s), translate .2s ease; } .menu-open .menu__item { opacity: 1; transform: none; /* opening: they fly in from the left one by one, with a small overshoot */ transition: transform .6s cubic-bezier(.2, 1.35, .4, 1) calc(var(--i) * 50ms), opacity .2s linear calc(var(--i) * 50ms), translate .2s ease; } .menu-open .menu__item:hover, .menu-open .menu__item:focus-visible { translate: 8px 0; } .menu__item:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; border-radius: 16px; } .menu__item img { position: absolute; inset: 0; width: 100%; height: 100%; } .menu__label { position: absolute; inset: 0 14px 0 24%; /* right of the panel's icon */ display: flex; align-items: center; font-size: clamp(.8rem, calc(var(--w) * .058), 1.1rem); font-weight: 700; letter-spacing: .02em; color: var(--c); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); } .menu__item--plain .menu__label { inset: 0 14px; justify-content: center; } /* ── maps slider, screenshots, lightbox ───────────────────────────────────── */ .slider { padding: 12px; text-align: center; } .slider__frame { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 44vh; max-height: 44svh; /* keeps the heading below the hanging vines */ overflow: hidden; border-radius: 12px; background: #183022; touch-action: pan-y; /* horizontal swipes go to the slider, vertical scroll stays */ } .slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; cursor: zoom-in; transition: opacity .45s ease; } .slider__img.is-on { opacity: 1; z-index: 1; } .slider__nav, .lightbox__nav, .lightbox__close { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(247, 244, 232, .92); color: var(--ink); font: 700 26px/1 var(--mono); cursor: pointer; box-shadow: 0 4px 14px rgba(22, 48, 31, .25); transition: transform .15s; } .slider__nav { top: 50%; translate: 0 -50%; } .slider__nav--prev { left: 10px; } .slider__nav--next { right: 10px; } .slider__nav:hover, .lightbox__nav:hover, .lightbox__close:hover { transform: scale(1.08); } .slider__nav:focus-visible, .lightbox__nav:focus-visible, .lightbox__close:focus-visible, .shots__item:focus-visible, .slider__dot:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; } .slider__caption { margin: 10px 0 4px; font-weight: 700; color: var(--ink); } .slider__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .slider__dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 48, 31, .25); cursor: pointer; } .slider__dot[aria-current="true"] { background: var(--ink); } .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 40vw), 1fr)); gap: 10px; padding: 12px; } .shots__item { display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #183022; cursor: zoom-in; aspect-ratio: 16 / 9; } .shots__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .shots__item:hover img { transform: scale(1.05); } .lightbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 64px 16px; background: rgba(12, 24, 16, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s ease; } .lightbox[hidden] { display: none; } .lightbox.is-open { opacity: 1; } .lightbox__img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); touch-action: pan-y; } .lightbox__caption { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-weight: 700; color: var(--paper); } .lightbox__nav { top: 50%; translate: 0 -50%; } .lightbox__nav--prev { left: 12px; } .lightbox__nav--next { right: 12px; } .lightbox__close { top: 12px; right: 12px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .slider__img, .shots__item img, .lightbox { transition: none; } .btn { transition: none; } .btn:hover { transform: none; } .paw, .paw__img, .veil, .menu, .menu__item { transition: none; } }