8536 lines
182 KiB
CSS
8536 lines
182 KiB
CSS
:root {
|
|
--icon-angle-down: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.44453 7.76144L-5.0361e-08 3.15212L1.11094 2L5 6.03325L8.88906 2L10 3.15212L5.55547 7.76144C5.40813 7.91419 5.20833 8 5 8C4.79167 8 4.59187 7.91419 4.44453 7.76144Z' fill='black' /%3E%3C/svg%3E");
|
|
--icon-angle-left: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.2386 4.4445 4.6093-4.4445 1.1521 1.1109-4.0332 3.8891 4.0332 3.8891-1.1521 1.1109-4.6093-4.4445c-.15275-.14734-.23856-.34714-.23856-.55547s.085811-.40813.23856-.55547z' clip-rule='evenodd' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
|
|
--icon-angle-round: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle transform='rotate(-90)' cx='-18' cy='18' r='18' fill='%23f5f5fa' stroke-width='.97297'/%3E%3Cpath d='m17.536 20.613-3.7133-3.6676.9282-.9168 3.2492 3.2093 3.2493-3.2093.9281.9168-3.7133 3.6676c-.1231.1215-.29.1898-.4641.1898-.174 0-.341-.0683-.4641-.1898z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E");
|
|
--icon-checkmark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.605 4.0883c.25317.24833.39546.5851.39546.93628 0 .35115-.14229.68791-.39546.93628l-10.124 9.9253c-.1338.13122-.29265.23526-.46747.30627-.17483.07101-.36221.10755-.55144.10755-.18924 0-.37662-.03654-.55144-.10755-.17483-.07101-.33368-.17505-.46747-.30627l-5.0301-4.9306c-.12901-.12216-.23191-.26828-.30271-.42984-.07079-.16156-.10805-.33533-.10961-.51116-.0015-.17583.03262-.35021.10053-.51296.06791-.16274.16821-.31059.29504-.43493.12683-.12434.27763-.22267.44364-.28925.166-.066583.34387-.10009.52322-.09856.17935.00153.35659.038061.52139.10746.16479.0694.31384.17028.43845.29676l4.1387 4.0575 9.2332-9.0523c.12546-.12306.27441-.22067.4383-.28728.16398-.0666.33966-.10088.51714-.10088.17748 0 .35316.03428.51714.10088.16389.0666.31284.16422.4383.28728z' clip-rule='evenodd' fill='%23ae001b' fill-rule='evenodd' stroke-width='.90001'/%3E%3C/svg%3E%0A");
|
|
--icon-user: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 9C8.20435 9 7.44129 8.68393 6.87868 8.12132C6.31607 7.55871 6 6.79565 6 6C6 5.20435 6.31607 4.44129 6.87868 3.87868C7.44129 3.31607 8.20435 3 9 3C9.79565 3 10.5587 3.31607 11.1213 3.87868C11.6839 4.44129 12 5.20435 12 6C12 6.79565 11.6839 7.55871 11.1213 8.12132C10.5587 8.68393 9.79565 9 9 9ZM9 11.25C11.3895 11.25 13.5337 11.6782 15 13.5472V15H3V13.5472C4.46625 11.6775 6.6105 11.25 9 11.25Z' fill='%23515151' /%3E%3C/svg%3E");
|
|
--icon-car: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m24 10.406v-1.875h-2.8649l-1.4392-3.87-.4622-.1274c-.0659-.01814-.9865-.26771-2.5462-.48047v-2.1784h-1.875v1.9792c-.624-.04818-1.2493-.07957-1.875-.09413v-1.8851h-1.875v1.8898c-.6258.01782-1.251.05177-1.875.10181v-1.9916h-1.875v2.1934c-1.5331.20784-2.463.44386-2.5311.46144l-.47555.12267-1.43 3.8787h-2.8759v1.875h2.0156l.024.0321-1.1363 1.4633-.02362.0371c-.57496.9024-.88015 1.9502-.87966 3.0202v6.2286c0 1.5509 1.2616 2.8125 2.8125 2.8125s2.8125-1.2616 2.8125-2.8125v-.4688h12.75v.4688c0 1.5509 1.2616 2.8125 2.8125 2.8125 1.5509 0 2.8125-1.2616 2.8125-2.8125v-6.2363c0-1.0656-.301-2.1051-.8707-3.006l-.0232-.0368-1.1263-1.4606.0333-.0416zm-18.281-4.1666c.96018-.19992 3.3193-.61467 6.3747-.61467 3.0194 0 5.2679.40889 6.1865.60881l1.168 3.1412h-14.885zm-1.9691 14.948c0 .5169-.42061.9375-.9375.9375s-.9375-.4206-.9375-.9375v-.4688h1.875zm17.438.9375c-.5169 0-.9375-.4206-.9375-.9375v-.4688h1.875v.4688c0 .5169-.4206.9375-.9375.9375zm.9375-3.2813h-20.25v-3.8847c0-.7008.195-1.3839.56438-1.9785l1.3439-1.7305h16.447l1.3359 1.7323c.3654.5918.5588 1.2735.5585 1.969zm-14.109-4.6875h7.9688v1.875h-7.9688zm-1.9219.9375c0 .5179-.41967.9375-.9375.9375h-.9375c-.51783 0-.9375-.4196-.9375-.9375 0-.5178.41967-.9375.9375-.9375h.9375c.51783 0 .9375.4197.9375.9375zm14.625 0c0 .5179-.4197.9375-.9376.9375h-.9374c-.5179 0-.9376-.4196-.9376-.9375 0-.5178.4197-.9375.9376-.9375h.9374c.5179 0 .9376.4197.9376.9375zm-9.6563-13.219h-1.875v-1.875h1.875zm3.75 0h-1.875v-1.875h1.875z' fill='%23fff'/%3E%3C/svg%3E");
|
|
--icon-bike: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7.5822 19.053c0-.9739-.79117-1.7633-1.7671-1.7633s-1.7671.7894-1.7671 1.7633.79117 1.7633 1.7671 1.7633 1.7671-.7894 1.7671-1.7633zm8.6589 0c0 .9739.7911 1.7633 1.7671 1.7633.9759 0 1.7671-.7894 1.7671-1.7633zm2.6507-14.107c-.488 0-.8836.39475-.8836.88166v.88166h1.7671v-1.7633zm-11.31 0v1.7633h-5.3014v-1.7633zm3.5342-3.5266v1.7633h-5.3013v-1.7633zm-1.7671 17.633c0 1.9477-1.5823 3.5266-3.5342 3.5266s-3.5342-1.5789-3.5342-3.5266h-1.5904v-2.645c0-4.3529 3.3545-7.9349 7.7753-7.9349h4.2411v1.7633h-1.7671v6.9906c2.9973-.4278 5.3014-2.9998 5.3014-6.1089v-3.0678l-1.9182-1.3406h.1511v-1.7633h1.9179c.3639-1.0273 1.3457-1.7633 2.4999-1.7633h2.6506v5.29h-2.1404c.0552.06103.1107.12356.1661.18761.9399 1.086 1.9896 2.7184 1.9896 4.6529 0 .4383-.0408.8608-.1097 1.2622 1.1254.7981 1.8616 2.1104 1.8616 3.5955v.8817h-1.7672c0 1.9477-1.5823 3.5266-3.5342 3.5266s-3.5342-1.5789-3.5342-3.5266zm-6.8918-1.7633h.29613c.61109-1.0541 1.7532-1.7633 3.0614-1.7633s2.4503.7092 3.0614 1.7633h.29613v-7.0533h-.70685c-3.3868 0-6.0082 2.7336-6.0082 6.1716zm15.551-6.1716c0 2.4927-1.152 4.7169-2.9536 6.1716h6.337c-.2311-.6527-.7117-1.1884-1.3295-1.4924l-.6429-.3164.1778-.693c.1194-.4655.1936-.9615.1936-1.4743 0-1.307-.725-2.5357-1.5599-3.5004-.0743-.08584-.1487-.16863-.2225-.24827z' fill='%23cacada'/%3E%3C/svg%3E%0A");
|
|
--icon-truck: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.481 6.5h3.5186l.0508.12207 2.2763 5.4648 2.5674 1.4561.1006.0566v6.0274h-3.2148c-.4164 1.1923-1.5502 2.0516-2.8838 2.0517-1.3336-2e-4-2.4665-.8594-2.8828-2.0517h-6.0244c-.4163 1.1922-1.5493 2.0515-2.8828 2.0517-1.3338 0-2.4674-.8593-2.8838-2.0517h-3.2148v-17.24h15.474v4.1133zm-7.1816 13.95c.0059-.0071.01273-.0134.01856-.0205.00914-.0112.01642-.0239.02539-.0352-.01469.0186-.02881.0375-.04395.0557zm.18653-.2481c-.00655.0099-.01482.0186-.02149.0284.00668-.0098.01493-.0185.02149-.0284zm.11523-.1933c.01496-.0269.02984-.0537.04395-.0811-.0141.0274-.029.0542-.04395.0811zm-2.4951-2.6026c-.67062 0-1.2168.5461-1.2168 1.2168 4e-5.6706.5462 1.2168 1.2168 1.2168.67032-3e-4 1.2158-.5464 1.2158-1.2168-4e-5-.6705-.54548-1.2164-1.2158-1.2168zm11.79 0c-.6704 3e-4-1.2158.5462-1.2158 1.2168 0 .6705.5454 1.2166 1.2158 1.2168.6705-1e-4 1.2167-.5463 1.2168-1.2168-1e-4-.6706-.5463-1.2166-1.2168-1.2168zm-9.1602 2.3292c.0142-.0335.02709-.0675.04004-.1016-.01294.0341-.02585.0681-.04004.1016zm-5.3037-.1016c.00264.0069.00608.0136.00879.0205-.02883-.0737-.0546-.149-.07715-.2256l.06836.2051zm13.049-1.0108c0 .0419.0033.0832.0069.1241l-.0059-.1241c0-.0487.002-.097.0069-.1445l-.0079.1445zm-14.833-.6376h.00097v-5.5225h-.00097v5.5225zm.19922-10.647h8.8085v1.8398h-8.8085v1.6426h6.7559v1.8398h-6.7559v5.126h1.3223c.36463-1.2794 1.5409-2.2207 2.9365-2.2207 1.3952 3e-4 2.571.9414 2.9355 2.2207h4.6006v-13.561h-11.795v3.1123zm13.634 9.4179c.5589-.7221 1.4324-1.1903 2.4151-1.1904 1.3956 1e-4 2.5719.9413 2.9365 2.2207h1.3232v-3.1152l-1.7978-1.0205h-4.877v3.1054zm1.0118-.623c-.0594.0336-.1172.0697-.1739.1074.1131-.0752.2319-.1424.3555-.2012l-.1816.0938zm-10.635-.3584.24707-.0098c.16767 0 .33238.0142.49219.042-.07901-.0138-.15916-.0241-.24024-.0312l-.25097-.0118c-.08352 0-.16626.0037-.24805.0108zm12.038-.0108c-.1456 1e-4-.2888.0112-.4287.0323l.2119-.0235c.0716-.0052.1439-.0078.2168-.0078.127 0 .2522.0076.375.0235l-.1856-.0186c-.0626-.0041-.1258-.0058-.1894-.0059zm-2.4151-3.9531h3.7383l-1.4463-3.4717h-2.292v3.4717zm-13.833-.792h.00097v-2.039h-.00097v2.039zm0-3.4824h.00097v-3.5088h-.00097v3.5088z' fill='%23CACADA'/%3E%3C/svg%3E");
|
|
--icon-play: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m53.986 25.627c3.3524 1.9484 3.3524 6.7982 0 8.7465l-42.906 24.937c-3.3645 1.9554-7.5794-.4765-7.5794-4.3733l2e-6-49.873c0-3.8967 4.2148-6.3287 7.5793-4.3732z' fill='%23fff'/%3E%3C/svg%3E");
|
|
--icon-cross: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6914 0V24' stroke='%2373798C'/%3E%3Cpath d='M24 11.6924L-8.9407e-07 11.6924' stroke='%2373798C'/%3E%3C/svg%3E%0A");
|
|
--icon-quotes: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21.45 13.688c0 2.797-2.2655 5.0625-5.0625 5.0625h-.3375c-.7467 0-1.35-.6033-1.35-1.35s.6033-1.35 1.35-1.35h.3375c1.3036 0 2.3625-1.0589 2.3625-2.3625v-.3375h-2.7c-1.4892 0-2.7-1.2108-2.7-2.7v-2.7c0-1.4892 1.2108-2.7 2.7-2.7h2.7c1.4892 0 2.7 1.2108 2.7 2.7zm-10.8 0c0 2.797-2.2655 5.0625-5.0625 5.0625h-.3375c-.74672 0-1.35-.6033-1.35-1.35s.60328-1.35 1.35-1.35h.3375c1.3036 0 2.3625-1.0589 2.3625-2.3625v-.3375h-2.7c-1.4892 0-2.7-1.2108-2.7-2.7v-2.7c0-1.4892 1.2108-2.7 2.7-2.7h2.7c1.4892 0 2.7 1.2108 2.7 2.7z' fill='%23d4d4d4'/%3E%3C/svg%3E");
|
|
--icon-phone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.083 0h-4.1667c-1.2152.0013-2.3802.48463-3.2394 1.3439-.85925.85925-1.3426 2.0243-1.3439 3.2394v10.833c0 2.5275 2.0558 4.5833 4.5833 4.5833h4.1667c2.5267 0 4.5833-2.0558 4.5833-4.5833v-10.833c0-2.5275-2.0566-4.5833-4.5833-4.5833zm2.0833 15.417c0 1.1483-.9341 2.0833-2.0833 2.0833h-4.1667c-.55233-7e-4-1.0818-.2204-1.4724-.6109-.39056-.3906-.61026-.9201-.61093-1.4724v-10.833c0-1.1483.935-2.0833 2.0833-2.0833h4.1667c1.1492 0 2.0833.935 2.0833 2.0833zm-3.3333.4166h-1.6667c-.22102 0-.43298-.0878-.58926-.244-.15628-.1563-.24408-.3683-.24408-.5893s.0878-.433.24408-.5893c.15628-.1562.36824-.244.58926-.244h1.6667c.221 0 .433.0878.5892.244.1563.1563.2441.3683.2441.5893s-.0878.433-.2441.5893c-.1562.1562-.3682.244-.5892.244z' fill='%23d2d2dc'/%3E%3C/svg%3E");
|
|
--icon-location: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.3333 6.6667c0-.32963.09774-.65186.28088-.92595.18314-.27408.44343-.4877.74798-.61384.30454-.12615.63964-.15916.96294-.09485s.6203.22305.8534.45613c.2331.23309.3918.53006.4561.85336.0643.32331.0313.65842-.0948.96296-.1262.30454-.3398.56484-.6139.74798-.2741.18313-.5963.28088-.9259.28088-.44206 0-.86599-.17559-1.1785-.48815s-.48815-.73649-.48815-1.1785zm11.667 4.4783v4.2909c.0046.5768-.1236 1.1471-.3748 1.6664-.2511.5194-.6185.974-1.0736 1.3286-.4268.3348-.9248.5671-1.4557.679-.5308.1118-1.0803.1002-1.6059-.034-.0367-.0092-1.94-.6817-1.94-.6817-.3137-.0853-.6448-.0821-.9567.0092l-4.5833 1.4216c-.39857.116-.81156.1749-1.2267.175-.45298 4e-4-.9031-.0716-1.3333-.2133l-2.2825-.75c-.9261-.3-1.7325-.8873-2.3021-1.6767-.56959-.7894-.87274-1.7399-.86542-2.7133v-3.3967c-.0053-.6283.11821-1.251.36287-1.8298.24465-.57874.60528-1.1012 1.0596-1.5352.54195-.50655 1.2029-.86825 1.9217-1.0517-.01692-.89746.14569-1.7892.47826-2.623.33258-.83373.82843-1.5926 1.4584-2.232.61589-.62653 1.3504-1.1241 2.1606-1.4638.81023-.33968 1.68-.51462 2.5586-.51462.8785 0 1.7483.17494 2.5585.51462.8103.33968 1.5447.8373 2.1606 1.4638 1.2382 1.2556 1.935 2.9466 1.9409 4.71l.3883.13584c.8728.33462 1.6229.92735 2.1503 1.6992.5273.77182.8069 1.6869.8014 2.6216zm-12.941-1.4116 2.7442 2.6833c.02635.0267.05775.0479.09237.0624.03462.0144.07177.0219.10933.0219.0375 0 .0746-.0075.1093-.0219.0346-.0145.066-.0357.0923-.0624l2.75-2.6958c.7808-.80127 1.2166-1.8765 1.2141-2.9952-.0025-1.1187-.4431-2.192-1.2274-2.9898-.3836-.3908-.8412-.70122-1.3462-.91313-.5049-.21191-1.047-.32105-1.5946-.32105-.54764 0-1.0898.10914-1.5947.32105s-.96258.52233-1.3462.91313c-.78541.80039-1.2256 1.8769-1.2261 2.9982s.43884 2.1982 1.2236 2.9993zm10.441 1.4108c.0074-.4197-.112-.8319-.3428-1.1825-.2308-.35063-.5621-.62337-.9506-.78248-.3304.86521-.8369 1.6524-1.4875 2.3117l-2.7616 2.71c-.5189.5146-1.2201.8034-1.9509.8034-.73078 0-1.432-.2888-1.9508-.8034l-2.76-2.695c-.6311-.6402-1.1283-1.3997-1.4625-2.2342-.25379.09301-.4858.23709-.68167.42334-.20916.20087-.37491.44248-.487.70998-.11209.2674-.16813.555-.16467.845v3.3959c-.0088.4419.1239.8751.37877 1.2363.25487.3611.61854.6314 1.0379.7712l2.3133.7566c.34336.1129.71279.1196 1.06.0192l4.5925-1.4233c.7998-.2332 1.6501-.2288 2.4475.0124l1.8225.6484c.1505.031.3061.0286.4556-.0073s.2893-.1042.4094-.2002c.1537-.1221.2773-.2781.3609-.4557.0837-.1776.1253-.3722.1216-.5685z' fill='%23d2d2dc'/%3E%3C/svg%3E");
|
|
--icon-email: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.146.83336h-10.292c-1.1544.0013-2.2612.48464-3.0775 1.3439-.81629.85926-1.2754 2.0243-1.2767 3.2394v9.1667c.0013 1.2152.4604 2.3802 1.2767 3.2395.8163.8592 1.9231 1.3425 3.0775 1.3438h10.292c1.1544-.0013 2.2612-.4846 3.0775-1.3438.8163-.8593 1.2754-2.0243 1.2767-3.2395v-9.1666c-.0013-1.2152-.4604-2.3802-1.2767-3.2394-.8163-.85925-1.9231-1.3426-3.0775-1.3439zm0 2.5c.4801.0017.943.18879 1.3007.52584l-5.1458 5.4167c-.3495.35139-.81422.54746-1.2975.54746-.48332 0-.94804-.19607-1.2976-.54746l-5.1458-5.4167c.35613-.33553.81645-.52253 1.2944-.52584zm0 13.333h-10.292c-.52491 0-1.0283-.2194-1.3995-.6101-.37116-.3908-.57968-.9207-.57968-1.4732v-7.9025l4.1475 4.3658c.39089.4117.855.7382 1.3658.961.51081.2228 1.0583.3375 1.6112.3375.5529 0 1.1004-.1147 1.6113-.3375.5108-.2228.9749-.5493 1.3658-.961l4.1483-4.3658v7.9025c0 .5525-.2085 1.0824-.5797 1.4732-.3711.3907-.8746.6101-1.3995.6101z' fill='%23d2d2dc'/%3E%3C/svg%3E");
|
|
--icon-arrow-up: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5527 7.72343L10.6257 7.71866L10.6359 3.27418L1.36009 12.5323L-0.000836289 11.1687L9.24981 1.93573L4.85983 1.92551L4.86459 -9.12876e-05L12.5711 0.0176185L12.5527 7.72343Z' fill='%23AE001B'/%3E%3C/svg%3E%0A");
|
|
--icon-location-alt: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10 .75684c2.188 0 4.2865.8692 5.8336 2.4164 1.5472 1.5472 2.4164 3.6456 2.4164 5.8337 0 2.8178-1.5363 5.1241-3.1552 6.7787-.8088.8178-1.6913 1.5591-2.6363 2.2147l-.3905.2658-.1833.1219-.3456.22-.308.188-.3813.2218c-.2589.1477-.5518.2254-.8498.2254s-.5909-.0777-.8498-.2254l-.38128-.2218-.47667-.2934-.176-.1146-.37583-.2502c-1.0195-.6898-1.9691-1.4776-2.8352-2.3522-1.6188-1.6555-3.1552-3.9609-3.1552-6.7787 0-2.1881.86919-4.2865 2.4164-5.8337 1.5472-1.5472 3.6456-2.4164 5.8336-2.4164zm0 5.5c-.3611 0-.7187.07113-1.0524.20934-.33364.1382-.6368.34076-.89216.59612s-.45793.55852-.59613.89216c-.1382.33365-.20933.69125-.20933 1.0524 0 .3611.07113.7187.20933 1.0524.1382.3336.34077.6368.59613.8921.25536.2554.55852.4579.89216.5961.33368.1382.69128.2094 1.0524.2094.7293 0 1.4288-.2898 1.9445-.8055.5158-.5157.8055-1.2152.8055-1.9445 0-.72937-.2897-1.4288-.8055-1.9446-.5157-.51572-1.2152-.80546-1.9445-.80546z' fill='%23b2b7c9'/%3E%3C/svg%3E");
|
|
--icon-clip: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.75 22c-1.7333 0-3.2083-.6083-4.425-1.825s-1.825-2.6917-1.825-4.425v-9.25c0-1.25.43767-2.3123 1.313-3.187s1.9377-1.3123 3.187-1.313c1.2493-.00067 2.312.437 3.188 1.313s1.3133 1.9383 1.312 3.187v6.5c0 .2833-.096.521-.288.713s-.4293.2877-.712.287-.52-.0967-.712-.288-.288-.4287-.288-.712v-6.5c-.0167-.7-.2623-1.2917-.737-1.775s-1.0623-.725-1.763-.725c-.70067 0-1.2923.24167-1.775.725s-.72433 1.075-.725 1.775v9.25c-.01667 1.1833.39167 2.1877 1.225 3.013s1.8417 1.2377 3.025 1.237c.2833 0 .55-.0293.8-.088s.4917-.1293.725-.212c.2667-.1.525-.0957.775.013s.425.296.525.562.096.5243-.012.775-.2957.4257-.563.525c-.35.1333-.7123.2377-1.087.313s-.7623.1127-1.163.112zm4.538-1.287c-.192-.192-.288-.4297-.288-.713v-2h-2c-.2833 0-.5207-.096-.712-.288s-.2873-.4293-.288-.712.0953-.52.288-.712.43-.288.712-.288h2v-2c0-.2833.096-.5207.288-.712s.4293-.2873.712-.288.5203.0953.713.288.2883.43.287.712v2h2c.2833 0 .521.096.713.288s.2877.4293.287.712-.0967.5203-.288.713-.4287.2883-.712.287h-2v2c0 .2833-.096.521-.288.713s-.4293.2877-.712.287-.52-.0957-.712-.287zm-7-4.001c-.192-.1907-.288-.428-.288-.712v-9c0-.28333.096-.52067.288-.712s.42933-.28733.712-.288c.2827-.00067.5203.09533.713.288s.2883.43.287.712v9c0 .2833-.096.521-.288.713s-.4293.2877-.712.287c-.28267-7e-4-.52-.0967-.712-.288zm7-6c-.192-.1913-.288-.4287-.288-.712v-3c0-.28333.096-.52067.288-.712s.4293-.28733.712-.288.5203.09533.713.288.2883.43.287.712v3c0 .2833-.096.521-.288.713s-.4293.2877-.712.287-.52-.0967-.712-.288z' fill='%23AE001B'/%3E%3C/svg%3E");
|
|
--icon-close: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.28393 21.8529L21.8525 7.2843' stroke='%23737785' stroke-width='2' stroke-linecap='round' /%3E%3Cpath d='M21.8528 21.8529L7.28418 7.2843' stroke='%23737785' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
|
|
--icon-placemark: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.9367 11.242c.34184.27009.69835.51702 1.0633.75794.36576-.23769.72054-.49062 1.0633-.75794.57144-.44926 1.1092-.93646 1.6094-1.458 1.153-1.2073 2.4042-2.9576 2.4042-4.9223 0-.63846-.13135-1.2707-.38649-1.8605-.25514-.58986-.62907-1.1258-1.1005-1.5773-.47144-.45146-1.0311-.80957-1.6471-1.0539-.61596-.24433-1.2761-.37008-1.9429-.37008-.66671 0-1.3269.12575-1.9429.37008-.61596.24433-1.1756.60244-1.6471 1.0539-.47143.45146-.8454.98742-1.1005 1.5773-.25514.58986-.38646 1.2221-.38646 1.8605 0 1.9647 1.2512 3.7144 2.4042 4.9223.50014.52172 1.0379 1.0086 1.6094 1.458zm1.0633-4.6246c-.48623 0-.95254-.18497-1.2964-.51422-.34382-.32924-.53697-.7758-.53697-1.2414s.19315-.91218.53697-1.2414c.34382-.32924.81013-.51421 1.2964-.51421.48623 0 .95254.18497 1.2964.51421.34382.32925.53697.77581.53697 1.2414s-.19315.91218-.53697 1.2414c-.34382.32925-.81013.51422-1.2964.51422z' fill='%2373798c' stroke-width='.92308'/%3E%3C/svg%3E");
|
|
--icon-cookie: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 22c-1.3833 0-2.6833-.2627-3.9-.788-1.2167-.5254-2.275-1.2377-3.175-2.137-.9-.8994-1.6123-1.9577-2.137-3.175-.52467-1.2174-.78733-2.5174-.788-3.9 0-1.25.24167-2.475.725-3.675s1.1583-2.271 2.025-3.213 1.9083-1.7003 3.125-2.275c1.2167-.57467 2.55-.862 4-.862.35 0 .7083.01666 1.075.05.3667.03333.7417.09166 1.125.175-.15.75-.1 1.4583.15 2.125.25.66666.625 1.2207 1.125 1.662.5.44133 1.096.74566 1.788.913.692.16733 1.4043.12566 2.137-.125-.4333.98333-.3707 1.925.188 2.825.5587.90002 1.3877 1.3666 2.487 1.4.0167.1833.0293.354.038.512s.0127.329.012.513c0 1.3666-.2627 2.654-.788 3.862s-1.2377 2.2663-2.137 3.175c-.8993.9086-1.9577 1.6253-3.175 2.15-1.2173.5246-2.5173.7873-3.9.788zm-1.5-12c.4167 0 .771-.14566 1.063-.437.292-.29133.4377-.64566.437-1.063-7e-4-.41733-.1463-.77133-.437-1.062-.2907-.29067-.645-.43667-1.063-.438-.418-.00134-.772.14466-1.062.438-.29.29333-.436.64733-.438 1.062-.002.41467.144.769.438 1.063s.648.43963 1.062.437zm-2 5c.41667 0 .771-.1457 1.063-.437.292-.2914.4377-.6457.437-1.063-.00067-.4174-.14633-.7714-.437-1.062-.29067-.2907-.645-.4367-1.063-.438-.418-.0014-.772.1446-1.062.438-.29.2933-.436.6473-.438 1.062-.002.4146.144.769.438 1.063s.648.4396 1.062.437zm6.5 1c.2833 0 .521-.096.713-.288s.2877-.4294.287-.712c-7e-4-.2827-.0967-.52-.288-.712s-.4287-.288-.712-.288-.5207.096-.712.288-.2873.4293-.288.712c-7e-4.2826.0953.5203.288.713.1927.1926.43.2883.712.287zm-3 4c2.0333 0 3.8377-.7 5.413-2.1s2.4377-3.1834 2.587-5.35c-.8333-.3667-1.4877-.8667-1.963-1.5-.4753-.6334-.796-1.3417-.962-2.125-1.2833-.18333-2.3833-.73333-3.3-1.65-.9167-.91667-1.4833-2.0167-1.7-3.3-1.3333-.03334-2.504.20833-3.512.725-1.008.51666-1.85 1.1793-2.526 1.988-.676.80866-1.1843 1.6877-1.525 2.637s-.51133 1.841-.512 2.675c0 2.2166.77933 4.1043 2.338 5.663 1.5587 1.5586 3.446 2.3376 5.662 2.337z' fill='%23AE001B'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
:root {
|
|
--color-text: #595757;
|
|
--color-grey: #eff1f8;
|
|
--color-grey-text: #676f8d;
|
|
--color-grey-light: #8a8f9f;
|
|
--color-grey-dark: #73798c;
|
|
--color-dark: #172d38;
|
|
--color-light: #fafafa;
|
|
--color-red: #ae001b;
|
|
--color-red-dark: #9a081e;
|
|
--gradient-grey: linear-gradient(180deg, #f5f5f9 0%, #f9f9f9 100%);
|
|
--color-white: #fff;
|
|
}
|
|
|
|
:root {
|
|
--fs-h1-sm: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
--fs-h2-sm: clamp(24px, 17.3702px + 1.768vw, 40px);
|
|
--fs-h3-sm: clamp(18px, 14.6851px + 0.884vw, 26px);
|
|
--fs-h1-lg: clamp(34px, 19.9116px + 3.7569vw, 68px);
|
|
--fs-h2-lg: clamp(24px, 10.7403px + 3.5359vw, 56px);
|
|
--fs-h3-lg: clamp(24px, 15.7127px + 2.2099vw, 44px);
|
|
--fs-title-lg: clamp(20px, 14.1989px + 1.547vw, 34px);
|
|
--fs-title-md: clamp(18px, 12.1989px + 1.547vw, 32px);
|
|
--fs-title-sm: clamp(16px, 12.6851px + 0.884vw, 24px);
|
|
--radius-lg: clamp(20px, 11.7127px + 2.2099vw, 40px);
|
|
--radius-md: clamp(15px, 8.7845px + 1.6575vw, 30px);
|
|
--radius-sm: clamp(15px, 12.9282px + 0.5525vw, 20px);
|
|
--space-section: clamp(40px, 6.8508px + 8.8398vw, 120px);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Onest";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("../fonts/Onest-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Onest";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url("../fonts/Onest-Medium.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Onest";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url("../fonts/Onest-SemiBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Onest";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url("../fonts/Onest-Bold.woff2") format("woff2");
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-red);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
::placeholder {
|
|
color: #8b8f9b;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-red);
|
|
color: #fff;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
html {
|
|
height: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 375px;
|
|
min-height: 100%;
|
|
overflow-x: hidden;
|
|
font-family: "Onest";
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
font-weight: normal;
|
|
letter-spacing: -0.01em;
|
|
color: var(--color-text);
|
|
text-decoration-skip-ink: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
body {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
body {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
fieldset {
|
|
border: none;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
border: none;
|
|
background: none;
|
|
box-shadow: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button, input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
}
|
|
input::-webkit-contacts-auto-fill-button[type=number], input::-webkit-credentials-auto-fill-button[type=number], input::-webkit-outer-spin-button[type=number], input::-webkit-inner-spin-button[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.inputs input,
|
|
.inputs textarea {
|
|
width: 100%;
|
|
outline: none;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #efefef;
|
|
}
|
|
.inputs input:focus,
|
|
.inputs textarea:focus {
|
|
border-color: #ccc;
|
|
}
|
|
.inputs input {
|
|
height: 64px;
|
|
padding: 0 20px;
|
|
}
|
|
.inputs textarea {
|
|
width: 120px;
|
|
padding: 15px 20px;
|
|
resize: none;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.inputs input {
|
|
height: 60px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.inputs input {
|
|
height: 56px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.inputs input,
|
|
.inputs textarea {
|
|
font-size: 15px;
|
|
}
|
|
.inputs input {
|
|
height: 50px;
|
|
}
|
|
}
|
|
.file-field {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
.file-field__label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 45px;
|
|
padding-inline: 15px;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
border-radius: 100px;
|
|
background-color: #ececf1;
|
|
cursor: pointer;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.file-field__label::before {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
flex-shrink: 0;
|
|
background: var(--icon-clip) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.file-field__label:hover {
|
|
background-color: #cacdd9;
|
|
}
|
|
.file-field__text {
|
|
margin-left: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.file-field__input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
}
|
|
.file-field__input:focus-visible + .file-field__label {
|
|
outline: 2px solid var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.file-field__label {
|
|
height: 40px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
button {
|
|
font: inherit;
|
|
border: none;
|
|
background: none;
|
|
appearance: none;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
list-style-type: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--fs-h1-sm);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--fs-h2-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--fs-h3-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--fs-h3-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1360px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 40px;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.container {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.container {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
.section-title {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
.section-title span {
|
|
color: var(--color-red);
|
|
}
|
|
.section-descr {
|
|
margin-bottom: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.section-descr {
|
|
margin-bottom: 45px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.section-title {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
.section-descr {
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.section-title {
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
.section-descr {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
.page-title {
|
|
margin-bottom: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.page-title {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.page-title {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
.btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 100px;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
color: var(--color-text);
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
.btn--lg {
|
|
height: 64px;
|
|
padding: 0 30px;
|
|
font-size: 20px;
|
|
}
|
|
.btn--md {
|
|
height: 58px;
|
|
padding: 0 25px;
|
|
}
|
|
.btn--sm {
|
|
height: 50px;
|
|
padding: 0 25px;
|
|
}
|
|
.btn--red {
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
}
|
|
.btn--red:hover {
|
|
background-color: var(--color-red-dark);
|
|
}
|
|
.btn--transp-red {
|
|
color: var(--color-red);
|
|
border: 1px solid rgba(174, 0, 27, 0.5);
|
|
}
|
|
.btn--transp-red:hover {
|
|
color: #fff;
|
|
border-color: var(--color-red);
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.btn--lg {
|
|
height: 60px;
|
|
}
|
|
.btn--md {
|
|
height: 54px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.btn {
|
|
font-size: 16px;
|
|
}
|
|
.btn--lg {
|
|
padding: 0 25px;
|
|
height: 56px;
|
|
font-size: 18px;
|
|
}
|
|
.btn--md {
|
|
height: 50px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.btn {
|
|
font-size: 15px;
|
|
}
|
|
.btn--lg {
|
|
height: 50px;
|
|
padding: 0 20px;
|
|
font-size: 16px;
|
|
}
|
|
.btn--md, .btn--sm {
|
|
height: 44px;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
.breadcrumbs {
|
|
margin-top: 125px;
|
|
margin-bottom: clamp(20px, 1.3536px + 4.9724vw, 65px);
|
|
}
|
|
.breadcrumbs__inner {
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.breadcrumbs__inner::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.breadcrumbs__list {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.breadcrumbs__item {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
}
|
|
.breadcrumbs__item:last-child {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
.breadcrumbs__item:last-child .breadcrumbs__link {
|
|
display: block;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.breadcrumbs__item::after {
|
|
content: "";
|
|
display: block;
|
|
width: 0.6em;
|
|
aspect-ratio: 1;
|
|
margin-inline: 0.5em;
|
|
transform: rotate(180deg);
|
|
mask: var(--icon-angle-left) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-left) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: #c7c7c7;
|
|
}
|
|
.breadcrumbs__item.is-active::after {
|
|
display: none;
|
|
}
|
|
.breadcrumbs__item.is-active span {
|
|
color: var(--color-text);
|
|
cursor: default;
|
|
}
|
|
.breadcrumbs__link {
|
|
padding-block: 5px;
|
|
white-space: nowrap;
|
|
color: #a0a0a0;
|
|
transition: color 0.25s ease;
|
|
}
|
|
.breadcrumbs + section {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.breadcrumbs {
|
|
margin-top: clamp(65px, 48.4254px + 4.4199vw, 105px);
|
|
}
|
|
.breadcrumbs__inner {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.breadcrumbs__inner {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
.breadcrumbs__item {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
.breadcrumbs__link[href]:hover {
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
.single-article .breadcrumbs,
|
|
.single-news .breadcrumbs {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.swiper-slide {
|
|
min-width: 0;
|
|
height: auto;
|
|
}
|
|
.swiper-pagination {
|
|
position: relative;
|
|
display: flex;
|
|
max-width: 100%;
|
|
width: min-content;
|
|
height: 10px;
|
|
z-index: 2;
|
|
column-gap: 12px;
|
|
margin: 40px auto 0;
|
|
overflow: hidden;
|
|
}
|
|
.swiper-pagination-item {
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
background-color: #d9d9d9;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.swiper-pagination-item.is-active {
|
|
background-color: var(--color-red);
|
|
}
|
|
.swiper-pagination-lock {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.swiper:not(.swiper-fade, .swiper-full) {
|
|
margin: 0 -20px;
|
|
padding: 0 20px;
|
|
}
|
|
.swiper:not(.swiper-fade, .swiper-full) .swiper-wrapper.is-grid {
|
|
column-gap: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.swiper:not(.swiper-fade, .swiper-full) {
|
|
margin: 0 -15px;
|
|
padding: 0 15px;
|
|
}
|
|
.swiper:not(.swiper-fade, .swiper-full) .swiper-wrapper.is-grid {
|
|
column-gap: 15px;
|
|
}
|
|
.swiper-pagination {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
.fancybox__slide.has-html {
|
|
padding: 15px;
|
|
}
|
|
|
|
.form-fancybox .f-html {
|
|
opacity: 0;
|
|
transform: translate3d(0, -50%, 0);
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.form-fancybox .f-html.is-visible {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.form-fancybox .f-html.is-hidden {
|
|
opacity: 0;
|
|
transform: translate3d(0, -50%, 0);
|
|
}
|
|
.form-fancybox .f-html.is-replacing {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0, 0);
|
|
transition: none;
|
|
}
|
|
.form-fancybox .f-html.is-replaced:not(.is-hidden) {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.form-fancybox .f-html.is-replaced.is-hidden {
|
|
opacity: 0;
|
|
transform: translate3d(0, -50%, 0);
|
|
}
|
|
|
|
.popups {
|
|
display: none;
|
|
}
|
|
|
|
.popup {
|
|
position: relative;
|
|
max-width: 520px;
|
|
width: 100%;
|
|
padding-top: clamp(25px, 14.6409px + 2.7624vw, 50px);
|
|
padding-bottom: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
padding-inline: clamp(20px, 9.6409px + 2.7624vw, 45px);
|
|
cursor: default;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.popup-title {
|
|
font-size: var(--fs-h3-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: var(--color-dark);
|
|
}
|
|
.popup-message__info {
|
|
margin-top: clamp(15px, 10.8564px + 1.105vw, 25px);
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
color: var(--color-text);
|
|
}
|
|
.popup-message__ok {
|
|
margin-top: clamp(25px, 18.7845px + 1.6575vw, 40px);
|
|
text-align: center;
|
|
}
|
|
.popup-message__ok-btn {
|
|
width: 165px;
|
|
}
|
|
.popup-close {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
top: 15px;
|
|
right: 15px;
|
|
cursor: pointer;
|
|
mask: var(--icon-close) center no-repeat;
|
|
-webkit-mask: var(--icon-close) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-dark);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.popup-close:hover {
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.popup {
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.popup-close {
|
|
width: 24px;
|
|
height: 24px;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.popup-message__ok-btn {
|
|
width: 140px;
|
|
}
|
|
}
|
|
.header-main {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
padding-right: var(--f-scrollbar-compensate, 0px);
|
|
}
|
|
.header-main__body {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 25px;
|
|
padding: 10px 10px 10px 20px;
|
|
border-radius: 100px;
|
|
border: 1px solid #f0f0f0;
|
|
background-color: #fff;
|
|
}
|
|
.header-logo {
|
|
flex-shrink: 0;
|
|
}
|
|
.header-logo__link {
|
|
display: block;
|
|
padding-top: 5px;
|
|
}
|
|
.header-logo__link img {
|
|
width: 122px;
|
|
}
|
|
.header-menu__item {
|
|
position: relative;
|
|
min-width: 0;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
}
|
|
.header-menu__link {
|
|
display: block;
|
|
padding: 10px 0;
|
|
color: var(--color-text);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.header-menu__link:not([href]) {
|
|
cursor: default;
|
|
}
|
|
.header-menu__submenu-toggle {
|
|
display: none;
|
|
}
|
|
.header-menu__submenu {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
.header-menu__submenu li {
|
|
font-size: 16px;
|
|
}
|
|
.header-menu__submenu a {
|
|
padding: 8px 0;
|
|
}
|
|
.header-buttons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
column-gap: 30px;
|
|
}
|
|
.header-buttons__login-btn {
|
|
padding: 10px 0;
|
|
border-radius: 0;
|
|
}
|
|
.header-buttons__login-btn::before {
|
|
content: "";
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-text);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.header-buttons__login-btn:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.header-buttons__login-btn:hover::before {
|
|
background-color: var(--color-red);
|
|
}
|
|
.header-buttons__download-btn {
|
|
height: 50px;
|
|
padding: 0 25px;
|
|
}
|
|
.header-buttons__menu-btn {
|
|
display: none;
|
|
align-content: center;
|
|
row-gap: 13%;
|
|
width: 44px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border: 1px solid #eee;
|
|
transition: row-gap 0.25s ease;
|
|
}
|
|
.header-buttons__menu-btn span, .header-buttons__menu-btn::before, .header-buttons__menu-btn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 55%;
|
|
height: 1.5px;
|
|
margin: 0 auto;
|
|
border-radius: 10px;
|
|
transform: translateY(50%);
|
|
background-color: #535369;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.header-buttons__menu-btn::after {
|
|
transform: translateY(50%) scaleX(65%);
|
|
transform-origin: 0 50%;
|
|
}
|
|
.header-buttons__menu-btn.is-active {
|
|
row-gap: 0;
|
|
}
|
|
.header-buttons__menu-btn.is-active span {
|
|
width: 0;
|
|
background-color: transparent;
|
|
}
|
|
.header-buttons__menu-btn.is-active::before {
|
|
transform: rotate(45deg) translate(1px, 1px);
|
|
}
|
|
.header-buttons__menu-btn.is-active::after {
|
|
transform: rotate(-45deg) translate(1px, -1px);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
.header-dropdown {
|
|
position: fixed;
|
|
display: none;
|
|
align-items: unset;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
padding: 120px 0 40px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
transform: translateY(-100%);
|
|
background-color: #fff;
|
|
transition: transform 0.4s ease-in-out;
|
|
}
|
|
.header-dropdown.is-active {
|
|
transform: translateY(0);
|
|
}
|
|
.header-login__btn {
|
|
width: 100%;
|
|
color: var(--color-grey-text);
|
|
background-color: #f4f5fc;
|
|
}
|
|
.header-login__btn::before {
|
|
content: "";
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-text);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.header-login__btn:hover {
|
|
background-color: #ebecf2;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.header-menu__list {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-auto-flow: column;
|
|
column-gap: 30px;
|
|
}
|
|
.header-menu__list > li.has-children::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
pointer-events: none;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-text);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.header-menu__list > li.has-children > a {
|
|
padding-right: 14px;
|
|
}
|
|
.header-menu__list > li > a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.header-menu__list > li:hover::after {
|
|
background-color: var(--color-red);
|
|
}
|
|
.header-menu__list > li:hover > a {
|
|
color: var(--color-red);
|
|
}
|
|
.header-menu__list > li:hover > ul {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.header-menu__submenu {
|
|
position: absolute;
|
|
min-width: 200px;
|
|
max-width: 265px;
|
|
width: max-content;
|
|
top: calc(100% + 22px);
|
|
left: 0;
|
|
padding: 18px 30px;
|
|
z-index: 2;
|
|
border-radius: 20px;
|
|
background-color: var(--color-grey);
|
|
transition: visibility 0.25s ease, opacity 0.25s ease;
|
|
transition-delay: 0.02s;
|
|
}
|
|
.header-menu__submenu::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 22px;
|
|
bottom: 100%;
|
|
left: 0;
|
|
}
|
|
.header-menu__submenu a {
|
|
color: var(--color-grey-dark);
|
|
}
|
|
.header-menu__submenu a:hover {
|
|
color: var(--color-grey-light);
|
|
}
|
|
}
|
|
@media (max-width: 1279.98px) {
|
|
.header-main {
|
|
display: flex;
|
|
height: clamp(50px, 41.7127px + 2.2099vw, 70px);
|
|
top: 0;
|
|
border-bottom: 1px solid #efefef;
|
|
background-color: #fff;
|
|
}
|
|
.header-main__body {
|
|
height: 100%;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.header-logo__link {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.header-main .header-menu {
|
|
display: none;
|
|
}
|
|
.header-buttons {
|
|
column-gap: 10px;
|
|
}
|
|
.header-buttons__login-btn {
|
|
display: none;
|
|
}
|
|
.header-buttons__download-btn {
|
|
height: 44px;
|
|
}
|
|
.header-buttons__menu-btn {
|
|
display: grid;
|
|
}
|
|
.header-dropdown {
|
|
display: block;
|
|
}
|
|
.header-menu {
|
|
margin-top: 40px;
|
|
}
|
|
.header-menu__list > li.has-children {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
}
|
|
.header-menu__list > li.is-open > a {
|
|
color: var(--color-red);
|
|
}
|
|
.header-menu__list > li.is-open > button {
|
|
transform: rotate(-180deg);
|
|
background-color: var(--color-red);
|
|
}
|
|
.header-menu__list > li.is-open > ul {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.header-menu__submenu-toggle {
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: auto 0;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: 10px;
|
|
-webkit-mask-size: 10px;
|
|
background-color: var(--color-text);
|
|
transition: transform 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
.header-menu__submenu {
|
|
grid-column: 1/-1;
|
|
height: 0;
|
|
overflow: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
.header-menu__submenu::before, .header-menu__submenu::after {
|
|
content: "";
|
|
display: block;
|
|
height: 2px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.header-buttons__menu-btn {
|
|
width: 40px;
|
|
}
|
|
.header-buttons__download-btn {
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
}
|
|
.header-dropdown {
|
|
padding: 110px 0 35px;
|
|
}
|
|
.header-menu {
|
|
margin-top: 35px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.header-logo__link img {
|
|
width: 100px;
|
|
}
|
|
.header-buttons {
|
|
column-gap: 8px;
|
|
}
|
|
.header-buttons__menu-btn {
|
|
width: 36px;
|
|
}
|
|
.header-buttons__download-btn {
|
|
height: 36px;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
}
|
|
.header-dropdown {
|
|
padding: 95px 0 30px;
|
|
}
|
|
.header-menu {
|
|
margin-top: 30px;
|
|
}
|
|
.header-menu__item {
|
|
font-size: 16px;
|
|
}
|
|
.header-menu__submenu li {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
.hero {
|
|
overflow: hidden;
|
|
}
|
|
.hero-main {
|
|
background: linear-gradient(145deg, #f5f5f9 0%, #f5f5f9 50%, #fff5e7 100%);
|
|
}
|
|
.hero-main__body {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: clamp(450px, 150px + 39.0625vw, 650px) auto;
|
|
column-gap: 40px;
|
|
padding: 160px 0 50px;
|
|
z-index: 1;
|
|
}
|
|
.hero-main__left {
|
|
position: relative;
|
|
min-height: clamp(550px, 150px + 39.0625vw, 650px);
|
|
}
|
|
.hero-main__left::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 80%;
|
|
height: 110%;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: -1;
|
|
filter: blur(8px);
|
|
background: url(../img/bg/logo-bg.svg) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.hero-title {
|
|
font-size: var(--fs-h1-lg);
|
|
}
|
|
.hero-title span {
|
|
color: var(--color-red);
|
|
}
|
|
.hero-descr {
|
|
max-width: 90%;
|
|
margin-top: 20px;
|
|
}
|
|
.hero-descr span {
|
|
display: inline-block;
|
|
}
|
|
.hero-buttons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
column-gap: 12px;
|
|
row-gap: 8px;
|
|
margin-top: 50px;
|
|
}
|
|
.hero-qrcode {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
column-gap: 20px;
|
|
margin-top: 50px;
|
|
}
|
|
.hero-qrcode__img {
|
|
display: flex;
|
|
width: clamp(90px, 10px + 7.8125vw, 110px);
|
|
aspect-ratio: 1;
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ececec;
|
|
}
|
|
.hero-qrcode__img img {
|
|
width: 100%;
|
|
}
|
|
.hero-qrcode__info {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: #5d5e5f;
|
|
}
|
|
.hero-stores {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
column-gap: 20px;
|
|
margin-top: 50px;
|
|
}
|
|
.hero-store {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 20px;
|
|
}
|
|
.hero-store::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1px;
|
|
height: 10px;
|
|
right: -1px;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
background-color: #dedede;
|
|
}
|
|
.hero-store:last-child {
|
|
padding-right: 0;
|
|
}
|
|
.hero-store:last-child::after {
|
|
display: none;
|
|
}
|
|
.hero-store:hover .hero-store__name {
|
|
color: var(--color-text);
|
|
}
|
|
.hero-store__icon {
|
|
display: flex;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
}
|
|
.hero-store__name {
|
|
margin-left: 5px;
|
|
margin: 2px 0 0 5px;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
font-weight: 500;
|
|
color: #000;
|
|
transition: color 0.25s ease;
|
|
}
|
|
.hero-img {
|
|
position: absolute;
|
|
width: clamp(375px, 182.3204px + 51.3812vw, 840px);
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
.hero-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
height: 100%;
|
|
}
|
|
.hero-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 64px;
|
|
padding: 10px 20px 10px 10px;
|
|
border-radius: 100px;
|
|
border: 1px solid #ececec;
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
.hero-feature:nth-child(1) {
|
|
margin: 0 0 40% 40px;
|
|
}
|
|
.hero-feature:nth-child(3) {
|
|
margin: 40px 0 14% auto;
|
|
}
|
|
.hero-feature__icon {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
}
|
|
.hero-feature__img {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
}
|
|
.hero-feature__img img {
|
|
width: auto;
|
|
}
|
|
.hero-feature__title {
|
|
margin-left: 10px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
color: rgba(26, 20, 20, 0.8);
|
|
}
|
|
.hero-scroller {
|
|
overflow: hidden;
|
|
background-color: var(--color-dark);
|
|
}
|
|
.hero-scroller__track {
|
|
display: flex;
|
|
align-items: center;
|
|
width: max-content;
|
|
height: 54px;
|
|
}
|
|
.hero-scroller__group {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
will-change: transform;
|
|
}
|
|
.hero-scroller__item {
|
|
position: relative;
|
|
padding-right: 40px;
|
|
margin-right: 40px;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
color: #fff;
|
|
}
|
|
.hero-scroller__item::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
border-radius: 50%;
|
|
transform: translateX(50%);
|
|
background-color: var(--color-red);
|
|
}
|
|
.hero-footer .hero-stores {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.hero-main__body {
|
|
padding-top: clamp(75px, 48.0663px + 7.1823vw, 140px);
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.hero-main__body {
|
|
padding-bottom: clamp(70px, -20px + 11.7188vw, 100px);
|
|
}
|
|
.hero-main__left {
|
|
min-height: clamp(420px, 240px + 23.4375vw, 480px);
|
|
}
|
|
.hero-main .hero-stores {
|
|
display: none;
|
|
}
|
|
.hero-buttons {
|
|
grid-auto-flow: row;
|
|
justify-content: unset;
|
|
max-width: 280px;
|
|
}
|
|
.hero-qrcode {
|
|
display: none;
|
|
}
|
|
.hero-feature {
|
|
height: 50px;
|
|
}
|
|
.hero-feature:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
.hero-feature:nth-child(2) {
|
|
margin-left: -40px;
|
|
}
|
|
.hero-feature:nth-child(3) {
|
|
margin-bottom: 0;
|
|
}
|
|
.hero-feature__icon {
|
|
width: 28px;
|
|
}
|
|
.hero-feature__title {
|
|
font-size: 16px;
|
|
}
|
|
.hero-scroller__track {
|
|
height: 48px;
|
|
}
|
|
.hero-scroller__item {
|
|
padding-right: 35px;
|
|
margin-right: 35px;
|
|
font-size: 16px;
|
|
}
|
|
.hero-footer .hero-stores {
|
|
display: grid;
|
|
}
|
|
.hero-stores {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.hero-main__body {
|
|
grid-template-columns: 1fr;
|
|
padding-bottom: 0;
|
|
}
|
|
.hero-main__left {
|
|
min-height: unset;
|
|
}
|
|
.hero-main__left::before {
|
|
display: none;
|
|
}
|
|
.hero-main__right {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
}
|
|
.hero-buttons {
|
|
max-width: unset;
|
|
margin-top: 30px;
|
|
}
|
|
.hero-features {
|
|
position: absolute;
|
|
justify-content: center;
|
|
width: clamp(345px, 216.1832px + 34.3511vw, 480px);
|
|
margin: 0 auto;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.hero-feature {
|
|
padding: 8px 12px 8px 8px;
|
|
height: 44px;
|
|
}
|
|
.hero-feature:nth-child(1) {
|
|
margin: 0 0 25% 60px;
|
|
}
|
|
.hero-feature:nth-child(2) {
|
|
margin-left: 0;
|
|
}
|
|
.hero-feature__icon {
|
|
width: 24px;
|
|
}
|
|
.hero-feature__title {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.hero-img {
|
|
position: relative;
|
|
}
|
|
.hero-scroller__track {
|
|
height: 42px;
|
|
}
|
|
.hero-scroller__item {
|
|
padding-right: 30px;
|
|
margin-right: 30px;
|
|
font-size: 14px;
|
|
}
|
|
.hero-scroller__item::after {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
.hero-stores {
|
|
column-gap: 15px;
|
|
margin-top: 40px;
|
|
}
|
|
.hero-store {
|
|
padding-right: 15px;
|
|
}
|
|
.hero-store__icon {
|
|
width: 20px;
|
|
}
|
|
.hero-store__name {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.hero-img {
|
|
margin: 0 -15px;
|
|
}
|
|
.hero-feature {
|
|
padding: 6px 12px 6px 6px;
|
|
height: 36px;
|
|
}
|
|
.hero-feature__icon {
|
|
width: 20px;
|
|
}
|
|
.hero-feature__title {
|
|
font-size: 12px;
|
|
}
|
|
.hero-scroller__track {
|
|
height: 36px;
|
|
}
|
|
.hero-scroller__item {
|
|
padding-right: 25px;
|
|
margin-right: 25px;
|
|
font-size: 12px;
|
|
}
|
|
.hero-stores {
|
|
column-gap: 12px;
|
|
margin-top: 30px;
|
|
}
|
|
.hero-store {
|
|
padding-right: 12px;
|
|
}
|
|
.hero-store__icon {
|
|
width: 16px;
|
|
}
|
|
.hero-store__name {
|
|
margin-left: 4px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
.services {
|
|
margin-top: 70px;
|
|
}
|
|
.services-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.services-title {
|
|
order: 2;
|
|
margin-top: 30px;
|
|
font: inherit;
|
|
text-align: center;
|
|
color: var(--color-text);
|
|
}
|
|
.services-grid {
|
|
--item-size: 70px;
|
|
--gap-min: 20px;
|
|
--gap-max: 70px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: min(100%, var(--items) * var(--item-size) + (var(--items) - 1) * var(--gap-max));
|
|
margin: 0 auto;
|
|
gap: var(--gap-min);
|
|
}
|
|
.services-item {
|
|
display: flex;
|
|
width: var(--item-size);
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.services {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.services {
|
|
margin-top: 50px;
|
|
}
|
|
.services-grid {
|
|
--item-size: 60px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
max-width: calc(var(--item-size) * 5 + var(--gap-min) * 4);
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.services {
|
|
margin-top: 40px;
|
|
}
|
|
.services-title {
|
|
margin-top: 25px;
|
|
}
|
|
.services-grid {
|
|
--item-size: 50px;
|
|
--gap-min: 8px;
|
|
}
|
|
}
|
|
.work--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.work-grid {
|
|
display: grid;
|
|
row-gap: 30px;
|
|
}
|
|
.work-item {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
column-gap: 40px;
|
|
padding-top: clamp(25px, 14.6409px + 2.7624vw, 50px);
|
|
padding-bottom: clamp(25px, 8.4254px + 4.4199vw, 65px);
|
|
padding-inline: clamp(20px, 1.3536px + 4.9724vw, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
}
|
|
.work-item__title {
|
|
font-size: var(--fs-h3-lg);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
}
|
|
.work-item__list {
|
|
display: grid;
|
|
row-gap: 0.6em;
|
|
margin-top: 30px;
|
|
line-height: 1.3;
|
|
}
|
|
.work-item__li {
|
|
position: relative;
|
|
padding-left: 1.5em;
|
|
}
|
|
.work-item__li::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
aspect-ratio: 1;
|
|
top: 0.15em;
|
|
left: 0;
|
|
background: var(--icon-checkmark) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.work-item__buttons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
column-gap: 12px;
|
|
row-gap: 8px;
|
|
margin-top: 40px;
|
|
}
|
|
.work-item__img {
|
|
aspect-ratio: 1024/680;
|
|
align-self: center;
|
|
margin: -10px 0 -20px;
|
|
}
|
|
.work-item__img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.work-grid {
|
|
row-gap: 20px;
|
|
}
|
|
.work-item {
|
|
grid-template-columns: 1fr 1.1fr;
|
|
}
|
|
.work-item__list {
|
|
margin-top: 20px;
|
|
}
|
|
.work-item__buttons {
|
|
grid-auto-flow: row;
|
|
justify-content: unset;
|
|
max-width: 280px;
|
|
margin-top: 30px;
|
|
}
|
|
.work-item__img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.work-item {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.work-item__buttons {
|
|
max-width: unset;
|
|
}
|
|
.work-item__img {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.work-grid {
|
|
row-gap: 10px;
|
|
}
|
|
.work-item__img {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
.advantages {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.advantages-slider {
|
|
counter-reset: num;
|
|
}
|
|
.advantages-slider__wrapper.is-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-auto-rows: 1fr;
|
|
gap: 20px;
|
|
}
|
|
.advantages-item {
|
|
padding: 30px 30px 35px;
|
|
counter-increment: num;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
}
|
|
.advantages-item::before {
|
|
content: counter(num, decimal-leading-zero);
|
|
position: absolute;
|
|
display: block;
|
|
top: 30px;
|
|
right: 30px;
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
color: #b6b6c5;
|
|
}
|
|
.advantages-item__icon {
|
|
display: flex;
|
|
width: 50px;
|
|
aspect-ratio: 1;
|
|
}
|
|
.advantages-item__title {
|
|
min-height: 2.2em;
|
|
margin-top: 25px;
|
|
font-size: var(--fs-h3-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
}
|
|
.advantages-item__descr {
|
|
margin-top: 15px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.advantages-slider__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: calc((100% - 25px) / 2.25);
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.advantages-slider__wrapper.is-grid {
|
|
grid-auto-columns: calc((100% - 3.75px) / 1.25);
|
|
}
|
|
.advantages-item__icon {
|
|
width: 44px;
|
|
}
|
|
.advantages-item__title {
|
|
font-size: var(--fs-title-sm);
|
|
}
|
|
.advantages-item__descr {
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.advantages-item {
|
|
padding: 20px;
|
|
}
|
|
.advantages-item::before {
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.advantages-item__icon {
|
|
width: 40px;
|
|
}
|
|
.advantages-item__title {
|
|
margin-top: 15px;
|
|
}
|
|
.advantages-item__descr {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.scheme {
|
|
margin-top: var(--space-section);
|
|
padding-top: clamp(40px, 23.4254px + 4.4199vw, 80px);
|
|
padding-bottom: clamp(40px, 15.1381px + 6.6298vw, 100px);
|
|
background-color: var(--color-dark);
|
|
}
|
|
.scheme-title, .scheme-descr {
|
|
color: #fff;
|
|
}
|
|
.scheme-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
counter-reset: num;
|
|
}
|
|
.scheme-item {
|
|
padding: 30px 25px;
|
|
counter-increment: num;
|
|
border-radius: var(--radius-md);
|
|
background-color: #fff;
|
|
}
|
|
.scheme-item__top, .scheme-item__img {
|
|
display: flex;
|
|
aspect-ratio: 1.3/1;
|
|
}
|
|
.scheme-item__top {
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.scheme-item__img {
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
.scheme-item__img img {
|
|
width: var(--img-width);
|
|
}
|
|
.scheme-item__qrcode {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
min-height: 0;
|
|
padding: 8px;
|
|
aspect-ratio: 1;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ececec;
|
|
}
|
|
.scheme-item__qrcode img {
|
|
width: 100%;
|
|
}
|
|
.scheme-item__login {
|
|
margin-top: 12px;
|
|
}
|
|
.scheme-item__login-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
font-size: 16px;
|
|
color: var(--color-grey-text);
|
|
border: 1px solid #ececec;
|
|
}
|
|
.scheme-item__login-btn::before {
|
|
content: "";
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-text);
|
|
}
|
|
.scheme-item__login-btn:hover {
|
|
background-color: #f4f5fc;
|
|
border-color: #f4f5fc;
|
|
}
|
|
.scheme-item__title {
|
|
margin-top: 20px;
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
color: var(--color-dark);
|
|
}
|
|
.scheme-item__title::before {
|
|
content: counter(num) ".";
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
color: var(--color-red);
|
|
}
|
|
.scheme-item__descr {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.scheme-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.scheme-item__top, .scheme-item__img {
|
|
aspect-ratio: 3.5/1;
|
|
}
|
|
.scheme-item__top {
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
column-gap: 20px;
|
|
}
|
|
.scheme-item__qrcode {
|
|
height: 100%;
|
|
}
|
|
.scheme-item__login {
|
|
flex: 1;
|
|
margin-top: 0;
|
|
}
|
|
.scheme-item__img img {
|
|
height: 100%;
|
|
}
|
|
.scheme-item__title br {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.scheme-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.scheme-item {
|
|
display: grid;
|
|
grid-template-columns: 1.8fr 1fr;
|
|
column-gap: 30px;
|
|
}
|
|
.scheme-item:first-child {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.scheme-item__top, .scheme-item__img {
|
|
aspect-ratio: unset;
|
|
}
|
|
.scheme-item__top {
|
|
order: 3;
|
|
margin-top: 30px;
|
|
}
|
|
.scheme-item__qrcode {
|
|
display: none;
|
|
}
|
|
.scheme-item__img {
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
}
|
|
.scheme-item__img img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.scheme-item__title {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.scheme-grid {
|
|
row-gap: 8px;
|
|
}
|
|
.scheme-item {
|
|
column-gap: 15px;
|
|
padding: 20px;
|
|
}
|
|
.scheme-item__top {
|
|
margin-top: 15px;
|
|
}
|
|
.scheme-item__login-btn {
|
|
height: 40px;
|
|
font-size: 15px;
|
|
}
|
|
.scheme-item__title::before {
|
|
margin-bottom: 10px;
|
|
}
|
|
.scheme-item__descr {
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
.income {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.income-calc {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.15fr;
|
|
column-gap: clamp(40px, -200px + 23.4375vw, 100px);
|
|
line-height: 1.2;
|
|
}
|
|
.income-calc--single .income-calc__top {
|
|
display: none;
|
|
}
|
|
.income-calc__top {
|
|
display: flex;
|
|
justify-content: center;
|
|
grid-column: 1/-1;
|
|
margin-bottom: 40px;
|
|
}
|
|
.income-calc__types {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
padding: 6px;
|
|
border-radius: 100px;
|
|
border: 1px solid #ebebf1;
|
|
}
|
|
.income-calc__type {
|
|
position: relative;
|
|
}
|
|
.income-calc__type--taxi span::before {
|
|
mask-image: var(--icon-car);
|
|
-webkit-mask-image: var(--icon-car);
|
|
}
|
|
.income-calc__type--courier span::before {
|
|
mask-image: var(--icon-bike);
|
|
-webkit-mask-image: var(--icon-bike);
|
|
}
|
|
.income-calc__type--cargo span::before {
|
|
mask-image: var(--icon-truck);
|
|
-webkit-mask-image: var(--icon-truck);
|
|
}
|
|
.income-calc__type-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
border-radius: 100px;
|
|
}
|
|
.income-calc__type-input:checked + span {
|
|
color: #fff;
|
|
background-color: var(--color-dark);
|
|
}
|
|
.income-calc__type-input:checked + span::before {
|
|
background-color: #fff;
|
|
}
|
|
.income-calc__type-label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 15px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
border-radius: 100px;
|
|
transition: color 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
.income-calc__type-label::before {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
margin-right: 6px;
|
|
mask-position: center;
|
|
-webkit-mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: #cacada;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.income-calc__controls {
|
|
min-width: 0;
|
|
}
|
|
.income-calc__range {
|
|
margin-bottom: 40px;
|
|
}
|
|
.income-calc__range-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.income-calc__range-value {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
color: var(--color-red);
|
|
}
|
|
.income-calc__range-number {
|
|
font-size: 1.5em;
|
|
}
|
|
.income-calc__range-input {
|
|
--range-track-height: 3px;
|
|
--range-thumb-width: 32px;
|
|
--range-thumb-height: 22px;
|
|
--range-progress: 0%;
|
|
display: block;
|
|
width: 100%;
|
|
height: var(--range-thumb-height);
|
|
margin-top: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.income-calc__range-input::-webkit-slider-runnable-track {
|
|
height: var(--range-track-height);
|
|
border-radius: 100px;
|
|
background: linear-gradient(to right, var(--color-red) 0%, var(--color-red) var(--range-progress), #dedede var(--range-progress), #dedede 100%);
|
|
}
|
|
.income-calc__range-input::-webkit-slider-thumb {
|
|
width: var(--range-thumb-width);
|
|
height: var(--range-thumb-height);
|
|
margin-top: calc((var(--range-track-height) - var(--range-thumb-height)) / 2);
|
|
border: 3px solid #fff;
|
|
border-radius: 100px;
|
|
background: var(--color-red);
|
|
box-shadow: 10px 4px 24px 0 #c4c4d7;
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
}
|
|
.income-calc__range-input::-moz-range-track {
|
|
height: var(--range-track-height);
|
|
border-radius: 100px;
|
|
background: #dedede;
|
|
}
|
|
.income-calc__range-input::-moz-range-progress {
|
|
height: var(--range-track-height);
|
|
border-radius: 100px;
|
|
background: var(--color-red);
|
|
}
|
|
.income-calc__range-input::-moz-range-thumb {
|
|
width: var(--range-thumb-width);
|
|
height: var(--range-thumb-height);
|
|
border: 3px solid #fff;
|
|
border-radius: 100px;
|
|
background: var(--color-red);
|
|
box-shadow: 10px 4px 24px 0 #c4c4d7;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
.income-calc__range-input:focus {
|
|
outline: none;
|
|
}
|
|
.income-calc__range-input:focus-visible::-webkit-slider-thumb {
|
|
outline: 2px solid var(--color-red);
|
|
}
|
|
.income-calc__range-input:focus-visible::-moz-range-thumb {
|
|
outline: 2px solid var(--color-red);
|
|
}
|
|
.income-calc__radios {
|
|
min-width: 0;
|
|
}
|
|
.income-calc__radios-label {
|
|
margin-bottom: 20px;
|
|
}
|
|
.income-calc__radios-wrapper {
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.income-calc__radios-wrapper::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.income-calc__radios-inner {
|
|
display: grid;
|
|
justify-content: start;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
width: max-content;
|
|
}
|
|
.income-calc__radio {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
.income-calc__radio-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
border-radius: 100px;
|
|
}
|
|
.income-calc__radio-input:checked + span {
|
|
color: #fff;
|
|
background-color: var(--color-dark);
|
|
}
|
|
.income-calc__radio-input:checked + span::before {
|
|
background-color: #fff;
|
|
}
|
|
.income-calc__radio-label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
border-radius: 100px;
|
|
border: 1px solid #e2e2e2;
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
.income-result {
|
|
padding: 30px;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-md);
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
}
|
|
.income-result__main {
|
|
min-width: 0;
|
|
}
|
|
.income-result__total {
|
|
display: block;
|
|
margin-top: 25px;
|
|
font-size: var(--fs-h1-sm);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.income-result__note {
|
|
margin-top: 5px;
|
|
font-size: 18px;
|
|
}
|
|
.income-result__stats {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr 1.5fr 1fr;
|
|
column-gap: 20px;
|
|
margin-top: 25px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #b9354a;
|
|
}
|
|
.income-result__stat {
|
|
min-width: 0;
|
|
}
|
|
.income-result__stat-label {
|
|
font-size: 16px;
|
|
opacity: 0.6;
|
|
}
|
|
.income-result__stat-value {
|
|
display: block;
|
|
margin-top: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: var(--fs-title-md);
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
}
|
|
.income-footnote {
|
|
margin-top: 40px;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.income-calc__radio-label {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.income-calc {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.income-calc__range {
|
|
margin-bottom: 30px;
|
|
}
|
|
.income-calc__radios-wrapper {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
.income-result {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr 1.5fr;
|
|
column-gap: 30px;
|
|
margin-top: 45px;
|
|
}
|
|
.income-result__total {
|
|
margin-top: 10px;
|
|
}
|
|
.income-result__stats {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
border: none;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.income-descr br {
|
|
display: none;
|
|
}
|
|
.income-calc__type-label {
|
|
font-size: 16px;
|
|
}
|
|
.income-calc__type-label::before {
|
|
width: 22px;
|
|
}
|
|
.income-result {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.income-result__stats {
|
|
margin-top: 20px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #b9354a;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.income-calc__top {
|
|
margin-bottom: 30px;
|
|
}
|
|
.income-calc__types {
|
|
column-gap: 0;
|
|
}
|
|
.income-calc__type-label {
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
}
|
|
.income-calc__type-label::before {
|
|
width: 18px;
|
|
}
|
|
.income-calc__range {
|
|
margin-bottom: 20px;
|
|
}
|
|
.income-calc__range-input {
|
|
margin-top: 6px;
|
|
}
|
|
.income-calc__radios-label {
|
|
margin-bottom: 15px;
|
|
}
|
|
.income-calc__radios-wrapper {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
.income-calc__radio-label {
|
|
font-size: 14px;
|
|
}
|
|
.income-result {
|
|
margin-top: 35px;
|
|
padding: 20px;
|
|
}
|
|
.income-result__note {
|
|
font-size: 15px;
|
|
}
|
|
.income-result__stats {
|
|
margin-top: 17px;
|
|
}
|
|
.income-result__stat-label {
|
|
font-size: 15px;
|
|
}
|
|
.income-footnote {
|
|
margin-top: 30px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.socials {
|
|
margin-top: var(--space-section);
|
|
padding-top: clamp(40px, 23.4254px + 4.4199vw, 80px);
|
|
}
|
|
.socials-title {
|
|
/* text-align: center; */
|
|
}
|
|
.socials-main{
|
|
margin-top: 50px;
|
|
}
|
|
.socials-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.socials-item{
|
|
padding: 19px 29px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
|
|
border-radius: 30px;
|
|
border: 1px solid #EDEDED;
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.socials-item--vk .socials-item__icon{
|
|
border: 1px solid rgba(220, 232, 242, 0.50);
|
|
background: #F5F8FE;
|
|
}
|
|
.socials-item--telegram .socials-item__icon{
|
|
border: 1px solid rgba(220, 232, 242, 0.50);
|
|
background: #F3FAFF;
|
|
}
|
|
.socials-item--youtube .socials-item__icon{
|
|
border: 1px solid rgba(220, 232, 242, 0.50);
|
|
background: #FCF3F5;
|
|
}
|
|
.socials-item--instagram {}
|
|
.socials-item--tiktok {}
|
|
.socials-item--threads {}
|
|
.socials-item--dzen {}
|
|
.socials-item--rutube .socials-item__icon{
|
|
border: 1px solid rgba(220, 232, 242, 0.50);
|
|
background: rgba(255, 173, 190, 0.08);
|
|
}
|
|
.socials-item__icon{
|
|
width: 63px;
|
|
height: 63px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(220, 232, 242, 0.50);
|
|
background: rgba(212, 206, 210, 0.08);
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.socials-item__name{
|
|
text-align: center;
|
|
font-size: 20px;
|
|
line-height: 110%; /* 22px */
|
|
letter-spacing: -0.2px;
|
|
color: var(--color-text);
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.socials-item:hover{
|
|
background: var(--color-dark);
|
|
border-color: var(--color-dark);
|
|
}
|
|
.socials-item:hover .socials-item__icon{
|
|
transform: translateY(-5px);
|
|
background: var(--color-light);
|
|
}
|
|
.socials-item:hover .socials-item__name{
|
|
color: var(--color-light);
|
|
|
|
transform: scale(1.05);
|
|
}
|
|
.socials-footnote{
|
|
margin-top: 50px;
|
|
|
|
font-size: 11px;
|
|
line-height: 110%; /* 12.1px */
|
|
letter-spacing: -0.11px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.socials-grid{
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.socials-grid{
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.socials-item{
|
|
padding: 13.5px 10px 15.5;
|
|
|
|
border-radius: 10px;
|
|
|
|
gap: 14px;
|
|
}
|
|
.socials-item__icon{
|
|
width: 50px;
|
|
height: 50px;
|
|
|
|
border-radius: 14px;
|
|
}
|
|
.socials-item__name{
|
|
font-size: 15px;
|
|
letter-spacing: -0.15px;
|
|
}
|
|
.socials-footnote{
|
|
margin-top: 30px;
|
|
|
|
font-size: 11px;
|
|
line-height: 120%; /* 13.2px */
|
|
letter-spacing: -0.11px;
|
|
}
|
|
}
|
|
.reviews--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.reviews-slider {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
.reviews-slider__container {
|
|
padding: 0 20px;
|
|
}
|
|
.reviews-slider__wrapper {
|
|
width: fit-content;
|
|
margin-inline: auto;
|
|
}
|
|
.reviews-slider__wrapper.is-grid {
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-auto-flow: column;
|
|
column-gap: 20px;
|
|
}
|
|
.reviews-slider__bottom {
|
|
margin-top: 60px;
|
|
}
|
|
.reviews-slider__bottom:has(.swiper-pagination-lock) {
|
|
display: none;
|
|
}
|
|
.reviews-slider__pagination {
|
|
display: flex;
|
|
height: 2px;
|
|
}
|
|
.reviews-slider__pagination-item {
|
|
flex: 1;
|
|
height: 100%;
|
|
background-color: #e2e2e2;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.reviews-slider__pagination-item.is-active {
|
|
background-color: var(--color-grey-dark);
|
|
}
|
|
.reviews-grid {
|
|
display: grid;
|
|
row-gap: clamp(30px, 9.2818px + 5.5249vw, 80px);
|
|
padding-top: 10px;
|
|
}
|
|
.reviews-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 414px;
|
|
}
|
|
.reviews-slide:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
.reviews-slide__img {
|
|
position: relative;
|
|
aspect-ratio: 768/580;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
}
|
|
.reviews-slide__img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.reviews-slide__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
.reviews-slide__user {
|
|
margin-top: 25px;
|
|
padding-right: 20px;
|
|
line-height: 1.1;
|
|
}
|
|
.reviews-slide__user-name {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-dark);
|
|
}
|
|
.reviews-slide__user-descr {
|
|
margin-top: 15px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.reviews-slide__comment {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
margin-top: 30px;
|
|
padding: 25px;
|
|
font-size: 18px;
|
|
border-radius: var(--radius-sm);
|
|
background-color: #f6f6f6;
|
|
}
|
|
.reviews-slide__comment::before {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
background: var(--icon-quotes) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.reviews-slide__comment-text {
|
|
margin: 15px 0 auto;
|
|
}
|
|
.reviews-slide__comment-link {
|
|
align-self: flex-start;
|
|
margin-top: 10px;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.reviews-slide__comment-link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.reviews-item {
|
|
display: grid;
|
|
grid-template-columns: clamp(300px, 129px + 22.2656vw, 414px) 1fr;
|
|
column-gap: clamp(30px, -30px + 7.8125vw, 70px);
|
|
}
|
|
.reviews-item__img {
|
|
position: relative;
|
|
aspect-ratio: 768/580;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
}
|
|
.reviews-item__img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.reviews-item__user {
|
|
line-height: 1.1;
|
|
}
|
|
.reviews-item__user-name {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-dark);
|
|
}
|
|
.reviews-item__user-descr {
|
|
margin-top: 15px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.reviews-item__comment {
|
|
margin-top: 30px;
|
|
padding: 25px;
|
|
font-size: 18px;
|
|
border-radius: var(--radius-sm);
|
|
background-color: #f6f6f6;
|
|
}
|
|
.reviews-item__comment::before {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
margin-bottom: 15px;
|
|
mask: var(--icon-quotes) center no-repeat;
|
|
-webkit-mask: var(--icon-quotes) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-red);
|
|
}
|
|
.reviews-item__comment-text {
|
|
margin-top: 15px;
|
|
}
|
|
.reviews-item__comment-link {
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.reviews-item__comment-link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.reviews-showmore {
|
|
margin-top: clamp(30px, 9.2818px + 5.5249vw, 80px);
|
|
text-align: center;
|
|
}
|
|
.reviews-showmore.is-hidden {
|
|
display: none;
|
|
}
|
|
.reviews-showmore__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.reviews-slider__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: calc((100% - 40px) / 3);
|
|
justify-content: unset;
|
|
column-gap: 20px;
|
|
}
|
|
.reviews-slide {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.reviews-slider__wrapper.is-grid {
|
|
grid-auto-columns: calc((100% - 25px) / 2.25);
|
|
}
|
|
.reviews-grid {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.reviews-slider__wrapper.is-grid {
|
|
grid-auto-columns: calc((100% - 3.75px) / 1.25);
|
|
}
|
|
.reviews-slider__bottom {
|
|
margin-top: 50px;
|
|
}
|
|
.reviews-item {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.reviews-item__user {
|
|
margin-top: 25px;
|
|
padding-right: 20px;
|
|
}
|
|
.reviews-showmore__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.reviews-slider__container {
|
|
padding: 0 15px;
|
|
}
|
|
.reviews-slider__wrapper.is-grid {
|
|
column-gap: 15px;
|
|
}
|
|
.reviews-slider__bottom {
|
|
margin-top: 30px;
|
|
}
|
|
.reviews-slide__user {
|
|
margin-top: 20px;
|
|
padding-right: 15px;
|
|
}
|
|
.reviews-slide__user-descr {
|
|
margin-top: 10px;
|
|
}
|
|
.reviews-slide__comment {
|
|
margin-top: 25px;
|
|
padding: 20px;
|
|
font-size: 15px;
|
|
}
|
|
.reviews-slide__comment::before {
|
|
width: 20px;
|
|
}
|
|
.reviews-slide__comment-text {
|
|
margin-top: 10px;
|
|
}
|
|
.reviews-item__user {
|
|
margin-top: 20px;
|
|
padding-right: 15px;
|
|
}
|
|
.reviews-item__user-descr {
|
|
margin-top: 10px;
|
|
}
|
|
.reviews-item__comment {
|
|
margin-top: 25px;
|
|
padding: 20px;
|
|
font-size: 15px;
|
|
}
|
|
.reviews-item__comment::before {
|
|
width: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.payments {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.payments-body {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: clamp(25px, 10.4972px + 3.8674vw, 60px);
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(145deg, #f5f5f9 50%, #fff5e7 100%);
|
|
}
|
|
.payments-header {
|
|
width: clamp(300px, 92.8177px + 55.2486vw, 800px);
|
|
z-index: 1;
|
|
}
|
|
.payments-descr {
|
|
margin-bottom: 0;
|
|
}
|
|
.payments-images {
|
|
margin-top: clamp(60px, 15px + 5.8594vw, 90px);
|
|
}
|
|
.payments-images__phone {
|
|
display: flex;
|
|
width: clamp(240px, 190.2762px + 13.2597vw, 360px);
|
|
overflow: hidden;
|
|
}
|
|
.payments-images__phone img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 0;
|
|
}
|
|
.payments-images__messages img {
|
|
position: absolute;
|
|
}
|
|
.payments-images__messages img:nth-child(1) {
|
|
width: 24%;
|
|
left: 5%;
|
|
bottom: 46%;
|
|
}
|
|
.payments-images__messages img:nth-child(2) {
|
|
width: 19%;
|
|
left: 7%;
|
|
bottom: 7%;
|
|
}
|
|
.payments-images__messages img:nth-child(3) {
|
|
width: 19%;
|
|
right: 9%;
|
|
bottom: 42%;
|
|
}
|
|
.payments-images__coins img {
|
|
position: absolute;
|
|
}
|
|
.payments-images__coins img:nth-child(1) {
|
|
width: 9%;
|
|
left: 5%;
|
|
top: 10%;
|
|
}
|
|
.payments-images__coins img:nth-child(2) {
|
|
width: 6%;
|
|
right: 7%;
|
|
top: 14%;
|
|
}
|
|
.payments-images__coins img:nth-child(3) {
|
|
width: 16%;
|
|
right: 4%;
|
|
bottom: 4%;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.payments-images {
|
|
margin-top: 90px;
|
|
}
|
|
.payments-images__phone {
|
|
aspect-ratio: 240/260;
|
|
}
|
|
.payments-images__messages img:nth-child(1) {
|
|
width: 33%;
|
|
top: 32%;
|
|
bottom: unset;
|
|
}
|
|
.payments-images__messages img:nth-child(2) {
|
|
width: 31%;
|
|
top: 30%;
|
|
right: 5%;
|
|
left: unset;
|
|
bottom: unset;
|
|
}
|
|
.payments-images__messages img:nth-child(3) {
|
|
display: none;
|
|
}
|
|
.payments-images__coins img:nth-child(1) {
|
|
max-width: 90px;
|
|
width: 18%;
|
|
left: 4%;
|
|
bottom: 25%;
|
|
top: unset;
|
|
}
|
|
.payments-images__coins img:nth-child(2) {
|
|
max-width: 60px;
|
|
width: 10%;
|
|
top: 47%;
|
|
}
|
|
.payments-images__coins img:nth-child(3) {
|
|
max-width: 130px;
|
|
width: 26%;
|
|
right: 8%;
|
|
bottom: 6%;
|
|
}
|
|
}
|
|
.faq--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.faq-item {
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
.faq-item:first-child {
|
|
border-top: 1px solid #ededed;
|
|
}
|
|
.faq-item__question {
|
|
position: relative;
|
|
padding-block: 25px;
|
|
padding-right: clamp(60px, 35.1381px + 6.6298vw, 120px);
|
|
font-size: var(--fs-h3-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.faq-item__question::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto 0;
|
|
background: var(--icon-cross) center no-repeat;
|
|
background-size: contain;
|
|
transition: transform 0.25s ease;
|
|
}
|
|
.faq-item__answer {
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
.faq-item__content {
|
|
padding-right: clamp(60px, 35.1381px + 6.6298vw, 120px);
|
|
padding-bottom: 25px;
|
|
}
|
|
.faq-item.is-active .faq-item__question::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
.faq-item.is-active .faq-item__answer {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.faq-item__content {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.faq-item__question {
|
|
padding-block: 20px;
|
|
font-size: var(--fs-title-sm);
|
|
}
|
|
.faq-item__question::after {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
.faq-item__content {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.faq-item__question {
|
|
padding-block: 15px;
|
|
}
|
|
.faq-item__content {
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
.faq-item__question:hover {
|
|
color: var(--color-grey-dark);
|
|
}
|
|
}
|
|
.articles--block {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.articles--page {
|
|
margin-top: clamp(40px, 15.1381px + 6.6298vw, 100px);
|
|
}
|
|
.articles--slider{
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
}
|
|
.articles-title--sm {
|
|
margin-bottom: 40px;
|
|
font-size: var(--fs-h3-lg);
|
|
}
|
|
.articles-title--lg {
|
|
margin-bottom: 45px;
|
|
text-align: center;
|
|
}
|
|
.articles-title--lg span{
|
|
color: var(--color-red);
|
|
}
|
|
.articles-filter {
|
|
margin-bottom: 30px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.articles-filter::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.articles-filter__list {
|
|
display: grid;
|
|
justify-content: start;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
width: max-content;
|
|
}
|
|
.articles-filter__link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
color: #798079;
|
|
border: 1px solid #dcdcdc;
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
.articles-filter__item {
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
.articles-filter__item.is-active a {
|
|
color: #fff;
|
|
border-color: var(--color-dark);
|
|
background-color: var(--color-dark);
|
|
}
|
|
.articles-slider__wrapper.is-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 20px;
|
|
}
|
|
.related-slider__container.swiper {
|
|
overflow: visible;
|
|
}
|
|
.articles-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 20px;
|
|
row-gap: 50px;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.articles-grid.is-loading {
|
|
opacity: 0;
|
|
}
|
|
.articles-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.articles-item__img-link {
|
|
display: block;
|
|
aspect-ratio: 768/435;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
}
|
|
.articles-item__img-link img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.articles-item__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 25px;
|
|
flex: 1;
|
|
}
|
|
.articles-item__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
.articles-item__date {
|
|
font-size: 15px;
|
|
}
|
|
.articles-item__tags {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
margin-left: 15px;
|
|
}
|
|
.articles-item__tag {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #798079;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.articles-item__title {
|
|
min-height: 2.4em;
|
|
margin-top: 25px;
|
|
padding-right: 20px;
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
.articles-item__title-link {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
width: fit-content;
|
|
overflow: hidden;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.articles-item__title-link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.articles-item__descr {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin: 20px 0 auto;
|
|
padding-right: 20px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.articles-item__read {
|
|
margin-top: 30px;
|
|
}
|
|
.articles-item__read-btn {
|
|
border-color: rgba(185, 185, 185, 0.5);
|
|
}
|
|
.articles-showmore {
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.articles-showmore.is-loading {
|
|
opacity: 0;
|
|
}
|
|
.articles-showmore.is-hidden {
|
|
display: none;
|
|
}
|
|
.articles-showmore__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.articles-filter {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.articles-filter__item {
|
|
font-size: 16px;
|
|
}
|
|
.articles-slider__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: calc((100% - 25px) / 2.25);
|
|
}
|
|
.articles-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.articles-title--sm {
|
|
margin-bottom: 30px;
|
|
}
|
|
.articles-title--lg {
|
|
margin-bottom: 35px;
|
|
}
|
|
.articles-slider__wrapper.is-grid {
|
|
grid-auto-columns: calc((100% - 3.75px) / 1.25);
|
|
}
|
|
.articles-grid {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 40px;
|
|
}
|
|
.articles-grid .articles-item__title {
|
|
min-height: unset;
|
|
padding-right: 0;
|
|
}
|
|
.articles-grid .articles-item__descr {
|
|
padding-right: 0;
|
|
}
|
|
.articles-showmore {
|
|
margin-top: 40px;
|
|
}
|
|
.articles-showmore__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.articles-title--sm, .articles-title--lg {
|
|
margin-bottom: 25px;
|
|
}
|
|
.articles-filter {
|
|
margin-bottom: 20px;
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
.articles-filter__item {
|
|
font-size: 14px;
|
|
}
|
|
.articles-filter__link {
|
|
padding: 7px 12px;
|
|
}
|
|
.articles-grid {
|
|
row-gap: 30px;
|
|
}
|
|
.articles-item__info {
|
|
margin-top: 20px;
|
|
}
|
|
.articles-item__date {
|
|
font-size: 13px;
|
|
}
|
|
.articles-item__tags {
|
|
margin-left: 10px;
|
|
}
|
|
.articles-item__tag {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
}
|
|
.articles-item__title {
|
|
margin-top: 20px;
|
|
padding-right: 15px;
|
|
}
|
|
.articles-item__descr {
|
|
margin-top: 15px;
|
|
padding-right: 15px;
|
|
font-size: 15px;
|
|
}
|
|
.articles-item__read {
|
|
margin-top: 20px;
|
|
}
|
|
.articles-showmore {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
.articles-filter__link:hover {
|
|
border-color: #a6a6a6;
|
|
}
|
|
.articles-item__img-link:hover img {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
.getapp {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.getapp-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: clamp(40px, 2.5px + 4.8828vw, 65px);
|
|
padding-block: clamp(25px, 8.4254px + 4.4199vw, 65px);
|
|
padding-inline: clamp(20px, 1.3536px + 4.9724vw, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background: url(../img/bg/dl-bg.webp) center no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.getapp-body__right {
|
|
display: grid;
|
|
align-items: end;
|
|
grid-template-columns: 1fr 2.38fr;
|
|
column-gap: clamp(40px, 2.5px + 4.8828vw, 65px);
|
|
max-width: 500px;
|
|
}
|
|
.getapp-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.getapp--custom-title .getapp-body__left {
|
|
min-width: 0;
|
|
}
|
|
.getapp--custom-title .getapp-title {
|
|
font-size: clamp(24px, 11.5691px + 3.3149vw, 54px);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.getapp-title__ending {
|
|
display: block;
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.getapp--custom-title .getapp-title {
|
|
width: 731px;
|
|
max-width: none;
|
|
}
|
|
.getapp--custom-title .getapp-stores {
|
|
margin-top: 55px;
|
|
}
|
|
}
|
|
|
|
.getapp-descr {
|
|
margin-top: 25px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
.getapp-stores {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 40px;
|
|
}
|
|
.getapp-store {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60px;
|
|
padding: 0 25px 0 20px;
|
|
border-radius: 100px;
|
|
color: #000;
|
|
background-color: #fff;
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.getapp-store:hover {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.getapp-store__icon {
|
|
display: flex;
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
.getapp-store__name {
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
.getapp-qrcode {
|
|
display: flex;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
}
|
|
.getapp-qrcode img {
|
|
width: 100%;
|
|
}
|
|
.getapp-img {
|
|
display: flex;
|
|
margin-bottom: clamp(-65px, -8.4254px - 4.4199vw, -25px);
|
|
overflow: hidden;
|
|
}
|
|
.getapp-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 0;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.getapp-body {
|
|
grid-template-columns: 1fr 1.2fr;
|
|
}
|
|
.getapp-body__right {
|
|
grid-template-columns: 1fr 2.5fr;
|
|
margin: 0 auto;
|
|
}
|
|
.getapp-stores {
|
|
flex-wrap: wrap;
|
|
}
|
|
.getapp-store {
|
|
height: 50px;
|
|
padding: 0 20px 0 15px;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.getapp-body {
|
|
grid-template-columns: 1.2fr 1fr;
|
|
}
|
|
.getapp-body__right {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.getapp-qrcode {
|
|
display: none;
|
|
}
|
|
.getapp-img {
|
|
width: clamp(240px, 190.2762px + 13.2597vw, 360px);
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.getapp-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.getapp-body__right {
|
|
display: flex;
|
|
justify-content: center;
|
|
max-width: unset;
|
|
margin: 40px 0 0;
|
|
}
|
|
.getapp-img {
|
|
aspect-ratio: 240/260;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.getapp-body__right {
|
|
margin-top: 30px;
|
|
}
|
|
.getapp-descr {
|
|
margin-top: 15px;
|
|
font-size: 15px;
|
|
}
|
|
.getapp-stores {
|
|
margin-top: 25px;
|
|
}
|
|
.getapp-store {
|
|
height: 40px;
|
|
padding: 0 15px 0 12px;
|
|
}
|
|
.getapp-store__icon {
|
|
width: 20px;
|
|
}
|
|
.getapp-store__name {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.footer {
|
|
margin-top: var(--space-section);
|
|
padding-block: clamp(35px, 22.5691px + 3.3149vw, 65px);
|
|
border-top-left-radius: var(--radius-lg);
|
|
border-top-right-radius: var(--radius-lg);
|
|
background-color: var(--color-grey);
|
|
}
|
|
.footer-top__body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.75fr 220px;
|
|
column-gap: clamp(60px, -30px + 11.7188vw, 120px);
|
|
}
|
|
.footer-logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.footer-logo__link img {
|
|
width: 122px;
|
|
}
|
|
.footer-info {
|
|
max-width: 240px;
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
color: var(--color-grey-dark);
|
|
}
|
|
.footer-info p {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.footer-info p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.footer-contacts {
|
|
grid-column: 1/2;
|
|
grid-row: 2/5;
|
|
margin-top: 25px;
|
|
line-height: 1.2;
|
|
}
|
|
.footer-contacts__email {
|
|
display: flex;
|
|
font-size: 14px;
|
|
}
|
|
.footer-contacts__email-link {
|
|
color: var(--color-red);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.footer-contacts__email-link:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
.footer-contacts__map {
|
|
display: flex;
|
|
font-size: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
.footer-contacts__map-link {
|
|
position: relative;
|
|
padding-left: 1.25em;
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.footer-contacts__map-link::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
left: 0;
|
|
top: 0;
|
|
mask: var(--icon-placemark) center no-repeat;
|
|
-webkit-mask: var(--icon-placemark) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-dark);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.footer-contacts__map-link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.footer-contacts__map-link:hover::before {
|
|
background-color: var(--color-red);
|
|
}
|
|
.footer-socials {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
max-width: 200px;
|
|
margin-top: 30px;
|
|
}
|
|
.footer-socials__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
aspect-ratio: 1;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(209, 216, 221, 0.5);
|
|
background-color: #fff;
|
|
transition: border-color 0.25s ease;
|
|
}
|
|
.footer-socials__item:hover {
|
|
border-color: #d1d1d1;
|
|
}
|
|
.footer-socials__item img {
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
}
|
|
.footer-menu {
|
|
grid-row: 1/3;
|
|
}
|
|
.footer-menu__list {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: clamp(40px, 10px + 3.9063vw, 60px);
|
|
row-gap: clamp(30px, 7.5px + 2.9297vw, 45px);
|
|
}
|
|
.footer-menu__list > li > a {
|
|
font-weight: 700;
|
|
}
|
|
.footer-menu__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
.footer-menu__link {
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.footer-menu__link[href]:hover {
|
|
color: #8a8f9f;
|
|
}
|
|
.footer-menu__link:not([href]) {
|
|
cursor: default;
|
|
}
|
|
.footer-menu__submenu {
|
|
margin-top: 10px;
|
|
}
|
|
.footer-menu__submenu a {
|
|
padding: 10px 0;
|
|
}
|
|
.footer-menu__submenu-toggle {
|
|
display: none;
|
|
}
|
|
.footer-stores {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
justify-content: start;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: clamp(30px, 0px + 3.9063vw, 50px);
|
|
grid-column: 2/4;
|
|
}
|
|
.footer-store {
|
|
position: relative;
|
|
display: flex;
|
|
width: 128px;
|
|
aspect-ratio: 178/50;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.footer-store:hover {
|
|
opacity: 0.8;
|
|
}
|
|
.footer-actions {
|
|
grid-row: 1/3;
|
|
}
|
|
.footer-qrcode__img {
|
|
display: flex;
|
|
max-width: 175px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
border: 1px solid #ececec;
|
|
}
|
|
.footer-qrcode__img img {
|
|
width: 100%;
|
|
}
|
|
.footer-qrcode__info {
|
|
margin-top: 25px;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
.footer-buttons {
|
|
display: grid;
|
|
row-gap: 6px;
|
|
max-width: 265px;
|
|
margin-top: 25px;
|
|
}
|
|
.footer-buttons .btn {
|
|
height: 44px;
|
|
font-size: 16px;
|
|
}
|
|
.footer-buttons__login-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
color: var(--color-grey-text);
|
|
background-color: #dbdfec;
|
|
}
|
|
.footer-buttons__login-btn::before {
|
|
content: "";
|
|
display: block;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
margin: 0 4px 0.1em 0;
|
|
mask: var(--icon-user) center no-repeat;
|
|
-webkit-mask: var(--icon-user) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-grey-text);
|
|
}
|
|
.footer-buttons__login-btn:hover {
|
|
background-color: #cacdd9;
|
|
}
|
|
.footer-bottom {
|
|
margin-top: clamp(35px, 22.5691px + 3.3149vw, 65px);
|
|
padding-top: 30px;
|
|
border-top: 1px solid #e5e8f4;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
}
|
|
.footer-bottom__body {
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 1.75fr 1fr;
|
|
column-gap: 20px;
|
|
}
|
|
.footer-details {
|
|
color: var(--color-grey-dark);
|
|
}
|
|
.footer-copyright {
|
|
font-size: 14px;
|
|
}
|
|
.footer-madein {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
}
|
|
.footer-madein__icon {
|
|
display: flex;
|
|
width: 1.2em;
|
|
aspect-ratio: 1;
|
|
margin-left: 6px;
|
|
}
|
|
.footer-registry {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
}
|
|
.footer-registry__icon {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
}
|
|
.footer-registry__text {
|
|
max-width: 265px;
|
|
margin-left: 10px;
|
|
font-size: 10px;
|
|
}
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
column-gap: 20px;
|
|
}
|
|
.footer-links__list {
|
|
display: grid;
|
|
row-gap: 8px;
|
|
}
|
|
.footer-links__link {
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.footer-links__link:hover {
|
|
color: var(--color-dark);
|
|
}
|
|
.footer-developer {
|
|
text-align: right;
|
|
}
|
|
.footer-developer__link {
|
|
color: var(--color-grey-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.footer-developer__link span {
|
|
color: var(--color-red);
|
|
}
|
|
.footer-developer__link:hover {
|
|
color: var(--color-dark);
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.footer-bottom__body {
|
|
grid-template-columns: calc(38vw - 105px) 1.75fr 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.footer-top__body {
|
|
grid-template-columns: 1fr 1.5fr;
|
|
}
|
|
.footer-qrcode {
|
|
display: none;
|
|
}
|
|
.footer-info {
|
|
max-width: unset;
|
|
}
|
|
.footer-contacts {
|
|
grid-row: 2/3;
|
|
margin-top: 30px;
|
|
}
|
|
.footer-actions {
|
|
grid-column: 1/2;
|
|
grid-row: 3/4;
|
|
margin-top: 30px;
|
|
}
|
|
.footer-buttons {
|
|
margin-top: 0;
|
|
}
|
|
.footer-menu {
|
|
grid-row: 1/4;
|
|
}
|
|
.footer-stores {
|
|
grid-column: 1/-1;
|
|
}
|
|
.footer-bottom {
|
|
margin-top: 30px;
|
|
}
|
|
.footer-bottom__body {
|
|
grid-template-columns: 1fr 1.5fr;
|
|
column-gap: clamp(60px, -30px + 11.7188vw, 120px);
|
|
}
|
|
.footer-links {
|
|
column-gap: 40px;
|
|
}
|
|
.footer-developer {
|
|
order: 3;
|
|
margin-top: 30px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.footer-top__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.footer-buttons {
|
|
max-width: unset;
|
|
}
|
|
.footer-menu {
|
|
margin-top: 30px;
|
|
}
|
|
.footer-menu__list {
|
|
display: block;
|
|
}
|
|
.footer-menu__list > li {
|
|
align-items: center;
|
|
border-bottom: 1px solid #e5e7ef;
|
|
}
|
|
.footer-menu__list > li:first-child {
|
|
border-top: 1px solid #e5e7ef;
|
|
}
|
|
.footer-menu__list > li.has-children {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
}
|
|
.footer-menu__list > li.is-open > button {
|
|
transform: rotate(-180deg);
|
|
}
|
|
.footer-menu__list > li > a {
|
|
padding: 12px 0;
|
|
}
|
|
.footer-menu__item {
|
|
flex-direction: row;
|
|
}
|
|
.footer-menu__submenu-toggle {
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin: auto 0;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: 10px;
|
|
-webkit-mask-size: 10px;
|
|
background-color: var(--color-text);
|
|
transition: transform 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
.footer-menu__submenu {
|
|
grid-column: 1/-1;
|
|
margin-top: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
.footer-menu__submenu::after {
|
|
content: "";
|
|
display: block;
|
|
height: 6px;
|
|
}
|
|
.footer-menu__submenu li {
|
|
font-size: 15px;
|
|
}
|
|
.footer-menu__submenu a {
|
|
padding: 8px 0;
|
|
}
|
|
.footer-socials {
|
|
max-width: unset;
|
|
}
|
|
.footer-bottom__body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.footer-links {
|
|
justify-content: unset;
|
|
}
|
|
.footer-details {
|
|
order: 2;
|
|
padding-top: 30px;
|
|
margin-top: 30px;
|
|
border-top: 1px solid #e5e8f4;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.footer-stores {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
.footer-links {
|
|
flex-direction: column;
|
|
row-gap: 30px;
|
|
}
|
|
}
|
|
.blog {
|
|
margin-top: 145px;
|
|
}
|
|
.blog-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
padding-block: clamp(25px, 14.6409px + 2.7624vw, 50px);
|
|
padding-inline: clamp(20px, 3.4254px + 4.4199vw, 60px);
|
|
column-gap: clamp(20px, -4.8619px + 6.6298vw, 80px);
|
|
border-radius: var(--radius-sm);
|
|
background: linear-gradient(198deg, #fef8ea 0%, #ffeff0 100%);
|
|
}
|
|
.blog-info {
|
|
max-width: 680px;
|
|
}
|
|
.blog-descr {
|
|
margin-top: clamp(15px, 8.7845px + 1.6575vw, 30px);
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
}
|
|
.blog-logo {
|
|
width: clamp(48px, 21.4807px + 7.0718vw, 112px);
|
|
margin-right: 40px;
|
|
}
|
|
.blog-slider {
|
|
margin-top: clamp(25px, 6.3536px + 4.9724vw, 70px);
|
|
}
|
|
.blog-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 20px;
|
|
}
|
|
.blog-item__info {
|
|
padding-right: clamp(20px, -40px + 7.8125vw, 60px);
|
|
}
|
|
.blog-item__tags {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
column-gap: 6px;
|
|
}
|
|
.blog-item__tag {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #798079;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.blog-item__title {
|
|
margin-top: 20px;
|
|
font-size: var(--fs-h3-lg);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
.blog-item__title-link {
|
|
display: block;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.blog-item__title-link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.blog-item__descr {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.blog-item__read {
|
|
margin-top: 30px;
|
|
}
|
|
.blog-item__read-btn {
|
|
border-color: rgba(185, 185, 185, 0.5);
|
|
}
|
|
.blog-item__img {
|
|
align-self: start;
|
|
}
|
|
.blog-item__img-link {
|
|
display: block;
|
|
aspect-ratio: 1024/580;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
}
|
|
.blog-item__img-link img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.blog {
|
|
margin-top: clamp(75px, 54.2818px + 5.5249vw, 125px);
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.blog-logo {
|
|
margin-right: 0;
|
|
}
|
|
.blog-item__img {
|
|
margin-top: 55px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.blog-slider__container {
|
|
border-bottom-left-radius: var(--radius-sm);
|
|
border-bottom-right-radius: var(--radius-sm);
|
|
}
|
|
.blog-item {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.blog-item__info {
|
|
padding-right: 0;
|
|
}
|
|
.blog-item__img {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.blog-descr {
|
|
font-size: 15px;
|
|
}
|
|
.blog-item__tag {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
}
|
|
.blog-item__title {
|
|
margin-top: 15px;
|
|
}
|
|
.blog-item__descr {
|
|
margin-top: 12px;
|
|
font-size: 15px;
|
|
}
|
|
.blog-item__read {
|
|
margin-top: 20px;
|
|
}
|
|
.blog-item__img {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
.blog-item__img-link:hover img {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
.content > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.content > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.content h1 + h2,
|
|
.content h1 + h3,
|
|
.content h1 + h4 {
|
|
margin-top: 0;
|
|
}
|
|
.content h1 {
|
|
margin-bottom: clamp(25px, 6.3536px + 4.9724vw, 70px);
|
|
text-align: center;
|
|
}
|
|
.content h2 + h3,
|
|
.content h3 + h4 {
|
|
margin-top: 0;
|
|
}
|
|
.content h2,
|
|
.content h3,
|
|
.content h4 {
|
|
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
margin-bottom: clamp(18px, 15.0994px + 0.7735vw, 25px);
|
|
font-weight: 600;
|
|
}
|
|
.content h2 {
|
|
font-size: var(--fs-h2-sm);
|
|
}
|
|
.content h3,
|
|
.content h4 {
|
|
font-size: var(--fs-h3-sm);
|
|
line-height: 1.3;
|
|
}
|
|
.content p,
|
|
.content ul,
|
|
.content ol {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.content li {
|
|
position: relative;
|
|
padding-left: 1.5em;
|
|
}
|
|
.content li:not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.content li ul,
|
|
.content li ol {
|
|
margin-block: 0.5em;
|
|
}
|
|
.content li p {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.content ul > li::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 0.3em;
|
|
aspect-ratio: 1;
|
|
top: 0.6em;
|
|
left: 0.6em;
|
|
border-radius: 50%;
|
|
background-color: var(--color-red);
|
|
}
|
|
.content ol {
|
|
counter-reset: num;
|
|
}
|
|
.content ol > li {
|
|
counter-increment: num;
|
|
}
|
|
.content ol > li::before {
|
|
content: counter(num) ".";
|
|
position: absolute;
|
|
width: 1.25em;
|
|
left: 0;
|
|
top: 0;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
color: var(--color-red);
|
|
}
|
|
.content b,
|
|
.content strong {
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
.content a {
|
|
display: inline-block;
|
|
color: var(--color-red);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.content a:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
.content img {
|
|
margin-block: 1.75em;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.content .table-wrapper {
|
|
margin-block: 1.75em;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.content .table-wrapper::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
.content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.content table th,
|
|
.content table td {
|
|
padding: 15px 20px;
|
|
border: 1px solid #eee;
|
|
}
|
|
.content table th {
|
|
text-align: left;
|
|
color: var(--color-dark);
|
|
background-color: var(--color-light);
|
|
}
|
|
.content--sm h2,
|
|
.content--sm h3,
|
|
.content--sm h4 {
|
|
margin-top: clamp(20px, 11.7127px + 2.2099vw, 40px);
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.content .table-wrapper {
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.content h3,
|
|
.content h4 {
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.content .table-wrapper {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
.content table th,
|
|
.content table td {
|
|
padding: 10px 15px;
|
|
}
|
|
}
|
|
.article-goback {
|
|
display: flex;
|
|
margin-top: clamp(15px, 4.6409px + 2.7624vw, 40px);
|
|
margin-bottom: 20px;
|
|
}
|
|
.article-goback__btn {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: var(--color-text);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.article-goback__btn::before, .article-goback__btn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 2.55em;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
.article-goback__btn::before {
|
|
margin-right: 10px;
|
|
border-color: #f0f0f0;
|
|
background-color: var(--color-white);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.article-goback__btn::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-color: transparent;
|
|
background: var(--icon-angle-left) center no-repeat;
|
|
background-size: 0.6em;
|
|
}
|
|
.article-goback__btn:hover::before {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.article-title {
|
|
text-align: center;
|
|
}
|
|
.article-img {
|
|
aspect-ratio: 1280/440;
|
|
margin-top: clamp(25px, 18.7845px + 1.6575vw, 40px);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
.article-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.article-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 30px;
|
|
margin-top: 30px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
.article-date {
|
|
font-size: 15px;
|
|
}
|
|
.article-tags {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: 6px;
|
|
}
|
|
.article-tags__item {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #798079;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.article-body {
|
|
display: grid;
|
|
align-items: start;
|
|
grid-template-columns: 1fr 300px;
|
|
column-gap: clamp(40px, -300px + 33.2031vw, 125px);
|
|
margin-top: clamp(40px, 31.7127px + 2.2099vw, 60px);
|
|
}
|
|
.article-body.no-toc {
|
|
grid-template-columns: 1fr;
|
|
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
}
|
|
.article-main {
|
|
min-width: 0;
|
|
}
|
|
.article-main .article-content:not(:first-child){
|
|
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
}
|
|
.article-sidebar {
|
|
position: sticky;
|
|
top: 112px;
|
|
}
|
|
.article-toc {
|
|
height: 46vh;
|
|
|
|
padding: 25px 30px;
|
|
background-color: var(--color-light);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.article-toc__title {
|
|
font-size: var(--fs-h3-sm);
|
|
line-height: 1.2;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
.article-toc__list {
|
|
display: grid;
|
|
row-gap: 18px;
|
|
margin-top: 25px;
|
|
max-height: calc(100vh - 260px);
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.article-toc__list::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
.article-toc__list.is-scrollable {
|
|
scrollbar-width: auto;
|
|
height: 83%;
|
|
}
|
|
@-moz-document url-prefix() {
|
|
.article-toc__list.is-scrollable {
|
|
scrollbar-width: thin;
|
|
}
|
|
}
|
|
.article-toc__list.is-scrollable::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
.article-toc__list.is-scrollable::-webkit-scrollbar-track {
|
|
background-color: #f0f0f0;
|
|
border-radius: 5px;
|
|
}
|
|
.article-toc__list.is-scrollable::-webkit-scrollbar-thumb {
|
|
background-color: #d9d9d9;
|
|
border-radius: 5px;
|
|
}
|
|
.article-toc__item {
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
}
|
|
.article-toc__link {
|
|
color: var(--color-text);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.article-toc__link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.article-sidebar {
|
|
top: clamp(70px, 61.7127px + 2.2099vw, 90px);
|
|
}
|
|
.article-toc__list {
|
|
max-height: calc(100vh - 240px);
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.article-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.article-sidebar {
|
|
position: unset;
|
|
top: unset;
|
|
order: -1;
|
|
margin-bottom: clamp(40px, 31.7127px + 2.2099vw, 60px);
|
|
}
|
|
.article-toc__list {
|
|
max-height: unset;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.article-img {
|
|
aspect-ratio: 1280/720;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.article-goback__btn {
|
|
font-size: 12px;
|
|
}
|
|
.article-meta {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin-top: 20px;
|
|
}
|
|
.article-tags__item {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
border-radius: 5px;
|
|
}
|
|
.article-date {
|
|
order: 2;
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
}
|
|
.article-date:first-child:last-child {
|
|
margin-top: 0;
|
|
}
|
|
.article-toc {
|
|
padding: 20px;
|
|
}
|
|
.article-toc__list {
|
|
row-gap: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
.article-toc__item {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
.requirements {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.requirements-title {
|
|
text-align: center;
|
|
}
|
|
.requirements-main {
|
|
margin-top: 45px;
|
|
}
|
|
.requirements-main__list {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--items), 1fr);
|
|
gap: 20px;
|
|
}
|
|
.requirements-main__item {
|
|
display: grid;
|
|
align-content: center;
|
|
grid-template-columns: auto 1fr;
|
|
column-gap: 0.5em;
|
|
min-height: calc(2.6em + 24px);
|
|
padding: 12px 20px;
|
|
line-height: 1.3;
|
|
border-radius: 10px;
|
|
background-color: #f5f5fa;
|
|
}
|
|
.requirements-main__item::before {
|
|
content: "";
|
|
position: relative;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0.15em;
|
|
background: var(--icon-checkmark) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.requirements-main__item:has(p) {
|
|
align-content: start;
|
|
padding-block: 20px;
|
|
}
|
|
.requirements-main__item:has(p) strong {
|
|
display: block;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.requirements-docs {
|
|
margin-top: 60px;
|
|
}
|
|
.requirements-docs__title {
|
|
font-size: clamp(20px, 15.8564px + 1.105vw, 30px);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.requirements-docs__list {
|
|
display: grid;
|
|
justify-content: center;
|
|
grid-template-columns: auto auto;
|
|
column-gap: clamp(40px, -80px + 15.625vw, 120px);
|
|
row-gap: 15px;
|
|
margin-top: 40px;
|
|
counter-reset: num;
|
|
}
|
|
.requirements-docs__item {
|
|
position: relative;
|
|
padding-left: 1.85em;
|
|
line-height: 1.3;
|
|
counter-increment: num;
|
|
}
|
|
.requirements-docs__item::before {
|
|
content: counter(num);
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.requirements-main {
|
|
margin-top: 35px;
|
|
}
|
|
.requirements-main__list {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 8px;
|
|
}
|
|
.requirements-main__item {
|
|
min-height: unset;
|
|
padding: 15px 20px;
|
|
}
|
|
.requirements-main__item:has(p) {
|
|
padding-block: 15px;
|
|
}
|
|
.requirements-docs {
|
|
margin-top: 45px;
|
|
}
|
|
.requirements-docs__list {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.requirements-main {
|
|
margin-top: 25px;
|
|
}
|
|
.requirements-docs {
|
|
margin-top: 35px;
|
|
}
|
|
.requirements-docs__list {
|
|
row-gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.cities {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.cities-title {
|
|
text-align: center;
|
|
}
|
|
.cities-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 45px;
|
|
gap: 10px;
|
|
}
|
|
.cities-item {
|
|
display: flex;
|
|
min-width: 0;
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
}
|
|
.cities-item__link {
|
|
padding: 20px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: 100px;
|
|
border: 1px solid #e2e2e2;
|
|
color: var(--color-text);
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
.cities-item__link:hover {
|
|
color: #fff;
|
|
border-color: var(--color-red);
|
|
background-color: var(--color-red);
|
|
}
|
|
.cities-item.is-active a {
|
|
color: #fff;
|
|
border-color: var(--color-red);
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.cities-item {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.cities-item__link {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.cities-list {
|
|
margin-top: 35px;
|
|
gap: 8px;
|
|
}
|
|
.cities-item__link {
|
|
padding: 12px 15px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.cities-list {
|
|
margin-top: 25px;
|
|
}
|
|
.cities-item__link {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
.jobs {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.jobs-body {
|
|
padding-top: clamp(25px, 10.4972px + 3.8674vw, 60px);
|
|
padding-bottom: clamp(35px, 16.3536px + 4.9724vw, 80px);
|
|
padding-inline: clamp(20px, 1.3536px + 4.9724vw, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--color-red);
|
|
}
|
|
.jobs-title {
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.jobs-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 45px;
|
|
gap: 10px;
|
|
}
|
|
.jobs-item {
|
|
display: flex;
|
|
min-width: 0;
|
|
font-size: 22px;
|
|
line-height: 1.1;
|
|
}
|
|
.jobs-item__link {
|
|
padding: 20px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
transition-property: color, background-color, border-color;
|
|
transition-duration: 0.25s;
|
|
transition-timing-function: ease;
|
|
}
|
|
.jobs-item__link:hover {
|
|
color: var(--color-red);
|
|
border-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
.jobs-item.is-active a {
|
|
color: var(--color-red);
|
|
border-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.jobs-item {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
@media (max-width: 1023.98px) {
|
|
.jobs-item__link {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.jobs-list {
|
|
margin-top: 35px;
|
|
gap: 8px;
|
|
}
|
|
.jobs-item__link {
|
|
padding: 12px 15px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.jobs-list {
|
|
margin-top: 25px;
|
|
}
|
|
.jobs-item__link {
|
|
padding: 10px 12px;
|
|
}
|
|
}
|
|
.news-grid {
|
|
display: grid;
|
|
row-gap: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
}
|
|
.news-item {
|
|
display: grid;
|
|
grid-template-columns: clamp(300px, 129px + 22.2656vw, 414px) 1fr;
|
|
column-gap: 40px;
|
|
}
|
|
.news-item__img-link {
|
|
display: block;
|
|
aspect-ratio: 768/435;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-light);
|
|
}
|
|
.news-item__img-link img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.news-item__date {
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
}
|
|
.news-item__title {
|
|
margin-top: 15px;
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
.news-item__title-link {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
width: fit-content;
|
|
color: var(--color-dark);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.news-item__title-link:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.news-item__descr {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-top: 15px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.news-item__read {
|
|
margin-top: 25px;
|
|
}
|
|
.news-item__read-btn {
|
|
border-color: rgba(185, 185, 185, 0.5);
|
|
}
|
|
.news-showmore {
|
|
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
text-align: center;
|
|
}
|
|
.news-showmore.is-hidden {
|
|
display: none;
|
|
}
|
|
.news-showmore__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.news-item {
|
|
column-gap: 30px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.news-item {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.news-item__info {
|
|
margin-top: 25px;
|
|
}
|
|
.news-showmore__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.news-item__info {
|
|
margin-top: 20px;
|
|
}
|
|
.news-item__date {
|
|
font-size: 13px;
|
|
}
|
|
.news-item__descr {
|
|
font-size: 15px;
|
|
}
|
|
.news-item__read {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
.news-item__img-link:hover img {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
.download {
|
|
padding-bottom: var(--space-section);
|
|
padding-top: 165px;
|
|
text-align: center;
|
|
background-image: url(../img/content/bag.webp), url(../img/content/car.webp), linear-gradient(145deg, #f5f5f9 50%, #fff5e7 100%);
|
|
background-repeat: no-repeat;
|
|
background-position: calc(50% - 80px - 30vw) 30%, calc(50% + 280px + 20vw) 63%, center;
|
|
background-size: clamp(232px, 160px + 9.375vw, 280px) auto, clamp(450px, 315px + 17.5781vw, 540px) auto, cover;
|
|
}
|
|
.download-descr, .download-info {
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.download-descr {
|
|
margin-top: 25px;
|
|
}
|
|
.download-info {
|
|
margin-top: clamp(30px, 5.1381px + 6.6298vw, 90px);
|
|
}
|
|
.download-qrcode {
|
|
width: clamp(256px, 225.337px + 8.1768vw, 330px);
|
|
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
|
margin-inline: auto;
|
|
padding: var(--radius-sm);
|
|
background-color: #fff;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid #ececec;
|
|
}
|
|
.download-qrcode img {
|
|
width: 100%;
|
|
}
|
|
.download-stores {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: clamp(35px, 28.7845px + 1.6575vw, 50px);
|
|
}
|
|
.download-store {
|
|
position: relative;
|
|
display: flex;
|
|
width: clamp(160px, 152.5414px + 1.989vw, 178px);
|
|
aspect-ratio: 178/50;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.download-store:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
.download {
|
|
background-position: calc(50% - 660px) 30%, calc(50% + 660px) 63%, center;
|
|
}
|
|
}
|
|
@media (max-width: 1279.98px) {
|
|
.download {
|
|
padding-top: clamp(80px, 53.0663px + 7.1823vw, 145px);
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.download {
|
|
min-height: 100vh;
|
|
background: linear-gradient(145deg, #f5f5f9 50%, #fff5e7 100%);
|
|
}
|
|
.download-stores {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.download-descr, .download-info {
|
|
font-size: 15px;
|
|
}
|
|
.download-descr {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.ymaps3--map-container .ymaps3--map-copyrights,
|
|
.ymaps3--map-container .ymaps3--controls_bottom {
|
|
display: none;
|
|
}
|
|
.ymaps3--map-container .ymaps3--controls {
|
|
z-index: 5;
|
|
}
|
|
|
|
.contacts-body {
|
|
display: grid;
|
|
align-items: stretch;
|
|
grid-template-columns: 1fr 1.42fr;
|
|
column-gap: 20px;
|
|
min-height: clamp(400px, 160px + 23.4375vw, 460px);
|
|
}
|
|
.contacts-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: clamp(25px, 14.6409px + 2.7624vw, 50px);
|
|
padding-bottom: clamp(25px, 10.4972px + 3.8674vw, 60px);
|
|
padding-inline: clamp(20px, 3.4254px + 4.4199vw, 60px);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
}
|
|
.contacts-card__title {
|
|
font-size: var(--fs-title-lg);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--color-dark);
|
|
}
|
|
.contacts-card__list {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
margin-top: clamp(20px, 7.5691px + 3.3149vw, 50px);
|
|
margin-bottom: auto;
|
|
}
|
|
.contacts-card__item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
}
|
|
.contacts-card__item::before {
|
|
content: "";
|
|
position: relative;
|
|
display: block;
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
flex-shrink: 0;
|
|
margin-right: 12px;
|
|
top: 0.15em;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.contacts-card__item--tel {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 700;
|
|
}
|
|
.contacts-card__item--tel::before {
|
|
background-image: var(--icon-phone);
|
|
}
|
|
.contacts-card__item--tel a {
|
|
color: var(--color-dark);
|
|
}
|
|
.contacts-card__item--tel a:hover {
|
|
color: var(--color-red);
|
|
}
|
|
.contacts-card__item--address::before {
|
|
background-image: var(--icon-location);
|
|
}
|
|
.contacts-card__item--email::before {
|
|
background-image: var(--icon-email);
|
|
}
|
|
.contacts-card__item--email a {
|
|
color: var(--color-red);
|
|
}
|
|
.contacts-card__item--email a:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
.contacts-card__item-link {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color 0.25s ease;
|
|
}
|
|
.contacts-card__download {
|
|
margin-top: clamp(25px, 10.4972px + 3.8674vw, 60px);
|
|
}
|
|
.contacts-map {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--color-light);
|
|
}
|
|
.contacts-map__container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.contacts-map__marker {
|
|
transform: translate(-50%, -100%);
|
|
}
|
|
.contacts-map__marker.is-open {
|
|
transform: translate(-50%, calc(-100% - 14px));
|
|
}
|
|
.contacts-map__marker.is-open .contacts-map__marker-button {
|
|
display: none;
|
|
}
|
|
.contacts-map__marker.is-open .contacts-map__popup {
|
|
display: block;
|
|
}
|
|
.contacts-map__marker-button {
|
|
display: block;
|
|
width: 60px;
|
|
height: 68px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
.contacts-map__marker-icon {
|
|
display: block;
|
|
width: 60px;
|
|
height: 68px;
|
|
pointer-events: none;
|
|
}
|
|
.contacts-map__popup {
|
|
position: relative;
|
|
display: none;
|
|
width: max-content;
|
|
max-width: 260px;
|
|
min-width: 180px;
|
|
padding: 10px 36px 10px 12px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
}
|
|
.contacts-map__popup::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: #fff;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.contacts-map__popup-title {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
.contacts-map__popup-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: var(--color-text);
|
|
}
|
|
.contacts-map__popup-close {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
color: #999;
|
|
cursor: pointer;
|
|
transition: color 0.25s ease;
|
|
}
|
|
.contacts-map__popup-close:hover {
|
|
color: #222;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.contacts-body {
|
|
grid-template-columns: 1fr;
|
|
min-height: unset;
|
|
}
|
|
.contacts-map {
|
|
height: clamp(240px, 148.8398px + 24.3094vw, 460px);
|
|
order: -1;
|
|
}
|
|
.contacts-card {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.contacts-card__item::before {
|
|
top: 0;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.contacts-card {
|
|
margin-top: 15px;
|
|
}
|
|
.contacts-card__list {
|
|
row-gap: 15px;
|
|
}
|
|
.contacts-card__item::before {
|
|
width: 18px;
|
|
}
|
|
.contacts-card__download-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.about-hero {
|
|
display: grid;
|
|
grid-template-columns: 1.25fr 1fr;
|
|
column-gap: clamp(40px, -170px + 27.3438vw, 180px);
|
|
}
|
|
.about-hero__info {
|
|
margin-top: clamp(50px, -70px + 11.7188vw, 80px);
|
|
font-size: var(--fs-title-lg);
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
.about-stats {
|
|
--gap: clamp(40px, -340px + 37.1094vw, 135px);
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
column-gap: var(--gap);
|
|
margin-top: clamp(20px, -4.8619px + 6.6298vw, 80px);
|
|
}
|
|
.about-stats__item {
|
|
position: relative;
|
|
}
|
|
.about-stats__item::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1px;
|
|
height: 25px;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: calc(var(--gap) / -2);
|
|
margin: auto 0;
|
|
background-color: #d8d8e8;
|
|
}
|
|
.about-stats__item:last-child::after {
|
|
display: none;
|
|
}
|
|
.about-stats__item-value {
|
|
font-size: clamp(32px, 24.5414px + 1.989vw, 50px);
|
|
line-height: 1.1;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
color: var(--color-dark);
|
|
}
|
|
.about-stats__item-value span {
|
|
font-size: clamp(18px, 15.5138px + 0.663vw, 24px);
|
|
}
|
|
.about-stats__item-text {
|
|
margin-top: 12px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.about-cards {
|
|
display: grid;
|
|
row-gap: 40px;
|
|
margin-top: var(--space-section);
|
|
}
|
|
.about-card {
|
|
display: grid;
|
|
grid-template-columns: 1.7fr 1fr;
|
|
column-gap: 40px;
|
|
padding-block: clamp(25px, 14.6409px + 2.7624vw, 50px);
|
|
padding-inline: clamp(20px, 7.5691px + 3.3149vw, 50px);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.about-card--first {
|
|
background: var(--gradient-grey);
|
|
}
|
|
.about-card--second {
|
|
grid-template-columns: 1fr auto;
|
|
border: 1px solid #ededed;
|
|
}
|
|
.about-card__title {
|
|
margin-bottom: clamp(18px, 15.0994px + 0.7735vw, 25px);
|
|
font-size: var(--fs-h2-sm);
|
|
font-weight: 600;
|
|
}
|
|
.about-card__img, .about-card__logo {
|
|
grid-column: 2/3;
|
|
grid-row: 1/4;
|
|
}
|
|
.about-card__img {
|
|
display: flex;
|
|
align-self: center;
|
|
}
|
|
.about-card__logo {
|
|
padding-top: 10px;
|
|
}
|
|
.about-card__logo img {
|
|
width: clamp(100px, 47.5px + 6.8359vw, 135px);
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.about-hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.about-hero__img {
|
|
width: clamp(345px, 197.6579px + 39.2912vw, 600px);
|
|
margin-inline: auto;
|
|
order: -1;
|
|
}
|
|
.about-stats {
|
|
grid-template-columns: 1fr 1fr;
|
|
row-gap: 40px;
|
|
}
|
|
.about-stats__item::after {
|
|
display: none;
|
|
}
|
|
.about-cards {
|
|
row-gap: 20px;
|
|
}
|
|
.about-card {
|
|
column-gap: 30px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.about-hero__info {
|
|
margin-top: 40px;
|
|
}
|
|
.about-stats {
|
|
row-gap: 30px;
|
|
}
|
|
.about-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.about-card__logo {
|
|
display: none;
|
|
}
|
|
.about-card__img {
|
|
grid-column: unset;
|
|
grid-row: unset;
|
|
margin: 5px 0 25px;
|
|
}
|
|
.about-card__content {
|
|
order: 3;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.about-hero__info {
|
|
margin-top: 25px;
|
|
}
|
|
.about-stats {
|
|
column-gap: 30px;
|
|
row-gap: 20px;
|
|
}
|
|
.about-stats__item-text {
|
|
margin-top: 8px;
|
|
font-size: 15px;
|
|
}
|
|
.about-cards {
|
|
row-gap: 15px;
|
|
}
|
|
}
|
|
.features {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.features-title {
|
|
text-align: center;
|
|
}
|
|
.features-cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 45px;
|
|
}
|
|
.features-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
padding-block: clamp(20px, 11.7127px + 2.2099vw, 40px);
|
|
padding-inline: clamp(20px, 9.6409px + 2.7624vw, 45px);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.features-card--first {
|
|
border: 1px solid #ededed;
|
|
}
|
|
.features-card--first .features-card__img {
|
|
width: clamp(90px, 60.9945px + 7.7348vw, 160px);
|
|
margin-right: clamp(-45px, -9.6409px - 2.7624vw, -20px);
|
|
margin-block: clamp(-40px, -11.7127px - 2.2099vw, -20px);
|
|
}
|
|
.features-card--second {
|
|
background: linear-gradient(160deg, #29292d 0%, #083743 100%);
|
|
}
|
|
.features-card--second .features-card__title,
|
|
.features-card--second .features-card__descr {
|
|
color: #fff;
|
|
}
|
|
.features-card--second .features-card__img {
|
|
width: clamp(75px, 45.9945px + 7.7348vw, 145px);
|
|
}
|
|
.features-card--third {
|
|
grid-template-columns: 1fr;
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
background: var(--gradient-grey);
|
|
}
|
|
.features-card--third .features-card__img {
|
|
align-items: flex-end;
|
|
margin-top: clamp(20px, 11.7127px + 2.2099vw, 40px);
|
|
margin-bottom: clamp(-40px, -11.7127px - 2.2099vw, -20px);
|
|
}
|
|
.features-card__title {
|
|
font-size: clamp(16px, 10.1989px + 1.547vw, 30px);
|
|
line-height: 1.1;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
.features-card__descr {
|
|
margin-top: clamp(12px, 4.5414px + 1.989vw, 30px);
|
|
padding-right: clamp(10px, -110px + 11.7188vw, 40px);
|
|
line-height: 1.3;
|
|
}
|
|
.features-card__img {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.features-card__img img {
|
|
width: 100%;
|
|
}
|
|
.features-bottom {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.features-slider {
|
|
min-width: 0;
|
|
}
|
|
.features-slider__wrapper.is-grid {
|
|
display: grid;
|
|
align-items: stretch;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 20px;
|
|
}
|
|
.features-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: clamp(140px, 104.779px + 9.3923vw, 225px);
|
|
padding: 25px;
|
|
line-height: 1.2;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid #ededed;
|
|
}
|
|
.features-item__top {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr auto;
|
|
column-gap: 20px;
|
|
}
|
|
.features-item__title {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
}
|
|
.features-item__icon {
|
|
display: flex;
|
|
width: clamp(30px, 21.7127px + 2.2099vw, 50px);
|
|
aspect-ratio: 1;
|
|
}
|
|
.features-item__descr {
|
|
margin-top: 20px;
|
|
line-height: 1.3;
|
|
}
|
|
.features-download {
|
|
display: flex;
|
|
width: 195px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
.features-download__link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 25px;
|
|
border-radius: var(--radius-lg);
|
|
color: #fff;
|
|
background-color: var(--color-red);
|
|
transition: background-color 0.25s ease;
|
|
}
|
|
.features-download__link:hover {
|
|
background-color: var(--color-red-dark);
|
|
}
|
|
.features-download__link span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: clamp(36px, 30.1989px + 1.547vw, 50px);
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
}
|
|
.features-download__link span::before {
|
|
content: "";
|
|
display: block;
|
|
width: 13px;
|
|
height: 13px;
|
|
background: var(--icon-arrow-up) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.features-card__descr {
|
|
font-size: 18px;
|
|
}
|
|
.features-bottom {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.features-slider__wrapper.is-grid {
|
|
grid-template-columns: unset;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: calc((100% - 30px) / 2.5);
|
|
}
|
|
.features-item__descr {
|
|
font-size: 18px;
|
|
}
|
|
.features-download {
|
|
display: block;
|
|
width: unset;
|
|
margin-top: 20px;
|
|
}
|
|
.features-download__link {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.features-cards {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 35px;
|
|
}
|
|
.features-card--third {
|
|
grid-column: unset;
|
|
grid-row: unset;
|
|
}
|
|
.features-card__descr br {
|
|
display: none;
|
|
}
|
|
.features-slider__wrapper.is-grid {
|
|
grid-auto-columns: calc((100% - 7.5px) / 1.5);
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.features-cards {
|
|
row-gap: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
.features-card__descr {
|
|
margin-top: 15px;
|
|
font-size: 15px;
|
|
}
|
|
.features-bottom {
|
|
margin-top: 15px;
|
|
}
|
|
.features-item {
|
|
padding: 20px;
|
|
}
|
|
.features-item__descr {
|
|
font-size: 15px;
|
|
}
|
|
.features-download {
|
|
margin-top: 15px;
|
|
}
|
|
.features-download__link {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
.vacancies-img {
|
|
aspect-ratio: 1280/300;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.vacancies-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.vacancies-subtitle {
|
|
margin-top: clamp(40px, 23.4254px + 4.4199vw, 80px);
|
|
font-size: var(--fs-h2-sm);
|
|
text-align: center;
|
|
}
|
|
.vacancies-subtitle span {
|
|
display: inline-block;
|
|
width: 2ch;
|
|
margin-right: -2ch;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
vertical-align: text-top;
|
|
}
|
|
.vacancies-filter {
|
|
position: relative;
|
|
max-width: 430px;
|
|
margin: 25px auto 0;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
.vacancies-filter__trigger {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 15px;
|
|
width: 100%;
|
|
height: 64px;
|
|
padding-inline: 20px;
|
|
background-color: #fff;
|
|
border: 1px solid #efefef;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: border-color 0.25s ease;
|
|
}
|
|
.vacancies-filter__trigger::after {
|
|
content: "";
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
mask: var(--icon-angle-down) center no-repeat;
|
|
-webkit-mask: var(--icon-angle-down) center no-repeat;
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
background-color: var(--color-text);
|
|
transition: transform 0.25s ease;
|
|
}
|
|
.vacancies-filter__value {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-text);
|
|
}
|
|
.vacancies-filter__options {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 2;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
border: 1px solid #ccc;
|
|
transition: opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
.vacancies-filter__link {
|
|
display: block;
|
|
padding: 15px 20px;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: color 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
.vacancies-filter__link:hover, .vacancies-filter__link:focus {
|
|
background-color: var(--color-grey);
|
|
}
|
|
.vacancies-filter__option.is-selected a {
|
|
background-color: var(--color-grey);
|
|
}
|
|
.vacancies-filter.is-open .vacancies-filter__trigger {
|
|
border-color: #ccc;
|
|
}
|
|
.vacancies-filter.is-open .vacancies-filter__trigger::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
.vacancies-filter.is-open .vacancies-filter__options {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.vacancies-list {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
margin-top: clamp(30px, -15px + 5.8594vw, 60px);
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.vacancies-list.is-loading {
|
|
opacity: 0;
|
|
}
|
|
.vacancies-item {
|
|
border-radius: var(--radius-md);
|
|
background-color: #fafaff;
|
|
border: 1px solid transparent;
|
|
transition: background-color 0.25s ease, border-color 0.25s ease;
|
|
}
|
|
.vacancies-item__header {
|
|
position: relative;
|
|
padding: 25px 80px 25px 25px;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
}
|
|
.vacancies-item__header::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
top: 25px;
|
|
right: 25px;
|
|
background: var(--icon-angle-round) center no-repeat;
|
|
background-size: contain;
|
|
transition: transform 0.25s ease;
|
|
}
|
|
.vacancies-item__title {
|
|
font-size: var(--fs-title-sm);
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
}
|
|
.vacancies-item__descr {
|
|
margin-top: 15px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
.vacancies-item__city {
|
|
position: relative;
|
|
margin-top: 15px;
|
|
padding-left: 1.25em;
|
|
color: var(--color-dark);
|
|
}
|
|
.vacancies-item__city::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
top: 0.1em;
|
|
left: 0;
|
|
background: var(--icon-location-alt) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.vacancies-item__body {
|
|
position: relative;
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
will-change: height, opacity;
|
|
transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
|
|
}
|
|
.vacancies-item__body::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
height: 1px;
|
|
top: 0;
|
|
left: 25px;
|
|
right: 25px;
|
|
background-color: #ededed;
|
|
}
|
|
.vacancies-item__content {
|
|
padding: 25px;
|
|
}
|
|
.vacancies-item__respond {
|
|
padding: 15px 25px 30px;
|
|
}
|
|
.vacancies-item.is-active {
|
|
border-color: #ededed;
|
|
background-color: transparent;
|
|
}
|
|
.vacancies-item.is-active .vacancies-item__header::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
.vacancies-item.is-active .vacancies-item__body {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.vacancies-showmore {
|
|
margin-top: clamp(30px, -15px + 5.8594vw, 60px);
|
|
text-align: center;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.vacancies-showmore.is-loading {
|
|
opacity: 0;
|
|
}
|
|
.vacancies-showmore.is-hidden {
|
|
display: none;
|
|
}
|
|
.vacancies-showmore__btn {
|
|
max-width: 265px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.vacancies-filter__trigger {
|
|
height: 60px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.vacancies-filter {
|
|
max-width: unset;
|
|
}
|
|
.vacancies-filter__trigger {
|
|
height: 56px;
|
|
}
|
|
.vacancies-filter__link {
|
|
padding-block: 12px;
|
|
}
|
|
.vacancies-img {
|
|
aspect-ratio: 1280/560;
|
|
}
|
|
.vacancies-item__respond {
|
|
padding-top: 10px;
|
|
}
|
|
.vacancies-item__respond-btn {
|
|
width: 100%;
|
|
}
|
|
.vacancies-showmore__btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.vacancies-filter {
|
|
margin-top: 20px;
|
|
font-size: 15px;
|
|
}
|
|
.vacancies-filter__trigger {
|
|
height: 50px;
|
|
}
|
|
.vacancies-filter__trigger::after {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.vacancies-filter__link {
|
|
padding-block: 10px;
|
|
}
|
|
.vacancies-list {
|
|
row-gap: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
.vacancies-subtitle span {
|
|
font-size: 12px;
|
|
}
|
|
.vacancies-item__header {
|
|
padding: 20px 70px 20px 20px;
|
|
}
|
|
.vacancies-item__header::after {
|
|
width: 30px;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.vacancies-item__descr {
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
}
|
|
.vacancies-item__city {
|
|
margin-top: 10px;
|
|
}
|
|
.vacancies-item__content {
|
|
padding: 20px;
|
|
}
|
|
.vacancies-item__respond {
|
|
padding: 5px 20px 25px;
|
|
}
|
|
.vacancies-showmore {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
.feedback {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.feedback-body {
|
|
padding-top: clamp(25px, 10.4972px + 3.8674vw, 60px);
|
|
padding-bottom: clamp(30px, 13.4254px + 4.4199vw, 70px);
|
|
padding-inline: clamp(20px, 1.3536px + 4.9724vw, 65px);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--gradient-grey);
|
|
}
|
|
.feedback-descr {
|
|
margin-top: 25px;
|
|
line-height: 1.3;
|
|
}
|
|
.feedback-form__inputs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
margin-top: 40px;
|
|
}
|
|
.feedback-form__file {
|
|
margin-top: 20px;
|
|
}
|
|
.feedback-form__submit {
|
|
margin-top: 40px;
|
|
}
|
|
.feedback-form__submit-btn {
|
|
max-width: 312px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.feedback-descr {
|
|
margin-top: 20px;
|
|
}
|
|
.feedback-form__inputs {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 8px;
|
|
margin-top: 30px;
|
|
}
|
|
.feedback-form__submit-btn {
|
|
max-width: unset;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.feedback-descr {
|
|
margin-top: 12px;
|
|
}
|
|
.feedback-form__inputs {
|
|
margin-top: 20px;
|
|
}
|
|
.feedback-form__file {
|
|
margin-top: 15px;
|
|
}
|
|
.feedback-form__submit {
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
.info {
|
|
margin-top: var(--space-section);
|
|
}
|
|
.info-title {
|
|
font-size: var(--fs-h2-sm);
|
|
}
|
|
.info-body {
|
|
padding-top: clamp(25px, 14.6409px + 2.7624vw, 50px);
|
|
padding-bottom: clamp(25px, 10.4972px + 3.8674vw, 60px);
|
|
padding-inline: clamp(20px, 7.5691px + 3.3149vw, 50px);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid #ededed;
|
|
}
|
|
.info-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: clamp(20px, 7.5691px + 3.3149vw, 50px);
|
|
row-gap: clamp(20px, 13.7845px + 1.6575vw, 35px);
|
|
margin-top: clamp(20px, 13.7845px + 1.6575vw, 35px);
|
|
}
|
|
.info-content__row {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.info-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
.error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 260px 0 100px;
|
|
flex: 1;
|
|
}
|
|
.error-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.error-title {
|
|
font-size: clamp(80px, 67.5691px + 3.3149vw, 110px);
|
|
}
|
|
.error-gohome {
|
|
margin-top: clamp(20px, 11.7127px + 2.2099vw, 40px);
|
|
}
|
|
.error-gohome__btn {
|
|
width: clamp(180px, 155.1381px + 6.6298vw, 240px);
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.error {
|
|
margin-top: clamp(160px, 126.8508px + 8.8398vw, 240px);
|
|
}
|
|
}
|
|
.cookie-consent {
|
|
--offset: 40px;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
opacity: 0;
|
|
bottom: var(--offset);
|
|
transform: translateY(calc(100% + var(--offset)));
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.cookie-consent.is-active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
.cookie-consent__dialog {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: auto 1fr auto;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
column-gap: 20px;
|
|
padding: 20px;
|
|
border-radius: var(--radius-sm);
|
|
background-color: var(--color-grey);
|
|
}
|
|
.cookie-consent__dialog::before {
|
|
content: "";
|
|
display: block;
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
background: var(--icon-cookie) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.cookie-consent__info {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
color: var(--color-dark);
|
|
}
|
|
.cookie-consent__info a {
|
|
color: var(--color-red);
|
|
transition: color 0.25s ease;
|
|
}
|
|
.cookie-consent__info a:hover {
|
|
color: var(--color-red-dark);
|
|
}
|
|
.cookie-consent__buttons {
|
|
display: flex;
|
|
column-gap: 15px;
|
|
}
|
|
.cookie-consent__buttons .btn {
|
|
height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
.cookie-consent__accept-btn {
|
|
padding: 0 25px;
|
|
}
|
|
.cookie-consent__reject-btn {
|
|
color: var(--color-grey-dark);
|
|
}
|
|
.cookie-consent__reject-btn:hover {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.cookie-consent {
|
|
--offset: 20px;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.cookie-consent__dialog {
|
|
align-items: start;
|
|
grid-template-columns: 1fr auto;
|
|
max-width: unset;
|
|
}
|
|
.cookie-consent__dialog::before {
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
}
|
|
.cookie-consent__info {
|
|
font-size: 12px;
|
|
}
|
|
.cookie-consent__buttons {
|
|
justify-self: start;
|
|
margin-top: 15px;
|
|
}
|
|
.cookie-consent__buttons .btn {
|
|
height: 40px;
|
|
font-size: 14px;
|
|
}
|
|
.cookie-consent__reject-btn {
|
|
order: 2;
|
|
}
|
|
.cookie-consent__accept-btn {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.cookie-consent {
|
|
--offset: 15px;
|
|
}
|
|
.cookie-consent__dialog::before {
|
|
width: 28px;
|
|
}
|
|
.cookie-consent__info {
|
|
font-size: 10px;
|
|
}
|
|
.cookie-consent__buttons .btn {
|
|
height: 30px;
|
|
font-size: 12px;
|
|
}
|
|
.cookie-consent__accept-btn {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
.specs {
|
|
margin-top: var(--space-section);
|
|
scroll-margin-top: 140px;
|
|
}
|
|
.specs-body {
|
|
display: grid;
|
|
grid-template-columns: 300px 1fr;
|
|
column-gap: clamp(45px, -55px + 9.7656vw, 70px);
|
|
}
|
|
.specs-tabs__list {
|
|
display: grid;
|
|
row-gap: 20px;
|
|
border-right: 1px solid #e8e6e6;
|
|
}
|
|
.specs-tabs__item {
|
|
position: relative;
|
|
padding-right: 30px;
|
|
font-size: 18px;
|
|
line-height: 1.1;
|
|
font-weight: 600;
|
|
color: var(--color-dark);
|
|
cursor: pointer;
|
|
transition: color 0.25s ease;
|
|
}
|
|
.specs-tabs__item::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
right: -1px;
|
|
width: 1px;
|
|
height: 100%;
|
|
opacity: 0;
|
|
background-color: var(--color-red);
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.specs-tabs__item.is-active {
|
|
color: var(--color-red);
|
|
}
|
|
.specs-tabs__item.is-active::after {
|
|
opacity: 1;
|
|
}
|
|
.specs-panel {
|
|
animation: fade-in 0.5s ease both;
|
|
}
|
|
.specs-panel[hidden] {
|
|
display: none;
|
|
}
|
|
.specs-panel__title {
|
|
font-size: var(--fs-title-sm);
|
|
}
|
|
.specs-panel__content {
|
|
margin-top: clamp(20px, 13.7845px + 1.6575vw, 35px);
|
|
}
|
|
.specs-panel__footnotes {
|
|
margin-top: clamp(20px, 13.7845px + 1.6575vw, 35px);
|
|
font-size: 14px;
|
|
}
|
|
.specs-panel__footnotes p {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.specs-panel__footnotes p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.specs-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.specs-tabs {
|
|
display: flex;
|
|
margin-inline: -20px;
|
|
padding-inline: 20px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.specs-tabs::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
.specs-tabs__list {
|
|
grid-auto-flow: column;
|
|
column-gap: 20px;
|
|
border-right: none;
|
|
border-bottom: 1px solid #e8e6e6;
|
|
}
|
|
.specs-tabs__item {
|
|
width: clamp(160px, 125.3313px + 9.245vw, 220px);
|
|
padding: 0 0 20px;
|
|
font-size: 16px;
|
|
}
|
|
.specs-tabs__item::after {
|
|
right: 0;
|
|
top: unset;
|
|
bottom: -1px;
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
.specs-panels {
|
|
margin-top: clamp(25px, 10.5547px + 3.8521vw, 50px);
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.specs-tabs__item {
|
|
font-size: 14px;
|
|
}
|
|
.specs-panel__footnotes {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
.specs-tabs {
|
|
margin-inline: -15px;
|
|
padding-inline: 15px;
|
|
}
|
|
.specs-tabs__list {
|
|
column-gap: 15px;
|
|
}
|
|
.specs-tabs__item {
|
|
padding-bottom: 15px;
|
|
font-size: 12px;
|
|
}
|
|
.specs-panel__footnotes {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
.specs-tabs__item:hover {
|
|
color: var(--color-red);
|
|
}
|
|
}
|
|
|
|
/* новые */
|
|
|
|
|
|
.h-article-hero {
|
|
--h-hero-accent: var(--color-red);
|
|
--h-hero-text: var(--color-dark);
|
|
--h-hero-muted: var(--color-grey-dark);
|
|
--h-hero-line: var(--color-grey);
|
|
--h-hero-bg: var(--color-light);
|
|
--h-hero-radius: 26px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: 1100px;
|
|
color: var(--h-hero-text);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.h-article-hero *,
|
|
.h-article-hero *::before,
|
|
.h-article-hero *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.h-article-hero__container {
|
|
display: grid;
|
|
grid-template-columns: minmax(400px, 500px) minmax(0, 1fr);
|
|
align-items: stretch;
|
|
gap: 64px;
|
|
width: calc(100% - 80px);
|
|
max-width: 1360px;
|
|
}
|
|
|
|
.h-article-hero__picture {
|
|
min-height: 600px;
|
|
overflow: hidden;
|
|
border-radius: var(--h-hero-radius);
|
|
background: var(--color-grey);
|
|
}
|
|
|
|
.h-article-hero__image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 600px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.h-article-hero__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
min-width: 0;
|
|
padding: 5px 0 4px;
|
|
}
|
|
|
|
.h-article-hero .breadcrumbs {
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
.h-article-hero .breadcrumbs > .container {
|
|
width: 100%;
|
|
max-width: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.h-article-hero .breadcrumbs__inner {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.h-article-hero__breadcrumb-divider {
|
|
flex: none;
|
|
color: var(--color-grey-light);
|
|
}
|
|
|
|
.h-article-hero__breadcrumb-current {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: var(--h-hero-text);
|
|
}
|
|
|
|
.h-article-hero__categories {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 19px;
|
|
}
|
|
|
|
.h-article-hero__category {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 29px;
|
|
padding: 5px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--color-red) 17%, transparent);
|
|
border-radius: 100px;
|
|
background: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
|
color: var(--h-hero-accent);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.h-article-hero__title {
|
|
width: 100%;
|
|
margin: 0;
|
|
color: var(--h-hero-text);
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
line-height: 1.12;
|
|
letter-spacing: -.035em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.h-article-hero__title > span {
|
|
background: linear-gradient(
|
|
98deg,
|
|
var(--color-red) 0%,
|
|
var(--color-red-dark) 100%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.h-article-hero__description {
|
|
max-width: 710px;
|
|
margin: 24px 0 34px;
|
|
color: var(--color-text);
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.h-article-hero__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
margin-top: auto;
|
|
padding-top: 25px;
|
|
border-top: 1px solid var(--h-hero-line);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.h-article-hero__meta-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex: none;
|
|
min-height: 31px;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.h-article-hero__meta-item:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.h-article-hero__meta-item + .h-article-hero__meta-item {
|
|
border-left: 1px solid var(--color-grey);
|
|
}
|
|
|
|
.h-article-hero__meta-item svg {
|
|
display: block;
|
|
flex: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
color: var(--h-hero-accent);
|
|
}
|
|
|
|
.h-article-hero__meta-item strong {
|
|
color: var(--h-hero-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.h-article-hero{
|
|
min-width: 100%;
|
|
}
|
|
|
|
.h-article-hero__container{
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.h-article-hero__image,
|
|
.h-article-hero__picture{
|
|
min-width: auto;
|
|
min-height: auto;
|
|
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
.h-article-hero__meta{
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
.h-article-hero__meta-item {
|
|
width: 300px;
|
|
}
|
|
|
|
.h-article-hero__meta-item:first-child {
|
|
padding-left: 20px;;
|
|
}
|
|
|
|
.h-article-hero__meta-item + .h-article-hero__meta-item {
|
|
border-left: none;
|
|
}
|
|
|
|
.h-article-hero__title{
|
|
font-size: 28px;
|
|
}
|
|
.h-article-hero__description{
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.h-attention {
|
|
margin: 24px 0;
|
|
|
|
padding: 32px 40px 32px 32px;
|
|
|
|
display: flex;
|
|
gap: 20px;
|
|
|
|
background: var(--attention-bg);
|
|
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.h-attention--warning {
|
|
--attention-bg: rgba(226, 10, 23, 0.10);
|
|
--attention-icon-bg: rgba(226, 10, 23, 0.10);
|
|
}
|
|
|
|
.h-attention--info {
|
|
--attention-color: #a8740b;
|
|
--attention-bg: #fff8e8;
|
|
--attention-icon-bg: #f9ebc8;
|
|
}
|
|
|
|
.h-attention--success {
|
|
--attention-color: #277547;
|
|
--attention-bg: #eff8f2;
|
|
--attention-icon-bg: #dceee2;
|
|
}
|
|
|
|
.h-attention__icon {
|
|
flex-shrink: 0;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: var(--attention-icon-bg);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.h-attention__content {
|
|
font-size: 20px;
|
|
line-height: 150%; /* 30px */
|
|
letter-spacing: -0.2px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.h-attention{
|
|
padding: 16px 16px 16px 12px;
|
|
|
|
gap: 12px;
|
|
}
|
|
|
|
.h-attention__content{
|
|
font-size: 14px;
|
|
letter-spacing: -0.14px;
|
|
}
|
|
}
|
|
|
|
.h-article-quote {
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
margin: 60px 0;
|
|
|
|
min-height: 216px;
|
|
padding: 40px 40px 40px 240px;
|
|
|
|
border-radius: 40px;
|
|
background: linear-gradient(148deg, #29292D 19.01%, #083743 100.4%)
|
|
}
|
|
.h-article-quote::before{
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: -36px;
|
|
right: 40px;
|
|
|
|
width: 174px;
|
|
height: 128px;
|
|
|
|
background-image: url(../img/bg/arrow-q.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
}
|
|
|
|
.h-article-quote__avatar {
|
|
position: absolute;
|
|
top: -17px;
|
|
left: -38px;
|
|
|
|
max-width: 250px;
|
|
max-height: 250px;
|
|
|
|
width: 250px;
|
|
height: 250px;
|
|
aspect-ratio: 1;
|
|
|
|
border-radius: 50%;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.h-article-quote__body {
|
|
|
|
}
|
|
|
|
.h-article-quote__author {
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
line-height: 110%; /* 28.6px */
|
|
letter-spacing: -0.26px;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.h-article-quote__job{
|
|
margin-top: 8px;
|
|
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 110%; /* 15.4px */
|
|
letter-spacing: -0.14px;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.h-article-quote__text {
|
|
margin-top: 24px;
|
|
|
|
font-size: 20px;
|
|
line-height: 150%; /* 30px */
|
|
letter-spacing: -0.2px;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.h-article-quote{
|
|
min-height: auto;
|
|
|
|
padding: 180px 24px 20px 24px;
|
|
}
|
|
.h-article-quote::before{
|
|
top: 52px;
|
|
right: -22px;
|
|
}
|
|
.h-article-quote__avatar{
|
|
top: -25px;
|
|
left: -20px;
|
|
|
|
width: 189px;
|
|
height: 189px;
|
|
}
|
|
.h-article-quote__author {
|
|
font-size: 16px;
|
|
letter-spacing: -0.16px;
|
|
}
|
|
|
|
.h-article-quote__job{
|
|
margin-top: 6px;
|
|
|
|
font-size: 13px;
|
|
letter-spacing: -0.13px;
|
|
}
|
|
|
|
.h-article-quote__text {
|
|
margin-top: 16px;
|
|
|
|
font-size: 14px;
|
|
letter-spacing: -0.14px;
|
|
}
|
|
}
|
|
|
|
.h-article-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
margin: 60px 0;
|
|
}
|
|
|
|
.h-article-cards__item {
|
|
padding: 31px;
|
|
|
|
border-radius: 20px;
|
|
border: 1px solid #EDEDED;
|
|
background: rgba(255, 255, 255, 0.10);
|
|
}
|
|
.h-article-cards__item:last-child:nth-child(odd) {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.h-article-cards__item p {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
line-height: 150%; /* 30px */
|
|
letter-spacing: -0.2px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.h-article-cards{
|
|
margin: 30px 0;
|
|
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.h-article-cards__item{
|
|
padding: 15px;
|
|
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.h-article-cards__item p {
|
|
font-size: 14px;
|
|
letter-spacing: -0.14px;
|
|
}
|
|
}
|
|
|
|
.h-article-cta {
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
margin: 60px 0;
|
|
|
|
padding: 40px 64px 40px 40px;
|
|
|
|
border-radius: 40px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
.h-article-cta::after{
|
|
content: '';
|
|
|
|
z-index: -10;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: linear-gradient(135deg, #DF2935 0%, #C80E1B 56.25%, #B00012 102.27%);
|
|
}
|
|
.h-article-cta__vec{
|
|
z-index: -4;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 90px;
|
|
|
|
width: 121.215px;
|
|
height: 318.519px;
|
|
|
|
opacity: 0.1;
|
|
filter: blur(10px);
|
|
}
|
|
.h-article-cta__c{
|
|
z-index: -5;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 190px;
|
|
|
|
opacity: 0.1;
|
|
filter: blur(10px);
|
|
}
|
|
.h-article-cta__content{
|
|
max-width: 300px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
.h-article-cta__title{
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
line-height: 110%; /* 33px */
|
|
letter-spacing: -0.3px;
|
|
color: var(--color-white);
|
|
}
|
|
.h-article-cta__description{
|
|
font-size: 20px;
|
|
line-height: 150%; /* 30px */
|
|
letter-spacing: -0.2px;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.h-article-cta__img{
|
|
flex-shrink: 0;
|
|
|
|
margin-bottom: -142px;
|
|
|
|
width: 113px;
|
|
height: 240px;
|
|
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
.h-article-cta__link{
|
|
padding: 20px 24px;
|
|
|
|
border-radius: 60px;
|
|
background: var(--color-white);
|
|
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 120%;
|
|
color: var(--color-dark);
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.h-article-cta__link:hover{
|
|
background: var(--color-dark);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
@media (min-width: 1024px) and (max-width: 1204px) {
|
|
.h-article-cta__img{
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.h-article-cta{
|
|
margin: 30px 0;
|
|
|
|
padding: 24px 26px 32px 24px;
|
|
|
|
border-radius: 20px;
|
|
|
|
gap: 24px;
|
|
}
|
|
.h-article-cta__content{
|
|
gap: 12px;
|
|
}
|
|
.h-article-cta__title{
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 110%; /* 19.8px */
|
|
letter-spacing: -0.18px;
|
|
}
|
|
.h-article-cta__description{
|
|
font-size: 14px;
|
|
line-height: 150%; /* 21px */
|
|
letter-spacing: -0.14px;
|
|
}
|
|
.h-article-cta__c{
|
|
display: none;
|
|
}
|
|
.h-article-cta__vec{
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
.h-article-cta__img{
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: -40px;
|
|
|
|
margin-bottom: 0;
|
|
|
|
width: 30vw;
|
|
height: 146px;
|
|
}
|
|
.h-article-cta__link{
|
|
padding: 14px 18px;
|
|
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.h-article-app-cta{
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
padding: 40px 64px 40px 40px;
|
|
|
|
border-radius: 40px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.h-article-app-cta::before{
|
|
content: '';
|
|
|
|
z-index: -10;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%);
|
|
}
|
|
.h-article-app-cta__content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
.h-article-app-cta__title{
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
line-height: 110%; /* 33px */
|
|
letter-spacing: -0.3px;
|
|
color: var(--color-dark);
|
|
}
|
|
.h-article-app-cta__text{
|
|
max-width: 349px;
|
|
|
|
font-size: 20px;
|
|
line-height: 150%; /* 30px */
|
|
letter-spacing: -0.2px;
|
|
color: var(--color-text);
|
|
}
|
|
.h-article-app-cta__img{
|
|
z-index: -5;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.h-article-app-cta__link{
|
|
padding: 18px 22px;
|
|
|
|
border-radius: 60px;
|
|
background: var(--color-red);
|
|
box-shadow: 20px 24px 44px 0 rgba(217, 217, 217, 0.25);
|
|
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 120%;
|
|
color: var(--color-white);
|
|
|
|
border: 2px solid var(--color-red);
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.h-article-app-cta__link:hover{
|
|
background: var(--color-white);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.h-article-app-cta{
|
|
padding: 24px 26px 40px 24px;
|
|
}
|
|
.h-article-app-cta__content{
|
|
gap: 12px;
|
|
}
|
|
.h-article-app-cta__title{
|
|
font-size: 18px;
|
|
line-height: 110%; /* 19.8px */
|
|
letter-spacing: -0.18px;
|
|
}
|
|
.h-article-app-cta__text{
|
|
max-width: 100%;
|
|
|
|
font-size: 14px;
|
|
line-height: 150%; /* 21px */
|
|
letter-spacing: -0.14px;
|
|
}
|
|
.h-article-app-cta__img{
|
|
z-index: -5;
|
|
position: absolute;
|
|
left: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
#000 60%,
|
|
transparent 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
#000 60%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
.h-article-app-cta__link{
|
|
padding: 14px 18px;
|
|
|
|
border-radius: 60px;
|
|
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
@media (max-width: 670.98px) {
|
|
.h-article-app-cta{
|
|
flex-direction: column;
|
|
align-items: start;
|
|
gap: 24px;
|
|
}
|
|
}
|
|
|
|
.h-article-author {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin: 30px 0;
|
|
padding: 20px 24px;
|
|
border: 1px solid var(--color-grey);
|
|
border-radius: 14px;
|
|
background: var(--color-light);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.h-article-author__text {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: var(--color-grey-dark);
|
|
}
|
|
|
|
.h-article-author__link {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
color: var(--color-red);
|
|
text-decoration: none;
|
|
transition: color .2s ease;
|
|
}
|
|
|
|
.h-article-author__link:hover {
|
|
color: var(--color-red-dark);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.h-app-steps {
|
|
display: grid;
|
|
grid-template-columns: 39.29% 60.71%;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
grid-template-areas: 'one two'
|
|
'one three'
|
|
'one four';
|
|
gap: 20px;
|
|
}
|
|
.h-app-steps__item{
|
|
position: relative;
|
|
|
|
padding: 40px;
|
|
|
|
border-radius: 40px;
|
|
background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%);
|
|
}
|
|
.h-app-steps__item:nth-child(1){
|
|
grid-area: one;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
.h-app-steps__item:nth-child(2){
|
|
grid-area: two;
|
|
}
|
|
.h-app-steps__item:nth-child(3){
|
|
grid-area: three;
|
|
}
|
|
.h-app-steps__item:nth-child(4){
|
|
grid-area: four;
|
|
}
|
|
.h-app-steps__item:not(:first-child){
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.h-app-steps__nomber{
|
|
width: 51px;
|
|
height: 51px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-radius: 100px;
|
|
background: linear-gradient(0deg, #AE001B 0%, #AE001B 100%), linear-gradient(232deg, #771719 18.85%, #A53634 72.03%);
|
|
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 140%; /* 25.2px */
|
|
letter-spacing: -0.18px;
|
|
color: var(--color-white);
|
|
}
|
|
.h-app-steps__main{
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
.h-app-steps__content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.h-app-steps__title{
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
line-height: 110%; /* 28.6px */
|
|
letter-spacing: -0.26px;
|
|
color: var(--color-dark);
|
|
}
|
|
.h-app-steps__title span{
|
|
color: var(--color-red);
|
|
}
|
|
.h-app-steps__text{
|
|
font-size: 18px;
|
|
line-height: 150%;
|
|
color: var(--color-text);
|
|
}
|
|
.h-app-steps__qr{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.h-app-steps__qr-img{
|
|
width: 146px;
|
|
height: 146px;
|
|
}
|
|
.h-app-steps__qr-text{
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 150%;
|
|
color: var(--color-text);
|
|
}
|
|
.h-app-steps__phone{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 242px;
|
|
}
|
|
.h-app-steps__item-img{
|
|
position: absolute;
|
|
|
|
right: 33px;
|
|
top: calc(50% - 77px);
|
|
|
|
width: 218.5px;
|
|
height: 154px;
|
|
|
|
object-fit: contain;
|
|
object-position: center;
|
|
}
|
|
.h-app-steps__item:nth-child(2) .h-app-steps__item-img{
|
|
right: 54px;
|
|
|
|
width: 177px;
|
|
}
|
|
.h-app-steps__item:nth-child(3) .h-app-steps__item-img{
|
|
right: 26px;
|
|
|
|
width: 251px;
|
|
}
|
|
.h-app-steps__social{
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.h-app-steps {
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: repeat(4, auto);
|
|
grid-template-areas: 'one'
|
|
'two'
|
|
'three'
|
|
'four';
|
|
}
|
|
|
|
.h-app-steps__item:nth-child(1){
|
|
padding-bottom: 266px;
|
|
}
|
|
.h-app-steps__phone{
|
|
object-fit: contain;
|
|
}
|
|
|
|
.h-app-steps__item-img{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.h-app-steps__item{
|
|
overflow: hidden;
|
|
|
|
padding: 24px;
|
|
|
|
border-radius: 40px;
|
|
}
|
|
.h-app-steps__item:not(:first-child){
|
|
border-radius: 20px;
|
|
}
|
|
.h-app-steps__item:not(:first-child) .h-app-steps__content{
|
|
gap: 8px;
|
|
}
|
|
.h-app-steps__nomber{
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
font-size: 12px;
|
|
line-height: 140%; /* 16.8px */
|
|
letter-spacing: -0.12px;
|
|
}
|
|
.h-app-steps__content{
|
|
gap: 14px;
|
|
}
|
|
.h-app-steps__title{
|
|
font-size: 16px;
|
|
line-height: 110%; /* 17.6px */
|
|
letter-spacing: -0.16px;
|
|
}
|
|
.h-app-steps__text{
|
|
font-size: 13px;
|
|
line-height: 150%;
|
|
}
|
|
.h-app-steps__qr{
|
|
display: none;
|
|
}
|
|
.h-app-steps__social{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.h-app-steps__social a{
|
|
width: calc(50% - 6px);
|
|
height: 44px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(174, 0, 27, 0.50);
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.h-app-steps__social a span{
|
|
transition: all .2s ease-out;
|
|
}
|
|
|
|
.h-app-steps__social a:hover{
|
|
background: var(--color-red);
|
|
border-color: var(--color-red);
|
|
}
|
|
.h-app-steps__social a:hover span{
|
|
filter: grayscale(100%) brightness(1.5);
|
|
}
|
|
.h-app-steps__phone{
|
|
object-fit: cover;
|
|
}
|
|
.h-app-steps__main{
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.article-social{
|
|
margin-top: 24px;
|
|
|
|
padding: 23px;
|
|
|
|
border-radius: 30px;
|
|
border: 1px solid #EDEDED;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
.article-social__title{
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
line-height: 110%; /* 28.6px */
|
|
letter-spacing: -0.26px;
|
|
color: var(--color-dark);
|
|
}
|
|
.article-social__title span{
|
|
color: var(--color-red);
|
|
}
|
|
.article-social__text{
|
|
font-size: 18px;
|
|
line-height: 150%; /* 27px */
|
|
letter-spacing: -0.18px;
|
|
color: var(--color-text);
|
|
}
|
|
.article-social__list{
|
|
padding: 6px;
|
|
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%), #F0F0F0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.article-social__list span{
|
|
width: 100%;
|
|
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 150%; /* 24px */
|
|
letter-spacing: -0.16px;
|
|
color: var(--color-text);
|
|
}
|
|
.article-social__list a {
|
|
flex-shrink: 0;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
transition: all .2s ease-out;
|
|
}
|
|
.article-social__list a:hover{
|
|
opacity: .8;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.article-social{
|
|
border-radius: 20px;
|
|
|
|
gap: 12px;
|
|
}
|
|
|
|
.article-social__title{
|
|
font-size: 16px;
|
|
line-height: 110%; /* 17.6px */
|
|
letter-spacing: -0.16px;
|
|
}
|
|
.article-social__text{
|
|
font-size: 13px;
|
|
line-height: 150%; /* 19.5px */
|
|
letter-spacing: -0.13px;
|
|
}
|
|
.article-social__list span{
|
|
font-size: 13px;
|
|
line-height: 150%; /* 19.5px */
|
|
letter-spacing: -0.13px;
|
|
}
|
|
}
|
|
|
|
.blog-links{
|
|
margin-top: 20px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.blog-links .btn--transp-red.active{
|
|
background: var(--color-red);
|
|
color: var(--color-light);
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.blog-links{
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.blog-header__action{
|
|
margin-top: 20px;
|
|
|
|
display: flex;
|
|
}
|
|
/* Article intro adapted from the supplied layout. */
|
|
.article-intro,
|
|
.article-intro * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.article-intro {
|
|
--article-background: #f6f6f6;
|
|
--article-heading: #1b2d34;
|
|
--article-text: #5e5e5e;
|
|
--article-muted: #9e9e9e;
|
|
--article-icon: #d9dadd;
|
|
margin-top: 130px;
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 16px 40px 24px;
|
|
border-radius: 40px;
|
|
background: var(--article-background);
|
|
color: var(--article-text);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.article-intro__topline,
|
|
.article-intro__author,
|
|
.article-intro__stats,
|
|
.article-intro__stat,
|
|
.article-intro__meta,
|
|
.article-intro__meta > span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.article-intro__topline {
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.article-intro__author,
|
|
.article-intro__stat,
|
|
.article-intro__meta > span {
|
|
gap: 8px;
|
|
}
|
|
|
|
.article-intro__icon {
|
|
display: block;
|
|
flex: 0 0 20px;
|
|
color: var(--article-icon);
|
|
}
|
|
|
|
.article-intro__stats {
|
|
gap: 28px;
|
|
}
|
|
|
|
.article-intro__hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 524fr) minmax(0, 656fr);
|
|
column-gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.article-intro__image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 131 / 85;
|
|
border-radius: 20px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.article-intro__heading {
|
|
min-width: 0;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs {
|
|
margin-bottom: 12px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--article-muted);
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item + .breadcrumbs__item::before {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-top: 1px solid #c9c9c9;
|
|
border-right: 1px solid #c9c9c9;
|
|
content: "";
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item.is-active {
|
|
color: var(--article-text);
|
|
}
|
|
|
|
.article-intro__tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 0 0 16px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.article-intro__tags li {
|
|
padding: 4px 10px;
|
|
border-radius: 8px;
|
|
background: var(--color-white);
|
|
color: #888;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.article-intro__title {
|
|
margin: 0;
|
|
color: var(--article-heading);
|
|
font-size: clamp(36px, 4.1vw, 56px);
|
|
font-weight: 700;
|
|
line-height: 1.107142857;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.article-intro__meta {
|
|
flex-wrap: wrap;
|
|
gap: 12px 32px;
|
|
margin-top: 40px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.article-intro__summary {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.article-intro__summary h2 {
|
|
margin: 0 0 16px;
|
|
color: var(--article-heading);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.article-intro__summary p {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.article-intro__credit {
|
|
margin-top: 16px;
|
|
text-align: right;
|
|
}
|
|
|
|
.article-intro__credit a {
|
|
color: inherit;
|
|
text-decoration-line: underline;
|
|
text-decoration-style: dotted;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.article-intro__credit a:hover {
|
|
color: var(--article-heading);
|
|
}
|
|
|
|
.article-intro__credit a:focus-visible {
|
|
border-radius: 2px;
|
|
outline: 2px solid var(--article-heading);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.article-intro__breadcrumb{
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.article-intro__tags{
|
|
gap: 6px;
|
|
}
|
|
.article-intro__tags li{
|
|
background: none;
|
|
}
|
|
|
|
.article-intro__breadcrumb{
|
|
display: block;
|
|
}
|
|
.article-intro__heading .breadcrumbs{
|
|
display: none;
|
|
}
|
|
.article-intro {
|
|
margin-top: 20px;
|
|
|
|
padding-right: 32px;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.article-intro__meta {
|
|
gap: 12px 24px;
|
|
margin-top: 24px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* На планшете заголовок и метаданные располагаются над фотографией. */
|
|
@media (max-width: 1023px) {
|
|
|
|
.article-intro {
|
|
padding: 20px 24px 24px;
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.article-intro__hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.article-intro__heading {
|
|
order: -1;
|
|
width: 100%;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.article-intro .breadcrumbs {
|
|
position: static;
|
|
margin: 0 0 12px;
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__list,
|
|
.article-intro .breadcrumbs__item {
|
|
gap: 6px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item.is-active {
|
|
display: block;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item.is-active::before {
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
vertical-align: 1px;
|
|
}
|
|
|
|
.article-intro__title {
|
|
font-size: clamp(28px, 4.5vw, 44px);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.article-intro__image {
|
|
max-height: 420px;
|
|
aspect-ratio: 77 / 50;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.article-intro__credit {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* Мобильный макет: Figma, узел 1:2011. */
|
|
@media (max-width: 600px) {
|
|
|
|
.article-intro {
|
|
padding: 12px 16px 16px;
|
|
border-radius: 24px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.article-intro__author,
|
|
.article-intro__stat,
|
|
.article-intro__meta > span {
|
|
gap: 4px;
|
|
}
|
|
|
|
.article-intro__icon {
|
|
flex-basis: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.article-intro__topline {
|
|
gap: 8px;
|
|
}
|
|
|
|
.article-intro__author {
|
|
min-width: 0;
|
|
}
|
|
|
|
.article-intro__stats {
|
|
flex-shrink: 0;
|
|
gap: 16px;
|
|
}
|
|
|
|
.article-intro__hero {
|
|
gap: 12px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs {
|
|
font-size: 8px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__list,
|
|
.article-intro .breadcrumbs__item {
|
|
gap: 4px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item + .breadcrumbs__item::before {
|
|
width: 3px;
|
|
height: 3px;
|
|
}
|
|
|
|
.article-intro .breadcrumbs__item.is-active::before {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.article-intro__tags {
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.article-intro__tags li {
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.article-intro__title {
|
|
font-size: 26px;
|
|
line-height: 28px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.article-intro__title-ending {
|
|
display: block;
|
|
}
|
|
|
|
.article-intro__meta {
|
|
gap: 8px 24px;
|
|
margin-top: 28px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.article-intro__image {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.article-intro__summary {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.article-intro__summary h2 {
|
|
margin-bottom: 12px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.article-intro__summary p {
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.article-intro__credit {
|
|
margin-top: 12px;
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
}
|
|
}
|
|
|
|
.article-intro .breadcrumbs {
|
|
width: 100%;
|
|
margin: 0 0 12px;
|
|
}
|
|
.article-intro .breadcrumbs > .container {
|
|
width: 100%;
|
|
max-width: none;
|
|
padding: 0;
|
|
}
|
|
.article-intro .breadcrumbs__inner { margin: 0; padding: 0; }
|
|
.article-intro .breadcrumbs__item { font-size: inherit; line-height: inherit; }
|
|
.article-intro .breadcrumbs__item::after { display: none; }
|
|
.article-intro .breadcrumbs__link { padding: 0; white-space: normal; }
|
|
.article-intro .breadcrumbs__item.is-active .breadcrumbs__link { color: var(--article-text); }
|
|
.article-intro .breadcrumbs__list {
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.article-intro .breadcrumbs__item {
|
|
flex-shrink: 0;
|
|
}
|
|
.article-intro .breadcrumbs__item.is-active {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
.article-intro .breadcrumbs__item + .breadcrumbs__item::before {
|
|
flex-shrink: 0;
|
|
}
|
|
.article-intro .breadcrumbs__item.is-active .breadcrumbs__link {
|
|
display: block;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.courier-services {
|
|
--services-heading: #172d38;
|
|
--services-text: #595757;
|
|
--services-accent: #ae001b;
|
|
--services-card: #f5f5f9;
|
|
--logo-size: 70px;
|
|
box-sizing: border-box;
|
|
width: min(1280px, calc(100% - 80px));
|
|
margin: 0 auto;
|
|
padding: 120px 0 40px;
|
|
color: var(--services-heading);
|
|
font-family: "Onest", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.courier-services *,
|
|
.courier-services *::before,
|
|
.courier-services *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.courier-services__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.courier-services__title {
|
|
margin: 0;
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.courier-services__description {
|
|
margin: 0;
|
|
color: var(--services-text);
|
|
font-size: 20px;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.courier-services__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.courier-services__navigation {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px 20px;
|
|
}
|
|
|
|
.courier-services__navigation-title {
|
|
margin: 0;
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.courier-services__topics {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.courier-services__topic {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
background: #f6f6f6;
|
|
color: #798079;
|
|
font: 600 20px / 1.3 "Onest", sans-serif;
|
|
letter-spacing: -0.01em;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.courier-services__topic:hover {
|
|
color: var(--services-accent);
|
|
background: #fff0f2;
|
|
}
|
|
|
|
.courier-services__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.courier-services__card {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
padding: 24px 32px;
|
|
border-radius: 20px;
|
|
background: var(--services-card);
|
|
box-shadow: inset 0 0 0 1px #ededed;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.courier-services__card:hover,
|
|
.courier-services__card:active {
|
|
box-shadow: inset 0 0 0 1px rgb(174 0 27 / 20%);
|
|
}
|
|
|
|
.courier-services__name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.courier-services__logo {
|
|
position: relative;
|
|
display: block;
|
|
flex: 0 0 var(--logo-size);
|
|
width: var(--logo-size);
|
|
height: var(--logo-size);
|
|
transition: transform 0.25s ease;
|
|
}
|
|
|
|
.courier-services__card:is(:hover, :focus-visible) .courier-services__logo {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.courier-services__logo {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
|
|
.courier-services picture,
|
|
.courier-services picture img {
|
|
display: block;
|
|
}
|
|
|
|
.courier-services__logo > img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.courier-services__logo--samokat {
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
background: #ff335f;
|
|
}
|
|
|
|
.courier-services__samokat-symbol {
|
|
position: absolute;
|
|
top: 22.857143%;
|
|
left: calc(50% - 0.5px);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.courier-services__logo--eda {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.courier-services__eda-clip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0.101429%;
|
|
width: 99.898571%;
|
|
height: 100%;
|
|
mask: url("../img/aggregators/desktop-eda-mask.svg") 0 0 / 100% 100% no-repeat;
|
|
}
|
|
|
|
.courier-services__eda-symbol {
|
|
position: absolute;
|
|
top: 6.5%;
|
|
left: -3.5%;
|
|
width: 87.5%;
|
|
height: 87.5%;
|
|
mask: url("../img/aggregators/desktop-eda-symbol-mask.svg") 0 0 / 100% 100% no-repeat;
|
|
}
|
|
|
|
.courier-services__lavka-clip {
|
|
position: absolute;
|
|
top: 0.04%;
|
|
left: 0.05%;
|
|
width: 100%;
|
|
height: 100%;
|
|
mask: url("../img/aggregators/desktop-lavka-mask.svg") 0 0 / 100% 100% no-repeat;
|
|
}
|
|
|
|
.courier-services__arrow {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 21px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 51px;
|
|
height: 51px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
color: var(--services-accent);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.courier-services__arrow svg {
|
|
display: block;
|
|
width: 25%;
|
|
height: 25%;
|
|
}
|
|
|
|
.courier-services__card:is(:hover, :active, :focus-visible) .courier-services__arrow {
|
|
background: var(--services-accent);
|
|
color: #fff;
|
|
}
|
|
|
|
.courier-services :is(a, button):focus-visible {
|
|
outline: 2px solid var(--services-accent);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.courier-services__title {
|
|
font-size: 44px;
|
|
}
|
|
|
|
.courier-services__grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.courier-services__navigation-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.courier-services__topic {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 899px) {
|
|
.courier-services {
|
|
width: calc(100% - 48px);
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.courier-services__title {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.courier-services__header {
|
|
gap: 24px;
|
|
}
|
|
|
|
.courier-services__description {
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.courier-services__content {
|
|
margin-top: 40px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.courier-services__grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.courier-services__navigation {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.courier-services {
|
|
--logo-size: 32px;
|
|
width: calc(100% - 40px);
|
|
padding: 60px 0 40px;
|
|
}
|
|
|
|
.courier-services__header {
|
|
gap: 14px;
|
|
}
|
|
|
|
.courier-services__title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.courier-services__description {
|
|
font-size: 14px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.courier-services__content {
|
|
gap: 14px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.courier-services__navigation {
|
|
gap: 8px;
|
|
}
|
|
|
|
.courier-services__navigation-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.courier-services__topics {
|
|
gap: 12px;
|
|
}
|
|
|
|
.courier-services__topic {
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.courier-services__grid {
|
|
gap: 9px;
|
|
}
|
|
|
|
.courier-services__card {
|
|
gap: 16px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.courier-services__name {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.courier-services__arrow {
|
|
top: 11px;
|
|
right: 13px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.courier-services__eda-clip {
|
|
mask-image: url("../img/aggregators/mobile-eda-mask.svg");
|
|
}
|
|
|
|
.courier-services__eda-symbol {
|
|
mask-image: url("../img/aggregators/mobile-eda-symbol-mask.svg");
|
|
}
|
|
|
|
.courier-services__lavka-clip {
|
|
mask-image: url("../img/aggregators/mobile-lavka-mask.svg");
|
|
}
|
|
}
|
|
|
|
@media (max-width: 359px) {
|
|
.courier-services__topics {
|
|
gap: 6px;
|
|
}
|
|
|
|
.courier-services__topic {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.courier-services__card {
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
.delivery-orders {
|
|
--orders-heading: #172d38;
|
|
--orders-text: #595757;
|
|
--orders-accent: #ae001b;
|
|
box-sizing: border-box;
|
|
width: min(1280px, calc(100% - 40px));
|
|
margin: var(--space-section) auto 0;
|
|
color: var(--orders-heading);
|
|
font-family: "Onest", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.delivery-orders *,
|
|
.delivery-orders *::before,
|
|
.delivery-orders *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.delivery-orders__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.delivery-orders__title {
|
|
margin: 0;
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
line-height: 62px;
|
|
letter-spacing: -0.56px;
|
|
}
|
|
|
|
.delivery-orders__description {
|
|
margin: 0;
|
|
color: var(--orders-text);
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.delivery-orders__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-template-rows: 396px 285px;
|
|
grid-auto-rows: 396px;
|
|
gap: 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.delivery-orders__wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.delivery-orders__card {
|
|
--blur-start: 229px;
|
|
--blur-end: 462px;
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 40px;
|
|
background: linear-gradient(#f5f5f9, #f9f9f9);
|
|
color: #fff;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.delivery-orders__card::after {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
background: rgb(174 0 27 / 50%);
|
|
content: "";
|
|
opacity: 0;
|
|
transition: opacity 180ms ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.delivery-orders__image {
|
|
position: absolute;
|
|
display: block;
|
|
max-width: none;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.delivery-orders__image--cover {
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.delivery-orders__card:not(a) {
|
|
cursor: default;
|
|
}
|
|
|
|
.delivery-orders__image--food {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 537px;
|
|
height: 732px;
|
|
}
|
|
|
|
.delivery-orders__image--groceries-backdrop {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 414px;
|
|
height: 421px;
|
|
}
|
|
|
|
.delivery-orders__image--groceries {
|
|
top: 0;
|
|
left: -118px;
|
|
width: 710px;
|
|
height: 396px;
|
|
}
|
|
|
|
.delivery-orders__image--parcels {
|
|
bottom: 0;
|
|
left: -403px;
|
|
width: 1409px;
|
|
height: 786px;
|
|
}
|
|
|
|
.delivery-orders__image--documents {
|
|
bottom: -229px;
|
|
left: -11px;
|
|
width: 1296px;
|
|
height: 723px;
|
|
}
|
|
|
|
.delivery-orders__blur,
|
|
.delivery-orders__blur > span {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.delivery-orders__blur > span {
|
|
--blur-step: calc((var(--blur-end) - var(--blur-start)) / 4);
|
|
-webkit-backdrop-filter: blur(var(--blur-radius));
|
|
backdrop-filter: blur(var(--blur-radius));
|
|
mask-image: linear-gradient(
|
|
transparent calc(var(--blur-start) + var(--blur-step) * var(--blur-index)),
|
|
#000 calc(var(--blur-start) + var(--blur-step) * (var(--blur-index) + 1))
|
|
);
|
|
}
|
|
|
|
.delivery-orders__blur > span:nth-child(1) {
|
|
--blur-index: 0;
|
|
--blur-radius: 1.8px;
|
|
}
|
|
|
|
.delivery-orders__blur > span:nth-child(2) {
|
|
--blur-index: 1;
|
|
--blur-radius: 3.6px;
|
|
}
|
|
|
|
.delivery-orders__blur > span:nth-child(3) {
|
|
--blur-index: 2;
|
|
--blur-radius: 5.4px;
|
|
}
|
|
|
|
.delivery-orders__blur > span:nth-child(4) {
|
|
--blur-index: 3;
|
|
--blur-radius: 7.2px;
|
|
}
|
|
|
|
.delivery-orders__card--groceries {
|
|
--blur-start: 233px;
|
|
--blur-end: 423px;
|
|
}
|
|
|
|
.delivery-orders__card--parcels {
|
|
--blur-start: 236px;
|
|
--blur-end: 428px;
|
|
}
|
|
|
|
.delivery-orders__card--documents {
|
|
--blur-start: 151px;
|
|
--blur-end: 364px;
|
|
}
|
|
|
|
.delivery-orders__shade {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 163px;
|
|
background: linear-gradient(transparent, #000);
|
|
opacity: 0.9;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.delivery-orders__card--groceries .delivery-orders__shade {
|
|
height: 187px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.delivery-orders__card--documents .delivery-orders__shade {
|
|
height: 138px;
|
|
}
|
|
|
|
.delivery-orders__copy {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 95px;
|
|
bottom: 32px;
|
|
left: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.delivery-orders__card-title {
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
line-height: 29px;
|
|
letter-spacing: -0.26px;
|
|
}
|
|
|
|
.delivery-orders__card-description {
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.delivery-orders__card--groceries .delivery-orders__copy {
|
|
right: 40px;
|
|
}
|
|
|
|
.delivery-orders__card--groceries .delivery-orders__card-description {
|
|
width: 213px;
|
|
}
|
|
|
|
.delivery-orders__card--parcels .delivery-orders__copy {
|
|
right: 50px;
|
|
}
|
|
|
|
.delivery-orders__card--documents .delivery-orders__copy {
|
|
right: 103px;
|
|
}
|
|
|
|
.delivery-orders__arrow {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 32px;
|
|
right: 32px;
|
|
width: 51px;
|
|
height: 51px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.delivery-orders__card--documents .delivery-orders__arrow {
|
|
right: 33px;
|
|
}
|
|
|
|
.delivery-orders__arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
color: var(--orders-accent);
|
|
transition: color 180ms ease, background-color 180ms ease;
|
|
}
|
|
|
|
.delivery-orders__arrow svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.delivery-orders__card:is(:hover, :focus-visible, :active)::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.delivery-orders__card:is(:hover, :focus-visible, :active) .delivery-orders__arrow {
|
|
background: var(--orders-accent);
|
|
color: #fff;
|
|
}
|
|
|
|
.delivery-orders__card:focus-visible {
|
|
outline: 3px solid var(--orders-accent);
|
|
outline-offset: 5px;
|
|
}
|
|
|
|
@media (max-width: 1023.98px) {
|
|
.delivery-orders__title {
|
|
font-size: 40px;
|
|
line-height: 1.1;
|
|
}
|
|
.delivery-orders__slider {
|
|
overflow: visible;
|
|
}
|
|
.delivery-orders__grid {
|
|
display: flex;
|
|
gap: 0;
|
|
grid-template-rows: none;
|
|
}
|
|
.delivery-orders__grid > li {
|
|
flex-shrink: 0;
|
|
width: 340px;
|
|
height: 300px;
|
|
}
|
|
.delivery-orders__card {
|
|
--blur-start: 120px;
|
|
--blur-end: 300px;
|
|
border-radius: 24px;
|
|
}
|
|
.delivery-orders__card-title {
|
|
font-size: 22px;
|
|
line-height: 1.15;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.delivery-orders__card-description {
|
|
font-size: 16px;
|
|
line-height: 1.4;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.delivery-orders__grid.is-grid {
|
|
gap: 20px;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
.delivery-orders__grid.is-grid > li {
|
|
scroll-snap-align: start;
|
|
}
|
|
.delivery-orders__wide {
|
|
grid-column: auto;
|
|
}
|
|
.delivery-orders__copy,
|
|
.delivery-orders__card--groceries .delivery-orders__copy,
|
|
.delivery-orders__card--parcels .delivery-orders__copy,
|
|
.delivery-orders__card--documents .delivery-orders__copy {
|
|
left: 24px;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.delivery-orders {
|
|
width: calc(100% - 40px);
|
|
}
|
|
.delivery-orders__header {
|
|
gap: 14px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.delivery-orders__title {
|
|
font-size: 24px;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.24px;
|
|
}
|
|
.delivery-orders__description {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
letter-spacing: -0.14px;
|
|
}
|
|
.delivery-orders__slider {
|
|
overflow: visible;
|
|
}
|
|
.delivery-orders__grid {
|
|
display: flex;
|
|
gap: 0;
|
|
}
|
|
.delivery-orders__grid > li {
|
|
flex-shrink: 0;
|
|
width: 278px;
|
|
height: 218px;
|
|
}
|
|
.delivery-orders__card {
|
|
--blur-start: 90px;
|
|
--blur-end: 218px;
|
|
border-radius: 20px;
|
|
}
|
|
.delivery-orders__grid.is-grid {
|
|
gap: 10px;
|
|
}
|
|
.delivery-orders__copy {
|
|
gap: 8px;
|
|
}
|
|
.delivery-orders__card-title {
|
|
font-size: 16px;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.16px;
|
|
}
|
|
.delivery-orders__card-description {
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
letter-spacing: -0.14px;
|
|
}
|
|
.delivery-orders__shade {
|
|
height: 126px;
|
|
}
|
|
.delivery-orders__arrow,
|
|
.delivery-orders__card--documents .delivery-orders__arrow {
|
|
top: 12px;
|
|
right: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--orders-accent);
|
|
color: #fff;
|
|
}
|
|
.delivery-orders__arrow svg {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.delivery-orders__card::after,
|
|
.delivery-orders__arrow {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.work-formats {
|
|
--formats-heading: #172d38;
|
|
--formats-text: #595757;
|
|
--formats-border: #ededed;
|
|
--formats-accent: #ae001b;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: min(1280px, calc(100% - 80px));
|
|
margin: var(--space-section) auto 0;
|
|
flex-direction: column;
|
|
gap: 60px;
|
|
color: var(--formats-heading);
|
|
font-family: "Onest", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.work-formats *,
|
|
.work-formats *::before,
|
|
.work-formats *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.work-formats__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.work-formats__title {
|
|
width: 964px;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
line-height: 62px;
|
|
letter-spacing: -0.56px;
|
|
}
|
|
|
|
.work-formats__description {
|
|
width: 100%;
|
|
margin: 0;
|
|
color: var(--formats-text);
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 22px;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.work-formats__groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
|
|
.work-formats__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.work-formats__group-title {
|
|
margin: 0;
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
line-height: 29px;
|
|
letter-spacing: -0.26px;
|
|
text-align: center;
|
|
}
|
|
|
|
.work-formats__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.work-formats__links > li {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.work-formats__link {
|
|
display: flex;
|
|
width: auto;
|
|
max-width: 100%;
|
|
min-height: 54px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 16px 16px 24px;
|
|
border-radius: 100px;
|
|
box-shadow: inset 0 0 0 1px var(--formats-border);
|
|
color: inherit;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
letter-spacing: -0.18px;
|
|
text-decoration: none;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.work-formats__link:is(:hover, :focus-visible) {
|
|
background: #f5f5f9;
|
|
color: var(--formats-accent);
|
|
}
|
|
|
|
.work-formats__link:focus-visible {
|
|
outline: 2px solid var(--formats-accent);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.work-formats__arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 22px;
|
|
width: 22px;
|
|
height: 22px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.work-formats__arrow svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.work-formats__link {
|
|
transition: color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.work-formats__link,
|
|
.work-formats__arrow {
|
|
transition: none;
|
|
}
|
|
.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 1199px) {
|
|
.work-formats__title {
|
|
font-size: 44px;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 899px) {
|
|
.work-formats {
|
|
width: calc(100% - 48px);
|
|
gap: 40px;
|
|
}
|
|
|
|
.work-formats__header {
|
|
gap: 24px;
|
|
}
|
|
|
|
.work-formats__title {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.work-formats {
|
|
width: calc(100% - 40px);
|
|
gap: 30px;
|
|
}
|
|
|
|
.work-formats__header {
|
|
gap: 14px;
|
|
}
|
|
|
|
.work-formats__title {
|
|
font-size: 24px;
|
|
line-height: 26px;
|
|
letter-spacing: -0.24px;
|
|
}
|
|
|
|
.work-formats__description {
|
|
font-size: 14px;
|
|
line-height: 15px;
|
|
letter-spacing: -0.14px;
|
|
}
|
|
|
|
.work-formats__groups {
|
|
gap: 30px;
|
|
}
|
|
|
|
.work-formats__group {
|
|
gap: 16px;
|
|
}
|
|
|
|
.work-formats__group-title {
|
|
font-size: 16px;
|
|
line-height: 18px;
|
|
letter-spacing: -0.16px;
|
|
}
|
|
|
|
.work-formats__links {
|
|
gap: 4px;
|
|
}
|
|
|
|
.work-formats__link {
|
|
min-height: 36px;
|
|
gap: 4px;
|
|
padding: 11px 11px 11px 16px;
|
|
font-size: 13px;
|
|
line-height: 14px;
|
|
letter-spacing: -0.13px;
|
|
}
|
|
|
|
.work-formats__arrow {
|
|
flex-basis: 14px;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
|
|
|
|
}
|