/* ========================================================================== icn — иконки через CSS mask Размер наследуется от font-size, цвет — от color родителя. ДВЕ СТИЛИСТИКИ, НЕ ПУТАТЬ: 1) UI-иконки — линейные: viewBox 0 0 24 24, fill none, stroke black, stroke-width 1.5, linecap/linejoin round. 2) Соцсети — сплошная заливка fill black, без stroke, плюс фирменный цвет через --brand / --brand-image. ========================================================================== */ .icn { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* Размеры ---------------------------------------------------------------- */ .icn-sm { font-size: 0.875em; } .icn-lg { font-size: 1.25em; } .icn-xl { font-size: 1.75em; } .icn-2x { font-size: 2.5em; } /* ========================================================================== БАЗА ========================================================================== */ .icn-user{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewbox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M3.229%2016.4582C1.20817%2016.4582%20-0.000162661%2015.2498%20-0.000162661%2013.229V13.1457C-0.000162661%2010.6873%203.854%209.1665%208.229%209.1665C12.604%209.1665%2016.4582%2010.6873%2016.4582%2013.1457V13.229C16.4582%2015.2498%2015.2498%2016.4582%2013.229%2016.4582H3.229ZM1.45817%2013.229C1.45817%2014.5623%201.89567%2014.9998%203.229%2014.9998H13.229C14.5623%2014.9998%2014.9998%2014.5623%2014.9998%2013.229V13.1457C14.9998%2011.7707%2012.2082%2010.6248%208.229%2010.6248C4.24984%2010.6248%201.45817%2011.7707%201.45817%2013.1457V13.229ZM8.229%208.12484C5.979%208.12484%204.1665%206.31234%204.1665%204.06234C4.1665%201.81234%205.979%20-0.000163555%208.229%20-0.000163555C10.479%20-0.000163555%2012.2915%201.81234%2012.2915%204.06234C12.2915%206.31234%2010.479%208.12484%208.229%208.12484ZM8.229%206.6665C9.79151%206.6665%2010.8332%205.62484%2010.8332%204.06234C10.8332%202.49984%209.79151%201.45817%208.229%201.45817C6.6665%201.45817%205.62484%202.49984%205.62484%204.06234C5.62484%205.62484%206.6665%206.6665%208.229%206.6665Z%22%20fill%3D%22%23BFB1B1%22%20%2F%3E%0A%3C%2Fsvg%3E");} .icn-grid{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2216%22%20viewbox%3D%220%200%2015%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10.0563%206.98592C9.16901%206.98592%208.4507%206.21972%208.4507%205.27324V1.71268C8.4507%200.766197%209.16901%200%2010.0563%200H13.3944C14.2817%200%2015%200.766197%2015%201.71268V5.27324C15%206.21972%2014.2817%206.98592%2013.3944%206.98592H10.0563ZM1.60563%2016C0.71831%2016%200%2015.2338%200%2014.2873V10.7268C0%209.78028%200.71831%209.01408%201.60563%209.01408H4.94366C5.83099%209.01408%206.5493%209.78028%206.5493%2010.7268V14.2873C6.5493%2015.2338%205.83099%2016%204.94366%2016H1.60563ZM4.94366%2014.4225C5.17606%2014.4225%205.07042%2014.5352%205.07042%2014.2873V10.7268C5.07042%2010.4789%205.17606%2010.5915%204.94366%2010.5915H1.60563C1.37324%2010.5915%201.47887%2010.4789%201.47887%2010.7268V14.2873C1.47887%2014.5352%201.37324%2014.4225%201.60563%2014.4225H4.94366ZM1.60563%206.98592C0.71831%206.98592%200%206.21972%200%205.27324V1.71268C0%200.766197%200.71831%200%201.60563%200H4.94366C5.83099%200%206.5493%200.766197%206.5493%201.71268V5.27324C6.5493%206.21972%205.83099%206.98592%204.94366%206.98592H1.60563ZM4.94366%205.40845C5.17606%205.40845%205.07042%205.52113%205.07042%205.27324V1.71268C5.07042%201.46479%205.17606%201.57746%204.94366%201.57746H1.60563C1.37324%201.57746%201.47887%201.46479%201.47887%201.71268V5.27324C1.47887%205.52113%201.37324%205.40845%201.60563%205.40845H4.94366ZM10.0563%2016C9.16901%2016%208.4507%2015.2338%208.4507%2014.2873V10.7268C8.4507%209.78028%209.16901%209.01408%2010.0563%209.01408H13.3944C14.2817%209.01408%2015%209.78028%2015%2010.7268V14.2873C15%2015.2338%2014.2817%2016%2013.3944%2016H10.0563ZM13.3944%2014.4225C13.6268%2014.4225%2013.5211%2014.5352%2013.5211%2014.2873V10.7268C13.5211%2010.4789%2013.6268%2010.5915%2013.3944%2010.5915H10.0563C9.82394%2010.5915%209.92958%2010.4789%209.92958%2010.7268V14.2873C9.92958%2014.5352%209.82394%2014.4225%2010.0563%2014.4225H13.3944ZM13.3944%205.40845C13.6268%205.40845%2013.5211%205.52113%2013.5211%205.27324V1.71268C13.5211%201.46479%2013.6268%201.57746%2013.3944%201.57746H10.0563C9.82394%201.57746%209.92958%201.46479%209.92958%201.71268V5.27324C9.92958%205.52113%209.82394%205.40845%2010.0563%205.40845H13.3944Z%22%20fill%3D%22%23BFB1B1%22%20%2F%3E%0A%3C%2Fsvg%3E");} .icn-card{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2214%22%20viewbox%3D%220%200%2017%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0.753164%205.11111V3.55556H16.2468V5.11111H0.753164ZM3.33544%2014C1.2481%2014%200%2012.7111%200%2010.5556V3.44445C0%201.28889%201.2481%200%203.33544%200H13.6646C15.7519%200%2017%201.28889%2017%203.44445V10.5556C17%2012.7111%2015.7519%2014%2013.6646%2014H3.33544ZM1.50633%2010.5556C1.50633%2011.9778%201.95823%2012.4444%203.33544%2012.4444H13.6646C15.0418%2012.4444%2015.4937%2011.9778%2015.4937%2010.5556V3.44445C15.4937%202.02222%2015.0418%201.55556%2013.6646%201.55556H3.33544C1.95823%201.55556%201.50633%202.02222%201.50633%203.44445V10.5556Z%22%20fill%3D%22%23BFB1B1%22%20%2F%3E%0A%3C%2Fsvg%3E");} .icn-doc{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2219%22%20viewbox%3D%220%200%2015%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M3.69048%2019C1.66667%2019%200%2017.3165%200%2015.2722V3.72785C0%201.68354%201.66667%200%203.69048%200H8.52381C8.71428%200%208.88095%200.0721522%209%200.192405L14.8095%206.06076C14.9286%206.18101%2015%206.34937%2015%206.54177V15.2722C15%2017.3165%2013.3333%2019%2011.3095%2019H3.69048ZM11.3095%2017.3165C12.5238%2017.3165%2013.3333%2016.4987%2013.3333%2015.2722V7.4557H8.47619C7.97619%207.4557%207.61905%207.09494%207.61905%206.58987V1.68354H3.69048C2.47619%201.68354%201.66667%202.50127%201.66667%203.72785V15.2722C1.66667%2016.4987%202.47619%2017.3165%203.69048%2017.3165H11.3095ZM9.28572%205.77215H12.1429L9.28572%202.88608V5.77215ZM8.80952%2011.4241C8.80952%2012.1456%208.21428%2012.7468%207.5%2012.7468C6.78571%2012.7468%206.19048%2012.1456%206.19048%2011.4241C6.19048%2010.7025%206.78571%2010.1013%207.5%2010.1013C8.21428%2010.1013%208.80952%2010.7025%208.80952%2011.4241ZM12.619%2011.4241C12.619%2012.1456%2012.0238%2012.7468%2011.3095%2012.7468C10.5952%2012.7468%2010%2012.1456%2010%2011.4241C10%2010.7025%2010.5952%2010.1013%2011.3095%2010.1013C12.0238%2010.1013%2012.619%2010.7025%2012.619%2011.4241ZM5%2011.4241C5%2012.1456%204.40476%2012.7468%203.69048%2012.7468C2.97619%2012.7468%202.38095%2012.1456%202.38095%2011.4241C2.38095%2010.7025%202.97619%2010.1013%203.69048%2010.1013C4.40476%2010.1013%205%2010.7025%205%2011.4241Z%22%20fill%3D%22%23006BDF%22%20%2F%3E%0A%3C%2Fsvg%3E");} .icn-fire{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2221%22%20viewbox%3D%220%200%2018%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16.2766%2012.3578C16.2766%2010.091%2015.3553%207.92951%2014.0809%206.03247C13.1098%204.58684%2011.9546%203.32814%2010.9135%202.33438L8.84797%207.75958C8.74443%208.03152%208.57264%208.27156%208.35093%208.45907C8.12917%208.64653%207.86332%208.77605%207.58013%208.83819C7.29713%208.90022%207.00281%208.89318%206.72293%208.81824C6.44292%208.74325%206.18387%208.60242%205.9712%208.40475L3.72836%206.3218C2.3746%208.42254%201.72337%2010.4448%201.72337%2012.3578C1.72349%2014.1894%202.48341%2015.9517%203.84504%2017.2553C5.20761%2018.5598%207.0612%2019.2972%208.99944%2019.2973C10.9379%2019.2973%2012.7923%2018.5599%2014.155%2017.2553C15.5165%2015.9518%2016.2765%2014.1894%2016.2766%2012.3578ZM12.6863%2012.932C12.7682%2012.4689%2013.2139%2012.1584%2013.6826%2012.2392C14.1514%2012.3201%2014.4657%2012.7615%2014.3838%2013.2247C14.0007%2015.3916%2012.1145%2017.18%209.89366%2017.538C9.42408%2017.6137%208.98084%2017.2991%208.90407%2016.8352C8.82744%2016.3712%209.14685%2015.9332%209.61653%2015.8575C11.1412%2015.6115%2012.4341%2014.3574%2012.6863%2012.932ZM18%2012.3578C17.9999%2014.6585%2017.0448%2016.8596%2015.3544%2018.4781C13.6646%2020.0958%2011.3777%2021%208.99944%2021C6.62128%2020.9999%204.33528%2020.0957%202.64564%2018.4781C0.955101%2016.8596%200.000124899%2014.6586%200%2012.3578C0%209.75438%201.00094%207.11834%202.88013%204.52153L2.93848%204.44947C3.08173%204.29088%203.28088%204.18999%203.49723%204.16901C3.74454%204.14509%203.99047%204.2281%204.17154%204.39626L7.15153%207.16429H7.15265C7.15648%207.16779%207.16361%207.17261%207.17397%207.17538C7.18431%207.17808%207.19577%207.17876%207.20651%207.17649C7.21745%207.17409%207.2256%207.16917%207.23007%207.1654C7.23344%207.16255%207.23456%207.15986%207.23456%207.15986L9.75229%200.550733L9.79493%200.456507C9.90829%200.24234%2010.1097%200.0844823%2010.3503%200.0252844C10.6252%20-0.0423251%2010.9166%200.0275%2011.129%200.212628C12.4285%201.34525%2014.1317%203.03077%2015.5159%205.09132C16.8978%207.14835%2018%209.63709%2018%2012.3578Z%22%20fill%3D%22%23FC4436%22%20%2F%3E%0A%3C%2Fsvg%3E");} .icn-calend{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2223%22%20viewbox%3D%220%200%2019%2023%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4.14789%204.35529C2.72958%204.35529%201.87324%205.28752%201.87324%206.83154V6.9772H17.1268V6.83154C17.1268%205.28752%2016.2704%204.35529%2014.8521%204.35529H4.14789ZM14.8521%202.31602C17.1535%202.31602%2019%204.32616%2019%206.83154V9.01647H0V6.83154C0%204.32616%201.84648%202.31602%204.14789%202.31602H14.8521ZM1.87324%2018.4845C1.87324%2020.0285%202.72958%2020.9607%204.14789%2020.9607H14.8521C16.2704%2020.9607%2017.1268%2020.0285%2017.1268%2018.4845V9.01647H1.87324V18.4845ZM0%206.9772H19V18.4845C19%2020.9899%2017.1535%2023%2014.8521%2023H4.14789C1.84648%2023%200%2020.9899%200%2018.4845V6.9772ZM3.21127%201.00507C3.21127%20-0.335022%205.08451%20-0.335022%205.08451%201.00507V3.33566H3.21127V1.00507ZM15.7887%203.33566H13.9155V1.00507C13.9155%20-0.335022%2015.7887%20-0.335022%2015.7887%201.00507V3.33566ZM10.9718%2017.3192C10.9718%2018.1932%2010.3028%2018.9215%209.5%2018.9215C8.69718%2018.9215%208.02817%2018.1932%208.02817%2017.3192C8.02817%2016.4452%208.69718%2015.7169%209.5%2015.7169C10.3028%2015.7169%2010.9718%2016.4452%2010.9718%2017.3192ZM15.2535%2017.3192C15.2535%2018.1932%2014.5845%2018.9215%2013.7817%2018.9215C12.9789%2018.9215%2012.3099%2018.1932%2012.3099%2017.3192C12.3099%2016.4452%2012.9789%2015.7169%2013.7817%2015.7169C14.5845%2015.7169%2015.2535%2016.4452%2015.2535%2017.3192ZM6.69014%2017.3192C6.69014%2018.1932%206.02113%2018.9215%205.21831%2018.9215C4.41549%2018.9215%203.74648%2018.1932%203.74648%2017.3192C3.74648%2016.4452%204.41549%2015.7169%205.21831%2015.7169C6.02113%2015.7169%206.69014%2016.4452%206.69014%2017.3192ZM10.9718%2012.658C10.9718%2013.532%2010.3028%2014.2603%209.5%2014.2603C8.69718%2014.2603%208.02817%2013.532%208.02817%2012.658C8.02817%2011.784%208.69718%2011.0557%209.5%2011.0557C10.3028%2011.0557%2010.9718%2011.784%2010.9718%2012.658ZM15.2535%2012.658C15.2535%2013.532%2014.5845%2014.2603%2013.7817%2014.2603C12.9789%2014.2603%2012.3099%2013.532%2012.3099%2012.658C12.3099%2011.784%2012.9789%2011.0557%2013.7817%2011.0557C14.5845%2011.0557%2015.2535%2011.784%2015.2535%2012.658ZM6.69014%2012.658C6.69014%2013.532%206.02113%2014.2603%205.21831%2014.2603C4.41549%2014.2603%203.74648%2013.532%203.74648%2012.658C3.74648%2011.784%204.41549%2011.0557%205.21831%2011.0557C6.02113%2011.0557%206.69014%2011.784%206.69014%2012.658Z%22%20fill%3D%22%23E655EE%22%20%2F%3E%0A%3C%2Fsvg%3E");} .icn-timer{--icon:url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewbox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10.9998%2020C5.51538%2020%201.11675%2015.7922%201.11675%2010.5458C1.11675%205.29944%205.51538%201.09168%2010.9998%201.09168C16.4841%201.09168%2020.8828%205.29944%2020.8828%2010.5458C20.8828%2015.7922%2016.4841%2020%2010.9998%2020ZM10.9998%2018.1358C15.5376%2018.1358%2018.934%2014.8868%2018.934%2010.5458C18.934%206.20491%2015.5376%202.95588%2010.9998%202.95588C6.46193%202.95588%203.06551%206.20491%203.06551%2010.5458C3.06551%2014.8868%206.46193%2018.1358%2010.9998%2018.1358ZM1.67354%203.72819C0.810513%204.58039%20-0.63714%203.32872%200.309402%202.42325L2.53656%200.292732C3.45526%20-0.612738%204.73588%200.79873%203.9007%201.59767L1.67354%203.72819ZM18.1267%201.59767C17.1801%200.718835%2018.6278%20-0.506211%2019.4908%200.292732L21.718%202.42325C22.581%203.24882%2021.2725%204.63366%2020.3538%203.72819L18.1267%201.59767ZM10.0254%206.28481C10.0254%205.05976%2011.9741%205.05976%2011.9741%206.28481V10.1464L15.0365%2013.0758C15.8995%2013.9014%2014.5911%2015.2862%2013.6724%2014.3808L10.5265%2011.398C10.1924%2011.0785%2010.0254%2010.7323%2010.0254%2010.2529V6.28481Z%22%20fill%3D%22%2326C7AC%22%20%2F%3E%0A%3C%2Fsvg%3E");} /* ========================================================================== Соцсети и мессенджеры ДРУГАЯ СТИЛИСТИКА: сплошная заливка fill black, без обводки. По умолчанию — currentColor (как обычная иконка). Класс .icn-color включает фирменный цвет. ========================================================================== */ .icn-color { background-color: var(--brand, currentColor); background-image: var(--brand-image, none); } /* Серая иконка, которая краснеет/синеет при наведении на родителя. Родителю достаточно класса .icn-hover */ .icn-hover .icn { transition: background-color .15s, background-image .15s; } .icn-hover:hover .icn { background-color: var(--brand, currentColor); background-image: var(--brand-image, none); } /* --- Telegram --- */ .icn-telegram { --brand: #2aabee; --icon: url("data:image/svg+xml,"); } /* --- WhatsApp --- */ .icn-whatsapp { --brand: #25d366; --icon: url("data:image/svg+xml,"); } /* --- MAX --- */ .icn-max { --brand: #5533ee; --brand-image: linear-gradient(74deg, #44ccff 0%, #5533ee 66%, #9933dd 100%); --icon: url("data:image/svg+xml,"); } /* --- ВКонтакте --- */ .icn-vk { --brand: #0077ff; --icon: url("data:image/svg+xml,"); } /* --- Одноклассники --- */ .icn-ok { --brand: #ee8208; --icon: url("data:image/svg+xml,"); } /* --- YouTube --- */ .icn-youtube { --brand: #ff0000; --icon: url("data:image/svg+xml,"); }