/* ════════════════════════════════════════════════════════════════════ KASKAD QATLAMI: @layer depth (v81 · 14-qatlam · OXIRGI) ──────────────────────────────────────────────────────────────────── 1) MUHIT FONI (#tiAmbient) — sekin harakatlanuvchi minimalistik fon 2) KARTOCHKA CHUQURLIGI — kartalar fondan "ko'tarilib" turadi USLUB: klassik, jimjimador emas. Gazeta/jurnal sahifasi kabi — fon e'tiborni tortmaydi, faqat sahifaga havo va chuqurlik beradi, kartochkalar esa uning ustida FIZIK jism kabi turadi. NEGA ENG OXIRGI QATLAM: kartochka soyasi glass.css (10-qatlam) da belgilangan. Uni bosish uchun keyingi qatlam kerak — aks holda yana `!important` yozishga majbur bo'lardik, loyiha esa aynan undan qutulgan edi (izoh: css/glass.css boshida). TEZLIK BUDJETI: regressiya to'ri mobil qurilmada BIR VAQTDA ishlayotgan animatsiya sonini 8 tadan oshirmaslikni talab qiladi (tests/regression.mjs → H guruh). Shu sabab: • butun fon uchun BITTA animatsiya ishlatiladi — dog'lar alohida emas, ular joylashgan konteyner sekin aylanadi; • telefonda animatsiya UMUMAN o'chadi (fon statik qoladi) — bu ham budjet, ham batareya uchun. ════════════════════════════════════════════════════════════════════ */ @layer depth { /* ───────────────────────────────────────────── 1) MUHIT FONI Uchta juda katta, juda past to'yingan radial dog' + nozik to'r chizig'i. Dog'lar `--cc` (joriy bo'lim rangi) dan oziqlanadi, ya'ni bo'limdan bo'limga o'tganda fon ohangi ham asta o'zgaradi — lekin shu qadar kuchsizki, ko'z uni "rang" emas, "havo" deb qabul qiladi. ───────────────────────────────────────────── */ #tiAmbient { position: fixed; inset: 0; z-index: 0; /* fon: sahifa mazmuni ustida emas */ pointer-events: none; overflow: hidden; contain: strict; /* tashqariga hech narsa oqmaydi */ } /* Aylanuvchi konteyner — BITTA animatsiya, ichida uchta dog'. (v82) TEZLIK KUCHAYTIRILDI. Birinchi variantda dog'lar 6–9% to'yinganlikda edi va aylanish 90 soniya davom etardi — natijada fon UMUMAN sezilmasdi, yorug' mavzularda esa butunlay yo'qolardi. Endi ranglar kuchliroq, aylanish ancha tezroq va dog'lar bir-biriga nisbatan ham suriladi (ikkinchi, teskari aylanuvchi qatlam) — harakat ko'zga tashlanadi, lekin matn o'qishga xalaqit bermaydi. */ #tiAmbient .amb-spin { position: absolute; /* Aylanganda burchaklar bo'sh qolmasligi uchun kattaroq */ top: -55%; left: -55%; width: 210%; height: 210%; animation: ambDrift 38s linear infinite; will-change: transform; } #tiAmbient .amb-spin-2 { animation: ambDriftBack 52s linear infinite; } @keyframes ambDrift { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.14); } to { transform: rotate(360deg) scale(1); } } @keyframes ambDriftBack { from { transform: rotate(360deg) scale(1.08); } 50% { transform: rotate(180deg) scale(1); } to { transform: rotate(0deg) scale(1.08); } } #tiAmbient .amb-b { position: absolute; border-radius: 50%; filter: blur(50px); } /* Bo'lim rangi va brend qizili — endi sezilarli darajada */ #tiAmbient .amb-1 { top: 4%; left: 8%; width: 50%; height: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cc, #0abab5) 26%, transparent) 0%, transparent 70%); } #tiAmbient .amb-2 { bottom: 4%; right: 4%; width: 56%; height: 56%; background: radial-gradient(circle, color-mix(in srgb, var(--brand, #bb1919) 20%, transparent) 0%, transparent 68%); } #tiAmbient .amb-3 { top: 34%; left: 42%; width: 44%; height: 44%; background: radial-gradient(circle, color-mix(in srgb, var(--cc, #0abab5) 18%, transparent) 0%, transparent 72%); } /* color-mix ni tanimaydigan brauzer uchun zaxira: aniq ranglar. Avval bunday brauzerda fon UMUMAN chiqmasdi. */ @supports not (color: color-mix(in srgb, red, blue)) { #tiAmbient .amb-1 { background: radial-gradient(circle, rgba(10,186,181,.26) 0%, transparent 70%); } #tiAmbient .amb-2 { background: radial-gradient(circle, rgba(187,25,25,.20) 0%, transparent 68%); } #tiAmbient .amb-3 { background: radial-gradient(circle, rgba(10,186,181,.18) 0%, transparent 72%); } } /* Nozik to'r — "muhandislik qog'ozi" hissi. Statik: harakatlansa matn ortida titragandek ko'rinadi va o'qishga xalaqit beradi. */ #tiAmbient .amb-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--amb-line, rgba(255,255,255,.05)) 1px, transparent 1px), linear-gradient(to bottom, var(--amb-line, rgba(255,255,255,.05)) 1px, transparent 1px); background-size: 76px 76px; /* Chetlarga borgan sari so'nadi — ramka hosil bo'lmaydi */ -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 30%, transparent 100%); } /* ── YORUG' MAVZULAR ── (v82) SINOVDA TUTILGAN XATO: to'r `--gl-edge` dan olingan edi, u esa yorug' mavzuda deyarli oq — oq fonda to'r KO'RINMASDI. Dog'lar ham juda kuchsiz qolib, foydalanuvchi "oq fonda aslo ko'rinmayapti" deb to'g'ri aytdi. Endi yorug' mavzularda to'r QORAMTIR chiziq bilan chiziladi va dog'lar aralashuv rejimini o'zgartiradi. */ [data-theme="white"], [data-theme="silver"], [data-theme="tiffany"], [data-theme="paper"], [data-theme="sepia"] { --amb-line: rgba(22, 32, 44, .09); } [data-theme="white"] #tiAmbient .amb-b, [data-theme="silver"] #tiAmbient .amb-b, [data-theme="tiffany"] #tiAmbient .amb-b, [data-theme="paper"] #tiAmbient .amb-b, [data-theme="sepia"] #tiAmbient .amb-b { /* Oq fonda yorug' dog' ko'rinmaydi — ko'paytirish rejimida u fonni ozgina "bo'yaydi" va shu bilan seziladi. */ mix-blend-mode: multiply; filter: blur(60px); opacity: .55; } /* ── Fon o'chadigan holatlar ── O'qish rejimi, tashqi sayt ramkasi va Mini Word to'liq ekranda fon faqat xalaqit beradi. */ body.rd-on #tiAmbient, body.sf-on #tiAmbient, body.sf-open #tiAmbient, body.mw-full-on #tiAmbient { display: none; } /* Telefonda: harakat sekinroq, lekin BOR — avval butunlay o'chirilgan edi va telefon foydalanuvchisi fonni umuman ko'rmasdi. Ikkinchi qatlam esa telefonda o'chadi (budjet). */ @media (max-width: 719px) { #tiAmbient .amb-spin { animation-duration: 70s; } #tiAmbient .amb-spin-2 { display: none; } #tiAmbient .amb-grid { background-size: 58px 58px; } } @media (prefers-reduced-motion: reduce) { #tiAmbient .amb-spin { animation: none; will-change: auto; } } /* Pardoz `.hero-canvas-3d` ning O'ZIGA qo'yiladi. BIRINCHI URINISH VA UNING XATOSI: pardoz `.hero-intro::after` ga qo'yilib, matn uning ustida qolishi uchun `.hero-intro > * { position: relative; z-index: 2 }` yozilgan edi. Bu esa MUTLAQ joylashgan bolalarni — yuguruvchi lenta va "Kirill" tugmasini — nisbiy holatga o'tkazib yubordi va ular ekran o'rtasiga sirg'alib chiqdi. Ya'ni butun kirish ekrani tartibi buzildi. To'g'ri yechim: pardoz canvas qatlamining ichida (z-index: 2), matn esa allaqachon undan yuqorida — hech kimning `position` iga tegilmaydi. */ .hero-canvas-3d::after { content: ""; position: absolute; left: 50%; top: 50%; /* (v82) PARDOZ KICHRAYTIRILDI. Avval u 1180x720 edi va butun globusni qoplab, materiklarni kulrangga aylantirib qo'yardi — xaritaning ma'nosi yo'qolardi. Endi u faqat matn bloki ortini yopadi va chetlari tezroq so'nadi. */ width: min(780px, 82vw); height: min(430px, 52vh); transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(6, 7, 9, .60) 0%, rgba(6, 7, 9, .38) 46%, rgba(6, 7, 9, .12) 72%, transparent 88%); pointer-events: none; /* `mix-blend-mode: screen` ostida qora hech narsa qilmaydi — shu sabab pardoz normal rejimga qaytariladi. */ mix-blend-mode: normal; } /* Matnning o'zi ham xarita ustida aniq turishi uchun yumshoq soya oladi — bosma dizaynning eski usuli. */ .hero-intro h1, .hero-intro .hero-title, .hero-intro .hero-sub, .hero-intro .hero-quote { text-shadow: 0 2px 18px rgba(4, 6, 8, .85), 0 1px 3px rgba(4, 6, 8, .7); } /* ───────────────────────────────────────────── 2) KARTOCHKA CHUQURLIGI Klassik "ko'tarilgan qog'oz" retsepti — uchta narsa birga: a) TEGISH SOYASI — juda tor, qorong'i. Jism sirtga TEGIB turganini bildiradi. Busiz karta "suzib yurgandek" bo'ladi. b) MUHIT SOYASI — keng, yumshoq, kuchsiz. Balandlikni beradi. c) YUQORI QIRRA — 1px ichki yorug' chiziq. Yorug'lik tepadan tushayotganini aytadi; aynan shu narsa yassi to'rtburchakni HAJMLI qilib ko'rsatadi. Uchtasidan bittasi tushib qolsa — effekt yo'qoladi. ───────────────────────────────────────────── */ html.gl .card, html.gl.ed .card { box-shadow: /* a) tegish */ 0 1px 1px rgba(6, 8, 10, .40), 0 2px 2px rgba(6, 8, 10, .22), /* b) muhit */ 0 6px 14px rgba(6, 8, 10, .20), 0 16px 34px rgba(6, 8, 10, .16), /* c) qirra */ inset 0 1px 0 var(--gl-rim-hi, rgba(255,255,255,.10)), inset 0 -1px 0 var(--gl-rim-lo, rgba(0,0,0,.22)); transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s cubic-bezier(.22, 1, .36, 1), background .16s ease, border-color .16s ease; } html.gl .card:hover, html.gl.ed .card:hover { transform: translateY(-4px); box-shadow: 0 2px 2px rgba(6, 8, 10, .40), 0 4px 6px rgba(6, 8, 10, .26), 0 12px 24px rgba(6, 8, 10, .24), 0 28px 56px rgba(6, 8, 10, .20), 0 48px 90px rgba(6, 8, 10, .14), inset 0 1px 0 var(--gl-rim-hi, rgba(255,255,255,.14)), inset 0 -1px 0 var(--gl-rim-lo, rgba(0,0,0,.22)), var(--gl-glow-hi); } /* Yorug' mavzularda qora soya iflos ko'rinadi — sovuqroq va ancha kuchsizroq qilinadi. */ [data-theme="white"] html.gl .card, [data-theme="silver"] html.gl .card, [data-theme="tiffany"] html.gl .card, html.gl [data-theme="white"] .card, html.gl [data-theme="silver"] .card, html.gl [data-theme="tiffany"] .card { box-shadow: 0 1px 1px rgba(28, 38, 52, .10), 0 2px 3px rgba(28, 38, 52, .07), 0 6px 14px rgba(28, 38, 52, .07), 0 16px 34px rgba(28, 38, 52, .06), inset 0 1px 0 rgba(255, 255, 255, .70); } /* XAB kartochkalari (Otvertka / Taftish / Arabiy Bo'lim / Barcha Kitoblar) — bir xil chuqurlik tili. */ .tcard { box-shadow: 0 1px 1px rgba(6, 8, 10, .34), 0 2px 2px rgba(6, 8, 10, .18), 0 6px 14px rgba(6, 8, 10, .18), 0 16px 34px rgba(6, 8, 10, .14), inset 0 1px 0 var(--gl-rim-hi, rgba(255,255,255,.10)); } .tcard:hover { box-shadow: 0 2px 2px rgba(6, 8, 10, .38), 0 6px 12px rgba(6, 8, 10, .24), 0 18px 36px rgba(6, 8, 10, .22), 0 36px 68px rgba(6, 8, 10, .16), inset 0 1px 0 var(--gl-rim-hi, rgba(255,255,255,.14)), var(--gl-glow-hi); } /* ───────────────────────────────────────────── 3) BOSISH MAYDONLARI — 44x44 (v82) v78 dan beri regressiya to'rida SAKKIZ SINOV yiqilib kelayotgan edi: `.skip-link` 176x41 va `.nb` 40x40 — ikkalasi ham 44px dan kichik. Bu shunchaki sinov talabi emas: WCAG 2.5.5 va Apple/Google qo'llanmalari barmoq uchun eng kam 44px beradi. 40px tugmani telefonda tez-tez "chetlab" bosiladi. Faqat KO'RINISHNI o'zgartirmasdan kattalashtiramiz: ikonka o'lchami o'sha, atrofidagi bosiladigan maydon kengayadi. */ .nb { width: 44px; height: 44px; } .skip-link { min-height: 44px; display: inline-flex; align-items: center; } /* Logotip — balandligi 36px edi. Ko'rinishi o'zgarmaydi: rasm o'sha o'lchamda qoladi, faqat bosiladigan maydon kengayadi. */ .logo { min-height: 44px; min-width: 44px; } /* "Tasodifiy kitob" tugmasi — 43px, bir piksel yetmasdi */ .rw-rand { min-height: 44px; } /* Ikonkali kichik tugmalar: balandlik `min-height` bilan tuzatildi, lekin ENI ham 44px bo'lishi kerak — aks holda ingichka tayoqchani barmoq bilan urish qiyin. */ .tdl-tools .tdl-btn { min-width: 44px; justify-content: center; } /* Telefonda ko'tarilish yo'q (barmoq "hover" i yopishib qoladi), lekin soya — ya'ni chuqurlik hissi — qoladi. */ @media (max-width: 719px) { html.gl .card:hover, html.gl.ed .card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { html.gl .card, html.gl.ed .card, .tcard { transition: none; } html.gl .card:hover, html.gl.ed .card:hover { transform: none; } } }