/* ========================================================================== ТСН «Царева Дача» — стили сайта Без внешних шрифтов и библиотек. Мобильный — первым. ========================================================================== */ :root { --green-900: #0f3320; --green-800: #14432a; --green-700: #1a5c39; --green-600: #1f7a4c; --green-500: #2a9160; --green-100: #e8f3ec; --green-50: #f3f9f5; --sand: #faf7f1; --white: #ffffff; --ink: #1a1d1a; --muted: #5c6660; --line: #dfe5e0; --warn: #8a5a00; --warn-bg: #fdf4e0; --warn-line: #e8c97a; --danger: #b3261e; --danger-bg: #fdeceb; --danger-line: #e7b4b0; /* рамка карточки с опасным показанием */ --gold: #c8963e; /* Еловый узор для фона. Встроен прямо в стили: ни одного лишнего запроса, меньше килобайта. Заметность подобрана так, чтобы не мешать чтению. */ --pattern-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%231a5c39%27%20stroke-opacity%3D%270.16%27%20stroke-width%3D%270.85%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M247%20269.9l-6.3%20-3.1M247%20269.9l-4.4%20-5.4M247%20269.9l-1.2%20-6.9%27%2F%3E%3Cpath%20d%3D%27M191.5%20259.2l-8.5%20-5.4M191.5%20259.2l-5.9%20-8.1M191.5%20259.2l-2.9%20-9.6%27%2F%3E%3Cpath%20d%3D%27M226.9%20259.6l-9.1%20-5.9M226.9%20259.6l-5.9%20-9.1M226.9%20259.6l-3%20-10.4%27%2F%3E%3Cpath%20d%3D%27M34.2%20238.9l-7.6%20-3.5M34.2%20238.9l-5.4%20-6.4M34.2%20238.9l-1%20-8.3%27%2F%3E%3Cpath%20d%3D%27M111.3%20270.7l-9.1%20-6.1M111.3%20270.7l-6.7%20-8.7M111.3%20270.7l-1.8%20-10.8%27%2F%3E%3Cpath%20d%3D%27M193.1%20230.6l-8.8%20-5.8M193.1%20230.6l-7%20-7.9M193.1%20230.6l-2.6%20-10.2%27%2F%3E%3Cpath%20d%3D%27M113.2%20284.2l-8.7%20-5.3M113.2%20284.2l-5.3%20-8.7M113.2%20284.2l-2.6%20-9.8%27%2F%3E%3Cpath%20d%3D%27M46%20262.9l-8.7%20-3.9M46%20262.9l-5.4%20-7.9M46%20262.9l-2.3%20-9.3%27%2F%3E%3Cpath%20d%3D%27M59.2%20300.7a5.8%205.8%200%200%201%2011.7%200M64.1%20300.2a8.1%208.1%200%200%201%2016.2%200M73.3%20301a6.1%206.1%200%200%201%2012.1%200%27%2F%3E%3Cpath%20d%3D%27M179.9%20228.2a10.2%2010.2%200%200%201%2020.4%200M192.5%20228.8a7.2%207.2%200%200%201%2014.3%200M200.3%20229.1a8.9%208.9%200%200%201%2017.7%200%27%2F%3E%3Cpath%20d%3D%27M207.4%20260.9a8.8%208.8%200%200%201%2017.6%200M218.3%20262.7a6.5%206.5%200%200%201%2012.9%200M224%20262.5a9.4%209.4%200%200%201%2018.8%200%27%2F%3E%3Cpath%20d%3D%27M20.5%20234.5a8.6%208.6%200%200%201%2017.1%200M28.3%20234.3a10.5%2010.5%200%200%201%2020.9%200M40%20234.9a8.5%208.5%200%200%201%2017%200%27%2F%3E%3Cpath%20d%3D%27M6.6%20272.7a8.1%208.1%200%200%201%2016.1%200M15.7%20274.4a6.3%206.3%200%200%201%2012.6%200M21%20273.8a8.4%208.4%200%200%201%2016.7%200%27%2F%3E%3Cpath%20d%3D%27M118.4%20112.9L111.4%20101.6%20115.2%20101.6%20110%2090.3%20111.7%2090.3%20108.6%2079%20107.5%2079%20106.4%2079%20104.5%2090.3%20106.1%2090.3%20102.2%20101.6%20105.9%20101.6%20100.1%20112.9M109.3%20118L109.3%20112.9%27%2F%3E%3Cpath%20d%3D%27M37%20177.7L29.7%20170.2%2035.1%20170.2%2028.5%20162.7%2032.6%20162.7%2026.9%20155.2%2029.6%20155.2%2024.9%20147.7%2026.1%20147.7%2022.4%20140.2%2021.6%20140.2%2020.8%20140.2%2020.9%20147.7%2022.1%20147.7%2020.3%20155.2%2023%20155.2%2019.4%20162.7%2023.5%20162.7%2018.2%20170.2%2023.5%20170.2%2016.6%20177.7M26.8%20183.3L26.8%20177.7%27%2F%3E%3Cpath%20d%3D%27M191.8%2093L186.7%2085.6%20190.5%2085.6%20187%2078.2%20189.5%2078.2%20187.7%2070.8%20188.8%2070.8%20188.9%2063.4%20188.2%2063.4%20187.4%2063.4%20184%2070.8%20185.1%2070.8%20180.7%2078.2%20183.3%2078.2%20178.1%2085.6%20181.9%2085.6%20176%2093M183.9%2097.5L183.9%2093%27%2F%3E%3Cpath%20d%3D%27M189.5%20207.5L177.3%20190.8%20184.5%20190.8%20175.9%20174.2%20179.1%20174.2%20174.3%20157.5%20172.2%20157.5%20170.1%20157.5%20165.1%20174.2%20168.3%20174.2%20159.4%20190.8%20166.6%20190.8%20154%20207.5M171.7%20215L171.7%20207.5%27%2F%3E%3Cpath%20d%3D%27M91.1%20232.4L79.7%20222%2088.1%20222%2078.5%20211.6%2084.8%20211.6%2077.1%20201.2%2081.3%20201.2%2075.6%20190.8%2077.4%20190.8%2074%20180.4%2072.7%20180.4%2071.5%20180.4%2069.4%20190.8%2071.2%20190.8%2066.8%20201.2%2070.9%20201.2%2064.3%20211.6%2070.6%20211.6%2061.9%20222%2070.2%20222%2059.5%20232.4M75.3%20240.2L75.3%20232.4%27%2F%3E%3Cpath%20d%3D%27M249.7%2097.9L243.2%2091%20247.6%2091%20242.6%2084.1%20245.5%2084.1%20242%2077.2%20243.3%2077.2%20241.5%2070.2%20240.7%2070.2%20239.8%2070.2%20237.7%2077.2%20239%2077.2%20235.4%2084.1%20238.3%2084.1%20233.3%2091%20237.7%2091%20231.5%2097.9M240.6%20102.1L240.6%2097.9%27%2F%3E%3Cpath%20d%3D%27M63.1%20172.7L54.4%20163.4%2061.3%20163.4%2054.1%20154.1%2059.3%20154.1%2053.7%20144.8%2057.1%20144.8%2053.1%20135.5%2054.6%20135.5%2052.4%20126.2%2051.4%20126.2%2050.4%20126.2%2048%20135.5%2049.5%20135.5%2045.1%20144.8%2048.6%20144.8%2042.4%20154.1%2047.6%20154.1%2039.6%20163.4%2046.5%20163.4%2036.9%20172.7M50%20179.7L50%20172.7%27%2F%3E%3Cpath%20d%3D%27M196.3%20255.8L182.7%20239.9%20192.2%20239.9%20181.6%20224%20187.8%20224%20180.3%20208.1%20183.1%20208.1%20179%20192.2%20177.2%20192.2%20175.4%20192.2%20171.1%20208.1%20173.8%20208.1%20166.1%20224%20172.4%20224%20161.6%20239.9%20171%20239.9%20157.2%20255.8M176.7%20265.3L176.7%20255.8%27%2F%3E%3Cpath%20d%3D%27M280.2%20291.7L264.2%20270.7%20273.3%20270.7%20261.8%20249.6%20265.9%20249.6%20259.4%20228.5%20256.8%20228.5%20254.1%20228.5%20248.3%20249.6%20252.3%20249.6%20241.6%20270.7%20250.8%20270.7%20235.6%20291.7M257.9%20301.2L257.9%20291.7%27%2F%3E%3Cpath%20d%3D%27M230.3%20179L217.2%20167.2%20225.9%20167.2%20214.7%20155.4%20220.5%20155.4%20211.4%20143.6%20213.9%20143.6%20207.1%20131.9%20205.4%20131.9%20203.8%20131.9%20202.8%20143.6%20205.4%20143.6%20200.4%20155.4%20206.2%20155.4%20197.6%20167.2%20206.3%20167.2%20194.1%20179M212.2%20186.1L212.2%20179%27%2F%3E%3Cpath%20d%3D%27M170%20128.7L162%20122.2%20168.2%20122.2%20161.6%20115.6%20166.3%20115.6%20161.1%20109.1%20164.2%20109.1%20160.5%20102.6%20161.8%20102.6%20159.7%2096.1%20158.8%2096.1%20157.9%2096.1%20155.8%20102.6%20157.2%20102.6%20153.3%20109.1%20156.5%20109.1%20151%20115.6%20155.7%20115.6%20148.6%20122.2%20154.9%20122.2%20146.3%20128.7M158.2%20133.6L158.2%20128.7%27%2F%3E%3Cpath%20d%3D%27M153.6%20159.2L140.5%20147.7%20149.2%20147.7%20138.4%20136.3%20144.2%20136.3%20135.8%20124.9%20138.3%20124.9%20132.6%20113.5%20130.9%20113.5%20129.3%20113.5%20127.3%20124.9%20129.8%20124.9%20124.2%20136.3%20130%20136.3%20121%20147.7%20129.7%20147.7%20117.6%20159.2M135.6%20166L135.6%20159.2%27%2F%3E%3Cpath%20d%3D%27M307.9%20225.9L295%20214.6%20304.6%20214.6%20293.9%20203.4%20301.2%20203.4%20292.8%20192.1%20297.6%20192.1%20291.6%20180.8%20293.7%20180.8%20290.3%20169.5%20288.9%20169.5%20287.5%20169.5%20284.4%20180.8%20286.5%20180.8%20280.8%20192.1%20285.7%20192.1%20277.5%20203.4%20284.8%20203.4%20274.4%20214.6%20284%20214.6%20271.4%20225.9M289.7%20234.4L289.7%20225.9%27%2F%3E%3Cpath%20d%3D%27M144%20121.3L134.2%20108.2%20139.3%20108.2%20130.9%2095.1%20133.2%2095.1%20126.4%2082%20124.9%2082%20123.4%2082%20123.3%2095.1%20125.6%2095.1%20121.4%20108.2%20126.6%20108.2%20118.7%20121.3M131.3%20127.2L131.3%20121.3%27%2F%3E%3Cpath%20d%3D%27M47.8%20126.2L39.7%20117.9%2045.3%20117.9%2038.7%20109.6%2042.4%20109.6%2037.7%20101.3%2039.3%20101.3%2036.5%2093%2035.4%2093%2034.3%2093%2032.2%20101.3%2033.8%20101.3%2029.6%20109.6%2033.3%20109.6%2027.1%20117.9%2032.7%20117.9%2024.7%20126.2M36.3%20131.2L36.3%20126.2%27%2F%3E%3Cpath%20d%3D%27M142.5%20233.3L127.6%20218.1%20138.4%20218.1%20126.9%20202.9%20134.1%20202.9%20126.3%20187.6%20129.4%20187.6%20125.6%20172.4%20123.6%20172.4%20121.5%20172.4%20115.7%20187.6%20118.9%20187.6%20109.3%20202.9%20116.5%20202.9%20103.4%20218.1%20114.2%20218.1%2097.9%20233.3M120.2%20242.5L120.2%20233.3%27%2F%3E%3Cpath%20d%3D%27M104.6%20162.4L95.4%20153.2%20101.9%20153.2%2094.8%20144.1%2099.1%20144.1%2094.2%20135%2096.1%20135%2093.6%20125.9%2092.3%20125.9%2091.1%20125.9%2087.8%20135%2089.7%20135%2084.2%20144.1%2088.5%20144.1%2080.9%20153.2%2087.3%20153.2%2077.8%20162.4M91.2%20167.8L91.2%20162.4%27%2F%3E%3Cpath%20d%3D%27M244.3%20123.6L237%20115.8%20241.8%20115.8%20235.3%20107.9%20238.5%20107.9%20232.9%20100.1%20234.3%20100.1%20229.7%2092.3%20228.8%2092.3%20227.9%2092.3%20228.2%20100.1%20229.6%20100.1%20227.5%20107.9%20230.7%20107.9%20226.3%20115.8%20231.1%20115.8%20224.5%20123.6M234.4%20128.2L234.4%20123.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* Тот же еловый узор, но заметнее — для бумаги: на листе он должен читаться, а на экране достаточно лёгкого намёка. */ --pattern-print: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%231a5c39%27%20stroke-opacity%3D%270.30%27%20stroke-width%3D%270.85%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M247%20269.9l-6.3%20-3.1M247%20269.9l-4.4%20-5.4M247%20269.9l-1.2%20-6.9%27%2F%3E%3Cpath%20d%3D%27M191.5%20259.2l-8.5%20-5.4M191.5%20259.2l-5.9%20-8.1M191.5%20259.2l-2.9%20-9.6%27%2F%3E%3Cpath%20d%3D%27M226.9%20259.6l-9.1%20-5.9M226.9%20259.6l-5.9%20-9.1M226.9%20259.6l-3%20-10.4%27%2F%3E%3Cpath%20d%3D%27M34.2%20238.9l-7.6%20-3.5M34.2%20238.9l-5.4%20-6.4M34.2%20238.9l-1%20-8.3%27%2F%3E%3Cpath%20d%3D%27M111.3%20270.7l-9.1%20-6.1M111.3%20270.7l-6.7%20-8.7M111.3%20270.7l-1.8%20-10.8%27%2F%3E%3Cpath%20d%3D%27M193.1%20230.6l-8.8%20-5.8M193.1%20230.6l-7%20-7.9M193.1%20230.6l-2.6%20-10.2%27%2F%3E%3Cpath%20d%3D%27M113.2%20284.2l-8.7%20-5.3M113.2%20284.2l-5.3%20-8.7M113.2%20284.2l-2.6%20-9.8%27%2F%3E%3Cpath%20d%3D%27M46%20262.9l-8.7%20-3.9M46%20262.9l-5.4%20-7.9M46%20262.9l-2.3%20-9.3%27%2F%3E%3Cpath%20d%3D%27M59.2%20300.7a5.8%205.8%200%200%201%2011.7%200M64.1%20300.2a8.1%208.1%200%200%201%2016.2%200M73.3%20301a6.1%206.1%200%200%201%2012.1%200%27%2F%3E%3Cpath%20d%3D%27M179.9%20228.2a10.2%2010.2%200%200%201%2020.4%200M192.5%20228.8a7.2%207.2%200%200%201%2014.3%200M200.3%20229.1a8.9%208.9%200%200%201%2017.7%200%27%2F%3E%3Cpath%20d%3D%27M207.4%20260.9a8.8%208.8%200%200%201%2017.6%200M218.3%20262.7a6.5%206.5%200%200%201%2012.9%200M224%20262.5a9.4%209.4%200%200%201%2018.8%200%27%2F%3E%3Cpath%20d%3D%27M20.5%20234.5a8.6%208.6%200%200%201%2017.1%200M28.3%20234.3a10.5%2010.5%200%200%201%2020.9%200M40%20234.9a8.5%208.5%200%200%201%2017%200%27%2F%3E%3Cpath%20d%3D%27M6.6%20272.7a8.1%208.1%200%200%201%2016.1%200M15.7%20274.4a6.3%206.3%200%200%201%2012.6%200M21%20273.8a8.4%208.4%200%200%201%2016.7%200%27%2F%3E%3Cpath%20d%3D%27M118.4%20112.9L111.4%20101.6%20115.2%20101.6%20110%2090.3%20111.7%2090.3%20108.6%2079%20107.5%2079%20106.4%2079%20104.5%2090.3%20106.1%2090.3%20102.2%20101.6%20105.9%20101.6%20100.1%20112.9M109.3%20118L109.3%20112.9%27%2F%3E%3Cpath%20d%3D%27M37%20177.7L29.7%20170.2%2035.1%20170.2%2028.5%20162.7%2032.6%20162.7%2026.9%20155.2%2029.6%20155.2%2024.9%20147.7%2026.1%20147.7%2022.4%20140.2%2021.6%20140.2%2020.8%20140.2%2020.9%20147.7%2022.1%20147.7%2020.3%20155.2%2023%20155.2%2019.4%20162.7%2023.5%20162.7%2018.2%20170.2%2023.5%20170.2%2016.6%20177.7M26.8%20183.3L26.8%20177.7%27%2F%3E%3Cpath%20d%3D%27M191.8%2093L186.7%2085.6%20190.5%2085.6%20187%2078.2%20189.5%2078.2%20187.7%2070.8%20188.8%2070.8%20188.9%2063.4%20188.2%2063.4%20187.4%2063.4%20184%2070.8%20185.1%2070.8%20180.7%2078.2%20183.3%2078.2%20178.1%2085.6%20181.9%2085.6%20176%2093M183.9%2097.5L183.9%2093%27%2F%3E%3Cpath%20d%3D%27M189.5%20207.5L177.3%20190.8%20184.5%20190.8%20175.9%20174.2%20179.1%20174.2%20174.3%20157.5%20172.2%20157.5%20170.1%20157.5%20165.1%20174.2%20168.3%20174.2%20159.4%20190.8%20166.6%20190.8%20154%20207.5M171.7%20215L171.7%20207.5%27%2F%3E%3Cpath%20d%3D%27M91.1%20232.4L79.7%20222%2088.1%20222%2078.5%20211.6%2084.8%20211.6%2077.1%20201.2%2081.3%20201.2%2075.6%20190.8%2077.4%20190.8%2074%20180.4%2072.7%20180.4%2071.5%20180.4%2069.4%20190.8%2071.2%20190.8%2066.8%20201.2%2070.9%20201.2%2064.3%20211.6%2070.6%20211.6%2061.9%20222%2070.2%20222%2059.5%20232.4M75.3%20240.2L75.3%20232.4%27%2F%3E%3Cpath%20d%3D%27M249.7%2097.9L243.2%2091%20247.6%2091%20242.6%2084.1%20245.5%2084.1%20242%2077.2%20243.3%2077.2%20241.5%2070.2%20240.7%2070.2%20239.8%2070.2%20237.7%2077.2%20239%2077.2%20235.4%2084.1%20238.3%2084.1%20233.3%2091%20237.7%2091%20231.5%2097.9M240.6%20102.1L240.6%2097.9%27%2F%3E%3Cpath%20d%3D%27M63.1%20172.7L54.4%20163.4%2061.3%20163.4%2054.1%20154.1%2059.3%20154.1%2053.7%20144.8%2057.1%20144.8%2053.1%20135.5%2054.6%20135.5%2052.4%20126.2%2051.4%20126.2%2050.4%20126.2%2048%20135.5%2049.5%20135.5%2045.1%20144.8%2048.6%20144.8%2042.4%20154.1%2047.6%20154.1%2039.6%20163.4%2046.5%20163.4%2036.9%20172.7M50%20179.7L50%20172.7%27%2F%3E%3Cpath%20d%3D%27M196.3%20255.8L182.7%20239.9%20192.2%20239.9%20181.6%20224%20187.8%20224%20180.3%20208.1%20183.1%20208.1%20179%20192.2%20177.2%20192.2%20175.4%20192.2%20171.1%20208.1%20173.8%20208.1%20166.1%20224%20172.4%20224%20161.6%20239.9%20171%20239.9%20157.2%20255.8M176.7%20265.3L176.7%20255.8%27%2F%3E%3Cpath%20d%3D%27M280.2%20291.7L264.2%20270.7%20273.3%20270.7%20261.8%20249.6%20265.9%20249.6%20259.4%20228.5%20256.8%20228.5%20254.1%20228.5%20248.3%20249.6%20252.3%20249.6%20241.6%20270.7%20250.8%20270.7%20235.6%20291.7M257.9%20301.2L257.9%20291.7%27%2F%3E%3Cpath%20d%3D%27M230.3%20179L217.2%20167.2%20225.9%20167.2%20214.7%20155.4%20220.5%20155.4%20211.4%20143.6%20213.9%20143.6%20207.1%20131.9%20205.4%20131.9%20203.8%20131.9%20202.8%20143.6%20205.4%20143.6%20200.4%20155.4%20206.2%20155.4%20197.6%20167.2%20206.3%20167.2%20194.1%20179M212.2%20186.1L212.2%20179%27%2F%3E%3Cpath%20d%3D%27M170%20128.7L162%20122.2%20168.2%20122.2%20161.6%20115.6%20166.3%20115.6%20161.1%20109.1%20164.2%20109.1%20160.5%20102.6%20161.8%20102.6%20159.7%2096.1%20158.8%2096.1%20157.9%2096.1%20155.8%20102.6%20157.2%20102.6%20153.3%20109.1%20156.5%20109.1%20151%20115.6%20155.7%20115.6%20148.6%20122.2%20154.9%20122.2%20146.3%20128.7M158.2%20133.6L158.2%20128.7%27%2F%3E%3Cpath%20d%3D%27M153.6%20159.2L140.5%20147.7%20149.2%20147.7%20138.4%20136.3%20144.2%20136.3%20135.8%20124.9%20138.3%20124.9%20132.6%20113.5%20130.9%20113.5%20129.3%20113.5%20127.3%20124.9%20129.8%20124.9%20124.2%20136.3%20130%20136.3%20121%20147.7%20129.7%20147.7%20117.6%20159.2M135.6%20166L135.6%20159.2%27%2F%3E%3Cpath%20d%3D%27M307.9%20225.9L295%20214.6%20304.6%20214.6%20293.9%20203.4%20301.2%20203.4%20292.8%20192.1%20297.6%20192.1%20291.6%20180.8%20293.7%20180.8%20290.3%20169.5%20288.9%20169.5%20287.5%20169.5%20284.4%20180.8%20286.5%20180.8%20280.8%20192.1%20285.7%20192.1%20277.5%20203.4%20284.8%20203.4%20274.4%20214.6%20284%20214.6%20271.4%20225.9M289.7%20234.4L289.7%20225.9%27%2F%3E%3Cpath%20d%3D%27M144%20121.3L134.2%20108.2%20139.3%20108.2%20130.9%2095.1%20133.2%2095.1%20126.4%2082%20124.9%2082%20123.4%2082%20123.3%2095.1%20125.6%2095.1%20121.4%20108.2%20126.6%20108.2%20118.7%20121.3M131.3%20127.2L131.3%20121.3%27%2F%3E%3Cpath%20d%3D%27M47.8%20126.2L39.7%20117.9%2045.3%20117.9%2038.7%20109.6%2042.4%20109.6%2037.7%20101.3%2039.3%20101.3%2036.5%2093%2035.4%2093%2034.3%2093%2032.2%20101.3%2033.8%20101.3%2029.6%20109.6%2033.3%20109.6%2027.1%20117.9%2032.7%20117.9%2024.7%20126.2M36.3%20131.2L36.3%20126.2%27%2F%3E%3Cpath%20d%3D%27M142.5%20233.3L127.6%20218.1%20138.4%20218.1%20126.9%20202.9%20134.1%20202.9%20126.3%20187.6%20129.4%20187.6%20125.6%20172.4%20123.6%20172.4%20121.5%20172.4%20115.7%20187.6%20118.9%20187.6%20109.3%20202.9%20116.5%20202.9%20103.4%20218.1%20114.2%20218.1%2097.9%20233.3M120.2%20242.5L120.2%20233.3%27%2F%3E%3Cpath%20d%3D%27M104.6%20162.4L95.4%20153.2%20101.9%20153.2%2094.8%20144.1%2099.1%20144.1%2094.2%20135%2096.1%20135%2093.6%20125.9%2092.3%20125.9%2091.1%20125.9%2087.8%20135%2089.7%20135%2084.2%20144.1%2088.5%20144.1%2080.9%20153.2%2087.3%20153.2%2077.8%20162.4M91.2%20167.8L91.2%20162.4%27%2F%3E%3Cpath%20d%3D%27M244.3%20123.6L237%20115.8%20241.8%20115.8%20235.3%20107.9%20238.5%20107.9%20232.9%20100.1%20234.3%20100.1%20229.7%2092.3%20228.8%2092.3%20227.9%2092.3%20228.2%20100.1%20229.6%20100.1%20227.5%20107.9%20230.7%20107.9%20226.3%20115.8%20231.1%20115.8%20224.5%20123.6M234.4%20128.2L234.4%20123.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --pattern: var(--pattern-light); /* цвета текста, которые меняются в тёмной теме */ --link: #1f7a4c; /* ссылки и зелёный текст */ --debt-text: #b3261e; /* суммы долга */ --over-text: #1a5c39; /* суммы переплаты */ --r-card: 12px; --r-btn: 9px; --r-pill: 999px; /* Высота шапки. От неё считается меню на телефоне: оно висит под шапкой и не должно вылезать за экран. Значение совпадает с min-height у .hdr__in плюс рамка снизу. */ --hdr-h: 67px; /* Значок «скопировать». В светлой теме тёмный, в тёмной — светлый; второй вариант объявлен ниже, в блоке тёмной темы. */ --ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); --shadow: 0 1px 2px rgba(16, 40, 26, .06), 0 6px 18px rgba(16, 40, 26, .06); --shadow-lg: 0 12px 34px rgba(16, 40, 26, .14); --wrap: 1140px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* --------------------------------------------------------------- тёмная тема Атрибут data-theme ставит скрипт в до отрисовки страницы: он берёт сохранённый выбор, а если выбора нет — системную настройку. Поэтому здесь достаточно одного селектора, без media-запроса. */ :root[data-theme="dark"] { /* значок копирования: в светлой теме тёмный, в тёмной — светлый */ --ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); --sand: #101713; --white: #1a231e; --ink: #e9efeb; --muted: #9aa8a0; --line: #2b3a32; --green-100: #1c3128; --green-50: #16261e; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .4); --warn-bg: #2e2410; --warn-line: #6b5520; --warn: #e8c97a; --danger-bg: #351a18; --danger-line: #6e3630; --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2357c98d%27%20stroke-opacity%3D%270.13%27%20stroke-width%3D%270.85%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M247%20269.9l-6.3%20-3.1M247%20269.9l-4.4%20-5.4M247%20269.9l-1.2%20-6.9%27%2F%3E%3Cpath%20d%3D%27M191.5%20259.2l-8.5%20-5.4M191.5%20259.2l-5.9%20-8.1M191.5%20259.2l-2.9%20-9.6%27%2F%3E%3Cpath%20d%3D%27M226.9%20259.6l-9.1%20-5.9M226.9%20259.6l-5.9%20-9.1M226.9%20259.6l-3%20-10.4%27%2F%3E%3Cpath%20d%3D%27M34.2%20238.9l-7.6%20-3.5M34.2%20238.9l-5.4%20-6.4M34.2%20238.9l-1%20-8.3%27%2F%3E%3Cpath%20d%3D%27M111.3%20270.7l-9.1%20-6.1M111.3%20270.7l-6.7%20-8.7M111.3%20270.7l-1.8%20-10.8%27%2F%3E%3Cpath%20d%3D%27M193.1%20230.6l-8.8%20-5.8M193.1%20230.6l-7%20-7.9M193.1%20230.6l-2.6%20-10.2%27%2F%3E%3Cpath%20d%3D%27M113.2%20284.2l-8.7%20-5.3M113.2%20284.2l-5.3%20-8.7M113.2%20284.2l-2.6%20-9.8%27%2F%3E%3Cpath%20d%3D%27M46%20262.9l-8.7%20-3.9M46%20262.9l-5.4%20-7.9M46%20262.9l-2.3%20-9.3%27%2F%3E%3Cpath%20d%3D%27M59.2%20300.7a5.8%205.8%200%200%201%2011.7%200M64.1%20300.2a8.1%208.1%200%200%201%2016.2%200M73.3%20301a6.1%206.1%200%200%201%2012.1%200%27%2F%3E%3Cpath%20d%3D%27M179.9%20228.2a10.2%2010.2%200%200%201%2020.4%200M192.5%20228.8a7.2%207.2%200%200%201%2014.3%200M200.3%20229.1a8.9%208.9%200%200%201%2017.7%200%27%2F%3E%3Cpath%20d%3D%27M207.4%20260.9a8.8%208.8%200%200%201%2017.6%200M218.3%20262.7a6.5%206.5%200%200%201%2012.9%200M224%20262.5a9.4%209.4%200%200%201%2018.8%200%27%2F%3E%3Cpath%20d%3D%27M20.5%20234.5a8.6%208.6%200%200%201%2017.1%200M28.3%20234.3a10.5%2010.5%200%200%201%2020.9%200M40%20234.9a8.5%208.5%200%200%201%2017%200%27%2F%3E%3Cpath%20d%3D%27M6.6%20272.7a8.1%208.1%200%200%201%2016.1%200M15.7%20274.4a6.3%206.3%200%200%201%2012.6%200M21%20273.8a8.4%208.4%200%200%201%2016.7%200%27%2F%3E%3Cpath%20d%3D%27M118.4%20112.9L111.4%20101.6%20115.2%20101.6%20110%2090.3%20111.7%2090.3%20108.6%2079%20107.5%2079%20106.4%2079%20104.5%2090.3%20106.1%2090.3%20102.2%20101.6%20105.9%20101.6%20100.1%20112.9M109.3%20118L109.3%20112.9%27%2F%3E%3Cpath%20d%3D%27M37%20177.7L29.7%20170.2%2035.1%20170.2%2028.5%20162.7%2032.6%20162.7%2026.9%20155.2%2029.6%20155.2%2024.9%20147.7%2026.1%20147.7%2022.4%20140.2%2021.6%20140.2%2020.8%20140.2%2020.9%20147.7%2022.1%20147.7%2020.3%20155.2%2023%20155.2%2019.4%20162.7%2023.5%20162.7%2018.2%20170.2%2023.5%20170.2%2016.6%20177.7M26.8%20183.3L26.8%20177.7%27%2F%3E%3Cpath%20d%3D%27M191.8%2093L186.7%2085.6%20190.5%2085.6%20187%2078.2%20189.5%2078.2%20187.7%2070.8%20188.8%2070.8%20188.9%2063.4%20188.2%2063.4%20187.4%2063.4%20184%2070.8%20185.1%2070.8%20180.7%2078.2%20183.3%2078.2%20178.1%2085.6%20181.9%2085.6%20176%2093M183.9%2097.5L183.9%2093%27%2F%3E%3Cpath%20d%3D%27M189.5%20207.5L177.3%20190.8%20184.5%20190.8%20175.9%20174.2%20179.1%20174.2%20174.3%20157.5%20172.2%20157.5%20170.1%20157.5%20165.1%20174.2%20168.3%20174.2%20159.4%20190.8%20166.6%20190.8%20154%20207.5M171.7%20215L171.7%20207.5%27%2F%3E%3Cpath%20d%3D%27M91.1%20232.4L79.7%20222%2088.1%20222%2078.5%20211.6%2084.8%20211.6%2077.1%20201.2%2081.3%20201.2%2075.6%20190.8%2077.4%20190.8%2074%20180.4%2072.7%20180.4%2071.5%20180.4%2069.4%20190.8%2071.2%20190.8%2066.8%20201.2%2070.9%20201.2%2064.3%20211.6%2070.6%20211.6%2061.9%20222%2070.2%20222%2059.5%20232.4M75.3%20240.2L75.3%20232.4%27%2F%3E%3Cpath%20d%3D%27M249.7%2097.9L243.2%2091%20247.6%2091%20242.6%2084.1%20245.5%2084.1%20242%2077.2%20243.3%2077.2%20241.5%2070.2%20240.7%2070.2%20239.8%2070.2%20237.7%2077.2%20239%2077.2%20235.4%2084.1%20238.3%2084.1%20233.3%2091%20237.7%2091%20231.5%2097.9M240.6%20102.1L240.6%2097.9%27%2F%3E%3Cpath%20d%3D%27M63.1%20172.7L54.4%20163.4%2061.3%20163.4%2054.1%20154.1%2059.3%20154.1%2053.7%20144.8%2057.1%20144.8%2053.1%20135.5%2054.6%20135.5%2052.4%20126.2%2051.4%20126.2%2050.4%20126.2%2048%20135.5%2049.5%20135.5%2045.1%20144.8%2048.6%20144.8%2042.4%20154.1%2047.6%20154.1%2039.6%20163.4%2046.5%20163.4%2036.9%20172.7M50%20179.7L50%20172.7%27%2F%3E%3Cpath%20d%3D%27M196.3%20255.8L182.7%20239.9%20192.2%20239.9%20181.6%20224%20187.8%20224%20180.3%20208.1%20183.1%20208.1%20179%20192.2%20177.2%20192.2%20175.4%20192.2%20171.1%20208.1%20173.8%20208.1%20166.1%20224%20172.4%20224%20161.6%20239.9%20171%20239.9%20157.2%20255.8M176.7%20265.3L176.7%20255.8%27%2F%3E%3Cpath%20d%3D%27M280.2%20291.7L264.2%20270.7%20273.3%20270.7%20261.8%20249.6%20265.9%20249.6%20259.4%20228.5%20256.8%20228.5%20254.1%20228.5%20248.3%20249.6%20252.3%20249.6%20241.6%20270.7%20250.8%20270.7%20235.6%20291.7M257.9%20301.2L257.9%20291.7%27%2F%3E%3Cpath%20d%3D%27M230.3%20179L217.2%20167.2%20225.9%20167.2%20214.7%20155.4%20220.5%20155.4%20211.4%20143.6%20213.9%20143.6%20207.1%20131.9%20205.4%20131.9%20203.8%20131.9%20202.8%20143.6%20205.4%20143.6%20200.4%20155.4%20206.2%20155.4%20197.6%20167.2%20206.3%20167.2%20194.1%20179M212.2%20186.1L212.2%20179%27%2F%3E%3Cpath%20d%3D%27M170%20128.7L162%20122.2%20168.2%20122.2%20161.6%20115.6%20166.3%20115.6%20161.1%20109.1%20164.2%20109.1%20160.5%20102.6%20161.8%20102.6%20159.7%2096.1%20158.8%2096.1%20157.9%2096.1%20155.8%20102.6%20157.2%20102.6%20153.3%20109.1%20156.5%20109.1%20151%20115.6%20155.7%20115.6%20148.6%20122.2%20154.9%20122.2%20146.3%20128.7M158.2%20133.6L158.2%20128.7%27%2F%3E%3Cpath%20d%3D%27M153.6%20159.2L140.5%20147.7%20149.2%20147.7%20138.4%20136.3%20144.2%20136.3%20135.8%20124.9%20138.3%20124.9%20132.6%20113.5%20130.9%20113.5%20129.3%20113.5%20127.3%20124.9%20129.8%20124.9%20124.2%20136.3%20130%20136.3%20121%20147.7%20129.7%20147.7%20117.6%20159.2M135.6%20166L135.6%20159.2%27%2F%3E%3Cpath%20d%3D%27M307.9%20225.9L295%20214.6%20304.6%20214.6%20293.9%20203.4%20301.2%20203.4%20292.8%20192.1%20297.6%20192.1%20291.6%20180.8%20293.7%20180.8%20290.3%20169.5%20288.9%20169.5%20287.5%20169.5%20284.4%20180.8%20286.5%20180.8%20280.8%20192.1%20285.7%20192.1%20277.5%20203.4%20284.8%20203.4%20274.4%20214.6%20284%20214.6%20271.4%20225.9M289.7%20234.4L289.7%20225.9%27%2F%3E%3Cpath%20d%3D%27M144%20121.3L134.2%20108.2%20139.3%20108.2%20130.9%2095.1%20133.2%2095.1%20126.4%2082%20124.9%2082%20123.4%2082%20123.3%2095.1%20125.6%2095.1%20121.4%20108.2%20126.6%20108.2%20118.7%20121.3M131.3%20127.2L131.3%20121.3%27%2F%3E%3Cpath%20d%3D%27M47.8%20126.2L39.7%20117.9%2045.3%20117.9%2038.7%20109.6%2042.4%20109.6%2037.7%20101.3%2039.3%20101.3%2036.5%2093%2035.4%2093%2034.3%2093%2032.2%20101.3%2033.8%20101.3%2029.6%20109.6%2033.3%20109.6%2027.1%20117.9%2032.7%20117.9%2024.7%20126.2M36.3%20131.2L36.3%20126.2%27%2F%3E%3Cpath%20d%3D%27M142.5%20233.3L127.6%20218.1%20138.4%20218.1%20126.9%20202.9%20134.1%20202.9%20126.3%20187.6%20129.4%20187.6%20125.6%20172.4%20123.6%20172.4%20121.5%20172.4%20115.7%20187.6%20118.9%20187.6%20109.3%20202.9%20116.5%20202.9%20103.4%20218.1%20114.2%20218.1%2097.9%20233.3M120.2%20242.5L120.2%20233.3%27%2F%3E%3Cpath%20d%3D%27M104.6%20162.4L95.4%20153.2%20101.9%20153.2%2094.8%20144.1%2099.1%20144.1%2094.2%20135%2096.1%20135%2093.6%20125.9%2092.3%20125.9%2091.1%20125.9%2087.8%20135%2089.7%20135%2084.2%20144.1%2088.5%20144.1%2080.9%20153.2%2087.3%20153.2%2077.8%20162.4M91.2%20167.8L91.2%20162.4%27%2F%3E%3Cpath%20d%3D%27M244.3%20123.6L237%20115.8%20241.8%20115.8%20235.3%20107.9%20238.5%20107.9%20232.9%20100.1%20234.3%20100.1%20229.7%2092.3%20228.8%2092.3%20227.9%2092.3%20228.2%20100.1%20229.6%20100.1%20227.5%20107.9%20230.7%20107.9%20226.3%20115.8%20231.1%20115.8%20224.5%20123.6M234.4%20128.2L234.4%20123.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* на тёмном фоне тёмно-зелёный и тёмно-красный нечитаемы — берём светлые оттенки той же гаммы (проверено: не ниже 7:1) */ --link: #57c98d; --debt-text: #ff9b93; --over-text: #7fdcab; } * { box-sizing: border-box; } /* Атрибут hidden должен побеждать любой display из наших правил. Без этого блок, которому скрипт ставит hidden, продолжал показываться: например, пустая зелёная полоса дней рождения на главной. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background-color: var(--sand); /* Узор кладём поверх цвета: если браузер не поймёт data-URI, останется ровный песочный фон, а не белый. */ background-image: var(--pattern); background-size: 320px 320px; overflow-wrap: break-word; /* Прижимаем подвал к низу экрана. На коротких страницах («Полезное», «Документы», 404) содержимое короче экрана, и подвал вставал сразу после него — посередине страницы, а под ним оставалась пустая полоса фона. Растягиваем тело на всю высоту и отдаём подвалу остаток: правило .ftr { margin-top: auto } ниже. 100dvh — высота с учётом панелей браузера на телефоне; где не поддерживается, работает 100vh. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; } h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); letter-spacing: -.01em; } h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--green-800); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-btn) 0; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------------ шапка */ .hdr { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); } .hdr__in { display: flex; align-items: center; gap: 14px; min-height: 78px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: 0 0 auto; } /* Логотип посёлка: надпись с короной. «Тушь» набрана currentColor, поэтому в тёмной теме логотип светлеет сам. Корона в светлой теме — тёмное золото: ярко-жёлтая на светлой шапке почти не видна. */ .brand__logo { display: block; color: #22201e; --logo-crown: #9c6b10; } .brand__logo svg { display: block; height: 58px; width: auto; } :root[data-theme="dark"] .brand__logo { color: #eef4f0; --logo-crown: #ffed00; } .burger { margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--line); border-radius: var(--r-btn); cursor: pointer; } .burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; } body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .burger span:nth-child(2) { opacity: 0; } body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* кнопка переключения темы */ .theme { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; } .theme:hover { background: var(--green-50); border-color: var(--green-500); } .theme:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; } .theme__ico { width: 20px; height: 20px; display: block; } /* показываем ту иконку, которая получится после нажатия: светлая тема — луна («сделать тёмной»), тёмная — солнце */ :root[data-theme="dark"] .theme__ico--moon { display: none; } :root:not([data-theme="dark"]) .theme__ico--sun { display: none; } /* ------------------------------------------------------------------ поиск Кнопка стоит в шапке между меню и переключателем темы. На широком экране это «таблетка» с иконкой, словом и подсказкой про клавишу «/»; на телефоне остаётся одна иконка — места в шапке мало. Окно поиска — своё, без внешних служб: список находок собирает assets/js/search.js из assets/search.json. */ /* Считаем от телефона: там кнопка — просто лупа в кружке. Слово «Найти» и подсказку про клавишу «/» дописываем только на широком экране, где для них есть место. Так надёжнее, чем прятать их на узком: если правило спрячет что-то не то, на телефоне кнопка всё равно останется кружком с лупой, а не огрызком слова. */ .srch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 42px; height: 42px; padding: 0; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--muted); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .srch:hover { background: var(--green-50); border-color: var(--green-500); color: var(--ink); } .srch:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; } .srch__ico { width: 20px; height: 20px; display: block; flex: 0 0 auto; } .srch__t, .srch__k { display: none; } @media (min-width: 1120px) { .srch { width: auto; padding: 0 14px; } .srch__t { display: block; font-size: .95rem; font-weight: 600; } .srch__k { display: inline-block; font: inherit; font-size: .75rem; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--green-50); color: var(--muted); } } @media (max-width: 400px) { .srch { width: 38px; height: 38px; } .srch__ico { width: 18px; height: 18px; } } .no-js .srch { display: none; } /* без скрипта искать нечем */ .srch-box { position: fixed; inset: 0; z-index: 60; } .srch-box__back { position: absolute; inset: 0; background: rgba(8, 20, 14, .55); animation: srch-fade .15s ease-out; } .srch-box__in { position: relative; z-index: 1; width: min(720px, calc(100% - 24px)); margin: 7vh auto 0; padding: 14px 14px 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg); animation: srch-up .18s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes srch-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes srch-up { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } } .srch-box__head { display: flex; align-items: center; gap: 10px; } .srch-box__ico { width: 22px; height: 22px; color: var(--muted); flex: 0 0 auto; } .srch-box__q { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; } .srch-box__q:focus { outline: none; } .srch-box__q::-webkit-search-cancel-button { display: none; } .srch-box__x { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--muted); cursor: pointer; } .srch-box__x:hover { background: var(--green-50); color: var(--ink); } .srch-box__x svg { width: 18px; height: 18px; display: block; } .srch-box__hint { margin: 2px 4px 10px; font-size: .82rem; color: var(--muted); } .srch-box__list { max-height: min(58vh, 520px); overflow-y: auto; border-top: 1px solid var(--line); padding: 6px 0 8px; } .srch__empty { margin: 14px 6px; color: var(--muted); font-size: .95rem; } .srch__empty a { color: var(--link); } /* Строки находок. Классы названы «srch-hit…», а не «srch__…», нарочно: у кнопки в шапке тоже есть .srch__t (слово «Найти»), и раньше общее имя перебивало её ширину и «Найти» вылезало на телефоне огрызком. */ .srch-hit { display: block; padding: 11px 12px; border-radius: var(--r-btn); text-decoration: none; color: inherit; border-left: 3px solid transparent; } .srch-hit:hover, .srch-hit[aria-selected="true"] { background: var(--green-50); border-left-color: var(--green-500); } .srch-hit__t { display: block; font-weight: 700; color: var(--ink); font-size: 1.02rem; } .srch-hit__w { display: block; margin-top: 1px; font-size: .8rem; color: var(--muted); } .srch-hit__x { display: block; margin-top: 3px; font-size: .88rem; color: var(--muted); line-height: 1.45; } .srch-box__list mark { background: var(--green-100); color: var(--ink); border-radius: 4px; padding: 0 2px; } :root[data-theme="dark"] .srch-box__list mark { background: rgba(0, 255, 136, .22); color: var(--ink); } body.srch-open { overflow: hidden; } @media (max-width: 600px) { .srch-box__in { margin-top: 0; width: 100%; border-radius: 0; min-height: 100%; padding: 12px 12px 4px; } .srch-box__list { max-height: none; } } @media print { .srch, .srch-box { display: none !important; } } /* меню */ .nav { display: none; } /* На телефоне подпись «ТСН · Всеволожский район» уступает место логотипу: сама надпись «Царёва Дача» и так всё объясняет. */ @media (max-width: 560px) { .brand__sub { display: none; } .brand__logo svg { height: 46px; } .hdr__in { min-height: 68px; } } /* На узких телефонах шапка не помещалась: логотип, бургер и кнопка темы занимали 340 точек при экране 320 — страница начинала прокручиваться вбок. Ужимаем всё понемногу. */ @media (max-width: 400px) { .hdr__in { gap: 8px; } .brand { gap: 7px; } .brand__logo svg { height: 40px; } .burger { width: 40px; height: 40px; padding: 9px; } .theme { width: 38px; height: 38px; } .theme__ico { width: 18px; height: 18px; } } /* --------------------------------------------------------------------------- Страховка на случай, если скрипт не загрузился. В стоит класс no-js, и первый же скрипт в меняет его на js. Если скрипт не выполнился — меню остаётся обычным списком ссылок, а не мёртвой кнопкой-бургером. --------------------------------------------------------------------------- */ .no-js .burger { display: none; } .no-js .hdr__in { flex-wrap: wrap; } .no-js .nav { display: block; order: 3; width: 100%; margin: 0; position: static; border: 0; box-shadow: none; padding: 4px 0 8px; } .no-js .nav__list { display: flex; flex-wrap: wrap; gap: 2px 14px; } .no-js .nav__item > a { padding: 6px 0; border: 0; font-size: .93rem; } .no-js .nav__sub { display: flex; flex-wrap: wrap; gap: 2px 12px; position: static; border: 0; box-shadow: none; padding: 0 0 4px 12px; min-width: 0; } .no-js .nav__sub a { padding: 4px 0; font-size: .86rem; } body.nav-open .nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 8px 0 14px; /* Меню длиннее экрана телефона: в нём 17 строк, это 820 точек. Раньше оно просто свисало вниз, и на экране 360x640 нижние 246 точек — включая «Контакты» — оказывались под панелью браузера. Прокрутка страницы не помогала: шапка приклеена, меню двигалось вместе с ней. Поэтому ограничиваем высоту и разрешаем прокручивать само меню. 100dvh — высота с учётом панелей браузера, которые то появляются, то прячутся. Где не поддерживается — остаётся 100vh. */ max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* на iPhone снизу полоска-индикатор: последний пункт не должен оказаться под ней */ padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .nav__list, .nav__sub { list-style: none; margin: 0; padding: 0; } .nav__item > a { display: block; padding: 12px 16px; text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); } .nav__item:last-child > a { border-bottom: 0; } .nav__item.is-on > a { color: var(--green-600); } .nav__sub a { display: block; padding: 9px 16px 9px 30px; text-decoration: none; color: var(--muted); font-size: .95rem; } .nav__sub a:hover { color: var(--green-600); } .nav__sub .is-on a { color: var(--green-600); font-weight: 600; } /* Горизонтальное меню включаем с 1120 px: при более узком экране восемь пунктов и подзаголовок бренда упираются в край. */ @media (min-width: 1120px) { .burger { display: none; } .nav { display: block; margin-left: auto; } body.nav-open .nav { position: static; box-shadow: none; border: 0; padding: 0; } .nav__list { display: flex; align-items: center; gap: 2px; } .nav__item { position: relative; } .nav__item > a { padding: 10px 12px; border: 0; border-radius: var(--r-btn); font-size: .95rem; font-weight: 500; white-space: nowrap; } .nav__item > a:hover { background: var(--green-50); } .nav__item.is-on > a { background: var(--green-100); color: var(--green-800); } :root[data-theme="dark"] .nav__item.is-on > a { color: var(--ink); } .nav__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; } .nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { display: block; } .nav__sub a { padding: 9px 12px; border-radius: var(--r-btn); } .nav__sub a:hover { background: var(--green-50); } } /* ---------------------------------------------------------------- главная */ .hero { position: relative; color: #fff; background-color: var(--green-800); background-image: linear-gradient(180deg, rgba(15, 51, 32, .82) 0%, rgba(15, 51, 32, .60) 46%, rgba(15, 51, 32, .90) 100%), var(--hero-img, none); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; padding: 44px 0 38px; } .hero__in { position: relative; z-index: 1; max-width: 640px; } .hero h1 { color: #fff; margin-bottom: .35em; } .hero__lead { font-size: 1.05rem; color: #d8e8de; margin-bottom: 22px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 26px; border-radius: var(--r-btn); border: 2px solid transparent; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .12s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--gold); color: #241a05; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); } .btn--primary:hover { background: #d9a94f; color: #241a05; } .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .55); } .btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; } .btn--green { background: var(--green-600); color: #fff; } .btn--green:hover { background: var(--green-700); color: #fff; } .btn--wide { width: 100%; } /* значок мессенджера внутри кнопки */ .btn__i { width: 21px; height: 21px; flex: 0 0 auto; display: block; } /* и в списке подвала */ /* Значки MAX и ВК в подвале стоят в строке с текстом. Общее правило img { display: block } делает картинку блочной, и значок уезжал на отдельную строку над надписью — приходилось возвращать ему строчное поведение. */ .ftr__i { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 8px; } /* важное объявление на главной. Класс свой, а не общий с предупреждениями метеостанции: те задают рамку по-своему и отбирали у объявления толстую полосу слева. */ .anons { display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 0; padding: 16px 18px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-left: 5px solid var(--warn); border-radius: var(--r-card); } .anons__ico { flex: 0 0 auto; width: 26px; height: 26px; color: var(--warn); margin-top: 2px; } .anons__ico svg { width: 100%; height: 100%; display: block; } .anons__body { margin: 0; } .anons strong { color: var(--warn); } /* ссылка на архив объявлений под блоком */ .anons__more { margin: 8px 0 0; font-size: .9rem; } /* секции */ .sec { padding: 40px 0 8px; } .sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .sec__head h2 { margin: 0; } .sec__more { font-size: .95rem; white-space: nowrap; } /* плитки */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } } /* очень узкие экраны: в две колонки плитки не помещаются */ @media (max-width: 359px) { .tiles { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; position: relative; overflow: hidden; } /* Мягкое зелёное свечение в углу — плитки перестают быть плоскими. Светится всегда, при наведении сильнее: на телефоне наведения нет, и эффект, работающий только по курсору, там просто пропадал. */ .tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(135% 115% at 100% 0%, color-mix(in srgb, var(--green-500) 30%, transparent), transparent 66%); opacity: .9; transition: opacity .16s ease; } .tile:hover::before { opacity: 1; } .tile > * { position: relative; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green-500); color: inherit; } .tile__ico { width: 30px; height: 30px; color: var(--green-600); margin-bottom: 5px; display: grid; place-items: center; flex: 0 0 auto; } .tile__ico svg { width: 100%; height: 100%; display: block; } .tile__t { font-weight: 700; font-size: 1rem; overflow-wrap: break-word; } .tile__d { font-size: .82rem; color: var(--muted); line-height: 1.4; } /* ------------------------------------------------- акцент под заголовками Заголовки разделов «висели» в воздухе. Короткая зелёная черта под ними собирает страницу и задаёт ритм. В карточках и у заголовков метео линия лишняя — там свои акценты. */ .sec__head h2, .page h2 { position: relative; padding-bottom: 13px; } .sec__head h2::after, .page h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 2px; background: var(--green-500); } :root[data-theme="dark"] .sec__head h2::after, :root[data-theme="dark"] .page h2::after { background: var(--green-600); } .ctc__card h2, .mt-h { padding-bottom: 0; } .ctc__card h2::after, .mt-h::after { display: none; } /* новости */ .cards { display: grid; gap: 14px; } @media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .14s ease, box-shadow .14s ease; } a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; } .card__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--green-100); } .card__b { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card__date { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .card__t { font-weight: 700; font-size: 1.05rem; margin: 0; } .card__s { font-size: .92rem; color: var(--muted); margin: 0; } /* реквизиты + QR */ .req { display: grid; gap: 18px; } @media (min-width: 760px) { .req { grid-template-columns: 1fr auto; align-items: start; } } .req__list { display: grid; gap: 6px; margin: 0; font-size: .97rem; } .req__row { display: flex; flex-wrap: wrap; gap: 4px 10px; } .req__row dt { color: var(--muted); min-width: 150px; } .req__row dd { margin: 0; font-weight: 600; } .qr { text-align: center; } .qr img { width: 190px; height: 190px; margin: 0 auto; background: #fff; padding: 8px; border-radius: var(--r-card); border: 1px solid var(--line); } /* Кнопка «скопировать реквизиты». На телефоне выделять номер счёта вручную — мучение, поэтому одно нажатие. Показывается скриптом: без него была бы мёртвой. */ .copy-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 20px; font: 600 .95rem/1 inherit; font-family: inherit; color: #fff; background: var(--green-700); border: 1px solid var(--green-700); border-radius: var(--r-btn); cursor: pointer; transition: background .15s, border-color .15s; } .copy-btn::before { content: ""; width: 17px; height: 17px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ico-copy) center / contain no-repeat; mask: var(--ico-copy) center / contain no-repeat; } .copy-btn:hover { background: var(--green-800); border-color: var(--green-800); } .copy-btn:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; } .copy-btn.is-done { background: var(--green-800); border-color: var(--green-800); } .copy-btn.is-fail { background: var(--danger); border-color: var(--danger); } :root[data-theme="dark"] .copy-btn { color: var(--ink); } /* контакты */ .ctc { display: grid; gap: 14px; } @media (min-width: 760px) { .ctc { grid-template-columns: repeat(2, 1fr); } } .ctc__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow); } .ctc__card h3 { margin-top: 0; color: var(--green-700); } /* На странице «Контакты» карточки — самостоятельные разделы, поэтому там заголовки второго уровня. Размер оставляем как у h3, чтобы вид не менялся. */ .ctc__card h2 { margin-top: 0; font-size: 1.15rem; color: var(--green-700); } :root[data-theme="dark"] .ctc__card h3, :root[data-theme="dark"] .ctc__card h2 { color: var(--green-500); } .ctc__big { font-size: 1.35rem; font-weight: 700; } .ctc__big a { text-decoration: none; } /* Почта длиннее телефона: на узком экране уменьшаем и разрешаем перенос, иначе адрес вылезает за карточку. */ .ctc__big--mail { font-size: 1.15rem; overflow-wrap: anywhere; } /* --------------------------------------------------------- обычные страницы */ .phdr { background: var(--green-800); color: #fff; padding: 30px 0 26px; } .phdr h1 { color: #fff; margin-bottom: .2em; } .phdr p { color: #cfe3d7; margin: 0; max-width: 64ch; } .crumbs { font-size: .85rem; color: var(--muted); margin: 16px 0 0; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .crumbs li + li::before { content: "→"; margin-right: 8px; color: var(--line); } .page { padding: 30px 0 46px; } .prose { max-width: 74ch; } .prose h2 { margin-top: 1.6em; } .prose h2:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .35em; } .prose blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid var(--green-500); background: var(--green-50); border-radius: 0 var(--r-card) var(--r-card) 0; color: var(--muted); } .prose code { background: var(--green-100); padding: 2px 6px; border-radius: 5px; font-size: .92em; } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; } /* документы */ .docs { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } .doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: border-color .14s ease, transform .14s ease; } .doc:hover { border-color: var(--green-500); transform: translateX(3px); color: inherit; } .doc__ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-size: .68rem; font-weight: 800; background: var(--green-100); color: var(--green-700); letter-spacing: .02em; } .doc__ico[data-t="pdf"] { background: #fdeceb; color: #b3261e; } .doc__ico[data-t="doc"], .doc__ico[data-t="docx"] { background: #e8eefb; color: #1f4fa8; } .doc__ico[data-t="xls"], .doc__ico[data-t="xlsx"] { background: #e6f4ea; color: #17663a; } .doc__b { min-width: 0; } .doc__t { font-weight: 600; } .doc__m { font-size: .82rem; color: var(--muted); } /* годы */ .years { display: grid; gap: 12px; } details.year { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; } details.year > summary { cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; list-style: none; } details.year > summary::-webkit-details-marker { display: none; } details.year > summary::before { content: "▸"; color: var(--green-600); transition: transform .15s ease; display: inline-block; } details.year[open] > summary::before { transform: rotate(90deg); } details.year > summary:hover { background: var(--green-50); } .year__n { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: auto; } .year__b { padding: 4px 14px 16px; } @media (min-width: 620px) { .year__b { padding: 4px 18px 18px; } } /* таблицы */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } table.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; } table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } /* на телефонах таблица должна влезать без прокрутки */ @media (max-width: 520px) { table.tbl th, table.tbl td { padding: 10px 9px; font-size: .9rem; } } table.tbl th { background: var(--green-50); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); position: sticky; top: 0; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl tbody tr:hover { background: var(--green-50); } .num { text-align: right; font-variant-numeric: tabular-nums; } .badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 700; } .badge--debt { background: var(--danger-bg); color: var(--danger); } .badge--over { background: var(--green-100); color: var(--green-700); } .badge--zero { background: var(--line); color: var(--muted); } /* показатели */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; } @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow); min-width: 0; } .stat__v { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } /* Карточка рассчитана на короткое значение — число или слово. Если в неё попадает целая фраза (так было со строкой про сайт в отчёте), крупный кегль превращает её в стену текста: ужимаем и разрешаем переносы. */ .stat__v--long { font-size: 1.05rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .stat__l { font-size: .82rem; color: var(--muted); margin-top: 4px; } .stat--debt .stat__v { color: var(--danger); } .stat--over .stat__v { color: var(--green-600); } /* на очень узких экранах суммы в две колонки не помещаются */ @media (max-width: 389px) { .stats { grid-template-columns: 1fr; } .stat { padding: 15px; } .stat__v { font-size: 1.45rem; } } /* заметки */ .note { padding: 14px 16px; border-radius: var(--r-card); background: var(--green-50); border: 1px solid var(--line); font-size: .93rem; color: var(--muted); } .note strong { color: var(--ink); } /* ------------------------------------------------------- калькулятор распила */ .calc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; box-shadow: var(--shadow); } .calc__params { display: grid; gap: 16px; margin-bottom: 24px; } @media (min-width: 620px) { .calc__params { grid-template-columns: 1fr 1fr; } } .calc__field { margin: 0; display: flex; flex-direction: column; gap: 6px; } .calc__field label { font-weight: 600; font-size: .95rem; } .calc__hint { font-size: .82rem; color: var(--muted); } .calc input { font: inherit; padding: 12px 14px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--sand); color: var(--ink); } .calc__parts { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; } .calc__parts legend { font-weight: 700; font-size: 1.05rem; padding: 0 0 10px; } .part { display: grid; grid-template-columns: 1fr 100px 44px; gap: 8px; margin-bottom: 8px; align-items: center; } .part--head { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .part--head span:nth-child(2) { text-align: center; } .part__cell { margin: 0; min-width: 0; } .part__del { width: 44px; height: 44px; cursor: pointer; font-size: 1.3rem; line-height: 1; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--white); color: var(--muted); } .part__del:hover { border-color: var(--debt-text); color: var(--debt-text); } .calc__add { margin-top: 6px; } .calc__actions { display: flex; flex-wrap: wrap; gap: 10px; } .calc__reset { background: var(--sand); color: var(--ink); border-color: var(--line); } .calc__result { margin-top: 30px; } /* ---------------------------------------------------- калькуляторы распила */ /* Заголовок группы калькуляторов на общей странице */ .calc__group { font-size: 1.15rem; margin: 34px 0 14px; } .calc__group:first-of-type { margin-top: 24px; } /* Карточки результата в калькуляторах: две колонки на телефоне, четыре на широком экране */ .stats--k { grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .stats--k { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 359px) { .stats--k { grid-template-columns: 1fr; } } /* Приглушённая подсказка внизу результата */ .note--quiet { background: transparent; border-style: dashed; } .calc__lead { margin: 0 0 20px; color: var(--muted); max-width: 70ch; } .calc__pick { margin-bottom: 8px; } /* Строки деталей: у бруса четыре колонки, у листов пять — в листовом расчёте добавляется высота детали. */ .part--brus { grid-template-columns: 1fr 118px 92px 44px; } .part--list { grid-template-columns: 1fr 104px 104px 92px 44px; } /* У плана грядок в первой колонке выбор культуры, дальше растения и две схемы посадки — между растениями и между рядами. */ .part--gryadki { grid-template-columns: 1fr 88px 106px 106px 44px; } .part--brus.part--head span:nth-child(2), .part--brus.part--head span:nth-child(3), .part--list.part--head span:nth-child(2), .part--list.part--head span:nth-child(3), .part--list.part--head span:nth-child(4), .part--gryadki.part--head span:nth-child(2), .part--gryadki.part--head span:nth-child(3), .part--gryadki.part--head span:nth-child(4) { text-align: center; } /* Выбор культуры в строке: как обычное поле, но компактнее */ .part__select { font: inherit; padding: 11px 25px 11px 12px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--sand); color: var(--ink); cursor: pointer; } /* Пометка «сейчас» в таблице сроков */ .now { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--green-100); color: var(--green-700); font-size: .78rem; font-weight: 700; white-space: nowrap; } :root[data-theme="dark"] .now { color: var(--link); } .scheme--gryadki { padding: 6px 0 2px; } .calc__select { font: inherit; padding: 12px 14px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--sand); color: var(--ink); cursor: pointer; } .calc__field--wide { grid-column: 1 / -1; } /* Галочка «разрешить поворот» */ .calc__check { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 0 0 22px; padding: 14px 16px; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-card); } .calc__check input { width: 20px; height: 20px; accent-color: var(--green-600); cursor: pointer; } .calc__check label { font-weight: 600; cursor: pointer; } .calc__check .calc__hint { grid-column: 2; } .calc__h3 { font-size: 1.1rem; margin: 26px 0 12px; } .calc__head h2 { margin-bottom: 4px; } .calc__sub { margin: 0 0 18px; color: var(--muted); font-size: .92rem; } /* Схема раскроя. Дерево рисуется прямо в SVG: основа с переходом по толщине и волокна — иначе детали выглядели цветными прямоугольниками. Ширину задаёт сам SVG, здесь только ограничиваем её экраном: width: 100% растянул бы чертёж и сломал масштаб. */ .scheme { display: block; max-width: 100%; height: auto; margin: 4px 0 6px; padding: 10px 0; color: var(--muted); border-radius: var(--r-card); } .scheme--sheets { padding: 4px 0; } /* Кнопки печати */ .calc__actions .btn { cursor: pointer; } @media (max-width: 560px) { .part--brus, .part--list, .part--gryadki { grid-template-columns: 1fr 1fr 44px; gap: 6px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--sand); } .part--brus .part__name, .part--list .part__name { grid-column: 1 / -1; } .part--brus .part__cell:nth-child(2), .part--list .part__cell:nth-child(2) { grid-column: 1; } .part--brus .part__cell:nth-child(3), .part--list .part__cell:nth-child(4) { grid-column: 2; } .part--list .part__cell:nth-child(3) { grid-column: 1 / -1; } .part--head { display: none; } /* Плану грядок на телефоне нужно больше места: подписи колонок здесь показываем словами, иначе непонятно, где что. */ .part--gryadki { grid-template-columns: 1fr 1fr; } .part--gryadki .part__cell:nth-child(1) { grid-column: 1 / -1; } .part--gryadki .part__cell:nth-child(4) { grid-column: 1 / -1; } .part--gryadki .part__del { grid-column: 2; justify-self: end; } .part--gryadki .visually-hidden { position: static !important; width: auto; height: auto; clip: auto; margin: 0 0 4px; overflow: visible; white-space: normal; display: block; font-size: .8rem; color: var(--muted); } } /* --------------------------------------------- кольцевая диаграмма долгов */ .donut { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px; margin: 0 0 24px; padding: 24px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); } .donut__svg { width: 186px; height: 186px; flex: 0 0 auto; } .donut__total { font-size: 36px; font-weight: 800; fill: var(--ink); font-family: var(--font); } .donut__cap { font-size: 13px; fill: var(--muted); font-family: var(--font); } .donut__legend { display: grid; gap: 14px; font-size: 1.05rem; } .donut__item { display: flex; align-items: center; gap: 11px; } .donut__dot { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; } .donut__dot--debt { background: var(--debt-text); } .donut__dot--paid { background: var(--green-500); } /* ------------------------------------------------- метеостанция: графики */ /* Цвета линий. Вынесены в переменные, чтобы в тёмной теме их можно было сделать светлее — иначе линии теряются на тёмном фоне. */ :root { --ch-1: #b8791f; /* температура */ --ch-2: #2f7fb8; /* влажность */ --ch-3: #6f57ad; /* давление */ --ch-4: #2a9160; /* радиационный фон */ --ch-5: #4f768c; /* ветер */ } :root[data-theme="dark"] { --ch-1: #e3ae52; --ch-2: #63b7ec; --ch-3: #ab98e6; --ch-4: #57c98d; --ch-5: #8ab4c8; } .mt-h { font-size: 1.35rem; margin: 0 0 14px; } .mt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 26px 0 18px; } .mt-bar .filters { margin-bottom: 0; } .mt-bar__note { color: var(--muted); font-size: .9rem; } /* Переключатель «графики / таблица» */ .mt-view { padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); cursor: pointer; font: 600 .9rem/1 inherit; font-family: inherit; } .mt-view:hover { background: var(--green-50); border-color: var(--green-500); } .mt-view[aria-pressed="true"] { background: var(--green-100); border-color: var(--green-500); color: var(--green-800); } :root[data-theme="dark"] .mt-view[aria-pressed="true"] { color: var(--ink); } /* Таблица с теми же числами, что и на графике */ .ch__t-wrap { max-height: 430px; overflow: auto; margin: 6px 0 0; } .ch__tbl { margin: 0; } .ch__tbl caption { caption-side: top; text-align: left; padding: 0 0 10px; color: var(--muted); font-size: .86rem; line-height: 1.45; } .ch__tbl th:last-child, .ch__tbl td:last-child { text-align: right; } /* Пять карточек датчиков: на широком экране помещаются в один ряд. */ @media (min-width: 1000px) { .stats--five { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 620px) and (max-width: 999px) { .stats--five { grid-template-columns: repeat(3, 1fr); } } /* Место под графики и строку состояния держим заранее: иначе, когда приходят показания, текст становится длиннее и весь низ страницы сдвигается (это и был сдвиг вёрстки 0,19 из замера). */ .mt-charts { display: grid; gap: 16px; min-height: 360px; } #mt-status { min-height: 3.2em; } .mt-stale { min-height: 1.4em; } /* Обновление показаний: короткая подсветка изменившегося числа. */ @keyframes mt-flash { 0% { color: var(--link); transform: translateY(-2px); } 100% { color: inherit; transform: none; } } .stat__v.is-updated { animation: mt-flash 1.4s ease-out; } @media (prefers-reduced-motion: reduce) { .stat__v.is-updated { animation: none; } } /* Предупреждение показывается не отдельным окном, а прямо на карточке датчика: она окрашивается, слева появляется цветная полоса, а под значением — короткая пометка. Видно, какой именно датчик вышел за рамки, и ничего лишнего на странице не появляется. Цвета берём из переменных, поэтому в тёмной теме они светлее и остаются читаемыми. */ .stat--warn { background: var(--warn-bg); border-color: var(--warn-line); box-shadow: inset 4px 0 0 var(--warn), var(--shadow); } .stat--warn .stat__v, .stat--warn .stat__w { color: var(--warn); } .stat--danger { background: var(--danger-bg); border-color: var(--danger-line); box-shadow: inset 4px 0 0 var(--debt-text), var(--shadow); } .stat--danger .stat__v, .stat--danger .stat__w { color: var(--debt-text); } .stat__w { margin: 9px 0 0; font-size: .84rem; font-weight: 600; line-height: 1.3; } .stat__w::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; } /* Датчик молчит: показаний нет ни у одной карточки, поэтому пишем строкой. */ .mt-stale { margin: -10px 0 18px; color: var(--warn); font-size: .92rem; font-weight: 600; } .mt-stale::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; } .ch { margin: 0; padding: 16px 18px 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); /* Без этого карточка не сжимается на узком экране: SVG без заданной ширины по умолчанию занимает 300 точек и распирает её изнутри. */ min-width: 0; } .ch__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .ch__left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .ch__i { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ch, currentColor); } .ch__t { font-weight: 600; font-size: 1.02rem; } .ch__u { color: var(--muted); font-size: .86rem; } .ch__err { color: var(--debt-text); font-size: .84rem; } /* Значки датчиков. Красим через маску: SVG задаёт только форму, а цвет берётся из background-color страницы. Через так нельзя — currentColor внутри такого SVG считается по его собственному документу и всегда выходит чёрным, как бы мы ни задавали color снаружи. */ .ico { display: inline-block; flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: var(--i); mask-image: var(--i); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* значки в карточках «Сейчас» — цвет датчика задаётся в разметке */ .stat__i { width: 15px; height: 15px; vertical-align: -2px; color: var(--ch, currentColor); } .ch__p { position: relative; height: 190px; } .ch__s { display: block; touch-action: pan-y; max-width: 100%; } .ch__tip { position: absolute; left: 0; top: 0; z-index: 4; padding: 6px 10px; border-radius: var(--r-btn); background: var(--green-900); color: #fff; font-size: .8rem; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none; } .ch__tip b { font-size: .95rem; } .ch__tip span { display: block; opacity: .72; font-size: .72rem; margin-top: 2px; } .ch__st { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; } .ch__st b { color: var(--ink); font-weight: 600; } /* Кому нужен повышенный контраст — узор только мешает. */ @media (prefers-contrast: more) { body { background-image: none; } } @media print { .ch { border: 1px solid #999 !important; box-shadow: none !important; page-break-inside: avoid; } .ch__tip { display: none !important; } } /* ------------------------------------------------------- дни рождения */ /* Полоса демонстрационного режима: включается параметром ?demo= в адресе */ .demo-bar { padding: 11px 18px; text-align: center; background: #7a4a00; color: #ffeccc; font-size: .92rem; line-height: 1.45; } .demo-bar strong { color: #ffd98a; } .demo-bar b { color: #fff; } .demo-bar a { color: #ffd98a; } /* Блок на главной: появляется только в день рождения */ .bd-home { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 22px 0 0; padding: 16px 22px; border-radius: var(--r-card); color: #fff; background: linear-gradient(135deg, #1a5c39, #1f7a4c 55%, #2f9e68); box-shadow: var(--shadow-lg); } .bd-home__ico { width: 30px; height: 30px; flex: 0 0 auto; color: #ffe6a8; } .bd-home__ico svg { width: 100%; height: 100%; display: block; } .bd-home__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bd-home__b strong { font-size: 1.05rem; } .bd-home__b span { font-size: .95rem; } .bd-home__p { opacity: .8; font-size: .86rem; } /* список именинников внутри блока */ .bd-home__list { display: flex; flex-wrap: wrap; gap: 4px 14px; } .bd-home__i { white-space: nowrap; } @media (max-width: 560px) { .bd-home { padding: 15px 18px; } .bd-home__b strong { font-size: 1rem; } .bd-home__list { font-size: .92rem; } } /* --------------------------------------------------------- отчёт о работах */ .season { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .season__i { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px; border-radius: var(--r-pill); background: var(--green-100); border: 1px solid var(--line); font-size: .93rem; } .season__n { font-weight: 600; } .season__d { color: var(--green-700); font-weight: 700; font-size: .84rem; white-space: nowrap; } :root[data-theme="dark"] .season__d { color: var(--link); } .tl { display: grid; gap: 14px; } .tl__i { display: grid; gap: 4px 20px; min-width: 0; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green-500); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--shadow); } @media (min-width: 720px) { .tl__i { grid-template-columns: 150px 1fr; } } .tl__date { font-size: .85rem; font-weight: 700; color: var(--green-700); white-space: nowrap; } :root[data-theme="dark"] .tl__date { color: var(--link); } .tl__body { min-width: 0; } .tl__t { margin: 0 0 8px; font-size: 1.05rem; } .tl__x { font-size: .95rem; max-width: none; } .tl__x ul { margin: .5em 0; } .tl__x p { margin-bottom: .55em; } .tl__x p:last-child { margin-bottom: 0; } /* Таблицы внутри отчёта бывают широкие (до девяти колонок). Заголовкам разрешаем перенос — иначе они съедают всю ширину и колонке с названием товара не остаётся места. */ .tl__x .tbl { min-width: 0; } .tl__x .tbl th, .tl__x .tbl td { white-space: normal; vertical-align: top; } .tl__x .tbl th:first-child, .tl__x .tbl td:first-child { white-space: nowrap; } .tl__x .tbl th:last-child, .tl__x .tbl td:last-child { white-space: nowrap; } .tl__x .tbl-wrap { margin: 12px 0 4px; } /* Таблица финансов: название статьи длинное, сумма короткая. Переносим название, сумму держим в одну строку. Селекторы с table.tbl — иначе правило перебивает общий nowrap. */ table.tbl--fin th, table.tbl--fin td { white-space: normal; } table.tbl--fin th:last-child, table.tbl--fin td:last-child { white-space: nowrap; text-align: right; } /* ---------------------------------------------------------- логотип провайдера */ /* Логотип в тексте страницы: [![alt](картинка)](ссылка) */ .prose > p > a > img { max-width: 280px; height: auto; } /* Логотип в подвале, на всех страницах. Подложка светлая: у логотипа тёмные надписи, на зелёном фоне они пропадают. */ .ftr__partner { display: inline-block; margin-top: 18px; padding: 9px 13px; background: #fff; border-radius: var(--r-btn); line-height: 0; } .ftr__partner img { width: 136px; height: auto; display: block; } .ftr__partner:hover { background: var(--green-50); } /* На телефоне широкая таблица не помещается, поэтому разбираем её на карточки: каждая строка — блок, каждая ячейка — строка с подписью из data-label (подпись берётся из заголовка таблицы). */ @media (max-width: 700px) { /* Селекторы с table.tbl — иначе общие правила таблиц перебивают эти по специфичности. */ table.tbl--rep { display: block; } table.tbl--rep thead { display: none; } table.tbl--rep tbody { display: block; } table.tbl--rep tr { display: block; padding: 12px 0 !important; border-bottom: 1px solid var(--line); page-break-inside: avoid; } table.tbl--rep tr:last-child { border-bottom: 0; } table.tbl--rep td { display: block !important; position: relative; padding: 4px 0 4px 44% !important; border: 0 !important; white-space: normal !important; } /* Подпись — absolute, чтобы текст ячейки переносился с отступом, а не разбивался на колонки, как было бы с flex. */ table.tbl--rep td::before { content: attr(data-label); position: absolute; left: 0; top: 4px; width: 41%; color: var(--muted); font-size: .8rem; line-height: 1.45; } table.tbl--rep td:empty { display: none !important; } .tl__x .tbl-wrap { border: 0; background: none; } } tr.fin-total td { font-weight: 700; background: var(--green-50); } .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .filters button { padding: 9px 16px; border: 1px solid var(--line); background: var(--white); border-radius: var(--r-pill); cursor: pointer; font-size: .9rem; font-family: inherit; color: var(--ink); font-weight: 600; } .filters button:hover { border-color: var(--green-500); } .filters button[aria-pressed="true"] { background: var(--green-600); border-color: var(--green-600); color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* галерея */ .gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 760px) { .gal { grid-template-columns: repeat(4, 1fr); } } .gal img { border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* ------------------------------------------------------------------ подвал */ .ftr { background: var(--green-900); color: #c6d8cd; margin-top: 50px; padding: 34px 0 0; font-size: .93rem; } /* Растягиваем содержимое на всю высоту экрана, чтобы подвал вставал внизу. На коротких страницах («Полезное», «Документы», 404) текста меньше экрана, и без этого подвал висел посередине, а под ним оставалась пустая полоса фона. Отступ 50px у подвала при этом сохраняется: он не «auto». */ main { flex: 1 0 auto; } .ftr__in { display: grid; gap: 24px; padding-bottom: 26px; } @media (min-width: 760px) { .ftr__in { grid-template-columns: 1.4fr 1fr 1fr; } } .ftr__col strong { color: #fff; display: block; margin-bottom: 10px; } .ftr a { color: #cfe3d7; } .ftr a:hover { color: #fff; } .ftr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .ftr__muted { color: #8fa89a; font-size: .87rem; } .ftr__bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-top: 16px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; } /* Счётчик посещений. Своя вёрстка, а не картинка Яндекса: у той и значки, и цифры нарисованы на стороне сервиса, под палитру сайта её не подогнать — на тёмном подвале чёрные цифры не читались. Числа приходят тем же информером, но данными (assets/js/metrika-badge.js): пока сервис молчит, виден запасной текст из разметки, а не пустота. Сейчас это не «таблетка», а маленький график: площадь, линия за неделю и точка «сегодня», рядом — число посещений. */ .ftr__stat { display: inline-flex; align-items: center; align-self: center; gap: 9px; color: var(--muted); text-decoration: none; transition: color .15s; } .ftr__stat:hover { color: #fff; } .ftr__stat-t { display: inline-flex; align-items: center; gap: 9px; } /* Сам график рисует assets/js/metrika-badge.js: линия, заливка под ней и точка текущего дня. Цвета — от ссылки, поэтому работают с наведением. */ .ftr__stat-spark { display: block; overflow: visible; } .ftr__stat-base { stroke: currentColor; stroke-width: 1; opacity: .22; } .ftr__stat-area { fill: currentColor; opacity: .16; } .ftr__stat-line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; opacity: .85; } .ftr__stat-dot { fill: currentColor; } .ftr__stat-n { color: #c6d8cd; font-weight: 600; } .ftr__stat:hover .ftr__stat-n { color: #fff; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto; } } /* ------------------------------------------------------- карта посёлка */ /* Карта — встроенный SVG: участки подсвечиваются при наведении, а участки с долгом видно сразу, без наведения. */ .map-legend { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; margin: 14px 0 0; font-size: .92rem; color: var(--muted); } /* Квадратик — символ «■» внутри надписи. Отдельным блоком его не сделать: в листе для печати html2canvas рисует текст по-своему и квадратик отвязывается от строки. Символ же всегда стоит на её базовой линии. */ .map-legend__i { min-height: 18px; } /* Заливки участков на карте. Держим их переменными: те же цвета берут квадратики в подписи, поэтому подпись и карта всегда совпадают. */ :root { --plot-ok: #e1e79c; /* взносы оплачены — как .fil1 в чертеже */ --plot-over: #b7e08f; /* есть переплата — зелёная, чтобы отличалась от оплаченных */ --plot-debt: #f0a49c; /* участок с задолженностью */ } /* Подпись — обычным цветом строки, как подсказка справа: так она читается на любом фоне. Цвет несёт квадратик: он залит цветом участка с карты и обведён рамкой в цвет подписи — видно и на светлом, и на тёмном, и на бумаге. Сам символ «■» внутри не нужен: квадрат рисуем рамкой. */ .map-legend__i--debt .map-legend__sq { color: var(--plot-debt); } .map-legend__i--over .map-legend__sq { color: var(--plot-over); } .map-legend__i--ok .map-legend__sq { color: var(--plot-ok); } .map-legend__sq { display: inline-block; width: 15px; height: 15px; margin-right: 7px; /* overflow: hidden заставляет браузер считать опорной линией нижний край квадратика, а не строку внутри него: без этого квадратик уезжает вверх или вниз — смотря по шрифту и его размеру. Отрицательный сдвиг ставит его середину на середину подписи. */ overflow: hidden; vertical-align: -1.5px; font-size: 0; line-height: 0; background: currentColor; border: 1px solid var(--muted); border-radius: 2px; } .map-legend__hint { margin-left: auto; } .mapbox { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); } .mapbox__sheet svg { display: block; width: 100%; height: auto; } /* Дороги, подписи, деревья и легенда курсор не ловят: иначе участок, прикрытый дорогой или номером, нельзя было бы навести */ .mapbox svg :not(.uchastok) { pointer-events: none; } /* Участки: обычный, с переплатой, с долгом, под курсором. Селектор по классу, а не по тегу: при сжатии карты полигоны становятся путями (), и имя тега меняется. */ .mapbox .uchastok { cursor: pointer; transition: fill .12s ease; pointer-events: auto; } .mapbox .uchastok.is-debt { fill: var(--plot-debt); } .mapbox .uchastok.is-over { fill: var(--plot-over); } .mapbox .uchastok:hover { fill: #ffd979; } .mapbox .uchastok.is-debt:hover { fill: #e0664c; } /* Обводка участка, на который смотрят: отдельная фигура поверх карты, иначе соседи перекрывали бы её своим контуром */ .mapbox svg .map-mark { fill: none; stroke: #14432a; stroke-width: 320; pointer-events: none; } .mapbox svg:not(.is-pointing) .map-mark { display: none; } /* Подсказка с балансом */ /* Место под чертёж держим заранее: без этого карта загружается и сдвигает вниз кнопку печати и подпись (замер показывал сдвиг вёрстки 0,13). Пропорция взята из viewBox чертежа: 20000 × 6703. */ .mapbox__sheet { aspect-ratio: 20000 / 6703; background: var(--green-50); } /* Подсказка «карту можно двигать» — только на телефоне */ .map-hint { display: none; margin: 8px 0 0; font-size: .88rem; color: var(--muted); } /* ------------------------------------------------- лента на карте (статична) С 19.10.2026 лента не двигается: на телефонах анимация подтормаживала карту при прокрутке. Всё, что ниже, закомментировано и оставлено на случай, если захотим вернуть движение. Как это было устроено (чтобы восстановить, раскомментировать правила здесь, блок в assets/js/map.js и два вызова map_lenta() в build.py): Старинная лента «Царёва Дача» в левом верхнем углу чертежа тихонько покачивалась, а по бумажным полосам изредка пробегал световой блик. Классы .lenta и .lenta__drift и группа блика .lenta-glint появлялись в готовом файле карты на этапе сборки (build.py, map_lenta): в исходном чертеже их нет, поэтому карта остаётся обычным CorelDRAW-рисунком. Три правила, ради которых всё было так устроено: 1. Двигали только transform (и ничего больше). Такую анимацию рисует видеокарта, процессор и батарея не тратятся; ни filter, ни box-shadow не использовали — на телефонах это самое дорогое. 2. Лента — единый рисунок: покачивали её целиком, по кускам не разбирали. Иначе штриховка и тени, нарисованные поверх полос, разъехались бы с самими полосами. 3. Анимации включались только классом .is-live, который map.js ставил, когда карта на экране. Ушла карта за экран, свернулась вкладка — движение вставало, телефон не крутил его впустую. Совсем не было движения, если посетитель просил «меньше движения» (см. правило в начале файла и проверку в map.js) и на печатном листе. Центр вращения ленты сборка вписывала прямо в разметку (build.py, map_lenta): браузер иначе взял бы за центр габариты всей группы, а они «дышали» вместе с бегущим бликом — лента уезжала бы вбок. transform-box: view-box отсчитывал этот центр от угла viewBox чертежа. */ /* Движение ленты выключено 19.10.2026 — на телефонах из-за него лагала карта. Ниже — как было устроено. Чтобы вернуть, раскомментировать этот блок, правила в assets/js/map.js и два вызова map_lenta() в build.py. .lenta { transform-box: view-box; } .lenta__drift { transform-box: fill-box; transform-origin: 50% 50%; } .lenta-glint rect { transform-box: fill-box; } .mapbox.is-live .lenta-glint { visibility: visible; } .mapbox.is-live .lenta { animation: lenta-sway 9s cubic-bezier(.45, 0, .55, 1) 1.6s infinite; } .mapbox.is-live .lenta__drift { animation: lenta-drift 6.5s ease-in-out infinite; } .mapbox.is-live .lenta-glint rect { animation: lenta-gleam 23s cubic-bezier(.4, 0, .2, 1) 3s infinite backwards; } Первый показ: лента мягко «садилась» на место — один раз на страницу. Правило с бо́льшим числом классов перебивало то, что выше. .mapbox.is-live.is-born .lenta { animation: lenta-in 1.6s cubic-bezier(.2, .7, .3, 1) both, lenta-sway 9s cubic-bezier(.45, 0, .55, 1) 1.6s infinite; } Покачивание: наклон на полтора градуса туда и обратно плюс еле заметное «дыхание» по размеру. Начиналось и кончалось в покое — поэтому переход от появления к покачиванию не заметен. @keyframes lenta-in { from { transform: rotate(-3.4deg) scale(.968); } to { transform: none; } } @keyframes lenta-sway { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(2.2deg) scale(1.014); } } Медленное вертикальное «дыхание» — лента будто висит в воздухе. @keyframes lenta-drift { 0%, 100% { transform: translateY(-2.2%); } 50% { transform: translateY(2.2%); } } Блик: длинная пауза, затем мягкий световой мазок слева направо. Окошко блика по ширине равно бумажным полосам, а светилась только его середина (градиент), поэтому хода в собственный размер туда и обратно хватало, чтобы блик прошёл ленту насквозь. @keyframes lenta-gleam { 0%, 58% { transform: translateX(-100%); } 78%, 100% { transform: translateX(100%); } } */ /* Страховка: если разметку ленты когда-нибудь вернут, блик без анимации не должен показываться статичным светлым пятном. */ .lenta-glint { visibility: hidden; } /* На бумаге и в листе для печати движение не нужно, а блик мог бы отпечататься светлым пятном. */ @media print { .lenta-glint { display: none !important; } } .paper .lenta-glint { display: none !important; } .paper .lenta, .paper .lenta__drift { animation: none !important; } .mapbox__tip { position: absolute; z-index: 4; pointer-events: none; padding: 10px 14px; min-width: 142px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: .95rem; line-height: 1.3; } .mapbox__tip strong { display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .mapbox__tip span { display: block; font-weight: 700; } .mapbox__tip .t-debt { color: var(--debt-text); } .mapbox__tip .t-over { color: var(--green-700); } :root[data-theme="dark"] .mapbox__tip .t-over { color: var(--link); } /* Кнопка печати под картой */ .map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; } .map-actions .btn { cursor: pointer; } /* Обводка участка — подсказка живого курсора, на бумаге она не нужна */ .paper .map-mark { display: none !important; } /* Шапка печатного листа: логотип и реквизиты товарищества. На сайте её нет — она нужна только на бумаге, вместе с картой: так лист можно взять с собой в банк или отдать соседу. */ .map-head { display: none; } /* Логотип ставим по центру колонки реквизитов — так шапка выглядит ровнее */ .paper .map-head { display: flex; align-items: center; gap: 10mm; margin-bottom: 4mm; padding-bottom: 3mm; border-bottom: 2px solid #000; } .paper .map-head__logo { flex: 0 0 auto; color: #22201e; --logo-crown: #9c6b10; } .paper .map-head__logo svg { display: block; height: 26mm; width: auto; } .paper .map-head__body { flex: 1 1 auto; min-width: 0; } .paper .map-head__title { margin: 0 0 2mm; font-size: 15pt; font-weight: 700; letter-spacing: -.01em; } .paper .map-head__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm; margin: 0; font-size: 9pt; line-height: 1.3; } .paper .map-head__list > div { display: flex; gap: 2mm; min-width: 0; } .paper .map-head__list dt { color: #444; white-space: nowrap; } .paper .map-head__list dd { margin: 0; font-weight: 700; min-width: 0; } /* Длинные строки — банк и председатель — занимают всю ширину: иначе одна ячейка растягивалась на две строки и колонки выглядели рвано */ .paper .map-head__wide { grid-column: 1 / -1; } @media (max-width: 640px) { /* На телефоне чертёж шире экрана — его двигают пальцем. Высоту берём по самому чертежу: пропорция листа (2,98) рассчитана на широкий план, а нынешний чертёж квадратный, и с ней карта обрезалась по высоте — видно было только верхнюю полосу. */ .mapbox__sheet { aspect-ratio: auto; overflow: auto; max-height: 74vh; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; } .mapbox__sheet svg { min-width: 660px; } .map-hint { display: block; } .map-legend__hint { display: none; } .mapbox__tip { font-size: .9rem; padding: 8px 12px; } } /* ------------------------------------------------------- обращение в правление Форма на сайте, а отправка — в MAX. На сайте ничего не хранится, поэтому и вида «личный кабинет» здесь нет: только поля и две кнопки. */ .apl { padding: 22px; } @media (min-width: 760px) { .apl { padding: 28px; } } .apl__grid { display: grid; gap: 16px; } @media (min-width: 700px) { .apl__grid { grid-template-columns: 1fr 1fr; } } .apl__f { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .apl__f--wide { grid-column: 1 / -1; } .apl__f label { font-weight: 600; font-size: .95rem; } .apl input, .apl textarea, .apl__select { font: inherit; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--sand); color: var(--ink); } .apl textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .apl__select { cursor: pointer; } .apl input:focus-visible, .apl textarea:focus-visible, .apl__select:focus-visible { outline: 2px solid var(--green-600); outline-offset: 1px; } .apl__err { margin: 16px 0 0; padding: 12px 14px; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-btn); color: var(--debt-text); } .apl__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .apl__acts .btn { flex: 1 1 220px; justify-content: center; } /* Кнопка «Скопировать текст»: спокойнее основной, но узнаваемая */ .apl__copy { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 1 1 220px; padding: 15px 22px; font: 600 1rem/1.2 inherit; font-family: inherit; color: var(--ink); background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-btn); cursor: pointer; transition: background .15s, border-color .15s; } .apl__copy::before { content: ""; width: 17px; height: 17px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ico-copy) center / contain no-repeat; mask: var(--ico-copy) center / contain no-repeat; } .apl__copy:hover { border-color: var(--green-600); color: var(--green-700); } .apl__copy:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; } .apl__copy.is-done { background: var(--green-100); border-color: var(--green-600); color: var(--green-700); } .apl__copy.is-fail { background: var(--danger-bg); border-color: var(--danger-line); color: var(--debt-text); } :root[data-theme="dark"] .apl__copy:hover { color: var(--link); } :root[data-theme="dark"] .apl__copy.is-done { color: var(--link); } .apl__note { margin: 16px 0 0; color: var(--muted); font-size: .92rem; max-width: 68ch; } .apl__note--quiet { margin-top: 8px; font-size: .86rem; } /* Согласие на обработку данных: чекбокс должен быть обычным квадратиком, а не растянутым на всю ширину полем — общие правила .apl input рассчитаны на текстовые поля. */ .apl__consent { margin-top: 16px; } .apl__check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.45; color: var(--muted); cursor: pointer; } .apl__check input { width: 24px; height: 24px; padding: 0; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green-700); } .apl__check a { color: var(--green-700); } :root[data-theme="dark"] .apl__check a { color: var(--link); } /* На сенсорных экранах цели нажатия не меньше 24 px (WCAG 2.2). Текстовые ссылки внутри абзацев не трогаем — для них есть исключение. */ @media (max-width: 820px) { .nav a, .ftr__list a, .crumbs a, .ctc__big a { min-height: 24px; display: inline-flex; align-items: center; } input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; } } /* Ловушка для спам-ботов: уводим за край экрана, а не display:none — иначе часть роботов понимает, что поле спрятано, и не заполняет его. */ .apl__trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Якорные ссылки: шапка «липкая», поэтому её высоту надо учесть, иначе раздел, к которому перешли, окажется под шапкой. */ [id] { scroll-margin-top: 96px; } /* Строки кадастровых сведений в подсказке на карте */ .mapbox__tip .t-area { display: block; font-weight: 700; } .mapbox__tip .t-cad { display: block; font-size: .84rem; color: var(--muted); } .mapbox__tip .t-build { display: block; font-size: .84rem; color: var(--muted); } /* Пояснение под заголовком раздела на главной */ .sec__sub { margin: -4px 0 20px; color: var(--muted); max-width: 70ch; } /* --------------------------------------------------------------- снимки Фотографии посёлка: галерея на главной и врезки на странице «О посёлке». Уменьшенные копии — в assets/img, исходники в assets/_originals (на хостинг не выкладываются). */ .ph { margin: 0; } .ph img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--green-100); } .ph figcaption { margin-top: 8px; font-size: .88rem; color: var(--muted); } /* Галерея на главной: три снимка в ряд, на телефоне — в столбик */ .gallery { display: grid; gap: 16px; } @media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } } /* Снимки сняты с разными пропорциями. Задаём общую и обрезаем по ней: иначе ряд выглядит рваным, а подписи стоят на разной высоте. */ .gallery .ph img { aspect-ratio: 4 / 3; object-fit: cover; } .gallery__more { margin: 18px 0 0; } /* Врезка в тексте страницы: во всю ширину колонки, с отступом */ .prose .ph { margin: 26px 0; } /* ------------------------------------------------- праздничное оформление Новогодний снег, гирлянда с лампочками и ёлочные игрушки. Включается само с 15 декабря по 15 января. Рисует всё скрипт (assets/js/newyear.js) на одном холсте — поэтому нитка провисает, а игрушки покачиваются. Здесь только цвета и сам холст. Посмотреть не в сезон — добавить к адресу ?ny=1, выключить — ?ny=0. */ :root { /* Цвет хлопьев. На светлом фоне белые хлопья не видны, поэтому там они холодного серо-голубого оттенка — и достаточно плотного, иначе снег выглядит как пыль на экране. */ --ny-flake: #6b8aa6; --ny-lamp: #c8963e; --ny-string: #b98f45; /* Цвет струй дождя. Дождь идёт и в светлой теме, поэтому здесь тоже не белый, а холодный серо-голубой: белые струи на белом не видны. */ --rain-drop: #4d6b86; } :root[data-theme="dark"] { --ny-flake: #ffffff; --ny-lamp: #ffd76a; --ny-string: #a8842f; --rain-drop: #dce9f2; } /* Холст оформления — и снег, и дождь. Висит поверх страницы, но клики проходят сквозь него. */ .fx-canvas { position: fixed; inset: 0; z-index: 900; pointer-events: none; } /* На бумаге оформления нет: листы печатают для дела. Калькуляторы и карта сохраняются в PDF тем же способом, поэтому холст дополнительно скрыт ещё и в save-pdf.js. */ @media print { .fx-canvas { display: none !important; } } /* ------------------------------------------------------------------ печать Реквизиты часто распечатывают, чтобы оплатить взнос в банке, поэтому на бумаге должно остаться только полезное. «Бумажный лист» описан классами .paper и .sheet-wrap — одними и теми же для печати из браузера и для сохранения в PDF. Перед печатью скрипт вешает класс .paper на , сохранение в PDF — на копию страницы, которую срисовывает html2canvas. Так оба способа дают один и тот же лист. */ /* Строка «кто сделал лист»: на экране не видна, на бумаге нужна. */ .sheet-foot { display: none; } .paper { font-size: 12pt; /* 12pt = 16px: rem-размеры не съезжают */ line-height: 1.4; color: #000; background-color: #fff; } .paper body { background: transparent !important; } /* Узор-ёлочки остаётся только на листе калькулятора (.sheet-wrap): там он — часть вида, как просил заказчик. Остальным страницам при печати узор ни к чему: тратит тонер и отвлекает от содержимого. */ .paper:has(.sheet-wrap) { background-image: var(--pattern-print); background-size: 320px 320px; } /* Прячем всё, чего на бумаге быть не должно. Заметки (.note) НЕ прячем: в плане грядок это советы по соседям и севообороту, и они нужны на листе. Пояснения к форме помечены классом .no-print в шаблонах. noscript — отдельная история: при печати браузер его и так не рисует, а вот html2canvas собирает PDF в копии страницы без скриптов, и там текст «нужен JavaScript» становился видимым и лез в угол листа. */ .paper .hdr, .paper .ftr, .paper .skip, .paper .crumbs, .paper .filters, .paper .burger, .paper .nav, .paper .hero__actions, .paper .sec__more, .paper .gal, .paper .tiles, .paper .no-print, .paper .calc, .paper .calc__hint, .paper .calc__check, .paper noscript { display: none !important; } .paper .wrap { max-width: none; padding: 0; } .paper .page, .paper .sec { padding: 0 !important; background-image: none !important; } .paper .phdr { background: none !important; color: #000 !important; padding: 0 0 10px !important; border-bottom: 2px solid #000; } .paper .phdr h1 { color: #000 !important; } .paper .phdr p { color: #333 !important; } .paper a { color: #000 !important; text-decoration: none; } /* Калькуляторы: на бумаге нужен только результат — схема раскроя, таблицы и итоговые числа. Поля, кнопки и пояснения убираем. */ /* Отступ сверху — чтобы карточки не прилипали к линии под шапкой листа. */ .paper .calc__result { margin: 18px 0 0 !important; } /* Название раздела уже стоит в шапке листа — второй раз не нужно */ .paper .calc__head { display: none !important; } .paper .calc__sub { font-size: 10pt !important; color: #444 !important; } .paper .calc__h3 { font-size: 12pt !important; } /* Схема должна влезать в ширину листа без обрезки, но НЕ растягиваться: при width: 100% квадратный лист 1525×1525 распухал почти на всю страницу и выталкивал таблицу на следующую. */ .paper .scheme { width: auto !important; max-width: 100% !important; height: auto !important; padding: 0 !important; margin: 6px 0 !important; } .paper .calc__result .stats { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; } .paper .calc__result .stat { border: 1px solid #999 !important; box-shadow: none !important; padding: 8px !important; background: #fff !important; } .paper .calc__result .stat__v { font-size: 14pt !important; } .paper .calc__result .stat__l { font-size: 8pt !important; } /* Прочие страницы: рамки вместо теней и цветных заливок — на бумаге заливки печатаются грязно. */ .paper .card, .paper .stat, .paper .doc, .paper .tbl-wrap, .paper .ctc__card, .paper .anons, .paper .alert, .paper .donut, .paper .season__i, .paper .note { border: 1px solid #999 !important; box-shadow: none !important; background: #fff !important; } .paper .anons { border-left-width: 5px !important; } .paper .anons__ico { display: none !important; } /* на бумаге важна рамка, а не значок */ .paper .stat--warn, .paper .stat--danger { border-left-width: 5px !important; } .paper .tbl-wrap, .paper .tl__x .tbl-wrap { overflow: visible !important; border: 0 !important; } /* Ячейкам разрешаем перенос: список деталей у распила длинный, а лист узкий — иначе правый край таблицы уезжает за поля. Числа не рвутся: разряды в них разделены неразрывным пробелом. */ .paper .tbl th, .paper .tbl td { padding: 6px 8px; font-size: 10pt; white-space: normal; } .paper table.tbl--rep { font-size: 8.5pt; width: 100% !important; } .paper table.tbl--rep th, .paper table.tbl--rep td { padding: 3px 5px !important; white-space: normal !important; } .paper table.tbl--rep thead th { font-size: 7.5pt; } /* суммы и цены на бумаге тоже не разрываем */ .paper table.tbl--rep td:last-child, .paper table.tbl--rep th:last-child, .paper table.tbl--rep td:nth-last-child(2) { white-space: nowrap !important; } .paper .donut__total { fill: #000 !important; } .paper .season__d { color: #000 !important; } .paper .qr img { border: 1px solid #000; } /* В хронологии отчёта дата и текст стоят в две колонки. На бумаге таблицы шире колонки, поэтому разворачиваем блок в одну колонку — таблица получает всю ширину страницы. */ .paper .tl__i { display: block !important; border: 1px solid #999 !important; border-left-width: 4px !important; } .paper .tl__date { color: #000 !important; display: block; margin-bottom: 4px; } /* На бумаге подсказка «наведите курсор» смысла не имеет */ /* В листе печати квадратик снова становится символом в строке: копию листа для PDF рисует html2canvas, а он раскладывает текст по своим правилам — блок внутри строки у него разъезжается с подписью (и величина разъезда зависит от шрифтов на машине). Символ же едет вместе с текстом всегда. */ .paper:not(:root) .map-legend__sq { display: inline; width: auto; height: auto; overflow: visible; font-size: 1.15em; /* сдвиг в долях от размера шрифта: середина квадратика встаёт на середину подписи при любом шрифте на машине посетителя */ vertical-align: -.24em; line-height: 1; background: none; border: 0; margin-right: 5px; } .paper .map-legend__hint { display: none !important; } /* Низ листа: кто его сделал. В PDF подпись прижата к нижнему краю листа (position: absolute), при печати — к низу последней страницы (растягиваем лист на страницу и прижимаем подпись вниз). Место под неё зарезервировано отступом .sheet-wrap снизу. */ .paper .sheet-foot { display: block !important; position: absolute; left: 0; right: 0; bottom: 6mm; text-align: center; font-size: 9pt; color: #444; } @media print { /* Запасной вариант на случай, если скрипт не успел навесить .paper: прячем служебное, чтобы на бумагу не попали меню и кнопки. */ .hdr, .ftr, .skip, .crumbs, .filters, .burger, .nav, .hero__actions, .sec__more, .gal, .tiles, .no-print, .calc, .calc__hint, .calc__check { display: none !important; } /* Обычные страницы печатаются с полями 12 мм, как раньше. */ @page { margin: 12mm; } /* А лист калькулятора — без полей страницы. Только так браузер не подставляет сверху и снизу свои колонтитулы (адрес сайта, дата, номер страницы): им просто негде поместиться. Поля листу возвращает собственный отступ .sheet-wrap, снизу — с запасом под подпись. */ @page sheet { margin: 0; } .sheet-wrap { page: sheet; padding: 12mm 12mm 20mm; } /* Листу карты поля по бокам можно урезать: ширина страницы позволяет показать карту крупнее, а её края — ровная зелень, которая не боится того, что принтер не печатает у самого края бумаги. */ .sheet-wrap.sheet-tight { padding: 9mm 6mm 18mm; } /* Подпись листа — в самом низу: растягиваем лист на высоту страницы и прижимаем строку вниз. На листах, которые длиннее страницы, подпись окажется в конце — повторять её на каждой странице нельзя без полей страницы, а поля возвращают колонтитулы браузера. */ html.paper .sheet-wrap { display: flex; flex-direction: column; min-height: 100vh; } html.paper .sheet-foot { position: static; margin-top: auto; padding-top: 14px; } .calc__h3 { page-break-after: avoid; } .scheme, .tbl, .calc__result .stats, .stat, .stats, .qr, details.year, .tl__i, .donut { page-break-inside: avoid; } h1, h2, h3 { page-break-after: avoid; } .tbl tr, tr { page-break-inside: avoid; } .tbl-wrap, table.tbl { page-break-inside: auto; } .tl { gap: 8px; } details.year > summary::before { content: ""; } }