/* AVALIN SPACE — independent visual system. No remote assets or font requests. */ /* * Дизайн-токены AVALIN SPACE: цвета в двух палитрах. Раздел в начале app.css, а не отдельный файл: * app.css - единая визуальная система (docs/frontend.md), и его одного подключают тестовые страницы. * * Выпущено из app.css 10.09.2026: каждый цвет в CSS стал переменной. Устройство * взято из дизайн-системы Avalin CRM (doc/ДИЗАЙН-СИСТЕМА.md, ветка dev), значения * сиреневой палитры - тёмные значения tokens.css CRM, потому что AVALIN SPACE * только тёмный. * * Палитра переключается атрибутом на в public/index.html: * без атрибута - сиреневая (пробуется по решению владельца 10.09); * data-palette="navy" - исходная navy/ice/mint, побитно как до перевода. * Откат - одна строка. Компоненты и app.css палитру не знают. * * Имена: --ui-NNN нейтральные, --accent-NNN бренд, NNN - светлота OKLCH в * промилле (одинакова в обеих палитрах, меняется оттенок). --sem-* - смысловые * цвета (срочность, ошибки, «принято», папки): одинаковы в обеих палитрах. */ /* ── Сиреневая палитра (активна) ─────────────────────────── */ :root { /* Оттенок стекла на входе: три числа 0-1 для WebGL (liquid-glass.tsx). */ --glass-tint: 0.051 0.051 0.071; /* Цвет подсветок и волосков: белый в тёмной теме, чернильный в светлой. */ --ink: light-dark(#141428, #ffffff); /* Облик CRM: плотная заливка кнопок (белый текст 4.68:1), подложка выбранного, тихий текст и фон с цветными пятнами - тёмные значения tokens.css CRM. */ --brand-primary-strong: light-dark(#6f5bf5, #6f5bf5); --brand-primary-soft: light-dark(#eeeaff, #23203a); --brand-on-soft: light-dark(#5b46e0, #b3a6ff); --text-faint: light-dark(#6f6f80, #8f8fa0); /* Пятна ярче, чем в CRM: прозрачному стеклу нужно, что показывать сквозь себя. */ --bg-page-accent: radial-gradient(900px 620px at 10% -6%, light-dark(#a1a2fd, #3b2d8f) 0%, transparent 62%), radial-gradient(760px 540px at 98% 8%, light-dark(#8db0f8, #1f3a78) 0%, transparent 58%), radial-gradient(880px 600px at 60% 105%, light-dark(#bbbaff, #2d2266) 0%, transparent 60%); --accent-240: light-dark(#d5d3ff, #1f1544); --accent-247: #211943; --accent-260: light-dark(#d0cbff, #241b47); --accent-284: light-dark(#c7c3fa, #29224d); --accent-289: light-dark(#c6c2f8, #2a234e); --accent-294: #2d1c61; --accent-299: light-dark(#c2bdf8, #2d2554); --accent-299a: light-dark(#c3bdfa, #2d2454); --accent-300: light-dark(#c3bef7, #2d2553); --accent-313: light-dark(#beb9f5, #302858); --accent-321: light-dark(#bbb5fc, #322762); --accent-326: light-dark(#bab6ee, #332c5a); --accent-332: light-dark(#b9b4eb, #352e5b); --accent-332a: light-dark(#b8b2f2, #352c61); --accent-333: light-dark(#b8b3ef, #352d5f); --accent-336: light-dark(#b7b1f1, #362d62); --accent-339: light-dark(#b6b0f3, #372d65); --accent-341: light-dark(#b6b0f0, #372e63); --accent-347: light-dark(#b3acf7, #392d6d); --accent-347a: #392f67; --accent-349: light-dark(#b3afe4, #39335f); --accent-350: #3a3166; --accent-350a: light-dark(#b2aee5, #393360); --accent-361: #3d2c7b; --accent-365: light-dark(#aeaadf, #3d3764); --accent-383: light-dark(#a9a2e4, #423972); --accent-384: light-dark(#a8a3e1, #423a70); --accent-385: #433779; --accent-394: #45397c; --accent-394a: light-dark(#a69fdf, #453c74); --accent-395: light-dark(#a59fdd, #453d73); --accent-395a: #463783; --accent-399: #463f72; --accent-400: light-dark(#a39dde, #463e77); --accent-404: #474074; --accent-406: #483d7e; --accent-408: light-dark(#a19bdb, #484078); --accent-409: #493f7d; --accent-410: light-dark(#a099e1, #493f7f); --accent-421: light-dark(#9d97d7, #4c447d); --accent-422: light-dark(#9d98ce, #4c4676); --accent-429: light-dark(#9b94d8, #4e4582); --accent-431: #4e477e; --accent-432: light-dark(#9b93d5, #4f4681); --accent-439: light-dark(#9991d5, #514785); --accent-451: #544c87; --accent-456: light-dark(#928bd2, #554c8d); --accent-463: #574e8f; --accent-465: light-dark(#918ac8, #585089); --accent-465a: light-dark(#907ef2, #5941af); --accent-468: light-dark(#8f83df, #594aa0); --accent-476: light-dark(#8c86c7, #5a538f); --accent-477: light-dark(#8d86c6, #5b538f); --accent-477a: light-dark(#8d86c5, #5b538d); --accent-479: light-dark(#8b85c6, #5b5490); --accent-479a: light-dark(#8c87c0, #5b558a); --accent-481: light-dark(#8c86c1, #5c558c); --accent-490: light-dark(#8881c6, #5e5697); --accent-491: #5f588f; --accent-497: light-dark(#877ec9, #60569d); --accent-498: light-dark(#8780bb, #615a92); --accent-517: #6949d0; --accent-518: #666192; --accent-523: light-dark(#8168e9, #6a4ecd); --accent-526: light-dark(#8067e9, #6a4ece); --accent-533: #6a649e; --accent-535: #6b6696; --accent-554: light-dark(#7671a7, #706ba0); --accent-560: light-dark(#7568c1, #7265be); --accent-596: light-dark(#6c6599, #7d77ac); --accent-598: #7d78ad; --accent-603: light-dark(#696396, #7f7aae); --accent-616: light-dark(#6943d7, #8565fa); --accent-616a: #837eaf; --accent-621: #8569f6; --accent-641: #8a85bb; --accent-656: light-dark(#5a5586, #8f8abf); --accent-659: light-dark(#5a528f, #8f88ca); --accent-665: #927cfb; --accent-670: light-dark(#575182, #938ec4); --accent-718: light-dark(#4b4379, #a19bd8); --accent-720: #a29dd1; --accent-725: #a396fa; --accent-743: light-dark(#453487, #a89dfb); --accent-745: light-dark(#443d6c, #aaa5db); --accent-753: light-dark(#413b69, #aca8dd); --accent-787: light-dark(#393261, #b7b2ea); --accent-796: light-dark(#3a2e6d, #b9b2fd); --accent-800: #bab3fb; --accent-800a: light-dark(#3a2e6d, #bab3fd); --accent-821: light-dark(#393068, #c1bbfe); --accent-823: light-dark(#393068, #c2bcff); --accent-832: light-dark(#393264, #c5c0fd); --accent-840: light-dark(#393262, #c7c3fe); --accent-845: light-dark(#393262, #c9c4ff); --accent-851: #cbc7ff; --accent-863: #cfcbff; --accent-864: light-dark(#39345c, #d0ccfe); --accent-870: light-dark(#3a345a, #d2cefd); --accent-877: light-dark(#393559, #d4d1fe); --accent-877a: light-dark(#393558, #d4d1fd); --accent-879: light-dark(#3a3559, #d5d1ff); --accent-886: light-dark(#393557, #d7d4fe); --accent-897: light-dark(#393655, #dbd8ff); --accent-904: light-dark(#393751, #dddbfd); --accent-908: #dfddfd; --accent-912: light-dark(#39374f, #e0defd); --accent-965: light-dark(#3a3943, #f3f2ff); --accent-967: light-dark(#3a3943, #f3f3ff); --bg-page: light-dark(#f4f4f7, #0f0f14); --black: #000000; --brand-primary: light-dark(#8876ff, #a293ff); --brand-secondary: light-dark(#5b46e0, #b3a6ff); --on-accent: light-dark(#16122e, #1f1e28); --surface: light-dark(#ffffff, #17171f); --surface-raised: light-dark(#ffffff, #1f1f28); --text: light-dark(#111111, #f2f2f7); --text-muted: light-dark(#5a5a68, #a8a8b8); --ui-126: light-dark(#fcfcff, #06060c); --ui-127: light-dark(#fcfcff, #07060c); --ui-133: light-dark(#faf9ff, #08070d); --ui-166: light-dark(#efeff5, #0e0e14); --ui-169: light-dark(#efeef5, #0f0e15); --ui-172: light-dark(#ededf3, #100f16); --ui-172a: #0f0f16; --ui-174: light-dark(#edecf4, #100f17); --ui-174a: light-dark(#ededf3, #100f16); --ui-176: light-dark(#ececf1, #101016); --ui-177: light-dark(#ececf1, #101016); --ui-179: light-dark(#ecebf2, #111018); --ui-180: light-dark(#eaeaf0, #111117); --ui-185: light-dark(#e9e9ef, #121219); --ui-196: light-dark(#e6e5ec, #15141c); --ui-197: light-dark(#e5e5ea, #15151b); --ui-200: light-dark(#e4e4eb, #16151d); --ui-206: light-dark(#e2e2e7, #17171d); --ui-209: light-dark(#e1e1e8, #181720); --ui-210: light-dark(#e2e1e7, #18171e); --ui-215: light-dark(#dfe0e3, #19191d); --ui-217: light-dark(#dedfe6, #191921); --ui-217a: light-dark(#dfdfe5, #191920); --ui-221: light-dark(#dddde4, #1a1a22); --ui-223: light-dark(#dddde4, #1b1a22); --ui-223a: light-dark(#dddce4, #1b1a23); --ui-226: light-dark(#dcdbe3, #1c1b24); --ui-228: light-dark(#dcdbe3, #1c1b24); --ui-234: light-dark(#dadade, #1d1d22); --ui-247: light-dark(#d5d5dc, #202028); --ui-250: light-dark(#d5d4dc, #21202a); --ui-251: light-dark(#d4d4d5, #222223); --ui-252: light-dark(#d4d3da, #22212a); --ui-258: light-dark(#d2d1da, #23222c); --ui-260: light-dark(#d1d1d8, #23232c); --ui-265: light-dark(#cfcfd7, #25242e); --ui-266: light-dark(#cfcfd7, #25242e); --ui-271: light-dark(#cecdd6, #262530); --ui-281: light-dark(#cacad2, #292832); --ui-305: light-dark(#c3c3ca, #2e2e38); --ui-308: light-dark(#c2c2c8, #2f2f37); --ui-380: light-dark(#acacb4, #41414c); --ui-401: light-dark(#a6a6ad, #474651); --ui-426: light-dark(#9e9ea5, #4e4d58); --ui-431: light-dark(#9c9ca3, #4f4f5a); --ui-595: light-dark(#6d6d74, #7e7d89); --ui-626: #878693; --ui-643: #8c8c98; --ui-655: light-dark(#5d5c63, #908f9b); --ui-665: light-dark(#5a5960, #93929d); --ui-675: #9695a1; --ui-680: light-dark(#56555b, #9897a1); --ui-688: light-dark(#545359, #9a99a4); --ui-692: light-dark(#525257, #9b9ba5); --ui-697: #9d9ca8; --ui-700: light-dark(#505056, #9d9da8); --ui-729: light-dark(#49484e, #a7a6b1); --ui-753: light-dark(#424247, #aeaeb7); --ui-757: light-dark(#414147, #afafba); --ui-759: light-dark(#414147, #b0afbb); --ui-771: #b4b3be; --ui-781: light-dark(#3b3b41, #b7b6c2); --ui-782: light-dark(#3b3b40, #b7b7c1); --ui-786: light-dark(#3a3a40, #b8b8c5); --ui-791: light-dark(#39383f, #bab9c7); --ui-792: light-dark(#38383e, #babac7); --ui-793: light-dark(#38383d, #bbbac5); --ui-796: light-dark(#37373d, #bbbbc8); --ui-797: #bcbbc7; --ui-798: light-dark(#37373c, #bcbcc6); --ui-803: light-dark(#36353b, #bebdc9); --ui-810: light-dark(#34343a, #c0bfcd); --ui-814: #c1c1cc; --ui-824: light-dark(#303036, #c5c4d0); --ui-824a: light-dark(#303036, #c4c4cf); --ui-831: light-dark(#2f2e34, #c7c6d2); --ui-837: light-dark(#2e2d32, #c9c8d3); --ui-840: light-dark(#2d2c31, #cac9d3); --ui-844: light-dark(#2c2c31, #cbcad5); --ui-850: light-dark(#2b2a2f, #cdccd7); --ui-851: light-dark(#2a2a2e, #cdcdd7); --ui-853: light-dark(#29292d, #ceced6); --ui-853a: light-dark(#2a292e, #cecdd8); --ui-857: light-dark(#28282c, #cfcfd8); --ui-859: light-dark(#28282e, #d0cfdd); --ui-873: light-dark(#252528, #d5d4db); --ui-873a: #d4d4de; --ui-884: #d8d8e0; --ui-888: #d9d9e2; --ui-889: #dad9e1; --ui-894: #dbdbe2; --ui-895: light-dark(#201f24, #dcdbe5); --ui-896: light-dark(#1f1f23, #dcdce4); --ui-898: #dddce3; --ui-909: light-dark(#1c1c20, #e0e0ea); --ui-912: light-dark(#1c1c1f, #e1e1e9); --ui-914: light-dark(#1c1b1f, #e2e1eb); --ui-915: light-dark(#1b1b1e, #e2e2ea); --ui-917: #e3e3e9; --ui-918: light-dark(#1a1a1d, #e3e3ea); --ui-919: #e4e3e9; --ui-921: light-dark(#1a1a1f, #e4e3f0); --ui-921a: light-dark(#19191e, #e4e4ef); --ui-922: #e5e4ea; --ui-924: light-dark(#19191c, #e5e5ec); --ui-925: #e6e5ea; --ui-930: light-dark(#18181a, #e7e7ed); --ui-930a: light-dark(#18181b, #e7e7ee); --ui-932: light-dark(#171719, #e8e8ed); --ui-932a: light-dark(#17171a, #e8e8ef); --ui-933: #e8e8ef; --ui-939: #eaeaf2; --ui-944: light-dark(#151517, #ececf1); --ui-944a: light-dark(#151419, #ecebf8); --ui-945: #ececf1; --ui-946: light-dark(#151517, #ececf2); --ui-947: #ededf2; --ui-949: light-dark(#141317, #eeedf5); --ui-951: #eeeef2; --ui-952: #efeef4; --ui-959: #f1f1f4; --ui-961: #f2f2f5; --ui-964: #f3f3f6; --ui-965: #f3f3f6; --ui-967: #f4f4f7; --ui-969: light-dark(#101011, #f4f4f8); --ui-972: light-dark(#0f0f11, #f5f5fb); --ui-975: light-dark(#0e0e10, #f6f6f9); --ui-975a: light-dark(#0e0e11, #f6f6ff); --ui-977: #f7f7f9; --ui-978: light-dark(#0e0e0f, #f7f7fb); --ui-979: light-dark(#0d0d10, #f8f7ff); --ui-979a: light-dark(#0d0d10, #f7f7ff); --ui-981: light-dark(#0d0d0f, #f8f8fc); --ui-981a: #f8f8fd; --ui-984: #fafafb; --ui-987: #fbfafc; --white: #ffffff; } /* ── Исходная navy/ice/mint (откат) ──────────────────────── */ :root[data-palette='navy'] { color-scheme: dark; --glass-tint: 0.031 0.055 0.086; --ink: #ffffff; /* Аналоги значений облика CRM для отката: белый на заливке кнопки 5.8:1. */ --brand-primary-strong: #2b6a94; --brand-primary-soft: #132636; --brand-on-soft: #9fd0f0; --text-faint: #8e9cad; --bg-page-accent: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent-347) 15.6863%, transparent), transparent 55%); --accent-240: #112032; --accent-247: #102331; --accent-260: #172536; --accent-284: #192c3b; --accent-289: #1b2d3c; --accent-294: #102f46; --accent-299: #1b3040; --accent-299a: #1a3040; --accent-300: #1c3040; --accent-313: #203344; --accent-321: #123b33; --accent-326: #223746; --accent-332: #263848; --accent-332a: #20394a; --accent-333: #1c3b45; --accent-336: #203a4b; --accent-339: #203b4d; --accent-341: #203c4b; --accent-347: #233c53; --accent-347a: #253c50; --accent-349: #263e4a; --accent-350: #273d50; --accent-350a: #293d4c; --accent-361: #20405c; --accent-365: #28453f; --accent-383: #244b47; --accent-384: #2d4758; --accent-385: #29475d; --accent-394: #2d4960; --accent-394a: #31495c; --accent-395: #294e4b; --accent-395a: #244b62; --accent-399: #354a5c; --accent-400: #314b5e; --accent-404: #344c5d; --accent-406: #324c63; --accent-408: #344d60; --accent-409: #334d63; --accent-410: #304e63; --accent-421: #395065; --accent-422: #3c5061; --accent-429: #375367; --accent-431: #3b5366; --accent-432: #385467; --accent-439: #39566a; --accent-451: #3f596d; --accent-456: #3c5b70; --accent-463: #3e5d72; --accent-465: #435d70; --accent-465a: #236080; --accent-468: #2c6275; --accent-476: #456074; --accent-477: #466075; --accent-477a: #476074; --accent-479: #466175; --accent-479a: #486172; --accent-481: #496174; --accent-490: #456579; --accent-491: light-dark(#768fa3, #4c6477); --accent-497: #45677d; --accent-498: #4d6679; --accent-517: #286f98; --accent-518: light-dark(#6f8797, #556c7b); --accent-523: #237393; --accent-526: #287396; --accent-533: #577084; --accent-535: #5c7081; --accent-554: #64748a; --accent-560: #437f8a; --accent-596: #718096; --accent-598: #6c8395; --accent-603: #6f8497; --accent-616: #4b8bbe; --accent-616a: #738899; --accent-621: #4e8dbc; --accent-641: #7890a2; --accent-656: #8193a8; --accent-659: #7996ac; --accent-665: #5e9aca; --accent-670: #8398ac; --accent-718: #8ba9bb; --accent-720: #91a8b9; --accent-725: #74aed3; --accent-743: #8aafdb; --accent-745: #98b0c2; --accent-753: #9ab3c4; --accent-787: #a3becf; --accent-796: #83cdbf; --accent-800: #81cfc1; --accent-800a: #a1c2df; --accent-821: #89d6c6; --accent-823: #9dcced; --accent-832: #93d8c8; --accent-840: #8bddcc; --accent-845: #8ae1be; --accent-851: #b4d3e8; --accent-863: #a2dfe2; --accent-864: #b4d9eb; --accent-870: #bed9e9; --accent-877: #bcdde9; --accent-877a: #bcdced; --accent-879: #bfdde8; --accent-886: #c4deee; --accent-897: #c2e6e0; --accent-904: #bfe8ef; --accent-908: #bdece5; --accent-912: #a4f3ee; --accent-965: #d2fff3; --accent-967: #d4fff5; --bg-page: #080d14; --black: #000000; --brand-primary: #93c6ea; --brand-secondary: #9be2da; --on-accent: #10212e; --surface: #101823; --surface-raised: #15212e; --text: #edf2f8; --text-muted: #a4afbd; --ui-126: #020710; --ui-127: #020711; --ui-133: #030812; --ui-166: #080f18; --ui-169: #071019; --ui-172: #06111b; --ui-172a: #05111b; --ui-174: #07111c; --ui-174a: #08111b; --ui-176: #0a111b; --ui-177: #0b111b; --ui-179: #08121e; --ui-180: #08131b; --ui-185: #0b131e; --ui-196: #0a1622; --ui-197: #0e1620; --ui-200: #0c1722; --ui-206: #101822; --ui-209: #0d1926; --ui-210: #101923; --ui-215: #151a20; --ui-217: #101b26; --ui-217a: #101b25; --ui-221: #101c27; --ui-223: #121c28; --ui-223a: #111c29; --ui-226: #111d2a; --ui-228: #101e2a; --ui-234: #191e26; --ui-247: #16222e; --ui-250: #152330; --ui-251: #22221f; --ui-252: #172331; --ui-258: #172532; --ui-260: #162631; --ui-265: #162735; --ui-266: #182734; --ui-271: #162936; --ui-281: #1b2b38; --ui-305: #20313f; --ui-308: #3b2c24; --ui-380: #344454; --ui-401: #394a59; --ui-426: #40515f; --ui-431: #425262; --ui-595: #6d8291; --ui-626: #768b9b; --ui-643: #7c90a0; --ui-655: #8492a4; --ui-665: #8895a6; --ui-675: #8799aa; --ui-680: #8a9ba8; --ui-688: #8f9cad; --ui-692: #8f9ead; --ui-697: #8ca1af; --ui-700: #91a0b1; --ui-729: #9ba9ba; --ui-753: #a3b1bd; --ui-757: #a1b3c1; --ui-759: #a3b3c3; --ui-771: #a6b7c5; --ui-781: #a6bbc9; --ui-782: #abbac8; --ui-786: #a6bdcc; --ui-791: #a7bfce; --ui-792: #a8bfce; --ui-793: #adbecc; --ui-796: #a9c0d0; --ui-797: #abc0cf; --ui-798: #b1bfcd; --ui-803: #b0c1d2; --ui-810: #adc5d4; --ui-814: #b2c5d4; --ui-824: #b4c9d7; --ui-824a: #b6c8d7; --ui-831: #b7cbd9; --ui-837: #bbccda; --ui-840: #c0ccda; --ui-844: #bccfdc; --ui-850: #c0d0df; --ui-851: #c2d0de; --ui-853: #c5d0dd; --ui-853a: #c1d1df; --ui-857: #c4d2df; --ui-859: #bcd5e5; --ui-873: #ccd7df; --ui-873a: #c7d8e4; --ui-884: #cddbe5; --ui-888: #ccdde8; --ui-889: #d1dce6; --ui-894: #d2dee7; --ui-895: #cfdfeb; --ui-896: #d1dfe9; --ui-898: light-dark(#1b2024, #d4dfe7); --ui-909: #d0e5ef; --ui-912: #d9e3ef; --ui-914: #d3e6f0; --ui-915: #d8e5ef; --ui-917: #dce5ed; --ui-918: #d9e6ef; --ui-919: #dce6ec; --ui-921: #d2e9f6; --ui-921a: #d3e9f5; --ui-922: #dce7ee; --ui-924: #dce8f0; --ui-925: #e0e7ee; --ui-930: #e1e9f1; --ui-930a: #e0e9f3; --ui-932: #e0eaf1; --ui-932a: #deebf2; --ui-933: light-dark(#13181b, #dfebf2); --ui-939: #dfedf7; --ui-944: #e4eef5; --ui-944a: #d8f1ff; --ui-945: #e6eef4; --ui-946: #e6eef7; --ui-947: #e6eff6; --ui-949: #e2f1f9; --ui-951: #e8f0f5; --ui-952: #e6f1f8; --ui-959: #edf2f6; --ui-961: #edf3f7; --ui-964: #eef4f8; --ui-965: #eff4f8; --ui-967: #f0f5f8; --ui-969: #eff6fb; --ui-972: #edf8fd; --ui-975: #f4f7fb; --ui-975a: #e0fff5; --ui-977: light-dark(#0d0e0f, #f5f8fa); --ui-978: #f4f8ff; --ui-979: #e4fffb; --ui-979a: #e4fff8; --ui-981: #f2faff; --ui-981a: #f0fbff; --ui-984: #f8fafc; --ui-987: #f9fbfc; --white: #ffffff; } /* ── Смысловые цвета: одинаковы в обеих палитрах ─────────── */ :root { --sem-amber-323: light-dark(#d8cfb7, #3a331f); --sem-amber-777: light-dark(#755a22, #d0b27a); --sem-amber-790: light-dark(#675a3f, #c7b99b); --sem-amber-816: light-dark(#6f4f02, #e6bc6d); --sem-amber-863: light-dark(#5f460f, #ebce98); --sem-amber-872: light-dark(#5a4705, #f1d27b); --sem-amber-877: light-dark(#5c4300, #f0d398); --sem-amber-879: light-dark(#594501, #f4d47c); --sem-amber-880: light-dark(#5e4101, #f5d29a); --sem-green-302: light-dark(#beddd6, #19342f); --sem-green-315: light-dark(#b7dbd4, #183833); --sem-green-376: #124c40; --sem-green-393: #284e47; --sem-green-568: light-dark(#47a38b, #278972); --sem-green-630: #3d9c87; --sem-green-695: #65ad9b; --sem-green-784: #82c9b7; --sem-green-807: light-dark(#136656, #79d4bd); --sem-green-831: light-dark(#245f48, #9bd7bc); --sem-green-853: #a4ddcb; --sem-green-859: light-dark(#075a46, #9be2c9); --sem-orange-364: #5c3028; --sem-orange-699: #d98662; --sem-orange-769: #e5a093; --sem-orange-810: light-dark(#804337, #f3ad9e); --sem-orange-832: #f3b8a8; --sem-orange-842: light-dark(#76400c, #ffba86); --sem-red-297: light-dark(#eaced6, #3b262d); --sem-red-385: #543d3b; --sem-red-605: light-dark(#ce6258, #c75c53); --sem-red-664: #ce786c; --sem-red-678: #cb8176; --sem-red-721: light-dark(#ae4538, #f08070); --sem-red-799: light-dark(#854243, #f3a6a5); --sem-red-824: light-dark(#813b3b, #ffaca9); --sem-red-867: light-dark(#6c3a34, #ffc2b9); --sem-violet-819: light-dark(#62457f, #d3b4f6); } /* ── Смысловые имена поверх палитры (как в CRM) ──────────── */ :root { --blue: var(--brand-primary); --mint: var(--brand-secondary); --muted: var(--text-muted); --accent: linear-gradient(115deg, var(--brand-primary), var(--brand-secondary)); --border: color-mix(in srgb, var(--ink) 7.8431%, transparent); --edge-light: color-mix(in srgb, var(--ink) 10.9804%, transparent); --gantt-grid-week: var(--ui-945); --gantt-grid-day: var(--ui-917); /* Выходные на шапке «бумаги» Ганта: бумага светлая в обеих темах. */ --gantt-weekend: #e8e8ed; /* Состояния, как в CRM: наведение, нажатие, выбор и фокус описаны токенами, а не подобранным на глаз rgba, и меняются вместе с палитрой. */ --state-hover: color-mix(in srgb, var(--ink) 7%, transparent); --state-active: color-mix(in srgb, var(--ink) 12%, transparent); --state-selected: var(--brand-primary-soft); --state-selected-text: var(--brand-on-soft); --focus-ring: 2px solid var(--brand-primary); /* * Облик CRM (решение владельца 10.09: перенести облик целиком). Шкалы взяты из * tokens.css Avalin CRM, поверхности и тени - её тёмная тема, выраженная через * палитру, чтобы откат на navy оставался цельным. * Вложенный блок скруглён на одну ступень меньше родителя. */ /* Две ступени ниже шкалы CRM (13.09): у CRM нет таких мелочей, у AVALIN есть - полосы и метки графика, бейджи, дорожки прогресса. 2-5px сведены к 4, 6-10px к 8. */ --radius-2xs: 4px; --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; --radius: var(--radius-xl); --radius-control: var(--radius-md); --surface-glass: color-mix(in srgb, var(--surface-raised) 50%, transparent); /* Прозрачное стекло (владелец 11.09: «матовое, а не прозрачное»): плотность 56% вместо 86% у CRM, лёгкое размытие, блик по диагонали и светлая кромка сверху. Сквозь карточку видны пятна фона, текст держит контраст за счёт тёмной основы. */ --surface-glass-strong: color-mix(in srgb, var(--surface) 56%, transparent); /* Блик 7%, а не 10: вложенные стеклянные блоки складывают блики, и при 10% приглушённый текст опускался до 4.0:1 (accessibility-smoke, порог 4.5). */ --glass-sheen: linear-gradient(150deg, color-mix(in srgb, var(--white) 7%, transparent) 0%, color-mix(in srgb, var(--white) 2%, transparent) 30%, transparent 55%); --glass-edge: inset 0 1px 0 color-mix(in srgb, var(--white) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--white) 5%, transparent); --glass-border: color-mix(in srgb, var(--ink) 12%, transparent); --surface-sunken: color-mix(in srgb, var(--ink) 5%, transparent); --border-hairline: color-mix(in srgb, var(--ink) 10%, transparent); --border-glass: color-mix(in srgb, var(--ink) 8%, transparent); --shadow-color: light-dark(rgba(20, 20, 40, 0.08), color-mix(in srgb, var(--black) 50%, transparent)); --shadow-color-strong: light-dark(rgba(20, 20, 40, 0.14), color-mix(in srgb, var(--black) 62%, transparent)); --shadow-card: 0 12px 32px var(--shadow-color); --shadow-lifted: 0 20px 48px var(--shadow-color-strong); --glass-blur: blur(24px) saturate(1.8); --glass-blur-soft: blur(12px) saturate(1.6); --glass-blur-light: blur(6px) saturate(1.2); --text-on-accent: var(--white); /* Приглушённый текст на главной на 10-15% контрастнее (владелец 11.09); перенесён сюда из правила 13.09. */ --text-muted-contrast: light-dark(#474753, #c0c0ce); /* Состояния «готово» и «отказ», как в CRM (тёмная тема): светлые - для текста и оттенка плиток, плотные - для заливки под белым текстом (5.1-5.6:1). */ --status-confirmed: light-dark(#1f7d52, #4fc48d); --status-confirmed-strong: #1f7d52; --status-declined: light-dark(#b04434, #f08573); --status-declined-strong: #b04434; /* Сроки документов - цвета палитры этапов YouGile (docs/qa/yougile-stage-palette/palette.json): жёлтый «Создание проекта» - срок идёт или ждёт принятия, красный «Доп. Функционал» - задержка, зелёный «Финализация» - принято, серый «Баги/Правки» - срок не определён. */ --deadline-yellow: #F5C24D; --deadline-red: #D92300; --deadline-green: #79CE6A; --deadline-grey: #98A2B3; --font-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --text-hero: clamp(28px, 4.5vw, 46px); --text-h1: clamp(24px, 3.2vw, 32px); --text-h2: clamp(19px, 2.2vw, 24px); --text-sm: 14px; --text-xs: 13px; --duration-fast: 140ms; --duration-normal: 260ms; --ease-out-expo: cubic-bezier(.16, 1, .3, 1); } /* ── Темы, как в CRM ────────────────────────────────────────── * Без атрибута решает система (color-scheme: light dark), data-theme на * ставит выбор человека (frontend/theme.ts). Откат палитры на navy - исходный * дизайн, только тёмный. Экран входа со сценой Земли тёмный всегда. */ :root[data-theme='light']:not([data-palette='navy']) { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } .login { color-scheme: dark; } /* Цвет текста вычисляется здесь, в тёмной схеме: иначе заголовок наследует тёмный #111 от body. */ .login { color: var(--text); } /* ── Базовый слой ─────────────────────────────────────────── */ :root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size: 16px; font-synthesis: none; /* Цвета, радиусы и палитры - в tokens.css. */ color: var(--text); background: var(--bg-page); } * { box-sizing: border-box; } html { scrollbar-gutter: stable; scroll-padding-top: 28px; } body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent-347) 15.6863%, transparent), transparent 55%), var(--bg-page); } [hidden] { display: none !important; } ::selection { color: var(--bg-page); background: var(--mint); } button, input, select, textarea { font: inherit; } /* Explicit native cursors; preserve task-specific grab/resize states below. */ html, body { cursor:default; } a[href], label[for], select { cursor:pointer; } input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, [contenteditable=true] { cursor:text; } input[type=checkbox], input[type=radio], input[type=range], input[type=file] { cursor:pointer; } button, a, input, select, textarea, summary { touch-action: manipulation; } button { appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid var(--accent-481); border-radius:var(--radius-control); color:var(--ui-918); background:var(--accent-300); line-height:1.35; font-size:.82rem; cursor:pointer; } button:disabled { opacity: .5; cursor: default; } a { color: var(--mint); text-underline-offset: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; } h1, h2, h3, h4, p, strong, .tag, legend { overflow-wrap: anywhere; } h1 { font-size: clamp(2.2rem, 3.5vw, 3.4rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.08; margin: 0 0 18px; } h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; margin: 0 0 16px; } h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; } h4 { font-size: .95rem; line-height: 1.45; } p { line-height: 1.65; margin: 0 0 14px; } small { line-height: 1.55; } .muted { color: var(--muted); } .eyebrow { color: var(--mint); font-size: .69rem; letter-spacing: .18em; font-weight: 600; text-transform: uppercase; margin-bottom: 16px; line-height: 1.5; } .skip { position: fixed; top: -100px; left: 20px; z-index: 20; padding: 12px 20px; border-radius: var(--radius-xs); background: var(--surface-raised); } .skip:focus { top: 12px; } .shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 36px 20px 24px; background: color-mix(in srgb, var(--ui-177) 85.098%, transparent); border-right: 1px solid var(--border); } .wordmark { font-size: 1.45rem; letter-spacing: .13em; font-weight: 750; line-height: 1; color: var(--ui-975); } .wordmark span { display: block; margin-top: 9px; font-size: .6rem; letter-spacing: .56em; font-weight: 500; color: var(--mint); } .sidebar .wordmark { padding: 0 12px; } .sidebar nav { display: grid; gap: 6px; margin-top: 42px; } .sidebar-caption { display: block; color: var(--ui-665); text-transform: uppercase; letter-spacing: .14em; font-size: .61rem; padding: 0 14px 12px; } .nav-current { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 14px; color: var(--ui-969); background: linear-gradient(100deg, color-mix(in srgb, var(--brand-primary) 10.5882%, transparent), color-mix(in srgb, var(--brand-secondary) 3.1373%, transparent)); border: 1px solid color-mix(in srgb, var(--brand-primary) 12.549%, transparent); border-radius: var(--radius-xs); text-decoration: none; font-size: .84rem; } .nav-current svg, .nav-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mint); } .sidebar-footer { margin-top: auto; } .sidebar-footer > .sidebar-caption { padding: 0 0 12px; font-size: .55rem; letter-spacing: .08em; white-space: nowrap; } .identity { margin-top: auto; padding: 24px 10px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .78rem; } .identity strong { display: block; color: var(--ui-946); font-size: .8rem; font-weight: 500; margin-bottom: 12px; overflow-wrap: anywhere; } .identity-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--mint); border: 1px solid color-mix(in srgb, var(--brand-secondary) 21.9608%, transparent); background: color-mix(in srgb, var(--brand-secondary) 4.3137%, transparent); } .content { width: 100%; max-width: 1590px; min-width: 0; padding: 28px clamp(24px, 3.5vw, 58px) 64px; margin: 0 auto; } .workspace-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border); font-size: .73rem; color: var(--muted); } .workspace-label { letter-spacing: .04em; } .workspace-indicator { display: inline-flex; align-items: center; gap: 8px; } .workspace-indicator::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px color-mix(in srgb, var(--brand-secondary) 26.6667%, transparent); } .header { margin-bottom: 30px; } .header .muted { max-width: 680px; font-size: .94rem; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0; } .panel { min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(125deg, var(--ui-223), var(--ui-197)); box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 1.1765%, transparent); } .stack { display: grid; min-width: 0; gap: 22px; } .columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: 22px; align-items: start; } .columns > *, .members li > div { min-width: 0; } .single-column { grid-template-columns: minmax(0, 1fr); } .back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 18px; color: var(--muted); font-size: .78rem; text-decoration: none; } .back:hover { color: var(--mint); } .primary, .quiet { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 11px 17px; border-radius: var(--radius-control); line-height: 1.35; font-size: .82rem; text-decoration: none; transition: background .18s, border-color .18s, transform .18s; } .primary { border: 1px solid transparent; color: var(--on-accent); background: var(--accent); font-weight: 650; box-shadow: 0 3px 18px color-mix(in srgb, var(--brand-secondary) 4.3137%, transparent); } .primary:hover:not(:disabled) { filter: brightness(1.08); } .primary:active:not(:disabled) { transform: translateY(1px); } .quiet { border: 1px solid color-mix(in srgb, var(--ink) 12.549%, transparent); background: color-mix(in srgb, var(--ink) 1.1765%, transparent); color: var(--ui-912); } .quiet:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand-primary) 37.6471%, transparent); background: color-mix(in srgb, var(--brand-primary) 4.3137%, transparent); } .tag { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--brand-primary) 14.5098%, transparent); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--brand-primary) 3.1373%, transparent); color: var(--accent-877); font-size: .68rem; font-weight: 500; line-height: 1.5; } input, select, textarea { display: block; width: 100%; min-width: 0; min-height: 46px; color: var(--text); background: var(--ui-176); border: 1px solid color-mix(in srgb, var(--ink) 16.0784%, transparent); border-radius: var(--radius-control); padding: 12px 14px; transition: border-color .18s; } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 27.0588%, transparent); } input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--brand-primary) 60%, transparent); } input::placeholder, textarea::placeholder { color: var(--ui-688); } textarea { min-height: 100px; resize: vertical; line-height: 1.6; } input[type=search] { max-width: 390px; } input[type=checkbox], input[type=radio] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--mint); flex: 0 0 auto; } .field { position: relative; display: block; margin: 18px 0; text-align: left; } .field > span { position: absolute; top: 10px; left: 14px; right: 14px; font-size: .67rem; line-height: 1.3; color: var(--muted); pointer-events: none; z-index: 1; } .field > input, .field > select { min-height: 63px; padding: 28px 13px 10px; } .field > textarea { min-height: 112px; padding: 29px 13px 12px; } .field:focus-within > span { color: var(--mint); } form > .primary { margin-top: 12px; } .error { color: var(--sem-red-867); background: color-mix(in srgb, var(--sem-red-721) 6.2745%, transparent); border: 1px solid color-mix(in srgb, var(--sem-red-721) 18.8235%, transparent); padding: 14px; margin: 18px 0; border-radius: var(--radius-xs); font-size: .85rem; line-height: 1.6; } .success { color: var(--mint); margin: 18px 0; font-size: .86rem; line-height: 1.6; } .error:empty, .success:empty { display: none; } .success > .quiet { margin: 10px 8px 0 0; } .notice { padding: 12px 16px; border-left: 2px solid var(--blue); background: color-mix(in srgb, var(--brand-primary) 2.7451%, transparent); color: var(--ui-850); margin: 16px 0; font-size: .84rem; } .loading { padding: 24px 0; font-size: .86rem; color: var(--muted); } .empty { text-align: center; padding: 56px 30px; } .empty h2 { margin-bottom: 12px; } .empty p { color: var(--muted); max-width: 520px; margin: 0 auto; font-size: .9rem; } .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 20px; } .project { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 272px; padding: 28px; text-decoration: none; color: inherit; overflow: hidden; transition: border-color .2s, transform .2s, background .2s; } .project::after { content: ''; position: absolute; z-index: -1; width: 200px; height: 200px; right: -85px; top: -98px; border: 1px solid color-mix(in srgb, var(--brand-primary) 9.0196%, transparent); border-radius: 50%; box-shadow: 0 0 0 25px color-mix(in srgb, var(--brand-primary) 1.5686%, transparent), 0 0 0 55px color-mix(in srgb, var(--brand-primary) 1.1765%, transparent); } .project:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand-primary) 33.3333%, transparent); background: linear-gradient(125deg, var(--accent-260), var(--ui-217)); } .project h2 { margin: 42px 0 14px; font-size: 1.45rem; letter-spacing: -.04em; max-width: 440px; } .project .muted { font-size: .84rem; } .project .open { margin-top: auto; padding-top: 24px; color: var(--mint); font-size: .77rem; } .pager { margin-top: 24px; } /* Entry: architectural orbits, generous type, quiet authentication. */ .login { position: relative; isolation: isolate; min-height: 100dvh; max-width: 1480px; margin: auto; padding: 70px clamp(30px, 6vw, 100px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .8fr); align-items: center; gap: 9%; overflow: hidden; } .login::before { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 35% 50%, color-mix(in srgb, var(--accent-468) 16.4706%, transparent), transparent 47%); } .login-intro { position: relative; padding: 50px 0; } .login-intro .wordmark { margin-bottom: 110px; } .login-intro h1 { position: relative; z-index: 1; font-size: clamp(3.1rem, 5.25vw, 5.1rem); line-height: 1.01; letter-spacing: -.065em; font-weight: 550; max-width: 700px; } .login-intro p { position: relative; z-index: 1; max-width: 420px; color: var(--muted); font-size: .98rem; margin-top: 25px; } .login-form { position: relative; padding: 36px; border-color: color-mix(in srgb, var(--ink) 12.549%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--ui-252) 85.8824%, transparent), color-mix(in srgb, var(--ui-206) 92.9412%, transparent)); box-shadow: 0 30px 90px color-mix(in srgb, var(--black) 26.6667%, transparent), inset 0 1px color-mix(in srgb, var(--ink) 3.1373%, transparent); } .login-form h2 { margin-bottom: 8px; font-size: 1.5rem; letter-spacing: -.04em; } .login-form > .muted { font-size: .83rem; margin-bottom: 28px; } .login-form .primary { width: 100%; min-height: 48px; } .login-form small { display: block; color: var(--muted); font-size: .71rem; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); } .login-orbit { position: absolute; pointer-events: none; width: 590px; height: 590px; left: -155px; top: 100px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand-primary) 9.0196%, transparent); transform: rotate(-28deg) scaleY(.62); z-index: -1; box-shadow: 0 0 0 65px color-mix(in srgb, var(--brand-primary) 1.1765%, transparent), 0 0 0 130px color-mix(in srgb, var(--brand-primary) 0.7843%, transparent); } .login-orbit::before, .login-orbit::after { content: ''; position: absolute; inset: 45px; border: 1px solid color-mix(in srgb, var(--brand-secondary) 10.1961%, transparent); border-radius: 50%; } .login-orbit::after { inset: 100px; box-shadow: 0 0 90px color-mix(in srgb, var(--brand-primary) 3.5294%, transparent); } .login-proof { display: flex; align-items: center; gap: 10px; margin-top: 66px; color: var(--ui-692); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; } .login-proof::before { content: ''; width: 22px; height: 1px; background: var(--mint); } /* Project dashboard: an editorial hero above a compact operational grid. */ .project-navigation { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--border); } .project-navigation a { display: inline-flex; align-items: center; gap: 8px; position: relative; min-height: 50px; padding: 8px 0 16px; color: var(--muted); text-decoration: none; font-size: .78rem; white-space: nowrap; } .project-navigation a:hover { color: var(--text); } .project-navigation a[aria-current=page] { color: var(--mint); } .project-navigation a[aria-current=page]::after { content: ''; height: 2px; position: absolute; bottom: -1px; left: 0; right: 0; background: var(--accent); } .project-navigation svg { width: 16px; height: 16px; } .overview-screen { margin-bottom: 24px; } .readiness { position: relative; overflow: hidden; isolation: isolate; padding: 34px; background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent-560) 10.9804%, transparent), transparent 60%), linear-gradient(120deg, var(--ui-258), var(--ui-210)); border-color: color-mix(in srgb, var(--brand-primary) 14.5098%, transparent); } .readiness .header { margin-bottom: 0; position: relative; z-index: 1; } .readiness h1 { max-width: 750px; } .readiness > h2 { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } .readiness > .progress-display { margin-bottom: 32px; max-width: 420px; } .readiness-main { min-width: 0; position: relative; z-index: 1; } .readiness-progress { min-width: 0; position: relative; z-index: 1; padding: 24px; border: 1px solid color-mix(in srgb, var(--brand-primary) 12.549%, transparent); background: color-mix(in srgb, var(--ui-169) 31.3725%, transparent); border-radius: var(--radius-md); } .readiness-progress h2 { color: var(--muted); font-size: .74rem; font-weight: 400; margin-bottom: 22px; } .hero-orbit { position: absolute; z-index: -1; width: 550px; height: 550px; top: -210px; right: -170px; border: 1px solid color-mix(in srgb, var(--brand-secondary) 9.4118%, transparent); border-radius: 50%; transform: rotate(-30deg) scaleY(.72); box-shadow: 0 0 0 42px color-mix(in srgb, var(--brand-primary) 1.5686%, transparent), 0 0 0 84px color-mix(in srgb, var(--brand-primary) 1.1765%, transparent); pointer-events: none; } .hero-orbit::after { content: ''; position: absolute; inset: 50px; border: 1px solid color-mix(in srgb, var(--brand-primary) 9.4118%, transparent); border-radius: 50%; } .progress-value { display: block; font-size: clamp(2rem, 3.7vw, 3.7rem); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.06em; line-height: 1.1; } progress { width: 100%; height: 5px; border: 0; border-radius: var(--radius-xs); overflow: hidden; appearance: none; background: color-mix(in srgb, var(--ink) 4.7059%, transparent); accent-color: var(--mint); margin: 16px 0 10px; } progress::-webkit-progress-bar { background: color-mix(in srgb, var(--ink) 4.7059%, transparent); border-radius: var(--radius-xs); } progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-xs); } progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-xs); } .progress-display .muted { font-size: .73rem; margin: 10px 0 0; } .contract-date { display: flex; flex-wrap: wrap; gap: 9px 14px; align-items: center; margin-top: 24px; font-size: .75rem; } .contract-date strong { font-weight: 500; color: var(--ui-930); } .contract-date small { width: 100%; font-size: .68rem; } .overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; gap: 0; } .metric { display: flex; flex-direction: column; gap: 9px; border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; padding: 24px; } .metric:last-child { border-right: 0; } .metric strong { font-size: 2rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1.1; } .metric span { color: var(--ui-853); font-size: .77rem; } .metric small { color: var(--ui-700); font-size: .63rem; } .metric-attention { background: color-mix(in srgb, var(--sem-amber-816) 3.5294%, transparent); } .metric-attention strong, .metric-attention span { color: var(--sem-amber-863); } .waiting-tag { background: color-mix(in srgb, var(--sem-amber-816) 5.098%, transparent); border-color: color-mix(in srgb, var(--sem-amber-816) 20.7843%, transparent); color: var(--sem-amber-877); } .action-note { position: relative; border-color: color-mix(in srgb, var(--sem-amber-777) 14.902%, transparent); border-left: 2px solid var(--sem-amber-777); background: linear-gradient(115deg, var(--ui-251), var(--ui-215)); } .action-note h2 { font-size: 1.1rem; margin-bottom: 9px; } .action-note p { font-size: .83rem; max-width: 740px; } .action-note .quiet { margin-top: 6px; } .overview-screen .columns > .panel { height: 100%; } .stage-timeline { display: grid; gap: 0; margin-top: 28px; padding-left: 9px; } .stage-card { position: relative; padding: 0 0 30px 28px; border-left: 1px solid color-mix(in srgb, var(--brand-primary) 16.4706%, transparent); } .stage-card::before { content: ''; position: absolute; width: 9px; height: 9px; left: -5px; top: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px var(--ui-260); } .stage-card:last-child { padding-bottom: 5px; } .stage-card h3 { margin: 15px 0 9px; font-size: 1.16rem; letter-spacing: -.025em; } .stage-card p { font-size: .84rem; } .stage-card .progress-value { font-size: 1.9rem; margin-top: 18px; } .stage-card .stage-dates { color: var(--muted); font-size: .72rem; } .stage-card .open { display: inline-flex; align-items: center; min-height: 44px; font-size: .78rem; text-decoration: none; } .stage-card[data-state=planned]::before, .stage-card[data-state=not_started]::before { background: var(--accent-596); } .stage-card[data-state=blocked]::before, .stage-card[data-state=waiting_materials]::before, .stage-card[data-state=needs_attention]::before { background: var(--sem-amber-816); } /* Lists, materials, invitations and workspace settings. */ .members { padding: 0; margin: 0; list-style: none; } .members li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--border); font-size: .85rem; } .members li:last-child { border-bottom: 0; } .meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .75rem; } .notification { padding: 22px 0; border-bottom: 1px solid var(--border); } .notification:last-child { border: 0; } .notification h3 { margin: 0 0 9px; font-size: .98rem; } .notification p { color: var(--muted); font-size: .82rem; margin: 0 0 9px; } .notification > .tag { margin: 5px 0 10px; } .notification > .quiet, .notification > .primary { margin: 10px 8px 0 0; } .notification > .open { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; } .invite-link { font-size: .8rem; overflow-wrap: anywhere; background: var(--ui-166); border: 1px solid var(--border); padding: 14px; border-radius: var(--radius-xs); margin-top: 15px; } .invitation-list { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } .invitation-list h3 { font-size: 1rem; margin: 0 0 12px; } .invitation-list .members li { flex-wrap: wrap; } .invitation-list .members p { font-size: .75rem; margin: 7px 0 0; } .invitation-list > button { margin: 12px 8px 0 0; } .material-details-slot:not(:empty) { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .material-details-slot:focus { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: var(--radius-xs); } .material-files { display: grid; gap: 12px; margin: 20px 0; } .material-file { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ui-166) 46.6667%, transparent); } .material-file h4, .deadline-adjustment h4 { margin: 0 0 9px; } .material-file .download-link { margin-right: 8px; } .review-actions, .return-form, .deadline-adjustment form { display: grid; gap: 10px; margin-top: 14px; } .deadline-adjustment, .upload-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .upload-form h4 { margin: 0 0 12px; } .upload-form p { font-size: .8rem; } .upload-file-label { display: grid; gap: 9px; margin: 18px 0; font-size: .8rem; } .upload-file-label input { max-width: 100%; font-size: .72rem; padding: 10px; } input[type=file]::file-selector-button { font: inherit; padding: 8px 10px; margin-right: 9px; border: 1px solid color-mix(in srgb, var(--brand-primary) 18.8235%, transparent); border-radius: var(--radius-xs); background: var(--ui-265); color: var(--mint); cursor: pointer; } .upload-actions { display: flex; flex-wrap: wrap; gap: 10px; } .upload-actions .primary { margin: 0; } .download-link { text-decoration: none; } summary { min-height: 44px; cursor: pointer; color: var(--mint); padding: 13px 0; font-size: .82rem; } .library-toolbar, .library-actions, .library-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 15px 0; } .library-toolbar { padding-bottom: 18px; border-bottom: 1px solid var(--border); } .library-toolbar .library-field { flex: 1; min-width: 155px; } .library-field { display: grid; gap: 8px; min-width: 0; margin: 14px 0; font-size: .78rem; color: var(--ui-840); } .library-field input, .library-field select, .library-field textarea { font-size: .87rem; color: var(--text); } .library-entry, .library-version { padding: 20px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; } .library-entry h3, .library-version h3 { margin: 11px 0; font-size: 1rem; } .library-entry h3 button { text-align: left; justify-content: flex-start; overflow-wrap: anywhere; max-width: 100%; } .library-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .82rem; } [data-folder-color=brand_blue] { border-color: color-mix(in srgb, var(--brand-primary) 43.9216%, transparent); color: var(--brand-primary); } [data-folder-color=brand_mint] { border-color: color-mix(in srgb, var(--brand-secondary) 43.9216%, transparent); color: var(--brand-secondary); } [data-folder-color=violet] { border-color: color-mix(in srgb, var(--sem-violet-819) 43.9216%, transparent); color: var(--sem-violet-819); } [data-folder-color=amber] { border-color: color-mix(in srgb, var(--sem-amber-880) 43.9216%, transparent); color: var(--sem-amber-880); } .production-members { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 14px; margin: 24px 0; } .production-person { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--ui-185); } .production-person h3 { margin: 18px 0 8px; font-size: 1.05rem; } .production-person p { font-size: .78rem; } .person-mark { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand-primary) 25.098%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--brand-primary) 13.3333%, transparent), color-mix(in srgb, var(--brand-secondary) 3.9216%, transparent)); color: var(--mint); font-size: 1.15rem; font-weight: 500; } .stage-config fieldset { min-width: 0; margin: 24px 0; padding: 20px; border: 1px solid var(--edge-light); border-radius: var(--radius-sm); } .stage-config legend { padding: 0 8px; max-width: 100%; font-size: .9rem; font-weight: 600; line-height: 1.5; } .stage-config button { margin: 8px 8px 8px 0; } .stage-config-entry { background: var(--ui-185); } .stage-config-message { padding: 16px 0; border-top: 1px solid var(--border); } .stage-config-message:last-child { margin-bottom: 16px; } .stage-config-messages h3 { font-size: .95rem; } .stage-config-conflict:not(:empty) { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .stage-config-conflict textarea { min-height: 260px; font: .76rem/1.6 ui-monospace, monospace; } .confirm-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 28px; border: 1px solid color-mix(in srgb, var(--brand-primary) 20.7843%, transparent); border-radius: var(--radius-lg); background: var(--ui-226); color: var(--text); box-shadow: 0 30px 110px color-mix(in srgb, var(--black) 60%, transparent); } .confirm-dialog::backdrop { background: color-mix(in srgb, var(--ui-127) 85.098%, transparent); backdrop-filter: blur(8px); } .confirm-dialog p { font-size: .87rem; } .library-dialog p { overflow-wrap: anywhere; } .library-dialog img, .library-dialog canvas { max-width: 100%; } .dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; } @supports (backdrop-filter: blur(24px)) { .sidebar, .login-form { backdrop-filter: blur(24px); } } @media (min-width: 1150px) { .readiness:has(.readiness-main) { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; } } @media (max-width: 1150px) { .shell { grid-template-columns: 192px minmax(0, 1fr); } .sidebar { padding-right: 16px; padding-left: 16px; } .content { padding-right: 26px; padding-left: 26px; } .columns { grid-template-columns: minmax(0, 1fr); } .project-navigation { gap: 18px; } .readiness-progress { margin-top: 24px; max-width: 480px; } .login { gap: 6%; padding-right: 40px; padding-left: 40px; } .login-form { padding: 28px; } .metric { padding: 22px 18px; } } @media (max-width: 850px) { .shell { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; flex-direction: row; align-items: center; gap: 20px; padding: 20px 26px; border-right: 0; border-bottom: 1px solid var(--border); } .sidebar .wordmark { padding: 0; font-size: 1.2rem; } .sidebar nav { margin: 0 0 0 auto; } .sidebar-caption, .sidebar-footer { display: none; } .nav-current { padding: 10px 12px; font-size: .77rem; } .identity { margin: 0; padding: 0; border: 0; } .identity strong, .identity-avatar { display: none; } .identity .quiet { padding: 9px 12px; min-height: 44px; font-size: .73rem; } .content { padding: 24px 26px 48px; } .workspace-topbar { padding-bottom: 18px; margin-bottom: 28px; } .readiness { padding: 28px; } .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric:nth-child(2) { border-right: 0; } .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); } .login { grid-template-columns: 1fr; max-width: 660px; gap: 28px; padding: 44px 32px; } .login-intro { padding: 0; } .login-intro .wordmark { margin-bottom: 60px; } .login-intro h1 { font-size: clamp(3.2rem, 8vw, 4.5rem); } .login-intro p { max-width: 450px; } .login-proof { margin-top: 28px; } .login-orbit { top: -100px; left: 0; } .login-form { padding: 32px; } } @media (max-width: 480px) { :root { --radius: var(--radius-md); } .sidebar { gap: 10px; padding: 19px 18px; } .sidebar .wordmark { font-size: 1.07rem; } .wordmark span { font-size: .5rem; margin-top: 7px; } .nav-current { gap: 7px; padding: 9px; font-size: .73rem; } .nav-current svg { width: 15px; } .identity .quiet { padding: 9px; font-size: .7rem; } .content { padding: 20px 18px 40px; } .workspace-topbar { font-size: .65rem; margin-bottom: 26px; gap: 8px; } h1 { font-size: 2.35rem; } .header { margin-bottom: 24px; } .header .muted { font-size: .86rem; } .panel { padding: 21px; } .toolbar { align-items: stretch; gap: 8px; } .toolbar input { max-width: none; flex: 1; } .project { min-height: 265px; padding: 25px; } .project h2 { font-size: 1.5rem; } .project-navigation { flex-wrap: nowrap; overflow-x: auto; gap: 20px; margin-right: -18px; padding-right: 18px; scrollbar-width: thin; } .project-navigation a { flex: 0 0 auto; font-size: .75rem; } .readiness { padding: 25px 22px; } .readiness h1 { font-size: 2.25rem; } .readiness-progress { padding: 20px; } .progress-value { font-size: 2.8rem; } .metric { padding: 21px 18px; } .metric strong { font-size: 1.9rem; } .metric span { font-size: .73rem; } .metric small { font-size: .62rem; } .action-note h2 { font-size: 1.05rem; } .stage-card { padding-left: 22px; } .members li { align-items: flex-start; flex-direction: column; gap: 9px; } .login { padding: 32px 22px; gap: 32px; } .login-intro .wordmark { margin-bottom: 48px; } .login-intro h1 { font-size: 3.25rem; } .login-intro p { font-size: .89rem; margin-top: 20px; } .login-form { padding: 25px 22px; } .login-form h2 { font-size: 1.4rem; } .login-proof { font-size: .59rem; } .library-actions > *, .upload-actions > * { max-width: 100%; } .library-toolbar .library-field { min-width: 100%; } .material-file { padding: 16px; } .material-file .download-link { margin-bottom: 8px; } .stage-config fieldset { padding: 14px; } .stage-config button { max-width: 100%; white-space: normal; text-align: left; } .confirm-dialog { padding: 23px; } .dialog-actions { flex-direction: column-reverse; } .dialog-actions > * { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .project:hover { transform: none; } } @media (prefers-reduced-transparency: reduce) { .sidebar, .login-form { backdrop-filter: none; background: var(--surface); } .confirm-dialog::backdrop { backdrop-filter: none; background: var(--ui-127); } } @media (forced-colors: active) { .panel, .tag, .quiet, .primary, .overview-metrics, .nav-current { border: 1px solid CanvasText; } .primary { color: ButtonText; background: ButtonFace; } .skip { background: Canvas; } .project-navigation a[aria-current=page] { color: LinkText; border-bottom: 2px solid Highlight; } .metric-attention, .waiting-tag { color: CanvasText; background: Canvas; } .stage-card::before { background: CanvasText; } progress { appearance: auto; } .hero-orbit, .login-orbit, .project::after { display: none; } } /* Shared React shell and content composition. */ .icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; } @font-face { font-family: "AVALIN Bebas"; src: url('/assets/bebas-neue.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } .wordmark { display: flex; align-items: center; gap: 12px; font-family: "AVALIN Bebas", sans-serif; font-weight: 400; } .brand-inline { font-family: "AVALIN Bebas", sans-serif; font-weight: 400; font-size: 1.18em; letter-spacing: .045em; color: var(--mint); white-space: nowrap; } .wordmark .brand-symbol { width: 33px; height: 39px; color: var(--mint); flex: 0 0 auto; } .wordmark .brand-type { display: block; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; } .wordmark .brand-type > span { display: block; color: var(--mint); font-size: .6rem; font-weight: 500; letter-spacing: .56em; margin-top: 9px; } .sidebar-footer { color: var(--ui-655); font-size: .65rem; line-height: 1.7; padding: 26px 12px; letter-spacing: .015em; } .sidebar-footer p { margin: 0; } .sidebar-footer + .identity { margin-top: 0; } .identity:has(.identity-avatar) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .identity-copy { min-width: 0; flex: 1; } .identity-copy strong { margin-bottom: 4px; font-size: .75rem; } .identity-copy span { font-size: .63rem; } .identity:has(.identity-avatar) > .quiet { width: 100%; margin-top: 6px; justify-content: flex-start; border-color: transparent; color: var(--ui-729); padding-left: 0; font-size: .72rem; } .project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .project-symbol { color: var(--mint); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-primary) 14.5098%, transparent); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--brand-primary) 2.7451%, transparent); } .project-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 23px; } .project-card-footer .open { padding: 0; margin: 0; } .project-card-footer > .icon { color: var(--mint); } .login-form-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--ui-803); } .login-form-heading .icon { color: var(--mint); } .login-form-footer { font-size: .7rem; color: var(--ui-729); } .orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand-primary) 7.0588%, transparent); } .orbit-ring:nth-child(2) { inset: 55px; } .orbit-ring:nth-child(3) { inset: 110px; } .orbit-core { position: absolute; width: 120px; height: 120px; left: calc(50% - 60px); top: calc(50% - 60px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand-primary) 14.5098%, transparent), color-mix(in srgb, var(--brand-secondary) 1.9608%, transparent) 60%, transparent 72%); box-shadow: 0 0 100px color-mix(in srgb, var(--brand-secondary) 3.1373%, transparent); } .orbit-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); top: 16%; left: 15%; box-shadow: 0 0 18px color-mix(in srgb, var(--brand-secondary) 50.1961%, transparent); } .readiness-main > h2 { color: var(--ui-851); font-size: .88rem; font-weight: 400; letter-spacing: 0; margin-bottom: 24px; } .readiness-main .readiness-progress { border: 0; background: transparent; padding: 0; margin-top: 0; } .readiness-main > p { color: var(--muted); font-size: .73rem; max-width: 300px; margin: 13px 0 0; } .readiness-main .progress-value { font-size: clamp(2.6rem, 5vw, 4.8rem); } .readiness .readiness-project { padding-left: 36px; border-left: 1px solid color-mix(in srgb, var(--brand-primary) 12.549%, transparent); } .readiness-project h1 { font-size: clamp(1.9rem, 3.2vw, 3.2rem); } .readiness-project > .muted { font-size: .82rem; } .metric-icon { color: var(--accent-718); margin-bottom: 6px; } .metric-attention .metric-icon { color: var(--sem-amber-863); } .action-note:has(.action-note-copy) { display: flex; align-items: flex-start; gap: 17px; } .action-note-icon { color: var(--sem-amber-863); padding-top: 1px; } .action-note-copy { min-width: 0; } .empty-symbol { display: grid; place-items: center; width: 52px; height: 52px; margin: 26px 0; color: var(--accent-670); border: 1px solid color-mix(in srgb, var(--brand-primary) 10.5882%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-primary) 1.5686%, transparent); } .empty-symbol .icon { width: 24px; height: 24px; } .model-panel { position: relative; overflow: hidden; } .model-panel > p { font-size: .83rem; max-width: 380px; } @media (min-width: 1150px) { .readiness:has(.readiness-main) { grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 34px; padding: 38px; } } @media (max-width: 1149px) { .readiness .readiness-project { padding-left: 0; border-left: 0; padding-top: 28px; margin-top: 26px; border-top: 1px solid color-mix(in srgb, var(--brand-primary) 12.549%, transparent); } .readiness-main .readiness-progress { max-width: 420px; } } @media (max-width: 850px) { .identity:has(.identity-avatar) { flex-wrap: nowrap; } .identity:has(.identity-avatar) > .quiet { width: auto; margin: 0; padding: 9px; } .identity-copy { display: none; } } @media (max-width: 480px) { .wordmark { gap: 8px; } .wordmark .brand-symbol { width: 25px; height: 31px; } .wordmark .brand-type > span { font-size: .48rem; } .action-note:has(.action-note-copy) { gap: 12px; } .readiness-main .progress-value { font-size: 3.75rem; } } /* Motion follows actions; reduced motion never delays interactions. */ @keyframes space-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } @keyframes space-dialog-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes space-backdrop-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes space-dialog-exit { to { opacity: 0; transform: translateY(8px) scale(.985); } } @keyframes space-backdrop-exit { to { opacity: 0; } } @keyframes space-orbit-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .content > .header, .projects, .overview-screen, .content > .columns, .login-form, .screen-enter { animation: space-enter .38s cubic-bezier(.2,.7,.3,1) both; } .login-form { animation-delay: .06s; } .orbit-node { animation: space-orbit-glow 7s ease-in-out infinite; } .confirm-dialog[open] { animation: space-dialog-enter .22s cubic-bezier(.2,.7,.3,1) both; } .confirm-dialog[open]::backdrop { animation: space-backdrop-enter .22s ease-out both; } .confirm-dialog.is-closing { animation: space-dialog-exit .16s ease-in both; } .confirm-dialog.is-closing::backdrop { animation: space-backdrop-exit .16s ease-in both; } details[open] > :not(summary) { animation: space-enter .2s ease-out both; } @supports (interpolate-size: allow-keywords) { details { interpolate-size: allow-keywords; } details::details-content { block-size: 0; overflow: clip; transition: block-size .22s ease, content-visibility .22s allow-discrete; } details[open]::details-content { block-size: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Layout contracts for icons and route transitions. */ .brand-home { display: block; text-decoration: none; } .sidebar > .sidebar-caption { padding: 0 12px; margin-top: 46px; } .sidebar > .sidebar-caption + nav { margin-top: 12px; } .metric-icon, .action-note-icon { width: 20px; height: 20px; flex: 0 0 auto; } .project-symbol { padding: 7px; } .empty-symbol { padding: 13px; } .empty > .empty-symbol { margin: 0 auto 24px; } .login-form-heading { display: block; margin-bottom: 26px; } .login-form-heading .eyebrow { margin-bottom: 16px; font-size: .63rem; } .login-form-heading p { font-size: .83rem; margin: 10px 0 0; } .action-note:has(.action-note-copy) { flex-wrap: wrap; align-items: center; } .action-note-copy { flex: 1 1 320px; } .action-note:has(.action-note-copy) > .download-link { flex: 0 1 auto; margin: 0; } .route-enter { animation: space-enter .28s cubic-bezier(.2,.7,.3,1) both; } .route-exit { opacity: 0; transform: translateY(5px); transition: opacity .14s ease, transform .14s ease; } @media (max-width: 850px) { .sidebar > .sidebar-caption + nav { margin-top: 0; } } @media (max-width: 480px) { .action-note-copy { flex-basis: calc(100% - 32px); } .action-note:has(.action-note-copy) > .download-link { width: 100%; margin-top: 3px; } .identity:has(.identity-avatar) > .quiet .icon { display: none; } } @media (prefers-reduced-motion: reduce) { .route-exit { opacity: 1; transform: none; transition: none; } } @media (max-width: 850px) { .sidebar, .login-form { backdrop-filter: none; } } .request-reveal { animation: space-enter .2s ease-out both; } .request-reveal.is-closing { animation: space-dialog-exit .16s ease-in both; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .request-reveal, .request-reveal.is-closing { animation: none !important; } } /* Solid semantic surfaces keep contrast independent of transparency support. */ .metric-attention { background: var(--ui-234); } input, select, textarea { border-color: var(--accent-554); } input:hover, select:hover, textarea:hover { border-color: var(--accent-656); } /* Proportional groups: stretch related tiles only, keep independent forms in flow. */ .overview-screen > .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .overview-screen > .columns > .panel { height: auto; } .overview-metrics { align-items: stretch; } .metric { display: grid; grid-template-rows: 20px 36px auto 1fr; align-content: start; gap: 9px; } .metric .metric-icon { margin: 0; } .metric small { align-self: end; } .production-members { grid-auto-rows: 1fr; align-items: stretch; } .production-person { display: flex; flex-direction: column; } .production-person h3 { min-height: 2.8em; } .production-person p:last-child { margin-bottom: 0; } .team-columns { grid-template-columns: minmax(0, 1fr); } .team-columns > .stack { gap: 20px; } .overview-activity { gap: 18px; } .overview-activity > .panel > p:last-child { margin-bottom: 0; } .notification-preferences { padding: 0; } .notification-preferences > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; list-style: none; padding: 23px 26px; color: var(--ui-915); font-size: .88rem; font-weight: 500; } .notification-preferences > summary::-webkit-details-marker { display: none; } .notification-preferences > summary::after { content: '+'; color: var(--mint); font-size: 1.3rem; font-weight: 400; line-height: 1; } .notification-preferences[open] > summary { border-bottom: 1px solid var(--border); } .notification-preferences[open] > summary::after { content: '−'; } .notification-settings-content { padding: 26px; } .notification-settings-content > .panel { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; } .notification-settings-content > .panel > h2 { font-size: 1.05rem; } .notification-settings-content form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; } .notification-settings-content form > h3, .notification-settings-content form > p, .notification-settings-content form > div, .notification-settings-content form > .library-field:has(textarea) { grid-column: 1 / -1; } .notification-settings-content form > button { justify-self: start; grid-column: 1 / -1; margin: 7px 0 22px; } .notification-settings-content form > .library-field { margin: 9px 0; } .notification-settings-content .material-details { padding: 16px 0; border-bottom: 1px solid var(--border); } .notification-settings-content .material-details > button { margin: 8px 10px 0 0; } .notification-settings-content h3 { margin-top: 24px; } .content[data-section=materials] .columns { grid-template-columns: minmax(0, 1fr); } @media (max-width: 850px) { .overview-screen > .columns { grid-template-columns: minmax(0, 1fr); } .production-person h3 { min-height: 0; } } @media (max-width: 480px) { .notification-preferences { padding: 0; } .notification-preferences > summary { padding: 21px; font-size: .82rem; } .notification-settings-content { padding: 21px; } .notification-settings-content form { grid-template-columns: minmax(0, 1fr); } .metric { grid-template-rows: 20px 34px auto 1fr; } } /* One navigation, adapted into a compact touch dock on mobile. */ .nav-short, .nav-indicator { display: none; } .model-fill > summary { padding: 0; min-height: 0; color: var(--text); font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; } .model-fill-content p { font-size: .83rem; } .model-fill-content .empty-symbol { margin: 22px 0; } @media (max-width: 760px) { .content { padding-top: 14px; padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); } .workspace-topbar { display: none; } .back { min-height: 36px; margin-bottom: 12px; font-size: .72rem; } .sidebar { padding-top: 15px; padding-bottom: 15px; } .project-navigation { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 7px; border: 1px solid color-mix(in srgb, var(--brand-primary) 21.1765%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ui-223a) 96.0784%, transparent); box-shadow: 0 8px 34px color-mix(in srgb, var(--black) 53.3333%, transparent); overflow: visible; } .project-navigation a { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 55px; min-width: 0; padding: 6px 1px; border-radius: var(--radius-sm); font-size: .64rem; position: relative; z-index: 1; white-space: normal; text-align: center; line-height: 1.15; } .project-navigation a .icon { width: 18px; height: 18px; } .project-navigation .nav-full { display: none; } .project-navigation .nav-short { display: inline; } .project-navigation a[aria-current=page]::after { display: none; } .project-navigation .nav-indicator { display: block; position: absolute; left: 7px; top: 7px; bottom: 7px; width: calc((100% - 14px) / 7); border: 1px solid color-mix(in srgb, var(--brand-primary) 16.8627%, transparent); border-radius: var(--radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 13.3333%, transparent), color-mix(in srgb, var(--brand-secondary) 4.7059%, transparent)); transform: translateX(0); transition: transform .24s cubic-bezier(.2,.7,.3,1); pointer-events: none; } .project-navigation[data-section=stages] .nav-indicator { transform: translateX(100%); } .project-navigation[data-section=materials] .nav-indicator { transform: translateX(300%); } .project-navigation[data-section=spec] .nav-indicator { transform: translateX(400%); } .project-navigation[data-section=touch] .nav-indicator { transform: translateX(500%); } .project-navigation[data-section=team] .nav-indicator { transform: translateX(600%); } .overview-screen { gap: 14px; margin-bottom: 14px; } .readiness { padding: 22px; } .readiness-main > .eyebrow { margin-bottom: 10px; font-size: .6rem; } .readiness-main > h2 { margin-bottom: 12px; } .readiness-main .progress-value { font-size: 3.1rem; } .readiness .readiness-project { padding-top: 20px; margin-top: 14px; } .readiness-project h1 { font-size: 1.9rem; } .readiness-project .eyebrow { margin-bottom: 10px; font-size: .6rem; } .readiness-project > p { margin-bottom: 8px; font-size: .78rem; } .contract-date { margin-top: 16px; } .metric { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: 29px auto 1fr; gap: 6px 10px; padding: 17px 15px; } .metric .metric-icon { grid-column: 1; grid-row: 1; align-self: center; width: 17px; height: 17px; } .metric strong { grid-column: 2; grid-row: 1; font-size: 1.65rem; } .metric > span { grid-column: 2; grid-row: 2; font-size: .7rem; } .metric > small { grid-column: 2; grid-row: 3; font-size: .6rem; } .overview-screen > .columns { gap: 14px; } .model-fill { padding: 0; } .model-fill > summary { min-height: 60px; padding: 20px 21px; font-size: 1rem; } .model-fill-content { padding: 0 21px 21px; } .model-fill-content .empty-symbol { margin-top: 0; } .overview-activity { gap: 14px; } } @media (prefers-reduced-motion: reduce) { .project-navigation .nav-indicator { transition: none !important; } } @keyframes workspace-enter { from { opacity: 0; } to { opacity: 1; } } /* A transformed ancestor would turn the fixed mobile dock into a scrolling element. */ .content.route-enter { animation-name: workspace-enter; transform: none; } .content.route-exit { transform: none; } .model-fill > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; } .model-fill > summary::-webkit-details-marker { display: none; } .model-fill > summary > h2 { margin: 0; font-size: inherit; } .model-fill > summary::after { content: '+'; flex: 0 0 auto; color: var(--mint); font-size: 1.15rem; font-weight: 400; } .model-fill[open] > summary::after { content: '−'; } @media (max-width: 760px) { .project-navigation { background: var(--ui-223a); } } /* Project sections live in the persistent sidebar; mobile keeps the same navigation dock. */ .sidebar-project-label { color: var(--ui-665); text-transform: uppercase; letter-spacing: .14em; font-size: .61rem; padding: 0 12px; margin-top: 30px; } .readiness-action { grid-column: 1 / -1; margin-top: 4px; padding: 20px 0 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--brand-primary) 14.5098%, transparent); border-radius: 0; background: transparent; box-shadow: none; } .readiness-action .action-note-copy h2 { font-size: 1rem; } .readiness-action .action-note-copy p { font-size: .78rem; margin-bottom: 0; } .readiness-action > .download-link { background: color-mix(in srgb, var(--brand-primary) 3.9216%, transparent); } @media (min-width: 761px) { .shell { grid-template-columns: 224px minmax(0, 1fr); } .sidebar { position: sticky; top: 0; height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: 34px 20px 24px; border-right: 1px solid var(--border); border-bottom: 0; } .sidebar .wordmark { padding: 0 10px; font-size: 1.4rem; } .sidebar .sidebar-caption { display: block; } .sidebar > .sidebar-caption { margin-top: 38px; } .sidebar > .sidebar-caption + nav { margin: 12px 0 0; } .sidebar .sidebar-footer { display: block; margin-top: auto; } .sidebar .identity { margin-top: 0; padding: 22px 10px 0; border-top: 1px solid var(--border); } .sidebar .identity-copy { display: block; } .sidebar .identity-copy strong { display: block; } .sidebar .identity-avatar { display: grid; } .sidebar .identity:has(.identity-avatar) { flex-wrap: wrap; } .sidebar .identity:has(.identity-avatar) > .quiet { width: 100%; margin-top: 6px; padding: 9px 0; } .sidebar .nav-current:not([aria-current=page]) { background: transparent; border-color: transparent; color: var(--text-muted); } .sidebar > .project-navigation { display: grid; position: static; gap: 5px; margin: 12px 0 0; padding: 0; border: 0; background: transparent; overflow: visible; } .sidebar > .project-navigation a { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; gap: 11px; min-height: 44px; padding: 12px; border: 1px solid transparent; border-radius: var(--radius-xs); color: var(--text-muted); font-size: .79rem; white-space: normal; line-height: 1.3; } .sidebar > .project-navigation a:hover { background: color-mix(in srgb, var(--brand-primary) 2.7451%, transparent); color: var(--text); } .sidebar > .project-navigation a[aria-current=page] { background: linear-gradient(110deg, color-mix(in srgb, var(--brand-primary) 12.549%, transparent), color-mix(in srgb, var(--brand-secondary) 4.3137%, transparent)); border-color: color-mix(in srgb, var(--brand-primary) 17.2549%, transparent); color: var(--mint); } .sidebar > .project-navigation a[aria-current=page]::after { display: none; } .sidebar > .project-navigation .icon { width: 18px; height: 18px; } .sidebar > .project-navigation .nav-indicator, .sidebar > .project-navigation .nav-short { display: none; } .sidebar > .project-navigation .nav-full { display: inline; } .content > .back { margin-bottom: 20px; } .readiness:has(.readiness-action) { row-gap: 26px; } } @media (min-width: 761px) and (max-width: 1000px) { .shell { grid-template-columns: 200px minmax(0, 1fr); } .sidebar { padding-left: 14px; padding-right: 14px; } .content { padding-left: 22px; padding-right: 22px; } .sidebar .wordmark { font-size: 1.2rem; } } @media (min-width: 761px) and (max-height: 780px) { .sidebar { padding-top: 24px; padding-bottom: 18px; } .sidebar > .sidebar-caption { margin-top: 24px; } .sidebar-project-label { margin-top: 20px; } .sidebar .sidebar-footer { padding-top: 18px; padding-bottom: 18px; } } @media (max-width: 760px) { .sidebar-project-label { display: none; } .sidebar { backdrop-filter: none; filter: none; transform: none; } .sidebar > .project-navigation { margin: 0; } .readiness-action { margin-top: 20px; padding-top: 20px; } .readiness-action .action-note-copy h2 { font-size: .95rem; } } .sidebar > nav[aria-label="Основная навигация"] > a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 12px; border: 1px solid transparent; border-radius: var(--radius-xs); text-decoration: none; color: var(--text-muted); font-size: .79rem; } .sidebar > nav[aria-label="Основная навигация"] > a:hover { background: color-mix(in srgb, var(--brand-primary) 2.7451%, transparent); color: var(--text); } .sidebar > nav[aria-label="Основная навигация"] > a[aria-current=page] { border-color: color-mix(in srgb, var(--brand-primary) 12.549%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--brand-primary) 10.5882%, transparent), color-mix(in srgb, var(--brand-secondary) 3.1373%, transparent)); color: var(--ui-969); } @media (min-width: 761px) { .sidebar { overflow-y: auto; scrollbar-width: thin; } } @media (max-width: 760px) { .sidebar > nav[aria-label="Основная навигация"] > a { padding: 9px; font-size: .73rem; gap: 7px; } } /* Purposeful motion: independent web implementation of state/feedback principles. */ @keyframes feedback-error { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 65% { transform: translateX(3px); } } @keyframes feedback-success { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes loading-orbit { to { transform: rotate(360deg); } } @keyframes loading-sheen { from { background-position: 160% 0; } to { background-position: -80% 0; } } @keyframes progress-reveal { from { clip-path: inset(0 100% 0 0 round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } } @keyframes purposeful-dialog { 0% { opacity: 0; transform: translateY(16px) scale(.97); } 75% { opacity: 1; transform: translateY(-1px) scale(1.003); } 100% { opacity: 1; transform: none; } } .error:not(:empty) { animation: feedback-error .28s ease-out 1; } .success:not(:empty) { animation: feedback-success .28s ease-out 1; } .loading { position: relative; display: flex; align-items: center; gap: 12px; } .loading::before { content: ''; flex: 0 0 auto; width: 17px; height: 17px; border: 2px solid color-mix(in srgb, var(--brand-secondary) 15.6863%, transparent); border-top-color: var(--mint); border-right-color: var(--blue); border-radius: 50%; animation: loading-orbit 1.1s linear infinite; } .loading::after { content: ''; position: absolute; inset: auto 24px 8px; height: 2px; border-radius: var(--radius-2xs); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-secondary) 56.4706%, transparent), transparent); background-size: 220% 100%; animation: loading-sheen 1.8s ease-in-out infinite; pointer-events: none; } .progress-display progress { animation: progress-reveal .6s cubic-bezier(.22,.7,.25,1) both; } .confirm-dialog[open]:not(.is-closing) { animation: purposeful-dialog .3s cubic-bezier(.2,.7,.3,1) both; } .notification-preferences > summary::after, .model-fill > summary::after, .notification-preferences[open] > summary::after, .model-fill[open] > summary::after { content: ''; width: 14px; height: 14px; flex: 0 0 14px; background: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: center; background-repeat: no-repeat; background-size: 14px 2px, 2px 14px; transition: background-size .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.15); } .notification-preferences[open] > summary::after, .model-fill[open] > summary::after { background-size: 14px 2px, 2px 0; transform: rotate(180deg); } button:not(:disabled):active { scale: .98; } button { transition: background-color .18s, border-color .18s, color .18s, scale .16s; } @media (prefers-reduced-motion: reduce) { .error:not(:empty), .success:not(:empty), .loading::before, .loading::after, .progress-display progress, .confirm-dialog[open]:not(.is-closing) { animation: none !important; } .loading::after { display: none; } .notification-preferences > summary::after, .model-fill > summary::after, button { transition: none !important; } button:not(:disabled):active { scale: none; } } /* Compact material requests: metadata and decisions stay in the same row. */ .content[data-section=materials] .material-request-card { --request-tone: var(--ui-786); --request-badge: var(--ui-281); display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, auto); align-items: center; gap: 14px 24px; margin: 10px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent-864) 14.5098%, transparent); border-left: 3px solid var(--request-tone); border-radius: var(--radius-sm); background: linear-gradient(110deg, color-mix(in srgb, var(--accent-879) 2.7451%, transparent), color-mix(in srgb, var(--ui-196) 3.9216%, transparent)); scroll-margin-top: 22px; } .content[data-section=materials] .material-request-card[data-urgency=yellow] { --request-tone: var(--sem-amber-872); --request-badge: var(--sem-amber-323); } .content[data-section=materials] .material-request-card[data-urgency=orange] { --request-tone: var(--sem-orange-842); --request-badge: var(--ui-308); } .content[data-section=materials] .material-request-card[data-urgency=red] { --request-tone: var(--sem-red-824); --request-badge: var(--sem-red-297); } .content[data-section=materials] .material-request-card[data-urgency=complete] { --request-tone: var(--sem-green-859); --request-badge: var(--sem-green-302); } .content[data-section=materials] .material-request-card[data-urgency=unknown] { --request-tone: var(--ui-786); --request-badge: var(--ui-281); } .content[data-section=materials] .material-row-copy, .content[data-section=materials] .material-row-side { min-width: 0; } .content[data-section=materials] .material-row-copy h3 { margin: 0 0 7px; font-size: .98rem; line-height: 1.4; font-weight: 600; } .content[data-section=materials] .material-purpose { margin: 0 0 8px; font-size: .79rem; line-height: 1.55; color: var(--ui-798); } .content[data-section=materials] .material-row-meta { display: flex; flex-wrap: wrap; gap: 5px 15px; color: var(--ui-759); font-size: .7rem; line-height: 1.5; } .content[data-section=materials] .material-row-meta p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .content[data-section=materials] .material-row-side { display: grid; grid-template-columns: minmax(0, auto) auto; gap: 9px 16px; align-items: center; justify-content: end; max-width: 420px; } .content[data-section=materials] .material-row-side > .material-status { margin: 0; max-width: 190px; font-size: .66rem; } .content[data-section=materials] .material-deadline { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--request-tone) 30%, transparent); border-radius: var(--radius-xs); background: var(--request-badge); text-align: right; color: var(--request-tone); } .content[data-section=materials] .material-deadline strong { font-size: .83rem; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; } .content[data-section=materials] .material-deadline small { font-size: .64rem; color: var(--ui-873); } .content[data-section=materials] .material-card-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin: 0; } .content[data-section=materials] .material-card-actions > button { margin: 0; padding: 9px 12px; min-height: 44px; font-size: .74rem; } .content[data-section=materials] .material-card-actions .primary { min-width: 106px; } .content[data-section=materials] .material-request-card > .request-reveal { grid-column: 1 / -1; min-width: 0; } .content[data-section=materials] .material-request-card .material-details-slot:not(:empty) { margin: 0; padding: 15px 0 0; border-top: 1px solid color-mix(in srgb, var(--accent-864) 14.1176%, transparent); } .content[data-section=materials] .material-request-card .material-details > h3, .content[data-section=materials] .material-detail-heading { font-size: .92rem; margin: 0 0 10px; } .content[data-section=materials] .material-request-card .material-details > p { font-size: .77rem; margin-bottom: 8px; line-height: 1.55; } .content[data-section=materials] .material-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .74rem; color: var(--muted); } .content[data-section=materials] .material-request-card .notice { margin: 10px 0; padding: 9px 12px; font-size: .76rem; } .content[data-section=materials] .material-request-card .material-files { gap: 10px; margin: 14px 0; } .content[data-section=materials] .material-request-card .material-file { padding: 13px 15px; border-radius: var(--radius-xs); } .content[data-section=materials] .material-request-card .material-file h4 { margin-bottom: 6px; font-size: .85rem; } .content[data-section=materials] .material-request-card .material-file p { font-size: .74rem; margin-bottom: 7px; } .content[data-section=materials] .material-request-card .material-file > button, .content[data-section=materials] .material-request-card .material-file > a { min-height: 44px; padding: 9px 12px; margin-bottom: 4px; font-size: .72rem; } .content[data-section=materials] .material-request-card .review-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; margin-top: 10px; } .content[data-section=materials] .material-request-card .return-form { flex: 1 1 320px; margin: 0; } .content[data-section=materials] .material-request-card .return-form textarea { min-height: 76px; } .content[data-section=materials] .material-request-card .upload-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 14px 0 0; padding: 14px 0 0; } .content[data-section=materials] .material-request-card .upload-form > h4 { grid-column: 1 / -1; margin: 0; font-size: .86rem; } .content[data-section=materials] .material-request-card .upload-form > p, .content[data-section=materials] .material-request-card .upload-form > progress { grid-column: 1 / -1; margin: 0; font-size: .74rem; } .content[data-section=materials] .material-request-card .upload-form > p:empty { display: none; } .content[data-section=materials] .material-request-card .upload-file-label { grid-column: 1; grid-row: 3; margin: 3px 0 0; font-size: .72rem; gap: 5px; } .content[data-section=materials] .material-request-card .upload-file-label input { padding: 8px 10px; min-height: 44px; font-size: .72rem; } .content[data-section=materials] .material-request-card .upload-actions { grid-column: 2; grid-row: 3; align-self: end; justify-content: flex-end; gap: 7px; max-width: 300px; } .content[data-section=materials] .material-request-card .upload-actions button { min-height: 44px; padding: 9px 12px; font-size: .74rem; } .content[data-section=materials] .material-request-card .upload-version summary { min-height: 40px; padding: 10px 0; font-size: .75rem; } .content[data-section=materials] .material-request-card .deadline-adjustment { margin-top: 16px; padding-top: 14px; } .content[data-section=materials] .material-request-card .deadline-adjustment form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .content[data-section=materials] .material-request-card .deadline-adjustment textarea { grid-column: 1 / -1; min-height: 76px; } .sidebar .wordmark { font-size: 2.1rem; } @media (max-width: 1080px) { .content[data-section=materials] .material-request-card { grid-template-columns: minmax(0, 1fr); gap: 12px; } .content[data-section=materials] .material-row-side { grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr); max-width: none; justify-content: stretch; gap: 9px; } .content[data-section=materials] .material-card-actions { grid-column: auto; } } @media (max-width: 760px) { .content[data-section=materials] .material-request-card { padding: 14px; margin: 9px 0; gap: 12px; } .content[data-section=materials] .material-row-copy h3 { font-size: .92rem; } .content[data-section=materials] .material-purpose { font-size: .76rem; } .content[data-section=materials] .material-row-meta { font-size: .67rem; gap: 5px 12px; } .content[data-section=materials] .material-row-side { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .content[data-section=materials] .material-card-actions { grid-column: 1 / -1; justify-content: flex-start; } .content[data-section=materials] .material-deadline { padding: 6px 8px; } .content[data-section=materials] .material-deadline strong { font-size: .78rem; } .content[data-section=materials] .material-request-card .upload-form { grid-template-columns: minmax(0, 1fr); } .content[data-section=materials] .material-request-card .upload-file-label { grid-column: 1; grid-row: auto; } .content[data-section=materials] .material-request-card .upload-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; max-width: none; margin-top: 4px; } .content[data-section=materials] .material-request-card .material-file { padding: 12px; } .content[data-section=materials] .material-request-card .deadline-adjustment form { grid-template-columns: minmax(0, 1fr); } .sidebar .wordmark { font-size: 1.8rem; } } @media (forced-colors: active) { .content[data-section=materials] .material-request-card { border-color: CanvasText; background: Canvas; } .content[data-section=materials] .material-deadline { border-color: CanvasText; color: CanvasText; background: Canvas; } .content[data-section=materials] .material-deadline small { color: CanvasText; } } /* Open Design dashboard composition, original AVALIN navy / ice / mint palette. */ .shell .sidebar .wordmark { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 2.45rem; letter-spacing: -.065em; font-weight: 850; color: var(--text); } .shell .wordmark span { display: none; } .shell .sidebar { backdrop-filter: none; } .shell .sidebar > .project-navigation a { border-radius: var(--radius-xs); min-height: 44px; transition: color 160ms ease, background-color 160ms ease; } .shell .sidebar > .project-navigation a[aria-current=page] { background: color-mix(in srgb, var(--brand-primary) 9.4118%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 17.2549%, transparent); box-shadow: inset 2px 0 var(--brand-secondary); } .shell .content { padding-top: 22px; } .shell .workspace-topbar { margin-bottom: 26px; padding-bottom: 20px; font-size: .7rem; } .shell .workspace-label { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .shell .project { min-height: 220px; } .shell .project h2 { margin-top: 28px; } .shell .project::after, .shell .hero-orbit { display: none; } .shell .readiness { padding: 30px; border-radius: var(--radius-md); } .shell .readiness-project { border: 0; padding: 0; } .shell .readiness-project h1 { max-width: 750px; font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.1; } .shell .readiness-project p { font-size: .84rem; } .shell .readiness-main { padding: 22px; border: 1px solid color-mix(in srgb, var(--brand-primary) 14.5098%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ui-166) 26.6667%, transparent); } .shell .readiness-main .eyebrow { margin-bottom: 8px; } .shell .readiness-main h2 { font-size: .76rem; } .shell .readiness-progress { background: transparent; padding: 0; border: 0; margin: 0; } .shell .readiness-main .progress-value { font-size: 3.8rem; } .shell .readiness-action { gap: 15px; padding-top: 20px; } .shell .readiness-action .action-note-copy h2 { font-size: .9rem; } .shell .readiness-action .action-note-copy p { font-size: .76rem; } .shell .overview-metrics { border-radius: var(--radius-sm); } .shell .overview-metrics .metric { padding: 22px; } .shell .metric strong { font-size: 2.5rem; font-weight: 550; } .shell .materials-list { padding: 26px 26px 8px; overflow: hidden; } .shell .materials-list > h2 { margin-bottom: 6px; } .shell .materials-list > .muted { font-size: .82rem; } .materials-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 0; padding: 15px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .materials-filters { display: flex; flex-wrap: wrap; gap: 5px; } .materials-filters button { min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-xs); font-size: .74rem; color: var(--muted); background: transparent; transition: background-color 160ms ease, color 160ms ease; } .materials-filters button[aria-pressed=true] { color: var(--mint); background: color-mix(in srgb, var(--brand-primary) 7.0588%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 12.549%, transparent); font-weight: 600; } .materials-search { flex: 0 1 250px; } .materials-search input { min-height: 40px; padding: 9px 12px; font-size: .76rem; } .materials-result { margin: 12px 0; font-size: .7rem; color: var(--muted); } .shell .content[data-section=materials] .material-request-card { margin: 0; padding: 22px 0 22px 16px; border: 0; border-bottom: 1px solid var(--border); border-left: 2px solid var(--request-tone); border-radius: 0; background: transparent; box-shadow: none; gap: 18px; } .shell .content[data-section=materials] .material-request-card:last-of-type { border-bottom: 0; } .shell .content[data-section=materials] .material-row-copy h3 { font-size: .96rem; letter-spacing: -.01em; } .shell .content[data-section=materials] .material-purpose { font-size: .8rem; } .shell .content[data-section=materials] .material-row-meta { font-size: .72rem; } .shell .content[data-section=materials] .material-deadline { padding: 8px 11px; border-radius: var(--radius-xs); } .shell .content[data-section=materials] .material-card-actions > button { min-height: 40px; font-size: .74rem; } .shell .content[data-section=materials] .material-status { color: var(--muted); background: transparent; border: 0; padding: 0; } .shell .content[data-section=materials] .material-row-side { gap: 8px 14px; } .shell .content[data-section=materials] .material-details-slot:not(:empty) { border-color: var(--border); } .section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; } .section-head h2 { margin-bottom: 0; } .section-head .eyebrow { margin: 0 0 7px; display: block; } .project-deadlines { margin: 22px 0; } .project-administration { margin-bottom: 28px; } .project-administration button, .project-deadlines button { min-height: 44px; padding: 10px 15px; border-radius: var(--radius-xs); border: 1px solid color-mix(in srgb, var(--ink) 12.549%, transparent); color: var(--ui-912); background: color-mix(in srgb, var(--ink) 1.1765%, transparent); font-size: .78rem; } .project-administration button[type=submit], .project-deadlines button[type=submit] { color: var(--on-accent); background: var(--accent); border-color: transparent; font-weight: 600; } .deadline-date-grid { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 20px; } .deadline-date-grid > div { padding: 2px 20px 2px 0; border-right: 1px solid var(--border); } .deadline-date-grid > div:last-child { border: 0; padding-right: 0; } .deadline-date-grid span { display: block; font-size: .73rem; color: var(--muted); margin-bottom: 10px; } .deadline-date-grid strong { font-size: clamp(1.1rem, 1.7vw, 1.65rem); letter-spacing: -.025em; font-weight: 550; font-variant-numeric: tabular-nums; } .deadline-date-grid .is-delayed strong { color: var(--sem-orange-842); } .deadline-causes { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 18px; } .deadline-causes > p, .project-deadlines > .muted { font-size: .79rem; } .deadline-causes ul, .deadline-history ul { padding: 0; list-style: none; margin: 0; } .deadline-causes li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; } .deadline-causes li > div { min-width: 0; } .deadline-causes li > span { white-space: nowrap; color: var(--sem-orange-842); font-size: .78rem; } .deadline-causes small { display: block; color: var(--muted); font-size: .72rem; } .project-deadlines .text-button { padding: 0; background: transparent; border: 0; min-height: 36px; text-align: left; font-weight: 600; color: var(--mint); } .deadline-history { margin-top: 14px; border-top: 1px solid var(--border); } .deadline-history li { font-size: .75rem; color: var(--muted); padding: 9px 0; border-top: 1px solid var(--border); } .deadline-edit-form, .project-create-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border); } .deadline-edit-form label, .project-create-form label { display: grid; gap: 8px; font-size: .78rem; align-content: start; } .project-create-form > :is(p,details,div), .project-create-form label:has(textarea), .project-create-form > button { grid-column: 1 / -1; } .project-create-form details label { margin: 10px 0; } .project-deadlines [role=alert] { color: var(--sem-red-867); font-size: .82rem; } @media (min-width: 1150px) { .shell .readiness:has(.readiness-main) { grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; } .shell .readiness-project { grid-column: 1; grid-row: 1; } .shell .readiness-main { grid-column: 2; grid-row: 1; } .shell .readiness-action { grid-column: 1 / -1; } .shell .content[data-section=materials] .material-request-card { grid-template-columns: minmax(0, 1fr) 285px; } } @media (max-width: 1149px) { .shell .readiness-main { margin-bottom: 20px; } .shell .readiness-main .progress-value { font-size: 2.8rem; } } @media (max-width: 760px) { .shell .sidebar { padding: 16px 18px; } .shell .sidebar .wordmark { font-size: 1.95rem; } .shell .sidebar > .project-navigation a[aria-current=page] { background: transparent; box-shadow: none; } .shell .content { padding: 20px 16px 116px; } .shell .workspace-topbar { margin-bottom: 18px; font-size: .62rem; } .shell .readiness { padding: 22px; border-radius: var(--radius-sm); } .shell .readiness-main { padding: 16px; } .shell .readiness-project h1 { font-size: 2rem; } .shell .readiness-action { margin-top: 18px; } .shell .overview-metrics .metric { padding: 16px; } .shell .metric strong { font-size: 1.8rem; } .shell .materials-list { padding: 20px 16px 0; } .materials-controls { align-items: stretch; flex-direction: column; gap: 10px; } .materials-search { flex: 0 0 auto; } .materials-search input { max-width: none; } .materials-filters button { min-height: 44px; padding: 8px 10px; } .shell .content[data-section=materials] .material-request-card { padding: 18px 0 18px 12px; } .shell .content[data-section=materials] .material-row-side { grid-template-columns: minmax(0, 1fr) auto; } .shell .content[data-section=materials] .material-card-actions { grid-column: 1 / -1; } .shell .content[data-section=materials] .material-card-actions > button { min-height: 44px; } .deadline-date-grid { grid-template-columns: 1fr; gap: 14px; } .deadline-date-grid > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--border); } .deadline-date-grid span { margin: 0; font-size: .73rem; } .deadline-date-grid strong { font-size: 1rem; text-align: right; } .deadline-edit-form, .project-create-form { grid-template-columns: 1fr; } .project-deadlines { margin: 14px 0; } } @media (hover: none) { .shell .project:hover { transform: none; } } @media (prefers-reduced-motion: no-preference) { .shell button:active:not(:disabled) { transform: scale(.98); } .shell .request-reveal { animation-duration: .2s; } } @media (forced-colors: active) { .shell :is(.panel,.quiet,.primary,.tag,.material-request-card,.material-deadline,.readiness-main,.materials-filters button) { background: Canvas; color: CanvasText; border-color: CanvasText; } .shell .sidebar > .project-navigation a[aria-current=page] { background: Highlight; color: HighlightText; } } .feature-host:empty { display: none; } .project-metadata { margin: 0 0 24px; } .project-metadata form { display: grid; gap: 15px; max-width: 720px; margin-top: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-metadata label { display: grid; gap: 8px; font-size: .8rem; } .project-metadata form > button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--radius-xs); background: var(--accent); color: var(--on-accent); font-weight: 600; } .shell .screen-enter, .shell .overview-screen, .shell .projects { animation-duration: .22s; } .shell .request-reveal.is-closing, .confirm-dialog.is-closing { animation-timing-function: cubic-bezier(.23,1,.32,1); } @media (max-width: 1149px) { .shell .readiness-project { margin-top: 0; padding-top: 0; } } /* Unknown progress is a compact state, never a dominant numeric metric. */ .shell .progress-display[data-known=false] .progress-value { font-size: 1.3rem; letter-spacing: -.025em; color: var(--muted); } .shell .readiness-main:has(.progress-display[data-known=false]) { padding: 18px; } .shell .readiness-main .progress-display[data-known=false] .muted { font-size: .72rem; line-height: 1.55; } /* Upload telemetry: actual byte progress, separate preparation and verification. */ .upload-progress-panel { grid-column: 1 / -1; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ui-166) 66.6667%, transparent); } .upload-progress-panel[hidden] { display: none; } .upload-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .upload-progress-phase { display: inline-flex; align-items: center; gap: 10px; color: var(--ui-912); font-size: .8rem; font-weight: 600; } .upload-progress-phase::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-secondary) 7.0588%, transparent); } .upload-progress-percent { color: var(--mint); font-size: 1.55rem; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .upload-form .upload-progress-panel .upload-progress-track { display: block; width: 100%; height: 7px; margin: 15px 0 13px; border: 0; border-radius: var(--radius-2xs); overflow: hidden; accent-color: var(--brand-secondary); background: color-mix(in srgb, var(--brand-primary) 8.2353%, transparent); } .upload-progress-track::-webkit-progress-bar { background: color-mix(in srgb, var(--brand-primary) 8.2353%, transparent); border-radius: var(--radius-2xs); } .upload-progress-track::-webkit-progress-value { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius: var(--radius-2xs); } .upload-progress-track::-moz-progress-bar { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border-radius: var(--radius-2xs); } .upload-progress-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 18px; color: var(--muted); font-size: .72rem; line-height: 1.5; font-variant-numeric: tabular-nums; } .upload-progress-bytes { margin-right: auto; } .upload-progress-details span:empty { display: none; } .upload-progress-panel[data-phase=paused] .upload-progress-phase::before { background: var(--sem-amber-879); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sem-amber-879) 7.0588%, transparent); } .upload-progress-panel[data-phase=failed] { border-color: color-mix(in srgb, var(--sem-red-799) 26.6667%, transparent); } .upload-progress-panel[data-phase=failed] .upload-progress-phase::before { background: var(--sem-red-799); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sem-red-799) 7.0588%, transparent); } .upload-progress-panel:is([data-phase=connecting],[data-phase=verifying]) .upload-progress-percent { font-size: .83rem; letter-spacing: 0; } @media (prefers-reduced-motion: no-preference) { .upload-progress-panel:is([data-phase=preparing],[data-phase=connecting],[data-phase=uploading],[data-phase=verifying]) .upload-progress-phase::before { animation: upload-alive 1.4s ease-in-out infinite alternate; } @keyframes upload-alive { from { opacity: .4; } to { opacity: 1; } } } @media (max-width: 760px) { .upload-progress-panel { padding: 16px; } .upload-progress-head { gap: 10px; } .upload-progress-percent { font-size: 1.35rem; } .upload-progress-phase { font-size: .76rem; } .upload-progress-bytes { flex-basis: 100%; } } @media (forced-colors: active) { .upload-progress-panel { background: Canvas; border-color: CanvasText; } .upload-progress-panel :is(.upload-progress-phase,.upload-progress-percent,.upload-progress-details) { color: CanvasText; } .upload-progress-phase::before { background: CanvasText; box-shadow: none; } } /* Simple document register: the original navy / ice / mint palette. */ .documents-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; } .documents-heading p { margin:6px 0 0; } .document-editor { grid-column:1/-1; display:grid; gap:14px; padding:20px; margin:16px 0; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); } .document-editor h3 { margin:0; } .document-editor .field { display:grid; gap:6px; } .document-editor input,.document-editor textarea { width:100%; min-width:0; box-sizing:border-box; } .document-editor .document-date { max-width:240px; } .document-editor-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .material-detail-compact .upload-format-details { font-size:12px; } .material-detail-compact .upload-form { padding-top:12px; } .material-detail-compact .upload-form > h4 { margin-top:0; } .material-row-copy .material-purpose:empty { display:none; } @media(max-width:640px) { .documents-heading { align-items:stretch; flex-direction:column; } .document-editor { padding:14px; } } .shell .document-page-header { margin-bottom: 22px; } .shell .document-page-header h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; } @media (max-width: 640px) { .shell .document-page-header { margin-bottom: 18px; } .shell .materials-filters { gap: 4px; } .shell .materials-filters button { padding: 8px 9px; min-height: 44px; font-size: .73rem; } } /* Keep document timing anchored to the title, with a separate action row. */ .shell .content[data-section=materials] .material-request-card { align-items: start; } .shell .content[data-section=materials] .material-row-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; align-self: start; gap: 6px; max-width: none; } .shell .content[data-section=materials] .material-row-side > .material-deadline { order: 0; } .shell .content[data-section=materials] .material-row-side > .material-status { order: 1; align-self: flex-end; text-align: right; } .shell .content[data-section=materials] .material-row-side > .material-card-actions { order: 2; gap: 12px; margin-top: 10px; } @media (max-width: 1100px) { .shell .content[data-section=materials] .material-row-side { align-items: flex-start; } .shell .content[data-section=materials] .material-row-side > .material-deadline, .shell .content[data-section=materials] .material-row-side > .material-status { text-align: left; } .shell .content[data-section=materials] .material-row-side > .material-status { align-self: flex-start; } .shell .content[data-section=materials] .material-row-side > .material-card-actions { justify-content: flex-start; } } /* Sequential multi-file queue; one verified multipart upload at a time. */ .upload-queue{display:grid;gap:12px;padding:14px 0;border-block:1px solid var(--border)} .upload-queue[hidden]{display:none} .upload-queue-summary{margin:0;font-size:13px;font-weight:600} .upload-queue>progress{width:100%;height:6px;accent-color:var(--mint)} .upload-queue-list{display:grid;gap:0;margin:0;padding:0;list-style:none;max-height:240px;overflow:auto} .upload-queue-item{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:flex-start} .upload-queue-item strong{min-width:0;overflow-wrap:anywhere;font-weight:500} .upload-queue-item>span{flex:0 0 auto;color:var(--muted);max-width:55%;text-align:right} .upload-queue-item[data-state=completed]>span{color:var(--mint)} .upload-queue-item[data-state=failed]>span{color:var(--sem-red-799)} .upload-queue>.quiet{justify-self:start} @media(max-width:480px){.upload-queue-item{gap:10px}.upload-queue-item>span{max-width:50%}} /* Client roadmap: measured progress and a separate activity cue. */ .stage-card { isolation: isolate; } .stage-charge { position: absolute; top: 0; left: -2px; width: 3px; background: linear-gradient(var(--ice, var(--brand-primary)), var(--mint)); box-shadow: 0 0 12px color-mix(in srgb, var(--brand-secondary) 40%, transparent); transition: height .7s cubic-bezier(.22,1,.36,1); z-index: -1; } .stage-charge[data-known=false] { height: 100%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand-secondary) 53.3333%, transparent), transparent); background-size: 100% 250%; animation: roadmap-current 3s linear infinite; opacity: .3; } .stage-card[data-active=true] .stage-charge[data-known=false] { opacity: 1; } .stage-card[data-active=true]::before { animation: roadmap-beacon 2.4s ease-in-out infinite; } .stage-card[data-state=completed]::before { background: var(--mint); box-shadow: 0 0 0 5px var(--sem-green-315), 0 0 18px color-mix(in srgb, var(--brand-secondary) 53.3333%, transparent); } .progress-display progress:not([value]) { width: 100%; height: 8px; border: 0; border-radius: var(--radius-xs); overflow: hidden; background: color-mix(in srgb, var(--brand-primary) 9.4118%, transparent); } .progress-display progress:not([value])::-webkit-progress-bar { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-secondary) 60%, transparent), transparent) 0 0 / 220% 100%; animation: progress-current 2.8s linear infinite; } .progress-caption { margin-top: 12px; } .shell .content[data-section=materials] .material-request-card { align-items: start; } .shell .content[data-section=materials] .material-row-copy > .material-status { display: inline-flex; margin: 0 0 10px; font-size: .72rem; } .shell .content[data-section=materials] .material-row-side { margin-top: -8px; } .shell .content[data-section=materials] .material-row-side > .material-card-actions { margin-top: 16px; } .shell .request-reveal { animation: none; overflow: hidden; } .request-reveal > div { display: flow-root; } .material-files:empty { display: none; } @keyframes roadmap-current { from { background-position: 0 100%; } to { background-position: 0 -100%; } } @keyframes roadmap-beacon { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-secondary) 8.6275%, transparent), 0 0 22px color-mix(in srgb, var(--brand-secondary) 66.6667%, transparent); } } @keyframes progress-current { from { background-position: 220% 0; } to { background-position: -220% 0; } } @media (max-width: 760px) { .shell .content[data-section=materials] .material-row-side { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .stage-charge, .stage-card[data-active=true]::before, .progress-display progress:not([value])::-webkit-progress-bar { animation: none; transition: none; } } .stage-card[data-active=true] .stage-charge[data-known=true] { background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary), var(--ui-979), var(--brand-secondary)); background-size: 100% 250%; animation: roadmap-current 3s linear infinite; } @media (prefers-reduced-motion: reduce) { .stage-card[data-active=true] .stage-charge[data-known=true] { animation: none; } } @media (max-width: 760px) { .shell .content[data-section=materials] .material-request-card { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .shell .content[data-section=materials] .material-row-copy, .shell .content[data-section=materials] .material-row-side { display: contents; } .shell .content[data-section=materials] .material-row-copy > .material-status { grid-column: 1; grid-row: 1; align-self: start; margin: 0; } .shell .content[data-section=materials] .material-row-side > .material-deadline { grid-column: 2; grid-row: 1; text-align: right; max-width: 165px; } .shell .content[data-section=materials] .material-row-copy > h3 { grid-column: 1 / -1; grid-row: 2; } .shell .content[data-section=materials] .material-purpose { grid-column: 1 / -1; grid-row: 3; } .shell .content[data-section=materials] .material-row-side > .material-card-actions { grid-column: 1 / -1; grid-row: 4; margin-top: 0; } } .progress-activity { height: 8px; margin: 16px 0 10px; overflow: hidden; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--brand-primary) 9.4118%, transparent); } .progress-activity > span { display: block; width: 28%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--brand-secondary), transparent); animation: activity-travel 3s ease-in-out infinite; } @keyframes activity-travel { from { transform: translateX(-100%); } to { transform: translateX(360%); } } @media (prefers-reduced-motion: reduce) { .progress-activity > span { animation: none; transform: translateX(120%); } } .progress-task-count { display: block; margin-top: 8px; } /* Dedicated owner workspace: project creation. */ .project-create-page { max-width: 1050px; margin: 0 auto; } .project-create-page > .header { margin-bottom: 30px; } .project-create-page .project-create-form { display: block; margin: 0; padding: 30px; border: 1px solid var(--border); } .project-create-section { min-width: 0; margin: 0 0 30px; padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; } .project-create-section legend { float: left; width: 100%; margin-bottom: 4px; font-size: 1.16rem; font-weight: 600; } .project-create-section legend span { color: var(--mint); font-size: .76rem; margin-right: 12px; font-variant-numeric: tabular-nums; } .project-create-section > :is(legend,p), .project-create-section > label:has(textarea), .project-create-section:nth-of-type(2) > label { grid-column: 1 / -1; } .project-create-section > p { margin: 0; font-size: .8rem; } .project-create-section input, .project-create-section textarea, .project-create-section select { width: 100%; min-width: 0; } .project-create-summary { padding: 20px; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--brand-secondary) 14.902%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-secondary) 3.1373%, transparent); } .project-create-summary strong { color: var(--mint); font-size: .9rem; } .project-create-summary p { margin: 8px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.6; } .project-create-actions { display: flex; justify-content: flex-end; gap: 12px; } .project-create-actions button[type=submit] { min-width: 180px; } @media(max-width:760px) { .project-create-page .project-create-form { padding: 20px; } .project-create-section { grid-template-columns: minmax(0,1fr); gap: 16px; } .project-create-actions { flex-wrap: wrap; } .project-create-actions button { flex: 1; } .shell .sidebar > nav[aria-label="Основная навигация"] a { white-space: nowrap; } } .document-editor .document-date { max-width: 300px; } .document-date-help { font-size: .78rem; line-height: 1.6; margin: 0; } .document-acceptance-fact { padding: 16px; border: 1px solid color-mix(in srgb, var(--brand-secondary) 18.8235%, transparent); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--brand-secondary) 3.1373%, transparent); } .document-acceptance-fact strong { font-size: .8rem; color: var(--mint); } .document-acceptance-fact p { margin: 8px 0; font-variant-numeric: tabular-nums; } /* Editable contract scope, independent of source task percentages. */ .scope-editor { border: 0; padding: 0; min-width: 0; } .scope-item { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--line, var(--ui-380)); border-radius: var(--radius-md); transition: background-color .4s, border-color .4s; } .scope-item[data-completed="true"] { border-color: var(--sem-green-807); background: color-mix(in srgb, var(--sem-green-807) 7%, transparent); } .scope-item-fields { display: grid; grid-template-columns: 100px 100px 1fr; gap: .75rem; } .project-scope label { display: block; margin-bottom: .7rem; } .project-scope input:not([type="checkbox"]), .project-scope textarea { display: block; width: 100%; } .scope-completed input { width: auto; } .scope-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: .7rem; } .scope-progress { height: 10px; overflow: hidden; background: var(--accent-332); border-radius: var(--radius-xs); } .scope-progress span { display: block; height: 100%; background: linear-gradient(90deg,var(--accent-743),var(--accent-845)); transition: width .65s ease; } @media(max-width: 600px) { .scope-item-fields { grid-template-columns: 1fr 1fr; } .scope-item-fields label:last-child { grid-column: 1 / -1; } } @media(prefers-reduced-motion: reduce) { .scope-item, .scope-progress span { transition: none; } } /* Contract checklist at project creation. */ .base-kit-preview { min-width: 0; } .base-kit-preview summary { cursor: pointer; font-weight: 600; line-height: 1.5; } .base-kit-list { display: grid; margin-top: 1rem; } .project-create-form .base-kit-receipt-row { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--border, var(--accent-349)); } .project-create-form .base-kit-receipt-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; margin-top: .2rem; } .base-kit-receipt-row span { display: grid; gap: .35rem; min-width: 0; overflow-wrap: anywhere; } .base-kit-receipt-row small { color: var(--muted, var(--ui-753)); } /* Project schedule: one scroll surface, frozen work column, shared calendar. */ .gantt-panel { min-width: 0; width: 100%; margin-top: 4px; } .gantt-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 0 20px; } .gantt-heading .eyebrow { font-size:10px; letter-spacing:.16em; margin:0 0 6px; } .gantt-heading h2 { margin:0; font-size:26px; letter-spacing:-.04em; } .gantt-heading-right { display:flex; gap:20px; align-items:center; } .gantt-readiness { display:flex; align-items:center; position:relative; gap:10px; padding-bottom:8px; } .gantt-readiness strong { font-size:25px; line-height:1.1; font-weight:600; } .gantt-readiness span { display:block; font-size:11px; } .gantt-readiness small { display:block; color:var(--ui-757); font-size:10px; margin-top:3px; } .gantt-readiness progress { position:absolute; width:100%; height:3px; bottom:0; margin:0; } .gantt-sync { font-size:24px; min-width:40px; width:40px; padding:0; } .gantt-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border:1px solid var(--ui-401); border-bottom:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:12px; background:var(--ui-247); } .gantt-search { display:flex; gap:8px; align-items:center; min-width:170px; flex:1; max-width:300px; border:1px solid var(--ui-431); background:var(--ui-217a); border-radius:var(--radius-xs); padding:0 10px; } .gantt-search > span { font-size:21px; color:var(--ui-781); } .gantt-search input { min-width:0; width:100%; border:0; background:transparent; border-radius:0; padding:8px 0; min-height:34px; font-size:12px; outline-offset:2px; } .gantt-filter select { margin:0; min-height:36px; font-size:12px; padding:7px 28px 7px 10px; background:var(--ui-266); } .gantt-toolbar-end { display:flex; align-items:center; gap:10px; margin-left:auto; } .gantt-toolbar button, .gantt-options button { min-height:34px; padding:6px 10px; font-size:11px; border-radius:var(--radius-xs); } .gantt-scales { display:flex; padding:3px; border:1px solid var(--ui-426); border-radius:var(--radius-xs); background:var(--ui-221); } .gantt-scales button { border:0; min-height:28px; padding:4px 10px; background:transparent; color:var(--ui-793); } .gantt-scales button[aria-pressed=true] { color:var(--ui-972); background:var(--accent-432); box-shadow:0 1px 3px color-mix(in srgb, var(--black) 33.3333%, transparent); } .gantt-options { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:5px 12px; background:var(--ui-977); color:var(--accent-518); border-left:1px solid var(--ui-898); border-right:1px solid var(--ui-898); font-size:10px; } .gantt-options > div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gantt-options > div:last-child { gap:2px; } .gantt-options button { color:var(--accent-491); border:0; background:transparent; font-size:10px; min-height:32px; } .gantt-options button:hover, .gantt-options button[aria-pressed=true] { background:var(--ui-933); } .gantt-legend { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .gantt-legend i { width:7px; height:7px; border-radius:var(--radius-2xs); background:var(--accent-616); } .gantt-legend.complete i { background:var(--sem-green-630); } .gantt-legend.blocked i { background:var(--sem-red-664); } .gantt-scroll { position:relative; isolation:isolate; overflow:auto; overscroll-behavior:contain; width:100%; max-width:100%; height:clamp(320px,calc(100dvh - 370px),720px); border:1px solid var(--ui-889); background:var(--ui-984); color:var(--accent-347a); scrollbar-color:var(--ui-771) var(--ui-959); scrollbar-width:thin; } .gantt-scroll:focus-visible { outline:2px solid var(--accent-800); outline-offset:3px; } .gantt-table { border-collapse:separate; border-spacing:0; table-layout:fixed; max-width:none; margin:0; font-size:12px; } .gantt-table caption, .gantt-panel .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .gantt-table th, .gantt-table td { padding:0; height:46px; border:0; border-bottom:1px solid var(--ui-925); text-align:left; box-sizing:border-box; } .gantt-table thead th { height:56px; position:sticky; top:0; z-index:5; background:var(--ui-967); color:var(--accent-535); font-weight:500; box-shadow:0 1px 0 var(--ui-894); } .gantt-table .gantt-frozen { position:sticky; left:0; width:var(--gantt-frozen); min-width:var(--gantt-frozen); max-width:var(--gantt-frozen); z-index:3; background:var(--ui-987); box-shadow:1px 0 0 var(--ui-884),4px 0 7px color-mix(in srgb, var(--accent-350) 6.2745%, transparent); } .gantt-table thead .gantt-frozen { z-index:8; padding:9px 14px; background:var(--ui-965); } .gantt-table thead .gantt-frozen > span { display:block; font-size:11px; color:var(--accent-406); font-weight:600; } .gantt-table thead .gantt-frozen small { display:block; margin-top:3px; font-size:10px; color:var(--accent-616a); } .gantt-table .gantt-status-column { position:sticky; left:var(--gantt-frozen); width:100px; min-width:100px; background:var(--ui-987); z-index:2; padding:0 8px; font-size:10px; } .gantt-table .gantt-dates-column { position:sticky; left:calc(var(--gantt-frozen) + 100px); width:140px; min-width:140px; z-index:2; background:var(--ui-987); padding:0 10px; box-shadow:1px 0 0 var(--ui-884); font-size:10px; } .gantt-table .gantt-dates-column span { display:block; } .gantt-table .gantt-dates-column span + span { color:var(--ui-626); margin-top:2px; } .gantt-table thead .gantt-status-column, .gantt-table thead .gantt-dates-column { z-index:7; background:var(--ui-965); } .gantt-task, .gantt-group-toggle { width:100%; height:45px; min-height:45px; display:flex; align-items:center; gap:8px; border:0; border-radius:0; padding:0 12px 0 22px; color:var(--accent-404); background:transparent; text-align:left; font-size:11px; font-weight:400; box-shadow:none; } .gantt-task:hover, .gantt-group-toggle:hover { background:var(--ui-947); } .gantt-task:focus-visible, .gantt-group-toggle:focus-visible, .gantt-bar:focus-visible { outline:2px solid var(--accent-517); outline-offset:-3px; } .gantt-task-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; } .gantt-status-dot { width:6px; height:6px; background:var(--accent-659); border-radius:50%; flex:none; } .gantt-status-dot.complete { background:var(--sem-green-568); } .gantt-status-dot.blocked { background:var(--sem-red-605); } .gantt-doc-count { flex:none; color:var(--ui-595); font-size:10px; } .gantt-table .gantt-stage-row .gantt-frozen, .gantt-stage-row .gantt-track { background-color:var(--ui-961); } .gantt-group-toggle { padding-left:12px; font-weight:600; color:var(--accent-394); gap:7px; } .gantt-group-toggle > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gantt-group-toggle > span:first-child { font-size:18px; width:10px; flex:none; } .gantt-group-toggle small { margin-left:auto; background:var(--ui-922); min-width:22px; padding:2px 5px; text-align:center; border-radius:var(--radius-2xs); font-size:10px; color:var(--accent-533); } .gantt-table .is-selected .gantt-frozen { background:var(--ui-939); } .gantt-table .gantt-calendar-cell { padding:0; } .gantt-track { position:relative; height:45px; } .gantt-bar { position:absolute; top:8px; height:29px; min-height:29px; min-width:3px; max-width:none; padding:0 10px; border:1px solid var(--accent-621); border-radius:var(--radius-xs); background:linear-gradient(90deg,var(--accent-665),var(--accent-725)); color:var(--accent-294); box-shadow:0 1px 2px color-mix(in srgb, var(--accent-361) 8.6275%, transparent); text-align:left; font-size:10px; font-weight:500; overflow:hidden; white-space:nowrap; } .gantt-bar span { display:block; text-overflow:ellipsis; overflow:hidden; } .gantt-bar.is-complete { background:var(--sem-green-784); border-color:var(--sem-green-695); color:var(--sem-green-376); } .gantt-bar.is-blocked { background:var(--sem-orange-769); border-color:var(--sem-red-678); color:var(--sem-orange-364); } .gantt-bar.summary { top:16px; height:13px; min-height:13px; border-radius:var(--radius-2xs); background:var(--accent-409); border-color:var(--accent-409); color:transparent; padding:0; } .gantt-bar.summary span, .gantt-bar.summary small { display:none; } .gantt-no-dates { position:absolute; top:15px; left:16px; color:var(--ui-680); font-size:10px; font-style:italic; } .gantt-today { position:absolute; top:0; bottom:0; width:1px; background:var(--sem-orange-699); pointer-events:none; z-index:1; } .gantt-today > span { display:none; } .gantt-axis { position:relative; height:56px; } .gantt-months, .gantt-days { position:absolute; left:0; right:0; height:28px; } .gantt-months { top:0; } .gantt-days { top:28px; border-top:1px solid var(--ui-919); } .gantt-months span, .gantt-days span { position:absolute; top:0; height:28px; overflow:hidden; border-right:1px solid var(--ui-919); } .gantt-months span { font-size:11px; padding:7px 10px; text-transform:capitalize; color:var(--accent-451); } .gantt-days span { text-align:center; padding-top:7px; font-size:10px; color:var(--accent-641); } .gantt-days .weekend { background:var(--gantt-weekend); color:var(--ui-697); } .gantt-footer { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; padding:9px 12px; background:var(--ui-961); color:var(--accent-598); border:1px solid var(--ui-889); border-top:0; border-radius:0 0 var(--radius-xs) var(--radius-xs); font-size:10px; } .gantt-empty { padding:40px 20px !important; color:var(--accent-603); font-size:12px; } .gantt-drawer { position:fixed; inset:0 0 0 auto; margin:0; height:100dvh; max-height:100dvh; width:440px; max-width:100vw; padding:24px; border:0; border-left:1px solid var(--accent-476); border-radius:0; color:var(--ui-932); background:var(--ui-250); box-shadow:-16px 0 80px color-mix(in srgb, var(--ui-174) 40%, transparent); overflow:auto; } .gantt-drawer::backdrop { background:color-mix(in srgb, var(--ui-172) 40%, transparent); backdrop-filter:blur(2px); } .gantt-drawer > header { display:flex; align-items:center; justify-content:space-between; gap:20px; } .gantt-drawer > header button { padding:0; min-width:36px; } .gantt-drawer h3 { margin:24px 0 16px; font-size:23px; line-height:1.3; overflow-wrap:anywhere; } .gantt-task-badge { display:inline-block; border-radius:var(--radius-2xs); padding:5px 8px; font-size:11px; color:var(--accent-851); background:var(--accent-385); } .gantt-task-badge.complete { color:var(--sem-green-853); background:var(--sem-green-393); } .gantt-task-badge.blocked { color:var(--sem-orange-832); background:var(--sem-red-385); } .gantt-task-dates { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:20px 0; margin:10px 0 20px; border-bottom:1px solid var(--accent-399); } .gantt-task-dates dt { color:var(--accent-720); font-size:11px; } .gantt-task-dates dd { font-size:13px; margin:6px 0 0; } .gantt-drawer h4 { display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 14px; } .gantt-drawer h4 > span { color:var(--accent-753); font-size:11px; font-weight:400; } .gantt-document-cards { list-style:none; margin:0; padding:0; display:grid; gap:10px; } .gantt-document-cards li { padding:14px; border:1px solid var(--accent-421); background:var(--accent-289); border-radius:var(--radius-xs); } .gantt-document-cards a { display:block; margin:8px 0; color:var(--ui-921); font-size:13px; font-weight:500; overflow-wrap:anywhere; } .gantt-document-cards p { font-size:11px; color:var(--accent-745); margin:0; } .gantt-document-state { font-size:10px; color:var(--sem-amber-790); } .gantt-document-state.accepted { color:var(--sem-green-831); } .gantt-document-state.overdue, .gantt-document-state.needs_changes { color:var(--sem-orange-810); } .gantt-editor { margin-top:24px; padding-top:18px; border-top:1px solid var(--accent-422); } .gantt-editor summary { font-size:13px; } .gantt-editor label { display:flex; flex-direction:column; gap:6px; margin:12px 0; font-size:12px; } .gantt-editor form { display:block; } .gantt-editor select, .gantt-editor input { width:100%; min-width:0; max-width:100%; font-size:12px; } .gantt-editor ul { padding:0; list-style:none; } .gantt-editor li { margin:20px 0 0; border-top:1px solid var(--accent-422); padding-top:15px; font-size:12px; overflow-wrap:anywhere; } .gantt-editor li button { min-height:34px; font-size:11px; margin-right:6px; } @media(max-width:760px) { .project-navigation[data-section=gantt] .nav-indicator { transform:translateX(200%); } .gantt-heading { gap:12px; padding-bottom:14px; align-items:flex-start; } .gantt-heading h2 { font-size:22px; } .gantt-heading-right { gap:7px; } .gantt-readiness { gap:7px; } .gantt-readiness strong { font-size:21px; } .gantt-readiness div { display:none; } .gantt-toolbar { padding:9px; gap:8px; } .gantt-search { max-width:none; min-width:135px; } .gantt-toolbar-end { width:100%; justify-content:space-between; } .gantt-options { padding:5px 8px; } .gantt-options > div { gap:9px; } .gantt-options > div:last-child { gap:0; } .gantt-columns-toggle, .gantt-compact-toggle { display:none; } .gantt-scroll { height:clamp(300px,calc(100dvh - 440px),600px); } .gantt-footer { font-size:9px; } .gantt-footer span:last-child { display:none; } .gantt-task { padding-left:15px; } .gantt-drawer { inset:50px 0 0; height:calc(100dvh - 50px); max-height:calc(100dvh - 50px); width:100vw; max-width:100vw; padding:20px; border:1px solid var(--accent-476); border-radius:var(--radius-md) var(--radius-md) 0 0; } } @media(prefers-reduced-motion:reduce) { .gantt-panel *, .gantt-drawer { scroll-behavior:auto !important; transition:none !important; animation:none !important; } } .gantt-months span { white-space:nowrap; text-overflow:ellipsis; } .gantt-days span { overflow:visible; white-space:nowrap; } .gantt-legend.today i { width:1px; height:10px; background:var(--sem-orange-699); } .gantt-group-toggle em { display:block; color:var(--ui-643); font-weight:400; font-style:normal; font-size:9px; margin-top:2px; } @media(max-width:760px) { .gantt-heading { flex-wrap:wrap; } .gantt-heading-right { width:100%; justify-content:space-between; } .gantt-readiness div { display:block; } .gantt-readiness span { font-size:10px; } .gantt-readiness small { font-size:9px; } } #main[data-section=gantt] > .back { margin-bottom:10px; font-size:11px; min-height:28px; } .gantt-project-header { margin-bottom:18px; padding:0; } .gantt-project-header h1 { font-size:24px; line-height:1.2; margin:0; } @media(max-width:760px) { .gantt-project-header h1 { font-size:20px; } .gantt-project-header { margin-bottom:15px; } } .gantt-date-help { font-size:12px; color:var(--muted); margin:12px 0; } .gantt-bar[data-editable] { touch-action:none; cursor:grab; } .gantt-bar[data-editable]:active { cursor:grabbing; } .gantt-date-editor { padding:12px 0; } .gantt-date-editor form { display:grid; gap:10px; } .gantt-date-editor label { display:grid; gap:4px; font-size:12px; } .gantt-date-editor input { width:100%; min-width:0; min-height:44px; } .gantt-date-editor button { min-height:44px; } .gantt-date-editor p, .gantt-date-editor li { font-size:12px; line-height:1.5; overflow-wrap:anywhere; } .gantt-table .gantt-dates-column:has(.gantt-date-editor) { width:250px; min-width:250px; position:static; } .gantt-table .gantt-date-editor { color:var(--accent-347a); } .gantt-table .gantt-date-editor input { background:var(--ink); color:var(--accent-347a); border-color:var(--ui-675); } .gantt-table .gantt-date-editor .quiet { color:var(--accent-347a); } .gantt-table .gantt-dates-column summary { cursor:pointer; padding:8px 0; } .gantt-date-editor details { overflow:visible; max-height:none; } .gantt-date-editor ol { margin:12px 0; padding-left:22px; } .gantt-date-editor li { height:auto; max-height:none; overflow:visible; white-space:normal; } .gantt-table .gantt-date-toggle { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; min-height:44px; height:44px; padding:0; background:transparent; color:var(--accent-347a); border:0; font-size:10px; box-shadow:none; } .gantt-table .gantt-date-toggle span + span { margin:0; font-size:16px; } .gantt-date-editor.compact form { grid-template-columns:1fr 1fr; gap:8px; } .gantt-date-editor.compact input { padding:6px; font-size:11px; } .gantt-date-editor.compact form > p { grid-column:1 / -1; } .gantt-date-editor.compact button { padding:6px; font-size:11px; } /* The paginated history must grow after each response without a clipped height transition. */ .gantt-date-editor details::details-content { transition:none; } .gantt-date-editor details[open]::details-content { display:flow-root; block-size:auto; overflow:visible; } @media(prefers-reduced-motion:reduce) { details::details-content { transition:none !important; animation:none !important; } } /* Keep the Gantt workspace tall; row density stays independent of viewport size. */ .shell .content[data-section=gantt] { padding-top:14px; padding-bottom:16px; } .shell .content[data-section=gantt] .workspace-topbar { display:none; } #main[data-section=gantt] > .back { margin-bottom:6px; } #main[data-section=gantt] .gantt-project-header { margin-bottom:10px; } .gantt-heading { padding-bottom:8px; } .gantt-heading .eyebrow { display:none; } .gantt-date-help { margin:4px 0 10px; } .gantt-date-help summary { width:fit-content; min-height:28px; padding:4px 0; cursor:pointer; } .gantt-date-help summary:focus-visible { outline:2px solid var(--mint); outline-offset:3px; } .gantt-date-help p { margin:4px 0 10px; } @media(max-width:760px) { .shell:has(.content[data-section=gantt]) { align-content:start; } .shell .content[data-section=gantt] { padding-bottom:96px; } .gantt-heading { gap:4px; } .gantt-heading-right { width:100%; } .gantt-toolbar { padding:6px; } .gantt-options { padding:2px 8px; } .gantt-date-help { margin:0 0 4px; } #main[data-section=gantt] .gantt-project-header { margin-bottom:6px; } } /* One work tree and one task card: keep unused canvas space below rows. */ .gantt-table { height:auto; min-height:0; } .gantt-table tbody { height:auto; } .gantt-table .gantt-task-row > * { height:44px; } .gantt-task-row .gantt-task, .gantt-task-row .gantt-track { height:43px; min-height:43px; } .gantt-table .gantt-stage-row > * { height:36px; } .gantt-stage-row .gantt-group-toggle, .gantt-stage-row .gantt-track { height:35px; min-height:35px; } .gantt-stage-row .gantt-bar.summary { top:12px; height:10px; min-height:10px; } .gantt-task { gap:6px; padding-left:14px; } .gantt-column-sticker { display:inline-block; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; border:1px solid var(--ui-844); border-radius:var(--radius-2xs); padding:3px 5px; background:var(--ui-944); color:var(--accent-429); font-size:9px; line-height:1.2; font-weight:400; } .gantt-tree-resizer { position:absolute; right:-4px; top:0; bottom:0; width:9px; cursor:col-resize; touch-action:none; z-index:10; } .gantt-tree-resizer:hover, .gantt-tree-resizer:focus-visible { background:color-mix(in srgb, var(--accent-526) 46.6667%, transparent); outline:2px solid var(--accent-526); outline-offset:-2px; } .gantt-drawer { width:520px; max-width:100vw; padding:12px 18px 18px; } .gantt-drawer h3 { margin:8px 0 10px; font-size:21px; line-height:1.25; } .gantt-drawer > header { min-height:36px; gap:12px; } .gantt-drawer > header .eyebrow { margin:0; } .gantt-drawer > header button { min-width:36px; min-height:36px; padding:6px; } .gantt-task-summary { margin:6px 0 0; color:var(--ui-797); font-size:12px; line-height:1.4; overflow-wrap:anywhere; } .gantt-card-tabs { display:flex; gap:3px; border-bottom:1px solid var(--accent-477); margin:12px 0 14px; padding-bottom:5px; } .gantt-card-tabs button { min-width:0; min-height:42px; flex:1; padding:8px 5px; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--ui-831); font-size:11px; } .gantt-card-tabs button[aria-selected=true] { background:var(--accent-410); color:var(--ui-981); } .gantt-card-tabs button:focus-visible { outline:2px solid var(--mint); outline-offset:1px; } .gantt-drawer [role=tabpanel][hidden] { display:none !important; } .gantt-drawer [role=tabpanel] { margin:0; padding:0; min-width:0; } .gantt-drawer .gantt-column-sticker { max-width:100%; font-size:12px; white-space:normal; background:var(--accent-332a); border-color:var(--accent-479); color:var(--ui-914); } .gantt-drawer::backdrop { background:color-mix(in srgb, var(--ui-172) 13.3333%, transparent); backdrop-filter:none; } #main[data-section=gantt] > .back { margin:0 0 4px; font-size:11px; } #main[data-section=gantt] .gantt-project-header { margin:0 0 4px; padding:0; } #main[data-section=gantt] .gantt-project-header h1 { font-size:18px; line-height:1.3; margin:0; } .gantt-heading { padding-bottom:4px; } .gantt-heading h2 { font-size:21px; margin:0; } .gantt-toolbar { padding:6px 8px; } .gantt-options { padding:1px 8px; } .gantt-footer { padding:6px 10px; } @media(min-width:1250px) { .gantt-panel.has-task-card { margin-right:500px; } .gantt-panel.has-task-card .gantt-heading { flex-wrap:wrap; } } @media(max-width:760px) { .gantt-drawer { width:100vw; padding:10px 14px 16px; } .gantt-tree-resizer { display:none; } .gantt-heading { flex-direction:row; align-items:center; flex-wrap:nowrap; } .gantt-heading-right { width:auto; } .gantt-heading h2 { font-size:20px; } .gantt-options > div:first-child { display:none; } .gantt-options > div:last-child { width:100%; justify-content:space-between; } .gantt-toolbar-end { gap:4px; } .gantt-footer { gap:3px; } .gantt-footer span:nth-child(2) { display:none; } } .gantt-column-path { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:12px 0 20px; list-style:none; } .gantt-column-path li { border:1px solid var(--accent-479a); border-radius:var(--radius-2xs); padding:6px 8px; color:var(--ui-824); font-size:12px; overflow-wrap:anywhere; } .gantt-column-path li[aria-current=step] { border-color:var(--accent-821); color:var(--accent-967); background:var(--accent-395); } .gantt-column-path li + li::before { content:"→ "; } .gantt-column-actions { display:flex; gap:8px; margin:12px 0; } .gantt-column-editor form { display:grid; gap:12px; margin:16px 0; } .gantt-column-editor label { display:grid; gap:8px; } .gantt-column-editor h4 { margin-top:22px; } @media(max-width:760px) { #main[data-section=gantt] .gantt-project-header { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .gantt-toolbar { gap:4px; } .gantt-toolbar-end { margin-top:0; } .gantt-toolbar .gantt-scales { padding:1px; } } .gantt-drawer .gantt-card-column { margin-left:8px; vertical-align:middle; } /* Work navigation lives in the same right task dialog. */ .gantt-workspace { min-width:0; width:100%; } .gantt-workspace > .gantt-scroll { width:100%; } .gantt-work-search { display:grid; gap:8px; margin:0 0 14px; } .gantt-work-search .gantt-search { max-width:none; } .gantt-work-search .gantt-filter select { width:100%; } .gantt-tree-scroll { overflow:auto; max-height:60dvh; border:1px solid var(--accent-408); border-radius:var(--radius-sm); background:var(--ui-228); color:var(--ui-924); overscroll-behavior:contain; scrollbar-color:var(--accent-490) var(--ui-228); scrollbar-width:thin; color-scheme:dark; } .gantt-tree-table { width:100%; min-width:0; height:auto; table-layout:fixed; border-collapse:separate; border-spacing:0; margin:0; } .gantt-tree-table th { padding:0; text-align:left; border:0; box-sizing:border-box; } .gantt-tree-table thead th { position:sticky; top:0; height:44px; padding:0 8px; z-index:3; background:var(--accent-284); box-shadow:0 1px 0 var(--accent-408); } .gantt-tree-actions { display:flex; align-items:center; min-height:44px; gap:6px; } .gantt-tree-actions button { min-height:44px; padding:6px 8px; border:0; color:var(--accent-870); background:transparent; font-size:11px; } .gantt-tree-task-row th { border-bottom:1px solid var(--accent-350a); background:var(--ui-228); } .gantt-tree-stage-row th { position:sticky; top:44px; z-index:2; min-height:44px; border-bottom:1px solid var(--accent-408); background:var(--accent-299); } .gantt-tree-task-row .gantt-task { min-height:70px; height:auto; padding:12px; color:var(--ui-932a); background:transparent; gap:10px; text-align:left; } .gantt-tree-task-row .gantt-task-title { white-space:normal; overflow-wrap:anywhere; } .gantt-tree-stage-row .gantt-group-toggle { height:auto; min-height:44px; color:var(--ui-909); background:transparent; padding:9px 12px; } .gantt-tree-stage-row .gantt-group-toggle em { color:var(--accent-787); } .gantt-tree-stage-row .gantt-group-toggle small { background:var(--accent-384); color:var(--ui-921a); } .gantt-tree-table .is-selected .gantt-tree-cell { background:var(--accent-333); box-shadow:inset 3px 0 var(--brand-secondary); } .gantt-tree-table .gantt-task:hover { background:var(--accent-299a); } .gantt-tree-table .gantt-task:focus-visible { outline:2px solid var(--brand-secondary); outline-offset:-3px; background:var(--accent-341); } .gantt-work-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; } .gantt-work-copy .gantt-task-title { display:block; flex:none; font-size:12px; line-height:1.45; font-weight:500; } .gantt-work-meta { color:var(--ui-791); font-size:10px; line-height:1.4; font-weight:400; } .gantt-work-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; margin:-4px 0 8px; color:var(--ui-810); font-size:11px; } .gantt-work-summary button { min-height:36px; padding:6px 8px; font-size:11px; } .gantt-tree-table .gantt-doc-count { color:var(--accent-897); background:var(--accent-365); } .gantt-task-row.is-selected .gantt-track { background-color:var(--ui-952); } .gantt-drawer .gantt-tree-table .gantt-column-sticker { font-size:10px; max-width:30%; padding:5px 7px; border:1px solid var(--accent-456); border-radius:var(--radius-xs); color:var(--accent-877a); background:var(--accent-339); white-space:normal; overflow-wrap:anywhere; } .gantt-scroll .gantt-no-dates { top:6px; left:12px; display:flex; align-items:center; gap:12px; max-width:calc(100% - 24px); height:31px; min-height:31px; padding:4px 9px; border:1px dashed var(--ui-814); border-radius:var(--radius-2xs); background:var(--ui-964); color:var(--accent-463); text-align:left; font-style:normal; } .gantt-no-dates span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gantt-no-dates small { color:var(--accent-603); font-size:9px; flex:none; } .gantt-calendar-group { position:sticky; left:8px; z-index:2; display:inline-flex; align-items:center; gap:8px; height:28px; min-height:28px; max-width:calc(100% - 16px); margin:3px 8px; padding:3px 8px; border:1px solid var(--ui-873a); border-radius:var(--radius-2xs); background:color-mix(in srgb, var(--ui-961) 92.9412%, transparent); color:var(--accent-394); font-size:11px; } .gantt-calendar-group span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gantt-calendar-group small { font-size:10px; color:var(--accent-533); } @media(max-width:760px) { .gantt-no-dates small { display:none; } .gantt-card-tabs { flex-wrap:wrap; } .gantt-card-tabs button { flex:1 1 28%; } } /* Readable inactive controls: preserve semantic disabled without fading the UI. */ button:disabled, button[disabled], .shell button:disabled { opacity:1; filter:none; color:var(--ui-824a); background:var(--accent-326); border-color:var(--accent-498); box-shadow:none; cursor:not-allowed; } input:disabled, select:disabled, textarea:disabled { opacity:1; filter:none; color:var(--ui-837); -webkit-text-fill-color:var(--ui-837); background:var(--ui-305); border-color:var(--accent-477a); cursor:not-allowed; } .gantt-column-path { display:flex; flex-wrap:nowrap; gap:0; overflow-x:auto; margin:12px 0 18px; padding:2px 0 8px; scrollbar-width:thin; } .gantt-column-path li { display:flex; align-items:center; gap:7px; flex:0 0 auto; max-width:180px; min-height:42px; margin-right:8px; padding:8px 10px; border:1px solid var(--accent-465); border-radius:var(--radius-xs); color:var(--ui-896); background:var(--accent-300); font-size:11px; line-height:1.35; } .gantt-column-path li + li::before { content:none; } .gantt-column-path li[aria-current=step] { border-color:var(--accent-796); background:var(--accent-383); color:var(--ui-979a); box-shadow:inset 0 -2px var(--accent-840); } .gantt-column-step { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--accent-400); color:var(--ui-895); font-size:10px; } .gantt-column-path [aria-current=step] .gantt-column-step { color:var(--accent-321); background:var(--accent-832); } .gantt-column-actions button { flex:1; } .gantt-availability { display:flex; gap:10px; padding:12px; border:1px solid var(--accent-497); border-radius:var(--radius-xs); background:var(--accent-336); color:var(--ui-859); font-size:12px; line-height:1.5; } .gantt-availability strong { display:block; color:var(--ui-949); font-weight:500; margin-bottom:3px; } .gantt-field-hint { color:var(--ui-792); font-size:12px; line-height:1.5; margin:0 0 12px; } .gantt-task-description { border-top:1px solid var(--accent-431); padding-top:18px !important; margin-top:22px !important; } .gantt-task-description p { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ui-888); line-height:1.6; font-size:13px; } .gantt-client .gantt-no-dates small { display:inline; } .gantt-client .gantt-footer span:nth-child(2) { display:none; } .gantt-client .gantt-bar, .gantt-client .gantt-no-dates { cursor:default; } .gantt-client .gantt-bar { display:flex; align-items:center; } .gantt-scroll .gantt-no-dates { position:sticky; top:auto; left:12px; display:inline-flex; margin:6px 12px; } .gantt-no-dates[data-editable] { cursor:grab; touch-action:none; } .gantt-no-dates[data-editable]:active { cursor:grabbing; } .gantt-drop-preview { position:absolute; top:0; bottom:0; width:2px; z-index:5; pointer-events:none; background:var(--accent-523); } .gantt-drop-preview > span { position:absolute; left:5px; top:6px; padding:5px 7px; white-space:nowrap; border-radius:var(--radius-2xs); color:var(--ink); background:var(--accent-465a); font-size:11px; } .gantt-place-task { width:100%; margin:0 0 12px; } .gantt-source-documents { margin:20px 0; } .gantt-source-documents details { border-top:1px solid var(--accent-439); padding:10px 0; } .gantt-source-documents summary { cursor:pointer; color:var(--accent-886); font-size:12px; } .gantt-source-documents ul { padding:0; list-style:none; } .gantt-source-documents li { padding:10px 0; font-size:12px; border-top:1px solid var(--accent-394a); } .gantt-source-documents p, .gantt-source-documents small { color:var(--ui-796); line-height:1.5; } /* Q drag: full task ghost follows the pointer and snaps its start to a calendar day. */ .gantt-drag-task-ghost { position:fixed; z-index:90; pointer-events:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:180px; min-height:44px; max-width:calc(100vw - 16px); padding:10px 12px; border:1px solid var(--accent-863); border-radius:var(--radius-xs); background:var(--accent-395a); color:var(--ui-981a); box-shadow:0 10px 28px color-mix(in srgb, var(--ui-172a) 40%, transparent); } .gantt-drag-task-ghost strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:550; } .gantt-drag-task-ghost span { flex:none; color:var(--accent-908); font-size:11px; } /* Цвет этапа приходит из YouGile; статус остаётся отдельной подписью. */ .stage-card[data-stage-color]::before { background:var(--stage-color); } .stage-card[data-stage-color] .stage-charge { background:var(--stage-color); } .stage-card[data-stage-color] h3 { border-left:3px solid var(--stage-color); padding-left:10px; } .gantt-stage-row[data-stage-color] .gantt-calendar-group { border-left:4px solid var(--stage-color); } .gantt-table tr[data-stage-color] .gantt-bar { border:2px solid var(--stage-color); background:color-mix(in srgb, var(--stage-color) 25%, var(--ui-951)); color:var(--accent-247); } .gantt-table tr[data-stage-color] .gantt-bar.summary { background:var(--stage-color); } .gantt-tree-table tr[data-stage-color] .gantt-group-toggle { border-left:4px solid var(--stage-color); } .gantt-tree-table tr[data-stage-color] .gantt-status-dot { background:var(--stage-color); } .gantt-table tr[data-stage-color] [data-undated-task] { border-left:4px solid var(--stage-color); } .gantt-table tr[data-stage-color] [data-undated-task] { background:color-mix(in srgb, var(--stage-color) 18%, var(--ui-961)); } .gantt-drag-task-ghost { border-left:4px solid var(--stage-color, var(--accent-863)); background:color-mix(in srgb, var(--stage-color, var(--accent-395a)) 20%, var(--ui-250)); } /* ── Свои элементы управления (frontend/controls.ts) ───────── * Встроенные select и input[type=date] остаются: у них значение, имя, required, * подпись и тесты. Системная часть - выпадающий список и календарь - заменена * панелями ниже. Галочки, радио и числовые поля рисуются здесь без скрипта. * Картинки data: запрещены CSP, поэтому шеврон и значок календаря - градиенты * от currentColor: видны и на тёмном поле, и на светлой «бумаге» Ганта. */ select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, color-mix(in srgb, currentColor 65%, transparent) 50%), linear-gradient(135deg, color-mix(in srgb, currentColor 65%, transparent) 50%, transparent 50%) !important; background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; } select[aria-expanded=true], input[type=date][aria-expanded=true] { border-color: var(--brand-primary); } input[type=date] { padding-right: 42px; background-image: linear-gradient(color-mix(in srgb, currentColor 65%, transparent), color-mix(in srgb, currentColor 65%, transparent)), linear-gradient(color-mix(in srgb, currentColor 65%, transparent), color-mix(in srgb, currentColor 65%, transparent)), linear-gradient(color-mix(in srgb, currentColor 65%, transparent), color-mix(in srgb, currentColor 65%, transparent)), linear-gradient(color-mix(in srgb, currentColor 65%, transparent), color-mix(in srgb, currentColor 65%, transparent)) !important; background-size: 14px 3px, 14px 1.5px, 1.5px 11px, 1.5px 11px !important; background-position: calc(100% - 14px) calc(50% - 5px), calc(100% - 14px) calc(50% + 6px), calc(100% - 26.5px) calc(50% + .5px), calc(100% - 14px) calc(50% + .5px) !important; background-repeat: no-repeat !important; } /* Значок системного календаря убран: календарь открывает зона значка справа. */ input[type=date]::-webkit-calendar-picker-indicator { display: none; } input[type=number] { appearance: textfield; -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; flex: 0 0 auto; /* Как в CRM: полшага мелкой ступени скругления - квадрат, а не таблетка. Рамка светлее, чем у CRM: на тёмном стекле волосок в 10% не видно. */ border: 1.5px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: calc(var(--radius-sm) / 2); background: var(--surface-glass-strong); cursor: pointer; transition: background-color .16s ease, border-color .16s ease; } input[type=radio] { border-radius: 50%; } /* Галочка появляется вместе с заливкой, а не возникает поверх готового квадрата. */ input[type=checkbox]::before { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--text-on-accent); border-bottom: 2px solid var(--text-on-accent); opacity: 0; transform: translateY(-1px) rotate(-45deg) scale(.6); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.7,.3,1); } input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-on-accent); opacity: 0; transform: scale(.5); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.7,.3,1); } input[type=checkbox]:checked, input[type=checkbox]:indeterminate, input[type=radio]:checked { background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); } input[type=checkbox]:checked::before { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); } input[type=radio]:checked::before { opacity: 1; transform: scale(1); } input[type=checkbox]:indeterminate::before { height: 0; border-left: 0; opacity: 1; transform: none; } @media (hover: hover) { input[type=checkbox]:not(:disabled):not(:checked):hover, input[type=radio]:not(:disabled):not(:checked):hover { border-color: var(--brand-primary); } } input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; } .ctl-panel { position: fixed; z-index: 1000; box-sizing: border-box; min-width: 200px; max-width: min(440px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--edge-light); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); box-shadow: 0 18px 50px color-mix(in srgb, var(--black) 55%, transparent); font-size: .84rem; line-height: 1.35; animation: ctl-in .2s cubic-bezier(.2,.7,.3,1) both; } .ctl-panel[data-placement=top] { animation-name: ctl-in-up; } /* Уходящая панель не должна перехватывать клик по тому, что под ней. */ .ctl-panel.is-closing { animation: ctl-out .16s ease-in both; pointer-events: none; } @keyframes ctl-in { from { opacity: 0; transform: translateY(-4px); } } @keyframes ctl-in-up { from { opacity: 0; transform: translateY(4px); } } @keyframes ctl-out { to { opacity: 0; } } .ctl-list { max-height: min(300px, calc(100dvh - 40px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent; } .ctl-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; padding: 9px 12px; border-radius: var(--radius-xs); cursor: pointer; outline: none; transition: background-color .16s ease; } /* Подсветка по активному пункту, а не по :hover: иначе при ходьбе стрелками подсвечены два пункта - под курсором и под клавиатурой. */ .ctl-option.is-active { background: var(--state-hover); } .ctl-option:active { background: var(--state-active); } .ctl-option.is-selected { color: var(--brand-primary); font-weight: 600; } .ctl-option.is-selected::after { content: ""; flex: none; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); } .ctl-option[aria-disabled=true] { opacity: .45; cursor: not-allowed; } .ctl-option:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-primary); } .ctl-cal { width: 296px; padding: 12px; } .ctl-cal button { appearance: none; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: inherit; font: inherit; box-shadow: none; } .ctl-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .ctl-cal__title { font-size: .9rem; font-weight: 600; } .ctl-cal .ctl-cal__nav { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text-muted); } .ctl-cal__nav .icon { width: 18px; height: 18px; } .ctl-cal__weekdays, .ctl-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .ctl-cal__weekdays span { padding: 6px 0; color: var(--text-muted); font-size: .68rem; text-align: center; } .ctl-cal .ctl-cal__day { height: 36px; font-size: .82rem; font-variant-numeric: tabular-nums; } .ctl-cal .ctl-cal__day.is-outside { color: var(--text-muted); opacity: .6; } .ctl-cal .ctl-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--brand-primary); } .ctl-cal .ctl-cal__day.is-selected { background: var(--brand-primary); color: var(--on-accent); font-weight: 600; opacity: 1; } .ctl-cal .ctl-cal__day:disabled { background: transparent; color: inherit; opacity: .3; cursor: not-allowed; } @media (hover: hover) { .ctl-cal .ctl-cal__nav:hover, .ctl-cal .ctl-cal__day:not(:disabled):not(.is-selected):hover, .ctl-cal .ctl-cal__link:not(:disabled):hover { background: var(--state-hover); color: var(--text); } } .ctl-cal .ctl-cal__nav:active, .ctl-cal .ctl-cal__day:not(:disabled):active { background: var(--state-active); } .ctl-cal button:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .ctl-cal__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .ctl-cal .ctl-cal__link { padding: 8px 10px; color: var(--brand-primary); font-size: .8rem; font-weight: 600; } .ctl-cal .ctl-cal__link:disabled { background: transparent; color: var(--text-muted); opacity: .5; } @media (prefers-reduced-motion: reduce) { .ctl-panel, .ctl-panel.is-closing { animation: none; } } @media (forced-colors: active) { .ctl-panel { border: 1px solid CanvasText; } .ctl-option.is-active, .ctl-cal .ctl-cal__day.is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; } } /* ══ Облик CRM ════════════════════════════════════════════════════════════ * Решение владельца 10.09: перенести облик Avalin CRM целиком. Источник - * дизайн-система CRM (doc/ДИЗАЙН-СИСТЕМА.md, tokens.css, main.css и оболочка * layouts/default.vue, ветка dev): плавающая стеклянная боковая панель, * карточки-стекло 24px, кнопки CRM, бейджи-таблетки, поля CRM, типографика CRM. * Экраны, разделы и раскладка телефона остаются от AVALIN - слой меняет вид, * а не устройство. Код CRM не копировался: те же решения описаны для разметки * AVALIN. Слой стоит последним; частные правила (светлая «бумага» Ганта, * компактные строки материалов) весят больше и остаются своими. */ :root { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } body { background: var(--bg-page); } /* Цветные пятна - закреплённым слоем, а не фоном с background-attachment: fixed, который перерисовывает экран на каждом кадре прокрутки (правила CRM, 13.3). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--bg-page-accent); pointer-events: none; } /* ── Типографика CRM ───────────────────────────────────────── * :where() держит вес ниже частных правил: мелкие подписи-h2 внутри блоков * сохраняют свой размер, а обычные заголовки получают шкалу CRM. */ :where(.shell) h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; } :where(.shell) h2 { font-size: var(--text-h2); font-weight: 650; letter-spacing: -.01em; } :where(.shell) h3 { font-weight: 650; letter-spacing: -.01em; } :where(.shell) .eyebrow { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; } .shell .readiness-project h1 { font-size: var(--text-hero); letter-spacing: -.025em; } /* ── Оболочка: знак, подписи, меню ─────────────────────────── */ /* Знак бренда остаётся своим: крупный текстовый AVALIN без символа - требование владельца (brand-guidelines, DESIGN.md), его проверяет redesign-motion-smoke. Облик CRM здесь - только шрифт и цвет, а не знак хозяйства из CRM. */ .shell .brand-home { color: var(--text); text-decoration: none; } .shell .sidebar .wordmark { color: var(--text); font-family: var(--font-sans); } /* Только подписи групп меню: подпись бренда в подвале остаётся своей, в одну строку. */ .shell .sidebar > .sidebar-caption, .shell .sidebar-project-label { padding: 0 10px 6px; color: var(--text-faint); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .shell .workspace-topbar { min-height: 32px; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; color: var(--text-muted); font-size: var(--text-sm); } .shell .workspace-label { font-weight: 550; letter-spacing: 0; text-transform: none; } .shell .workspace-indicator::before { background: var(--brand-primary); box-shadow: none; } .shell .identity-avatar { border: 0; background: var(--brand-primary-soft); color: var(--brand-on-soft); font-size: var(--text-sm); font-weight: 650; } .shell .identity strong { color: var(--text); font-size: var(--text-sm); font-weight: 550; } @media (min-width: 761px) { /* Панель висит над страницей отдельной плашкой, а не прирастает к краю окна. */ .shell .sidebar { top: 12px; height: calc(100dvh - 24px); margin: 12px 0 12px 12px; padding: 18px 12px 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); /* Плотнее карточек (70%): пункты меню читаются в первую очередь. */ background: var(--glass-sheen), color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); box-shadow: var(--glass-edge), var(--shadow-lifted); } .shell .sidebar nav { gap: 2px; margin-top: 18px; } .shell .sidebar > nav > a, .shell .sidebar > .project-navigation a { display: flex; align-items: center; gap: 10px; /* 44px, а не 40 из CRM: пункты боковой панели остаются под палец (требование AVALIN, redesign-motion-smoke) - на планшете это та же панель. */ min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo); } .shell .sidebar > nav > a[aria-current=page], .shell .sidebar > .project-navigation a[aria-current=page] { border: 0; background: var(--state-selected); box-shadow: none; color: var(--state-selected-text); font-weight: 550; } .shell .sidebar > nav > a svg, .shell .sidebar > .project-navigation a svg { color: currentColor; } .shell .sidebar .identity { padding: 12px 6px 0; border-top: 1px solid var(--border-hairline); } .shell .content { padding: clamp(20px, 2.6vw, 36px) clamp(20px, 3vw, 44px) 64px; } } @media (min-width: 761px) and (hover: hover) { .shell .sidebar > nav > a:hover, .shell .sidebar > .project-navigation a:hover { background: var(--state-hover); color: var(--text); } .shell .sidebar > nav > a[aria-current=page]:hover, .shell .sidebar > .project-navigation a[aria-current=page]:hover { background: color-mix(in srgb, var(--state-selected) 85%, var(--brand-primary)); color: var(--state-selected-text); } } .shell .sidebar > nav > a:active, .shell .sidebar > .project-navigation a:active { background: var(--state-active); } @media (max-width: 760px) { /* Телефон: шапка и нижняя док-панель плотные, без размытия (правила CRM, 13.2). */ .shell .sidebar { background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border-hairline); backdrop-filter: none; -webkit-backdrop-filter: none; } .shell .sidebar > .project-navigation { border: 1px solid var(--border-glass); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-lifted); } .shell .sidebar > .project-navigation a { border-radius: var(--radius-sm); color: var(--text-muted); } .shell .sidebar > .project-navigation a[aria-current=page] { color: var(--state-selected-text); } .shell .project-navigation .nav-indicator { border: 0; border-radius: var(--radius-sm); background: var(--state-selected); } } /* ── Карточки: стекло CRM ────────────────────────────────── */ .shell :is(.panel, .readiness, .project, .project-metadata form) { border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-sheen), var(--surface-glass-strong); box-shadow: var(--glass-edge), var(--shadow-card); } @media (min-width: 761px) { .shell :is(.panel, .readiness, .project) { backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); } } @media (max-width: 760px) { /* На телефоне размытия нет (правила CRM 13.2), поэтому стекло плотнее. */ .shell :is(.panel, .readiness, .project) { background: var(--glass-sheen), color-mix(in srgb, var(--surface) 80%, transparent); } } @media (hover: hover) { .shell .project:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-hairline)); background: var(--surface); } } /* Вложенный блок - на ступень меньше карточки (24 -> 20). */ .shell .readiness-main { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--surface-sunken); } /* Показатели - отдельными карточками, как MetricCard в CRM. */ .shell .overview-metrics { gap: 14px; border: 0; border-radius: 0; background: transparent; overflow: visible; } .shell .overview-metrics .metric { border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-sheen), var(--surface-glass-strong); box-shadow: var(--glass-edge), var(--shadow-card); } .shell .overview-metrics .metric strong { font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -.02em; } .shell .overview-metrics .metric-attention { border-color: color-mix(in srgb, var(--sem-amber-816) 30%, var(--border-hairline)); background: var(--glass-sheen), color-mix(in srgb, var(--sem-amber-816) 12%, var(--surface-glass-strong)); } /* ── Кнопки CRM ──────────────────────────────────────────── */ button, .quiet { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-glass); color: var(--text); font-size: var(--text-sm); font-weight: 500; transition: background-color var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo); } .primary, :is(.project-administration, .project-deadlines) button[type=submit], .project-metadata form > button { border: 1px solid transparent; border-radius: var(--radius-md); /* Лёгкий градиент к более тёмному тону: белый текст держит не меньше 4.68:1 по всей кнопке, а основное действие по-прежнему отличается от призрачных. */ background: linear-gradient(135deg, var(--brand-primary-strong), color-mix(in srgb, var(--brand-primary-strong) 84%, var(--black))); color: var(--text-on-accent); font-weight: 600; box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary-strong) 28%, transparent); } :is(.project-administration, .project-deadlines) button:not([type=submit]):not(.text-button) { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-glass); color: var(--text); } @media (hover: hover) { button:not(:disabled):hover, .quiet:not(:disabled):hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-hairline)); background: var(--surface); } .primary:not(:disabled):hover, :is(.project-administration, .project-deadlines) button[type=submit]:not(:disabled):hover { border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-strong) 90%, var(--black)), color-mix(in srgb, var(--brand-primary-strong) 76%, var(--black))); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-primary-strong) 34%, transparent); filter: none; } } .primary:not(:disabled):active { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-strong) 80%, var(--black)), color-mix(in srgb, var(--brand-primary-strong) 70%, var(--black))); } /* Фильтры материалов - переключатель-таблетка CRM. */ .shell .materials-filters { gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); } .shell .materials-filters button { min-height: 40px; padding: 7px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--text-muted); font-size: var(--text-sm); } .shell .materials-filters button[aria-pressed=true] { background: var(--surface); color: var(--text); font-weight: 550; box-shadow: 0 1px 3px var(--shadow-color); } /* ── Бейджи-таблетки CRM ─────────────────────────────────── */ .shell .tag { gap: 6px; padding: 5px 11px; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface)); color: var(--brand-on-soft); font-size: var(--text-xs); font-weight: 500; } .shell .tag:not(:has(svg))::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .shell .waiting-tag { background: color-mix(in srgb, var(--sem-amber-816) 12%, var(--surface)); color: var(--sem-amber-816); } .shell .content[data-section=materials] .material-deadline { border-radius: var(--radius-sm); } /* ── Поля CRM ────────────────────────────────────────────── */ input:where(:not([type=checkbox], [type=radio], [type=file], [type=range])), select, textarea { border-color: var(--border-hairline); border-radius: var(--radius-md); background-color: var(--surface-glass-strong); transition: border-color var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo); } input:where(:not([type=checkbox], [type=radio], [type=file], [type=range])):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-hairline)); } input:where(:not([type=checkbox], [type=radio], [type=file], [type=range])):focus, select:focus, textarea:focus { border-color: var(--brand-primary); } input::placeholder, textarea::placeholder { color: var(--text-faint); } .field > span { font-size: 12px; } .field:focus-within > span { color: var(--state-selected-text); } /* ── Сообщения: подсказка CRM с цветной кромкой ──────────── */ .shell .notice { border: 0; border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface)); } .error { border: 0; border-left: 3px solid var(--sem-red-721); border-radius: var(--radius-md); background: color-mix(in srgb, var(--sem-red-721) 8%, var(--surface)); } /* ── Окна и панели поверх ────────────────────────────────── */ .confirm-dialog { border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lifted); } .confirm-dialog::backdrop { background: color-mix(in srgb, var(--black) 55%, transparent); } .gantt-drawer { border-left-color: var(--border-hairline); box-shadow: var(--shadow-lifted); } .ctl-panel { border-color: var(--border-hairline); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lifted); } .ctl-option { border-radius: var(--radius-sm); } .ctl-option.is-selected { color: var(--state-selected-text); } /* ── Вход: карточка формы и кнопка CRM, сцена Земли своя ─── */ .login-form { border-radius: var(--radius-xl); } /* ── Плитки отметок и чек-листы, как в CRM ───────────────── * Отметка - плитка целиком: галочка, жирный заголовок, серое пояснение; нажимается * вся плитка, а не только квадратик. Готовое - лёгкий зелёный оттенок, остальное - * нейтральная утопленная подложка (права команды и «Что готово» в CRM). */ .project-create-form .base-kit-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; } .project-create-form .base-kit-receipt-row { gap: 12px; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-sunken); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo); } .project-create-form .base-kit-receipt-row:has(input:checked) { background: color-mix(in srgb, var(--status-confirmed) 12%, transparent); } @media (hover: hover) { .project-create-form .base-kit-receipt-row:not(:has(input:disabled)):hover { border-color: var(--border-hairline); } } .project-create-form .base-kit-receipt-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; } .base-kit-receipt-row strong { font-size: var(--text-sm); font-weight: 650; } .base-kit-receipt-row small { color: var(--text-muted); font-size: var(--text-xs); } .scope-item { border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-sunken); } .scope-item[data-completed="true"] { border-color: transparent; background: color-mix(in srgb, var(--status-confirmed) 12%, transparent); } .scope-completed { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--text-sm); cursor: pointer; } .scope-item[data-completed="true"] .scope-completed { color: var(--status-confirmed); font-weight: 550; } /* Готовый этап - зелёная точка на линии, как отметка «готово» в CRM. */ .stage-card[data-state=completed]::before { background: var(--status-confirmed); box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-confirmed) 18%, transparent); } /* ── Правая панель графика: плавающее стекло CRM ───────────── * Не прибита к краю, а висит с отступом 12px; сквозь неё размыто видно график - * тот же приём, что у панели заявки в CRM. На телефоне остаётся листом снизу. */ @media (min-width: 761px) { .gantt-drawer { inset: 12px 12px 12px auto; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-sheen), var(--surface-glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-lifted); } } @media (max-width: 760px) { .gantt-drawer { border-color: var(--glass-border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface); } } .gantt-drawer::backdrop { background: color-mix(in srgb, var(--black) 18%, transparent); } .gantt-drawer h3 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -.02em; } .gantt-drawer > header { padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); } .gantt-drawer > header button { border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); } @media (hover: hover) { .gantt-drawer > header button:not(:disabled):hover { background: var(--state-hover); color: var(--text); } } /* Вкладки карточки работы - переключатель-таблетка CRM. */ .gantt-card-tabs { gap: 2px; padding: 3px; border-bottom: 0; border-radius: var(--radius-md); background: var(--surface-sunken); } .gantt-card-tabs button { border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; } .gantt-card-tabs button[aria-selected=true] { background: var(--surface); color: var(--text); font-weight: 550; box-shadow: 0 1px 3px var(--shadow-color); } /* Раздел карточки - блок на ступень меньше панели (24 -> 20). */ .gantt-drawer [role=tabpanel]:not([hidden]) { padding: 16px 18px; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ink) 3%, transparent); } .gantt-drawer .gantt-task-description { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-sunken); } /* ── Меню аккаунта внизу боковой панели, как в CRM ────────── * Человек, оформление и выход в одном месте вместо открытой кнопки «Выйти». * Панель плотная, а не стеклянная: это меню читают, а не рассматривают. */ .user-menu { position: relative; margin-top: 12px; } .user-menu .user-menu-trigger { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: var(--state-selected); box-shadow: none; color: var(--state-selected-text); text-align: left; } @media (hover: hover) { .user-menu .user-menu-trigger:hover { border: 0; background: color-mix(in srgb, var(--state-selected) 85%, var(--brand-primary)); } } .user-menu .user-menu-trigger .identity-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--brand-primary) 22%, var(--surface)); color: var(--state-selected-text); font-size: var(--text-sm); font-weight: 650; } .user-menu .identity-copy { display: grid; flex: 1; gap: 2px; min-width: 0; } .user-menu .identity-copy strong { margin: 0; overflow: hidden; color: inherit; font-size: var(--text-sm); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .user-menu .identity-copy small { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; } .user-menu-chevron { flex: none; width: 16px; height: 16px; transition: transform var(--duration-normal) var(--ease-out-expo); } .user-menu-trigger[aria-expanded=true] .user-menu-chevron { transform: rotate(180deg); } .user-menu-panel { position: absolute; right: 0; bottom: calc(100% + 8px); left: 0; z-index: 40; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-sheen), var(--surface-raised); box-shadow: var(--glass-edge), var(--shadow-lifted); animation: ctl-in-up .2s var(--ease-out-expo) both; } .user-menu-caption { padding: 6px 10px 4px; color: var(--text-faint); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .user-menu-themes { display: grid; gap: 2px; } .user-menu .user-menu-theme, .user-menu .user-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--text); font-size: var(--text-sm); font-weight: 400; } .user-menu .user-menu-theme[aria-checked=true] { background: var(--state-selected); color: var(--state-selected-text); font-weight: 550; } @media (hover: hover) { .user-menu .user-menu-theme:not([aria-checked=true]):hover, .user-menu .user-menu-item:not(:disabled):hover { border: 0; background: var(--state-hover); } } .user-menu .user-menu-theme:active, .user-menu .user-menu-item:not(:disabled):active { background: var(--state-active); } .user-menu-panel .icon { flex: none; width: 18px; height: 18px; } .user-menu-divider { margin: 6px 4px; border: 0; border-top: 1px solid var(--border-hairline); } .user-menu .user-menu-logout { color: var(--status-declined); } @media (max-width: 760px) { /* Телефон: в шапке остаётся аватар, меню раскрывается вниз под ним. */ .user-menu { margin: 0; } .user-menu .user-menu-trigger { width: auto; min-height: 44px; padding: 5px; background: transparent; } .user-menu .identity-copy, .user-menu-chevron { display: none; } .user-menu-panel { top: calc(100% + 8px); bottom: auto; left: auto; width: min(280px, calc(100vw - 32px)); animation-name: ctl-in; } } /* ── Число с «−» и «+», как состав группы в CRM (frontend/number-field.tsx) ── * Подпись внутри по центру, значение под ней, шаги по краям одной рамки. */ .number-field { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin: 18px 0; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-glass-strong); transition: border-color var(--duration-fast) var(--ease-out-expo); } .number-field:focus-within { border-color: var(--brand-primary); } @media (hover: hover) { .number-field:not(:focus-within):hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-hairline)); } } .number-field .field { margin: 0; } .number-field .field > span { right: 0; left: 0; text-align: center; } .number-field .field > input { padding-right: 4px; padding-left: 4px; border: 0; background: transparent; font-variant-numeric: tabular-nums; text-align: center; } .number-field .number-field-step { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--text-muted); } @media (hover: hover) { .number-field .number-field-step:not(:disabled):hover { border: 0; background: var(--state-hover); color: var(--text); } } .number-field .number-field-step:not(:disabled):active { background: var(--state-active); } .number-field .number-field-step:disabled { background: transparent; color: var(--text-muted); opacity: .35; } .number-field .number-field-step .icon { width: 18px; height: 18px; } /* ── Карточка работы: статус, колонка, путь по колонкам ──────── * Эти элементы красились токенами прежней тёмной панели и в светлой теме выходили * насыщенными сиреневыми заплатками. Теперь у них та же поверхность, рамка и мягкий * акцент, что у полей и кнопок вкладки «Основное». Стикер колонки в дереве работ * (тёмная «бумага») не трогаем - там правило точнее. */ .gantt-drawer .gantt-task-badge, .gantt-drawer .gantt-column-sticker { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 0; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; line-height: 1.35; white-space: normal; } .gantt-drawer .gantt-task-badge { background: var(--surface-sunken); color: var(--text-muted); } .gantt-drawer .gantt-task-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .gantt-drawer .gantt-task-badge.complete { background: color-mix(in srgb, var(--status-confirmed) 14%, var(--surface)); color: color-mix(in oklab, var(--status-confirmed) 75%, var(--text)); } .gantt-drawer .gantt-task-badge.blocked { background: color-mix(in srgb, var(--status-declined) 12%, var(--surface)); color: color-mix(in oklab, var(--status-declined) 75%, var(--text)); } .gantt-drawer .gantt-column-sticker { background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface)); color: var(--brand-on-soft); } .gantt-drawer .gantt-availability { gap: 10px; padding: 12px 14px; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); } .gantt-drawer .gantt-availability > span[aria-hidden] { color: var(--brand-primary); } .gantt-drawer .gantt-availability strong { color: var(--text); font-weight: 600; } .gantt-drawer .gantt-column-path li { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: none; } .gantt-drawer .gantt-column-path li[aria-current=step] { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--surface)); background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface)); color: var(--brand-on-soft); box-shadow: none; } .gantt-drawer .gantt-column-step { background: var(--surface-sunken); color: var(--text-muted); } .gantt-drawer .gantt-column-path [aria-current=step] .gantt-column-step { background: var(--brand-primary-strong); color: var(--white); } /* Выключенные кнопки и поля - нейтральные, как в CRM, а не сиреневые заливки. */ button:disabled, button[disabled], .shell button:disabled { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border-hairline); box-shadow: none; } input:disabled, select:disabled, textarea:disabled { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border-hairline); } /* Описание задания живёт во вкладке «Основное»: текст и рамка от темы, а не от прежней тёмной панели. */ .gantt-drawer .gantt-task-description { border-top: 0; } .gantt-drawer .gantt-task-description p { color: var(--text); } /* ── Сроки документов: цвета палитры этапов ───────────────────── * Плашка срока - как таблетка этапа: подложка того же оттенка и текст в глубоком тоне; * полоска слева - сам цвет. Жёлтый - срок идёт или ждёт принятия, красный - задержка, * зелёный - принято, серое стекло - срок не определён (решение владельца 11.09). */ .material-request-card[data-tone=yellow] { --tone-color: var(--deadline-yellow); } .material-request-card[data-tone=red] { --tone-color: var(--deadline-red); } .material-request-card[data-tone=green] { --tone-color: var(--deadline-green); } .material-request-card[data-tone=grey] { --tone-color: var(--deadline-grey); } .content[data-section=materials] .material-request-card[data-tone] { --request-tone: var(--tone-color); } .content[data-section=materials] .material-request-card[data-tone] .material-deadline { border-color: color-mix(in srgb, var(--tone-color) 45%, var(--surface)); background: color-mix(in srgb, var(--tone-color) 18%, var(--surface)); } .content[data-section=materials] .material-request-card[data-tone] .material-deadline strong { color: color-mix(in oklab, var(--tone-color) 55%, var(--text)); } .content[data-section=materials] .material-request-card[data-tone] .material-deadline small { color: var(--text-muted); } /* Жёлтый светлый: текст на тон глубже, иначе контраст на пределе AA. */ .content[data-section=materials] .material-request-card[data-tone=yellow] .material-deadline strong { color: color-mix(in oklab, var(--tone-color) 42%, var(--text)); } .content[data-section=materials] .material-request-card[data-tone=grey] .material-deadline { background: color-mix(in srgb, var(--tone-color) 16%, transparent); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); } /* ── Знак AVALIN: шрифт и цвет как «Ваша команда в AVALIN» ────── * Большой логотип боковой панели и экрана входа - тем же фирменным шрифтом и сиреневым, * что и .brand-inline (решение владельца 11.09), а не системным чёрным. */ .shell .sidebar .wordmark, .login .wordmark { font-family: "AVALIN Bebas", sans-serif; font-weight: 400; letter-spacing: .045em; color: var(--mint); } /* Экран входа всегда тёмный: тот же фирменный токен, но в тёмной схеме - светлый сиреневый, читается на сцене. */ .login .wordmark { color-scheme: dark; } /* ── Панель графика: масштаб как вкладки CRM ─────────────────── * Серый фон, тёмные рамки и сиреневая заливка выбранного масштаба шли от токенов прежней * тёмной панели. Теперь панель - поверхность темы с тонкой рамкой, масштаб - дорожка * с белой «таблеткой» выбранного пункта, как вкладки карточки работы. */ .gantt-toolbar { border-color: var(--border-hairline); background: var(--surface); } .gantt-scales { gap: 2px; padding: 3px; border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); } .gantt-scales button { border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; } .gantt-scales button[aria-pressed=true] { background: var(--surface); color: var(--text); font-weight: 550; box-shadow: 0 1px 3px var(--shadow-color); } .gantt-scales button:not([aria-pressed=true]):hover { border: 0; background: var(--state-hover); color: var(--text); } /* ── Кабинет заказчика ───────────────────────────────────────── * Карточка работы в графике (только чтение), самые срочные документы на главной, * начало и завершение работ в «Горизонте проекта». Только токены темы. */ .gantt-client-card { position: fixed; z-index: 40; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 18px 20px 20px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); box-shadow: 0 18px 48px var(--shadow-color); } .gantt-client-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gantt-client-card header .eyebrow { margin: 0; } .gantt-client-card header button { min-width: 36px; min-height: 36px; padding: 0; border-radius: var(--radius-pill); } .gantt-client-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; outline: none; } .gantt-client-card-stage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; } .gantt-client-card-label { color: var(--text-muted); font-size: var(--text-xs); } .gantt-client-card-state { justify-self: start; margin: 0; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; } .gantt-client-card-state.active { background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface)); color: var(--brand-on-soft); } .gantt-client-card-state.complete { background: color-mix(in srgb, var(--status-confirmed) 14%, var(--surface)); color: color-mix(in oklab, var(--status-confirmed) 75%, var(--text)); } .gantt-client-card-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--border-hairline); } .gantt-client-card-dates dt { color: var(--text-muted); font-size: var(--text-xs); } .gantt-client-card-dates dd { margin: 4px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; } .gantt-client .gantt-bar { cursor: pointer; } @media (max-width: 760px) { .gantt-client-card { bottom: calc(96px + env(safe-area-inset-bottom)); } .gantt-client-card-dates { grid-template-columns: 1fr 1fr; } } .urgent-documents { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; } .urgent-documents li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-hairline); border-left: 3px solid var(--text-muted); border-radius: var(--radius-sm); background: var(--surface); } .urgent-documents li[data-tone=red] { border-left-color: var(--deadline-red); } .urgent-documents li[data-tone=yellow] { border-left-color: var(--deadline-yellow); } .urgent-documents a { min-width: 0; color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .urgent-documents a:hover { color: var(--brand-secondary); text-decoration: underline; } .urgent-document-deadline { display: grid; justify-items: end; flex: none; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; } .urgent-documents li[data-tone=red] .urgent-document-deadline { color: color-mix(in oklab, var(--deadline-red) 70%, var(--text)); } .urgent-document-deadline small { color: var(--text-muted); font-weight: 400; } @media (max-width: 760px) { .urgent-documents li { flex-direction: column; align-items: flex-start; } .urgent-document-deadline { justify-items: start; } } @media (min-width: 761px) { .deadline-date-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .deadline-date-grid .is-delayed strong { color: var(--status-declined); } /* ── Этап - «таблетка» стикера YouGile ───────────────────────── * Как стикер «Этап» в YouGile: цветной квадрат с белым флажком, подложка того же * оттенка и название в более глубоком тоне (в тёмной теме - в более светлом). * Цвет - подтверждённая палитра (docs/qa/yougile-stage-palette), приходит * данными как --stage-color. На «бумаге» Ганта подложка светлая, как сама бумага. */ .stage-chip { --chip: var(--stage-color, var(--text-muted)); --chip-surface: var(--surface); --chip-ink: light-dark(var(--black), var(--white)); display: inline-flex; align-items: center; gap: .45em; max-width: 100%; padding: .2em .65em .2em .2em; border-radius: .5em; background: color-mix(in srgb, var(--chip) 18%, var(--chip-surface)); color: color-mix(in oklab, var(--chip) 52%, var(--chip-ink)); font-weight: 550; line-height: 1.3; vertical-align: middle; } .gantt-table .stage-chip { --chip-surface: var(--ui-951); --chip-ink: var(--black); } /* Дерево работ в панели - тёмная «бумага» в обеих темах: подложка тёмная, название светлее цвета этапа. */ .gantt-tree-table .stage-chip { --chip-surface: var(--accent-299); --chip-ink: var(--white); } .stage-chip-flag { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: .35em; background: var(--chip); color: var(--white); } .stage-chip-flag svg { width: 62%; height: 62%; } .stage-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stage-card[data-stage-color] h3 { padding-left: 0; border-left: 0; } /* Работа внутри этапа: полоса в оттенке этапа, подпись - в его глубоком тоне. */ .gantt-table tr[data-stage-color] .gantt-bar:not(.summary) { background: color-mix(in srgb, var(--stage-color) 22%, var(--ui-951)); color: color-mix(in oklab, var(--stage-color) 45%, var(--black)); } /* Система просит меньше прозрачности - стекло становится сплошным. */ @media (prefers-reduced-transparency: reduce) { .shell :is(.panel, .readiness, .project, .sidebar), .shell .overview-metrics .metric { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Остатки прежней тёмной панели, найденные сканером 11.09 ───── * Сканер прошёл все экраны UI-тестов и нашёл заливки и рамки, чьи светлые значения * получились серо-сиреневыми при переводе тёмной панели на светлую тему. Здесь они * переведены на поверхность, тонкую рамку и мягкий акцент темы, как у остального CRM. */ /* Дерево работ в правой панели - в цветах темы: светлое в светлой, тёмное в тёмной. */ .gantt-tree-scroll { color-scheme: inherit; border-color: var(--border-hairline); background: var(--surface); color: var(--text); scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; } .gantt-tree-table thead th { background: var(--surface); box-shadow: 0 1px 0 var(--border-hairline); } .gantt-tree-task-row th { border-bottom-color: var(--border-hairline); background: var(--surface); } .gantt-tree-stage-row th { border-bottom-color: var(--border-hairline); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); } .gantt-tree-task-row .gantt-task, .gantt-tree-stage-row .gantt-group-toggle { color: var(--text); } .gantt-tree-task-row .gantt-task :is(small, em, time) { color: var(--text-muted); } .gantt-tree-stage-row .gantt-group-toggle em { color: var(--text-muted); } .gantt-tree-stage-row .gantt-group-toggle small { background: var(--surface-sunken); color: var(--text-muted); } .gantt-tree-table .is-selected .gantt-tree-cell { background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface)); } .gantt-tree-table .gantt-task:hover { background: var(--state-hover); } .gantt-tree-table .gantt-task:focus-visible { background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface)); } .gantt-tree-table .gantt-doc-count { color: var(--brand-on-soft); background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface)); } .gantt-drawer .gantt-tree-table .gantt-column-sticker { border: 0; border-radius: var(--radius-pill); color: var(--brand-on-soft); background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface)); } .gantt-tree-table .stage-chip { --chip-surface: var(--surface); --chip-ink: light-dark(var(--black), var(--white)); } /* Поиск и фильтр в панели работ - поля CRM. Фон задаётся цветом, чтобы не потерять шеврон списка. */ .gantt-search { border-color: var(--border-hairline); background: var(--surface); } .gantt-search > span { color: var(--text-muted); } .gantt-filter select { background-color: var(--surface); border-color: var(--border-hairline); color: var(--text); } /* Поле выбора файла и его кнопка. */ .upload-file-label input[type=file] { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); } input[type=file]::file-selector-button { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } /* Зависимые документы и связи документов с работами. */ .gantt-document-cards li { border-color: var(--border-hairline); background: var(--surface); border-radius: var(--radius-sm); } .gantt-document-cards a { color: var(--brand-secondary); } .gantt-document-cards p { color: var(--text-muted); } .gantt-editor, .gantt-editor li { border-top-color: var(--border-hairline); } /* Прогресс ТЗ: дорожка темы, заполнение - фирменный сиреневый. */ .scope-progress { background: var(--surface-sunken); } .scope-progress span { background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-strong)); } /* «Призрак» задачи при перетаскивании на график. */ .gantt-drag-task-ghost { border: 1px solid var(--border-hairline); border-left: 4px solid var(--stage-color, var(--brand-primary)); background: color-mix(in srgb, var(--stage-color, var(--brand-primary)) 16%, var(--surface)); color: var(--text); box-shadow: 0 12px 28px var(--shadow-color); } .gantt-drag-task-ghost span { color: var(--text-muted); } /* «Задача без дат» на графике и кольцо точки этапа. */ .gantt-scroll .gantt-no-dates { border-color: color-mix(in srgb, var(--ink) 24%, transparent); } .stage-card::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 8%, var(--surface)); } /* ── График: цвет полосы - этап, состояние - форма ─────────────── * Цвет этапа не спорит с цветом состояния (владелец 11.09: «каждый этап - свой цвет»). * Запланировано - светлая заливка цветом этапа, выполнено - плотная заливка с галочкой, * ждём документ - штриховка и пунктир. Легенда - нейтральные образцы тех же форм. */ .gantt-table tr[data-stage-color] .gantt-bar.is-complete { background: color-mix(in srgb, var(--stage-color) 58%, var(--ui-951)); border-color: var(--stage-color); color: color-mix(in oklab, var(--stage-color) 30%, var(--black)); } .gantt-table tr[data-stage-color] .gantt-bar.is-blocked { border-style: dashed; background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--stage-color) 45%, transparent) 0 5px, transparent 5px 11px); } .gantt-bar.is-complete:not(.summary)::before { content: ""; display: inline-block; flex: none; width: 4px; height: 8px; margin: 0 8px 2px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle; } .gantt-legend-note { margin-right: 6px; color: var(--text-muted); white-space: nowrap; } .gantt-legend i { width: 14px; height: 9px; border: 1.5px solid var(--text-muted); border-radius: var(--radius-2xs); background: color-mix(in srgb, var(--text-muted) 16%, var(--surface)); } .gantt-legend.complete i { border-color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 62%, var(--surface)); } .gantt-legend.blocked i { border-style: dashed; border-color: var(--text-muted); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-muted) 50%, transparent) 0 3px, transparent 3px 6px); } .gantt-legend.today i { border: 0; border-radius: 0; } /* ── Телефон: сегодняшние изменения ──────────────────────────── * Легенда графика теперь объясняет форму полос (выполнено, ждём документ), поэтому на * телефоне она видна - компактной строкой. Вкладок карточки работы четыре - сетка 2x2. * Даты «Горизонта проекта» не переносят «г.» на отдельную строку. */ @media (max-width: 760px) { .gantt-options > div:first-child { display: flex; gap: 4px 12px; padding: 4px 0; font-size: 11px; } .gantt-legend-note { width: 100%; margin: 0; } .gantt-card-tabs button { flex: 1 1 40%; } .deadline-date-grid strong { white-space: nowrap; } } /* Строка легенды лежит на «листе» графика, а он светлый в обеих темах: токены внутри - светлые. */ .gantt-options { color-scheme: light; } /* ── Правки владельца 11.09, вечер ─────────────────────────────── */ /* «Передать документы» - на уровне строки срочного документа, а не посередине всего блока. */ .readiness-action:has(.urgent-documents) > .download-link { align-self: flex-end; margin-bottom: 11px; } @media (max-width: 760px) { .readiness-action:has(.urgent-documents) > .download-link { align-self: stretch; margin-bottom: 0; } } /* Карточка работы заказчика - выше, на уровне глаз; на телефоне остаётся над нижней панелью. */ @media (min-width: 761px) { .gantt-client-card { top: clamp(96px, 20vh, 200px); bottom: auto; } } /* Этап в «Ближайшем этапе» такой же, как в «Этапах»: полоса активного этапа - его цвет, * без почти чёрного --ui-979 из прежней палитры; у этапа без цвета - фирменный сиреневый. */ .stage-card[data-active=true] .stage-charge[data-known=true] { background-image: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary), color-mix(in srgb, var(--brand-primary) 35%, var(--surface)), var(--brand-secondary)); } .stage-card[data-stage-color][data-active=true] .stage-charge[data-known=true] { background-image: linear-gradient(180deg, var(--stage-color), color-mix(in srgb, var(--stage-color) 50%, var(--surface)), var(--stage-color)); } /* «Ждём обязательные материалы» - жёлтый палитры: он и в сроках значит «ждём». */ .stage-card .waiting-tag { background: color-mix(in srgb, var(--deadline-yellow) 20%, var(--surface)); color: color-mix(in oklab, var(--deadline-yellow) 42%, var(--text)); } /* Плитка «ждём от вас» на главной - тот же жёлтый «ждём», что у сроков и материалов этапа, а не прежний бежевый. */ .shell .overview-metrics .metric-attention { border-color: color-mix(in srgb, var(--deadline-yellow) 45%, var(--surface)); background: color-mix(in srgb, var(--deadline-yellow) 16%, var(--surface)); } .shell .overview-metrics .metric-attention :is(strong, span, .metric-icon) { color: color-mix(in oklab, var(--deadline-yellow) 42%, var(--text)); } .shell .readiness-action .action-note-icon { color: color-mix(in oklab, var(--deadline-yellow) 42%, var(--text)); } /* ── Главная и сроки: выравнивание (владелец 11.09) ─────────────── * «Ждём от вас», текст и строка документа начинаются по одной линии с «Пространством * проекта»: значок папки больше не отодвигает их вправо. «Передать документы» - той же * высоты и скругления, что строка документа, нижние края совпадают. */ .shell .readiness-action .action-note-icon { display: none; } .urgent-documents li { min-height: 60px; border-radius: var(--radius-sm); } .readiness-action:has(.urgent-documents) > .download-link { display: inline-flex; align-items: center; min-height: 60px; margin-bottom: 0; border-radius: var(--radius-sm); } @media (max-width: 760px) { .readiness-action:has(.urgent-documents) > .download-link { min-height: 52px; justify-content: center; } } /* «История сроков» - посередине своей полосы, а не вплотную к линии над ней. */ .shell .project-deadlines .deadline-history > summary { padding-top: 22px; padding-bottom: 0; } /* Пояснение про запросы без дат - не вплотную к датам «Горизонта проекта». */ .shell .project-deadlines > p.muted { margin-top: 18px; } /* ── Правки владельца 11.09, ночь ──────────────────────────────── */ /* Линия этапа видна у каждого этапа, а не только там, где уже есть прогресс: дорожка - цвет этапа вполсилы, поверх неё заполнение прогресса в полный цвет. */ .stage-card[data-stage-color]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: 3px; border-radius: var(--radius-2xs); background: color-mix(in srgb, var(--stage-color) 34%, transparent); z-index: -2; } .stage-card[data-stage-color] { border-left-color: transparent; } /* Вход: форма без фокуса не выглядит выключенной - заголовок, подписи и рамки полей ярче. */ .login-form h2 { color: var(--text); } .login-form > .muted, .login-form .field > span, .login-form-footer, .login-form small { color: color-mix(in oklab, var(--text) 78%, transparent); } .login-form .field > input { border-color: color-mix(in srgb, var(--text) 20%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); } @media (hover: hover) { .login-form .field > input:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); } } /* Главная: вторичный текст и рамки крупных блоков на 10-15% контрастнее. */ :root:not([data-palette="navy"]) .shell .overview-screen { --muted: var(--text-muted-contrast); --text-muted: var(--text-muted-contrast); --border: color-mix(in srgb, var(--ink) 11%, transparent); --border-hairline: color-mix(in srgb, var(--ink) 14%, transparent); --glass-border: color-mix(in srgb, var(--ink) 17%, transparent); } /* Фильтры материалов - всегда одна строка; не хватает места - поиск уходит строкой ниже, а на телефоне фильтры прокручиваются вбок. */ .shell .materials-controls { flex-wrap: wrap; } .shell .materials-filters { flex: none; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .shell .materials-filters::-webkit-scrollbar { display: none; } .shell .materials-filters button { flex: none; white-space: nowrap; } .shell .materials-search { flex: 1 1 240px; max-width: 340px; } /* Телефон: блок в столбик - поиск не растягивается по высоте, фильтры не переносятся. */ @media (max-width: 760px) { .shell .materials-controls { flex-wrap: nowrap; } .shell .materials-search { flex: 0 0 auto; max-width: none; } } /* Пустой график: силуэт будущих полос (штриховка - «ждём»), заголовок и одна строка о том, что дальше. */ .shell .gantt-table td.gantt-empty { padding: 64px 40px !important; } .gantt-empty-state { position: sticky; left: 40px; display: grid; justify-items: start; gap: 8px; max-width: 480px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.55; text-align: left; } .gantt-empty-state strong { color: var(--text); font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; } .gantt-empty-art { display: grid; gap: 8px; width: 300px; margin-bottom: 14px; } .gantt-empty-art i { display: block; height: 18px; border: 1px dashed color-mix(in srgb, var(--brand-primary) 45%, transparent); border-radius: var(--radius-xs); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 20%, transparent) 0 6px, color-mix(in srgb, var(--brand-primary) 7%, transparent) 6px 12px); } .gantt-empty-art i:nth-child(1) { width: 52%; } .gantt-empty-art i:nth-child(2) { width: 64%; margin-left: 24%; } .gantt-empty-art i:nth-child(3) { width: 40%; margin-left: 58%; } @media (max-width: 760px) { .shell .gantt-table td.gantt-empty { padding: 44px 20px !important; } .gantt-empty-state { left: 20px; max-width: calc(100vw - 80px); } .gantt-empty-art { width: 220px; } } /* Вторичные кнопки - на уровне основной «Добавить документ»: та же высота и вес, плотная белая подложка, рамка с оттенком бренда и мягкая тень. Переключатели и график не трогаем. */ .shell .content :is(.quiet, .panel button:not([class])):not(:disabled):not([aria-pressed]):not([role=tab]):not(:is(.gantt-toolbar, .gantt-options, .gantt-drawer) *) { border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-hairline)); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--brand-primary) 4%, var(--surface))); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px var(--shadow-color), 0 6px 16px color-mix(in srgb, var(--brand-primary) 9%, transparent); } @media (hover: hover) { .shell .content :is(.quiet, .panel button:not([class])):not(:disabled):not([aria-pressed]):not([role=tab]):not(:is(.gantt-toolbar, .gantt-options, .gantt-drawer) *):hover { border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--border-hairline)); background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface)); box-shadow: 0 1px 2px var(--shadow-color), 0 10px 22px color-mix(in srgb, var(--brand-primary) 14%, transparent); } } /* Карточка работы: строка под названием читается, а не теряется. */ .gantt-drawer .gantt-task-summary { margin: 0 0 18px; color: var(--text-muted); font-size: var(--text-sm); } /* Приглашение: «Права руководителя» - отдельной строкой над кнопкой, а не рядом с ней. */ .invite-manager-rights { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px; color: var(--text); font-size: var(--text-sm); cursor: pointer; } .invite-manager-rights input { flex: none; width: 18px; height: 18px; margin: 0; } /* ── Правки владельца 11.09, по реальным данным ─────────────────── */ /* «Горизонт проекта»: три документа видны, остальные раскрываются плавно (высота через сетку 0fr -> 1fr). */ .deadline-causes-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--duration-slow, .36s) var(--ease-out-expo, cubic-bezier(.16,1,.3,1)), opacity .24s ease; } .deadline-causes-more[data-open=true] { grid-template-rows: 1fr; opacity: 1; } .deadline-causes-more > ul { min-height: 0; overflow: hidden; } .shell .deadline-causes .deadline-causes-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; } .deadline-causes-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .24s var(--ease-out-expo, ease); } .deadline-causes-toggle[aria-expanded=true]::after { transform: translateY(2px) rotate(-135deg); } @media (prefers-reduced-motion: reduce) { .deadline-causes-more, .deadline-causes-toggle::after { transition: none; } } /* Подключение дорожной карты: кнопки в ряд с промежутком, «Настройки проекта» не прилипают к блоку. */ .project-mcp-connection .mcp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .project-mcp-connection .mcp-actions:empty { display: none; } .shell .project-metadata { margin: 20px 0 24px; } /* «Ваши проекты»: без надписи и слогана заголовок ближе к списку; «Найти» - рядом с полем, а не на краю. */ .shell .projects-header + .toolbar { justify-content: flex-start; margin-top: 18px; } /* ── Исходные данные руководителя: скачать рядом с документом (владелец 11.09) ── */ /* Библиотеки у руководителя нет: файл скачивается прямо у запроса, слева - сколько новых. */ .request-download { display: inline-flex; align-items: center; gap: 10px; } .request-new-files { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--brand-primary-strong); color: var(--text-on-accent); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 16%, transparent); animation: request-new-files-in .32s var(--ease-out-expo, ease) both; } @keyframes request-new-files-in { from { opacity: 0; transform: scale(.6); } } @media (prefers-reduced-motion: reduce) { .request-new-files { animation: none; } } /* «Скачать» - первым действием карточки, сразу под сроком, а не последним под остальными кнопками. */ .material-card-actions > .request-download { order: -1; flex-basis: 100%; justify-content: flex-end; } /* ── График: размер таблицы и выгрузка в Excel (владелец 11.09) ── */ /* Размер - второй переключатель рядом с «Неделя / Месяц / Проект»; цифры одной ширины, чтобы группа не прыгала. */ .gantt-zoom button { min-width: 46px; font-variant-numeric: tabular-nums; } .gantt-toolbar .gantt-export { gap: 6px; font-weight: 600; } .gantt-toolbar .gantt-export::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5.5 6 8.5l3-3M1.5 10.5h9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5.5 6 8.5l3-3M1.5 10.5h9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .gantt-toolbar-end { flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 760px) { .gantt-export-long { display: none; } .gantt-zoom button { min-width: 40px; padding-inline: 6px; } } /* YouGile company connection, 2026-09-11. */ .yougile-connection { width: 100%; max-width: 540px; } .yougile-connection > div { display: grid; gap: 16px; margin-top: 20px; } .yougile-connection label { display: grid; gap: 8px; } .yougile-connection input { width: 100%; min-width: 0; box-sizing: border-box; } .yougile-connection a { overflow-wrap: anywhere; } .yougile-connection button { justify-self: start; max-width: 100%; white-space: normal; } /* ── Удаление проекта из каталога (владелец 13.09) ─────────────── */ /* Корзина - сосед ссылки-карточки, поверх её правого верхнего угла. В покое серая и приглушённая, при наведении и фокусе с клавиатуры - красная. Метка роли сдвигается, чтобы не прятаться под ней. */ .project-card { position: relative; display: grid; min-width: 0; } .project-card > .project { height: 100%; } .project-card.is-deletable .project-card-top { padding-right: 48px; } .shell .project-card .project-delete { position: absolute; top: 22px; right: 22px; z-index: 2; display: grid; place-items: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; box-shadow: none; color: var(--text-muted); opacity: .55; cursor: pointer; transition: color .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease; } .project-delete .icon { width: 18px; height: 18px; } .shell .project-card .project-delete:hover, .shell .project-card .project-delete:focus-visible { opacity: 1; color: var(--status-declined); background: color-mix(in srgb, var(--status-declined) 12%, transparent); border-color: color-mix(in srgb, var(--status-declined) 35%, transparent); } .shell .project-card .project-delete:active { background: color-mix(in srgb, var(--status-declined) 20%, transparent); } @media (max-width: 760px) { .shell .project-card .project-delete { top: 18px; right: 18px; } } /* Опасное подтверждение: красная кнопка вместо сиреневой. Тёмно-красный в обеих темах: белый текст держит контраст не ниже 4,5:1. */ .confirm-dialog .danger { border: 1px solid transparent; background: var(--status-declined-strong); color: var(--text-on-accent); font-weight: 600; box-shadow: 0 8px 20px color-mix(in srgb, var(--status-declined) 26%, transparent); } @media (hover: hover) { .confirm-dialog .danger:not(:disabled):hover { background: color-mix(in oklab, var(--status-declined-strong) 84%, var(--black)); border-color: transparent; } } /* ── Удалённые проекты и участники в форме нового проекта (владелец 13.09) ── */ /* Корзина проектов - свёрнутый блок под каталогом: не мешает списку, раскрывается по щелчку. */ .deleted-projects { margin-top: 28px; padding: 0; } .deleted-projects > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; cursor: pointer; list-style: none; color: var(--text-muted); font-weight: 600; border-radius: inherit; } .deleted-projects > summary::-webkit-details-marker { display: none; } .deleted-projects > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; } .deleted-projects[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .deleted-projects > summary .icon { width: 18px; height: 18px; } .deleted-projects > summary:hover, .deleted-projects > summary:focus-visible { color: var(--text); } .deleted-projects > p { margin: 0; padding: 0 20px 8px; } .deleted-projects ul { display: grid; margin: 0; padding: 0 12px 12px; list-style: none; } .deleted-projects li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 8px; border-top: 1px solid var(--border); } .deleted-projects li > div { display: grid; gap: 2px; min-width: 0; } .deleted-projects li strong { overflow-wrap: anywhere; } .deleted-projects li button { flex: none; } @media (max-width: 760px) { .deleted-projects li { flex-wrap: wrap; } } /* Участник: имя, под ним e-mail и сторона - два одноимённых человека различимы. */ .member-field > span { display: grid; gap: 2px; } .member-details { color: var(--text-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } /* ── Своя подсказка проверки формы вместо системной (frontend/controls.ts, 13.09) ── */ /* Как панели списка и календаря: в том же слое, под полем, красная кромка. Щелчки проходят сквозь неё. */ .ctl-hint { position: fixed; z-index: 1000; box-sizing: border-box; max-width: min(360px, calc(100vw - 24px)); padding: 10px 14px; border: 1px solid var(--border-hairline); border-left: 3px solid var(--status-declined); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-lifted); font-size: var(--text-sm); line-height: 1.4; pointer-events: none; animation: ctl-in .2s cubic-bezier(.2,.7,.3,1) both; } .ctl-hint[data-placement=top] { animation-name: ctl-in-up; } :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--status-declined); } @media (prefers-reduced-motion: reduce) { .ctl-hint { animation: none; } } @media (forced-colors: active) { .ctl-hint { border: 1px solid CanvasText; } }