/* ============================================================================= MyFinance — стеклянная многослойная система (glassmorphism, 3D-плашки) СЛОЙ 0 · СЦЕНА .bgscene — базовый градиент, аврора-блобы, зерно, виньетка. Лежит внутри .phone и НЕ скроллится вместе с контентом — отсюда бесплатный параллакс и ощущение глубины. СЛОЙ 1 · СТЕКЛО .headcard .card .list .goal .scen .pills .imm .dock .sheet Полупрозрачная заливка + backdrop-blur + фаска (светлая грань сверху, тёмная снизу) + три тени: контактная, средняя, окружения. Фаска и есть «толщина» стекла. СЛОЙ 2 · ЭЛЕМЕНТЫ .item .lead .chip .cell .check — живут ВНУТРИ плашки. Приподняты собственными тенями; поля ввода .in наоборот утоплены внутрь — контраст «выпуклое/вогнутое» и даёт 3D. СЛОЙ 3 · ХРОМ .fab .dock — плавают над всем, самая сильная тень. FAB непрозрачный: главное действие обязано быть контрастнее любого стекла. ПРАВИЛО ПРОИЗВОДИТЕЛЬНОСТИ (iPhone/Safari): backdrop-filter только у того, что лежит непосредственно на сцене. Вложенное в плашку стекло — обычная полупрозрачность, без blur. Блобы сцены — radial-gradient, не filter:blur. ============================================================================= */ :root{ /* --- слой 0: сцена --- */ --scene1:#E9EDFD; --scene2:#D2D9F7; --scene3:#E1E5FC; --grain:.035; --vign:rgba(38,48,110,.13); --blob-1:.80; --blob-2:.62; --blob-3:.50; /* --- слой 1: стекло --- */ --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.78); --glass-soft:rgba(255,255,255,.34); --glass-line:rgba(255,255,255,.70); /* Контур чекбокса отдельным токеном: белая грань стекла на светлой плашке не видна вовсе, а это управляющий элемент — он обязан читаться. */ --check-line:rgba(52,64,140,.26); --bevel:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(52,64,140,.09); --blur:20px; --blur-strong:30px; --sat:180%; --tint-a1:84%; --tint-a2:88%; --tint-a3:90%; /* плотность цветного стекла шапок */ /* --- тени: контакт + средняя + окружение (три ступени = высота) --- */ --sh1:0 1px 2px rgba(38,48,110,.08); --sh2:0 7px 18px rgba(38,48,110,.12); --sh3:0 26px 54px rgba(38,48,110,.16); --elev:var(--sh1),var(--sh2),var(--sh3); --elev-sm:0 1px 2px rgba(38,48,110,.06),0 4px 12px rgba(38,48,110,.08); --shadow:var(--elev); /* легаси-алиасы */ --shadow-sm:var(--elev-sm); /* --- чернила и текст (на стекле контраст выше, чем на плоском фоне) --- */ --ink:#1B2150; --t2:#5D6493; --t3:#8F95BE; --panel:rgba(48,60,140,.11); /* утопленные дорожки: трек, метр, гейдж */ --surface:var(--glass); --hair:rgba(52,64,140,.10); --line:var(--glass-line); --chip:rgba(91,103,231,.13); --chip-ink:#4753DC; --bar-lt:#C7CDF9; --bar-md:#98A2F3; --on-acc:#FFFFFF; --on-acc-dim:rgba(255,255,255,.68); --dot-mono:#232A55; --dot-rabo:#F2803B; --dot-asn:#31B472; --ok:#31B472; --overlay:rgba(28,34,80,.34); --bg1:var(--scene1); --bg2:var(--scene2); /* --- prime-цвета разделов --- */ --acc:#5B67E7; --acc2:#7681F0; --acc-deep:#4A55D2; --acc-grad:linear-gradient(160deg,#6873EE 0%,#5560DE 60%,#4A55D2 100%); --acc-exp:#3D4BD8; --acc2-exp:#6270F0; --deep-exp:#2E3AC0; --tint-exp:rgba(61,75,216,.13); --ink-exp:#3644C9; --grad-exp:linear-gradient(160deg,#6270F0 0%,#3D4BD8 55%,#2E3AC0 100%); --acc-inc:#2F7CF6; --acc2-inc:#6AA4F9; --deep-inc:#1F63DD; --tint-inc:rgba(47,124,246,.13); --ink-inc:#2568E5; --grad-inc:linear-gradient(160deg,#6AA4F9 0%,#2F7CF6 55%,#1F63DD 100%); --acc-sav:#8B4FE8; --acc2-sav:#A87BF2; --deep-sav:#6E2ECF; --tint-sav:rgba(139,79,232,.13); --ink-sav:#7B3FE0; --grad-sav:linear-gradient(160deg,#A87BF2 0%,#8B4FE8 55%,#6E2ECF 100%); --acc-his:#6C5CE7; --acc2-his:#8F82F0; --deep-his:#5544D2; --tint-his:rgba(108,92,231,.13); --ink-his:#6152E0; --grad-his:linear-gradient(160deg,#8F82F0 0%,#6C5CE7 55%,#5544D2 100%); /* --- хью-веер строк --- */ --h0-ink:#1E6EF0; --h0-bg:rgba(30,110,240,.14); --h1-ink:#3A4EE6; --h1-bg:rgba(58,78,230,.14); --h2-ink:#5A55EE; --h2-bg:rgba(90,85,238,.14); --h3-ink:#7146E8; --h3-bg:rgba(113,70,232,.14); --h4-ink:#8A3FE3; --h4-bg:rgba(138,63,227,.14); } /* ------------------------------ тёмная тема ------------------------------ Один блок: тему разрешает инлайн-скрипт в , поэтому data-theme стоит на всегда. Раньше значения жили в трёх копиях и уже разъехались. */ :root[data-theme="dark"]{ --scene1:#0F0E1B; --scene2:#08070E; --scene3:#141122; --grain:.06; --vign:rgba(0,0,0,.6); --blob-1:.90; --blob-2:.68; --blob-3:.52; --glass:rgba(46,44,68,.50); --glass-strong:rgba(32,30,48,.80); --glass-soft:rgba(255,255,255,.06); --glass-line:rgba(255,255,255,.13); --check-line:rgba(255,255,255,.24); --bevel:inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.45); --blur:24px; --blur-strong:34px; --sat:150%; /* в тёмной шапка тоньше: полэкрана яркого пурпура на почти чёрном выжигает */ --tint-a1:70%; --tint-a2:76%; --tint-a3:82%; --sh1:0 1px 2px rgba(0,0,0,.45); --sh2:0 8px 20px rgba(0,0,0,.45); --sh3:0 26px 52px rgba(0,0,0,.55); --elev-sm:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.45); --ink:#F2F0FF; --t2:#A9A5C4; --t3:#75718D; --panel:rgba(255,255,255,.08); --hair:rgba(255,255,255,.07); --chip:rgba(139,92,246,.18); --chip-ink:#BCA6FB; --bar-lt:#2B2839; --bar-md:#4E3D86; --on-acc-dim:rgba(255,255,255,.66); --dot-mono:#EDEDF2; --dot-rabo:#FF9552; --dot-asn:#3DD68C; --ok:#3DD68C; --overlay:rgba(0,0,0,.58); --acc:#8B5CF6; --acc2:#A78BFA; --acc-deep:#6D3AE8; --acc-grad:linear-gradient(160deg,#A78BFA 0%,#8B5CF6 55%,#6D3AE8 100%); --acc-exp:#7C3AED; --acc2-exp:#9F75F8; --deep-exp:#6929D6; --tint-exp:rgba(124,58,237,.24); --ink-exp:#B79BF9; --grad-exp:linear-gradient(160deg,#9F75F8 0%,#7C3AED 55%,#6222CC 100%); --acc-inc:#4D8DFA; --acc2-inc:#7FB0FC; --deep-inc:#2F6BE0; --tint-inc:rgba(77,141,250,.24); --ink-inc:#95BCFC; --grad-inc:linear-gradient(160deg,#7FB0FC 0%,#4D8DFA 55%,#2F6BE0 100%); --acc-sav:#A855F7; --acc2-sav:#C084FC; --deep-sav:#8B2FE8; --tint-sav:rgba(168,85,247,.24); --ink-sav:#CDA8FB; --grad-sav:linear-gradient(160deg,#C084FC 0%,#A855F7 55%,#8B2FE8 100%); --acc-his:#7B70F5; --acc2-his:#9C93F8; --deep-his:#5F52E0; --tint-his:rgba(123,112,245,.24); --ink-his:#ADA6F9; --grad-his:linear-gradient(160deg,#9C93F8 0%,#7B70F5 55%,#5F52E0 100%); --h0-ink:#6FAAFC; --h0-bg:rgba(30,110,240,.22); --h1-ink:#8494F9; --h1-bg:rgba(58,78,230,.22); --h2-ink:#9C99FA; --h2-bg:rgba(90,85,238,.22); --h3-ink:#A98EF8; --h3-bg:rgba(113,70,232,.22); --h4-ink:#BC86F9; --h4-bg:rgba(138,63,227,.22); } /* Нет backdrop-filter (старый движок) — стекло становится плотной заливкой, иначе текст ляжет прямо на блобы и станет нечитаемым. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){ :root{--glass:rgba(255,255,255,.94);--glass-strong:rgba(255,255,255,.97)} :root[data-theme="dark"]{--glass:rgba(26,25,40,.95);--glass-strong:rgba(20,19,32,.98)} } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* дисплейный шрифт: заголовки и большие цифры */ .hl,.imm .title,.sec h2,.sheet h3,.login h1, .gauge .gv,.money-big,#paid-sum,.tri .v,.goal .pct,.col .tag,.dday .dn,#daily-avg{ font-family:"Montserrat","Manrope",sans-serif} html,body{height:100%} body{ font-family:"Manrope",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif; background:#0B0B12; display:flex; justify-content:center; font-variant-numeric:tabular-nums; } .phone{width:100%;max-width:430px;height:100dvh;color:var(--ink); background:var(--scene2); display:flex;flex-direction:column;position:relative;overflow:hidden; transition:background .4s} /* ============================================================================= СЛОЙ 0 · СЦЕНА ============================================================================= */ .bgscene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; background:linear-gradient(168deg,var(--scene1) 0%,var(--scene3) 46%,var(--scene2) 100%)} /* Блобы: мягкость даёт radial-gradient, а НЕ filter:blur — на мобиле это разница между «плавно» и «телефон греется». Позицию по скроллу двигает JS. */ .blob{position:absolute;pointer-events:none;will-change:transform} .blob::before{content:"";position:absolute;inset:0;border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--bc) 92%, transparent) 0%, color-mix(in srgb, var(--bc) 46%, transparent) 46%, transparent 100%); transition:background .6s ease} .b1{width:118%;height:52%;left:-32%;top:-14%;--bc:color-mix(in srgb,var(--bl1) calc(var(--blob-1)*100%),transparent)} .b2{width:104%;height:46%;right:-40%;top:24%;--bc:color-mix(in srgb,var(--bl2) calc(var(--blob-2)*100%),transparent)} .b3{width:126%;height:54%;left:-20%;bottom:-16%;--bc:color-mix(in srgb,var(--bl3) calc(var(--blob-3)*100%),transparent)} @keyframes drift{ from{transform:translate3d(0,0,0) scale(1)} to {transform:translate3d(4%,-3%,0) scale(1.09)} } .blob::before{animation:drift 44s ease-in-out infinite alternate} .b2::before{animation-duration:58s;animation-delay:-12s} .b3::before{animation-duration:70s;animation-delay:-30s} @media (prefers-reduced-motion: reduce){ .blob::before{animation:none} } /* Зерно: настоящее стекло не бывает идеально гладким. Без него — пластик. */ .grain{position:absolute;inset:0;opacity:var(--grain);pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px;mix-blend-mode:overlay} /* Виньетка: прижимает края, поднимает центр — воздух над сценой */ .bgscene::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(128% 78% at 50% 4%, transparent 42%, var(--vign) 100%)} /* Блобы: prime-цвет раздела + два соседних тона. Разводить оттенки обязательно — три блоба одного цвета дают монотонное пятно, и стеклу нечего преломлять. Диапазон остаётся холодным. */ .phone {--bl1:var(--acc-his);--bl2:var(--acc-inc);--bl3:var(--acc-sav)} .phone[data-sec="expenses"]{--bl1:var(--acc-exp);--bl2:var(--acc-inc);--bl3:var(--acc-sav)} .phone[data-sec="income"] {--bl1:var(--acc-inc);--bl2:var(--acc-his);--bl3:var(--acc-exp)} .phone[data-sec="savings"] {--bl1:var(--acc-sav);--bl2:var(--acc-his);--bl3:var(--acc-inc)} .phone[data-sec="history"] {--bl1:var(--acc-his);--bl2:var(--acc-sav);--bl3:var(--acc-inc)} main{position:relative;z-index:1;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:14px 18px 140px} main.flush{padding:0 0 140px} .screen{display:none} .screen.active{display:block} /* ============================================================================= СЛОЙ 1 · СТЕКЛО — общая пластина ============================================================================= */ .headcard,.card,.list,.goal,.scen,.pills,.catc,.dock,.sheet{ background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)); backdrop-filter:blur(var(--blur)) saturate(var(--sat)); border:1px solid var(--glass-line); box-shadow:var(--elev), var(--bevel); } /* Высотная лестница. Без неё «многослойность» остаётся словом: все плашки с одинаковой тенью читаются как один лист, на какой бы фон их ни положили. h1 прижато к сцене · h2 парит · h3 стопка пластин · хром — выше всех. */ .list,.headcard,.pills,.catc,.scen{box-shadow:var(--sh1),var(--sh2),var(--bevel)} .card,.goal{box-shadow:var(--elev),var(--bevel)} /* Цветное стекло: prime-градиент раздела берётся с альфой, поэтому сквозь шапку просвечивают блобы сцены. Сплошная заливка выглядела плитой и в тёмной теме выжигала пол-экрана. Альфа держится на .84+ — белый текст обязан оставаться читаемым над любым блобом. */ .imm,.card.hero{ --tinted:linear-gradient(160deg, color-mix(in srgb,var(--acc2) var(--tint-a1),transparent) 0%, color-mix(in srgb,var(--acc) var(--tint-a2),transparent) 55%, color-mix(in srgb,var(--acc-deep) var(--tint-a3),transparent) 100%); -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); } /* Блик по верхней грани — то, что читается как «это стекло». Высота фиксированная (не %): на длинном списке процент дал бы видимую полосу поперёк строк. Затухание до нуля, без ступеньки. */ .headcard,.card,.list,.goal,.scen,.imm{position:relative;overflow:hidden} .headcard::before,.card::before,.list::before,.goal::before,.scen::before,.imm::before{ content:"";position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none; background:linear-gradient(172deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 38%, rgba(255,255,255,0) 100%)} :root[data-theme="dark"] .headcard::before,:root[data-theme="dark"] .card::before, :root[data-theme="dark"] .list::before,:root[data-theme="dark"] .goal::before, :root[data-theme="dark"] .scen::before,:root[data-theme="dark"] .imm::before{ background:linear-gradient(172deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 40%, rgba(255,255,255,0) 100%)} /* ---------- шапка-карточка ---------- */ .headcard{border-radius:26px;padding:16px 18px;display:flex;align-items:center;gap:12px} .ava{width:42px;height:42px;border-radius:50%;background:var(--acc-grad);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none;cursor:pointer; box-shadow:0 4px 12px color-mix(in srgb,var(--acc-deep) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.35); position:relative;z-index:1} .headcard .hh{flex:1;min-width:0;position:relative;z-index:1} .headcard .hl{font-size:19px;font-weight:800;letter-spacing:-.015em} .headcard .hs{font-size:10.5px;color:var(--t3);font-weight:800;margin-top:3px; text-transform:uppercase;letter-spacing:.09em} .ratepill{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--chip-ink); background:var(--chip);border:1px solid var(--glass-line);border-radius:15px;padding:8px 13px; cursor:pointer;font-family:inherit;flex:none;font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.5);position:relative;z-index:1; transition:transform .12s} .ratepill:active{transform:scale(.96)} /* ---------- сегменты-пилюли ---------- */ .pills{display:flex;gap:6px;border-radius:20px;padding:5px;margin-top:14px} .pills button{flex:1;border:0;border-radius:15px;background:transparent;font-family:inherit; font-size:14px;font-weight:700;color:var(--t2);padding:11px 0;cursor:pointer;transition:.2s} .pills button.on{background:var(--acc-grad);color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--acc-deep) 42%,transparent), inset 0 1px 0 rgba(255,255,255,.3)} /* ---------- большая плашка ---------- */ .card{border-radius:26px;padding:20px;margin-top:14px} /* Герой-карта раздела: цветное стекло + вторая пластина, выглядывающая снизу. Стопка пластин — самый честный способ показать «слои», без фейковой перспективы, которая ломает выравнивание в скролле. */ .card.hero{ background: radial-gradient(130% 100% at 86% -14%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 50%), var(--tinted); color:#fff;text-align:center;padding:28px 20px; border-color:color-mix(in srgb,#fff 26%,transparent); box-shadow:0 2px 4px color-mix(in srgb,var(--acc-deep) 26%,transparent), 0 10px 24px color-mix(in srgb,var(--acc-deep) 30%,transparent), 0 26px 54px color-mix(in srgb,var(--acc-deep) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.14)} .card.hero::before{border-radius:26px 26px 0 0} .card h3{font-size:11px;font-weight:800;text-align:center;color:var(--t2); text-transform:uppercase;letter-spacing:.1em;position:relative;z-index:1} .card .hint{font-size:12px;color:var(--t3);text-align:center;font-weight:600;margin-top:2px; position:relative;z-index:1} .card > *{position:relative;z-index:1} /* ---------- гейдж ---------- */ .gauge{display:flex;flex-direction:column;align-items:center;margin-top:6px} .gauge svg{display:block} .gauge .gv{font-size:36px;font-weight:800;letter-spacing:-.03em;margin-top:-74px} .gauge .gv small{font-size:.55em;font-weight:500;font-family:"Manrope",sans-serif;opacity:.5;margin-left:3px} .gauge .gl{font-size:12.5px;color:var(--t2);font-weight:600;margin-top:4px} .tripod{display:flex;margin-top:24px;gap:10px} .tri{flex:1;text-align:center} .tri .v{font-size:20px;font-weight:800;letter-spacing:-.02em} .tri .v small{font-size:11px;font-weight:800;color:var(--t3)} /* дорожки утоплены внутрь плашки — вогнутое против выпуклого */ .tri .meter{height:5px;border-radius:3px;background:var(--panel);margin:8px 14px 6px;overflow:hidden; box-shadow:inset 0 1px 2px rgba(38,48,110,.14)} .tri .meter i{display:block;height:100%;border-radius:3px;background:var(--acc)} .tri .l{font-size:11.5px;color:var(--t2);font-weight:600} /* ---------- заголовок секции ---------- */ .sec{display:flex;justify-content:space-between;align-items:center;margin:24px 4px 10px} .sec h2{font-size:17px;font-weight:800;letter-spacing:-.015em} .sec a{font-size:13px;font-weight:700;color:var(--acc);text-decoration:none} /* ============================================================================= СЛОЙ 2 · ЭЛЕМЕНТЫ — живут внутри плашки, blur не применяется ============================================================================= */ .list{border-radius:24px;overflow:hidden} .item{display:flex;align-items:center;gap:13px;padding:14px 18px;min-height:66px; position:relative;z-index:1;transition:background .18s, transform .12s} .item + .item{border-top:1px solid var(--hair)} .item:active{background:var(--glass-soft);transform:scale(.994)} .lead{width:42px;height:42px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--hbg,var(--chip)); box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 2px 6px rgba(38,48,110,.10)} .lead svg{stroke:var(--hink,var(--chip-ink))} .lead.day{font-size:15px;font-weight:800;color:var(--hink,var(--chip-ink))} :root[data-theme="dark"] .lead{box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.35)} /* хью-веер: персональный оттенок строки, детерминирован по названию */ .h0{--hbg:var(--h0-bg);--hink:var(--h0-ink)} .h1{--hbg:var(--h1-bg);--hink:var(--h1-ink)} .h2{--hbg:var(--h2-bg);--hink:var(--h2-ink)} .h3{--hbg:var(--h3-bg);--hink:var(--h3-ink)} .h4{--hbg:var(--h4-bg);--hink:var(--h4-ink)} /* кастомный цвет платежа (--pc задаётся инлайном из p.color) */ .lead.custom{background:color-mix(in srgb,var(--pc) 18%,transparent)} .lead.custom svg{stroke:var(--pc)} :root[data-theme="dark"] .lead.custom{background:color-mix(in srgb,var(--pc) 28%,transparent)} :root[data-theme="dark"] .lead.custom svg{stroke:color-mix(in srgb,var(--pc) 68%,#fff)} .body{flex:1;min-width:0} .body .t{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .body .m{font-size:12.5px;color:var(--t2);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:6px; white-space:nowrap;overflow:hidden} .body .m.help-m{white-space:normal;display:block;line-height:1.5;margin-top:4px} #scr-help .item{align-items:flex-start;padding:16px 18px} #scr-help .lead{margin-top:2px} .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none} .dot.mono{background:var(--dot-mono)} .dot.rabo{background:var(--dot-rabo)} .dot.asn{background:var(--dot-asn)} .dot.other{background:var(--t2)} .num{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap} .num.up{color:var(--ok)} .num.mut{color:var(--t2)} .chev{stroke:var(--t3);flex:none} .check{width:28px;height:28px;border-radius:10px;border:1.5px solid var(--check-line,var(--glass-line));flex:none; background:var(--glass-soft);display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:inset 0 1px 2px rgba(38,48,110,.10);transition:.18s} .item.paid .check{background:var(--acc);border-color:transparent; box-shadow:0 4px 12px color-mix(in srgb,var(--acc-deep) 45%,transparent), inset 0 1px 0 rgba(255,255,255,.3)} .check svg{display:none} .item.paid .check svg{display:block} .item.paid .lead,.item.paid .body{opacity:.45} .item.paid .body .t{text-decoration:line-through;text-decoration-thickness:1.5px} /* ============================================================================= Иммерсивная шапка раздела — цветное стекло + вторая пластина снизу ============================================================================= */ .imm{ background: radial-gradient(130% 100% at 86% -14%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 48%), var(--tinted); color:#fff;padding:20px 18px 26px;border-radius:0 0 34px 34px; border:0;border-bottom:1px solid color-mix(in srgb,#fff 22%,transparent); box-shadow:0 10px 26px color-mix(in srgb,var(--acc-deep) 30%,transparent), 0 28px 56px color-mix(in srgb,var(--acc-deep) 26%,transparent), inset 0 -1px 0 rgba(0,0,0,.12)} .imm::before{border-radius:0} .imm > *{position:relative;z-index:1} .imm .top{display:flex;justify-content:space-between;align-items:center} .imm .title{font-size:24px;font-weight:800;letter-spacing:-.02em} .imm .sub{font-size:10.5px;color:var(--on-acc-dim);font-weight:800;margin-top:4px; text-transform:uppercase;letter-spacing:.09em} .imm .ratepill{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.28)} .sheet-body{padding:6px 18px 0} /* день-стрип */ .days{display:flex;gap:8px;margin-top:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .days::-webkit-scrollbar{display:none} .dday{flex:none;width:52px;border-radius:18px;padding:10px 0 12px;text-align:center;cursor:pointer; transition:background .18s} .dday .dw{font-size:11px;font-weight:700;color:var(--on-acc-dim)} .dday .dn{font-size:22px;font-weight:800;margin-top:4px} .dday .pip{width:5px;height:5px;border-radius:50%;background:transparent;margin:6px auto 0} .dday.has .pip{background:#fff} .dday.sel{background:rgba(255,255,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.14)} .dday.dim .dn{color:var(--on-acc-dim)} /* прогресс */ .prog{margin-top:16px} .prog .pr-l{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:var(--t2)} .prog .pr-l b{color:var(--ink);font-size:15px} .prog .pr-l #paid-sum{font-size:21px;font-weight:800;letter-spacing:-.02em} .prog .pr-l #paid-sum small{font-size:.58em;font-weight:500;font-family:"Manrope",sans-serif;opacity:.55;margin-left:2px} .prog .track{height:10px;border-radius:6px;background:var(--panel);margin-top:8px;overflow:hidden; box-shadow:inset 0 1px 3px rgba(38,48,110,.16)} .prog .track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--acc2),var(--acc)); box-shadow:0 1px 5px color-mix(in srgb,var(--acc) 55%,transparent)} /* ---------- чипы категорий ---------- */ .cats{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding:2px;scrollbar-width:none} .cats::-webkit-scrollbar{display:none} .catc{flex:none;display:flex;align-items:center;gap:8px;border-radius:16px;padding:10px 14px; font-size:13px;font-weight:700} .catc svg{stroke:var(--hink,var(--chip-ink))} .catc b{font-weight:800} /* ---------- цели ---------- */ .goal{border-radius:24px;padding:18px;margin-top:12px} .goal > *{position:relative;z-index:1} .goal .head{display:flex;justify-content:space-between;align-items:center} .goal .name{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800} .goal .name .lead{width:38px;height:38px;border-radius:13px} .goal .pct{font-size:17px;font-weight:800;letter-spacing:-.02em; background:linear-gradient(135deg,var(--acc2),var(--acc-deep)); -webkit-background-clip:text;background-clip:text;color:transparent} .goal .track{height:10px;border-radius:6px;background:var(--panel);margin-top:14px;overflow:hidden; box-shadow:inset 0 1px 3px rgba(38,48,110,.16)} .goal .track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--acc2),var(--acc)); box-shadow:0 1px 5px color-mix(in srgb,var(--acc) 55%,transparent)} .goal .meta{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:var(--t2);margin-top:10px} .goal .meta b{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)} /* ---------- график истории ---------- */ .chart{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:190px;margin-top:26px;padding:0 6px} .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px} .col .stack{width:26px;border-radius:14px;background:rgba(255,255,255,.20);position:relative; display:flex;align-items:flex-end;overflow:visible; box-shadow:inset 0 1px 2px rgba(0,0,0,.10)} .col .fillb{width:100%;border-radius:14px;background:rgba(255,255,255,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .col.on .fillb{background:#fff;box-shadow:0 4px 14px rgba(255,255,255,.35)} .col .lbl{font-size:11.5px;font-weight:700;color:var(--on-acc-dim)} .col.on .lbl{color:#fff} .col .tag{position:absolute;top:-36px;left:50%;transform:translateX(-50%); background:rgba(255,255,255,.94);color:var(--acc-deep); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-size:13px;font-weight:800;letter-spacing:-.01em;border-radius:12px;padding:6px 10px;white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9)} .mrow{cursor:pointer} /* ============================================================================= СЛОЙ 3 · ХРОМ — док и FAB плавают над сценой и контентом ============================================================================= */ .dock{position:absolute;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom)); background:var(--glass-strong); -webkit-backdrop-filter:blur(var(--blur-strong)) saturate(var(--sat)); backdrop-filter:blur(var(--blur-strong)) saturate(var(--sat)); border-radius:26px;display:flex;padding:8px;z-index:6; box-shadow:var(--sh1), 0 10px 24px rgba(38,48,110,.14), 0 28px 56px rgba(38,48,110,.16), var(--bevel)} :root[data-theme="dark"] .dock{box-shadow:var(--sh1),0 10px 26px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.55),var(--bevel)} .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;border-radius:18px; font-size:10px;font-weight:700;color:var(--t3);cursor:pointer;font-family:inherit;padding:8px 0 7px;transition:.2s} .tab svg{stroke:var(--t3)} .tab.on{background:var(--acc-grad);color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--acc-deep) 45%,transparent), inset 0 1px 0 rgba(255,255,255,.28)} .tab.on svg{stroke:#fff} /* FAB — главное действие: единственная непрозрачная плашка в хроме */ .fab{position:absolute;right:18px;bottom:calc(96px + env(safe-area-inset-bottom));height:54px; border-radius:27px;background:var(--acc-grad);color:#fff; border:1px solid color-mix(in srgb,#fff 24%,transparent); display:flex;align-items:center;gap:8px; padding:0 22px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;z-index:7; box-shadow:0 2px 4px color-mix(in srgb,var(--acc-deep) 34%,transparent), 0 10px 22px color-mix(in srgb,var(--acc-deep) 42%,transparent), 0 22px 44px color-mix(in srgb,var(--acc-deep) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.16); transition:transform .14s, box-shadow .14s} .fab svg{stroke:#fff} .fab:active{transform:translateY(2px) scale(.97); box-shadow:0 1px 2px color-mix(in srgb,var(--acc-deep) 34%,transparent), 0 4px 10px color-mix(in srgb,var(--acc-deep) 38%,transparent), inset 0 1px 0 rgba(255,255,255,.3)} /* ============================================================================= Шторки — самое сильное стекло, оверлей размывает приложение под собой ============================================================================= */ .overlay{position:absolute;inset:0;background:var(--overlay); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;pointer-events:none;transition:.25s;z-index:10} .overlay.open{opacity:1;pointer-events:auto} .sheet{position:absolute;left:0;right:0;bottom:0; background:var(--glass-strong); -webkit-backdrop-filter:blur(var(--blur-strong)) saturate(var(--sat)); backdrop-filter:blur(var(--blur-strong)) saturate(var(--sat)); border:1px solid var(--glass-line);border-bottom:0; border-radius:30px 30px 0 0; padding:12px 20px calc(28px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden; transition:transform .32s cubic-bezier(.3,.7,.3,1),visibility 0s .32s;z-index:11;max-height:88%;overflow-y:auto; box-shadow:0 -2px 8px rgba(38,48,110,.06), 0 -18px 50px rgba(38,48,110,.18), inset 0 1px 0 rgba(255,255,255,.9)} :root[data-theme="dark"] .sheet{box-shadow:0 -2px 8px rgba(0,0,0,.4),0 -20px 56px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12)} .sheet.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.3,.7,.3,1)} .grab{width:40px;height:5px;border-radius:3px;background:var(--t3);opacity:.4;margin:4px auto 16px} .sheet h3{font-size:20px;font-weight:800;text-align:center;letter-spacing:-.01em} .amt{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:24px 0 8px} .amt input{border:0;background:none;font-size:52px;font-weight:800;letter-spacing:-.03em;width:180px;text-align:right; color:var(--ink);outline:none;font-family:inherit;font-variant-numeric:tabular-nums} .amt input::placeholder{color:var(--t3)} .amt span{font-size:30px;font-weight:700;color:var(--t3)} .flabel{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:18px 0 10px} .chips{display:flex;flex-wrap:wrap;gap:8px} /* Элементы внутри шторки — БЕЗ backdrop-filter: они лежат на стекле шторки, вложенный blur стоит дорого и почти не виден. */ .chip{display:flex;align-items:center;gap:7px;border:1px solid var(--glass-line); background:var(--glass-soft);border-radius:16px;padding:11px 15px;font-size:14px;font-weight:700; color:var(--ink);cursor:pointer;font-family:inherit;transition:transform .12s,background .18s; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(38,48,110,.07)} .chip svg{stroke:var(--t2)} .chip:active{transform:scale(.96)} .chip.on{background:var(--acc-grad);color:#fff;border-color:transparent; box-shadow:0 6px 16px color-mix(in srgb,var(--acc-deep) 42%,transparent), inset 0 1px 0 rgba(255,255,255,.3)} .chip.on svg{stroke:#fff} /* пикеры оформления платежа */ .sw{display:block;width:18px;height:18px;border-radius:50%; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.2)} .pick{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer} .pick .pv{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)} .pick .pv svg{stroke:var(--pvc,var(--chip-ink))} .autopick{width:100%;justify-content:center;margin-top:16px} .grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px} .cell{aspect-ratio:1;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass-soft); display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(38,48,110,.07); transition:transform .12s} .cell:active{transform:scale(.94)} .cell svg{stroke:var(--t2)} .cell.on{outline:2.5px solid var(--acc);outline-offset:2px} .cell.on svg{stroke:var(--acc)} .cell .cw{width:26px;height:26px;border-radius:50%;display:block; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.22)} #overlay2{z-index:14} .sheet.sub{z-index:15} /* Поля ввода утоплены — вогнутая поверхность против выпуклых плашек */ .in{width:100%;border:1px solid var(--glass-line);background:var(--glass-soft);border-radius:16px; padding:15px 16px;font-size:15px;font-weight:600;font-family:inherit;color:var(--ink);outline:none; box-shadow:inset 0 2px 4px rgba(38,48,110,.10), inset 0 -1px 0 rgba(255,255,255,.5)} :root[data-theme="dark"] .in{box-shadow:inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.06)} .in:focus{border-color:color-mix(in srgb,var(--acc) 55%,transparent); box-shadow:inset 0 2px 4px rgba(38,48,110,.08), 0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)} input[type="date"].in{-webkit-appearance:none;appearance:none;display:block;min-height:50px; font-variant-numeric:tabular-nums;color-scheme:light dark} input[type="date"].in::-webkit-date-and-time-value{text-align:left} .in::placeholder{color:var(--t3);font-weight:600} .in.pick{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(38,48,110,.07)} .save{width:100%;margin-top:26px;background:var(--acc-grad);color:#fff; border:1px solid color-mix(in srgb,#fff 22%,transparent);border-radius:18px; padding:17px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit; box-shadow:0 2px 4px color-mix(in srgb,var(--acc-deep) 30%,transparent), 0 10px 24px color-mix(in srgb,var(--acc-deep) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.16); transition:transform .14s,box-shadow .14s} .save:active{transform:translateY(2px); box-shadow:0 1px 3px color-mix(in srgb,var(--acc-deep) 32%,transparent), inset 0 1px 0 rgba(255,255,255,.28)} .rowset{display:flex;gap:10px} .rowset > div{flex:1} .back{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800;color:var(--acc); background:none;border:0;cursor:pointer;font-family:inherit;padding:10px 0 14px} .item.link{cursor:pointer} .val{font-size:13.5px;font-weight:700;color:var(--t2)} .scen{border-radius:24px;padding:18px;margin-top:12px} .scen > *{position:relative;z-index:1} .scen.on{border-color:color-mix(in srgb,var(--acc) 60%,transparent); box-shadow:var(--elev), var(--bevel), 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)} .scen .h{display:flex;justify-content:space-between;align-items:center} .scen .name{font-size:16px;font-weight:800} .scen .tag{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc); background:var(--chip);border-radius:10px;padding:5px 9px} .scen .tag.edit{background:transparent;border:1.5px solid var(--glass-line);color:var(--t2); font-family:inherit;cursor:pointer} .scen .rows{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--t2);display:flex;flex-direction:column;gap:7px} .scen .rows div{display:flex;justify-content:space-between} .scen .rows b{color:var(--ink);font-weight:800} .bd .r{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:13.5px;font-weight:600} .bd .r .n{width:90px;flex:none;color:var(--t2)} .bd .r .track{flex:1;height:9px;border-radius:5px;background:var(--panel); box-shadow:inset 0 1px 3px rgba(38,48,110,.14)} .bd .r .track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc2),var(--acc))} .bd .r .v{width:72px;text-align:right;font-weight:800;font-size:15px;letter-spacing:-.01em} /* ---------- тональные скоупы разделов ---------- */ #scr-expenses, #sheet-expense, #sheet-payment{ --acc:var(--acc-exp); --acc2:var(--acc2-exp); --acc-deep:var(--deep-exp); --chip:var(--tint-exp); --chip-ink:var(--ink-exp); --acc-grad:var(--grad-exp); } #scr-income, #sheet-income{ --acc:var(--acc-inc); --acc2:var(--acc2-inc); --acc-deep:var(--deep-inc); --chip:var(--tint-inc); --chip-ink:var(--ink-inc); --acc-grad:var(--grad-inc); } #scr-savings, #sheet-goal{ --acc:var(--acc-sav); --acc2:var(--acc2-sav); --acc-deep:var(--deep-sav); --chip:var(--tint-sav); --chip-ink:var(--ink-sav); --acc-grad:var(--grad-sav); } #scr-history, #scr-month{ --acc:var(--acc-his); --acc2:var(--acc2-his); --acc-deep:var(--deep-his); --chip:var(--tint-his); --chip-ink:var(--ink-his); --acc-grad:var(--grad-his); } .phone[data-sec="expenses"] .fab{background:var(--grad-exp)} .phone[data-sec="income"] .fab{background:var(--grad-inc)} .phone[data-sec="savings"] .fab{background:var(--grad-sav)} .phone[data-sec="expenses"]{--acc:var(--acc-exp);--acc2:var(--acc2-exp);--acc-deep:var(--deep-exp);--acc-grad:var(--grad-exp)} .phone[data-sec="income"]{--acc:var(--acc-inc);--acc2:var(--acc2-inc);--acc-deep:var(--deep-inc);--acc-grad:var(--grad-inc)} .phone[data-sec="savings"]{--acc:var(--acc-sav);--acc2:var(--acc2-sav);--acc-deep:var(--deep-sav);--acc-grad:var(--grad-sav)} .phone[data-sec="history"]{--acc:var(--acc-his);--acc2:var(--acc2-his);--acc-deep:var(--deep-his);--acc-grad:var(--grad-his)} .tripod .tri:nth-child(1) .meter i{background:var(--acc-inc)} .tripod .tri:nth-child(2) .meter i{background:var(--acc-exp)} .tripod .tri:nth-child(3) .meter i{background:var(--acc-sav)} .tripod .tri:nth-child(1) .v{color:var(--acc-inc)} .tripod .tri:nth-child(2) .v{color:var(--acc-exp)} .tripod .tri:nth-child(3) .v{color:var(--acc-sav)} /* ================= прочее ================= */ .money-big small{font-size:.55em;font-weight:500;font-family:"Manrope",sans-serif;opacity:.55;margin-left:3px} .hidden{display:none!important} .empty{padding:26px 18px;text-align:center;color:var(--t3);font-size:13.5px;font-weight:600; position:relative;z-index:1} .item.link, .mrow{cursor:pointer} .item{cursor:pointer} .danger{width:100%;margin-top:10px;background:transparent;color:#E5484D;border:0;border-radius:16px; padding:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit} .toast{position:absolute;left:50%;transform:translateX(-50%) translateY(20px); bottom:calc(150px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--ink) 88%,transparent);color:var(--scene1); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); font-size:13.5px;font-weight:700;border-radius:14px;padding:11px 18px; box-shadow:0 10px 30px rgba(0,0,0,.28); opacity:0;pointer-events:none;transition:.3s;z-index:40;white-space:nowrap} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- логин ---------- */ /* Логин перекрывает приложение целиком, поэтому несёт собственную сцену */ .login{position:absolute;inset:0;z-index:50; background: radial-gradient(88% 52% at 12% 4%, color-mix(in srgb,var(--acc) 34%,transparent) 0%, transparent 100%), radial-gradient(76% 44% at 96% 62%, color-mix(in srgb,var(--acc-sav) 26%,transparent) 0%, transparent 100%), linear-gradient(168deg,var(--scene1) 0%,var(--scene3) 46%,var(--scene2) 100%); display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:0;overflow:hidden} .login::before{content:"FINANCE";position:absolute;bottom:-14px;left:-6px; font-family:"Montserrat",sans-serif;font-weight:800;font-size:112px;letter-spacing:-.045em; color:var(--ink);opacity:.05;pointer-events:none;white-space:nowrap;line-height:1} .login > *{position:relative;z-index:1} .login h1{background:linear-gradient(135deg,var(--acc2),var(--acc-deep)); -webkit-background-clip:text;background-clip:text;color:transparent} .login .logo{width:76px;height:76px;border-radius:24px;background:var(--acc-grad);display:flex;align-items:center; justify-content:center;color:#fff;font-size:34px;font-weight:800; border:1px solid color-mix(in srgb,#fff 26%,transparent); box-shadow:0 4px 10px color-mix(in srgb,var(--acc-deep) 34%,transparent), 0 18px 44px color-mix(in srgb,var(--acc-deep) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.4)} .login h1{font-size:24px;font-weight:800;margin-top:18px;letter-spacing:-.01em} .login p{font-size:13.5px;font-weight:600;color:var(--t2);margin-top:6px;text-align:center} .login .in{margin-top:22px;text-align:center;font-weight:700;max-width:280px} .login .save{max-width:280px;margin-top:14px} .login .alt{margin-top:14px;background:none;border:0;font-family:inherit;font-size:13.5px;font-weight:700; color:var(--t2);cursor:pointer} .login .err{color:#E5484D;font-size:13px;font-weight:700;margin-top:10px;min-height:18px} /* ---------- выбор месяца ---------- */ .mnav{display:flex;align-items:center;gap:10px} .mnav button{border:1px solid var(--glass-line);background:var(--chip);color:var(--chip-ink); width:34px;height:34px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center; font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} /* ---------- точка синка ---------- */ .sync{position:absolute;top:calc(10px + env(safe-area-inset-top));right:8px;width:8px;height:8px;border-radius:50%; background:var(--t3);opacity:.5;z-index:30;transition:.3s} .sync.ok{background:#31B472;box-shadow:0 0 8px rgba(49,180,114,.7)} .sync.err{background:#E5484D;box-shadow:0 0 8px rgba(229,72,77,.7)} .sync.off{background:var(--t3);box-shadow:none} /* ---------- мини-сегменты в настройках ---------- */ .mini-pills{display:flex;gap:6px;background:var(--panel);border-radius:14px;padding:4px; box-shadow:inset 0 1px 3px rgba(38,48,110,.12)} .mini-pills button{flex:1;border:0;border-radius:11px;background:transparent;font-family:inherit; font-size:13px;font-weight:700;color:var(--t2);padding:8px 10px;cursor:pointer} .mini-pills button.on{background:var(--glass-strong);color:var(--ink); box-shadow:0 2px 6px rgba(38,48,110,.14), inset 0 1px 0 rgba(255,255,255,.7)} @media (min-height:700px){ main{padding-bottom:150px} } /* ============================================================================= НАКЛОН УСТРОЙСТВА · слои расходятся относительно друг друга --gx/--gy ставит гироскоп (app.js, tilt()). Двигаем только transform: блобы — сильно (дальний план), блик стекла — слабо и в противоход, хром — чуть. Никаких box-shadow-анимаций: это перерисовка каждый кадр. ============================================================================= */ .phone{--gx:0px;--gy:0px} /* Блик стекла берёт запас сверху, иначе при сдвиге оголится верхняя грань */ .headcard::before,.card::before,.list::before,.goal::before,.scen::before,.imm::before{ top:-20px;height:116px; transform:translate3d(calc(var(--gx) * -.5), calc(var(--gy) * -.5), 0)} .dock,.fab{transform:translate3d(calc(var(--gx) * .28), calc(var(--gy) * .28), 0)} .fab:active{transform:translate3d(calc(var(--gx) * .28), calc(var(--gy) * .28), 0) translateY(2px) scale(.97)} /* Сцена и хром догоняют наклон плавно — иначе дрожь от шума акселерометра */ .dock,.fab,.headcard::before,.card::before,.list::before, .goal::before,.scen::before,.imm::before{transition:transform .18s linear} .phone.no-tilt .dock,.phone.no-tilt .fab{transition:transform .14s} /* ============================================================================= СВАЙП МЕЖДУ РАЗДЕЛАМИ · соседний экран реально едет следом за пальцем На время жеста соседний .screen переносится в .phone и позиционируется абсолютно — внутри main он ехал бы вместе с ним. ============================================================================= */ /* overflow тут не трогаем: смена overflow на прокрученном main сбрасывает scrollTop в ноль — экран прыгал бы к началу прямо во время жеста. Вертикальный скролл во время горизонтального гасится preventDefault. */ main.sliding{will-change:transform} .phone > .screen.peer{position:absolute;inset:0;z-index:4;display:block; padding:14px 18px 140px;overflow:hidden;will-change:transform; -webkit-overflow-scrolling:auto} main.snap,.phone > .screen.peer.snap{ transition:transform .3s cubic-bezier(.22,.72,.24,1)}