:root { --bg: #e3e5e8; --ink: #111214; --mute: #6c7076; --red: #ff2a1f; --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Space Grotesk', system-ui, sans-serif; --hint: 'Afacad Flux', 'PT Sans', system-ui, sans-serif; /* подсказки и пометки UI (click…, open book, triptych) — строчными */ --head: 'Mukta Vaani', 'PT Sans', system-ui, sans-serif; /* заголовки и названия: папки PHOTO, картины, разделы */ } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); } #scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } body.hovering #scene { cursor: pointer; } /* ---------- HUD ---------- */ .hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .hud > * { position: absolute; } .hud-tl { top: 28px; left: 32px; } .hud-tr { top: 28px; right: 32px; text-align: right; line-height: 1.7; } .hud-bl { bottom: 28px; left: 32px; line-height: 1.7; } .hud-br { bottom: 28px; right: 32px; text-align: right; line-height: 1.7; white-space: pre; } .hud-bc { bottom: 28px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; } .brand { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .2em; color: var(--ink); } .nav { display: flex; gap: 16px; margin-top: 10px; pointer-events: auto; flex-wrap: wrap; } .nav button { all: unset; cursor: pointer; transition: color .25s; } .nav button:hover, .nav button.on { color: var(--red); } .nav button:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; } .red { color: var(--red); } #hint-num { display: block; color: var(--red); margin-bottom: 6px; } #hint-title { display: block; font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: .32em; color: var(--ink); transition: color .3s; } #hint.active #hint-title { color: var(--red); } /* ---------- section panel ---------- */ #panel { position: fixed; inset: 0; z-index: 5; overflow-y: auto; background: #060606; color: #e9e9ea; clip-path: circle(0px at var(--x, 50%) var(--y, 50%)); visibility: hidden; transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility 0s .9s; } #panel.open { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); visibility: visible; transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility 0s 0s; } .panel-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px 120px; } .panel-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 24px 0 18px; background: linear-gradient(#060606 70%, transparent); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #7d8087; } #back { all: unset; cursor: pointer; color: #e9e9ea; font-size: 15px; letter-spacing: .18em; transition: color .25s; } #back:hover { color: var(--red); } #back:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; } .p-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 12vh 0 7vh; margin-bottom: 40px; border-bottom: 1px solid #1c1c1e; } #p-num { font-family: var(--mono); color: var(--red); font-size: 13px; letter-spacing: .16em; margin-bottom: 14px; } #p-title { font-size: clamp(48px, 12vw, 200px); font-weight: 500; line-height: .85; letter-spacing: -.03em; } #p-text { max-width: 340px; color: #8b8e94; font-size: 15px; line-height: 1.5; } .p-hero > * { opacity: 0; transform: translateY(40px); } #panel.open .p-hero > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .45s forwards; } .grid { columns: 3 300px; column-gap: 18px; } .work { break-inside: avoid; margin: 0 0 22px; opacity: 0; transform: translateY(30px); } #panel.open .work { animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.6s + var(--i) * .06s); } @keyframes rise { to { opacity: 1; transform: none; } } .work img { display: block; } .work img, .work .ph { width: 100%; border: 1px solid #19191b; transition: border-color .3s; } .ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #0c0c0d 0 14px, #101012 14px 28px); } .ph span { font-family: var(--mono); font-size: 12px; color: #3a3b3f; letter-spacing: .2em; } .work:hover .ph, .work:hover img { border-color: var(--red); } .work figcaption { display: flex; justify-content: space-between; padding: 10px 2px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #6f7278; text-transform: uppercase; } /* ---------- intro ---------- */ #intro { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--mute); transition: opacity 1.4s ease; } #intro.done { opacity: 0; pointer-events: none; } .bar { width: 200px; height: 1px; margin-top: 14px; background: #c9ccd1; overflow: hidden; } .bar i { display: block; width: 0; height: 100%; background: var(--red); transition: width .8s ease; } /* ---------- field version (dark scene) ---------- */ body.field { --bg: #1b2125; --ink: #eef1f3; --mute: rgba(238, 241, 243, .62); --red: #ffffff; /* no orange: the accent is plain white */ --mono: "PT Sans", system-ui, sans-serif; --sans: "PT Sans", system-ui, sans-serif; } /* the whole interface in PT Sans */ body.field .bar { background: rgba(255, 255, 255, .15); } body.field .hud { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); } /* hand-drawn name top left (size: --sig-w, set from the ?tune panel), sections quietly along the left edge, heartbeat and status top right in white */ body.field .signature { top: 16px; left: 24px; margin: 0; line-height: 0; } body.field .signature img { display: block; width: min(var(--sig-w, 230px), 60vw); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); } body.field .side-nav { left: 20px; top: 50%; transform: translateY(-50%); margin: 0; writing-mode: vertical-rl; flex-wrap: nowrap; gap: 28px; font-size: 10px; letter-spacing: .24em; color: rgba(238, 241, 243, .34); transition: color .3s; } body.field .side-nav:hover { color: rgba(238, 241, 243, .6); } body.field .status { top: 24px; right: 28px; color: #fff; } .pulse { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .status .pulse { justify-content: flex-end; } #ecg { display: block; width: 132px; height: 26px; } /* "SELECT A MODULE": small, in the mono face of the HUD; over a cube only the words change */ body.field #hint-title { font-family: var(--hint); font-size: 11px; font-weight: 500; letter-spacing: .3em; } body.field #hint-num { display: none; } /* no section numbers */ /* opening a section: no growing circle — the cube cracks and black ink spreads out of it over the frame (main.js, INK_TIME 1.35 s); the black page appears on top once it is covered, then its content rises. The HUD fades with the ink. */ body.field #panel { clip-path: none; opacity: 0; transition: opacity .3s ease, visibility 0s .3s; } body.field #panel.open { clip-path: none; opacity: 1; transition: opacity .2s ease 1.3s, visibility 0s 0s; } body.field #panel.open .p-hero > * { animation-delay: 1.45s; } body.field #panel.open .work { animation-delay: calc(1.55s + var(--i) * .06s); } body.field #panel.open .about > * { animation-delay: 1.55s; } body.field .hud { transition: opacity .6s ease; } body.field.inking .hud { opacity: 0; } /* loading screen: the name with PORTFOLIO tucked under it, standing still while the site loads; then it crumbles into particles (main.js, dissolveIntro) while the dark background fades into the scene */ body.field #intro { --sw: min(440px, 72vw); background: #000; transition: background-color 2.6s cubic-bezier(.45, 0, .25, 1); } body.field #intro.done { opacity: 1; background-color: transparent; } #intro-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .intro-box { position: relative; z-index: 1; display: grid; justify-items: center; } .intro-sign { width: var(--sw); height: auto; } .intro-word { margin-top: calc(var(--sw) * -0.12); /* sits just under the lettering, beside the long stroke */ font-family: var(--head); font-weight: 400; font-size: calc(var(--sw) * 0.075); line-height: 1.1; letter-spacing: .3em; margin-right: -.3em; color: #fff; } body.field #intro .bar { width: calc(var(--sw) * 0.5); margin-top: 22px; } .intro-msg { margin-top: 14px; font-size: 11px; letter-spacing: .2em; color: var(--mute); min-height: 1em; } .about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; } .about p { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; color: #c9cbcf; margin-bottom: 1.1em; } .about dl { display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-content: start; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .about dt { color: #6f7278; } .about a { color: #e9e9ea; text-decoration: none; border-bottom: 1px solid #333; } .about a:hover { color: var(--red); border-color: var(--red); } .about > * { opacity: 0; transform: translateY(30px); } #panel.open .about > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) .6s forwards; } /* ---------- ABOUT: evidence wall (wall.js) ---------- */ #panel.about-open .p-hero { display: none; } #panel.about-open .panel-inner { max-width: none; padding-bottom: 40px; } .wall { position: relative; margin-top: 8px; } .board { position: absolute; left: 0; top: 0; width: 1376px; height: 860px; transform-origin: 0 0; overflow: hidden; --mx: 50%; --my: 40%; background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .05), transparent 65%), radial-gradient(circle at 18% 80%, rgba(60, 40, 20, .25), transparent 30%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"), #141312; box-shadow: inset 0 0 160px rgba(0, 0, 0, .9); cursor: default; user-select: none; touch-action: pan-y; } .threads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 500; pointer-events: none; overflow: visible; } .thread { fill: none; stroke: var(--thread-c, #b3121a); stroke-width: var(--thread-w, 1.8); stroke-linecap: round; } .thread-shadow { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 2.4; transform: translate(3px, 5px); filter: blur(1.5px); } #panel.open .threads { animation: wall-in 1s ease 2.1s both; } /* the pieces */ .ev { position: absolute; z-index: 2; color: #2a2520; font-family: 'Special Elite', 'Courier New', monospace; cursor: grab; } .ev.held { cursor: grabbing; z-index: 400; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); } #panel.open .ev { animation: pin-in var(--in, .7s) cubic-bezier(.2, .7, .2, 1) calc(1.45s + var(--i) * var(--stagger, .07s)) both; } @keyframes pin-in { from { opacity: 0; translate: 0 -24px; } } @keyframes wall-in { from { opacity: 0; } } .paper { padding: 26px 28px 24px; font-size: 13.5px; line-height: 1.5; background: radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, .28), transparent 55%), radial-gradient(circle at 85% 88%, rgba(110, 75, 30, .28), transparent 38%), radial-gradient(circle at 10% 95%, rgba(90, 60, 25, .2), transparent 30%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"), #dcd2bb; box-shadow: 0 14px 28px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .5); } .pin { position: absolute; top: -6px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 35% 30%, #ff8080, #a10d12 55%, #4a0406); box-shadow: 0 4px 5px rgba(0, 0, 0, .6); } .ev h5 { font-size: 15px; letter-spacing: .12em; margin-bottom: 12px; border-bottom: 1px solid rgba(42, 37, 32, .35); padding-bottom: 6px; font-weight: 400; } .redact { background: #141210; color: transparent; padding: 0 .15em; border-radius: 1px; } .hand { font-family: 'Reenie Beanie', cursive; } /* the file itself */ .dossier { padding: 30px 34px 30px; } .d-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; opacity: .75; } .d-title { margin: 18px 0 2px; font-size: 26px; font-weight: 400; letter-spacing: .3em; } .d-sign { width: 210px; height: auto; margin: -4px 0 6px -6px; filter: invert(1) brightness(.25); opacity: .85; } .d-rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-bottom: 16px; } .d-rows dt { letter-spacing: .08em; opacity: .7; } .key { position: relative; white-space: nowrap; } .key::after { /* ringed in red marker */ content: ''; position: absolute; inset: -7px -12px -6px -10px; border: 2px solid rgba(178, 18, 26, .85); border-radius: 50% 45% 55% 48%; transform: rotate(-2deg); } .d-notes { font-size: 12.5px; opacity: .9; } .stamp { position: absolute; font-family: 'Special Elite', monospace; color: rgba(168, 20, 26, .82); border: 3px double currentColor; padding: 3px 14px; letter-spacing: .14em; font-size: 26px; mix-blend-mode: multiply; pointer-events: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .st-classified { right: 30px; top: 132px; transform: rotate(-11deg); } .st-confirmed { right: 12px; top: 30px; font-size: 18px; transform: rotate(8deg); } .st-photo { right: -14px; bottom: 34px; font-size: 21px; transform: rotate(-9deg); mix-blend-mode: normal; color: rgba(205, 28, 32, .9); } /* stamped over the print and its border */ .stamp-round { position: absolute; right: 40px; bottom: 26px; width: 92px; height: 92px; border-radius: 50%; border: 3px double rgba(40, 52, 110, .7); color: rgba(40, 52, 110, .75); display: grid; place-content: center; text-align: center; font-size: 11px; letter-spacing: .2em; transform: rotate(14deg); mix-blend-mode: multiply; pointer-events: none; } .stamp-round b { font-size: 24px; font-weight: 400; letter-spacing: .05em; } /* the studio card — the thing that matters */ .studio { padding: 22px 26px 26px; background-color: #e4dccb; } .studio small { font-size: 10.5px; letter-spacing: .2em; opacity: .7; } .studio .logo { display: block; width: 100%; height: auto; margin: 12px 0 4px; pointer-events: none; } /* transparent around the letters */ .studio h4 { margin: 4px 0 8px; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .26em; white-space: nowrap; color: #191513; } /* as on the business card */ .studio p { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; } .arrow { margin-top: 10px; font-size: 26px; color: #a1121a; line-height: 1; } /* lists, scraps, slips */ .sheet ul { list-style: none; display: grid; gap: 10px; } .sheet li { display: grid; grid-template-columns: 96px 1fr; column-gap: 10px; } .sheet li .when { grid-row: span 2; opacity: .7; font-size: 12px; } .sheet li b { font-weight: 400; text-decoration: underline; text-decoration-color: rgba(42, 37, 32, .35); } .scrap { clip-path: polygon(0 3%, 12% 0, 30% 2%, 52% 0, 70% 3%, 88% 0, 100% 2%, 99% 96%, 84% 100%, 66% 97%, 44% 100%, 24% 97%, 6% 100%, 1% 95%); } .scrap .pin { top: 9px; } /* рваный край обрезает всё снаружи — кнопка воткнута чуть ниже края, целиком */ .tags { display: flex; flex-wrap: wrap; gap: 4px 12px; } .slip { background-color: #d6d0c2; } .slip dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; } .slip dt { opacity: .7; } .slip a { color: #2a2520; text-decoration: none; border-bottom: 1px solid rgba(42, 37, 32, .4); pointer-events: auto; } .slip a:hover { color: #a1121a; border-color: currentColor; } .note { padding: 22px 14px 18px; font-size: 30px; line-height: .95; text-align: center; color: #1d1a17; background: #c9c08f linear-gradient(180deg, rgba(255, 255, 255, .15), transparent 40%); box-shadow: 0 10px 18px rgba(0, 0, 0, .6); } /* photos */ .photo { padding: 12px 12px 46px; background: #ece7dc; box-shadow: 0 16px 30px rgba(0, 0, 0, .7); } .photo img { display: block; width: 100%; height: auto; } /* photos keep their own proportions */ .photo .missing { display: block; width: 100%; aspect-ratio: 29 / 31; } .photo img { filter: grayscale(1) sepia(.2) contrast(1.05); pointer-events: none; } .photo.color img { filter: sepia(.12) contrast(1.05); } /* a photo kept in colour (content.js: color: true) */ .photo .missing { display: grid; place-content: center; text-align: center; gap: 6px; background: #1b1a18; color: #8d877b; font-size: 12px; letter-spacing: .2em; } .photo .missing b { font-weight: 400; color: #b3121a; font-size: 13px; } .cap { position: absolute; left: 14px; right: 14px; bottom: 6px; font-size: 27px; color: #23201c; text-align: center; } .clip { /* binder clip */ position: absolute; top: -14px; left: calc(50% - 22px); width: 44px; height: 24px; z-index: 3; background: linear-gradient(#2b2b2b, #0c0c0c); border-radius: 3px 3px 6px 6px; box-shadow: 0 4px 6px rgba(0, 0, 0, .6); } .clip::before { content: ''; position: absolute; left: 8px; right: 8px; top: -16px; height: 20px; border: 2px solid #b9bcc0; border-bottom: 0; border-radius: 10px 10px 0 0; } /* torch, flicker, grain */ .torch { position: absolute; inset: 0; z-index: 600; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, calc(var(--dark, .86) * .06)) calc(var(--torch, 420px) * .38), rgba(0, 0, 0, calc(var(--dark, .86) * .72)) var(--torch, 420px), rgba(0, 0, 0, var(--dark, .86)) calc(var(--torch, 420px) * 1.95)); animation: flicker 6s infinite; } @keyframes flicker { 0%, 41%, 43%, 46%, 100% { opacity: 1; } 42% { opacity: calc(1 - .3 * var(--flick, 1)); } 44% { opacity: calc(1 - .18 * var(--flick, 1)); } 78% { opacity: calc(1 - .06 * var(--flick, 1)); } } .grain { position: absolute; inset: -50%; z-index: 601; pointer-events: none; opacity: var(--grain, .13); mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .5s steps(3) infinite; } @keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-7%, 4%); } 66% { transform: translate(5%, -6%); } } /* narrow screens: the papers simply stack */ .wall.stacked .board { position: relative; width: auto; height: auto; overflow: hidden; display: grid; gap: 34px; padding: 34px 14px 60px; } .wall.stacked .board { grid-template-columns: minmax(0, 1fr); } .wall.stacked .ev { position: relative; left: auto !important; top: auto !important; width: min(520px, 100%) !important; justify-self: center; } .wall.stacked .photo, .wall.stacked .note { width: min(280px, 80%) !important; } .wall.stacked .key { white-space: normal; } .wall.stacked .studio h4 { font-size: 15px; } .wall.stacked .ev:nth-child(odd) { transform: rotate(-1.5deg); } .wall.stacked .ev:nth-child(even) { transform: rotate(1.5deg); } .wall.stacked .threads, .wall.stacked .torch { display: none; } @media (max-width: 700px) { .about { grid-template-columns: 1fr; } .hud-tl { top: 18px; left: 18px; } .hud-tr { top: 18px; right: 18px; } .hud-tr, .hud-bl, .hud-br { display: none; } .hud-bc { bottom: 22px; } #hint-title { font-size: 16px; } .nav { gap: 10px; max-width: 60vw; } body.field .hud-tr.status { display: block; top: 16px; right: 14px; } body.field .hud-tl.signature { top: 14px; left: 14px; } body.field .signature img { width: min(var(--sig-w, 230px), 42vw); } body.field .side-nav { left: 10px; gap: 20px; max-width: none; color: rgba(238, 241, 243, .5); } .panel-inner { padding: 0 18px 80px; } .p-hero { grid-template-columns: 1fr; padding-top: 8vh; } } @media (prefers-reduced-motion: reduce) { #panel, #panel.open { transition: visibility 0s; } #panel.open .work, #panel.open .p-hero > * { animation-duration: .01s; animation-delay: 0s; } } /* the studio's business card, both sides, pinned as printed */ .printed { padding: 0; background: none; box-shadow: 0 14px 26px rgba(0, 0, 0, .7); } .printed img { display: block; width: 100%; height: auto; pointer-events: none; } .printed .pin { top: 10px; } /* wheel zoom on the wall: the board is cropped to its frame; drag the empty wall to look around */ .wall:not(.stacked) { position: fixed; inset: 0; margin: 0; overflow: hidden; } /* стена на весь экран, обрезка только по краю экрана */ .wall.zoomed .board { cursor: grab; } .wall.zoomed.panning .board { cursor: grabbing; } /* Instagram button: always in the bottom-right corner of a section page */ .insta { position: fixed; right: 28px; bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 11px; padding: 5px 18px 5px 8px; border-radius: 40px; text-decoration: none; background: rgba(8, 8, 8, .78); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); color: #e9e9ea; font-family: var(--sans); font-size: 12px; letter-spacing: .14em; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); transition: border-color .25s, transform .25s, background .25s; } .insta img { width: 48px; height: 48px; object-fit: contain; margin: -6px -2px -6px 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } /* the whole avatar, no crop */ .insta:hover { border-color: rgba(255, 255, 255, .6); background: rgba(20, 20, 20, .9); transform: translateY(-2px); } .insta:focus-visible { outline: 1px solid #fff; outline-offset: 3px; } #panel.open .insta { animation: wall-in .6s ease 1.5s both; } @media (max-width: 700px) { .insta { right: 14px; bottom: 14px; padding-right: 14px; font-size: 11px; } .insta img { width: 42px; height: 42px; } } /* very narrow phones: the papers' two-column rows stack, tighter padding, nothing pushes the page sideways */ @media (max-width: 520px) { .wall.stacked .board { padding: 24px 8px 70px; gap: 26px; } .wall.stacked .paper { padding: 22px 18px 20px; } .wall.stacked .d-title { font-size: 19px; letter-spacing: .18em; } .wall.stacked .d-sign { width: 170px; } .wall.stacked .d-head { flex-direction: column; gap: 2px; } .wall.stacked .d-rows, .wall.stacked .slip dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .wall.stacked .d-rows dt, .wall.stacked .slip dt { margin-top: 8px; } .wall.stacked .sheet li { grid-template-columns: minmax(0, 1fr); } .wall.stacked .studio h4 { white-space: normal; font-size: 13px; } .wall.stacked .st-classified { font-size: 17px; top: 150px; right: 14px; } .wall.stacked .ev { overflow-wrap: anywhere; } } /* ---------- PHOTO: folder spiral + endless grid (photo.js) ---------- */ #panel.photo-open { overflow: hidden; background: var(--ph-bg, #060606); } #panel.photo-open .p-hero { display: none; } #panel.photo-open .panel-inner { max-width: none; padding: 0; } #panel.photo-open .panel-head { padding: 24px 32px 18px; background: linear-gradient(var(--ph-bg, #060606) 70%, transparent); } .photo-host { position: absolute; inset: 0; z-index: 1; } /* under the sticky header (z 2) */ .pgal { position: absolute; inset: 0; overflow: hidden; user-select: none; } .ph-word { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; white-space: nowrap; font-family: 'Anton', sans-serif; font-size: clamp(60px, 21vw, 420px); line-height: .8; letter-spacing: .01em; color: var(--ph-word, #141414); transition: opacity .5s; } .ph-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1500px; transition: opacity .5s, transform .6s; } .ph-stage { touch-action: none; left: 290px; } /* centred in the space right of the folder list */ @media (max-width: 700px) { .ph-stage { left: 0; } } .ph-spin { position: relative; width: 0; height: 0; transform-style: preserve-3d; } /* tilt comes from photo.js */ .ph-card { /* size and place come from photo.js */ position: absolute; left: 0; top: 0; translate: -50% -50%; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); } .ph-card .pic { width: 100%; height: 100%; } /* затемнение карточки в глубине спирали — чёрная плёнка поверх (--dk из photo.js); filter: brightness давал каждой карточке свой слой и тормозил */ .ph-card::after, .ph-sep::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dk, 0); pointer-events: none; } /* the back of a print: dark photo paper, a faint repeated stamp, a pencil note; mirrored so it reads right from behind */ .ph-back-side { position: absolute; inset: 0; display: none; transform: scaleX(-1); border: 1px solid rgba(255, 255, 255, .07); background-color: #19191b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='64'%3E%3Ctext x='4' y='40' transform='rotate(-16 75 32)' font-family='monospace' font-size='8' letter-spacing='2' fill='%23fff' fill-opacity='.07'%3EEKSIE %C2%B7 ARCHIVE %C2%B7 %23142%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } .ph-back-side b { position: absolute; left: 7%; bottom: 6%; font: 400 1.5em/1 'Reenie Beanie', cursive; color: rgba(225, 222, 214, .42); white-space: nowrap; rotate: -3deg; } .ph-card.back .ph-back-side, .ph-sep.back .ph-back-side, .ph-card.blank .ph-back-side { display: block; } /* turned away (or a blank print): the back, not a mirrored photo */ .ph-card.blank { cursor: default; } /* the divider card between two folders: like an index card in an archive drawer, the next folder on its tab */ .ph-sep { position: absolute; left: 0; top: 0; translate: -50% -50%; cursor: pointer; display: grid; place-items: center; box-sizing: border-box; background: #cfccc4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); color: #141414; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); } .ph-sep-tab { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; padding: .3em .56em .2em .7em; background: inherit; border-radius: 3px 3px 0 0; font: 700 .8em/1 var(--sans); letter-spacing: .14em; white-space: nowrap; } .ph-dust { /* a mote of dust in the light (photo.js moves it) */ position: absolute; left: 0; top: 0; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; background: #f1eee6; box-shadow: 0 0 6px rgba(241, 238, 230, .6); } .ph-sep-ic svg { display: block; width: 4.2em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; } .pic { display: block; object-fit: cover; } .pic.stub { display: grid; place-items: center; border: 1px solid #1d1d1f; } .pic.stub span { font-size: 9px; letter-spacing: .2em; color: rgba(255, 255, 255, .55); } /* the switch: spiral ⇄ grid */ .ph-switch { all: unset; position: relative; left: 10px; z-index: 5; cursor: pointer; display: grid; gap: 10px; font-size: 14px; letter-spacing: .22em; color: rgba(255, 255, 255, .4); } .sw-cap { font-size: 10px; letter-spacing: .32em; color: rgba(255, 255, 255, .28); } .sw-row { display: flex; align-items: center; gap: 16px; } .sw-l { transition: color .25s; } .sw-track { position: relative; width: 70px; height: 32px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, .07) 6px 7px); } .sw-knob { position: absolute; top: 3px; left: 3px; width: 30px; height: 24px; border-radius: 3px; background: #e9e9ea; box-shadow: 0 0 14px rgba(255, 255, 255, .35); transition: left .28s cubic-bezier(.6, 0, .3, 1); } .sw-knob::after { content: ''; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 1px; background: rgba(0, 0, 0, .35); } .ph-switch[aria-checked="false"] .sw-l:first-child, .ph-switch[aria-checked="true"] .sw-l:last-child { color: #fff; } .ph-switch[aria-checked="true"] .sw-knob { left: 35px; } .ph-switch:hover .sw-track { border-color: #fff; } /* the folder list, left edge */ .ph-folders { z-index: 5; display: grid; gap: 2px; } /* the switch and the folder list sit together as one group, centred on the left edge */ .ph-side { position: absolute; left: 24px; top: 50%; translate: 0 -50%; z-index: 5; display: grid; gap: 40px; } .ph-f { all: unset; cursor: pointer; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px; padding: 8px 10px; min-width: 190px; border-radius: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); transition: color .2s, background .2s; } .ph-ic svg { display: block; width: 26px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: fill .2s; } .ph-rand { margin-top: 10px; position: relative; } .ph-rand::before { content: ''; position: absolute; left: 10px; right: 10px; top: -6px; border-top: 1px solid rgba(255, 255, 255, .12); } .ph-ic rect, .ph-ic circle { vector-effect: non-scaling-stroke; } .ph-rand .ph-ic circle { fill: currentColor; stroke: none; } .ph-rand:active .ph-ic svg { rotate: 90deg; } .ph-f:hover { color: #fff; } .ph-f.on { color: #fff; background: rgba(255, 255, 255, .06); } .ph-f.on .ph-ic svg { fill: rgba(255, 255, 255, .16); } .pgal.in-grid .ph-stage { opacity: 0; pointer-events: none; transform: scale(1.15); } .pgal.in-grid .ph-word { opacity: .5; } /* loading line, then the grid */ .ph-load { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #fff; z-index: 6; opacity: 0; } .ph-load.run { animation: ph-load .7s cubic-bezier(.6, 0, .3, 1) forwards; } @keyframes ph-load { 0% { width: 0; opacity: 1; } 85% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } } .ph-grid { position: absolute; inset: 0; z-index: 3; cursor: grab; opacity: 0; pointer-events: none; touch-action: none; } .ph-grid.dragging { cursor: grabbing; } .pgal.grid-in .ph-grid { opacity: 1; pointer-events: auto; transition: opacity .3s; } .ph-tiles { position: absolute; inset: 0; } .ph-tile { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; } .ph-head { /* folder name between folders in the grid */ position: absolute; top: 0; height: 120px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); box-sizing: border-box; will-change: transform; } .ph-head-t { font-family: var(--sans); font-size: clamp(22px, 2.6vw, 40px); line-height: 1; letter-spacing: .3em; /* like PORTFOLIO on the loading screen */ color: #e9e9ea; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-head-n { font-size: 10px; letter-spacing: .24em; color: rgba(255, 255, 255, .45); white-space: nowrap; padding-bottom: 6px; } .ph-frame { position: relative; overflow: hidden; background: #0d0d0e; } .ph-frame .pic { width: 100%; height: 100%; } .ph-frame .px { /* the pixel phase: a tiny version blown up, then it clears */ position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; } .pgal.grid-in .ph-frame .px { animation: ph-sharpen .6s steps(4) var(--d) forwards; } @keyframes ph-sharpen { to { opacity: 0; } } .ph-tile figcaption { display: flex; justify-content: space-between; gap: 8px; height: 30px; padding-top: 7px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6f7278; } .ph-tile figcaption span:first-child { color: #a9abb0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-tile:hover .ph-frame { outline: 1px solid rgba(255, 255, 255, .5); } .ph-tile.flash .ph-frame { animation: ph-flash 1.8s ease-out; } /* the photo RANDOM picked */ @keyframes ph-flash { 0%, 40% { outline: 2px solid #fff; outline-offset: 6px; } 100% { outline: 2px solid transparent; outline-offset: 0; } } /* one photo big */ .ph-box { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(0, 0, 0, .95); } .ph-box.on { display: grid; } .ph-box-pic { max-width: 88vw; max-height: 80vh; display: grid; place-items: center; } .ph-box-pic .pic { max-width: 88vw; max-height: 80vh; width: auto; height: 80vh; object-fit: contain; } .ph-box-pic .pic.stub { height: min(80vh, 88vw); } .ph-box-cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8b8e94; } .ph-box button { all: unset; position: absolute; cursor: pointer; color: rgba(255, 255, 255, .7); font-size: 34px; line-height: 1; padding: 12px 18px; } .ph-box button:hover { color: #fff; } .ph-box .ph-x { top: 16px; left: 24px; z-index: 2; } /* выход — всегда слева вверху, как HOME */ .ph-box .ph-prev { left: 12px; top: 50%; translate: 0 -50%; z-index: 2; } .ph-box .ph-next { right: 12px; top: 50%; translate: 0 -50%; z-index: 2; } @media (max-width: 700px) { /* phones: the spiral fills the top; under it one block — the switch, then the folders two to a row */ .ph-stage { top: 56px; bottom: var(--dock, 260px); } .ph-side { left: 20px; right: 20px; top: auto; bottom: calc(env(safe-area-inset-bottom) + 42px); translate: none; gap: 14px; padding-top: 22px; touch-action: none; /* свайп вбок по папкам крутит спираль (photo.js), браузер его не перехватывает */ } .ph-side::before { /* the grid scrolls under it: a solid floor down to the screen's edge */ content: ''; position: absolute; z-index: -1; left: -20px; right: -20px; top: 0; bottom: calc(-1 * (env(safe-area-inset-bottom) + 42px)); background: linear-gradient(rgba(6, 6, 6, 0), var(--ph-bg, #060606) 22px); pointer-events: none; } .ph-switch { left: 0; justify-self: center; font-size: 12px; } .ph-switch .sw-cap { display: none; } .ph-switch .sw-track { width: 62px; height: 28px; } .ph-switch .sw-knob { width: 26px; height: 20px; } .ph-switch[aria-checked="true"] .sw-knob { left: 31px; } .ph-folders { grid-template-columns: 1fr 1fr; gap: 6px; } .ph-f { min-width: 0; grid-template-columns: 20px 1fr; gap: 9px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .09); line-height: 1.3; } .ph-fn .amp { display: block; } .ph-rand { margin-top: 0; } .ph-rand::before { display: none; } .ph-ic svg { width: 20px; height: 16px; } /* под палец: кнопки папок и переключатель не ниже 44px, мелкие подписи — 12px */ .ph-f { box-sizing: border-box; min-height: 44px; } .ph-rand .ph-fn { font-size: 12px; } .ph-switch { padding: 8px 14px; margin: -8px 0; } .ph-head-n, .ph-box-cap { font-size: 12px; } /* просмотр фото: стрелки не лежат на снимке — опущены вниз, по бокам от подписи */ .ph-box .ph-prev, .ph-box .ph-next { top: auto; bottom: 33px; translate: none; } .ph-box .ph-prev { left: 24px; } .ph-box .ph-next { right: 24px; } } /* ---------------------------------------------------------------- BOOK (ART): 3D-листалка, book.js */ .work.is-book { cursor: pointer; } .work.is-book img { box-shadow: 6px 8px 0 -2px #0d0d0e, 6px 8px 0 -1px #2a2a2c; } /* намёк на толщину книги */ .bk { position: fixed; inset: 0; z-index: 45; background: radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, .045), rgba(0, 0, 0, .3) 70%), var(--bk-bg, #1f1e1e); opacity: 0; transition: opacity .45s ease; user-select: none; -webkit-user-select: none; touch-action: none; } .bk.on { opacity: 1; } .bk-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .bk.grab, .bk.grab .bk-c { cursor: grabbing !important; } .bk button { all: unset; cursor: pointer; color: rgba(233, 233, 234, .75); transition: color .2s, opacity .2s; } .bk button:hover { color: #fff; } .bk button:disabled { opacity: .2; cursor: default; } .bk-top { position: absolute; top: 26px; right: 32px; display: flex; gap: 18px; align-items: baseline; pointer-events: none; font-family: var(--sans); color: #e9e9ea; } .bk-t { font-size: 15px; letter-spacing: .3em; } .bk-y { font-size: 11px; letter-spacing: .2em; color: #8b8e94; } .bk .bk-x { position: absolute; top: 16px; left: 24px; } .bk-bot { position: absolute; bottom: 58px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 26px; font-size: 12px; letter-spacing: .2em; color: #b9bbbf; } .bk .bk-bot button { font-size: 22px; padding: 4px 10px; } .bk-n { min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; } .bk .bk-hint { z-index: 2; } .bk-load { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 140px; height: 2px; background: #333; overflow: hidden; transition: opacity .4s; pointer-events: none; } .bk-load i { position: absolute; inset: 0; width: 40%; background: var(--red); animation: bk-load 1s ease-in-out infinite; } .bk.ready .bk-load { opacity: 0; } @keyframes bk-load { from { left: -40%; } to { left: 100%; } } @media (max-width: 700px) { .bk-top { top: 20px; right: 16px; } .bk .bk-x { top: 10px; left: 8px; } .bk-top .bk-y { display: none; } .bk-bot { bottom: 50px; } } .work.is-book figcaption span:first-child { text-transform: none; } /* ---------------------------------------------------------------- ART: стена с полками (shelf.js), шрифты как на PHOTO */ #panel.shelf-open { overflow: hidden; background: #060606; } #panel.shelf-open .p-hero { display: none; } #panel.shelf-open .panel-inner { max-width: none; padding: 0; } #panel.shelf-open .panel-head { padding: 24px 32px 18px; background: linear-gradient(#060606 30%, transparent); } .shelf-host { position: absolute; inset: 0; z-index: 1; } .shelf { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; } .sh-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } .sh-labels { position: absolute; inset: 0; pointer-events: none; } .sh-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 8px; text-align: center; transition: opacity .3s; will-change: transform; } .sh-t { font-family: var(--sans); font-size: clamp(13px, 1.25vw, 18px); line-height: 1; letter-spacing: .3em; margin-right: -.3em; color: #e9e9ea; text-transform: uppercase; white-space: nowrap; } .sh-t { text-transform: none; } /* названия — как подписаны */ .sh-m { font-family: var(--hint); font-size: 9.5px; letter-spacing: .2em; margin-right: -.2em; color: rgba(255, 255, 255, .45); white-space: nowrap; transition: color .25s; } .sh-label.on .sh-m { color: #fff; } .sh-hint { position: absolute; right: 32px; bottom: 28px; font-size: 10px; letter-spacing: .3em; color: rgba(255, 255, 255, .4); pointer-events: none; transition: opacity .6s; } .sh-hint.gone { opacity: 0; } @media (max-width: 700px) { #panel.shelf-open .panel-head { padding: 18px 16px 14px; } .sh-hint { right: 16px; bottom: 20px; } } .sh-label.sel .sh-t { color: var(--red); } /* выбранная в настройках развески */ .sh-m.sh-open { font-size: 10.5px; letter-spacing: .22em; margin-right: -.22em; color: rgba(255, 255, 255, .62); } /* выход / назад везде одинаковый: слева вверху, как ← HOME (просмотр фото и картин, книга) */ .ph-box .ph-x, .bk .bk-x, .st-story .ph-x { font-family: var(--mono); font-size: 15px; line-height: 1; letter-spacing: .18em; color: #e9e9ea; padding: 8px; transition: color .25s; } .ph-box .ph-x:hover, .bk .bk-x:hover, .st-story .ph-x:hover { color: var(--red); } @media (max-width: 700px) { .ph-box .ph-x { top: 10px; left: 8px; } } /* фон PHOTO: графитовые плашки со швами, как на кубах главного экрана, — едва заметно, к краям темнее. Сила и размер — в ?tune (PHOTO: спираль → Фон: плашки) */ .pgal::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--ph-plate, .6); --ps: var(--ph-plate-size, 180px); background: radial-gradient(125% 95% at 50% 50%, transparent 35%, rgba(0, 0, 0, .6) 100%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 2px, rgba(255, 255, 255, .035) 2px 3px, transparent 3px var(--ps)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 2px, rgba(255, 255, 255, .03) 2px 3px, transparent 3px calc(var(--ps) * .76)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px calc(var(--ps) * 2.37)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px calc(var(--ps) * 1.53)); z-index: 1; /* поверх большого слова, под спиралью — иначе буквы дают пятна */ } .pgal .ph-stage { z-index: 2; } /* подсказка внизу экрана — везде одна: шрифт и разрядка как у «CLICK A MODULE» на главном экране */ .ui-hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 6; pointer-events: none; white-space: nowrap; font-family: var(--hint); font-size: 10px; font-weight: 400; letter-spacing: .26em; margin-right: -.26em; color: rgba(233, 233, 234, .45); } #p-hint { opacity: 0; transition: opacity .4s; } #panel.open #p-hint { opacity: 1; transition-delay: 1.6s; } .ph-box .ph-box-cap { bottom: 52px; } @media (max-width: 700px) { .ui-hint { font-size: 9px; letter-spacing: .2em; margin-right: -.2em; bottom: 16px; } #panel.photo-open #p-hint { display: none; } /* на телефоне внизу — ряд папок */ } #panel.shelf-open #p-brand { visibility: hidden; } /* в ART года справа вверху не нужны */ /* ---------------------------------------------------------------- STUDIO: хромовое лого в каменной пустоши (studio3d.js) */ #panel.studio-open { overflow: hidden; background: #0b0b0c; } #panel.studio-open .p-hero, #panel.studio-open #p-brand { display: none; } #panel.studio-open .panel-inner { max-width: none; padding: 0; } #panel.studio-open .panel-head { padding: 24px 32px 18px; background: linear-gradient(rgba(11, 11, 12, .85) 20%, transparent); position: relative; z-index: 3; } .studio-host { position: absolute; inset: 0; z-index: 1; } .st-scene { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; } .st-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } .st-ui { position: absolute; inset: 0; pointer-events: none; } .st-ch { position: absolute; opacity: 0; will-change: opacity, transform; text-transform: none; } .st-ch a { pointer-events: auto; } .st-intro { left: 0; right: 0; top: 66%; display: grid; justify-items: center; gap: 14px; text-align: center; } .st-big { font-family: var(--head); font-weight: 500; font-size: clamp(15px, 1.5vw, 21px); letter-spacing: .62em; margin-right: -.62em; color: #ececed; } /* подпись к лого — шрифтом заголовков, не как подсказка «scroll» внизу */ .st-role { font-family: var(--head); font-weight: 400; font-size: 15px; letter-spacing: .2em; margin-right: -.2em; color: #fff; white-space: pre; } /* white-space: pre — пробелы между надписями не схлопываются */ .st-role b { font-weight: 500; color: rgba(233, 233, 234, .9); } @media (max-width: 700px) { .st-role { font-size: 12px; letter-spacing: .14em; margin-right: -.14em; } } .st-proj { top: 50%; width: min(390px, 33vw); margin-top: -120px; } .st-proj.r { left: 52vw; } /* текст рядом со стендом: стенд слева — текст сразу правее середины */ .st-proj.l { right: 52vw; text-align: right; } /* и зеркально: текст слева от стенда — выравнен к стенду */ .st-k { font-family: var(--hint); font-size: 14px; letter-spacing: .12em; text-transform: lowercase; color: rgba(233, 233, 234, .5); margin-top: 10px; } .st-t { font-family: var(--head); font-weight: 500; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.05; letter-spacing: .14em; color: #f0f0f1; margin: 8px 0 18px; } .st-p { font-family: var(--hint); font-size: 16px; line-height: 1.55; color: rgba(233, 233, 234, .7); } .st-go { display: inline-block; margin-top: 24px; padding-bottom: 5px; font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: #e9e9ea; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); transition: color .25s, border-color .25s; } .st-go:hover { color: var(--red); border-color: var(--red); } .st-end { left: 0; right: 0; bottom: 15%; display: grid; justify-items: center; gap: 6px; text-align: center; } .st-go.big { margin-top: 10px; font-family: var(--head); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .3em; margin-right: -.3em; border: 0; } .st-mail { margin-top: 8px; font-family: var(--hint); font-size: 14px; letter-spacing: .12em; color: rgba(233, 233, 234, .45); text-decoration: none; transition: color .25s; } .st-mail:hover { color: #fff; } .st-prog { position: absolute; right: 26px; top: 50%; translate: 0 -50%; display: grid; gap: 4px; z-index: 2; transition: opacity .6s; } .st-prog i { display: block; width: 34px; height: 14px; cursor: pointer; position: relative; } .st-prog i::after { content: ''; position: absolute; right: 0; top: 50%; width: 12px; height: 1px; background: rgba(255, 255, 255, .3); transition: width .4s, background .4s; } .st-prog i:hover::after { background: rgba(255, 255, 255, .7); } .st-prog i.on::after { width: 28px; background: var(--red); } .st-scene.narrow .st-proj { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 52px); margin-top: 0; text-align: left; } .st-scene.narrow .st-p { font-size: 16px; line-height: 1.45; color: rgba(233, 233, 234, .82); } .st-scene.narrow .st-k { color: rgba(233, 233, 234, .62); } /* телефон: низ кадра темнеет под текстом — стенд стоит выше, буквы читаются на ровном тёмном */ .st-scene.narrow .st-ui::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; background: linear-gradient(rgba(9, 9, 10, 0), rgba(9, 9, 10, .82) 42%, rgba(9, 9, 10, .92)); } .st-scene.narrow .st-t { margin-bottom: 10px; } /* телефон: ссылки под палец — невидимая зона нажатия вокруг текста, сам текст не сдвигается */ .st-scene.narrow .st-go, .st-scene.narrow .st-mail { position: relative; } .st-scene.narrow .st-go::before, .st-scene.narrow .st-mail::before { content: ''; position: absolute; inset: -12px -10px; } .st-scene.narrow .st-intro { top: 64%; } .st-go + .st-go { margin-left: 28px; } /* «HOW IT STARTED →» и «VISIT SITE →» рядом */ /* телефон: лента стендов — готовые кадры 3D-сцены (assets/studio/m), по одному на экран, текст главы поверх */ .st-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; background: #0b0b0c; scrollbar-width: none; } .st-feed::-webkit-scrollbar { display: none; } .st-f-sec { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; } .st-f-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; } .st-f-sec::after { /* низ кадра темнеет под текстом, как в 3D-версии */ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(9, 9, 10, 0), rgba(9, 9, 10, .82) 42%, rgba(9, 9, 10, .92)); } .st-scene.feed .st-ch { opacity: 1; z-index: 2; } /* STUDIO: «история идеи» — экран поверх сцены, шаги сверху вниз (studio3d.js, content.js → story) */ .st-story { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; background: #0b0b0c; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; } .st-story.on { opacity: 1; visibility: visible; transition: opacity .4s; } .st-story .ph-x { background: none; border: 0; margin: 0; position: fixed; top: 16px; left: 24px; z-index: 3; cursor: pointer; } .st-s-top { position: fixed; left: 0; right: 0; top: 0; height: 84px; z-index: 2; pointer-events: none; background: linear-gradient(#0b0b0c 45%, rgba(11, 11, 12, 0)); } .st-s-in { max-width: 1240px; margin: 0 auto; padding: 120px 56px 140px; } .st-s-t { font-family: var(--head); font-weight: 500; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; letter-spacing: .14em; color: #f0f0f1; margin: 0; } /* шапка истории = экран загрузки: подпись, под ней слово (те же пропорции, что .intro-sign / .intro-word) */ .st-s-cover { --sw: min(440px, 72vw); display: grid; justify-items: center; margin: 0; font-weight: 400; } .st-s-sign { width: var(--sw); height: auto; display: block; } .st-s-word { margin-top: calc(var(--sw) * -0.12); font-family: var(--head); font-weight: 400; font-size: calc(var(--sw) * 0.075); line-height: 1.1; letter-spacing: .3em; margin-right: -.3em; color: #fff; } /* шаг: картинки слева, название и текст справа */ .st-s-step { margin-top: 110px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; } .st-s-step.nopics .st-s-txt { grid-column: 2; } .st-s-txt { padding-top: 4px; } .st-s-h { font-family: var(--head); font-weight: 500; font-size: 22px; letter-spacing: .2em; color: #e9e9ea; margin: 0 0 18px; } .st-s-pics { display: flex; gap: 16px; align-items: flex-start; } .st-s-pics img { flex: var(--a, 1) 1 0; min-width: 0; width: 0; height: auto; display: block; background: #151516; } .st-s-pics img:only-child { flex: none; width: auto; max-width: 100%; max-height: 82vh; } /* одна вертикальная картинка не растягивается на весь экран */ .st-s-pics.stack { flex-direction: column; } .st-s-pics.stack img { flex: none; width: 100%; } .st-s-p { font-family: var(--hint); font-size: 16px; line-height: 1.55; color: rgba(233, 233, 234, .78); margin: 0; max-width: 420px; } @media (max-width: 700px) { .st-story .ph-x { top: calc(env(safe-area-inset-top) + 13px); left: calc(var(--edge, 20px) - 8px); padding: 14px 8px; margin-top: -6px; } .st-s-top { height: calc(env(safe-area-inset-top) + 76px); } .st-s-in { padding: calc(env(safe-area-inset-top) + 96px) var(--edge, 20px) calc(env(safe-area-inset-bottom) + 72px); } .st-s-t { font-size: 30px; } .st-s-cover { --sw: min(300px, 72vw); } .st-s-step { margin-top: 64px; grid-template-columns: minmax(0, 1fr); gap: 18px; } .st-s-step.nopics .st-s-txt { grid-column: 1; } .st-s-txt { padding-top: 0; } .st-s-h { font-size: 18px; margin-bottom: 12px; } .st-s-pics { flex-direction: column; gap: 12px; } .st-s-pics img { flex: none; width: 100%; } } @media (max-width: 700px) { #panel.studio-open .panel-head { padding: 18px 16px 14px; } .st-prog { right: 6px; } } /* ---------------------------------------------------------------- DESIGN: проекты вещами на тёмном столе (design3d.js) */ #panel.design-open { overflow: hidden; background: #0a0a0b; } #panel.design-open .p-hero, #panel.design-open #p-brand { display: none; } #panel.design-open .panel-inner { max-width: none; padding: 0; } #panel.design-open .panel-head { padding: 24px 32px 18px; background: linear-gradient(rgba(10, 10, 11, .85) 20%, transparent); position: relative; z-index: 3; } .design-host { position: absolute; inset: 0; z-index: 1; } .dz-scene { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; } .dz-folder { z-index: 2; background: #0a0a0b; opacity: 0; transition: opacity .35s; pointer-events: none; } /* папка поверх пульта; пока собирается — невидима и не ловит мышь */ .dz-folder.on { opacity: 1; pointer-events: auto; } /* DESIGN галереей (design3d.js runIndex): слева папки как в PHOTO, за чертой — работы по папкам, вещами и плитками */ /* размеры и отступы — CSS-переменные --gx-…, их пишет applyGallery() из настроек DESIGN (панель ?tune, «ГАЛЕРЕЯ: …») */ .dx { position: absolute; inset: 0; transition: opacity .35s, visibility 0s; } .dz-projs:has(> li:only-child) { display: none; } /* одна работа — список из одной кнопки не нужен */ /* галерея под открытой сценой: после затухания совсем скрыта и её парение на паузе — браузер её не рисует */ .dx.away { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .35s, visibility 0s .35s; } .dx.away * { animation-play-state: paused; } .dx::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--dx-line, 268px); width: 1px; background: #fff; opacity: var(--gx-div, 0); z-index: 4; pointer-events: none; } .dx-side { position: absolute; left: var(--gx-side-x, 24px); top: 50%; translate: 0 -50%; z-index: 5; } .dx-list { position: absolute; top: 0; bottom: 0; left: calc(var(--dx-line, 268px) + 1px); right: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: var(--gx-top, 92px) var(--gx-pad, 56px) 120px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; /* сверху и снизу работы растворяются — не лезут под HOME и под подсказку */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 74px, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 74px, #000 calc(100% - 96px), transparent 100%); } .dx-group { --glow: #8a8a8a; max-width: var(--gx-maxw, 1200px); margin-inline: auto; } .dx-group + .dx-group { margin-top: var(--gx-sec, 110px); } /* заголовок папки: одной строкой, без линий */ .dx-head { display: flex; justify-content: var(--gx-head-just, center); margin-bottom: var(--gx-head-gap, 36px); } .dx-head-t { font-family: var(--head); font-weight: 500; font-size: calc(var(--gx-head, 24px) * var(--lf, 1)); line-height: 1.2; letter-spacing: var(--gx-head-ls, .22em); margin-right: calc(-1 * var(--gx-head-ls, .22em)); color: #fff; opacity: var(--gx-head-a, .92); text-transform: uppercase; text-align: center; } .dx-what .amp, .dv-next-n .amp { display: block; } /* куб вокруг галереи: галерея висит внутри куба модуля. Пять граней в перспективе (задняя, бока, пол, потолок) из графитовых плашек со швами, как кубы на главном экране; рёбра и отсвет — цветом раздела (--rm-ac, его ведёт прокрутка в design3d.js). Всё настраивается в ?tune → «ГАЛЕРЕЯ: куб вокруг». */ .dx-room { display: var(--rm-on, block); position: absolute; inset: 0 var(--rm-right, 0px) 0 0; z-index: 0; /* --rm-right: куб центрирован по галерее, а не по экрану */ overflow: hidden; pointer-events: none; perspective: var(--rm-p, 900px); perspective-origin: 50% var(--rm-y, 50%); --rm-ac: var(--rm-color, #819598);} .rm-box { position: absolute; inset: 0; transform-style: preserve-3d; } .rm-f { position: absolute; display: block; --ps: var(--rm-plate, 170px); --ln: color-mix(in srgb, var(--rm-ac) calc(100% * min(1, var(--rm-edge, 1))), transparent); --gl: color-mix(in srgb, var(--rm-ac) calc(14% * var(--rm-edge, 1)), transparent); --wash: color-mix(in srgb, var(--rm-ac) calc(16% * var(--rm-wash, .7)), transparent); --sh: rgba(0, 0, 0, calc(.85 * var(--rm-shade, .6))); background-color: rgb(calc(13 * var(--rm-wall, 1)) calc(13 * var(--rm-wall, 1)) calc(15 * var(--rm-wall, 1))); background-image: linear-gradient(var(--ln-dir), var(--ln) 0 1.5px, transparent 1.5px calc(100% - 1.5px), var(--ln) calc(100% - 1.5px)), linear-gradient(var(--ln-dir), var(--gl) 0, transparent 40px, transparent calc(100% - 40px), var(--gl) 100%), linear-gradient(var(--to-back), var(--sh) 0, transparent 55%, var(--wash) 100%), repeating-linear-gradient(90deg, rgba(0, 0, 0, calc(.55 * var(--rm-seam, .7))) 0 2px, rgba(255, 255, 255, calc(.05 * var(--rm-seam, .7))) 2px 3px, transparent 3px var(--ps)), repeating-linear-gradient(0deg, rgba(0, 0, 0, calc(.55 * var(--rm-seam, .7))) 0 2px, rgba(255, 255, 255, calc(.04 * var(--rm-seam, .7))) 2px 3px, transparent 3px calc(var(--ps) * .76)); transition: background-color .3s; } /* боковые стены, пол и потолок уходят от края экрана вглубь на --rm-d; задняя стена — на этой глубине */ .rm-left { left: 0; top: 0; bottom: 0; width: var(--rm-d, 45vw); transform-origin: left center; transform: rotateY(90deg); --to-back: to right; --ln-dir: to bottom; } .rm-right { right: 0; top: 0; bottom: 0; width: var(--rm-d, 45vw); transform-origin: right center; transform: rotateY(-90deg); --to-back: to left; --ln-dir: to bottom; } .rm-top { display: var(--rm-floor, block); left: 0; right: 0; top: 0; height: var(--rm-d, 45vw); transform-origin: center top; transform: rotateX(-90deg); --to-back: to bottom; --ln-dir: to right; } .rm-floor { display: var(--rm-floor, block); left: 0; right: 0; bottom: 0; height: var(--rm-d, 45vw); transform-origin: center bottom; transform: rotateX(90deg); --to-back: to top; --ln-dir: to right; } .rm-back { inset: 0; transform: translateZ(calc(-1 * var(--rm-d, 45vw))); --to-back: to bottom; --ln-dir: to right; --sh: transparent; --wash: transparent; --ln: transparent; --gl: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rm-ac) calc(100% * min(1, var(--rm-edge, 1))), transparent), inset 0 0 calc(70px * var(--rm-edge, 1)) color-mix(in srgb, var(--rm-ac) 22%, transparent); } /* свет в кубе: куб — фон и не спорит с работами. Поверх граней — общее приглушение и виньетка (углы и края уходят в темноту, светлее только середина, где висят работы). ?tune → «куб вокруг» → «Свет: …» */ .dx-room::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 75% at 50% var(--rm-y, 50%), transparent calc(48% - 25% * var(--rm-vig, .7)), rgba(0, 0, 0, calc(.92 * min(1, var(--rm-vig, .7)))) 100%), linear-gradient(rgba(0, 0, 0, var(--rm-dim, .4)), rgba(0, 0, 0, var(--rm-dim, .4))); } .rm-back::after { /* отсвет цвета раздела в середине задней стены */ content: ''; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--rm-ac) calc(30% * var(--rm-back, .5)), transparent), transparent 75%); } .dx-head.has-img { align-items: center; } .dx-head-img { display: block; height: var(--gx-head-img, 90px); width: auto; max-width: 100%; object-fit: contain; } /* вещи: без рамок, на мягком свечении цвета папки, подпись по центру */ .dx-objs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gx-obj-row, 30px) var(--gx-obj-gap, 44px); } .dx-obj { all: unset; cursor: pointer; width: min(var(--gx-obj, 290px), 100%); display: grid; justify-items: center; align-content: start; text-align: center; } /* невесомость: вещи медленно парят (своя длина и фаза у каждой — задаёт design3d.js), плитки — слабее и без поворота. Глубина (меньше, темнее, отстаёт при прокрутке) — transform и opacity из design3d.js. Сила — ?tune «ГАЛЕРЕЯ: невесомость» */ .dx-o-pic { --fa: var(--gx-float-y, 7px); --fra: var(--gx-float-r, .8deg); transform-origin: 50% 93%; transition: opacity .4s; } .dx-o-pic img { animation: dx-float calc(var(--fd, 9s) / var(--gx-float-sp, 1)) ease-in-out var(--fdl, 0s) infinite; } /* парит вещь, ниша / полка стоят */ .dx-tiles .dx-tile { --fa: calc(var(--gx-float-y, 7px) * var(--gx-float-tiles, .4)); --fra: 0deg; /* сильнее «all: unset» ниже */ animation: dx-float calc(var(--fd, 9s) / var(--gx-float-sp, 1)) ease-in-out var(--fdl, 0s) infinite; } @keyframes dx-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: calc(var(--fx, 1) * var(--fa) * .35) calc(-1 * var(--fa)); rotate: calc(var(--fr, 1) * var(--fra)); } 66% { translate: calc(var(--fx, 1) * var(--fa) * -.25) calc(-.45 * var(--fa)); rotate: calc(var(--fr, 1) * var(--fra) * -.6); } } @media (prefers-reduced-motion: reduce) { .dx-o-pic img, .dx-tile, .dx-frame { animation: none !important; } } .dx-o-pic { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; } .dx-o-pic::before { content: ''; position: absolute; inset: 4% 4% 10%; border-radius: 50%; pointer-events: none; scale: var(--gx-glow-s, 1); background: radial-gradient(closest-side, color-mix(in srgb, color-mix(in srgb, var(--glow) var(--gx-tint, 70%), #fff) calc(30% * var(--gx-glow, .7)), transparent), transparent); opacity: .85; transition: opacity .4s, scale .6s cubic-bezier(.2, .7, .2, 1); } .dx-o-pic img { position: relative; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1); } .dx-o-pic.in img { opacity: 1; } .dx-obj.flat .dx-o-pic img { width: 88%; height: auto; border: 1px solid rgba(255, 255, 255, .12); } /* СТЕНА-САЛОН (?tune → «ГАЛЕРЕЯ: стена-салон»): у работы рамки разного размера — крупная, средние, мелкие парой одна над другой; ряд шире галереи уменьшается целиком (--k из design3d.js). Под рамками — табличка, как в музее. */ .dx-set.dx-salon { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; } .dx-wbox { position: relative; isolation: isolate; display: grid; justify-items: start; max-width: 100%; } .dx-wbox::before { /* свет над работой: тёплое пятно на стене, сверху ярче */ content: ''; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: -18%; translate: -50% 0; width: calc(130% * var(--gw-light-s, 1)); height: calc(120% * var(--gw-light-s, 1)); background: radial-gradient(50% 50% at 50% 38%, rgba(255, 224, 178, calc(.2 * var(--gw-light, .35))), transparent 100%); } .dx-wrow { --H: calc(var(--gw-h, 300px) * var(--k, 1)); --g: calc(var(--gw-gap, 18px) * var(--k, 1)); --e: calc(2 * (var(--gw-fw, 5px) + var(--gw-mat, 0px))); justify-self: center; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--g); } .dx-wrow + .dx-wrow { margin-top: var(--g); } .dx-wcol { display: flex; flex-direction: column; align-items: center; gap: var(--g); } .dx-frame { all: unset; cursor: pointer; display: block; flex: none; padding: var(--gw-mat, 0px); background: var(--gw-mc, #e8e3d8); border: var(--gw-fw, 5px) solid var(--gw-fc, #141416); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .05); /* тонкий край — рамку видно на тёмной стене */ opacity: 0; transition: opacity .45s, translate .35s cubic-bezier(.2, .7, .2, 1), transform .35s; --fa: calc(var(--gx-float-y, 7px) * var(--gx-float-tiles, .4)); --fra: 0deg; animation: dx-float calc(var(--fd, 9s) / var(--gx-float-sp, 1)) ease-in-out var(--fdl, 0s) infinite; } .dx-frame.in { opacity: 1; } .dx-frame img { display: block; width: auto; max-width: none; } .dx-frame.b img { height: var(--H); } .dx-frame.m img { height: calc(var(--H) * var(--gw-mid, .72)); } .dx-frame.s img { height: calc((var(--H) - var(--g) - var(--e)) / 2); } /* пара мелких — ровно в высоту крупной */ /* рамка по пропорции картинки, площадь у всех в группе одна (--side — сторона равного квадрата: логотипы / постеры и баннеры) */ .dx-frame.lg img { width: calc(var(--side, 200px) * var(--k, 1) * var(--rw, 1)); height: calc(var(--side, 200px) * var(--k, 1) * var(--rh, 1)); object-fit: contain; } /* постеры, баннеры, неон: в ряду картинки одной высоты, ряд ровно --gx-wall-w (минус промежутки и рамки) — вместе ровный прямоугольник */ .dx-wrow.jr { --h: calc((var(--gx-wall-w, 1000px) * var(--k, 1) - (var(--n, 3) - 1) * var(--g) - var(--n, 3) * 2 * var(--gw-fw, 5px)) / var(--sum, 3)); } .dx-wrow.jr .dx-frame.lg img { height: var(--h); width: calc(var(--h) * var(--ar, 1)); } .dx-frame:hover, .dx-frame:focus-visible { translate: 0 -5px; } .dx-frame:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 3px; } /* табличка: вплотную под своей работой, слева по краю рамок (у вещей — по центру, на кромке полки) */ .dx-cap.dx-plq { justify-self: start; justify-items: start; text-align: left; gap: 3px; margin-top: var(--pq-gap, 16px); padding: 9px 14px 10px; background: var(--pq-bg, #e8e3d8); border-radius: 1px; } .dx-obj .dx-cap.dx-plq { justify-self: center; justify-items: center; text-align: center; } .dx-plq .dx-what { color: var(--pq-fg, #141416); font-size: calc(var(--pq-size, 12px) * var(--lf, 1)); letter-spacing: .14em; } .dx-plq .dx-kind { color: var(--pq-sub, rgba(20, 20, 22, .62)); font-size: calc(var(--pq-size, 12px) * .88 * var(--lf, 1)); } .dx-obj:hover .dx-plq .dx-what, .dx-set.dx-salon:hover .dx-plq .dx-what { color: var(--red); } /* полка под вещами: вещь парит над ней, полка и табличка на месте; соседние полки сходятся в одну */ .dx-shelf { display: var(--gs-on, block); width: calc(100% + var(--gx-obj-gap, 44px)); height: var(--gs-h, 10px); margin-top: -7.5%; background: linear-gradient(180deg, color-mix(in srgb, var(--gs-c, #2a2a2e), #fff 14%) 0 1px, var(--gs-c, #2a2a2e) 1px, color-mix(in srgb, var(--gs-c, #2a2a2e), #000 45%)); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); } .dx-obj.flat .dx-o-pic { place-items: end center; padding-bottom: 7.5%; box-sizing: border-box; } .dx-obj.flat .dx-o-pic img { border: var(--gw-fw, 5px) solid var(--gw-fc, #141416); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } .dx-obj:hover .dx-o-pic img, .dx-obj:focus-visible .dx-o-pic img { transform: translateY(calc(-1 * var(--gx-lift, 8px))) scale(1.03); } .dx-obj:hover .dx-o-pic::before, .dx-obj:focus-visible .dx-o-pic::before { opacity: 1; scale: calc(var(--gx-glow-s, 1) * 1.08); } .dx-obj.wait .dx-o-pic::before { animation: dx-wait .7s ease-in-out infinite alternate; } /* автомат собирается — свечение дышит */ @keyframes dx-wait { to { opacity: 1; scale: calc(var(--gx-glow-s, 1) * 1.12); } } .dx-cap { display: grid; gap: 6px; justify-items: center; text-align: center; margin-top: var(--gx-cap-gap, 6px); position: relative; } .dx-what { font-family: var(--head); font-size: calc(var(--gx-cap, 12.5px) * var(--lf, 1)); font-weight: 500; letter-spacing: .16em; line-height: 1.35; color: #fff; text-transform: uppercase; } .dx-kind { font-size: calc(var(--gx-kind, 11px) * var(--lf, 1)); letter-spacing: .08em; line-height: 1.4; color: rgba(255, 255, 255, .45); } .dx-obj:hover .dx-what { color: var(--red); } /* СТЕНА (?tune → «ГАЛЕРЕЯ: тёмная стена, свет, полки»): список галереи во всю ширину, фон — графитовые плашки, как на ART (бесшовная картинка tools/render-wall.html), сильно притушены — стена почти чёрная, как PHOTO; прокручивается вместе с работами (background-attachment: local) — едем вниз по стене. Папки висят поверх слева. Над каждой работой — холодное пятно света. Полки и подписи — как в ART: вещи, которые можно поставить, стоят на полках, картинки висят в тонких белых рамках без полок; название — под полкой или под рамками. */ .dx.wallmode .dx-list { left: 0; padding-left: calc(var(--dx-line, 268px) + 1px + var(--gx-pad, 56px)); -webkit-mask-image: none; mask-image: none; background: var(--wl-shade, none), var(--wl-img, url("assets/design/wall-plates.webp")) 0 0 / var(--wl-size, 1500px) auto repeat, var(--wl-c, #0b0b0c); background-attachment: local, local, local; } .dx.wallmode::after { /* как на ART: стена ровная, без тёмных боков; темнеют только верх и низ — HOME и подсказка читаются */ content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 70px, transparent calc(100% - 90px), rgba(0, 0, 0, .5)); } .dx.wallmode .dx-side { z-index: 5; } .dx.wallmode .dx-group { position: relative; left: var(--gp-shift, 0px); } .dx.wallmode .dx-group > .dx-objs, .dx.wallmode .dx-group > .dx-set { translate: var(--cx, 0px) 0; } /* блок работ по оси просмотра (fitWalls) */ .dx.wallmode .dx-o-pic img, .dx.wallmode .dx-frame, .dx.wallmode .dx-tile { animation: none; } .dx.wallmode .dx-o-pic::before { display: none; } /* вещь на полке. --ow — во сколько раз вещь шире обычной (постановки), --ob — прозрачное поле под вещью на картинке */ .dx.wallmode .dx-objs { row-gap: calc(var(--gx-obj-row, 30px) + var(--lp-y, 64px)); } /* ряд не влез на узком экране — стена сдвигает и чуть уменьшает его целиком (--of, design3d.js fitWalls); подписи — прежнего размера */ .dx.wallmode .dx-objs[style*="--of"], .dx.wallmode .dx-wbox[style*="--of"] { transform: translateX(var(--ofx, 0px)) scale(var(--of, 1)); transform-origin: var(--oox, 50%) var(--ooy, 0px); margin-bottom: var(--omb, 0px); } .dx.wallmode .dx-obj { position: relative; z-index: 0; width: min(calc(var(--gx-obj, 290px) * var(--ow, 1)), 100%); } .dx.wallmode .dx-obj:nth-child(even) { margin-top: var(--gn-stag, 40px); } .dx.wallmode .dx-o-pic { display: block; position: relative; aspect-ratio: auto; width: 100%; margin-bottom: -3.6%; z-index: 1; } .dx.wallmode .dx-obj.flat .dx-o-pic { margin-bottom: 0; } .dx.wallmode .dx-o-pic img { display: block; width: 100%; height: auto; translate: 0 var(--ob, 0%); transform-origin: 50% 100%; } .dx.wallmode .dx-obj:hover .dx-o-pic img, .dx.wallmode .dx-obj:focus-visible .dx-o-pic img { transform: translateY(calc(-.5 * var(--gx-lift, 8px))); } .dx.wallmode .dx-obj.flat .dx-o-pic { padding: 0; text-align: center; } .dx.wallmode .dx-obj.flat .dx-o-pic img { width: 84%; margin: 0 auto; translate: none; box-shadow: 0 20px 34px rgba(0, 0, 0, .6); } /* полка — как в ART: картинка assets/design/shelf-*.webp (tools/render-shelf.html), вещь стоит на её верхней грани; под плитой светится полоска (под книгами красная) — свечение рисуем здесь, мягким пятном */ .dx-shf, .dx-lab { display: none; } .dx.wallmode .dx-shf { display: block; position: relative; width: 100%; } .dx-shf img { display: block; width: 100%; height: auto; } .dx-shf::after { content: ''; position: absolute; left: 12%; right: 12%; top: 22%; height: 70%; pointer-events: none; background: radial-gradient(closest-side, rgba(235, 240, 255, calc(.16 * var(--sg, 1) * var(--ll, 1))), transparent); } .dx-shf.red::after { background: radial-gradient(closest-side, rgba(255, 60, 40, calc(.2 * var(--sg, 1) * var(--ll, 1))), transparent); } /* РАСТЕНИЯ (?tune «ГАЛЕРЕЯ: растения»; место и размер — ?layout#design, pl:1…pl:4): своя полка, растение лежит на ней и свисает. Всегда позади работ (z-index -1 внутри папки), сверху мягкое холодное пятно света, как над работами. На телефоне нет */ .dx-plant { display: none; } .dx.wallmode .dx-group { isolation: isolate; } .dx.wallmode .dx-plant[data-lk] { display: block; position: absolute; z-index: -1; left: calc(50% + var(--lx)); top: var(--ly); width: calc(300px * var(--pl-s, 1)); translate: -50% 0; transform-origin: 50% 0; pointer-events: none; } .dx.lay .dx-plant[data-lk] { pointer-events: auto; } .dx-plant .pl-in { display: block; position: relative; } .dx-plant.flip .pl-in { transform: scaleX(-1); } .dx-plant .pl-shf { display: block; visibility: var(--pl-shf, visible); width: 100%; height: auto; } .dx-plant .pl-img { position: absolute; max-width: none; height: auto; filter: brightness(var(--pl-b, 1)); } .dx.wallmode .dx-plant::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: -55%; translate: -50% 0; width: 140%; aspect-ratio: 1 / 1.3; background: radial-gradient(closest-side at 50% 38%, color-mix(in srgb, var(--lp-c, #e1ebff) min(100%, calc(13% * var(--pl-lt, 1) * var(--ll, 1))), transparent), color-mix(in srgb, var(--lp-c, #e1ebff) min(100%, calc(4% * var(--pl-lt, 1) * var(--ll, 1))), transparent) 60%, transparent); } .dx-plant .pl-in::after { content: ''; position: absolute; left: 12%; right: 12%; top: 22%; height: 70%; pointer-events: none; visibility: var(--pl-shf, visible); background: radial-gradient(closest-side, rgba(235, 240, 255, calc(.16 * var(--sg, 1))), transparent); } @media (max-width: 700px) { .dx.wallmode .dx-plant[data-lk] { display: none; } } /* подписи — как в ART: название под полкой или под рамками; подсказка над стопкой, светлеет при наведении */ .dx.wallmode .dx-lab { display: grid; justify-items: center; text-align: center; margin-top: 16px; } /* вещь растёт и наклоняется от своего низа — так она остаётся стоять на полке; полка — от своей верхней грани */ .dx.wallmode .dx-o-pic { transform-origin: 50% 100%; } .dx.wallmode .dx-shf { transform-origin: 50% 12%; } .dx.wallmode .dx-obj:not(.flat) { padding-bottom: 48px; } /* место под подписью */ /* подпись не растёт вместе с работой (--ps — размер работы, --pss — полки) и стоит на одном расстоянии от полки у всех */ .dx.wallmode .dx-lab { --lf: 1; scale: calc(1 / (var(--ps, 1) * var(--pss, 1) * var(--of, 1))); transform-origin: 50% 0; } .dx.wallmode .dx-shf > .dx-lab { position: absolute; left: 50%; width: max-content; translate: -50% 0; top: 47%; margin-top: calc(var(--lab-gap, 54px) / (var(--ps, 1) * var(--pss, 1) * var(--of, 1))); } /* от светящейся полоски (47% высоты картинки полки) — одинаково у всех */ .dx-lab .sh-t { display: block; font-size: calc(clamp(13px, 1.25vw, 18px) * var(--lb, 1) * var(--lf, 1)); line-height: 1.35; } .dx-lab .sh-t .amp { display: block; } /* вещь с полкой одной картинкой (рендер в одной 3D-сцене — перспектива общая, вещь стоит на плите). Картинка по ширине = полка; подпись — под светящейся полоской (--gl — где она на картинке), на одном расстоянии у всех; при наведении вещь не взлетает */ .dx.wallmode .dx-obj.shot .dx-o-pic { margin-bottom: 0; transform-origin: 50% 100%; } .dx.wallmode .dx-obj.shot .dx-o-pic img { translate: none; transition: filter .3s; width: calc(100% / var(--sr, 1)); max-width: none; } /* полка = ширина карточки, тень на стене справа выходит за неё */ .dx.wallmode .dx-obj.shot:hover .dx-o-pic img, .dx.wallmode .dx-obj.shot:focus-visible .dx-o-pic img { transform: none; filter: brightness(1.08); } .dx.wallmode .dx-shot > .dx-lab { position: absolute; left: 50%; width: max-content; translate: -50% 0; top: calc(var(--gl, .7) * 100%); margin-top: calc(var(--lab-gap, 54px) / (var(--ps, 1) * var(--of, 1))); } .dx.wallmode .dx-obj.shot { padding-bottom: 0; } .dx-shot::after { content: ''; position: absolute; left: 14%; right: 14%; top: calc(var(--gl, .7) * 100% - 9%); height: 22%; pointer-events: none; background: radial-gradient(closest-side, rgba(235, 240, 255, calc(.16 * var(--sg, 1) * var(--ll, 1))), transparent); } .dx-shot.red::after { background: radial-gradient(closest-side, rgba(255, 60, 40, calc(.2 * var(--sg, 1) * var(--ll, 1))), transparent); } .dx .dx-hint[data-lk] { position: absolute; left: calc(22% + var(--lx)); top: calc(36% + var(--ly)); translate: -50% -50%; z-index: 2; pointer-events: none; } .dx.lay .dx-hint { pointer-events: auto; } /* подсказка одного размера у всех: работа (--ps) и вещь (--pis) её не увеличивают; свой размер из ?layout (--ls) остаётся */ .dx.wallmode .dx-hint[data-lk] { scale: calc(var(--hn, 1) * var(--ls, 1) / (var(--ps, 1) * var(--pis, 1) * var(--of, 1))); } .dx.wallmode .dx-obj:hover .sh-m, .dx.wallmode .dx-obj:focus-visible .sh-m { color: #fff; } /* свет над работой: холодное пятно на стене сверху, как от прожекторов в ART */ .dx.wallmode .dx-obj::before, .dx.wallmode .dx-wbox::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: calc(var(--lp-dy, 0px) - var(--lp-y, 64px)); translate: -50% 0; width: calc(115% * var(--lp-s, 1)); height: calc(100% + 2 * var(--lp-y, 64px)); opacity: 1; background: radial-gradient(closest-side at 50% 35%, color-mix(in srgb, var(--lp-c, #e1ebff) min(100%, calc(14% * var(--lp, 1) * var(--ll, 1))), transparent), color-mix(in srgb, var(--lp-c, #e1ebff) min(100%, calc(5% * var(--lp, 1) * var(--ll, 1))), transparent) 55%, transparent); } .dx.wallmode .dx-set + .dx-set, .dx.wallmode .dx-objs + .dx-set, .dx.wallmode .dx-set + .dx-objs { margin-top: calc(var(--gx-set, 64px) + var(--lp-y, 64px)); } .dx.wallmode .dx-head + .dx-set, .dx.wallmode .dx-head + .dx-objs { margin-top: var(--lp-y, 64px); } /* картинки: тонкая белая рамка, как фото на PHOTO; под рамками — подпись, полки нет */ .dx.wallmode .dx-frame { padding: 0; background: #111; box-shadow: 0 20px 36px rgba(0, 0, 0, .6); } .dx.wallmode .dx-wbox > .dx-lab { justify-self: center; margin-top: calc(22px / var(--ps, 1)); } /* РАССТАНОВКА: у каждого элемента свой сдвиг, размер и размер текста (DZ.gxLayout; задаются на странице ?layout#design). Сдвиг — left/top (раскладку вокруг не толкает). Значения не наследуются. */ .dx [data-lk] { --lx: 0px; --ly: 0px; --ls: 1; --lf: 1; scale: var(--ls); } .dx [data-lk] { position: relative; left: var(--lx); top: var(--ly); } .dx .lrot { transform: perspective(1200px) rotateY(var(--lry, 0deg)) rotate(var(--lr, 0deg)); } /* наклон и поворот (?layout) */ .dx.lay .dx-list { user-select: none; -webkit-user-select: none; } .dx.lay img { -webkit-user-drag: none; } .dx.lay [data-lk] { cursor: move; } .dx.lay .lay-hov { outline: 1px dashed rgba(255, 255, 255, .5); outline-offset: 2px; } .dx.lay .lay-sel { outline: 2px solid var(--red, #ff3b30); outline-offset: 3px; } .lay-panel { position: fixed; right: 18px; top: 64px; z-index: 30; width: 270px; box-sizing: border-box; padding: 14px 14px 12px; display: grid; gap: 9px; background: rgba(12, 12, 13, .95); border: 1px solid rgba(255, 255, 255, .16); color: #e9e9ea; font: 11px/1.45 var(--mono, monospace); letter-spacing: .04em; } .lay-panel b { font-weight: 500; letter-spacing: .22em; } .lay-name { color: #fff; min-height: 2.9em; } .lay-panel label { display: grid; grid-template-columns: 74px 1fr 36px; align-items: center; gap: 6px; } .lay-panel input[type=number] { grid-column: 2 / 4; min-width: 0; background: #1b1b1d; color: #fff; border: 1px solid rgba(255, 255, 255, .16); padding: 4px 6px; font: inherit; } .lay-panel input[type=range] { width: 100%; accent-color: var(--red, #ff3b30); } .lay-panel output { text-align: right; color: #9a9a9e; } .lay-panel:not(.has) .lay-one, .lay-panel:not(.txt) .lay-t, .lay-panel:not(.lit) .lay-l { display: none; } .lay-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .lay-panel button { all: unset; cursor: pointer; text-align: center; padding: 6px 4px; border: 1px solid rgba(255, 255, 255, .24); } .lay-panel button:hover { color: var(--red, #ff3b30); border-color: var(--red, #ff3b30); } .lay-panel button:disabled { opacity: .3; pointer-events: none; } .lay-msg { color: #a6d8a6; min-height: 1.45em; } .lay-out { width: 100%; height: 70px; box-sizing: border-box; background: #1b1b1d; color: #ddd; border: 1px solid rgba(255, 255, 255, .16); font: 10px/1.3 var(--mono, monospace); } .lay-hint { color: #77777c; } /* плитки: картинки одной высоты рядами по центру (логотипы — одинаковыми ячейками), подпись под ними */ .dx-set { display: grid; justify-items: center; gap: 18px; } .dx-objs + .dx-set, .dx-set + .dx-set, .dx-set + .dx-objs { margin-top: var(--gx-set, 64px); } .dx-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gx-tile-gap, 16px); max-width: 100%; } .dx-tile { all: unset; cursor: pointer; height: var(--gx-row, 300px); max-width: 100%; opacity: 0; transition: opacity .45s, transform .35s cubic-bezier(.2, .7, .2, 1); } .dx-tile.in { opacity: 1; } .dx-tile img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; } .dx-tiles.grid { display: grid; width: 100%; justify-content: center; grid-template-columns: repeat(auto-fill, min(var(--gx-logo, 250px), 100%)); } .dx-tiles.grid .dx-tile { height: auto; aspect-ratio: 1 / var(--gx-logo-r, .72); overflow: hidden; } .dx-tiles.grid .dx-tile img { width: 100%; height: 100%; object-fit: var(--gx-logo-fit, cover); } .dx-tile:hover, .dx-tile:focus-visible { transform: translateY(-5px); } .dx-tile:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 3px; } /* просмотр картинок и 3D (поверх всего, как книга) */ .dv-stage { position: absolute; inset: 78px 9vw 118px; display: grid; place-items: center; align-content: center; gap: 18px; pointer-events: none; } .dv-img { max-width: 100%; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); object-fit: contain; opacity: 0; transition: opacity .3s; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } .dv-img.in { opacity: 1; } .dv-cap { display: grid; gap: 6px; justify-items: center; text-align: center; min-height: 18px; } .dv-ct { font-family: var(--head); font-size: 13px; font-weight: 500; letter-spacing: .2em; color: #e9e9ea; white-space: pre-line; } .dv-cn { max-width: 560px; font-size: 11px; letter-spacing: .08em; line-height: 1.5; color: #8b8e94; } .bk .dv-play { pointer-events: auto; margin-top: 8px; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, .4); color: #e9e9ea; text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; transition: color .2s, border-color .2s; } .bk .dv-play:hover { color: var(--red); border-color: var(--red); } .dv-bar { position: relative; width: 160px; height: 1px; background: rgba(255, 255, 255, .18); } .dv-bar i { position: absolute; top: -1px; height: 3px; background: #e9e9ea; transition: left .3s, width .3s; } .dv-3d .bk-c { cursor: grab; } .dv-3d .bk-c:active { cursor: grabbing; } /* NEXT PROJECT — справа внизу во всех просмотрах */ .bk .dv-next, .dz-folder .dv-next { all: unset; position: absolute; right: 32px; bottom: 50px; z-index: 7; cursor: pointer; display: grid; justify-items: end; gap: 6px; text-align: right; } .dv-next-l { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: #e9e9ea; transition: color .2s; } .dv-next-n { font-size: 10px; letter-spacing: .16em; line-height: 1.4; color: #8b8e94; text-transform: uppercase; } .dv-next:hover .dv-next-l { color: var(--red); } .dz-folder .dv-next { bottom: 104px; } /* в автомате справа внизу — значок соцсети, NEXT стоит над ним */ @media (max-width: 700px) { .dx { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .dx::before { display: none; } .dx-room { right: 0; } /* на телефоне папки сверху, галерея на всю ширину */ .dx-side { position: static; translate: none; margin: calc(env(safe-area-inset-top) + 64px) var(--edge, 20px) 0; grid-template-columns: 1fr 1fr; gap: 6px; } .dx-list { position: static; overflow: visible; padding: 40px var(--edge, 20px) 90px; -webkit-mask-image: none; mask-image: none; } .dx-group + .dx-group { margin-top: 70px; } .dx-head { margin-bottom: 24px; } .dx-head-t { font-size: min(var(--gx-head, 24px), 17px); letter-spacing: .14em; margin-right: -.14em; } .dx-objs { gap: 22px 14px; } .dx-obj { width: calc(50% - 7px); } /* по две в ряд, лишняя — по центру */ .dx-shelf { width: calc(100% + 14px); } .dx.wallmode { background: var(--wl-shade, none), var(--wl-img, url("assets/design/wall-plates.webp")) 0 0 / calc(var(--wl-size, 1500px) * .6) auto repeat, var(--wl-c, #0b0b0c); background-attachment: local, local, local; } /* на телефоне листается весь раздел — стена на нём */ .dx.wallmode .dx-list { padding-left: var(--edge, 20px); background: none; } .dx.wallmode::after { position: fixed; } .dx.wallmode .dx-obj { width: min(calc(300px * var(--ow, 1)), 100%); } /* на телефоне по одной вещи в ряд */ .dx.wallmode .dx-obj:nth-child(even) { margin-top: 0; } .dx.wallmode .dx-group { left: 0; } .dx-hint { font-size: 11px; } .dx.wallmode { --lab-gap: 38px; } /* подпись ближе к полке: полки на телефоне маленькие */ .dx-cap.dx-plq { padding: 7px 10px 8px; } .dx-what { font-size: 11px; letter-spacing: .1em; } .dx-kind { font-size: 10.5px; } .dx-tiles { gap: 10px; } .dx-tile { height: var(--gx-prow, 150px); } .dx-tiles.grid { grid-template-columns: 1fr 1fr; } .dv-stage { inset: 70px 16px 120px; } .dv-img { max-height: calc(100dvh - 260px); } .bk .dv-next, .dz-folder .dv-next { right: var(--edge, 16px); bottom: auto; top: calc(env(safe-area-inset-top) + 50px); } .dv-next-l { font-size: 11px; } } .dz-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } .dz-ui { position: absolute; inset: 0; pointer-events: none; } .dz-ui::before { content: ''; position: absolute; inset: 0; opacity: var(--shade, 1); background: linear-gradient(90deg, rgba(10, 10, 11, .72) 0, rgba(10, 10, 11, .35) 30%, transparent 46%); } /* тень под текстом: вещи, заехавшие под него, не мешают читать; где текста нет, сцена её убирает (--shade) */ .dz-scene.narrow .dz-ui::before { background: linear-gradient(0deg, rgba(10, 10, 11, .8) 0, transparent 42%); } /* текст главы — слева, вещь камера держит правее середины */ .dz-ch { position: absolute; left: 7vw; top: 50%; width: min(380px, 30vw); margin-top: -110px; opacity: 0; will-change: opacity, transform; text-transform: none; } .dz-k { font-family: var(--hint); font-size: 14px; letter-spacing: .12em; text-transform: lowercase; color: rgba(233, 233, 234, .5); } .dz-t { font-family: var(--head); font-weight: 500; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.05; letter-spacing: .14em; color: #f0f0f1; margin: 8px 0 18px; } .dz-p { font-family: var(--hint); font-size: 16px; line-height: 1.55; color: rgba(233, 233, 234, .7); } .dz-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 233, 234, .75); } .dz-list li::before { content: '— '; color: rgba(233, 233, 234, .35); } /* общий вид стола: список проектов */ .dz-projs { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; } .dz-proj { all: unset; cursor: pointer; display: grid; row-gap: 3px; padding: 10px 14px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .22); width: 100%; transition: border-color .25s, background .25s; } .dz-proj:hover, .dz-proj.on { border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .05); } .dz-proj-n { font-family: var(--head); font-weight: 500; font-size: 17px; letter-spacing: .16em; color: #e9e9ea; transition: color .25s; } .dz-proj-k { font-family: var(--hint); font-size: 13px; letter-spacing: .1em; text-transform: lowercase; color: rgba(233, 233, 234, .45); } .dz-proj:hover .dz-proj-n, .dz-proj.on .dz-proj-n { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .35); } .dz-scene.narrow .dz-ch { left: 16px; right: 16px; width: auto; top: auto; bottom: 62px; margin-top: 0; } .dz-scene.narrow .dz-p { font-size: 14px; } .dz-scene.narrow .dz-t { margin-bottom: 10px; } @media (max-width: 700px) { #panel.design-open .panel-head { padding: 18px 16px 14px; } } /* ART: просмотр картины крупно — в раме под светом, «дышит», чуть поворачивается за мышью, по ней скользит блик */ .ph-box.art-box { background: radial-gradient(70% 80% at 50% 42%, #1d1b1a 0%, #0a0909 58%, #030303 100%); perspective: 1600px; } .ab-stage { animation: ab-float 7s ease-in-out infinite alternate; } @keyframes ab-float { from { transform: translateY(0); } to { transform: translateY(-7px); } } .ab-card { position: relative; background: #0b0b0b; border: 11px solid #0b0b0b; outline: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 50px 110px rgba(0, 0, 0, .85), 0 12px 30px rgba(0, 0, 0, .6); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s cubic-bezier(.2, .7, .25, 1); } .ab-img { display: block; width: auto; height: auto; max-width: min(76vw, 1400px); max-height: 72vh; } .ab-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .11), transparent 52%); } .ab-cap { position: absolute; left: 0; right: 0; bottom: 52px; display: grid; gap: 9px; justify-items: center; pointer-events: none; } .ab-t { font-family: var(--sans); font-size: 15px; letter-spacing: .3em; margin-right: -.3em; color: #e9e9ea; } .ab-m { font-family: var(--hint); font-size: 9.5px; letter-spacing: .22em; margin-right: -.22em; color: rgba(255, 255, 255, .4); } @media (max-width: 700px) { .ab-img { max-width: 84vw; max-height: 60vh; } .ab-card { border-width: 7px; } .ab-cap { bottom: 44px; } } @media (prefers-reduced-motion: reduce) { .ab-stage { animation: none; } .ab-card { transition: none; } } /* ---------------------------------------------------------------- шрифты: три роли (ABOUT не трогаем — у него свой мир) PT Sans — кнопки (HOME, BACK, VIEW, RANDOM…); Mukta Vaani — заголовки и названия; Afacad Flux — подсказки UI, строчными */ .ui-hint, .sh-m, .ab-m, body.field #hint-title { font-family: var(--hint); font-weight: 400; text-transform: lowercase; letter-spacing: .12em; margin-right: -.12em; } .ui-hint { font-size: 13px; } .sh-m, .ab-m { font-size: 12px; } .sh-m.sh-open { font-size: 13px; letter-spacing: .12em; margin-right: -.12em; } body.field #hint-title { font-size: 15px; } @media (max-width: 700px) { .ui-hint { font-size: 11px; letter-spacing: .08em; } } .sh-t, .ab-t, .bk-t, .ph-head-t, .ph-sep-tab, .ph-box-cap, #p-title, .ph-f:not(.ph-rand) .ph-fn { font-family: var(--head); } .sh-t, .ab-t, .bk-t { font-weight: 500; letter-spacing: .2em; margin-right: -.2em; } .ph-head-t { font-weight: 500; letter-spacing: .2em; } .ph-sep-tab { font-weight: 600; } .ph-f:not(.ph-rand) .ph-fn { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; } #panel:has(.pgal.in-grid) #p-hint { opacity: 0; transition-delay: 0s; } /* в сетке PHOTO подсказка не нужна */ /* ABOUT: стена на весь экран — текстура на фоне раздела, доска с бумагами лежит на ней без своей рамки; фонарик и зерно тоже на весь экран (wall.js двигает фонарик за курсором) */ #panel.about-open { background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .05), transparent 65%), radial-gradient(circle at 18% 80%, rgba(60, 40, 20, .25), transparent 30%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"), #141312; background-attachment: fixed; } #panel.about-open .panel-head { background: none; } /* без полосы под HOME — стена видна до самого верха */ .wall .board { background: none; box-shadow: none; overflow: visible; } .wall .torch { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; background: none; } /* рисует wall.js (холст) */ .wall .grain { position: fixed; inset: -50%; z-index: 1; } /* ABOUT: записки — стикеры (без кнопки и нитки): клеевая полоска сверху, низ чуть отходит от стены */ .note.sticky { padding: 26px 14px 20px; background: linear-gradient(180deg, rgba(0, 0, 0, .07) 0 15%, rgba(255, 255, 255, .12) 15% 17%, transparent 17%), linear-gradient(172deg, transparent 70%, rgba(255, 255, 255, .1) 92%, rgba(0, 0, 0, .06) 100%), #d6ca7c; box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 3px 16px 18px -9px rgba(0, 0, 0, .8); border-radius: 1px 1px 3px 10px / 1px 1px 3px 6px; } /* ABOUT: контакты выделены — белая рамка, как у снимка */ .ev[data-key="contacts"] { border: 7px solid #f2efe8; outline: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 16px 30px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 255, 255, .07); } /* ---------------------------------------------------------------- курсор-капля (cursor.js): обычный прячем, кроме панели ?tune */ html.cc, html.cc * { cursor: none !important; } html.cc .bk.grab, html.cc .bk.grab .bk-c { cursor: none !important; } /* книга ставит свой «grabbing» — перебиваем */ html.cc .lil-gui, html.cc .lil-gui * { cursor: auto !important; } html.cc .lil-gui .controller.number input, html.cc .lil-gui .slider { cursor: ew-resize !important; } /* курсор: маленький холст, который ездит за мышью (cursor.js) — режим «разница» считается только на этом квадрате, а не на всём экране */ .cc-layer { position: fixed; left: 0; top: 0; width: 640px; height: 640px; pointer-events: none; z-index: 2147483000; mix-blend-mode: difference; will-change: transform; } /* кнопки внутри пространств папок и галерея (grid view, view collection) */ .dz-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .dz-btn { all: unset; cursor: pointer; padding: 11px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: #e9e9ea; border: 1px solid rgba(255, 255, 255, .28); background: rgba(10, 10, 11, .55); transition: color .25s, border-color .25s, background .25s; } .dz-btn:hover { color: #0a0a0b; background: #e9e9ea; border-color: #e9e9ea; } .dz-side-btn { position: absolute; left: 7vw; bottom: 64px; z-index: 2; } .dz-grid { position: absolute; inset: 0; z-index: 5; overflow-y: auto; background: #0a0a0b; padding: 84px 7vw 80px; user-select: none; } .dz-grid-t { margin: 30px 0 6px; } .dz-grid-k { margin: 0 0 16px; } .dz-grid-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 44vw), 1fr)); gap: 14px; } .dz-grid-g img { width: 100%; display: block; cursor: zoom-in; background: #151517; transition: opacity .25s; } .dz-grid-g img:hover { opacity: .8; } .dz-zoom { position: fixed; inset: 0; z-index: 6; background: rgba(5, 5, 6, .94); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 4vh 4vw; } .dz-zoom img { max-width: 100%; max-height: 100%; } .dz-scene.narrow .dz-side-btn { left: 16px; bottom: auto; top: 72px; } .dz-scene.narrow .dz-cta-w { display: none; } /* блок шириной по заголовку: текст и список переносятся по его правому краю */ .dz-ch.dz-fit { width: fit-content; max-width: none; } .dz-fit .dz-t { margin-right: -.14em; } /* разрядка после последней буквы не должна расширять блок */ .dz-tl { display: block; white-space: nowrap; } .dz-fit .dz-p, .dz-fit .dz-projs, .dz-fit .dz-btns { width: 0; min-width: 100%; box-sizing: border-box; } .dz-fit .dz-proj { padding: 9px 12px; } .dz-fit .dz-proj-n { font-size: clamp(12px, 1.05vw, 17px); letter-spacing: .12em; } .dz-fit .dz-proj-k { font-size: clamp(10.5px, .85vw, 13px); letter-spacing: .06em; } .dz-fit .dz-btns { display: grid; gap: 8px; } .dz-fit .dz-btn { display: block; box-sizing: border-box; width: 100%; text-align: center; } .dz-scene.narrow .dz-ch.dz-fit { width: auto; max-width: none; } .dz-scene.narrow .dz-fit .dz-p, .dz-scene.narrow .dz-fit .dz-projs, .dz-scene.narrow .dz-fit .dz-btns { width: auto; min-width: 0; } .dz-fade { position: absolute; inset: 0; z-index: 2; background: #050506; opacity: 0; pointer-events: none; transition: opacity .28s; } /* шторка при смене проекта */ .dz-fade.on { opacity: 1; } /* окно порядка логотипов (?tune) */ .dz-order { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; background: rgba(6, 6, 7, .96); padding: 24px 32px 40px; } .dz-order-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .dz-order-h .dz-k { flex: 1; } .dz-order-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .dz-order-g img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #17181b; cursor: grab; border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s; } .dz-order-g img:hover { border-color: rgba(255, 255, 255, .6); } /* ADVERTISING: пульт в духе PS1/PS2 — чёрный матовый корпус, крестовина в утопленном крестовом гнезде, круглая кнопка питания с лампочкой (зелёная — вкл, красная — ожидание) */ .dz-remote { position: absolute; left: 7vw; top: 70%; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 14px 20px 14px 14px; pointer-events: auto; border-radius: 26px; background: radial-gradient(120% 140% at 30% 0%, #222226 0%, #141416 55%, #0c0c0e 100%); box-shadow: 0 16px 36px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #050506; } .dz-dpad { position: relative; width: 102px; height: 102px; } .dz-dpad-well { position: absolute; inset: 0; background: #070708; clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .9); border-radius: 6px; } .dz-arm { all: unset; position: absolute; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; color: #6f6f76; background: linear-gradient(180deg, #3a3a40, #26262b 60%, #1d1d21); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .5); transition: transform .07s, filter .15s, color .15s; } .dz-arm svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); } .dz-arm-up { left: 36px; top: 2px; height: 34px; border-radius: 5px 5px 0 0; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); } .dz-arm-down { left: 36px; bottom: 2px; height: 34px; border-radius: 0 0 5px 5px; clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); } .dz-arm-left { top: 36px; left: 2px; width: 34px; border-radius: 5px 0 0 5px; clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%); } .dz-arm-right { top: 36px; right: 2px; width: 34px; border-radius: 0 5px 5px 0; clip-path: polygon(28% 0, 100% 0, 100% 100%, 28% 100%, 0 50%); } .dz-arm:hover { color: #c9c9cf; filter: brightness(1.15); } .dz-arm:active { filter: brightness(.8); } .dz-arm-up:active { transform: translateY(1px); } .dz-arm-down:active { transform: translateY(-1px); } .dz-arm-left:active { transform: translateX(1px); } .dz-arm-right:active { transform: translateX(-1px); } .dz-arm:focus-visible { color: #fff; } .dz-dpad-c { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 35%, #141417, #2a2a2f); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); } .dz-remote-grille { width: 34px; height: 62px; border-radius: 4px; opacity: .8; background: repeating-linear-gradient(180deg, #08080a 0 2px, #1d1d21 2px 6px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); } .dz-pw { display: grid; justify-items: center; gap: 10px; } .dz-pow { all: unset; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #8c8c93; background: radial-gradient(circle at 50% 30%, #3b3b41, #212125 62%, #18181b); box-shadow: 0 0 0 3px #0a0a0c, 0 0 0 4px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -3px 5px rgba(0, 0, 0, .55), 0 3px 0 #050506; transition: transform .07s, color .15s, box-shadow .15s; } .dz-pow svg { width: 20px; height: 20px; } .dz-pow:hover { color: #e4e4e8; } .dz-pow:active { transform: translateY(2px); box-shadow: 0 0 0 3px #0a0a0c, 0 0 0 4px rgba(255, 255, 255, .06), inset 0 2px 5px rgba(0, 0, 0, .7), 0 1px 0 #050506; } .dz-pow:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 6px; } .dz-led { width: 14px; height: 4px; border-radius: 2px; background: #3cff7c; box-shadow: 0 0 8px #3cff7c, 0 0 2px #3cff7c; transition: background .25s, box-shadow .25s; } .dz-remote.off .dz-led { background: #ff3b30; box-shadow: 0 0 8px #ff3b30, 0 0 2px #ff3b30; } .dz-scene.narrow .dz-remote { left: 16px; top: auto; bottom: 40px; padding: 10px 16px 10px 10px; gap: 14px; border-radius: 22px; transform: scale(.82); transform-origin: left bottom; } .dz-scene.narrow.dz-has-remote .dz-ch { bottom: 150px; } .dz-remote.at-start :is(.dz-arm-up, .dz-arm-left) { color: #2c2c31; pointer-events: none; filter: brightness(.7); } /* на первой работе назад некуда */ .dz-cords { position: absolute; left: 50%; top: 100%; translate: -50% 0; overflow: visible; pointer-events: none; } /* провода прямо вниз от нижней грани пульта */ /* автомат: надпись при выпадении стикеров — над карточкой, переливается */ .dz-yo { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) scale(.6); opacity: 0; pointer-events: none; white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: clamp(16px, 2.2vw, 34px); letter-spacing: .06em; background: linear-gradient(90deg, #ff5a7a, #ffd166, #6ee7a8, #5ab4ff, #c38bff, #ff5a7a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)); transition: opacity .25s, transform .5s cubic-bezier(.2, 1.7, .4, 1); animation: dz-yo 1.6s linear infinite; } .dz-yo.on { opacity: 1; transform: translate(-50%, -100%) scale(1); } @keyframes dz-yo { to { background-position: -200% 0; } } a.dz-btn { display: block; text-align: center; text-decoration: none; } /* DIGITAL & 3D: строчка под текстом модели (в чём сделана, сколько треугольников) */ .dz-meta { margin-top: 12px; font-family: var(--hint); font-size: 12px; letter-spacing: .12em; color: rgba(233, 233, 234, .42); } .dz-meta:empty { display: none; } .dz-fit .dz-meta { width: 0; min-width: 100%; } /* ---------------------------------------------------------------- телефон: общий каркас всех разделов Сверху одна полоса: слева ← HOME, справа значок Instagram (он больше не висит поверх работ). Внизу одна подсказка. Всё отступает от «чёлки» и нижней полоски iPhone (env(safe-area-…)). */ @media (max-width: 700px) { body #panel.open .panel-head { min-height: calc(env(safe-area-inset-top) + 56px); padding: calc(env(safe-area-inset-top) + 8px) 20px 8px; align-items: center; } #back { padding: 10px 12px; margin: -10px -12px; font-size: 14px; } /* палец попадает с запасом */ body #panel #p-brand { display: none; } body #panel[id] .insta { top: calc(env(safe-area-inset-top) + 12px); bottom: auto; right: 20px; /* центр на одной линии с ← HOME, отступ от края как у него */ gap: 7px; padding: 3px 12px 3px 4px; font-size: 10px; letter-spacing: .1em; box-shadow: none; } body #panel[id] .insta img { width: 30px; height: 30px; margin: -2px 0; } .ui-hint { bottom: calc(env(safe-area-inset-bottom) + 14px); } body.field .hud-bc { bottom: calc(env(safe-area-inset-bottom) + 20px); } body.field .hud-tl.signature { top: calc(env(safe-area-inset-top) + 14px); } body.field .hud-tr.status { top: calc(env(safe-area-inset-top) + 16px); } } /* телефон: один отступ от края экрана во всех разделах (--edge) — шапка, кнопки «назад» внутри, подписи, панели */ @media (max-width: 700px) { :root { --edge: 20px; } .ph-box .ph-x, .bk .bk-x { top: calc(env(safe-area-inset-top) + 13px); left: calc(var(--edge) - 8px); } /* текст «← BACK» там же, где «← HOME» */ .bk-top { right: var(--edge); } .sh-hint { right: var(--edge); } .st-scene.narrow .st-proj, .dz-scene.narrow .dz-ch { left: var(--edge); right: var(--edge); } .dz-scene.narrow .dz-side-btn, .dz-scene.narrow .dz-remote { left: var(--edge); } .panel-inner { padding-left: 0; padding-right: 0; } /* отступ даёт шапка и само содержимое, иначе он складывается дважды */ .wall.stacked .board { padding-left: var(--edge); padding-right: var(--edge); } } @media (max-width: 360px) { /* узкие телефоны: без надписи у значка */ body #panel[id] .insta { padding: 3px; } body #panel[id] .insta span { display: none; } } /* телефон боком: сайт сделан под телефон в руке вертикально */ #rotate { display: none; } @media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { #rotate { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #0d1012; color: rgba(238, 241, 243, .7); font-family: var(--hint); font-size: 14px; letter-spacing: .14em; text-transform: lowercase; } #rotate i { width: 26px; height: 44px; border: 1.5px solid currentColor; border-radius: 6px; animation: rotate-back 2.4s ease-in-out infinite; } } @keyframes rotate-back { 0%, 25% { transform: rotate(-90deg); } 55%, 100% { transform: rotate(0deg); } } @media (max-width: 700px) { /* ART на телефоне: подписи стены уходят под плотную шапку, а не просвечивают */ body #panel.shelf-open .panel-head, body #panel.design-open:has(.dx) .panel-head { background: linear-gradient(#060606 72%, rgba(6, 6, 6, 0)); } /* и внизу так же: работы уходят под тёмную полосу, подсказка лежит на ней, а не поверх картинок */ body #panel.open.shelf-open::after, body #panel.open.design-open:has(.dx)::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; height: calc(env(safe-area-inset-bottom) + 66px); background: linear-gradient(rgba(6, 6, 6, 0), rgba(6, 6, 6, .9) 38%, #060606 50%); } .ui-hint { font-size: 12px; } /* ABOUT на телефоне: бумаги листаются под шапку цвета стены — белое ← HOME не теряется на светлой бумаге, значок Instagram не ложится на текст */ body #panel.about-open .panel-head { z-index: 10; background: linear-gradient(#141312 74%, rgba(20, 19, 18, 0)); } } /* ---------------------------------------------------------------- телефон: касания Кнопки и ссылки — без задержки и зума по двойному тапу, без синей вспышки браузера; при нажатии сразу видно, что палец попал (чуть гаснет). Подсветка «при наведении» на телефоне залипает после тапа — там она выключена. Мелкие кнопки получают невидимый запас вокруг, чтобы площадь касания была не меньше ~44 px. */ :root { color-scheme: dark; } button, a, [role="button"], .dx-obj, .dx-tile { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover: none) { :where(button, a, [role="button"]):active { opacity: .6; transition: opacity 0s; } .insta:hover { border-color: rgba(255, 255, 255, .14); background: rgba(8, 8, 8, .78); transform: none; } .dz-btn:hover { color: #e9e9ea; background: rgba(10, 10, 11, .55); border-color: rgba(255, 255, 255, .28); } .bk button:hover { color: rgba(233, 233, 234, .75); } .dz-grid-g img:hover { opacity: 1; } } @media (max-width: 700px) { #back { padding: 14px 12px; margin: -14px -12px; } body #panel[id] .insta::before { content: ''; position: absolute; inset: -6px -4px; } .bk .bk-bot button { padding: 10px 14px; } .bk .bk-x, .ph-box .ph-x { padding: 14px 8px; margin-top: -6px; } .st-prog i { height: 22px; } } /* телефон: ни одной надписи мельче 12 px; разделы слева — с запасом под палец */ @media (max-width: 700px) { body.field .side-nav { font-size: 12px; gap: 6px; left: 0; } body.field .side-nav button { padding: 5px 10px 5px 2px; } /* буквы у самого края, запас под палец — со стороны кубов */ body.field .hud-tr.status { font-size: 12px; } body #panel[id] .insta { font-size: 12px; letter-spacing: .06em; } } /* телефон, главный экран: подпись и линия пульса на 30% меньше (надписи статуса остаются 12 px — меньше нечитаемо) */ @media (max-width: 700px) { body.field .signature img { width: calc(min(var(--sig-w, 230px), 42vw) * .7); } body.field .status #ecg { width: 68px; height: 14px; } body.field .status .pulse { gap: 6px; } body.field .hud-tr.status { font-size: 10.5px; } /* весь блок пульса — по размеру подписи слева (просьба: одного размера) */ } /* ART на телефоне: затемнение сверху длиннее, мягче и светлее — плавно сходит на нет примерно к 150 px */ @media (max-width: 700px) { body #panel.shelf-open .panel-head { background: none; } body #panel.shelf-open .panel-head::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none; height: calc(env(safe-area-inset-top) + 160px); background: linear-gradient(rgba(6, 6, 6, .74) 0%, rgba(6, 6, 6, .66) 18%, rgba(6, 6, 6, .5) 36%, rgba(6, 6, 6, .32) 54%, rgba(6, 6, 6, .16) 72%, rgba(6, 6, 6, .05) 88%, rgba(6, 6, 6, 0) 100%); } }