/* ========================================================= SNT V5.10 — reference-locked glass UI Loaded LAST. This file intentionally normalizes legacy rules. Reference: approved responsive collage 2026-09-30. ========================================================= */ :root{ --snt-cyan:#23f0df; --snt-cyan-soft:rgba(94,255,239,.72); --snt-cyan-line:rgba(151,255,245,.62); --snt-white:#fff; --snt-muted:rgba(255,255,255,.72); --snt-glass:rgba(7,79,76,.40); --snt-glass-2:rgba(8,64,69,.34); --snt-glass-light:rgba(135,255,235,.075); --snt-shadow:0 18px 48px rgba(0,15,20,.25), inset 0 1px 0 rgba(255,255,255,.10); --snt-radius:20px; --v5-drawer-w:260px!important; --v5-drawer-offset:286px!important; } html,body{min-height:100%;} body.v5-shell-active, body.auth-mode{ color:#fff!important; background:#06333a!important; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important; } body.v5-shell-active::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background:url('/assets/snt-reference-day.webp') center center/cover no-repeat; filter:none; transform:scale(1.01); } body.v5-shell-active::after{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(180deg,rgba(0,44,52,.03),rgba(0,35,39,.06)); } /* ---------- shared headline ---------- */ .v5-site-brand{ position:relative!important; z-index:6!important; width:min(620px,calc(100% - 32px))!important; height:auto!important; min-height:116px!important; margin:16px auto 10px!important; padding:10px 18px 8px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; color:#fff!important; text-align:center!important; text-shadow:0 2px 14px rgba(0,22,32,.52)!important; background:none!important; border:0!important; box-shadow:none!important; } .v5-site-brand h1{ margin:0!important; font:850 34px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important; letter-spacing:-.045em!important; white-space:nowrap!important; color:#fff!important; } .v5-site-brand-divider{ width:min(290px,72%)!important; display:grid!important; grid-template-columns:1fr 32px 1fr!important; align-items:center!important; gap:9px!important; margin:12px auto 2px!important; color:var(--snt-cyan)!important; } .v5-site-brand-divider span{height:2px!important;background:var(--snt-cyan)!important;border-radius:5px!important;box-shadow:0 0 8px rgba(35,240,223,.22)!important} .v5-site-brand-divider .v5-leaf-svg{display:block!important;width:29px!important;height:25px!important;margin:auto!important} .v5-site-brand-subtitle{font:500 15px/1 system-ui!important;letter-spacing:.24em!important;color:#fff!important;white-space:nowrap!important;margin-top:4px!important} /* ---------- glass menu ---------- */ .v5-drawer{ position:fixed!important; left:18px!important; top:18px!important; bottom:18px!important; width:min(var(--v5-drawer-w),calc(100vw - 36px))!important; padding:16px 14px 14px!important; display:flex!important; flex-direction:column!important; overflow:auto!important; color:#fff!important; border:1.35px solid var(--snt-cyan-soft)!important; border-radius:20px!important; background:linear-gradient(145deg,rgba(12,104,95,.28),rgba(6,63,67,.21))!important; backdrop-filter:blur(14px) saturate(122%)!important; -webkit-backdrop-filter:blur(14px) saturate(122%)!important; box-shadow:var(--snt-shadow)!important; } .v5-drawer::before,.v5-drawer::after{display:none!important} .v5-drawer-corner{display:none!important} .v5-drawer-header{position:relative!important;padding:3px 5px 12px!important;border:0!important;min-height:62px!important} .v5-drawer-brand{display:block!important;text-align:center!important;padding:0!important;overflow:visible!important} .v5-drawer-brand strong{display:block!important;margin:0!important;color:#fff!important;font:850 14px/1 system-ui!important;letter-spacing:-.035em!important;white-space:nowrap!important} .v5-drawer-brand-divider{display:grid!important;grid-template-columns:1fr 20px 1fr!important;align-items:center!important;gap:6px!important;width:150px!important;margin:7px auto 2px!important;color:var(--snt-cyan)!important} .v5-drawer-brand-divider span{height:1.5px!important;background:var(--snt-cyan)!important;border-radius:2px!important} .v5-drawer-brand-divider .v5-leaf-svg{display:block!important;width:20px!important;height:17px!important;margin:auto!important} .v5-drawer-brand small{display:block!important;margin:3px 0 0!important;color:rgba(255,255,255,.90)!important;font:500 8px/1 system-ui!important;letter-spacing:.22em!important;white-space:nowrap!important} .v5-drawer-header>.v5-menu-state{display:none!important} .v5-menu{display:grid!important;gap:7px!important;padding:4px 0 0!important;margin:0!important} .v5-menu a,.v5-menu a:link,.v5-menu a:visited{ min-height:48px!important; display:grid!important; grid-template-columns:39px minmax(0,1fr) 13px 14px!important; align-items:center!important; gap:5px!important; padding:0 9px 0 4px!important; border:1px solid rgba(205,255,248,.28)!important; border-radius:13px!important; background:rgba(116,206,187,.065)!important; box-shadow:inset 0 1px rgba(255,255,255,.045)!important; color:#fff!important; text-decoration:none!important; font:700 13px/1.08 system-ui,-apple-system,"Segoe UI",sans-serif!important; backdrop-filter:blur(7px)!important; -webkit-backdrop-filter:blur(7px)!important; } .v5-menu a>.ico{ width:37px!important;height:37px!important;margin:0!important; display:flex!important;align-items:center!important;justify-content:center!important; border:1px solid rgba(191,255,245,.09)!important;border-radius:12px!important; background:rgba(105,213,196,.07)!important;color:#fff!important; } .v5-menu a>.ico svg{width:22px!important;height:22px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important} .v5-menu a.active{ border:1.45px solid var(--snt-cyan)!important; background:linear-gradient(90deg,rgba(30,228,205,.20),rgba(42,189,168,.10))!important; box-shadow:0 0 16px rgba(18,238,214,.10),inset 0 1px rgba(255,255,255,.08)!important; } .v5-menu a.active>.ico{background:rgba(88,231,210,.08)!important;border-color:rgba(142,255,239,.10)!important} .v5-menu-live-dot{grid-column:3!important;width:11px!important;height:11px!important;border-radius:50%!important;background:#ffbb32!important;box-shadow:0 0 10px rgba(255,181,35,.95)!important} .v5-menu .arrow{grid-column:4!important;width:auto!important;margin:0!important;font:400 23px/1 Arial,sans-serif!important;color:#fff!important;opacity:.82!important} .v5-menu-separator{height:1.5px!important;margin:9px 7px 7px!important;background:var(--snt-cyan)!important;border:0!important;opacity:.78!important;box-shadow:none!important} .v5-drawer-bottom{margin-top:auto!important;padding:0!important;background:none!important;border:0!important} .v5-logout-form{margin:0!important} .v5-logout-form button{ width:100%!important;min-height:48px!important;display:grid!important;grid-template-columns:39px 1fr 14px!important;align-items:center!important;gap:5px!important; padding:0 9px 0 4px!important;border:1px solid rgba(205,255,248,.28)!important;border-radius:13px!important; background:rgba(116,206,187,.065)!important;color:#fff!important;font:700 13px/1 system-ui!important;text-align:left!important; } .v5-logout-form .ico{width:37px!important;height:37px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(191,255,245,.09)!important;border-radius:12px!important;background:rgba(105,213,196,.07)!important;color:#fff!important} .v5-logout-form .ico svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important} .v5-logout-form .arrow{justify-self:end!important;font:400 23px/1 Arial!important;opacity:.82!important} .v5-menu-separator-contacts{margin:10px 7px 9px!important} .v5-drawer-contacts{padding:0 7px 2px!important;background:none!important;border:0!important} .v5-drawer-contacts-label{display:none!important} .v5-contact-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:15px!important;padding:0!important;margin:0!important} .v5-contact-row a.v5-contact{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(7,72,69,.35)!important;border:1.45px solid currentColor!important;box-shadow:0 0 12px color-mix(in srgb,currentColor 34%,transparent)!important} .v5-contact-whatsapp{color:#16f2be!important}.v5-contact-telegram{color:#25baf5!important}.v5-contact-max{color:#7b80ff!important} .v5-contact-icon,.v5-contact-icon svg,.v5-contact-max .v5-contact-icon.v5-max-official,.v5-contact-max .v5-max-official img{width:24px!important;height:24px!important;display:block!important} .v5-contact-icon svg{fill:none!important;stroke:currentColor!important;stroke-width:1.7!important} .v5-contact-mail{display:flex!important;align-items:center!important;gap:8px!important;margin:10px 0 0!important;color:#fff!important;text-decoration:none!important;font:500 11px/1.1 system-ui!important;white-space:nowrap!important} .v5-contact-mail svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important} .v5-menu-button{width:40px!important;height:40px!important;left:13px!important;top:13px!important;border:1px solid rgba(159,255,243,.45)!important;border-radius:10px!important;background:rgba(4,67,67,.48)!important;backdrop-filter:blur(13px)!important;-webkit-backdrop-filter:blur(13px)!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,0,0,.14)!important} .v5-menu-button svg{width:20px!important;height:20px!important;stroke-width:1.6!important} .v5-drawer-overlay{background:rgba(0,25,31,.24)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important} @media(min-width:900px){ body.v5-menu-pinned{padding-left:var(--v5-drawer-offset)!important} body.v5-menu-pinned .v5-drawer{transform:none!important} body.v5-menu-pinned .v5-menu-button{display:none!important} } /* ---------- content surfaces ---------- */ body.v5-shell-active .v5-card, body.v5-shell-active .news-card, body.v5-shell-active .news-empty, body.v5-shell-active .camera-panel, body.v5-shell-active .map-card, body.v5-shell-active .form-card, body.v5-shell-active .request-system-unavailable, body.v5-shell-active .gas-card{ border:1px solid rgba(150,255,243,.34)!important; border-radius:18px!important; background:linear-gradient(145deg,rgba(13,101,94,.26),rgba(7,63,68,.18))!important; box-shadow:0 14px 38px rgba(0,13,18,.16),inset 0 1px rgba(255,255,255,.07)!important; backdrop-filter:blur(14px) saturate(118%)!important; -webkit-backdrop-filter:blur(14px) saturate(118%)!important; color:#fff!important; } body.v5-shell-active .camera-panel-head{background:rgba(11,100,91,.28)!important;border-bottom:1px solid rgba(160,255,243,.18)!important;color:#fff!important} body.v5-shell-active .camera-panel-title{color:#fff!important} body.v5-shell-active .camera-online-badge{border-radius:18px!important;background:rgba(15,198,148,.18)!important;border:1px solid rgba(66,255,193,.36)!important;color:#aaffd8!important;box-shadow:none!important} body.v5-shell-active .video-wrapper{overflow:hidden!important;border-radius:0 0 16px 16px!important;background:#00191d!important} body.v5-shell-active .live-indicator,body.v5-shell-active .quality-btn,body.v5-shell-active .fullscreen-btn{background:rgba(10,85,80,.62)!important;color:#fff!important;border:1px solid rgba(150,255,243,.25)!important;backdrop-filter:blur(8px)!important} /* ---------- authorization ---------- */ body.auth-mode .auth-page{ min-height:100svh!important; padding:34px 14px 26px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; background-image:linear-gradient(180deg,rgba(0,51,58,.02),rgba(0,38,42,.07)),url('/assets/snt-reference-day.webp')!important; background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important; } body.auth-mode .auth-page::after{background:linear-gradient(180deg,rgba(0,20,28,.02),rgba(0,20,28,.08))!important} body.auth-mode .auth-brand{width:min(94vw,610px)!important;text-align:center!important} body.auth-mode .auth-brand-title{margin:0!important;font:850 36px/1 system-ui!important;letter-spacing:-.045em!important;color:#fff!important;white-space:nowrap!important} body.auth-mode .auth-brand-divider{width:270px!important;margin:11px auto 3px!important;grid-template-columns:1fr 28px 1fr!important;gap:8px!important;color:var(--snt-cyan)!important} body.auth-mode .auth-brand-divider span{height:2px!important;background:var(--snt-cyan)!important} body.auth-mode .auth-brand-divider svg{width:27px!important;height:23px!important} body.auth-mode .auth-brand-subtitle{margin:4px 0 0!important;font:500 14px/1 system-ui!important;letter-spacing:.24em!important;color:#fff!important} body.auth-mode .auth-container{width:min(86vw,318px)!important;max-width:318px!important;margin:30px auto 0!important;padding:0!important} body.auth-mode .auth-card{ width:100%!important;padding:18px 17px 17px!important;position:relative!important;overflow:hidden!important; border:1.4px solid rgba(89,255,237,.82)!important;border-radius:20px!important; background:linear-gradient(145deg,rgba(14,110,101,.27),rgba(7,68,72,.20))!important; box-shadow:0 18px 48px rgba(0,13,18,.22),inset 0 1px rgba(255,255,255,.08)!important; backdrop-filter:blur(16px) saturate(118%)!important;-webkit-backdrop-filter:blur(16px) saturate(118%)!important; } body.auth-mode .auth-corner{width:18px!important;height:18px!important;border-width:2px!important;border-color:#69fff1!important} body.auth-mode .auth-corner-tl{top:12px!important;left:12px!important}body.auth-mode .auth-corner-tr{top:12px!important;right:12px!important}body.auth-mode .auth-corner-bl{bottom:12px!important;left:12px!important}body.auth-mode .auth-corner-br{bottom:12px!important;right:12px!important} body.auth-mode .auth-lock{width:42px!important;height:42px!important;margin:0 auto 10px!important;border:1.35px solid var(--snt-cyan)!important;border-radius:50%!important;background:rgba(13,129,122,.12)!important;box-shadow:0 0 14px rgba(0,239,218,.10)!important} body.auth-mode .auth-lock::after{display:none!important} body.auth-mode .auth-lock svg{width:21px!important;height:21px!important;color:#fff!important} body.auth-mode .auth-title{margin:0 0 12px!important;color:#fff!important;text-align:center!important;font:750 15px/1.12 system-ui!important;letter-spacing:0!important} body.auth-mode .form-group{margin:0 0 9px!important} body.auth-mode .auth-phone-wrap{position:relative!important} body.auth-mode .auth-phone-icon{left:14px!important;width:17px!important;height:17px!important;color:#fff!important} body.auth-mode .phone-input{height:39px!important;padding:0 14px 0 43px!important;border:1px solid rgba(193,255,247,.58)!important;border-radius:23px!important;background:rgba(100,175,133,.18)!important;color:#fff!important;font:600 15px/1 system-ui!important;box-shadow:inset 0 1px rgba(255,255,255,.035)!important} body.auth-mode .phone-input::placeholder{color:#fff!important;opacity:1!important} body.auth-mode .submit-btn{min-height:39px!important;height:39px!important;padding:0 13px!important;display:grid!important;grid-template-columns:1fr 20px!important;align-items:center!important;border:1px solid rgba(154,255,243,.80)!important;border-radius:23px!important;background:linear-gradient(90deg,#12dcca,#0ccab7)!important;color:#082f31!important;font:800 14px/1 system-ui!important;box-shadow:0 5px 16px rgba(0,227,207,.14)!important} body.auth-mode .submit-btn span{padding-left:20px!important}body.auth-mode .submit-btn svg{width:20px!important;height:20px!important} body.auth-mode .error-message{font-size:10px!important;margin:5px 3px 0!important} body.auth-mode .access-denied{margin-top:10px!important;padding:9px!important;border-radius:10px!important;font-size:11px!important} /* ---------- vehicle / guest access: compact one-card states ---------- */ body.request-mode .vehicle-page{ width:min(100%,390px)!important;max-width:390px!important;margin:0 auto 34px!important;padding:4px 10px 26px!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important; } body.request-mode .vehicle-pass{ --accent:var(--snt-cyan)!important; position:relative!important;display:block!important;overflow:hidden!important;min-height:0!important;width:100%!important; padding:17px 19px 16px!important;border:1.45px solid rgba(92,255,239,.82)!important;border-radius:20px!important; background:linear-gradient(145deg,rgba(14,112,102,.29),rgba(7,67,72,.22))!important;color:#fff!important; box-shadow:0 16px 44px rgba(0,14,19,.20),inset 0 1px rgba(255,255,255,.085)!important; backdrop-filter:blur(16px) saturate(120%)!important;-webkit-backdrop-filter:blur(16px) saturate(120%)!important; } body.request-mode .vehicle-pass--duplicate{border-color:rgba(92,255,239,.82)!important} body.request-mode .vehicle-pass--error{border-color:rgba(255,118,120,.90)!important;background:linear-gradient(145deg,rgba(94,75,74,.28),rgba(41,74,80,.22))!important} body.request-mode .vehicle-corner{position:absolute!important;z-index:4!important;width:18px!important;height:18px!important;pointer-events:none!important} body.request-mode .vehicle-corner-tl{left:12px!important;top:12px!important;border-left:2px solid #62fff0!important;border-top:2px solid #62fff0!important;border-radius:5px 0 0!important} body.request-mode .vehicle-corner-tr{right:12px!important;top:12px!important;border-right:2px solid #62fff0!important;border-top:2px solid #62fff0!important;border-radius:0 5px 0 0!important} body.request-mode .vehicle-corner-bl{left:12px!important;bottom:12px!important;border-left:2px solid #62fff0!important;border-bottom:2px solid #62fff0!important;border-radius:0 0 0 5px!important} body.request-mode .vehicle-corner-br{right:12px!important;bottom:12px!important;border-right:2px solid #62fff0!important;border-bottom:2px solid #62fff0!important;border-radius:0 0 5px!important} body.request-mode .vehicle-pass--error .vehicle-corner{border-color:#ff7277!important} body.request-mode .vehicle-identity{ position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:9px!important; width:calc(100% - 34px)!important;min-height:52px!important;margin:0 auto 10px!important;padding:0 0 8px!important; background:none!important;border:0!important;border-bottom:1px solid rgba(75,244,223,.45)!important;text-align:left!important; } body.request-mode .vehicle-gate{display:block!important;flex:0 0 62px!important;width:62px!important;max-width:62px!important;height:40px!important;margin:0!important;object-fit:contain!important;filter:none!important} body.request-mode .vehicle-identity-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-width:0!important;text-align:left!important} body.request-mode .vehicle-identity-copy>strong{display:block!important;margin:0!important;color:#fff!important;font:650 12px/1.05 system-ui!important;letter-spacing:.01em!important;white-space:nowrap!important} body.request-mode .vehicle-identity-copy>span{display:block!important;order:2!important;margin:5px 0 0!important;color:var(--snt-cyan)!important;font:800 8px/1 system-ui!important;letter-spacing:.06em!important;white-space:nowrap!important} body.request-mode .vehicle-identity-meta{display:none!important} body.request-mode .vehicle-content{min-width:0!important;padding:0 7px 1px!important;text-align:center!important} body.request-mode .vehicle-content h1,body.request-mode .vehicle-pass--success .vehicle-title-row h1{margin:0!important;color:#fff!important;font:800 20px/1.12 system-ui!important;letter-spacing:-.02em!important;text-align:center!important} body.request-mode .vehicle-title-row{--status-size:30px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;margin:0 0 11px!important} body.request-mode .vehicle-title-row::before{display:none!important} body.request-mode .vehicle-status-icon{width:30px!important;height:30px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1.5px solid var(--snt-cyan)!important;border-radius:50%!important;background:rgba(0,237,211,.08)!important;color:var(--snt-cyan)!important;font:500 20px/1 Arial!important} body.request-mode .vehicle-pass--duplicate .vehicle-status-icon{font-size:0!important;border:0!important;background:#ffb928!important;width:12px!important;height:12px!important;box-shadow:0 0 10px rgba(255,181,35,.88)!important} body.request-mode .vehicle-pass--error .vehicle-status-icon{border-color:#ff4f59!important;color:#ff4f59!important;background:rgba(255,80,88,.05)!important;font-size:20px!important;width:30px!important;height:30px!important} body.request-mode .vehicle-input-duration{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;margin:5px 0 7px!important;color:#fff!important;font:500 11px/1 system-ui!important} body.request-mode .vehicle-intro{display:none!important} body.request-mode .vehicle-notice,body.request-mode .vehicle-validation{margin:7px 0!important;padding:7px 9px!important;border-radius:9px!important;font-size:10px!important;line-height:1.25!important} body.request-mode .vehicle-form{display:grid!important;gap:8px!important;margin:0!important;padding:0!important} body.request-mode .vehicle-field{position:relative!important;min-width:0!important;text-align:left!important} body.request-mode .vehicle-field label{display:block!important;margin:0 0 4px!important;color:#fff!important;font:600 10px/1 system-ui!important} body.request-mode .vehicle-field-icon{position:absolute!important;left:12px!important;top:23px!important;z-index:2!important;width:20px!important;height:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;padding-right:8px!important;border-right:1px solid rgba(149,255,243,.50)!important;box-sizing:content-box!important} body.request-mode .vehicle-field-icon svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important;stroke-linecap:round!important;stroke-linejoin:round!important} body.request-mode .vehicle-field input{display:block!important;width:100%!important;height:38px!important;padding:0 11px 0 48px!important;border:1px solid rgba(160,255,243,.56)!important;border-radius:11px!important;background:rgba(37,130,115,.13)!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important;font:500 12px/1 system-ui!important} body.request-mode .vehicle-field #carNumber{font:600 12px/1 system-ui!important;letter-spacing:.08em!important} body.request-mode .vehicle-field input::placeholder{color:rgba(255,255,255,.86)!important;opacity:1!important} body.request-mode .vehicle-field-error{font-size:9px!important;margin:3px 2px 0!important} body.request-mode .vehicle-button{width:100%!important;min-height:39px!important;height:39px!important;margin:3px 0 0!important;padding:0 14px!important;border-radius:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;font:800 13px/1 system-ui!important;box-shadow:0 5px 14px rgba(0,229,207,.10)!important} body.request-mode .vehicle-button-primary{border:1px solid rgba(142,255,243,.80)!important;background:linear-gradient(90deg,#16dfcb,#0ed0bd)!important;color:#082d31!important} body.request-mode .vehicle-pass--duplicate .vehicle-button-primary{background:linear-gradient(90deg,#ffd342,#ffc32e)!important;border-color:#ffe064!important;color:#171a12!important} body.request-mode .vehicle-pass--error .vehicle-button-primary{background:linear-gradient(90deg,#ff7b82,#ff666e)!important;border-color:#ff9ba1!important;color:#301214!important} body.request-mode .vehicle-button-icon{width:18px!important;height:18px!important;font-size:20px!important}.vehicle-button-icon--arrow svg{width:19px!important;height:19px!important} body.request-mode .vehicle-form-footnote{margin:1px 0 0!important;color:rgba(255,255,255,.80)!important;font:500 9px/1.15 system-ui!important} body.request-mode .vehicle-form-footnote::before{content:"ⓘ";margin-right:5px!important;color:#fff!important;font-size:12px!important} body.request-mode .vehicle-number{width:230px!important;max-width:78%!important;margin:4px auto 12px!important;line-height:0!important} body.request-mode .v5-rf-plate{max-width:230px!important;border-radius:5px!important;box-shadow:0 3px 8px rgba(0,0,0,.25)!important} body.request-mode .vehicle-details{width:230px!important;max-width:82%!important;margin:0 auto 11px!important;display:grid!important;grid-template-columns:1fr 1.25fr!important;gap:0!important} body.request-mode .vehicle-details>div{position:relative!important;text-align:center!important;padding:0 8px!important} body.request-mode .vehicle-details>div+div::before{content:""!important;position:absolute!important;left:0!important;top:2px!important;bottom:2px!important;width:1px!important;background:rgba(150,255,243,.55)!important} body.request-mode .vehicle-details dt{margin:0 0 2px!important;color:rgba(255,255,255,.82)!important;font:500 10px/1 system-ui!important} body.request-mode .vehicle-details dd{margin:0!important;color:#fff!important;font:800 13px/1.1 system-ui!important;white-space:nowrap!important} body.request-mode .vehicle-actions{display:grid!important;gap:0!important;margin:0!important} body.request-mode .vehicle-duplicate-note{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;margin:8px auto 0!important;color:#fff!important;font:500 9px/1.25 system-ui!important;text-align:left!important;max-width:260px!important} body.request-mode .vehicle-duplicate-note>span{font-size:14px!important;flex:0 0 auto!important}.vehicle-duplicate-note p{margin:0!important} body.request-mode .vehicle-pass--error .vehicle-number,body.request-mode .vehicle-pass--error .vehicle-details{display:none!important} body.request-mode .vehicle-error-code{margin:1px 0 8px!important;padding:10px 12px!important;border:1px solid rgba(200,255,247,.34)!important;border-radius:10px!important;background:rgba(18,89,91,.24)!important;color:#fff!important;text-align:left!important;font:500 11px/1.2 system-ui!important} body.request-mode .vehicle-help{display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important;margin:8px 0 0!important;padding:0!important;border:0!important;color:#fff!important} body.request-mode .vehicle-help p{margin:0!important;color:#fff!important;font:500 9px/1.2 system-ui!important}.vehicle-help p::before{content:"ⓘ";margin-right:5px;font-size:12px} body.request-mode .vehicle-contacts{display:flex!important;justify-content:center!important;gap:9px!important;margin:0!important} body.request-mode .vehicle-contact{width:37px!important;height:37px!important;border-radius:50%!important;background:rgba(5,71,72,.32)!important;border:1.4px solid currentColor!important;box-shadow:0 0 10px color-mix(in srgb,currentColor 35%,transparent)!important} body.request-mode .vehicle-contact--whatsapp{color:#12efb8!important}.vehicle-contact--telegram{color:#24b6f4!important}.vehicle-contact--max{color:#766fff!important} body.request-mode .vehicle-contact svg,body.request-mode .vehicle-contact img{width:22px!important;height:22px!important} body.request-mode .vehicle-pass--error .vehicle-title-row{margin-bottom:11px!important} /* ---------- tablet ---------- */ @media(min-width:769px) and (max-width:1099px){ :root{--v5-drawer-w:238px!important;--v5-drawer-offset:0px!important} body.v5-shell-active::before{background-image:url('/assets/snt-reference-day.webp')!important;filter:none!important} body.v5-menu-pinned{padding-left:0!important} .v5-drawer{left:14px!important;top:14px!important;bottom:14px!important;width:min(238px,calc(100vw - 28px))!important;transform:translateX(-110%)!important} body.v5-menu-open .v5-drawer{transform:none!important} body.v5-menu-pinned .v5-drawer{transform:translateX(-110%)!important} .v5-menu-button{display:flex!important} .v5-drawer-header>.v5-menu-state{display:flex!important;position:absolute!important;right:4px!important;top:0!important;width:31px!important;height:31px!important;border:1px solid rgba(160,255,243,.25)!important;border-radius:9px!important;background:rgba(4,66,66,.14)!important;color:#fff!important} .v5-drawer-brand strong{font-size:12px!important}.v5-drawer-brand-divider{width:128px!important}.v5-drawer-brand small{font-size:7px!important} .v5-menu a,.v5-logout-form button{min-height:44px!important;font-size:11px!important;grid-template-columns:34px minmax(0,1fr) 11px 12px!important}.v5-menu a>.ico,.v5-logout-form .ico{width:32px!important;height:32px!important}.v5-menu a>.ico svg,.v5-logout-form .ico svg{width:19px!important;height:19px!important} .v5-site-brand{min-height:102px!important;margin-top:13px!important}.v5-site-brand h1{font-size:29px!important}.v5-site-brand-subtitle{font-size:12px!important}.v5-site-brand-divider{width:240px!important} body.auth-mode .auth-brand-title{font-size:32px!important}body.auth-mode .auth-container{margin-top:26px!important} } /* ---------- mobile portrait ---------- */ @media(max-width:768px){ body.v5-shell-active::before{background-image:url('/assets/snt-reference-day.webp')!important;background-position:center top!important;filter:none!important} .v5-site-brand{width:calc(100% - 28px)!important;min-height:92px!important;margin:8px 14px 6px!important;padding:8px 42px 4px!important} .v5-site-brand h1{font-size:23px!important;letter-spacing:-.04em!important}.v5-site-brand-divider{width:190px!important;max-width:72%!important;margin-top:9px!important;grid-template-columns:1fr 24px 1fr!important}.v5-site-brand-divider .v5-leaf-svg{width:23px!important;height:20px!important}.v5-site-brand-subtitle{font-size:10px!important;letter-spacing:.22em!important} .v5-drawer{left:10px!important;top:10px!important;bottom:10px!important;width:min(84vw,314px)!important;padding:15px 13px 13px!important;border-radius:19px!important;transform:translateX(calc(-100% - 14px))!important} body.v5-menu-open .v5-drawer{transform:none!important} .v5-drawer-header{min-height:64px!important;padding-right:38px!important}.v5-drawer-header>.v5-menu-state{display:flex!important;position:absolute!important;right:0!important;top:0!important;width:32px!important;height:32px!important;border:1px solid rgba(159,255,243,.28)!important;border-radius:9px!important;background:rgba(5,67,66,.14)!important;color:#fff!important} .v5-drawer-brand strong{font-size:14px!important}.v5-drawer-brand-divider{width:145px!important}.v5-drawer-brand small{font-size:7.5px!important} .v5-menu{gap:7px!important}.v5-menu a,.v5-logout-form button{min-height:49px!important;font-size:13px!important}.v5-contact-row{gap:18px!important}.v5-contact-row a.v5-contact{width:44px!important;height:44px!important}.v5-contact-mail{font-size:11px!important} body.auth-mode .auth-page{padding:24px 10px 18px!important;background-image:linear-gradient(180deg,rgba(0,40,46,.02),rgba(0,32,36,.05)),url('/assets/snt-reference-day.webp')!important;background-position:center top!important} body.auth-mode .auth-brand-title{font-size:26px!important}body.auth-mode .auth-brand-divider{width:210px!important}body.auth-mode .auth-brand-subtitle{font-size:11px!important}body.auth-mode .auth-container{width:min(82vw,282px)!important;max-width:282px!important;margin-top:20px!important}body.auth-mode .auth-card{padding:15px 14px 14px!important;border-radius:17px!important}body.auth-mode .auth-lock{width:36px!important;height:36px!important;margin-bottom:8px!important}body.auth-mode .auth-lock svg{width:18px!important;height:18px!important}body.auth-mode .auth-title{font-size:14px!important;margin-bottom:9px!important}body.auth-mode .phone-input,body.auth-mode .submit-btn{height:36px!important;min-height:36px!important}body.auth-mode .phone-input{font-size:13px!important}body.auth-mode .submit-btn{font-size:12px!important} body.request-mode .vehicle-page{width:min(100%,350px)!important;max-width:350px!important;padding:2px 9px 20px!important}.vehicle-pass{padding:15px 17px 14px!important;border-radius:18px!important}.vehicle-content h1,.vehicle-pass--success .vehicle-title-row h1{font-size:18px!important}.vehicle-number{width:210px!important}.v5-rf-plate{max-width:210px!important}.vehicle-details{width:220px!important}.vehicle-identity{margin-bottom:8px!important}.vehicle-gate{width:56px!important;max-width:56px!important;flex-basis:56px!important;height:36px!important}.vehicle-identity-copy>strong{font-size:11px!important}.vehicle-identity-copy>span{font-size:7.5px!important} } /* ---------- horizontal phone: icon strip, as approved reference ---------- */ @media(max-height:520px) and (orientation:landscape) and (max-width:950px){ body.v5-shell-active{padding-left:0!important} .v5-site-brand{min-height:74px!important;margin:4px auto 2px!important}.v5-site-brand h1{font-size:20px!important}.v5-site-brand-divider{width:170px!important;margin-top:6px!important}.v5-site-brand-subtitle{font-size:8px!important} .v5-menu-button{display:none!important} .v5-drawer-overlay{display:none!important} .v5-drawer{left:50%!important;right:auto!important;top:auto!important;bottom:12px!important;width:auto!important;max-width:calc(100vw - 24px)!important;height:56px!important;min-height:56px!important;padding:7px!important;transform:translateX(-50%)!important;overflow:visible!important;border-radius:15px!important;display:block!important} .v5-drawer-header,.v5-drawer-bottom,.v5-menu-separator{display:none!important} .v5-menu{display:flex!important;gap:6px!important;padding:0!important} .v5-menu a,.v5-menu a:link,.v5-menu a:visited{width:42px!important;min-width:42px!important;height:40px!important;min-height:40px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important} .v5-menu a>.ico{width:32px!important;height:32px!important;border:0!important}.v5-menu a>.ico svg{width:20px!important;height:20px!important}.v5-menu-label,.v5-menu .arrow{display:none!important}.v5-menu-live-dot{position:absolute!important;right:2px!important;top:2px!important;width:8px!important;height:8px!important} .v5-menu a{position:relative!important} .v5-site-brand{padding-left:12px!important;padding-right:12px!important} body.request-mode .vehicle-page{max-width:325px!important;padding-bottom:76px!important} } /* ---------- normalize buttons / pills on every tab ---------- */ body.v5-shell-active .news-max-link, body.v5-shell-active .v5-history-contact, body.v5-shell-active .v5-gas-eog-button, body.v5-shell-active .v5-gas-instruction-button, body.v5-shell-active .v5-gas-situational-button, body.v5-shell-active .v5-gas-doc-mini-link, body.v5-shell-active .map-search-tool, body.v5-shell-active .map-tab{ border:1px solid rgba(157,255,243,.42)!important; border-radius:16px!important; background:rgba(88,197,178,.09)!important; color:#fff!important; box-shadow:inset 0 1px rgba(255,255,255,.055)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } body.v5-shell-active .news-max-link:hover, body.v5-shell-active .v5-history-contact:hover, body.v5-shell-active .v5-gas-eog-button:hover, body.v5-shell-active .v5-gas-instruction-button:hover, body.v5-shell-active .v5-gas-situational-button:hover, body.v5-shell-active .v5-gas-doc-mini-link:hover, body.v5-shell-active .map-search-tool:hover, body.v5-shell-active .map-tab:hover, body.v5-shell-active .map-tab.active{ border-color:var(--snt-cyan)!important; background:rgba(21,218,197,.17)!important; box-shadow:0 0 14px rgba(25,237,214,.08),inset 0 1px rgba(255,255,255,.07)!important; } body.v5-shell-active .v5-history-appeal, body.v5-shell-active .v5-gas-status, body.v5-shell-active .v5-gas-process-note, body.v5-shell-active .v5-gas-compact-doc, body.v5-shell-active .map-toolbar{ border-color:rgba(151,255,243,.26)!important; background:rgba(51,137,124,.08)!important; box-shadow:none!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } /* ========================================================= SNT54_GAS_OWNER_UI_FIX_20260930 ========================================================= */ /* ---------- разворачивание следующих этапов ---------- */ body.v5-shell-active.gasification-mode .v5-gas-stage-toggle { width:100% !important; min-height:48px !important; margin:4px 0 0 !important; padding:0 18px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; border: 1px solid rgba(73,231,181,.23) !important; border-radius:16px !important; background: linear-gradient( 145deg, rgba(20,156,117,.23), rgba(6,71,64,.32) ) !important; color:#64eabc !important; font:inherit !important; font-size:14px !important; font-weight:700 !important; cursor:pointer !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.12) !important; } body.v5-shell-active.gasification-mode .v5-gas-stage-toggle:hover { background: linear-gradient( 145deg, rgba(24,181,133,.28), rgba(7,83,72,.36) ) !important; } body.v5-shell-active.gasification-mode .v5-gas-stage-toggle-chevron { font-size:20px !important; line-height:1 !important; transition: transform .18s ease; } body.v5-shell-active.gasification-mode .v5-gas-stage-toggle[aria-expanded="true"] .v5-gas-stage-toggle-chevron { transform:rotate(180deg); } /* ---------- документы: убрать тёмные полосы под строками ---------- */ body.v5-shell-active.gasification-mode .v5-gas-main-docs, body.v5-shell-active.gasification-mode .v5-gas-proxy-docs { gap:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background: transparent !important; box-shadow: none !important; } body.v5-shell-active.gasification-mode .v5-gas-compact-doc { margin:0 !important; padding: 9px 0 !important; border:0 !important; border-bottom: 1px solid rgba(150,255,239,.10) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.v5-shell-active.gasification-mode .v5-gas-main-docs > .v5-gas-compact-doc:last-child, body.v5-shell-active.gasification-mode .v5-gas-proxy-docs > .v5-gas-compact-doc:last-child { border-bottom: 0 !important; } /* блок доверенности остаётся частью общей плашки */ body.v5-shell-active.gasification-mode .v5-gas-before-calc-note > .v5-gas-docs-group-title:first-child { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid rgba(150,255,239,.10) !important; } body.v5-shell-active.gasification-mode .v5-gas-proxy-docs { margin-bottom: 14px !important; padding-bottom: 0 !important; } /* ---------- выписка из протокола ---------- */ body.v5-shell-active.gasification-mode .v5-gas-doc-with-actions { display:grid !important; grid-template-columns: 20px minmax(0,1fr) !important; column-gap: 10px !important; row-gap: 7px !important; align-items: start !important; } body.v5-shell-active.gasification-mode .v5-gas-doc-with-actions > .v5-gas-doc-check { grid-column:1; grid-row:1; } body.v5-shell-active.gasification-mode .v5-gas-doc-with-actions > .v5-gas-doc-copy { grid-column:2; grid-row:1; } body.v5-shell-active.gasification-mode .v5-gas-doc-with-actions > .v5-gas-doc-actions { grid-column:2; grid-row:2; width:auto !important; margin:0 !important; padding:0 !important; display:flex !important; justify-content: flex-start !important; gap: 7px !important; } body.v5-shell-active.gasification-mode .v5-gas-doc-mini-link { min-height: 30px !important; padding: 5px 11px !important; font-family: inherit !important; cursor: pointer !important; } /* предпросмотр как отдельный блок ниже строки */ body.v5-shell-active.gasification-mode .v5-gas-doc-preview { grid-column:2; grid-row:3; width:100% !important; box-sizing: border-box !important; margin: 1px 0 2px !important; padding: 6px !important; border: 1px solid rgba(150,255,239,.14) !important; border-radius: 12px !important; background: rgba(4,52,54,.18) !important; overflow: hidden !important; } body.v5-shell-active.gasification-mode .v5-gas-doc-preview[hidden] { display: none !important; } body.v5-shell-active.gasification-mode .v5-gas-doc-preview iframe { display:block; width: 100% !important; height: 360px !important; border: 0 !important; border-radius: 8px !important; background: #fff !important; } /* ---------- ситуационный план ---------- */ body.v5-shell-active.gasification-mode .v5-gas-situational-row { padding-top: 7px !important; } body.v5-shell-active.gasification-mode .v5-gas-situational-top { display:flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; } body.v5-shell-active.gasification-mode .v5-gas-situational-top .v5-gas-doc-copy { flex: 0 1 auto !important; } body.v5-shell-active.gasification-mode .v5-gas-situational-button { min-width: 0 !important; min-height: 30px !important; margin: 0 !important; padding: 5px 11px !important; border-radius: 999px !important; font-size: 11px !important; } body.v5-shell-active.gasification-mode .v5-gas-situational-note { margin: 2px 0 0 !important; font-size: 11px !important; line-height: 1.35 !important; } /* ---------- мобильный ---------- */ @media(max-width:700px) { body.v5-shell-active.gasification-mode .v5-gas-doc-preview iframe { height: 270px !important; } body.v5-shell-active.gasification-mode .v5-gas-stage-toggle { min-height: 44px !important; font-size: 13px !important; } } /* SNT54_REMOVE_VEHICLE_INNER_CORNERS */ body.request-mode .vehicle-corner, body.request-mode .vehicle-corner-tl, body.request-mode .vehicle-corner-tr, body.request-mode .vehicle-corner-bl, body.request-mode .vehicle-corner-br { display: none !important; } /* ========================================================= SNT54_VEHICLE_INPUT_ICON_FIX_20261001 Поля не белеют после ввода, иконки остаются видимыми ========================================================= */ body.request-mode .vehicle-field-icon { z-index: 5 !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.request-mode .vehicle-field-icon svg { display: block !important; opacity: 1 !important; visibility: visible !important; stroke: #ffffff !important; color: #ffffff !important; } /* обычное, активное и заполненное поле — один стеклянный стиль */ body.request-mode .vehicle-field input, body.request-mode .vehicle-field input:focus, body.request-mode .vehicle-field input:active, body.request-mode .vehicle-field input:not(:placeholder-shown) { background: rgba(37,130,115,.13) !important; background-color: rgba(37,130,115,.13) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(160,255,243,.56) !important; box-shadow: inset 0 1px rgba(255,255,255,.025) !important; outline: none !important; } /* Chromium / Яндекс / Chrome autofill */ body.request-mode .vehicle-field input:-webkit-autofill, body.request-mode .vehicle-field input:-webkit-autofill:hover, body.request-mode .vehicle-field input:-webkit-autofill:focus, body.request-mode .vehicle-field input:-webkit-autofill:active { -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; -webkit-box-shadow: 0 0 0 1000px rgba(20,112,108,.96) inset !important; box-shadow: 0 0 0 1000px rgba(20,112,108,.96) inset !important; border-color: rgba(160,255,243,.56) !important; transition: background-color 99999s ease-out 0s !important; } /* Firefox */ body.request-mode .vehicle-field input:autofill { color: #ffffff !important; background: rgba(20,112,108,.96) !important; } /* иконка сохраняется и при фокусе */ body.request-mode .vehicle-field:focus-within .vehicle-field-icon { color: #ffffff !important; opacity: 1 !important; } body.request-mode .vehicle-field:focus-within .vehicle-field-icon svg { stroke: #ffffff !important; } /* ========================================================= SNT54_MENU_ALIGNMENT_CONTACTS_DUPLICATE_20261001 ========================================================= */ /* --------------------------------------------------------- ПРОПУСК АКТИВЕН — нижнее сообщение по центру --------------------------------------------------------- */ body.request-mode .vehicle-duplicate-note{ width:100% !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; margin: 10px auto 0 !important; padding: 0 10px !important; text-align:center !important; } body.request-mode .vehicle-duplicate-note > span{ flex: 0 0 auto !important; margin: 0 !important; align-self: center !important; } body.request-mode .vehicle-duplicate-note > p{ flex: 0 1 auto !important; width: auto !important; max-width: 270px !important; margin: 0 !important; text-align: center !important; line-height: 1.25 !important; } /* --------------------------------------------------------- ВЕРХНЯЯ ШАПКА МЕНЮ заголовок слева, кнопка справа и по центру высоты --------------------------------------------------------- */ .v5-drawer-header{ position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-height: 62px !important; padding: 5px 42px 10px 4px !important; } .v5-drawer-brand{ flex: 1 1 auto !important; min-width: 0 !important; display: block !important; padding: 0 !important; text-align: left !important; } .v5-drawer-brand strong{ text-align: left !important; } .v5-drawer-brand-divider{ margin: 7px 0 2px !important; } .v5-drawer-brand small{ text-align: left !important; margin-left: 0 !important; } /* кнопка закрепления / закрытия */ .v5-drawer-header > .v5-menu-state{ position: absolute !important; right: 5px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* --------------------------------------------------------- ПУНКТЫ МЕНЮ: иконка — название — точка — стрелка всё строго в одной строке --------------------------------------------------------- */ .v5-menu a, .v5-menu a:link, .v5-menu a:visited{ display: grid !important; grid-template-columns: 38px minmax(0,1fr) 10px 18px !important; grid-template-rows: 1fr !important; column-gap: 6px !important; align-items: center !important; } .v5-menu a > .ico{ grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; } .v5-menu a > .v5-menu-label{ grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; justify-self: stretch !important; min-width: 0 !important; } .v5-menu a > .v5-menu-live-dot{ grid-column: 3 !important; grid-row: 1 !important; position: static !important; align-self: center !important; justify-self: center !important; margin: 0 !important; } .v5-menu a > .arrow{ grid-column: 4 !important; grid-row: 1 !important; align-self: center !important; justify-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; } .v5-menu-title{ display: block !important; width: 100% !important; line-height: 1.1 !important; } /* --------------------------------------------------------- КОНТАКТЫ В МЕНЮ компактные квадратные кнопки со скруглением --------------------------------------------------------- */ .v5-drawer-contacts{ padding: 4px 4px 6px !important; background: transparent !important; border: 0 !important; } .v5-contact-row{ display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 0 !important; } .v5-contact-row a.v5-contact{ flex: 0 0 36px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(145,255,231,.28) !important; border-radius: 10px !important; background: rgba(13,93,84,.19) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } /* никаких круглых кнопок */ .v5-contact-whatsapp, .v5-contact-telegram, .v5-contact-max{ border-radius: 10px !important; } .v5-contact-icon, .v5-contact-icon svg, .v5-contact-max .v5-contact-icon.v5-max-official, .v5-contact-max .v5-max-official img{ width: 20px !important; height: 20px !important; } .v5-contact-name{ display: none !important; } /* email строго по центру */ .v5-contact-mail{ width: fit-content !important; max-width: 100% !important; min-height: 26px !important; margin: 7px auto 0 !important; padding: 4px 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; text-align: center !important; border: 0 !important; background: transparent !important; } .v5-contact-mail svg{ width: 16px !important; height: 16px !important; flex: 0 0 16px !important; } /* --------------------------------------------------------- МОБИЛЬНЫЙ --------------------------------------------------------- */ @media(max-width:899px){ .v5-drawer-header{ padding-left: 3px !important; padding-right: 40px !important; } .v5-drawer-brand strong{ font-size: 12px !important; } .v5-drawer-brand-divider{ width: 128px !important; } .v5-contact-row a.v5-contact{ width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; flex-basis: 34px !important; border-radius: 9px !important; } .v5-contact-icon, .v5-contact-icon svg, .v5-contact-max .v5-contact-icon.v5-max-official, .v5-contact-max .v5-max-official img{ width: 19px !important; height: 19px !important; } } /* ========================================================= SNT54_AUTH_CORNERS_AND_INPUT_FIX_20261001 ========================================================= */ /* Убрать 4 внутренних декоративных уголка. Внешняя рамка auth-card остаётся. */ body.auth-mode .auth-corner, body.auth-mode .auth-corner-tl, body.auth-mode .auth-corner-tr, body.auth-mode .auth-corner-bl, body.auth-mode .auth-corner-br { display: none !important; } /* Телефонная иконка всегда видима */ body.auth-mode .auth-phone-wrap { position: relative !important; } body.auth-mode .auth-phone-icon { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 17px !important; height: 17px !important; z-index: 10 !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.auth-mode .auth-phone-icon path { stroke: currentColor !important; } /* Обычное / заполненное / активное поле остаётся стеклянным */ body.auth-mode .phone-input, body.auth-mode .phone-input:focus, body.auth-mode .phone-input:active, body.auth-mode .phone-input:not(:placeholder-shown) { background: rgba(100,175,133,.18) !important; background-color: rgba(100,175,133,.18) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; border-color: rgba(193,255,247,.58) !important; outline: none !important; } /* Chrome / Яндекс / Edge: сохраняем браузерное автозаполнение, но запрещаем ему перекрашивать поле в белое */ body.auth-mode .phone-input:-webkit-autofill, body.auth-mode .phone-input:-webkit-autofill:hover, body.auth-mode .phone-input:-webkit-autofill:focus, body.auth-mode .phone-input:-webkit-autofill:active { -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; -webkit-box-shadow: 0 0 0 1000px rgb(42,126,116) inset !important; box-shadow: 0 0 0 1000px rgb(42,126,116) inset !important; border-color: rgba(193,255,247,.58) !important; transition: background-color 99999s ease-out 0s !important; } /* Firefox autofill */ body.auth-mode .phone-input:autofill { background: rgb(42,126,116) !important; color: #ffffff !important; } /* При фокусе телефон также не исчезает */ body.auth-mode .auth-phone-wrap:focus-within .auth-phone-icon { color: #ffffff !important; opacity: 1 !important; } /* ========================================================= SNT54_DESKTOP_PIN_AND_BRAND_CENTER_20261001 ========================================================= */ /* --------------------------------------------------------- DESKTOP — ЗАКРЕПЛЁННОЕ МЕНЮ --------------------------------------------------------- */ @media (min-width:1100px) { body.v5-menu-pinned .v5-drawer { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.v5-menu-pinned .v5-drawer-overlay { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* --------------------------------------------------------- ШАПКА МЕНЮ --------------------------------------------------------- */ .v5-drawer-header { position: relative !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; } /* * Кнопка закрепления абсолютная — * поэтому она больше не сдвигает заголовок. */ .v5-drawer-header > .v5-menu-state { position: absolute !important; top: 1px !important; right: 1px !important; margin: 0 !important; transform: none !important; z-index: 5 !important; } /* Весь бренд занимает ширину шапки */ .v5-drawer-brand { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 30px !important; box-sizing: border-box !important; text-align: center !important; } /* НАШЕ ЛЮБИМОЕ СНТ */ .v5-drawer-brand strong { display: block !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* центральная декоративная линия */ .v5-drawer-brand-divider { margin-left: auto !important; margin-right: auto !important; } /* СНТ КООПЕРАТОР */ .v5-drawer-brand small { display: block !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Небольшое визуальное состояние закреплённой кнопки */ @media (min-width:1100px) { .v5-menu-state.is-pinned { background: rgba(38,183,159,.18) !important; border-color: rgba(93,239,213,.35) !important; } } /* ========================================================= SNT54_GAS_READMORE_NEWS_STYLE_20261001 ========================================================= */ body.v5-shell-active.gasification-mode #v5GasStagesToggle { width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; margin: 5px 0 5px 42px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #61e4bb !important; font-family: var(--v5-ui-font, Inter, "Segoe UI", Arial, sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: left !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } body.v5-shell-active.gasification-mode #v5GasStagesToggle:hover { color: #86f2cf !important; background: transparent !important; text-decoration: underline !important; text-underline-offset: 3px !important; } body.v5-shell-active.gasification-mode #v5GasStagesToggle:focus, body.v5-shell-active.gasification-mode #v5GasStagesToggle:active { background: transparent !important; box-shadow: none !important; transform: none !important; } /* Старые стрелки и псевдоэлементы полностью убрать */ body.v5-shell-active.gasification-mode #v5GasStagesToggle::before, body.v5-shell-active.gasification-mode #v5GasStagesToggle::after, body.v5-shell-active.gasification-mode #v5GasStagesToggle .v5-gas-stage-toggle-chevron { display: none !important; content: none !important; } /* На мобильном тот же механизм, без увеличения кнопки */ @media(max-width:700px) { body.v5-shell-active.gasification-mode #v5GasStagesToggle { margin-left: 36px !important; font-size: 12px !important; } } /* ========================================================= SNT54_MENU_BRAND_EXACT_CENTER_20261001 Центр верхнего заголовка по СНТ КООПЕРАТОР ========================================================= */ .v5-drawer-brand { --v5-brand-upper-shift: -7px; } /* * СНТ КООПЕРАТОР оставляем ровно там, * где он сейчас находится. */ .v5-drawer-brand small { position: relative !important; left: 0 !important; right: auto !important; transform: none !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* * НАШЕ ЛЮБИМОЕ СНТ * центрируем относительно нижней надписи. */ .v5-drawer-brand strong { position: relative !important; left: var(--v5-brand-upper-shift) !important; transform: none !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* * Линия + листок перемещаются вместе с заголовком. */ .v5-drawer-brand-divider { position: relative !important; left: var(--v5-brand-upper-shift) !important; transform: none !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================= SNT54_SITUATIONAL_CADASTRE_REQUIRED_20261001 ========================================================= */ body.v5-situational-mode #v5SituationalTopHint.is-cadastre-required, body.v5-situational-mode #v5SituationalMessage.is-cadastre-required { color: #ff8b8b !important; font-weight: 700 !important; } body.v5-situational-mode .v5-situational-map-hint.is-cadastre-required { border-color: rgba(255,105,105,.65) !important; background: rgba(91,26,31,.88) !important; color: #ffffff !important; cursor: default !important; } body.v5-situational-mode .v5-situational-map-hint.is-cadastre-required strong { color: #ffb0b0 !important; } body.v5-situational-mode .v5-situational-map-hint.is-cadastre-required span { color: rgba(255,255,255,.88) !important; } /* ========================================================= SNT54_SITUATIONAL_BACK_TO_DOCS_STYLE_20261001 ========================================================= */ body.v5-situational-mode .v5-situational-back-docs { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 48px !important; padding: 0 18px !important; border-radius: 14px !important; border: 1px solid rgba(120,255,225,.34) !important; background: rgba(31,121,107,.36) !important; color: #dffff7 !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; } body.v5-situational-mode .v5-situational-back-docs:hover { background: rgba(36,145,127,.52) !important; color: #ffffff !important; border-color: rgba(150,255,236,.50) !important; } body.v5-situational-mode .v5-situational-back-docs__arrow { font-size: 20px !important; font-weight: 900 !important; line-height: 1 !important; } body.v5-situational-mode .v5-situational-back-docs__text { display: inline-block !important; line-height: 1 !important; } body.v5-situational-mode .v5-situational-find-plot-hidden { display: none !important; } /* ========================================================= SNT54_CAMERA_HEADER_COMPACT_20261001 ========================================================= */ body.v5-shell-active.camera-mode .camera-panel-head { min-height: 36px !important; padding: 6px 10px !important; gap: 8px !important; } /* название камеры */ body.v5-shell-active.camera-mode .camera-panel-title { gap: 6px !important; font-size: 14px !important; line-height: 1.1 !important; font-weight: 700 !important; } /* иконка камеры */ body.v5-shell-active.camera-mode .camera-panel-title svg { width: 16px !important; height: 16px !important; } /* плашка ОНЛАЙН */ body.v5-shell-active.camera-mode .camera-online-badge { min-height: 24px !important; padding: 3px 8px !important; gap: 5px !important; border-radius: 10px !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: .02em !important; } /* зелёная точка */ body.v5-shell-active.camera-mode .camera-online-badge::before { width: 5px !important; height: 5px !important; } /* мобильный ещё компактнее */ @media(max-width:700px) { body.v5-shell-active.camera-mode .camera-panel-head { min-height: 32px !important; padding: 5px 8px !important; } body.v5-shell-active.camera-mode .camera-panel-title { font-size: 12px !important; } body.v5-shell-active.camera-mode .camera-panel-title svg { width: 14px !important; height: 14px !important; } body.v5-shell-active.camera-mode .camera-online-badge { min-height: 21px !important; padding: 2px 6px !important; font-size: 9px !important; } } /* ========================================================= SNT54_CAMERA_HEADER_ULTRA_COMPACT_20261001 ========================================================= */ body.v5-shell-active.camera-mode .camera-panel-head { min-height: 30px !important; height: auto !important; padding: 4px 8px !important; gap: 6px !important; } /* Название */ body.v5-shell-active.camera-mode .camera-panel-title { gap: 5px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; } /* Иконка */ body.v5-shell-active.camera-mode .camera-panel-title svg { width: 14px !important; height: 14px !important; } /* ONLINE */ body.v5-shell-active.camera-mode .camera-online-badge { min-height: 20px !important; height: 20px !important; padding: 2px 7px !important; gap: 4px !important; border-radius: 8px !important; font-size: 9px !important; line-height: 1 !important; } body.v5-shell-active.camera-mode .camera-online-badge::before { width: 4px !important; height: 4px !important; } /* ========================================================= ЗАКРЕПЛЁННОЕ DESKTOP-МЕНЮ ========================================================= */ @media(min-width:1100px) { body.v5-menu-pinned .v5-drawer { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.v5-menu-pinned .v5-drawer-overlay { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* * Главное содержимое при закреплении * больше не должно оставаться затемнённым/размытым. */ body.v5-menu-pinned .v5-shell-main, body.v5-menu-pinned .v5-content, body.v5-menu-pinned main { filter: none !important; } /* * Визуально показываем состояние булавки. */ [data-v5-menu-state].is-pinned, .v5-menu-state.is-pinned { background: rgba(31,176,152,.24) !important; border-color: rgba(113,255,229,.48) !important; } } /* мобильная камера ещё чуть компактнее */ @media(max-width:700px) { body.v5-shell-active.camera-mode .camera-panel-head { min-height: 28px !important; padding: 3px 7px !important; } body.v5-shell-active.camera-mode .camera-panel-title { font-size: 11px !important; } body.v5-shell-active.camera-mode .camera-online-badge { height: 19px !important; min-height: 19px !important; padding: 2px 6px !important; font-size: 8px !important; } } /* ========================================================= SNT54_AUTH_RESPONSIVE_BG_FINAL_20261001 0–699 mobile 700–1199 tablet 1200+ desktop ========================================================= */ /* ---------- MOBILE ---------- */ body.auth-mode { background-image: url("/assets/snt-auth-mobile.webp") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* ---------- TABLET / УЗКОЕ ОКНО DESKTOP ---------- */ @media (min-width:700px) and (max-width:1199px) { body.auth-mode { background-image: url("/assets/snt-auth-tablet.webp") !important; background-size: cover !important; background-position: center center !important; } } /* ---------- НАСТОЯЩИЙ DESKTOP ---------- */ @media (min-width:1200px) { body.auth-mode { background-image: url("/assets/snt-auth-desktop.webp") !important; background-size: cover !important; background-position: center center !important; } } /* Узкое вертикальное окно даже на компьютере: не растягиваем desktop-композицию */ @media (min-width:700px) and (max-aspect-ratio:4/5) { body.auth-mode { background-image: url("/assets/snt-auth-tablet.webp") !important; background-size: cover !important; background-position: center center !important; } } /* ========================================================= SNT54_AUTH_SINGLE_BACKGROUND_FINAL_20261001 Один единственный слой фонового изображения ========================================================= */ /* Сам body больше не рисует картинку */ body.auth-mode { position: relative !important; min-height: 100dvh !important; background: #063b48 !important; background-image: none !important; isolation: isolate !important; overflow-x: hidden !important; } /* Единственный источник фоновой картинки */ body.auth-mode::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: url("/assets/snt-auth-mobile.webp") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } /* Весь интерфейс располагается над фоном */ body.auth-mode > * { position: relative; z-index: 1; } /* --------------------------------------------------------- УБИРАЕМ ВСЕ ВТОРИЧНЫЕ ФОНЫ, которые и дают наложение по бокам --------------------------------------------------------- */ body.auth-mode .auth-page, body.auth-mode .auth-shell, body.auth-mode .auth-layout, body.auth-mode .auth-stage, body.auth-mode .auth-background, body.auth-mode .auth-bg, body.auth-mode .login-page, body.auth-mode .login-shell, body.auth-mode main { background-image: none !important; background: transparent !important; } /* Если старый дизайн рисовал картинку псевдоэлементами */ body.auth-mode .auth-page::before, body.auth-mode .auth-page::after, body.auth-mode .auth-shell::before, body.auth-mode .auth-shell::after, body.auth-mode .auth-layout::before, body.auth-mode .auth-layout::after, body.auth-mode .auth-stage::before, body.auth-mode .auth-stage::after, body.auth-mode .auth-background::before, body.auth-mode .auth-background::after, body.auth-mode .auth-bg::before, body.auth-mode .auth-bg::after { background-image: none !important; } /* ========================================================= RESPONSIVE ========================================================= */ /* MOBILE — 0–699 */ @media (max-width:699px) { body.auth-mode::before { background-image: url("/assets/snt-auth-mobile.webp") !important; background-position: center top !important; } } /* TABLET + узкое окно компьютера — 700–1199 */ @media (min-width:700px) and (max-width:1199px) { body.auth-mode::before { background-image: url("/assets/snt-auth-tablet.webp") !important; background-position: center center !important; } } /* DESKTOP только от 1200 */ @media (min-width:1200px) { body.auth-mode::before { background-image: url("/assets/snt-auth-desktop.webp") !important; background-position: center center !important; } } /* * Узкое вертикальное окно компьютера: * даже если ширина большая, используем tablet, * чтобы композиция ворот не ломалась. */ @media (min-width:700px) and (max-aspect-ratio:4/5) { body.auth-mode::before { background-image: url("/assets/snt-auth-tablet.webp") !important; } } /* ========================================================= SNT54_AUTH_SINGLE_BACKGROUND_FINAL_20261001 Один единственный слой фонового изображения ========================================================= */ /* Сам body больше не рисует картинку */ body.auth-mode { position: relative !important; min-height: 100dvh !important; background: #063b48 !important; background-image: none !important; isolation: isolate !important; overflow-x: hidden !important; } /* Единственный источник фоновой картинки */ body.auth-mode::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: url("/assets/snt-auth-mobile.webp") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } /* Весь интерфейс располагается над фоном */ body.auth-mode > * { position: relative; z-index: 1; } /* --------------------------------------------------------- УБИРАЕМ ВСЕ ВТОРИЧНЫЕ ФОНЫ, которые и дают наложение по бокам --------------------------------------------------------- */ body.auth-mode .auth-page, body.auth-mode .auth-shell, body.auth-mode .auth-layout, body.auth-mode .auth-stage, body.auth-mode .auth-background, body.auth-mode .auth-bg, body.auth-mode .login-page, body.auth-mode .login-shell, body.auth-mode main { background-image: none !important; background: transparent !important; } /* Если старый дизайн рисовал картинку псевдоэлементами */ body.auth-mode .auth-page::before, body.auth-mode .auth-page::after, body.auth-mode .auth-shell::before, body.auth-mode .auth-shell::after, body.auth-mode .auth-layout::before, body.auth-mode .auth-layout::after, body.auth-mode .auth-stage::before, body.auth-mode .auth-stage::after, body.auth-mode .auth-background::before, body.auth-mode .auth-background::after, body.auth-mode .auth-bg::before, body.auth-mode .auth-bg::after { background-image: none !important; } /* ========================================================= RESPONSIVE ========================================================= */ /* MOBILE — 0–699 */ @media (max-width:699px) { body.auth-mode::before { background-image: url("/assets/snt-auth-mobile.webp") !important; background-position: center top !important; } } /* TABLET + узкое окно компьютера — 700–1199 */ @media (min-width:700px) and (max-width:1199px) { body.auth-mode::before { background-image: url("/assets/snt-auth-tablet.webp") !important; background-position: center center !important; } } /* DESKTOP только от 1200 */ @media (min-width:1200px) { body.auth-mode::before { background-image: url("/assets/snt-auth-desktop.webp") !important; background-position: center center !important; } } /* * Узкое вертикальное окно компьютера: * даже если ширина большая, используем tablet, * чтобы композиция ворот не ломалась. */ @media (min-width:700px) and (max-aspect-ratio:4/5) { body.auth-mode::before { background-image: url("/assets/snt-auth-tablet.webp") !important; } } /* ========================================================= SNT54_MOBILE_AUTH_MENU_TUNE_20261001 ========================================================= */ @media (max-width:699px) { /* ---------- Верхняя шапка входа: плотнее и контрастнее ---------- */ body.auth-mode .auth-brand, body.auth-mode .auth-header, body.auth-mode .auth-hero, body.auth-mode .hero-head, body.auth-mode .hero-title-wrap, body.auth-mode .snt-auth-head { gap: 4px !important; row-gap: 4px !important; } body.auth-mode .auth-title, body.auth-mode .hero-title, body.auth-mode .site-title, body.auth-mode .snt-title, body.auth-mode h1 { color: #f8fdff !important; text-shadow: 0 2px 12px rgba(0,0,0,.38) !important; margin-top: 0 !important; margin-bottom: 2px !important; line-height: 1.02 !important; letter-spacing: .01em !important; } body.auth-mode .auth-subtitle, body.auth-mode .hero-subtitle, body.auth-mode .site-subtitle, body.auth-mode .snt-subtitle { color: #f1fbff !important; text-shadow: 0 2px 8px rgba(0,0,0,.30) !important; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.05 !important; letter-spacing: .14em !important; } body.auth-mode .auth-divider, body.auth-mode .brand-divider, body.auth-mode .hero-divider, body.auth-mode .snt-divider { margin: 2px 0 !important; transform: scaleY(.92) !important; } body.auth-mode .auth-divider-line, body.auth-mode .brand-divider-line, body.auth-mode .hero-divider-line, body.auth-mode .snt-divider-line { margin-top: 0 !important; margin-bottom: 0 !important; } /* ---------- Окно входа: прозрачнее и ниже ---------- */ body.auth-mode .auth-card, body.auth-mode .login-card, body.auth-mode .access-card, body.auth-mode .auth-panel, body.auth-mode .auth-glass, body.auth-mode .snt-auth-card { background: linear-gradient( 180deg, rgba(73,132,96,.30) 0%, rgba(37,88,69,.24) 52%, rgba(25,67,60,.22) 100% ) !important; backdrop-filter: blur(14px) saturate(118%) !important; -webkit-backdrop-filter: blur(14px) saturate(118%) !important; box-shadow: 0 10px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10) !important; margin-top: 38px !important; transform: translateY(18px) !important; } body.auth-mode .auth-card .card-corner, body.auth-mode .login-card .card-corner, body.auth-mode .access-card .card-corner, body.auth-mode .auth-panel .card-corner, body.auth-mode .auth-glass .card-corner, body.auth-mode .snt-auth-card .card-corner { opacity: .72 !important; } /* ---------- Мобильное меню: уже ---------- */ body .menu-panel, body .menu-drawer, body .side-menu, body .nav-drawer, body .drawer-menu, body .mobile-menu-panel, body .site-menu-panel, body .glass-menu { width: min(84vw, 470px) !important; max-width: 84vw !important; } body .menu-panel .menu-item, body .menu-drawer .menu-item, body .side-menu .menu-item, body .nav-drawer .menu-item, body .drawer-menu .menu-item, body .mobile-menu-panel .menu-item, body .site-menu-panel .menu-item, body .glass-menu .menu-item { padding-left: 14px !important; padding-right: 14px !important; } /* ---------- Крестик в верхнем квадратике мобильного меню ---------- */ .snt-mobile-menu-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.06) !important; color: #ecfbff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 27px !important; line-height: 1 !important; z-index: 12 !important; cursor: pointer !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .snt-mobile-menu-close span { transform: translateY(-1px) !important; } /* если квадрат уже есть, но пустой */ .snt-mobile-square-close-empty::before { content: "×" !important; color: #ecfbff !important; font-size: 27px !important; line-height: 1 !important; } } /* ========================================================= SNT54_MOBILE_AUTH_HEADER_CENTER_20261001 ========================================================= */ @media (max-width:699px) { /* ===== Верхняя шапка: плотнее и заметнее ===== */ body.auth-mode .auth-brand, body.auth-mode .auth-header, body.auth-mode .auth-hero, body.auth-mode .hero-head, body.auth-mode .hero-title-wrap, body.auth-mode .snt-auth-head, body.auth-mode .snt-auth-header, body.auth-mode .top-brand-block { gap: 2px !important; row-gap: 2px !important; padding-top: 4px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-title, body.auth-mode .hero-title, body.auth-mode .site-title, body.auth-mode .snt-title, body.auth-mode .snt-auth-title, body.auth-mode .top-title, body.auth-mode h1 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.42) !important; line-height: .93 !important; letter-spacing: .005em !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-subtitle, body.auth-mode .hero-subtitle, body.auth-mode .site-subtitle, body.auth-mode .snt-subtitle, body.auth-mode .snt-auth-subtitle, body.auth-mode .top-subtitle { color: #f5fdff !important; text-shadow: 0 2px 10px rgba(0,0,0,.34) !important; line-height: 1.02 !important; letter-spacing: .14em !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-divider, body.auth-mode .brand-divider, body.auth-mode .hero-divider, body.auth-mode .snt-divider, body.auth-mode .title-divider { margin-top: 1px !important; margin-bottom: 1px !important; transform: scaleY(.9) !important; } body.auth-mode .auth-divider-line, body.auth-mode .brand-divider-line, body.auth-mode .hero-divider-line, body.auth-mode .snt-divider-line, body.auth-mode .title-divider-line { margin-top: 0 !important; margin-bottom: 0 !important; } /* ===== Центрирование окна входа по экрану ===== */ body.auth-mode .auth-shell, body.auth-mode .auth-layout, body.auth-mode .auth-main, body.auth-mode .auth-stage, body.auth-mode .auth-viewport, body.auth-mode .auth-screen, body.auth-mode .auth-wrap, body.auth-mode .auth-content { min-height: calc(100svh - 120px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } body.auth-mode .auth-card, body.auth-mode .login-card, body.auth-mode .access-card, body.auth-mode .auth-panel, body.auth-mode .auth-glass, body.auth-mode .snt-auth-card { margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: translateY(22px) !important; } } /* ========================================================= SNT54_MOBILE_AUTH_HEADER_CENTER_20261001 ========================================================= */ @media (max-width:699px) { /* ===== Верхняя шапка: плотнее и заметнее ===== */ body.auth-mode .auth-brand, body.auth-mode .auth-header, body.auth-mode .auth-hero, body.auth-mode .hero-head, body.auth-mode .hero-title-wrap, body.auth-mode .snt-auth-head, body.auth-mode .snt-auth-header, body.auth-mode .top-brand-block { gap: 2px !important; row-gap: 2px !important; padding-top: 4px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-title, body.auth-mode .hero-title, body.auth-mode .site-title, body.auth-mode .snt-title, body.auth-mode .snt-auth-title, body.auth-mode .top-title, body.auth-mode h1 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.42) !important; line-height: .93 !important; letter-spacing: .005em !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-subtitle, body.auth-mode .hero-subtitle, body.auth-mode .site-subtitle, body.auth-mode .snt-subtitle, body.auth-mode .snt-auth-subtitle, body.auth-mode .top-subtitle { color: #f5fdff !important; text-shadow: 0 2px 10px rgba(0,0,0,.34) !important; line-height: 1.02 !important; letter-spacing: .14em !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-divider, body.auth-mode .brand-divider, body.auth-mode .hero-divider, body.auth-mode .snt-divider, body.auth-mode .title-divider { margin-top: 1px !important; margin-bottom: 1px !important; transform: scaleY(.9) !important; } body.auth-mode .auth-divider-line, body.auth-mode .brand-divider-line, body.auth-mode .hero-divider-line, body.auth-mode .snt-divider-line, body.auth-mode .title-divider-line { margin-top: 0 !important; margin-bottom: 0 !important; } /* ===== Центрирование окна входа по экрану ===== */ body.auth-mode .auth-shell, body.auth-mode .auth-layout, body.auth-mode .auth-main, body.auth-mode .auth-stage, body.auth-mode .auth-viewport, body.auth-mode .auth-screen, body.auth-mode .auth-wrap, body.auth-mode .auth-content { min-height: calc(100svh - 120px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } body.auth-mode .auth-card, body.auth-mode .login-card, body.auth-mode .access-card, body.auth-mode .auth-panel, body.auth-mode .auth-glass, body.auth-mode .snt-auth-card { margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: translateY(22px) !important; } } /* ========================================================= SNT54_MOBILE_AUTH_HEADER_CENTER_20261001 ========================================================= */ @media (max-width:699px) { /* ===== Верхняя шапка: плотнее и заметнее ===== */ body.auth-mode .auth-brand, body.auth-mode .auth-header, body.auth-mode .auth-hero, body.auth-mode .hero-head, body.auth-mode .hero-title-wrap, body.auth-mode .snt-auth-head, body.auth-mode .snt-auth-header, body.auth-mode .top-brand-block { gap: 2px !important; row-gap: 2px !important; padding-top: 4px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-title, body.auth-mode .hero-title, body.auth-mode .site-title, body.auth-mode .snt-title, body.auth-mode .snt-auth-title, body.auth-mode .top-title, body.auth-mode h1 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.42) !important; line-height: .93 !important; letter-spacing: .005em !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-subtitle, body.auth-mode .hero-subtitle, body.auth-mode .site-subtitle, body.auth-mode .snt-subtitle, body.auth-mode .snt-auth-subtitle, body.auth-mode .top-subtitle { color: #f5fdff !important; text-shadow: 0 2px 10px rgba(0,0,0,.34) !important; line-height: 1.02 !important; letter-spacing: .14em !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.auth-mode .auth-divider, body.auth-mode .brand-divider, body.auth-mode .hero-divider, body.auth-mode .snt-divider, body.auth-mode .title-divider { margin-top: 1px !important; margin-bottom: 1px !important; transform: scaleY(.9) !important; } body.auth-mode .auth-divider-line, body.auth-mode .brand-divider-line, body.auth-mode .hero-divider-line, body.auth-mode .snt-divider-line, body.auth-mode .title-divider-line { margin-top: 0 !important; margin-bottom: 0 !important; } /* ===== Центрирование окна входа по экрану ===== */ body.auth-mode .auth-shell, body.auth-mode .auth-layout, body.auth-mode .auth-main, body.auth-mode .auth-stage, body.auth-mode .auth-viewport, body.auth-mode .auth-screen, body.auth-mode .auth-wrap, body.auth-mode .auth-content { min-height: calc(100svh - 120px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } body.auth-mode .auth-card, body.auth-mode .login-card, body.auth-mode .access-card, body.auth-mode .auth-panel, body.auth-mode .auth-glass, body.auth-mode .snt-auth-card { margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: translateY(22px) !important; } } /* SNT54_MOBILE_AUTH_FINAL_V9_START */ @media (max-width:699px) { /* Карточка остаётся по центру экрана */ body.auth-mode .auth-page .auth-container { position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:calc(100vw - 42px) !important; max-width:450px !important; margin:0 !important; padding:0 !important; } /* Сохраняем компактное прозрачное стекло */ body.auth-mode .auth-page .auth-card { box-sizing:border-box !important; width:100% !important; height:auto !important; min-height:0 !important; padding:13px 15px 14px !important; border-radius:20px !important; background: linear-gradient( 145deg, rgba(48,105,72,.18), rgba(15,59,58,.12) ) !important; border:1px solid rgba(103,232,219,.56) !important; -webkit-backdrop-filter:blur(9px) saturate(108%) !important; backdrop-filter:blur(9px) saturate(108%) !important; box-shadow: 0 9px 24px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.07) !important; } /* * [замок] Доступ только * для членов СНТ * * Вся связка центрируется целиком. */ body.auth-mode .auth-page .auth-card-heading { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:10px !important; width:100% !important; height:auto !important; min-height:38px !important; margin:0 0 10px !important; padding:0 !important; } body.auth-mode .auth-page .auth-card-heading > .auth-lock { display:grid !important; place-items:center !important; flex:0 0 36px !important; width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; align-self:center !important; } body.auth-mode .auth-page .auth-card-heading > .auth-lock svg { width:18px !important; height:18px !important; } body.auth-mode .auth-page .auth-card-heading > .auth-title { display:block !important; flex:0 0 auto !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; font-size:15px !important; line-height:1.08 !important; font-weight:750 !important; letter-spacing:0 !important; white-space:nowrap !important; text-align:left !important; color:#fff !important; } /* Поле и кнопка сразу под заголовком */ body.auth-mode .auth-page #phoneForm { display:flex !important; flex-direction:column !important; gap:8px !important; width:100% !important; margin:0 !important; padding:0 !important; } body.auth-mode .auth-page #phoneForm .form-group { width:100% !important; margin:0 !important; padding:0 !important; } body.auth-mode .auth-page .auth-phone-wrap { position:relative !important; width:100% !important; height:42px !important; margin:0 !important; } body.auth-mode .auth-page .phone-input { box-sizing:border-box !important; width:100% !important; height:42px !important; min-height:42px !important; margin:0 !important; padding:0 15px 0 44px !important; border-radius:999px !important; font-size:13px !important; line-height:42px !important; } body.auth-mode .auth-page .auth-phone-icon { position:absolute !important; left:13px !important; top:50% !important; transform:translateY(-50%) !important; width:18px !important; height:18px !important; } body.auth-mode .auth-page .submit-btn { box-sizing:border-box !important; width:100% !important; height:44px !important; min-height:44px !important; margin:0 !important; padding:0 16px !important; border-radius:999px !important; font-size:14px !important; } body.auth-mode .auth-page .submit-btn svg { width:18px !important; height:18px !important; } } /* SNT54_MOBILE_AUTH_FINAL_V9_END */ /* SNT54_MOBILE_AUTH_FINAL_V10_START */ @media (max-width:699px) { /* * 1) Верхний бренд-блок: * делаем плотнее по вертикали */ body.auth-mode .auth-brand{ gap:0 !important; } body.auth-mode .auth-brand-title, body.auth-mode .hero-title, body.auth-mode .site-title, body.auth-mode .snt-title, body.auth-mode .snt-auth-title, body.auth-mode .top-title, body.auth-mode h1{ margin-top:0 !important; margin-bottom:0 !important; line-height:.90 !important; letter-spacing:.003em !important; } body.auth-mode .auth-brand-mark, body.auth-mode .auth-brand-divider, body.auth-mode .auth-divider, body.auth-mode .brand-divider, body.auth-mode .hero-divider, body.auth-mode .snt-divider, body.auth-mode .title-divider{ margin-top:2px !important; margin-bottom:2px !important; transform:scaleY(.90) !important; } body.auth-mode .auth-brand-mark{ height:18px !important; min-height:18px !important; } body.auth-mode .auth-brand-mark svg{ width:28px !important; height:18px !important; } body.auth-mode .auth-brand-subtitle, body.auth-mode .hero-subtitle, body.auth-mode .site-subtitle, body.auth-mode .snt-subtitle, body.auth-mode .snt-auth-subtitle, body.auth-mode .top-subtitle{ margin-top:1px !important; margin-bottom:0 !important; line-height:1 !important; } body.auth-mode .auth-brand-keywords{ margin-top:1px !important; margin-bottom:0 !important; line-height:1 !important; } /* * 2) Карточка: * чуть прозрачнее */ body.auth-mode .auth-page .auth-card{ background: linear-gradient( 145deg, rgba(48,105,72,.14), rgba(15,59,58,.08) ) !important; border:1px solid rgba(103,232,219,.50) !important; -webkit-backdrop-filter:blur(8px) saturate(106%) !important; backdrop-filter:blur(8px) saturate(106%) !important; box-shadow: 0 8px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* * 3) Замок + текст: * уводим влево и выравниваем по левому краю поля ввода */ body.auth-mode .auth-page .auth-card-heading{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; width:100% !important; min-height:38px !important; margin:0 0 9px !important; padding:0 !important; text-align:left !important; } body.auth-mode .auth-page .auth-card-heading > .auth-lock{ display:grid !important; place-items:center !important; flex:0 0 36px !important; width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; align-self:center !important; } body.auth-mode .auth-page .auth-card-heading > .auth-lock svg{ width:18px !important; height:18px !important; } body.auth-mode .auth-page .auth-card-heading > .auth-title{ display:block !important; flex:0 0 auto !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; font-size:15px !important; line-height:1.06 !important; font-weight:750 !important; white-space:nowrap !important; text-align:left !important; } /* * 4) Поле + кнопка: * ритм немного плотнее */ body.auth-mode .auth-page #phoneForm{ gap:7px !important; } } /* SNT54_MOBILE_AUTH_FINAL_V10_END */ /* SNT54_AUTH_INPUT_FOCUS_V11_START */ @media (max-width:699px) { /* * Немного увеличиваем связку: * замок + текст. */ body.auth-mode .auth-page .auth-card-heading > .auth-lock { flex-basis:40px !important; width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; } body.auth-mode .auth-page .auth-card-heading > .auth-lock svg { width:20px !important; height:20px !important; } body.auth-mode .auth-page .auth-card-heading > .auth-title { font-size:16px !important; line-height:1.07 !important; } body.auth-mode .auth-page .auth-card-heading { min-height:42px !important; gap:11px !important; } /* * Когда пользователь нажал на поле телефона: * поднимаем всю карточку примерно на 20% экрана. * * В обычном состоянии её положение не меняется. */ body.auth-mode .auth-page:has(.phone-input:focus) .auth-container { transform: translate( -50%, calc(-50% - 20vh) ) !important; transition: transform .22s ease !important; } body.auth-mode .auth-page .auth-container { transition: transform .22s ease !important; } } /* SNT54_AUTH_INPUT_FOCUS_V11_END */ /* SNT54_AUTH_POSITION_V12_START */ @media (max-width:699px){ /* * Авторизация выше примерно на 20% * относительно текущего центра. */ body.auth-mode .auth-page .auth-container { top:40% !important; transform: translate(-50%, -50%) !important; } } /* SNT54_AUTH_POSITION_V12_END */ /* SNT54_PHONE_INPUT_INDENT_V13_START */ @media (max-width:699px){ body.auth-mode .auth-page .phone-input{ padding-left:52px !important; } } /* SNT54_PHONE_INPUT_INDENT_V13_END */ /* SNT54_AUTH_HEADING_LEFT_20261001 */ body.auth-mode .auth-page .auth-card-heading{ display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; align-items:center !important; justify-content:stretch !important; column-gap:10px !important; width:100% !important; margin:0 0 12px !important; padding:0 !important; text-align:left !important; } body.auth-mode .auth-page .auth-card-heading > .auth-lock{ grid-column:1 !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; margin:0 !important; justify-self:start !important; align-self:center !important; } body.auth-mode .auth-page .auth-card-heading > div:last-child{ grid-column:2 !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; justify-self:start !important; text-align:left !important; } body.auth-mode .auth-page .auth-card-heading .auth-title{ margin:0 !important; padding:0 !important; text-align:left !important; white-space:normal !important; } /* WORKING/LATEST 2026-10-01 MOBILE MENU TARGET V1 START */ @media (max-width:899px) and (orientation:portrait){ :root{ --v5-drawer-w:72vw !important; --v5-drawer-offset:0 !important; } /* ===================================================== ПАНЕЛЬ В референсе занимает примерно 70% ширины экрана. ===================================================== */ .v5-drawer{ box-sizing:border-box !important; left:6px !important; right:auto !important; top:8px !important; bottom:8px !important; width:min(72vw,430px) !important; min-width:252px !important; max-width:calc(100vw - 18px) !important; padding: 20px 14px 16px !important; border: 1.5px solid rgba(99,244,255,.88) !important; border-radius: 28px !important; background: linear-gradient( 150deg, rgba(20,89,78,.34), rgba(12,70,75,.27) 58%, rgba(12,69,58,.30) ) !important; box-shadow: 0 22px 58px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.07) !important; backdrop-filter: blur(20px) saturate(132%) !important; -webkit-backdrop-filter: blur(20px) saturate(132%) !important; overflow-x:hidden !important; overflow-y:auto !important; } /* ===================================================== УГЛОВЫЕ АКЦЕНТЫ ===================================================== */ .v5-drawer-corner{ display:block !important; position:absolute !important; width:24px !important; height:24px !important; z-index:3 !important; pointer-events:none !important; border-color: #24f1da !important; filter: drop-shadow( 0 0 4px rgba(36,241,218,.24) ) !important; } .v5-drawer-corner-tl{ left:18px !important; top:18px !important; border-left:2px solid !important; border-top:2px solid !important; border-radius: 7px 0 0 0 !important; } .v5-drawer-corner-tr{ right:18px !important; top:18px !important; border-right:2px solid !important; border-top:2px solid !important; border-radius: 0 7px 0 0 !important; } .v5-drawer-corner-bl{ left:18px !important; bottom:18px !important; border-left:2px solid !important; border-bottom:2px solid !important; border-radius: 0 0 0 7px !important; } .v5-drawer-corner-br{ right:18px !important; bottom:18px !important; border-right:2px solid !important; border-bottom:2px solid !important; border-radius: 0 0 7px 0 !important; } /* ===================================================== ШАПКА ===================================================== */ .v5-drawer-header{ position:relative !important; display:block !important; width:100% !important; min-height:0 !important; box-sizing:border-box !important; margin:0 !important; padding: 24px 30px 15px !important; border:0 !important; } .v5-drawer-brand{ --v5-brand-upper-shift:0px !important; display:block !important; width:100% !important; margin:0 !important; padding:0 !important; text-align:center !important; } .v5-drawer-brand strong{ position:relative !important; left:0 !important; transform:none !important; display:block !important; width:100% !important; margin:0 !important; padding:0 !important; color:#fff !important; font: 800 clamp(19px,4.9vw,24px)/1.04 system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; letter-spacing: -.035em !important; white-space: nowrap !important; text-align: center !important; } .v5-drawer-brand-divider{ position:relative !important; left:0 !important; transform:none !important; display:grid !important; grid-template-columns: 1fr 26px 1fr !important; align-items:center !important; gap:8px !important; width:78% !important; margin: 11px auto 5px !important; color: #24f1da !important; } .v5-drawer-brand-divider span{ height:2px !important; border-radius: 99px !important; background: currentColor !important; box-shadow: 0 0 8px rgba(36,241,218,.24) !important; } .v5-drawer-brand-divider .v5-leaf-svg{ display:block !important; width:26px !important; height:22px !important; margin:auto !important; } .v5-drawer-brand small{ position:relative !important; left:0 !important; transform:none !important; display:block !important; width:100% !important; margin:0 !important; color:#fff !important; font: 500 clamp(10px,2.9vw,13px)/1.05 system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; letter-spacing: .20em !important; white-space: nowrap !important; text-align: center !important; } /* ===================================================== КРЕСТИК ===================================================== */ .v5-drawer-header > .v5-menu-state, .v5-drawer [data-v5-menu-state]{ display:grid !important; place-items:center !important; position:absolute !important; top:4px !important; right:2px !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; padding:0 !important; margin:0 !important; transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; z-index:30 !important; border: 1px solid rgba(159,255,243,.28) !important; border-radius: 9px !important; background: rgba(5,67,66,.14) !important; color:#fff !important; box-shadow:none !important; } .v5-menu-state-pin{ display:none !important; } .v5-menu-state-close{ display:grid !important; } .v5-menu-state svg{ width:15px !important; height:15px !important; } /* ===================================================== МЕНЮ Все кнопки строго ОДИНАКОВОЙ ширины. ===================================================== */ .v5-menu{ display:grid !important; grid-template-columns: minmax(0,1fr) !important; width:100% !important; max-width:none !important; gap:9px !important; margin:0 !important; padding: 10px 0 4px !important; } .v5-menu a, .v5-menu a:link, .v5-menu a:visited{ box-sizing:border-box !important; width:100% !important; max-width:none !important; min-width:0 !important; height:58px !important; min-height:58px !important; margin:0 !important; padding: 0 11px 0 0 !important; display:grid !important; grid-template-columns: 58px minmax(0,1fr) 9px 16px !important; grid-template-rows: 1fr !important; column-gap: 7px !important; align-items: center !important; justify-content: stretch !important; border: 1.2px solid rgba(240,255,250,.42) !important; border-radius: 30px !important; background: linear-gradient( 90deg, rgba(25,110,101,.29), rgba(121,137,72,.19) ) !important; color:#fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.04) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; font: 700 clamp(14px,3.7vw,17px)/1.04 system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; text-decoration:none !important; } /* круглая зона иконки */ .v5-menu a > .ico{ grid-column:1 !important; grid-row:1 !important; width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; margin: -1px 0 -1px -1px !important; display:grid !important; place-items:center !important; border: 1.2px solid rgba(255,255,255,.26) !important; border-radius: 50% !important; background: linear-gradient( 145deg, rgba(76,177,161,.23), rgba(19,94,93,.18) ) !important; color:#fff !important; box-shadow: inset 0 0 14px rgba(255,255,255,.03) !important; } .v5-menu a > .ico svg{ display:block !important; width:29px !important; height:29px !important; fill:none !important; stroke: currentColor !important; stroke-width: 1.65 !important; } .v5-menu a[href*="mode=gasification"] > .ico svg{ width:29px !important; height:29px !important; } /* название */ .v5-menu a > .v5-menu-label{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; width:auto !important; display:block !important; align-self:center !important; } .v5-menu-title{ display:block !important; width:auto !important; max-width:none !important; margin:0 !important; color:inherit !important; font:inherit !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } /* активная жёлтая точка */ .v5-menu a > .v5-menu-live-dot{ grid-column:3 !important; grid-row:1 !important; position:static !important; display:block !important; width:9px !important; height:9px !important; min-width:9px !important; min-height:9px !important; margin:0 !important; align-self:center !important; justify-self:center !important; border-radius:50% !important; background: radial-gradient( circle at 35% 30%, #ffe38e, #f1a51d 65%, #db8c00 ) !important; box-shadow: 0 0 8px rgba(255,181,44,.56) !important; } /* стрелка */ .v5-menu a > .arrow{ grid-column:4 !important; grid-row:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:16px !important; height:auto !important; margin:0 !important; color:#fff !important; font: 400 29px/.8 Arial, sans-serif !important; opacity:.95 !important; } /* активный пункт */ .v5-menu a.active{ border: 1.6px solid rgba(88,255,244,.98) !important; background: linear-gradient( 90deg, rgba(13,201,189,.54), rgba(15,229,205,.45) ) !important; box-shadow: 0 0 18px rgba(0,241,224,.17), inset 0 1px 0 rgba(255,255,255,.18) !important; } .v5-menu a.active > .ico{ background: rgba(0,171,166,.16) !important; border-color: rgba(210,255,250,.42) !important; } /* ===================================================== ЛИНИЯ ПЕРЕД ГАЗИФИКАЦИЕЙ ===================================================== */ .v5-menu-separator{ display:block !important; width:100% !important; height:2px !important; margin: 8px 0 9px !important; border:0 !important; border-radius: 99px !important; background: linear-gradient( 90deg, #29f0d7, #31e4d9 70%, rgba(91,246,224,.62) ) !important; opacity:.82 !important; box-shadow: 0 0 7px rgba(44,237,218,.16) !important; } /* ===================================================== ВЫХОД ===================================================== */ .v5-drawer-bottom{ width:100% !important; margin-top: 14px !important; padding:0 !important; border:0 !important; background:none !important; } /* * В референсе между Газификацией и Выходом * нет дополнительной линии. */ .v5-drawer-bottom > .v5-menu-separator:first-child{ display:none !important; } .v5-logout-form{ width:100% !important; max-width:none !important; margin:0 !important; } .v5-logout-form button{ box-sizing:border-box !important; width:100% !important; max-width:none !important; min-width:0 !important; height:58px !important; min-height:58px !important; margin:0 !important; padding: 0 11px 0 0 !important; display:grid !important; grid-template-columns: 58px minmax(0,1fr) 16px !important; column-gap: 7px !important; align-items:center !important; border: 1.2px solid rgba(240,255,250,.42) !important; border-radius: 30px !important; background: linear-gradient( 90deg, rgba(25,110,101,.29), rgba(121,137,72,.19) ) !important; color:#fff !important; font: 700 clamp(14px,3.7vw,17px)/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; text-align:left !important; } .v5-logout-form .ico{ grid-column:1 !important; width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; margin: -1px 0 -1px -1px !important; display:grid !important; place-items:center !important; border: 1.2px solid rgba(255,255,255,.26) !important; border-radius: 50% !important; background: linear-gradient( 145deg, rgba(76,177,161,.23), rgba(19,94,93,.18) ) !important; color:#fff !important; } .v5-logout-form .ico svg{ width:29px !important; height:29px !important; stroke-width: 1.65 !important; } .v5-logout-form button > span:not(.ico):not(.arrow){ grid-column:2 !important; min-width:0 !important; white-space: nowrap !important; } .v5-logout-form .arrow{ grid-column:3 !important; justify-self:center !important; width:16px !important; color:#fff !important; font: 400 29px/.8 Arial, sans-serif !important; } /* ===================================================== КОНТАКТЫ ===================================================== */ .v5-menu-separator-contacts{ display:block !important; height:2px !important; margin: 20px 0 13px !important; } .v5-drawer-contacts{ width:100% !important; margin:0 !important; padding: 0 4px 4px !important; border:0 !important; border-radius:0 !important; background:none !important; } .v5-drawer-contacts-label{ display:block !important; margin: 0 0 11px !important; color:#fff !important; font: 650 17px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; letter-spacing:0 !important; text-transform:none !important; } .v5-contact-row{ display:flex !important; align-items:center !important; justify-content:center !important; gap:16px !important; width:100% !important; margin:0 !important; padding:0 !important; } .v5-contact-row a.v5-contact{ flex: 0 0 48px !important; width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; padding:0 !important; display:grid !important; place-items:center !important; border: 1.5px solid currentColor !important; border-radius: 50% !important; text-decoration:none !important; box-shadow: 0 0 15px color-mix( in srgb, currentColor 28%, transparent ), inset 0 0 10px rgba(255,255,255,.035) !important; } .v5-contact-whatsapp{ color:#16f2be !important; background:rgba(0,184,125,.20) !important; } .v5-contact-telegram{ color:#25baf5 !important; background:rgba(0,142,224,.20) !important; } .v5-contact-max{ color:#7b80ff !important; background:rgba(83,72,213,.22) !important; } .v5-contact-icon, .v5-contact-icon svg, .v5-contact-max .v5-contact-icon.v5-max-official, .v5-contact-max .v5-max-official img{ display:block !important; width:29px !important; height:29px !important; } .v5-contact-name{ display:none !important; } .v5-contact-mail{ display:flex !important; width:max-content !important; max-width:100% !important; min-height:24px !important; align-items:center !important; justify-content:center !important; gap:8px !important; margin: 12px auto 0 !important; padding:0 !important; border:0 !important; background:none !important; color:#fff !important; font: 500 13px/1.1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; text-decoration:none !important; white-space: nowrap !important; } .v5-contact-mail svg{ width:18px !important; height:18px !important; flex: 0 0 18px !important; } } /* * Низкие телефоны: * геометрия сохраняется, * только немного уменьшается вертикальный шаг. */ @media (max-width:899px) and (orientation:portrait) and (max-height:720px){ .v5-drawer{ padding-top:14px !important; padding-bottom:12px !important; } .v5-drawer-header{ padding-top:14px !important; padding-bottom:10px !important; } .v5-drawer-brand strong{ font-size:18px !important; } .v5-drawer-brand-divider{ margin-top:7px !important; margin-bottom:3px !important; } .v5-drawer-brand small{ font-size:10px !important; } .v5-menu{ gap:6px !important; padding-top:7px !important; } .v5-menu a, .v5-logout-form button{ height:50px !important; min-height:50px !important; font-size:14px !important; } .v5-menu a > .ico, .v5-logout-form .ico{ width:50px !important; height:50px !important; min-width:50px !important; min-height:50px !important; } .v5-menu a > .ico svg, .v5-logout-form .ico svg{ width:25px !important; height:25px !important; } .v5-drawer-bottom{ margin-top:9px !important; } .v5-menu-separator-contacts{ margin-top:12px !important; margin-bottom:8px !important; } .v5-drawer-contacts-label{ font-size:15px !important; margin-bottom:8px !important; } .v5-contact-row a.v5-contact{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; flex-basis:42px !important; } .v5-contact-icon, .v5-contact-icon svg, .v5-contact-max .v5-contact-icon.v5-max-official, .v5-contact-max .v5-max-official img{ width:25px !important; height:25px !important; } .v5-contact-mail{ margin-top:8px !important; font-size:12px !important; } } /* WORKING/LATEST 2026-10-01 MOBILE MENU TARGET V1 END */