/* ===================================================================== NewParts.ge — თემა „Liquid Glass" (მინა, საიტის ფერებში შეფერილი) --------------------------------------------------------------------- მოქმედებს მხოლოდ მაშინ, როცა -ს აქვს კლასი "glass". ბარათები — ნახევრად გამჭვირვალე მინა: ზემოთ წითელი, ქვემოთ ლურჯი ელფერი (როგორც საიტის ფონის ნათება), უკანა ფონი იბინდება, კიდეზე ფერადი ზოლი, ზემოდან ბლიკი. ლოგოები და ფოტოები — ღია „ლინზაზე", რომ წარწერები მკვეთრი დარჩეს. პანელები (თავსართი, მენიუ, ჩატი, კალათა) — უფრო მკვრივი მინა, ტექსტი რომ კარგად იკითხებოდეს. ===================================================================== */ html.glass{ --gl-c1:226,27,34; --gl-a1:.12; /* ზემოთ — წითელი ელფერი */ --gl-c2:70,120,255; --gl-a2:.10; /* ქვემოთ — ლურჯი ელფერი */ --gl-base:18,20,26; --gl-ba:.55; /* მინის „სისქე" ბარათებზე */ --gl-pa:.80; /* პანელებზე (მენიუ, ჩატი...) */ --gl-bd:.14; --gl-rim:.25; --gl-glare:.30; --gl-lens:.84; --gl-blur:18px; --gl-sat:1.7; --gl-sh:.35; --gl-soft:rgba(255,255,255,.06); /* ღილაკები, ველები მინაზე */ --gl-pblur:24px; /* პანელების დაბინდვა */ } html.glass[data-theme="light"]{ --gl-a1:.10; --gl-a2:.09; --gl-base:255,255,255; --gl-ba:.60; --gl-pa:.82; --gl-bd:.55; --gl-sh:.10; --gl-soft:rgba(255,255,255,.62); } /* ტელეფონზე ნაკლები დაბინდვა — ფონი მოძრაობს და ბინდი ყოველ კადრზე ითვლება */ @media (max-width:768px){ html.glass{ --gl-blur:9px; --gl-pblur:14px; --gl-ba:.72 } html.glass[data-theme="light"]{ --gl-ba:.78 } /* ბარათები ტელეფონზე ფონს არ აბინდებს — მხოლოდ შეფერილი ნახევრად გამჭვირვალე მინა (ფონის მანქანა მოძრაობს და ბინდის გადათვლა ყოველ კადრზე ტელეფონს ანელებს) */ html.glass :is(.b-card,.blogo,.pcard,.filters,.mod,.vcard,.spec,.fitbox,.tile,.ccard,.sk-card,.site-foot), html.glass :is(.msg.bot,.cprod,.chips button,.way,.typing,.btn--ghost,.input,.select){ -webkit-backdrop-filter:none !important; backdrop-filter:none !important } } /* ფონი: საიტის ავტომობილს ემატება წითელი და ლურჯი ნათება — მინას ყველგან ჰქონდეს ფერი, რომელსაც „აირეკლავს" */ html.glass[data-theme="dark"] .bg-art{ background-image: radial-gradient(55% 45% at 0% 8%, rgba(226,27,34,.30), transparent 62%), radial-gradient(55% 50% at 100% 92%, rgba(70,120,255,.26), transparent 62%), linear-gradient(180deg, rgba(8,9,11,.86) 0%, rgba(8,9,11,.08) 24%, rgba(8,9,11,.08) 80%, rgba(8,9,11,.90) 100%), url(bg-car.jpg), url(bg-car.svg); background-size:100% 100%,100% 100%,100% 100%, min(2100px,138%) auto, min(2100px,138%) auto; background-position:0 0,0 0,0 0, center 54%, center 54%; background-repeat:no-repeat; } html.glass[data-theme="light"] .bg-art{ background-image: radial-gradient(55% 45% at 0% 8%, rgba(226,27,34,.14), transparent 62%), radial-gradient(55% 50% at 100% 92%, rgba(70,120,255,.14), transparent 62%), linear-gradient(180deg, rgba(246,247,249,.92) 0%, rgba(246,247,249,.12) 28%, rgba(246,247,249,.12) 76%, rgba(246,247,249,.94) 100%), url(bg-car-light.jpg), url(bg-car-light.svg); background-size:100% 100%,100% 100%,100% 100%, min(2100px,138%) auto, min(2100px,138%) auto; background-position:0 0,0 0,0 0, center 54%, center 54%; background-repeat:no-repeat; } @media (max-width:768px){ html.glass .bg-art{background-size:100% 100%,100% 100%,100% 100%,230% auto,230% auto; background-position:0 0,0 0,0 0,60% 52%,60% 52%} } /* ------------------------------------------------------------ ბარათები */ html.glass :is(.b-card,.blogo,.pcard,.filters,.mod,.vcard,.spec,.fitbox,.tile,.ccard,.sk-card,.site-foot){ background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.08), transparent 55%), linear-gradient(135deg, rgba(var(--gl-c1),var(--gl-a1)), rgba(var(--gl-c2),var(--gl-a2))), rgba(var(--gl-base),var(--gl-ba)) !important; -webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat)); backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat)); border-color:rgba(255,255,255,var(--gl-bd)) !important; box-shadow: inset 1px 1px 0 rgba(var(--gl-c1),var(--gl-rim)), inset -1px -1px 0 rgba(var(--gl-c2),var(--gl-rim)), inset 0 1px 0 rgba(255,255,255,calc(var(--gl-bd) * 2)), 0 14px 34px rgba(0,0,0,var(--gl-sh)); } html.glass .fitbox{border-left-color:var(--brand) !important} /* ბლოკი, რომელშიც ბარათებია — თვითონ გამჭვირვალე (მინა მინაზე არ გვინდა) */ html.glass .b-card:has(.bgrid){background:transparent !important;border-color:transparent !important; box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none} html.glass .blogo{position:relative;isolation:isolate;border-radius:24px} html.glass .pcard{border-radius:20px} /* „ცოცხალი" ბლიკი — მაუსს / თითს მიჰყვება (--mx/--my აყენებს app.js) */ html.glass :is(.blogo,.pcard,.locs .b-card)::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4; mix-blend-mode:screen;opacity:0;transition:opacity .3s; background:radial-gradient(220px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,var(--gl-glare)),transparent 60%); } html.glass :is(.blogo,.pcard,.locs .b-card):hover::after{opacity:1} html.glass :is(.blogo,.pcard){transition:transform .45s cubic-bezier(.2,1.5,.35,1),box-shadow .3s,border-radius .45s} html.glass .blogo:hover{transform:translateY(-4px) scale(1.02);border-radius:28px} html.glass .pcard:hover{transform:translateY(-5px) scale(1.015)} /* ლოგოები და ფოტოები — ღია ლინზაზე */ html.glass .bl-im{background:rgba(255,255,255,var(--gl-lens)) !important;margin:14px 14px 0;border-radius:18px; box-shadow:inset 0 1px 1px #fff,inset 0 -10px 18px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,calc(var(--gl-sh) * .8))} html.glass :is(.bl-im,.bhead-im) img,html.glass :is(.ddlogo,.byr-lg){filter:none !important} html.glass :is(.bhead-im,.drop .dd a .ddlogo,.byr-lg){background:rgba(255,255,255,var(--gl-lens)) !important;border-color:rgba(255,255,255,.6) !important} html.glass .pcard .im{margin:8px 8px 0;border-radius:14px;background:#fff} html.glass .gallery .main{background:rgba(255,255,255,.94) !important} html.glass .bl-b b{text-shadow:0 1px 2px rgba(0,0,0,.25)} html.glass[data-theme="light"] .bl-b b{text-shadow:none} /* ავტომობილების ფოტოები — ფოტოს არ ვეხებით, მხოლოდ ჩარჩოა მინა */ html.glass .v-im{border-radius:14px;margin:8px 8px 0} /* ------------------------------------------------------------ პანელები */ html.glass :is(.site-head,.bnav,.drawer,.mmenu,.modal-card,.chat,.sugg,.drop .dd,.vpanel){ background: linear-gradient(135deg, rgba(var(--gl-c1),calc(var(--gl-a1) * .6)), rgba(var(--gl-c2),calc(var(--gl-a2) * .6))), rgba(var(--gl-base),var(--gl-pa)) !important; -webkit-backdrop-filter:blur(var(--gl-pblur)) saturate(1.8); backdrop-filter:blur(var(--gl-pblur)) saturate(1.8); border-color:rgba(255,255,255,var(--gl-bd)) !important; } html.glass :is(.site-head,.bnav){--gl-pa:.62} html.glass[data-theme="light"] :is(.site-head,.bnav){--gl-pa:.72} html.glass .chat-body,html.glass .chips,html.glass .chat-pmenu{background:transparent !important} html.glass .chat-foot{background:rgba(var(--gl-base),.35) !important;border-color:rgba(255,255,255,var(--gl-bd)) !important} html.glass .chat-head{background:linear-gradient(120deg,rgba(23,25,31,.88),rgba(16,18,23,.82)),linear-gradient(135deg,rgba(var(--gl-c1),.25),rgba(var(--gl-c2),.2)) !important} html.glass .msg.bot,html.glass .cprod,html.glass .chips button,html.glass .way,html.glass .typing{ background:var(--gl-soft) !important;border-color:rgba(255,255,255,var(--gl-bd)) !important; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} html.glass .msg.me{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),var(--brand) !important} /* ფუტერი — მინის ფირფიტა; ტექსტი თემის ფერისაა */ html.glass .site-foot{color:var(--text) !important;border-top:1px solid rgba(255,255,255,var(--gl-bd)) !important} /* ------------------------------------------------ ღილაკები და ველები */ html.glass .btn--ghost,html.glass :is(.input,.select),html.glass .chat-foot textarea,html.glass .chat-foot .cam{ background:var(--gl-soft) !important;border-color:rgba(255,255,255,calc(var(--gl-bd) + .04)) !important; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html.glass .btn--ghost:hover{border-color:rgba(255,255,255,calc(var(--gl-bd) + .2)) !important} html.glass .btn--primary,html.glass .chat-foot .send,html.glass .mapbtn.route{ background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 55%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px rgba(225,27,34,.28)} html.glass .btn--soft{background:rgba(226,27,34,.14) !important;border:1px solid rgba(226,27,34,.25)} html.glass .mapbtn:not(.route){background:var(--gl-soft) !important;border-color:rgba(255,255,255,var(--gl-bd)) !important} @media (prefers-reduced-motion:reduce){ html.glass :is(.blogo,.pcard){transition:none} html.glass :is(.blogo,.pcard):hover{transform:none} }