/* Реплика партнёрского приложения. Все числа — _этапы/оцифровка.md (CSS px экрана 430×932). */ @import url('reports.css'); /* запись 2: вкладка Reports и экраны отчётов */ @font-face { font-family: 'Sarabun'; font-weight: 400; font-style: normal; font-display: block; src: url('fonts/sarabun-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Sarabun'; font-weight: 500; font-style: normal; font-display: block; src: url('fonts/sarabun-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Sarabun'; font-weight: 600; font-style: normal; font-display: block; src: url('fonts/sarabun-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Sarabun'; font-weight: 700; font-style: normal; font-display: block; src: url('fonts/sarabun-latin-700-normal.woff2') format('woff2'); } :root { --bg: #1A1920; --border: #353741; --hair: #35343B; --text: #E6E5EA; --title: #FFFDFF; --text2: #AAA8AD; --axis: #646772; --tile-sel: #272830; --btn2: #2F323B; --primary: #296FE7; /* проход 2: цвета вкладок по кадру 10 (p95–p99 чернил): значок #9FC2FF (было #9DC0FF), подпись активной #A5C4FA (было #A5BCEB — среднее сглаженных краёв, не цвет), неактивные подписи #ECEBF0 и значки #EBEAEF (было #E9E8ED) */ --tab-icon: #9FC2FF; --tab-label: #A5C4FA; --tab-idle: #ECEBF0; --toggle-bg: #303139; --toggle-thumb: #424960; /* 13.11 статус-бар `black`: макет в координатах экрана, сдвиг на высоту статус-бара S делает index.html setH (#app top = −S); --sat = max(0, S − 59) — добавка на моделях со статус-баром 62 (ставит setH; в Safari — от safe-area, обычно 0) */ --sat: max(0px, calc(env(safe-area-inset-top) - 59px)); --sab: max(34px, env(safe-area-inset-bottom)); --dhv: 0px; /* = --dh (отклонение высоты экрана от 932); короткого окна больше нет — статус-бар `black`, #app до низа экрана */ --push: cubic-bezier(0.30, 0.90, 0.20, 1.00); /* проход 5: отклонение экрана от 430×932 (ставит app.js) — раскладка тянется как Auto Layout iOS: на 375–402 px вторая колонка чипов/плиток и правый край графика уезжали за экран, заставка стояла не по центру */ --dw: 0px; --dh: 0px; --dw2: calc(var(--dw) / 2); color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; } body { font-family: 'Sarabun', sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; font-kerning: normal; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; } /* экран «Домой» (статус-бар black): окно = экран − S; #app высотой с экран, поднят на S (index.html setH) — низ #app = низ экрана */ #app { position: fixed; left: 0; top: 0; width: 100%; height: var(--app-h, 100%); overflow: hidden; background: var(--bg); } /* Текст по базовой линии: top = baseline − 0.418·font-size (метрики Sarabun: 1.068 / 0.232). */ .bl { position: absolute; line-height: 0; white-space: nowrap; } .ctr { position: absolute; left: 0; right: 0; text-align: center; line-height: 0; white-space: nowrap; } /* Экраны и стек */ .screen { position: absolute; inset: 0; background: var(--bg); overflow: hidden; will-change: transform; } .screen.push-in { box-shadow: -1px 0 0 rgba(0,0,0,0.04); } .tab-pane { position: absolute; inset: 0; display: none; } .tab-pane.on { display: block; } .scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; } .scroller::-webkit-scrollbar { display: none; } .page { position: relative; width: 100%; transform: translateY(var(--pull, 0px)); margin-top: var(--sat); } .dim-page { opacity: 1; } /* Шапка: прозрачная, неподвижная, поверх контента */ .hdr { position: absolute; left: 0; right: 0; top: var(--sat); height: 0; z-index: 5; pointer-events: none; } .hdr > * { pointer-events: auto; } /* проход 2 (13.11, проверка/device.py): свайп, начатый на логотипе или аватаре шапки, не листал экран (шапка — сосед .scroller, а не потомок). Шапка вкладок пропускает касания к .scroller (родная прокрутка с инерцией), нажатие на аватар ловит app.js по координатам */ .tab-pane > .hdr > * { pointer-events: none; } /* 13.11.2026: логотип оригинала — только слово «impact·com», место и размер — src/brand.js (HEADER_WORD, запись 1: x 24.00–203.20, y 62.70–88.72) */ .hdr-logo { position: absolute; } .hdr-word { display: block; } /* Аватар: проход 1 — по кадрам 07/10 круг ⌀32.2, центр (388.07, 75.68) (оцифровка ⌀39.3 ошибочна); на кадре 26 видно, что он сидит в кнопке ⌀44 цвета фона: контент под шапкой закрыт кольцом до r 22.0 */ .avatar { position: absolute; right: 25.83px; top: 59.58px; width: 32.2px; height: 32.2px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5.9px var(--bg); } .avatar svg { display: block; } .avatar.fadein { background: #FEFAFE; } .avatar.fadein svg { animation: avIn 300ms ease-in-out both; } /* проход 4: фото проявляется 5.69–6.00 с (+72 мс от скелетов) */ @keyframes avIn { from { opacity: 0; } } .avatar.loading { width: 32.1px; height: 32.1px; top: 59.63px; right: 25.88px; background: #FEFAFE; display: flex; align-items: center; justify-content: center; } /* Карточки */ .card { position: absolute; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); } .chip { top: 223.85px; height: 57px; width: calc(195px + var(--dw2)); } .chip.c2, .sk.c2 { margin-left: var(--dw2); } .chip .ic { position: absolute; left: 16.75px; top: 16.11px; width: 24.3px; height: 24.3px; line-height: 0; } .chip .bl { left: 48.8px; top: calc(34.35px - 6.69px); font-size: 16px; color: #E7E6EC; } .snap { left: 15.5px; right: 15.5px; top: 309.9px; height: 490.3px; } .snap-title { left: 16.79px; top: calc(39.5px - 9.61px); font-size: 23px; font-weight: 600; letter-spacing: -1.2px; color: var(--text); } .period-btn { position: absolute; right: 17.47px; top: 12.5px; height: 40px; display: flex; align-items: center; gap: 10.7px; color: #E8E7EC; transition: opacity .35s ease; } .period-btn span { font-size: 14.5px; font-weight: 600; letter-spacing: -0.24px; line-height: 15px; position: relative; top: -1.7px; } /* проход 1: кадр 10 — x 302.4…378.1, вес легче Bold (чернила 225k против 274k у 700) */ /* проход 1: по кадрам 10.90–11.35 и 12.00–12.37 — тускнеет за 0.42 с (ease) до яркости текста ≈94 (кадр 14), светлеет обратно за 0.35 с; было 0.15 с и 0.55 */ .period-btn.dim { opacity: 0.38; transition-duration: .42s; } .chart { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } .chart .grid line { stroke: #5C5E66; stroke-width: 0.75; } .chart .axis line { stroke: #5C606E; stroke-width: 1; } /* проход 1: подписи осей 14 / 13.9 px (высота «8» 9.7, ширина «Oct 13» 37.9 на кадре 10; было 15 / 14.5 — крупнее на 5–9 %) */ .chart text { font-family: 'Sarabun', sans-serif; font-size: 14px; fill: #646772; } .chart .xlab text { font-size: 13.9px; fill: #636572; } .chart-hit { position: absolute; left: 30px; right: 15px; top: 60px; height: 160px; touch-action: pan-y; } /* Подсказка: проход 1 (12.11) — по кадрам 20/22/24: шрифт меньше (высота цифр 8.25 против 9.2), ширина блока 110–113 (было 121–126), базовые +24.3 и +39.3 от верха блока, рамка тоньше и тусклее (≈1.2 px, +26 к яркости заливки, было 1.5 px почти белая) */ .tipbox { position: absolute; height: 53.4px; padding: 0 11.75px 0 10.7px; border-radius: 8px; letter-spacing: -0.15px; background: rgba(248, 247, 252, 0.78); box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.5); font-family: 'Helvetica Neue', Lato, -apple-system, sans-serif; font-size: 11.7px; color: #272022; pointer-events: none; white-space: nowrap; } .tipbox div { position: relative; line-height: 15.04px; height: 15.04px; } .tipbox div:first-child { margin-top: 12.4px; } .tile { width: calc(179px + var(--dw2)); height: 69px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); position: absolute; } .tile.c2 { margin-left: var(--dw2); } .tile.sel { background: var(--tile-sel); box-shadow: inset 0 0 0 1px #353745; } .tile .ctr { font-size: 16.5px; color: var(--text); } .tile .lab { letter-spacing: -0.27px; } /* проход 2 (кадр 10, края чернил по строкам): рамки плиток совпадают до 0.1, а текст был выше — подписи на 0.5–0.7, значения на 2.0–2.4 (значения — ячейки данных под маской diff.py, поэтому сдвиг не попадал в цифры); значения шире на 1–2 px */ .tile .lab { top: calc(29.2px - 6.9px); font-weight: 400; } .tile.sel .lab { font-weight: 700; } .tile .val { top: calc(53.15px - 6.9px); font-weight: 700; letter-spacing: -0.25px; } .today { left: 15.5px; right: 15.5px; top: 809px; height: 81px; } .pending { left: 15.5px; right: 15.5px; top: 899px; height: 57px; } .k-title { font-size: 16.5px; color: var(--text2); } .k-val { font-size: 17px; font-weight: 700; color: var(--text); } .k-sub { font-size: 12.5px; font-weight: 500; color: #A7A5A9; } .btn2 { position: absolute; left: 15.5px; right: 15.5px; top: 971px; height: 41.3px; border-radius: 20.65px; background: var(--btn2); } .btn2 .ctr { top: calc(26.2px - 6.06px); font-size: 14.5px; font-weight: 600; letter-spacing: -0.26px; color: #E5E6ED; } .hair { position: absolute; left: 0; right: 0; height: 1px; background: var(--hair); } /* проход 2: на записи 2 видеостроки ≈+26 к фону (= 1 CSS px), 0.6 px рисовался то 1, то 2 строками в 3 раза бледнее */ .mb-title { font-size: 17px; font-weight: 700; color: var(--text); } .mb-arrow { position: absolute; right: 16.97px; top: 1079.2px; display: block; line-height: 0; } .mb-arrow svg { display: block; } .carousel { position: absolute; left: 0; right: 0; top: 1110.9px; height: 250px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; } .carousel::-webkit-scrollbar { display: none; } .carousel-in { position: relative; height: 100%; display: flex; gap: 13.9px; padding: 0 15px; width: max-content; } .bcard { position: relative; width: 160px; height: 250px; flex: none; text-align: left; } /* проход 2 (кадр 28): нажатие не простая полупрозрачная заливка — белое уходит в (118,117,122), оранжевое (255,106,1) в (173,113,73), т.е. один и тот же R=255 даёт 118 и 173 (несепарабельно). Ближе всего: яркость к серому 120 (luminosity) + приглушение цвета 0.42. Было rgba(98,97,104,.6): белое 160, оранжевое (160,101,62). */ .bcard .logo::after { content: ''; position: absolute; inset: 0; background: rgb(120, 119, 124); mix-blend-mode: luminosity; opacity: 0; z-index: 2; } .bcard.pressed .logo::after { opacity: 1; } .bcard.pressed .logo svg { filter: saturate(0.42); } .navfx { position: absolute; inset: 0; z-index: 40; pointer-events: none; } /* проход 3: панель навигации iOS поверх обоих экранов на время перехода */ .push-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); pointer-events: none; z-index: 30; opacity: 0; } /* проход 2 (кадр 26): у логотипа тёмная рамка ≈1.2–1.6 px поверх картинки (белое начинается на 1.3 px внутрь, кромка яркостью 35–66); шаг карточек 173.9 (было 174.3), карусель на 0.5 выше; подписи на 1.4 правее края логотипа */ .bcard .logo { position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 8px; overflow: hidden; } .bcard .logo::before { content: ''; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.6px #2E2F37; z-index: 1; pointer-events: none; } .bcard .logo svg { display: block; width: 100%; height: 100%; } .bcard .nm { top: calc(184.7px - 5.96px); margin-left: 1.42px; font-size: 14.25px; font-weight: 700; color: #E7E6EB; } /* проход 2: высота прописной 10.82 (было 11.40 при 15 px), базовая на 0.4 ниже, вес как у Bold */ /* проход 2 (кадр 26): галочка ⌀11.9 (было 12.6), зазор от названия на 3.6 больше (9.2–9.7 от края букв), центр на 0.2 выше */ .vf { display: inline-block; position: relative; width: 20.5px; height: 0; } .vf svg { position: absolute; left: 8.6px; top: -11.85px; } .bcard .cat { top: calc(208.6px - 5.85px); margin-left: 1.42px; font-size: 14.0px; font-weight: 500; letter-spacing: -0.13px; color: #A9A8AC; } .bcard .earn { top: calc(232.8px - 5.91px); margin-left: 1.42px; font-size: 14.15px; font-weight: 600; letter-spacing: -0.07px; color: #E7E6EB; } /* Нижняя панель */ .tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(49px + var(--sab)); background: var(--bg); display: flex; z-index: 6; } .tab { position: relative; flex: 1; height: 49px; } .tab .ti { position: absolute; left: 50%; top: 5.1px; margin-left: -12px; width: 24px; height: 24px; } .tab .ti svg { display: block; } /* проход 2: подписи вкладок по кадру 10 — высота прописной 9.36 (было 9.85 при 13 px), базовая 894.3 (было 893.8), чернила как у Medium 500; рамки «Dashboard…Reports» совпадают до 0.03 по высоте и 0.2–0.5 по ширине */ .tab .tl { position: absolute; left: 0; right: 0; top: calc(45.0px - 5.12px); text-align: center; line-height: 0; font-size: 12.25px; font-weight: 500; letter-spacing: -0.24px; color: var(--tab-idle); white-space: nowrap; } .tab.on .tl { color: var(--tab-label); } /* проход 5 13.11: центр тяжести чернил подписей на записях 1 и 2 (кадр 10, g001, g194 — совпадают до 0.05) левее нашего на 0.38 / 0.23 / 0.16 / 0.15 / 0.35 px */ .tab:nth-child(1) .tl { transform: translateX(-0.38px); } .tab:nth-child(2) .tl { transform: translateX(-0.23px); } .tab:nth-child(3) .tl { transform: translateX(-0.16px); } .tab:nth-child(4) .tl { transform: translateX(-0.15px); } .tab:nth-child(5) .tl { transform: translateX(-0.35px); } /* Скелеты */ .sk { position: absolute; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); display: flex; align-items: center; justify-content: center; } .sk .ph { display: block; } .spinner { display: block; animation: spin 0.8s steps(8) infinite; } @keyframes spin { to { transform: rotate(360deg); } } .ptr { position: absolute; left: 50%; margin-left: -15px; width: 30px; height: 30px; z-index: 1; } /* Меню периода (системное меню iOS) */ .menu-layer { position: absolute; inset: 0; z-index: 20; display: none; } .menu-layer.on { display: block; } .menu { position: absolute; width: 250.2px; border-radius: 14px; overflow: hidden; background: rgba(50, 46, 52, 0.8); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 8px 70px 10px rgba(0, 0, 0, 0.45); transform-origin: 99% 20%; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; } .menu.opening { animation: menuIn 437ms linear both; } .menu.closing { animation: menuOut 120ms ease-in both; } /* проход 1: раскрытие по кадрам 10.917–11.35 (покадровый замер ширины и высоты панели): ширина обгоняет высоту на ~33 мс, перелёт до 1.012 на 217 мс, покой к 380 мс; центр роста — правый край и 20 % высоты (верх панели смещается лишь на 6 px) */ @keyframes menuIn { 0.0% { transform: scale(0.450, 0.300); opacity: 0; } 3.9% { transform: scale(0.600, 0.400); opacity: 0.6; } 7.6% { transform: scale(0.750, 0.500); opacity: 1; } 11.4% { transform: scale(0.820, 0.580); opacity: 1; } 15.3% { transform: scale(0.870, 0.660); opacity: 1; } 19.0% { transform: scale(0.910, 0.760); opacity: 1; } 22.9% { transform: scale(0.945, 0.870); opacity: 1; } 26.8% { transform: scale(0.968, 0.930); opacity: 1; } 30.4% { transform: scale(0.986, 0.960); opacity: 1; } 34.3% { transform: scale(0.998, 0.985); opacity: 1; } 38.2% { transform: scale(1.004, 1.000); opacity: 1; } 41.9% { transform: scale(1.008, 1.004); opacity: 1; } 45.8% { transform: scale(1.010, 1.008); opacity: 1; } 49.7% { transform: scale(1.012, 1.008); opacity: 1; } 68.6% { transform: scale(1.004, 1.003); opacity: 1; } 87.0% { transform: scale(1.000, 1.000); opacity: 1; } 100.0% { transform: scale(1.000, 1.000); opacity: 1; } } @keyframes menuOut { to { transform: scale(0.9); opacity: 0; } } .mi { position: relative; display: block; width: 100%; height: 43.7px; text-align: left; padding-left: 16.9px; font-size: 17px; color: #FFFFFF; letter-spacing: 0; } .mi + .mi { box-shadow: inset 0 0.6px 0 rgba(255, 255, 255, 0.2); } .mi .ck { position: absolute; right: 18.8px; top: calc(50% + 1.15px); transform: translateY(-50%); line-height: 0; } /* Вибрация: настоящий тап по input switch через прозрачный label поверх кнопки */ .hap { position: absolute; inset: 0; opacity: 0.001; z-index: 3; overflow: hidden; } .hap input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; } /* Brand Details */ .nav { position: absolute; left: 0; right: 0; top: var(--sat); height: 0; z-index: 5; } .nav .back { position: absolute; left: 10px; top: 54px; width: 44px; height: 44px; } .nav .back svg { position: absolute; left: 12.8px; top: 14.4px; } .nav .ttl { left: 0; right: 0; top: calc(81.91px - 7.53px); padding-left: 1.26px; font-size: 18.0px; font-weight: 700; letter-spacing: -0.155px; color: var(--title); } .bd-logo { position: absolute; left: 15.5px; top: 104.8px; width: 86px; height: 86px; border-radius: 8px; overflow: hidden; } .bd-logo svg { display: block; width: 100%; height: 100%; } .bd-logo::before { content: ''; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.2px #2E2F37; z-index: 1; pointer-events: none; } /* проход 3: тёмная кромка ≈1.2 px поверх логотипа, как у карточек брендов */ .cta { position: absolute; left: 16px; right: 16px; top: 344.7px; height: 39.8px; border-radius: 19.9px; background: var(--primary); } .cta .ctr { top: calc(26.1px - 6.10px); font-size: 14.6px; font-weight: 600; letter-spacing: -0.32px; color: #fff; } .metrics { position: absolute; left: 0; right: 0; top: 450.9px; height: 88.8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; } .metrics::-webkit-scrollbar { display: none; } .metrics-in { display: flex; gap: 9px; padding: 0 19.6px; width: max-content; height: 100%; } .mcard { position: relative; width: 97px; height: 88.8px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); display: flex; justify-content: center; } .mcard .in { position: relative; transform: translateX(-1.94px); } .mcard .l { font-size: 14.9px; letter-spacing: -0.48px; color: #B2B1B6; } /* проход 3: на записи выше на 0.5 и ярче (p99 178 против 170) */ .mcard .v { font-size: 16px; font-weight: 700; color: var(--text); } .desc { position: absolute; left: 16.5px; right: 18.9px; top: calc(650.0px - 10.45px - 6.69px); font-size: 16px; line-height: 20.9px; color: var(--text2); white-space: normal; } .models { position: absolute; left: 0; right: 0; top: 780.4px; height: 39.8px; padding: 0 16px; display: flex; gap: 8.2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x pan-y; } /* проход 5: на 375 px «Technology Solution» уходил за край — по аналогии с метриками листается вбок */ .models::-webkit-scrollbar { display: none; } .model { flex: none; } .model { height: 39.8px; padding: 0 11.2px; border-radius: 19.9px; background: #272830; font-size: 12.5px; color: #E3E4EB; display: flex; align-items: center; white-space: nowrap; line-height: 1; letter-spacing: -0.24px; padding: 0 10.53px 0.2px 9.75px; } .seg { position: absolute; left: 16px; right: 16px; top: 881.3px; height: 39.3px; border-radius: 19.65px; background: var(--toggle-bg); } .seg .thumb { position: absolute; left: 5.28px; top: 4.5px; width: calc(50% - 14.2px); height: 30px; border-radius: 15px; background: var(--toggle-thumb); transition: transform 250ms ease; } .seg.r .thumb { transform: translateX(calc(100% + 17.84px)); } .seg button { position: absolute; top: 0; height: 100%; width: 50%; } .seg button .ctr { top: calc(25.27px - 5.85px); font-size: 14px; font-weight: 600; color: var(--text); } /* проход 5: на 375–393 px описание выплаты наезжало на сумму — обрезка многоточием (по аналогии с UILabel); на 430 не срабатывает */ .pcard .pdesc { max-width: calc(100% - 21.4px - 128px); overflow: hidden; text-overflow: ellipsis; line-height: 20px; margin-top: -10px; } .pcard { position: absolute; left: 15.5px; right: 15.5px; height: 73.5px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); } /* Заставка — стили в index.html (inline