/* OLFACTORY — olfactory.app Порядок: токены → шрифты → базовая раскладка → атмосфера (поле, зерно) → навигация → сцены по порядку → адаптив → reduced-motion. */ /* ─── Токены ─────────────────────────────────────────────────────────── */ :root { --porcelain: #ece7df; --bone: #e3ddd3; --ink: #17161a; --smoke: #605c5e; /* Следы ингредиентов. Живут только внутри композиций, никогда как UI-акцент. */ --amber: #c88a3c; --iris: #7a6ba6; --moss: #5d6b4a; --rose: #b0655e; --mineral: #5b7a8c; --plum: #4a2c45; --bergamot: #d3bd47; --resin: #6b4a2b; /* Грунт и текст меняются по сценам: страница проходит путь от дневного фарфора к почти чёрному — следы накапливаются. */ --ground: var(--porcelain); --fg: var(--ink); --fg-2: var(--smoke); --hair: rgba(23, 22, 26, .16); --glass: rgba(255, 255, 255, .28); --field-multiply: 1; --field-screen: 0; --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --serif: "Newsreader", "Times New Roman", serif; --ease-out: cubic-bezier(.16, .84, .3, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --t-ground: 1.8s; --gutter: clamp(1.25rem, 4vw, 4rem); --measure: 34ch; } /* Сцена ставится на и сразу (JS дублирует атрибут): грунт должен быть и у html — при резиновом оверскролле на iOS над body виден именно html, и белая вспышка там читалась как «фон мигает», когда тянешь страницу вниз у самого верха. */ html[data-scene="trace"], body[data-scene="trace"] { --ground: #e9e3da; } html[data-scene="collect"], body[data-scene="collect"] { --ground: #e5dfd5; } html[data-scene="understand"], body[data-scene="understand"] { --ground: #e0d9cf; } html[data-scene="discover"], body[data-scene="discover"] { --ground: #d3cac1; } html[data-scene="memory"], html[data-scene="glimpse"], html[data-scene="final"], body[data-scene="memory"], body[data-scene="glimpse"], body[data-scene="final"] { --fg: #ede7e6; --fg-2: #aaa0a4; --hair: rgba(237, 231, 230, .16); --glass: rgba(255, 255, 255, .05); --field-multiply: 0; --field-screen: 1; } html[data-scene="memory"], body[data-scene="memory"] { --ground: #3a2f3d; } html[data-scene="glimpse"], body[data-scene="glimpse"] { --ground: #231e27; } html[data-scene="final"], body[data-scene="final"] { --ground: #131216; } /* ─── Шрифты ─────────────────────────────────────────────────────────── */ @font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted.0f7dc18d91.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.2064560185.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; } /* ─── База ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); transition: background-color var(--t-ground) var(--ease-soft); } body { margin: 0; min-height: 100svh; background: var(--ground); color: var(--fg); font: 400 1rem/1.5 var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color var(--t-ground) var(--ease-soft), color var(--t-ground) var(--ease-soft); } h1, h2, h3, p, ul, ol, dl, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 1.5px solid var(--fg); outline-offset: 4px; } .skip { position: fixed; top: .75rem; left: .75rem; z-index: 50; padding: .5rem .75rem; background: var(--fg); color: var(--ground); transform: translateY(-200%); } .skip:focus { transform: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ─── Атмосфера ──────────────────────────────────────────────────────── */ .field { position: fixed; inset: -12vh -12vw; width: 124vw; height: 124vh; pointer-events: none; z-index: 0; /* Холст рисуется в низком разрешении и растягивается браузером с билинейной интерполяцией. Размытие делается внутри самого холста при отрисовке — CSS-filter на полноэкранном слое стоил бы полной растеризации каждый кадр. */ transition: opacity var(--t-ground) var(--ease-soft); } .field--multiply { mix-blend-mode: multiply; opacity: var(--field-multiply); } .field--screen { mix-blend-mode: screen; opacity: calc(var(--field-screen) * .6); } .grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; /* Предрендеренный шум вместо feTurbulence: одна текстура 256px против процедурного фильтра на весь экран. */ background: url("../grain.png") repeat; background-size: 128px 128px; opacity: .06; mix-blend-mode: multiply; } body[data-scene="memory"] .grain, body[data-scene="glimpse"] .grain, body[data-scene="final"] .grain { mix-blend-mode: screen; opacity: .07; } .progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 40; background: var(--hair); } .progress i { display: block; height: 100%; width: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } /* ─── Типографика: роли ──────────────────────────────────────────────── */ .label { font-size: .6875rem; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums; } .label span { display: inline-block; margin-right: 1.25em; color: var(--fg); } .line { font: italic 300 clamp(1.5rem, 2.6vw, 2.25rem)/1.25 var(--serif); letter-spacing: -.005em; color: var(--fg); text-wrap: balance; } .head { font: 500 clamp(2.75rem, 8vw, 8.5rem)/.92 var(--sans); letter-spacing: -.035em; text-transform: uppercase; } .scene__sub { font: italic 300 clamp(1rem, 1.3vw, 1.2rem)/1.45 var(--serif); color: var(--fg-2); max-width: 34ch; margin-top: -.5rem; text-wrap: pretty; } /* ─── Навигация ──────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem var(--gutter); color: var(--fg); transition: color var(--t-ground) var(--ease-soft); } .nav__mark, .nav__index { font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1; padding: .95rem .25rem; margin: -.45rem -.25rem; } .nav__index { position: relative; } .nav__index::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: currentColor; left: .25rem; right: .25rem; bottom: .55rem; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); } .nav__index:hover::after, .nav__index[aria-expanded="true"]::after { transform: scaleX(1); } .index { position: fixed; inset: 0; z-index: 25; display: grid; align-content: center; padding: var(--gutter); background: var(--ground); color: var(--fg); transition: background-color var(--t-ground) var(--ease-soft), color var(--t-ground) var(--ease-soft); } .index[hidden] { display: none; } .index__list { display: grid; gap: .25rem; max-width: 40rem; margin-inline: auto; width: 100%; } .index__list a { display: grid; grid-template-columns: 4rem 1fr; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--hair); font: 400 clamp(1.5rem, 3.6vw, 2.75rem)/1.1 var(--sans); letter-spacing: -.02em; transition: padding-left .5s var(--ease-out); } .index__list a:hover { padding-left: .5rem; } .index__list span { font-size: .6875rem; letter-spacing: .14em; color: var(--fg-2); } .index__foot { max-width: 40rem; margin: 2rem auto 0; width: 100%; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); } /* ─── Сцены: общее ───────────────────────────────────────────────────── */ main { position: relative; z-index: 2; } .scene { position: relative; min-height: 100svh; padding: clamp(6rem, 14vh, 10rem) var(--gutter) clamp(5rem, 12vh, 8rem); display: grid; align-content: center; } .scene__label { position: absolute; left: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.5rem); } .scene__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 7vh, 5rem); } /* Появление: элементы входят «через дымку» — блюр + подъём, не просто fade. */ .scene [data-reveal], .scene.reveal-target { opacity: 0; filter: blur(10px); transform: translateY(1.25rem); transition: opacity 1.4s var(--ease-out), filter 1.4s var(--ease-out), transform 1.4s var(--ease-out); transition-delay: var(--stagger, 0s); } .scene.in-view [data-reveal], .scene.in-view.reveal-target { opacity: 1; filter: blur(0); transform: none; } /* ─── 001 — The invisible ────────────────────────────────────────────── */ .scene--invisible { align-content: end; padding-bottom: clamp(6rem, 16vh, 10rem); gap: 1.75rem; } .wordmark { position: relative; display: inline-block; font: 500 clamp(2.6rem, 15.6vw, 17.5rem)/.86 var(--sans); letter-spacing: -.04em; text-transform: uppercase; margin-left: -.05em; /* оптическая компенсация выноса O */ overflow: visible; } .wordmark__text { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.06em); animation: wordmark-in 2.2s var(--ease-out) .2s forwards; } @keyframes wordmark-in { to { opacity: 1; filter: blur(0); transform: none; } } /* Стеклянная полоса: медленно проходит по вордмарку, буквы уходят из фокуса и возвращаются. Единственный «эффект» в первом экране. */ .wordmark__glass { position: absolute; top: -30%; bottom: -30%; left: -8%; width: 22%; pointer-events: none; backdrop-filter: blur(7px) saturate(1.2); -webkit-backdrop-filter: blur(7px) saturate(1.2); background: none; mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 72%); animation: glass-pass 16s var(--ease-soft) 1.6s infinite alternate; } @keyframes glass-pass { from { transform: translateX(0); } to { transform: translateX(560%); } } /* backdrop-filter пересчитывается каждый кадр — когда герой прокручен, незачем. */ .scene:not(.is-active) .wordmark__glass { animation-play-state: paused; } /* Иерархия героя: вордмарк → «Your scent identity.» → поддерживающая строка. Тэглайн крупнее обычной редакционной строки, поддержка — тем же голосом, тише. */ .hero__tagline { font-size: clamp(1.75rem, 3.4vw, 3rem); letter-spacing: -.01em; opacity: 0; animation: soft-in 1.8s var(--ease-out) 1.1s forwards; } .hero__support { font: italic 300 clamp(1.0625rem, 1.35vw, 1.25rem)/1.4 var(--serif); color: var(--fg-2); margin-top: -.75rem; opacity: 0; animation: soft-in 1.8s var(--ease-out) 1.7s forwards; } .scene--invisible .scene__label { opacity: 0; animation: soft-in 1.8s var(--ease-out) 2.2s forwards; } @keyframes soft-in { to { opacity: 1; } } /* ─── 002 — Trace ────────────────────────────────────────────────────── */ .scene--trace { min-height: 120svh; } .notes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .note { position: absolute; left: var(--x); top: var(--y); --depth: var(--d); font-size: calc(.9rem + var(--depth) * 4.2vw); line-height: 1; letter-spacing: calc(-.02em + (1 - var(--depth)) * .06em); text-transform: uppercase; font-weight: 500; color: var(--fg); opacity: calc(.22 + var(--depth) * .78); filter: blur(calc((1 - var(--depth)) * 3.2px)); transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform, opacity; transition: opacity 1.6s var(--ease-soft); } .note[data-note="bergamot"] { --x: 10%; --y: 14%; --d: .32; } .note[data-note="iris"] { --x: 58%; --y: 16%; --d: 1; } .note[data-note="cedar"] { --x: 13%; --y: 52%; --d: .72; } .note[data-note="musk"] { --x: 77%; --y: 60%; --d: .5; } .note[data-note="amber"] { --x: 44%; --y: 30%; --d: .86; } .note[data-note="leather"] { --x: 6%; --y: 78%; --d: .42; } .note[data-note="neroli"] { --x: 70%; --y: 84%; --d: .3; } .note[data-note="vetiver"] { --x: 22%; --y: 66%; --d: .62; } .note--iris { color: color-mix(in oklab, var(--fg) 55%, var(--iris)); } .note--amber { color: color-mix(in oklab, var(--fg) 45%, var(--amber)); } .note--moss { color: color-mix(in oklab, var(--fg) 55%, var(--moss)); } /* Память: дальние ноты уходят на второй половине сцены, ближние остаются. */ .scene--trace.is-late .note[data-fade] { opacity: 0; } .line--center { justify-self: center; align-self: end; text-align: center; max-width: var(--measure); margin-bottom: 8vh; } .scene--trace { align-content: end; } /* ─── 003 — Collect ──────────────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.75rem, 1.4vw, 1.25rem); align-items: end; } .card[data-card="grey-cedar"] { --trace: var(--moss); --lift: 0; --rot: -14deg; } .card[data-card="iris-mineral"] { --trace: var(--iris); --lift: 1; --rot: 22deg; } .card[data-card="resin-hour"] { --trace: var(--resin); --lift: .35; --rot: -40deg; } .card[data-card="fig-bone"] { --trace: var(--rose); --lift: .7; --rot: 8deg; } .card[data-card="neroli-concrete"] { --trace: var(--bergamot); --lift: .15; --rot: -26deg; } .card { --lift-px: calc(var(--lift) * 3.5rem); position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: .75rem; aspect-ratio: 3 / 4.3; padding: 1rem 1rem .9rem; border: 1px solid var(--hair); background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.08)); margin-bottom: var(--lift-px); overflow: hidden; } .card__meta { display: flex; justify-content: space-between; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums; } /* След — единственный цвет на карточке: пятно доминирующего аккорда, два неровных эллипса с разным размытием, повёрнутых по-своему на каждой карточке, чтобы не читалось как «цветной круг». */ .card__trace { position: relative; align-self: stretch; min-height: 3rem; transform: rotate(var(--rot, 0deg)); } .card__trace::before, .card__trace::after { content: ""; position: absolute; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; background: var(--trace); mix-blend-mode: multiply; } .card__trace::before { left: 14%; top: 12%; width: 62%; height: 66%; filter: blur(18px); opacity: .42; } .card__trace::after { left: 38%; top: 34%; width: 46%; height: 48%; border-radius: 45% 55% 40% 60% / 60% 42% 58% 40%; filter: blur(10px); opacity: .34; } .card__name { font: italic 300 clamp(1.25rem, 1.7vw, 1.75rem)/1.05 var(--serif); letter-spacing: -.01em; } .card__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .6875rem; letter-spacing: .06em; color: var(--fg-2); } .card__shelf { min-width: 0; } /* Оценка — по шкале приложения, 1–10 с шагом в половину; десятка «/10» тише самого числа. */ .score { flex: none; font-size: .8125rem; letter-spacing: .02em; color: var(--fg); font-variant-numeric: tabular-nums; } .score i { font-style: normal; font-size: .6875rem; color: var(--fg-2); margin-left: .08em; } .score--none { color: var(--fg-2); } /* ─── 004 — Understand ───────────────────────────────────────────────── */ .fingerprint { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); } .fingerprint__svg { width: 100%; max-width: 34rem; height: auto; justify-self: center; overflow: visible; } .fingerprint__svg .ring { fill: var(--trace); fill-opacity: .1; stroke: var(--trace); stroke-opacity: .95; stroke-width: 1.3; transform-origin: 300px 300px; animation: ring-turn var(--dur, 120s) linear infinite; animation-direction: var(--dir, normal); mix-blend-mode: multiply; } body[data-scene="memory"] .fingerprint__svg .ring, body[data-scene="glimpse"] .fingerprint__svg .ring, body[data-scene="final"] .fingerprint__svg .ring { mix-blend-mode: screen; } @keyframes ring-turn { to { transform: rotate(360deg); } } .scene:not(.is-active) .ring { animation-play-state: paused; } .fingerprint__svg .core { fill: var(--fg); } .fingerprint__legend { display: grid; gap: 1.25rem; } .fingerprint__legend ol { display: grid; } .fingerprint__legend li { display: grid; grid-template-columns: 1.25rem 1fr auto; align-items: baseline; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--hair); font: 400 clamp(1.125rem, 1.6vw, 1.5rem)/1.2 var(--sans); letter-spacing: -.015em; font-variant-numeric: tabular-nums; } [data-trace="resin"] { --trace: var(--resin); } [data-trace="amber"] { --trace: var(--amber); } [data-trace="moss"] { --trace: var(--moss); } [data-trace="rose"] { --trace: var(--rose); } [data-trace="iris"] { --trace: var(--iris); } [data-trace="plum"] { --trace: var(--plum); } [data-trace="mineral"] { --trace: var(--mineral); } [data-trace="bergamot"] { --trace: var(--bergamot); } .fingerprint__legend li::before { content: ""; width: 1.25rem; height: 1px; background: var(--trace); align-self: center; } .fingerprint__legend li span:last-child { color: var(--fg-2); } .fingerprint__legend li span:last-child::after { content: "%"; font-size: .7em; margin-left: .1em; } .fingerprint__note { font: italic 300 clamp(1rem, 1.25vw, 1.125rem)/1.45 var(--serif); color: var(--fg-2); max-width: 34ch; text-wrap: pretty; } /* ─── 005 — Discover ─────────────────────────────────────────────────── */ .scene--discover { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .scene--discover .scene__head { margin-bottom: 0; align-self: end; } .scene--discover .map { align-self: center; } .scene--discover .map__legend { grid-column: 1; grid-row: 2; align-self: start; margin-top: 1.5rem; } .scene--discover .map__svg { grid-column: 2; grid-row: 1 / 3; } .map { display: contents; } .map__svg { width: 100%; height: auto; overflow: visible; justify-self: stretch; } .map__svg text { font-family: var(--sans); fill: var(--fg); } .map__svg .map__ring { fill: none; stroke: var(--hair); stroke-width: 1; } .map__svg .map__link { fill: none; stroke: var(--fg); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: var(--stagger, 0s); } .map__svg .map__node { opacity: 0; transition: opacity 1.2s var(--ease-out); transition-delay: calc(var(--stagger, 0s) + .6s); } .map__svg .map__node circle { fill: var(--trace); fill-opacity: .9; } .map__svg .map__node .map__halo { fill: var(--trace); fill-opacity: .32; filter: url(#halo); } .map__svg .map__label { font-size: 27px; letter-spacing: -.015em; } .map__svg .map__dist { font-size: 13px; letter-spacing: .14em; fill: var(--fg-2); } .map__svg .map__center { font-size: 13px; letter-spacing: .16em; fill: var(--fg-2); } .scene.in-view .map__link { stroke-dashoffset: 0; } .scene.in-view .map__node { opacity: 1; } .map__legend { display: grid; gap: .5rem; justify-items: start; } .map__love { font: 500 clamp(1.125rem, 1.7vw, 1.5rem)/1.2 var(--sans); letter-spacing: .02em; text-transform: uppercase; } .map__people-label { margin-top: 1rem; } .map__people { font: italic 300 clamp(1.0625rem, 1.4vw, 1.25rem)/1.3 var(--serif); color: var(--fg); } /* ─── 006 — Memory ───────────────────────────────────────────────────── */ .scene--memory { min-height: 110svh; align-content: center; } .scene--memory { gap: clamp(2.5rem, 6vh, 4rem); } .line--memory { justify-self: center; text-align: center; max-width: 40ch; font-size: clamp(1.75rem, 4.2vw, 3.75rem); line-height: 1.18; } /* Календарь ношения, едва слышно: четыре недели, отмеченные дни — цвет следа. */ .memory__month { justify-self: center; display: grid; gap: .9rem; justify-items: center; opacity: .78; } .memory__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .55rem .8rem; } .memory__days i { width: .5rem; height: .5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); } .memory__days i.is-worn { background: var(--trace); box-shadow: 0 0 14px 2px color-mix(in oklab, var(--trace) 55%, transparent); } /* ─── 007 — Preview ──────────────────────────────────────────────────── */ .scene--glimpse { align-content: start; padding-bottom: 0; overflow: hidden; gap: clamp(2rem, 6vh, 4rem); } .glimpse__label { justify-self: center; text-align: center; } .glimpse { justify-self: center; width: min(22.5rem, 86vw); height: min(38rem, 66svh); overflow: hidden; /* Экран частично скрыт — видно только верх, как в тизере. */ mask-image: linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); } .phone { position: relative; height: 100%; padding: 1.5rem 1.5rem 0; border: 1px solid var(--hair); border-bottom: 0; border-radius: 2.75rem 2.75rem 0 0; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); display: grid; align-content: start; gap: 1.1rem; font-size: .8125rem; color: var(--fg); } .phone__top { display: flex; justify-content: space-between; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); padding-top: .5rem; } /* Профиль: кольцо аватара — тот же аккордовый круг, что рисует приложение, статикой. */ .phone__who { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; } .phone__ava { width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(from 208deg, var(--resin) 0 122deg, var(--moss) 122deg 208deg, var(--bergamot) 208deg 273deg, var(--amber) 273deg 323deg, var(--iris) 323deg 360deg); } .phone__ava i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 40px rgba(255,255,255,.08); transition: background-color var(--t-ground) var(--ease-soft); } .phone__id { display: grid; gap: .2rem; min-width: 0; } .phone__handle { font: italic 300 1.55rem/1 var(--serif); letter-spacing: -.01em; } .phone__sub { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); } .phone__dna { display: flex; flex-wrap: wrap; gap: .4rem; } .phone__dna li { display: inline-flex; align-items: baseline; gap: .4rem; padding: .35rem .6rem; border: 1px solid var(--hair); border-radius: 999px; font-size: .6875rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .phone__dna li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--trace); align-self: center; } .phone__dna li span:last-child { color: var(--fg-2); } .phone__dna li span:last-child::after { content: "%"; font-size: .8em; } .phone__block { display: grid; gap: .55rem; padding-top: .75rem; border-top: 1px solid var(--hair); } .phone__row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; color: var(--fg-2); font-size: .6875rem; letter-spacing: .06em; } .phone__days { display: grid; grid-template-columns: repeat(14, 1fr); gap: .45rem .3rem; } .phone__days i { width: .42rem; height: .42rem; justify-self: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); } .phone__days i.is-worn { background: var(--fg); box-shadow: none; opacity: .85; } .phone__nextname { font: italic 300 1.35rem/1.05 var(--serif); letter-spacing: -.01em; } .phone__nextwhy { font-size: .75rem; color: var(--fg-2); line-height: 1.4; max-width: 24ch; } .phone__fp { position: absolute; right: 1.25rem; bottom: 1.5rem; width: 8.5rem; display: grid; gap: .25rem; justify-items: end; opacity: .95; } .phone__fp svg { width: 100%; height: auto; overflow: visible; } .phone__fp .label { font-size: .5625rem; } .phone__fp .ring { fill: var(--trace); fill-opacity: .1; stroke: var(--trace); stroke-opacity: .9; stroke-width: 1.4; transform-origin: 300px 300px; animation: ring-turn var(--dur, 120s) linear infinite; animation-direction: var(--dir, normal); mix-blend-mode: screen; } /* ─── 008 — Final ────────────────────────────────────────────────────── */ .scene--final { align-content: center; justify-items: center; text-align: center; gap: 2.5rem; min-height: 100svh; } .final__line { font: italic 300 clamp(1.625rem, 3.6vw, 3.25rem)/1.18 var(--serif); max-width: 34ch; text-wrap: balance; } .final__domain { font: 500 clamp(2rem, 7vw, 6rem)/1 var(--sans); letter-spacing: -.035em; text-transform: uppercase; } /* Единственное действие в финале — в голосе навигации, не кнопка магазина. */ .final__cta { position: relative; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1; padding: .95rem .25rem; } .final__cta::after { content: ""; position: absolute; left: .25rem; right: .25rem; bottom: .55rem; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: 0 50%; transition: transform .5s var(--ease-out); } .final__cta:hover::after { transform: scaleX(0); transform-origin: 100% 50%; } /* ─── Footer ─────────────────────────────────────────────────────────── */ .foot { position: relative; z-index: 2; display: grid; gap: 1.25rem; padding: 0 var(--gutter) clamp(2rem, 5vh, 3rem); max-width: 62ch; } .foot__about { font-size: .8125rem; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; } .foot__meta { display: flex; gap: 1.25rem; flex-wrap: wrap; } .foot__meta span { margin-right: 0; } .foot__meta a { color: var(--fg-2); } .foot__meta a:hover { color: var(--fg); } /* ─── Адаптив ────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } .card:nth-child(n+4) { display: none; } .fingerprint { grid-template-columns: 1fr; } .fingerprint__svg { max-width: 26rem; } } @media (max-width: 640px) { :root { --measure: 22ch; } .scene { padding-top: 5.5rem; } .wordmark { font-size: 15.4vw; letter-spacing: -.045em; } .wordmark__glass { display: none; } .scene--invisible { gap: 1.25rem; } .hero__support { margin-top: -.5rem; } /* Перенос между предложениями остаётся; кегль подобран так, чтобы первая фраза помещалась в одну строку и на 360px. */ .final__line { font-size: clamp(1.25rem, 5.6vw, 1.5rem); max-width: none; } .note { font-size: calc(.8rem + var(--depth) * 7vw); } /* На телефоне сцена упрощается: две самые дальние ноты уходят совсем. */ .note[data-mobile-hide] { display: none; } .cards { grid-template-columns: 1fr; gap: .75rem; } .card { aspect-ratio: auto; margin-bottom: 0; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: .9rem 1rem; } .card:nth-child(n+4) { display: grid; } .card__trace { position: absolute; inset: 0; min-height: 0; pointer-events: none; transform: none; } .card__trace::before { left: auto; right: -8%; top: -30%; width: 48%; height: 150%; } .card__trace::after { left: auto; right: 4%; top: 10%; width: 30%; height: 90%; } .card__meta { grid-column: 1 / -1; } .card__name { font-size: 1.4rem; } .card__foot { grid-column: 1 / -1; } .scene--discover { grid-template-columns: 1fr; } .scene--discover .map__svg, .scene--discover .map__legend { grid-column: 1; grid-row: auto; } .scene--discover .scene__head { margin-bottom: 2rem; } .map__svg .map__label { font-size: 44px; } .map__svg .map__dist { display: none; } .map__svg .map__center { font-size: 22px; } .line--memory br { display: none; } .glimpse { height: 60svh; } .phone { border-radius: 2rem 2rem 0 0; padding: 1.25rem 1.25rem 0; } .phone__fp { width: 7rem; right: 1rem; bottom: 1rem; } .memory__days { gap: .5rem .6rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wordmark__text { animation: none; opacity: 1; filter: none; transform: none; } .wordmark__glass { display: none; } .hero__tagline, .hero__support, .scene--invisible .scene__label { animation: none; opacity: 1; } .scene [data-reveal], .scene.reveal-target { opacity: 1; filter: none; transform: none; transition: none; } .fingerprint__svg .ring, .phone__fp .ring { animation: none; } .map__svg .map__link { stroke-dashoffset: 0; transition: none; } .map__svg .map__node { opacity: 1; transition: none; } .note { transition: none; } html, body, .field, .index, .phone__ava i { transition: none; } } /* ─── Документы: /privacy, /support ──────────────────────────────────── */ .doc { position: relative; z-index: 2; max-width: 62ch; padding: clamp(4rem, 12vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem); color: var(--fg); font-size: 1rem; line-height: 1.6; text-wrap: pretty; } .doc h1 { font: 400 clamp(2rem, 5vw, 2.75rem)/1.1 var(--serif); letter-spacing: -.01em; margin: .5rem 0 1.5rem; } .doc h2 { font: 600 1.0625rem/1.3 var(--sans); margin: 2.25rem 0 .6rem; } .doc p, .doc li { color: var(--fg-2); } .doc p strong, .doc li strong { color: var(--fg); font-weight: 600; } .doc ul { padding-left: 1.1rem; margin: .5rem 0 1rem; } .doc li { margin: .3rem 0; } .doc a { color: var(--fg); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--hair); } .doc a:hover { text-decoration-color: currentColor; } .doc .label { margin-top: 2.5rem; }