/* ============================================================ Shared layer: base, header, contacts, loader, WIP stub (redesign v3 — scrolling pages, desktop only) ============================================================ */ @font-face { font-family: "TASA Orbiter"; src: url("assets/fonts/TASAOrbiter-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* no sideways scroll / rubber-band anywhere on the site. Only the root element clips horizontally — putting overflow on as well turns it into a second scroll container and eats the first wheel/trackpad gesture. */ html { overflow-x: clip; overscroll-behavior-x: none; } body { max-width: 100%; } body { font-family: "TASA Orbiter", Arial, Helvetica, sans-serif; font-size: 10px; line-height: 1.35; color: #000; background: #fff; overflow-anchor: none; } i { font-style: italic; } button { font: inherit; background: none; border: none; cursor: pointer; color: #000; } a { color: #000; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img, video { display: block; } .page { position: relative; } /* design-scale helper: 1 design px in real px */ :root { --s: 1; } body { font-size: calc(10px * var(--s)); } /* ---------- header row: scrolls on case pages, pinned on the home page ---------- */ .hdr { position: absolute; z-index: 20; } body.home .hdr { position: fixed; } .hdr--i1 { left: calc(20px * var(--s)); top: calc(40px * var(--s)); } .hdr--name { left: calc(138px * var(--s)); top: calc(39px * var(--s)); width: calc(160px * var(--s)); font-size: calc(20px * var(--s)); font-weight: normal; line-height: 1.15; } .hdr--age { left: calc(703px * var(--s)); top: calc(41px * var(--s)); } .hdr--country { left: calc(1195px * var(--s)); top: calc(41px * var(--s)); } .hdr--city { left: calc(1341px * var(--s)); top: calc(41px * var(--s)); } .hdr--name a { text-decoration: none; } .hdr--name a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- contacts row: pinned to the bottom of the viewport ---------- */ .contacts { position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px * var(--s)); pointer-events: none; z-index: 20; } .contacts > * { position: absolute; pointer-events: auto; } /* white backdrop so the row stays readable over imagery */ .contacts__arrow, .contacts__group span, .contacts__group a, .lang { background: #fff; } .contacts__arrow { left: calc(20px * var(--s)); bottom: calc(50px * var(--s)); } /* back to the works gallery (case pages) */ a.contacts__arrow--back { color: inherit; text-decoration: none; cursor: pointer; transition: opacity .2s ease; } @media (hover: hover) { a.contacts__arrow--back:hover { opacity: .45; } } .contacts__group { bottom: calc(36px * var(--s)); display: grid; grid-template-columns: auto auto; column-gap: 0; } .contacts__group--a { left: calc(373px * var(--s)); grid-template-columns: calc(117px * var(--s)) auto; } .contacts__group--b { left: calc(725px * var(--s)); grid-template-columns: calc(117px * var(--s)) auto; } .lang { left: calc(1353px * var(--s)); bottom: calc(36px * var(--s)); } .lang__btn { padding: 0; } .lang__btn.is-active { text-decoration: underline; text-underline-offset: 3px; } /* ---------- loading screen ---------- */ .loader { position: fixed; inset: 0; background: #fff; z-index: 50; transition: opacity 0.5s ease; } .loader.done { opacity: 0; pointer-events: none; } .loader__head { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 174px; height: auto; } .loader__row { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); display: flex; gap: 60px; font-size: 16px; } /* ---------- WIP stub (≤ 767px) ---------- */ .wip { display: none; } @media (max-width: 767px) { .page, .loader { display: none; } .wip { display: block; position: fixed; inset: 0; background: #fff; overflow: hidden; z-index: 60; } .wip__bg { position: absolute; inset: 0; background-size: cover; background-position: top center; filter: blur(6px); opacity: 0.35; } .wip__word { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 175px; font-weight: 800; letter-spacing: -0.02em; } .wip__note { position: absolute; top: 175px; left: 20px; right: 20px; text-align: center; font-size: 14px; } .wip__note .br--l { position: absolute; left: 0; } .wip__note .br--r { position: absolute; right: 0; } }