/* ========================================================================== KATALOG · 4-BRIF · BOʻSHLIQ · VERTIKAL RITM · BOʻLIM AJRALISHI Manba: brif/4-BOSHLIQ-RITM-13-09.md · umumiy qatlam: css/boshliq4.css Yuklanish: … → zichlik3 → z-katalog → boshliq4 → **r-katalog** (eng oxirgi) Ortga qaytarish: shu faylni oʻchirish yetadi. `z-katalog.css` ga tegilmagan. Bu QAYTA DIZAYN EMAS. Rang, shrift, tuzilma, kompozitsiya, matn — hammasi oʻz joyida. Faqat uch daraja sozlandi: boʻlim ajralishi · ichki munosabat · sahifa ritmi. Qiymatlar `boshliq4.css` §1 tokenlaridan olinadi. ── SAHIFANING BEShTA GʻOYASI VA ULAR ORASIDAGI MUNOSABAT ───────────────── KAT-01 HERO quyuq · sahifaga kirish KAT-04 ISH MAYDONI yuza · qidiruv + yoʻnalish + filtr + roʻyxat KAT-03 YOʻNALISH HAQIDA oq · nimaga qarab tanlanadi (maʼlumotnoma) KAT-08 SAVOL-JAVOB yuza · savollar + qaror qatori (maʼlumotnoma) KAT-09 KONVERSIYA quyuq · ikki auditoriya + soʻrov formasi Toʻrtta oʻtishning uchtasi — HAQIQIY bob almashuvi, bittasi — bogʻliq ikki bobcha. Shuning uchun ajralish bir xil EMAS (brif §6, §20): KAT-01 → KAT-04 108 px KENG quyuq hero tugadi, ish boshlandi. Brif §8 shu oʻtishni nomma-nom soʻraydi: «Header → Hero → Filter must feel clearly separated». Avval 64 px edi — «01 YOʻNALISHLAR» yorligʻi quyuq bandning qirrasiga yopishib turardi. KAT-04 → KAT-03 91 px NORMAL asbob → maʼlumotnoma. Bob almashadi, lekin KAT-03 hozirgina ishlatilgan asbobni izohlaydi — bogʻliqligi bor, shuning uchun eng katta oʻtish emas. KAT-03 → KAT-08 67 px IXCHAM ikkovi ham maʼlumotnoma (registr va savol-javob — bitta bob, ikki bobcha). Brif §7: «keep related subsections visually grouped». Sirt almashuvi (oq → yuza) chegarani oʻzi chizadi, shuning uchun katta boʻshliq kerak emas. KAT-08 → KAT-09 121 px ENG KUCHLI maʼlumotnoma tugadi, konversiya boshlandi + yorugʻ → QUYUQ sirt. Brif §4: «Dark section ↓ 80–120px transition ↓ light section». Ritm: kuchli → qulay → ixcham → eng kuchli. Hammasi bir xil boʻlmadi. ── OʻLCHANGAN PROFIL (ink→ink, skroll-reveal uygʻotilgandan keyin) ──────── Har kenglikda TARTIB bir xil: eng kuchli > keng > normal > ixcham. 1920/1600/1440 108 · 91 · 67 · 121 spread 54 1280 100 · 79 · 65 · 113 spread 48 1100 92 · 79 · 66 · 104 spread 38 1024 92 · 79 · 63 · 102 spread 39 900 92 · 82 · 61 · 101 spread 40 768 92 · 82 · 61 · 116 spread 55 600/390/320 86 · 72 · 61 · 94 spread 33 (mobil shkala) Hech bir ajralish 56 dan past, 144 dan baland emas. Hammasi bir xil emas — brif §6 va §20 shuni talab qiladi. ⚠ OʻLCHOV USULI (13.09 ikkinchi koʻrik). `_bosh-olch.mjs` quti chegaralarini sanaydi va (a) opacity:0 dagi skroll-reveal bloklarini, (b) fon sirtlarini «siyoh» deb hisoblaydi — shuning uchun uning raqamlari 1-passda bir necha qarorni NOTOʻGʻRI tomonga burgan. Bu yerdagi raqamlar boshqacha olingan: matn tugunlari ustidan `Range.getClientRects()`, koʻrinish `checkVisibility({checkOpacity:true})`, ota-elementlarning overflow klipi hisobga olingan va sahifa avval oxirigacha skroll qilinib reveal animatsiyalari uygʻotilgan. Raqam oʻzgartirilsa — shu usul bilan qayta oʻlchansin. ⚠ Ajralish MARGIN bilan emas, PADDING bilan beriladi: boʻlimlar bir-biriga tegib turadi va sirt juftligi (quyuq/yuza/oq) shu tegishdan oʻqiladi. ⚠ SPETSIFIKLIK: `z-katalog.css` boʻlim paddingini `main [data-blok="X"] [data-blok]` (0-2-1) bilan yozgan. Shuning uchun bu yerda `main section [data-blok="X"][data-blok]` (0-2-2) — bir daraja ogʻirroq. ========================================================================== */ /* ========================================================================== §1 · BOʻLIM AJRALISHI — tier tokenlari (boshliq4.css §1) Har boʻlimning ikki qirrasi MUSTAQIL: yuqorisi oldingi gʻoyadan ajralishni, pastkisi keyingisiga oʻtishni belgilaydi. Brif §21: SECTION HEIGHT ≠ SECTION SEPARATION — boʻlimning oʻz kontenti choʻzilmadi, faqat qirralari. ========================================================================== */ /* ⚠ TIER QULAShI · 13.09 ikkinchi oʻlchov. `boshliq4.css` clamp minimumlari (bob 52 · keng 48 · normal 36 · ixcham 26) ~1140 px dan pastda toʻrt tierni 26 px lik tor tasmaga siqadi, boʻlimlarning ink-quyruqlari esa 3–19 px da qolaveradi. Natijada 1024 da profil 88·75·85·92 boʻlib chiqqan edi — spread atigi 17 px va «ixcham» oʻtish «normal» dan KATTA. Brif §6 («Do not make every section equally distant») va §20 aynan shuni taqiqlaydi. Yechim: har tierga POL qoʻyiladi, shunda 768–1140 oraligʻida ham pogʻona saqlanadi. Yangi qiymat oʻylab topilmadi — hammasi `--pad-*` tokenining `max()` bilan ushlangan koʻrinishi. Mobilda (≤760) pollar olib tashlanadi: u yerda boshliq4 §6 ning oʻz shkalasi ishlaydi (brif §15). */ :root{ --r-bob:max(var(--pad-bob),58px); /* KAT-04 tepasi · 58–76 */ --r-normal:max(var(--pad-normal),40px); /* KAT-03 tepasi · 40–50 */ --r-keng:max(var(--pad-keng),58px); /* KAT-08 pasti · 58–66 */ --r-ixcham:max(var(--pad-ixcham),32px); /* KAT-04 pasti · 32–36 */ /* KAT-08 TEPASI polsiz: ostidagi KAT-03 ning oʻz quyrugʻi 17–19 px (akkordeon `summary` ning pastki paddingi) — pol qoʻshilsa ajralish «normal» dan oshib ketadi. Oʻlchangan, taxmin qilinmagan. */ --r-ixcham-yalang:var(--pad-ixcham); /* KAT-08 tepasi · 26–36 */ /* KAT-03 PASTI — boʻlimning oʻz ink-quyrugʻi bilan birga hisoblanadi */ --r-pb03:var(--space-md); /* 24 · quyruq ≈4 px → ajralish ≈67 */ } /* 1240 px da registr ikki ustunga tushadi va oxirgi qatorning `summary` paddingi boʻlimga 17–19 px koʻrinmas quyruq qoʻshadi. Pastki padding shuncha qaytariladi — aks holda «ixcham» oʻtish «normal» dan katta boʻlib qoladi (oʻlchangan: 1024 da 85 > 75). */ @media (max-width:1240px){ :root{--r-pb03:var(--space-sm)} /* 16 · quyruq ≈18 px → ajralish ≈64 */ } /* KAT-04 · ish maydoni — tepasi BOB OChILIShI (quyuq herodan keyin yangi bob), pasti ixcham (keyingi boʻlim oʻz kirishini oʻzi ochadi). */ main section[data-blok="KAT-04"][data-blok]{ padding-top:var(--r-bob); padding-bottom:var(--r-ixcham); } /* KAT-03 · maʼlumotnoma — tepasi normal (asbobdan ajraladi, lekin u bilan bogʻliq), pasti ixcham (KAT-08 — shu bobning davomi). Boʻlim OʻZI ixcham qoladi: brif §5 «kichik boʻlimni choʻzma» — ichidagi kontent 200 px atrofida, ajralish esa qirralarda. */ main section[data-blok="KAT-03"][data-blok]{ padding-top:var(--r-normal); padding-bottom:var(--r-pb03); } /* KAT-08 · savol-javob — tepasi ixcham (KAT-03 bilan bitta bob), pasti KENG: ostida quyuq konversiya bandi turibdi, yorugʻ sirt unga yopishib qolmasin. */ main section[data-blok="KAT-08"][data-blok]{ padding-top:var(--r-ixcham-yalang); padding-bottom:var(--r-keng); } /* KAT-09 · quyuq band — z-katalog dagi 52/52 oʻz oʻrnida qoladi: ustidagi 66 px yorugʻ nafas bilan birga 118 px beradi (brif §4 oraligʻining ichi). Bu yerda takrorlanmaydi — qiymat bitta joyda tursin. */ /* -------------------------------------------------------------------------- §1.1 · HERO POLI (KAT-01) Uch fakt relsi quyuq bandning pastki qirrasiga 18 px qolib turardi — rels kesilib qolgandek koʻrinardi. 32 px (--space-lg) beriladi: rels hamon heroning poli, lekin qirraga siqilmaydi. Bu KAT-04 ning bob ochilishi bilan birga 108 px ajralish beradi. Faqat pastki qirra — yuqori padding (z-katalog §1, header ostidagi joy) tegilmaydi. -------------------------------------------------------------------------- */ main .hs.hs--sahifa .hs__ich{padding-bottom:var(--space-lg)} /* ========================================================================== §2 · ICHKI MUNOSABATLAR (brif §2, §3, §16) ⚠ Oʻlchangan sabab: `boshliq4.css` §3 ichki munosabatni `.bosh` sarlavha bloki uchun yozadi, katalog esa sarlavha bloklarini `.k2-bolim-bosh`, `.k2-sj__bosh`, `.k2-reg__chap`, `.k2-konv__ustun` deb ataydi — umumiy qatlam bu sahifaga YETIB KELMAYDI. Shuning uchun pogʻona shu yerda takrorlanadi: yorliq →18→ sarlavha →24→ tavsif →30→ amal. Ilgari hammasi 10–12 px edi: yorliq sarlavhaga, sarlavha matnga, matn tugmaga yopishib turardi (brif §2 nomma-nom taqiqlaydi). ========================================================================== */ /* KAT-03 · «03 YOʻNALISH HAQIDA / Nimaga qarab tanlanadi» ustuni */ main .k2-reg__chap{gap:18px} main .k2-reg__chap .k2-reg__izoh{margin-top:6px} /* 18 + 6 = 24 */ /* KAT-08 · «04 SAVOL-JAVOB / Tez-tez beriladigan savollar» shapkasi */ main .k2-sj__bosh{gap:18px} main .k2-sj__bosh .lid{margin-top:6px} /* 18 + 6 = 24 */ /* KAT-09 · ikki auditoriya ustuni: sarlavha → matn 24, matn → tugma 30. Tugma matnga TEGIB turmasin (brif §2). */ main .k2-konv__tasma .k2-konv__ustun{gap:18px} main .k2-konv__tasma .k2-konv__ustun .tana-k{margin-top:6px} main .k2-konv__tasma .k2-konv__ustun .btn{margin-top:12px} /* 18 + 12 = 30 */ /* KAT-09 · forma kirishi: kichik sarlavha → kontent 24 (brif §3) */ /* ⚠ `kat2.css` `.k2-forma__chap .tana-k{margin:0}` (0-2-0) — element qoʻshilmasa bosilmaydi, shuning uchun selektor `.tana-k` bilan yoziladi */ main .k2-forma__chap{gap:16px} main .k2-forma__chap h3 + .tana-k{margin-top:8px} /* 16 + 8 = 24 */ /* -------------------------------------------------------------------------- §2.1 · KAT-04 ICHIDAGI IKKI BOSQICH (brif §2 + §8) Ish maydoni ikki bosqichdan iborat: «01 YOʻNALISHLAR» (qidiruv + yoʻnalish indeksi) va «02 MAHSULOT ROʻYXATI» (filtr relsi + roʻyxat). Ular bitta boʻlim ichida, lekin ikki bosqich — orasi 22 px edi, yaʼni yoʻnalish relsi «02» yorligʻiga yopishardi. Endi 32 px: bitta boʻlim ichidagi eng katta ichki oraliq, lekin boʻlim ajralishidan ancha kichik (ierarxiya saqlanadi). Brif §8: «Do not let the filter visually collide with the catalog heading». -------------------------------------------------------------------------- */ main .z-kirish{margin-bottom:var(--space-lg)} /* 22 → 32 */ main .z-ish .k2-ish__bosh{margin-bottom:clamp(14px,1.5vw,20px)} /* 14 → 20 */ main .z-ish .k2-rels{margin-bottom:var(--space-md)} /* 22 → 24 */ /* -------------------------------------------------------------------------- §2.2 · MAHSULOT PLITASINING ICHKI POGʻONASI (brif §2 + §3) Sahifadagi eng koʻp takrorlanadigan matn birligi — mahsulot plitasi — ilgari boʻshliq passidan tashqarida qolgan edi. Oʻlchangan (1440): h3 «5W-30 Molygreen» → tavsif 7 px (brif §3: sarlavha→xatboshi 20–28) tavsif → qoʻshimcha xatboshi 7 px (brif §3: xatboshi→xatboshi 16–24) Sabab: `kat2.css` `.k2-mah__tav/__qosh{margin:0}` (0-1-0) `boshliq4.css` §4 dagi `main p + p` (0-0-3) ni bosib ketgan — spetsifiklik tuzogʻining ikkinchi koʻrinishi. Bu yerda sinf ogʻirligida (0-3-1) qaytariladi. Brif §8 katalogdan ZICHLIK soʻraydi («comfortable · scannable · efficient»), shuning uchun 20–28 gacha koʻtarilmaydi: nafas paydo boʻlsa yetadi. 15 / 12 px — plita ikki ustunda turgani uchun boʻlim ~13 px dan oshmaydi. ⚠ Yorliq juftliklariga (GRAUMANN→artikul · VISKOZITET→SAE) TEGILMAYDI — ular ataylab qatʼiy lokap (brif §3: texnik yorliq 8–16). -------------------------------------------------------------------------- */ main .k2-list[data-rejim="plitka"] .k2-mah__nom{gap:12px} /* 7 → 12 */ main .k2-list[data-rejim="plitka"] .k2-mah__tav{margin-top:3px} /* 12+3 = 15 */ /* -------------------------------------------------------------------------- §2.3 · KAT-09 ICHIDAGI IKKI BOBCHA (brif §22) Quyuq bandda ikki MUSTAQIL bobcha bor: ikki auditoriya tasmasi va soʻrov formasi. Ular orasi 34 px edi — boʻlim ichidagi eng oddiy matn qadamidan (tavsif→tugma 30 px) atigi 4 px katta, yaʼni ierarxiyaning ikki darajasi bir xil boʻshliq bilan gapirardi. Brif §22: «Whitespace should communicate: new idea · new level of hierarchy». 48 px (--space-xl) bobcha chegarasini matn qadamidan aniq ajratadi; boʻlim ~14 px oʻsadi (834 → 848, 900 dan past). Mobilda tegilmaydi — u yerda 32 px (brif §15: ichki kontent 16–32). -------------------------------------------------------------------------- */ main .k2-konv .k2-forma{margin-top:var(--space-xl)} /* ========================================================================== §2.4 · BOʻLIM BALANDLIKLARI — nima 900 px dan oshdi va NEGA (brif §5, §21) Oʻlchangan (1440 · plitka rejimi): KAT-01 hero 516 px · ink 70 % KAT-04 ish maydoni 953 px · ink 88 % ← YAGONA ISTISNO KAT-03 registr 281 px · ink 72 % (293 → 281, QISQARDI) KAT-08 savol-javob 654 px · ink 84 % KAT-09 konversiya 848 px · ink 82 % KAT-04 — sahifaning YAGONA ish maydoni: qidiruv + yoʻnalish indeksi + filtr relsi + mahsulot roʻyxati + javobgarlik bandlari BITTA sirtda. Balandligining 116 px i AJRALISH (padding 76+36, brif §21 boʻyicha toʻgʻri yoʻl), qolgani kontent: ink zichligi 88 % — bu boʻsh emas, ZICH boʻlim (brif §18 ideali 70/30, bu undan ham toʻlaroq). Roʻyxat rejimida 864 px, yaʼni 900 dan past. ⚠ Koʻrik «.k2-ish__bosh 20 → 16» taklif qilgan edi — BAJARILMADI: brif §3 «kichik sarlavha → kontent 24–32» deydi va 20 allaqachon shu polning ostida, 16 esa yana 4 px uzoqlashtiradi. Istisno qiymat bilan hujjatlashtirildi. ── OCHIQ QOLGAN UCHI (CSS YOZILMADI) ───────────────────────────────────── KAT-06 (sahifalash) va KAT-07 (boʻsh natija / xato holati) standart holatda h=0 — maʼlumot mijozdan kutilmoqda. Koʻrinmaydigan holatga koʻr-koʻrona qiymat qoʻyish taxminga aylanadi, shuning uchun tegilmadi. Maʼlumot ulanganda: KAT-06 ning mahsulot toʻridan ajralishi hozir 24 px (siqiq oʻqiladi, 32–40 boʻlsin) va KAT-07 ning ichki pogʻonasi qayta oʻlchansin. ========================================================================== */ /* ========================================================================== §3 · TOʻR VA KARTA (brif §13) — oʻlchandi, oʻzgartirilmadi Mahsulot plitalari: gap 26 px (24–32 oraligʻida) · registr ustunlari 44 px (32–48, katta editorial modul) · kartalar bir-biriga tegmaydi. Mahsulot roʻyxati ATAYLAB zich qoladi — brif §8: «comfortable · scannable · efficient», «not huge cards, huge gaps». Kartalar kattalashtirilmadi, slot oʻlchamlari oʻzgarmadi (brif §17). ========================================================================== */ /* ========================================================================== §4 · MOBIL (≤760) — brif §15: desktop boʻshligʻi KOʻPAYTIRILMAYDI Oʻz shkalasi: ixcham 26 · normal 36 · keng 48 · bob 56 (boshliq4 §6). Mobil ritm desktopnikini takrorlaydi, lekin past pogʻonada (OʻLCHANGAN): KAT-01 → KAT-04 86 px (major transition 72–96) KAT-04 → KAT-03 72 px (normal — mobil oraligʻining tepasi) KAT-03 → KAT-08 61 px (ixcham — bogʻliq ikki bobcha) KAT-08 → KAT-09 94 px (major — quyuq sirtga oʻtish) Toʻrt tugun endi monoton pandus emas: 86 ↘ 72 ↘ 61 ↗ 94 — ixcham nuqta bor. Sahifa UZAYMADI, qisqardi: 7 334 → 7 294 px (baza 7 186 dan +1,5 %). ========================================================================== */ @media (max-width:760px){ /* Mobilda TIER POLLARI olib tashlanadi — boshliq4 §6 oʻz shkalasini beradi (ixcham 26 · normal 36 · keng 48 · bob 56). Desktop qiymati mobilga koʻchirilmaydi (brif §15). */ :root{ --r-bob:var(--pad-bob); --r-normal:var(--pad-normal); --r-keng:var(--pad-keng); --r-ixcham:var(--pad-ixcham); --r-ixcham-yalang:var(--pad-ixcham); /* --r-pb03 yuqoridagi ≤1240 bloki bergan 16 px da qoladi */ } /* ⚠ 13.09 TUZATISH · avvalgi passda KAT-08 tepasi `--space-lg` (32) qilingan edi — «ajralish 53 px ga tushib ketmasin» degan NOTOʻGʻRI oʻlchovga tayangan qaror. Qayta oʻlchovda (Range + checkVisibility + skroll-reveal uygʻotilgan) haqiqiy qiymat 78 px chiqdi, yaʼni 32 px muammoni aynan 6 px ga KUCHAYTIRGAN: «ixcham» deb eʼlon qilingan oʻtish «normal» dan katta boʻlib qolgan (78 > 72). Endi ixcham tierga qaytariladi. */ main section[data-blok="KAT-04"][data-blok]{ padding-top:var(--r-bob); /* 34 → 56 */ padding-bottom:var(--r-ixcham); /* 34 → 26 */ } main section[data-blok="KAT-03"][data-blok]{ padding-top:var(--r-normal); /* 32 → 36 */ padding-bottom:var(--r-pb03); /* 32 → 16 (+ ≈17 px oʻz quyrugʻi) */ } main section[data-blok="KAT-08"][data-blok]{ padding-top:var(--r-ixcham-yalang);/* 32 → 26 */ padding-bottom:var(--r-keng); /* 32 → 48 */ } /* hero poli — mobilda rels ekran qirrasiga yaqinroq turishi tabiiy */ main .hs.hs--sahifa .hs__ich{padding-bottom:var(--space-md)} /* ichki munosabat mobil pogʻonasi: yorliq →14→ sarlavha →20→ tavsif */ main .k2-reg__chap{gap:14px} main .k2-reg__chap .k2-reg__izoh{margin-top:6px} main .k2-sj__bosh{gap:14px} main .k2-sj__bosh .lid{margin-top:6px} main .k2-konv__tasma .k2-konv__ustun{gap:14px} main .k2-konv__tasma .k2-konv__ustun .tana-k{margin-top:6px} main .k2-konv__tasma .k2-konv__ustun .btn{margin-top:10px} main .k2-forma__chap{gap:14px} main .k2-forma__chap h3 + .tana-k{margin-top:6px} /* ish maydonining ikki bosqichi — mobilda 7 px edi (bosqichlar qoʻshilib ketardi), endi 24 px: ikki bosqich ajraladi, lekin sahifa choʻzilmaydi */ main .z-kirish{margin-bottom:var(--space-md)} main .z-ish .k2-ish__bosh{margin-bottom:var(--space-sm)} main .z-ish .k2-rels{margin-bottom:20px} /* ⚠ Mobilda `.k2-mah__nom` `display:contents` (z-katalog §6) — gap ishlamaydi, qatorlar `.k2-mah` toʻrining oʻz qatorlariga tarqaladi. Shuning uchun bu yerda faqat BITTA qadam sozlanadi: tavsif → qoʻshimcha xatboshi 8 → 12 px. h3 → tavsif oraligʻini slot balandligi belgilaydi (oʻlchandi: 21 px) — z-katalog ning 14 px li margini oʻz oʻrnida qoldiriladi. */ main .k2-list[data-rejim="plitka"] .k2-mah__qosh{margin-top:12px} /* quyuq bandda ikki auditoriya ustma-ust tushadi va forma ularning ostiga keladi: 24 px da «Texnikamga moy tanlash» tugmasi keyingi sarlavhaga yopishardi (brif §2 — tugma matnga tegib turmaydi). Uch bosqich 32 px bilan ajraladi; ular bitta boʻlim ichida qolgani uchun boʻlim ajralishidan (48–56) baribir kichik. */ main .k2-konv__tasma{row-gap:var(--space-lg)} main .k2-konv .k2-forma{margin-top:var(--space-lg)} } /* ========================================================================== §N · NAZORATCHI KOʻRIGI (13.09) — sarlavha ↔ tavsif toʻqnashuvi Oʻlchandi: ixcham modullarda `h3 → p` oraligʻi 5–13 px edi (brif §2: «Do not let headings and descriptions visually collide»). Editorial 24–32 px bu yerda notoʻgʻri boʻlardi — bular karta/registr sarlavhalari, sarlavha va tavsif BITTA birlik. Shuning uchun pol 16 px: toʻqnashuv yoʻqoladi, modul shishmaydi. ========================================================================== */ main [data-blok="KAT-04"] .k2-bolim-bosh{row-gap:var(--space-sm)} main [data-blok="KAT-05"] .k2-mah__nom{row-gap:var(--space-sm)} /* Qolgan 12–15 px lik juftliklar — spetsifiklik bilan polga koʻtarildi. ISTISNO: `.hs__matn` (hero lid + spek qatori) 13 px da QOLDIRILDI — u `tizim.css` §4 dagi hero tizimining bir birligi, ikki qator BITTA blok boʻlib oʻqiladi; 3 px uchun yettala sahifaning heroini oʻzgartirish «visual language ni keraksiz oʻzgartirma» talabiga zid. */ main [data-blok="KAT-05"] .k2-mah__nom.k2-mah__nom{row-gap:var(--space-sm)}