/* ========================================================================== R-INDEX.CSS · BOSH SAHIFA · 4-BRIF: BOʻSHLIQ · VERTIKAL RITM · AJRALISH brif/4-BOSHLIQ-RITM-13-09.md · 2026-09-13 -------------------------------------------------------------------------- Yuklanish: … → tizim → kompozitsiya → zichlik3 → z-index → boshliq4 → **r-index** Ortga qaytarish: shu faylni oʻchirish yetadi (qur.py topmasa ulamaydi). `z-index.css` ga TEGILMAGAN — 3-brif ishi oʻsha yerda butun qoldi. BU QAYTA DIZAYN EMAS. Rang, shrift, kompozitsiya, tuzilma, matn oʻzgarmagan. Faqat ajralish · ichki munosabat · ritm. -------------------------------------------------------------------------- NEGA: oʻlchov (siyoh↔siyoh, 1440) sahifada RITM YOʻQLIGINI koʻrsatdi — oʻn ikki oʻtishdan sakkiztasi 84–96 px oraligʻida, yaʼni hamma joy bir xil. Brifning 20-bandi aynan buni xato deb yozadi: «comfortable → comfortable → more breathing room → compact → comfortable → strong transition». Ikki joy esa haqiqatan siqilgan edi: · BOSH-01 → BOSH-02 quyuq hero tugagach ATIGI 36 px da yorliq boshlanardi (brif §4: «Dark section ↓ 80–120px transition ↓ light section»); · BOSH-04 → BOSH-05 53 px, sahifadagi eng zich joint — ikkovi bitta OQ sirtda ketma-ket turadi, ular orasida sirt almashuvi ham yoʻq. NIMA QILINDI: har joint boblar xaritasiga qarab beshta pogʻonadan biriga berildi. Balandlik emas, AJRALISH oʻzgardi (brif §21: SECTION HEIGHT ≠ SECTION SEPARATION) — shuning uchun bironta boʻlim choʻzilmadi, eng kichigi (BOSH-12, 451 → 467 px) kichikligicha qoldi, ajralishi esa tashqaridan oshdi. Teskari yoʻnalishda ham bitta tuzatish bor: BOSH-03 ning shapkasidagi 32 px oʻlik havo olib tashlandi (§2 oxiri) — boʻlim 761 → 729 px. -------------------------------------------------------------------------- BOBLAR XARITASI (sahifa nimani hikoya qiladi) I BOSH-01 brend vaʼdasi · quyuq II BOSH-02 qaror asbobi · yorugʻ III BOSH-03 · 04 · 05 mahsulot olami · yuza → oq → oq IV BOSH-06 · 07 · 08 nega muhim (bilim) · canvas → navy → oq V BOSH-09 · 10 ishonch va qadoq · yuza → oq VI BOSH-11 B2B hamkorlik · navy VII BOSH-12 · 13 harakat va soʻrov · yuza → oq Bob ICHIDA — ixcham yoki normal. Bob CHEGARASIDA — keng/bob pogʻonasi. AJRALISH POGʻONALARI (px · = pb + pt, boʻlimlar tegib turadi) ⚠ 2-tur (13.09): bu qator endi 761 dan 1920 gacha HAMMA desktop kengligida AYNAN bir xil — tierlar §3 da px ga qotirildi (izohi oʻsha yerda). 01→02 100 BOB quyuq hero → yorugʻ asbob (sirt↔siyoh; matn↔matn 132) 02→03 112 BOB asbob → mahsulot olami 03→04 86 normal bir bob ichida, lekin sirt yuza→oq almashadi 04→05 72 ixcham BITTA oq sirt, «ikki moy» → «qaysi biri?» — davomi 05→06 126 BOB mahsulot → bilim (eng kuchli oʻtish) 06→07 86 normal bir bob ichida; canvas→navy sirt oʻzi gapiradi 07→08 100 normal navy→oq; quyuq band ichi 50/50 muvozanatda 08→09 126 BOB bilim → ishonch 09→10 72 ixcham ikkovi ham kanistrning oʻzi haqida — guruh 10→11 126 BOB isteʼmolchi → B2B, sirt navy ga oʻtadi 11→12 100 normal navy→yuza (2-tur: 86 → 100, BOSH-11 pb muvozanati) 12→13 72 ixcham «uch qadam» → shu qadamning formasi — davomi Ketma-ketlik: kuchli · kuchli · qulay · ixcham · KUCHLI · qulay · qulay · KUCHLI · ixcham · KUCHLI · qulay · ixcham. Beshta aniq qiymat (72 · 86 · 100 · 112 · 126) = shkala, hamma joyda bir xil emas (brif §6, §20). MOBIL (≤760, boshliq4 tokenlari oʻzi kichrayadi — desktop koʻpaytirilmaydi): 80 · 82 · 62 · 52 · 92 · 62 · 72 · 92 · 52 · 92 · 72 · 52 → brif §15 (48–96). NATIJA — asos = boshliq4 VA r-index IKKALASI ham oʻchirilgan holat (boshliq4 shu passning oʻz umumiy qatlami, shuning uchun «oldin» ga kirmaydi): 1440 8 292 → 8 612 px (+320, +3,9 %) 1280 8 202 → 8 647 (+445, +5,4 %) 1024 9 118 → 9 806 (+688, +7,5 %) 800 10 057 → 10 819 (+762, +7,6 %) 390 14 547 → 15 015 (+468, +3,2 %) Hammasi 8 % budjet ichida; 800–1024 dagi katta ulush §3 ning tier qotirishi — aynan oʻsha kengliklarda bob oʻtishi tieri yoʻq edi. Eng baland boʻlim (1440) 729 px — BOSH-03, eng past 467 px — BOSH-12: bittasi ham choʻzilmagan. (1024 da BOSH-05 = 903 px — matn koʻproq qatorga boʻlingani uchun, ichki balandlik oshirilgani uchun emas.) §1 boʻlim ajralishi · §2 ichki munosabatlar · §3 oʻlchovlar va mobil ========================================================================== */ /* ========================================================================== §1 · BOʻLIM AJRALISHI Ajralish margin bilan emas, PADDING bilan beriladi: boʻlimlar bir-biriga tegib turishi kerak, aks holda ikki sirt orasidan tana foni koʻrinib brend tilidagi «sirt juftligi» buziladi (boshliq4 sharti). Ogʻirlik: `main [data-blok="X"][data-blok]` = (0,2,1) — z-index.css dagi ayni shu shakl bilan teng, r-index KEYIN yuklanadi va bosadi. ========================================================================== */ /* II bob ochiladi — quyuq hero tugagach yorugʻ maydon. Heroga padding-bottom QOʻSHILMAYDI: uning balandligi min(92vh,860px) bilan bogʻlangan master referens, nafas keyingi boʻlimning KIRISHIDAN olinadi. */ main [data-blok="BOSH-02"][data-blok]{ padding-block:calc(var(--pad-bob) + var(--space-md)) var(--pad-ixcham); } /* III bob — mahsulot olami */ main [data-blok="BOSH-03"][data-blok]{padding-block:var(--pad-bob) var(--pad-ixcham)} main [data-blok="BOSH-04"][data-blok]{padding-block:var(--pad-normal) var(--pad-ixcham)} main [data-blok="BOSH-05"][data-blok]{padding-block:var(--pad-ixcham) var(--pad-normal)} /* IV bob — nega muhim */ main [data-blok="BOSH-06"][data-blok]{padding-block:var(--pad-bob) var(--pad-ixcham)} main [data-blok="BOSH-07"][data-blok]{padding-block:var(--pad-normal)} main [data-blok="BOSH-08"][data-blok]{padding-block:var(--pad-normal)} /* V bob — ishonch va qadoq */ main [data-blok="BOSH-09"][data-blok]{padding-block:var(--pad-bob) var(--pad-ixcham)} main [data-blok="BOSH-10"][data-blok]{padding-block:var(--pad-ixcham) var(--pad-normal)} /* VI bob — B2B. Pastki padding ixcham (36) emas, normal (50): quyuq bandning ichki muvozanati BOSH-07 bilan bir xil qoidaga boʻysunadi. 36 px da oq langar plitaning pastki qirrasi navy bandning qirrasidan atigi 36 px da turib, plita banddan «tushib ketayotgandek» oʻqilardi (tepada yorliqqacha 76 → nisbat 2,1:1). Endi 76/50: kirish bob-ochuvchi boʻlib qoladi, oq plita esa BOSH-07 dagi oq plita bilan bir xil 50 px yostiqda oʻtiradi. Boʻlim +14 px (582 → 596) — choʻzilish emas, brif §21 boʻyicha bu ICHKI muvozanat tuzatishi. Ajralishga taʼsiri: 11→12 = 86 → 100 (normal, brif 80–104); mobil 62 → 72. */ main [data-blok="BOSH-11"][data-blok]{padding-block:var(--pad-bob) var(--pad-normal)} /* VII bob — harakat */ main [data-blok="BOSH-12"][data-blok]{padding-block:var(--pad-normal) var(--pad-ixcham)} main [data-blok="BOSH-13"][data-blok]{padding-block:var(--pad-ixcham) var(--pad-normal)} /* ========================================================================== §2 · ICHKI MUNOSABATLAR (brif §2) Shartnoma: yorliq →18→ sarlavha →24→ lid →(shapka margin-bottom 24–32)→ kontent. Bu yerdagi beshta blok `.bosh` tuzilmasidan TASHQARIDA — oʻz klasslari bilan yozilgan, shuning uchun boshliq4 ning umumiy qoidasi ularga yetmaydi. Har biri oʻz joyidagi eng kuchli selektordan OGʻIRROQ yozilgan. ========================================================================== */ /* BOSH-04 · 16/16 edi — yorliq sarlavhaga, sarlavha lidga bir xil masofada turardi, yaʼni pogʻona yoʻq edi. Endi 18 / 24 (18+6). */ main [data-blok="BOSH-04"] .b04__rels{row-gap:var(--r-yorliq)} main [data-blok="BOSH-04"] .b04__rels .lid{margin-top:var(--r-qadam)} /* BOSH-05 · 13 px — yorliq sarlavhaga yopishgan edi (brif: 16–20). z-index.css `[data-blok] .b05v2__kirish` (0,2,0) bilan yozgan; bu (0,2,1). */ main [data-blok="BOSH-05"] .b05v2__kirish{row-gap:var(--r-yorliq)} /* BOSH-10 · 26 px — 16–20 dan yuqori; sarlavha katta boʻlgani uchun 20 da qoldi (brif §16: katta sarlavhaga nafas kerak, lekin munosabat uzilmasin). */ main [data-blok="BOSH-10"] .b10v1__hero{row-gap:var(--r-yorliq-k)} /* BOSH-12 · 16 px → 18 */ main [data-blok="BOSH-12"] .b12v1__kirish{row-gap:var(--r-yorliq)} /* BOSH-13 · 11 px — sahifadagi eng siqilgan ichki munosabat. z-index.css `[data-blok="BOSH-13"] .sorov__chap .bosh` (0,3,0) bilan yozgan, shuning uchun bu yerda (0,3,1). */ main [data-blok="BOSH-13"] .sorov__chap .bosh{row-gap:var(--r-yorliq)} /* BOSH-02 · yorliq qatori bilan asbob paneli orasi 22 px edi — brif §3 «kichik sarlavha → kontent 24–32». */ main [data-blok="BOSH-02"] .tanlash__bosh{margin-bottom:var(--space-md)} /* BOSH-09 · PROKSIMITI TESKARI EDI (brif §3, §7, §23). boshliq4 §4 ning umumiy `main h4 + p{margin-top:24}` qoidasi kartaning oʻz grid `row-gap:16` i USTIGA qoʻshilib, h4 → p ni 40 px ga chiqargan edi; ayni paytda ikki karta ORASI 26 px (mobil 14) edi. Yaʼni guruh ICHI guruhlar ORASIdan katta — «Qopqoq plombasi» sarlavhasi oʻz matnidan koʻra oldingi kartaning matniga yaqinroq turardi. Niyat tiklandi (umumiy qatlamga tegilmagan — sabab hisobotning `umumiy_taklif` ida): ichki h4 → p 24 (mobil 16) · brif «kichik sarlavha → kontent 24–32» tashqi karta → karta 32 (mobil 24) · guruhlar orasi ichkaridan katta Ustun oʻngidagi register sarlavhasining inline margini ham shu tokenga ulandi (BOSH-09.html: `var(--r-b09-ich,var(--s5))`) — bitta boʻlim ichida bitta munosabat qoidasi: 20 → 24 (mobil 16). */ main [data-blok="BOSH-09"] .himoya__k > h4 + p{margin-top:0} main [data-blok="BOSH-09"] .himoya__k{row-gap:var(--r-b09-ich)} main [data-blok="BOSH-09"] .himoya{row-gap:var(--r-b09-tash)} /* …va tik yigʻilganda uchinchi pogʻona: ikki USTUN orasi kartalar orasidan katta boʻlsin (mobilda ikkovi ham 24 boʻlib qolar edi = ierarxiya yassi). Endi 16 (ichki) → 24 (karta↔karta) → 32 (ustun↔ustun), brif §13 ichida. Desktopda ustunlar yonma-yon — row-gap koʻrinmaydi, ajratuvchi column-gap. */ main [data-blok="BOSH-09"] .grid.g-7-5{row-gap:var(--space-lg)} /* BOSH-03 · OʻLIK BOʻSHLIQ (brif §21: «boʻlim oʻzi boʻsh koʻrinsa — ichki balandligini kamaytir»). z-index.css `.z3__t` ga ataylab `margin-bottom:0` bergan, chunki desktopda u toʻrning CHAP ustunida turadi va ostida hech nima yoʻq. boshliq4 ning umumiy `main [data-blok] .bosh` (0,2,1) qoidasi bu (0,2,0) niyatni bosib, qatorga 32 px quruq havo qoʻshib qoʻygan edi — shapka bloki 117 px oʻrniga 149 px. Niyat tiklandi: −32 px, kompozitsiya oʻzgarmadi. (Umumiy qatlamdagi sabab hisobotning `umumiy_taklif` ida.) */ main [data-blok="BOSH-03"] .z3__t{margin-bottom:0} /* ========================================================================== §3 · OʻLCHOVLAR — tasodifiy qiymat yoʻq, boshliq4 §1 tokenlaridan ========================================================================== */ :root{ --r-yorliq:18px; /* yorliq → sarlavha (brif: 16–20) */ --r-yorliq-k:20px; /* katta sarlavha varianti (brif: 16–20) */ --r-qadam:6px; /* 18 + 6 = 24: sarlavha → lid (brif: 20–28) */ /* BOSH-09 · guruh ichi / guruhlar orasi (brif §3 va §23 «proksimiti»). `--r-b09-ich` BOSH-09.html dagi register sarlavhasining inline `margin-bottom` iga ham beriladi — fallback `var(--s5)` bilan, shuning uchun r-index oʻchirilsa markup avvalgi holatiga qaytadi. */ --r-b09-ich:var(--space-md); /* 24 · h4 → matn (brif: 24–32) */ --r-b09-tash:var(--space-lg); /* 32 · karta → karta (ichkaridan katta) */ } /* -------------------------------------------------------------------------- DESKTOP TIER — px, vw EMAS (brif §1, §6) boshliq4 §1 tierlarni `clamp(min, vw, max)` bilan beradi. Oʻlchov koʻrsatdi: 761–1250 px oraligʻida vw oʻrtasi ishlaydi va POGʻONA YIGʻILIB QOLADI — @800/@900 eng katta ajralish 89, @1024 → 91, @1100 → 88, @1150 → 103. Yaʼni brifning 112–144 «katta / bob oʻtishi» tieri butun shu bandda YOʻQ, uchta joint esa 53–54 px — desktop ixcham polidan (56) past. Natijada planshet-gorizontal va 11–13" noutbukda «yangi bob boshlandi» signali (brif §4, §6, §20 — bu passning asosiy maqsadi) ishlamas edi. Brif pogʻonalarni ABSOLUT px da beradi: 112 px ajralish 1024 da ham, 1440 da ham bir xil oʻqiladi — desktopda vw skalasi keraksiz. Shuning uchun index uchun tierlar ≥761 da qotiriladi. Ladder endi butun desktopda barqaror: ixcham 72 · normal 100 · keng 132 · bob+ixcham 112 · bob+normal 126. 1440 dagi natija AYNAN oʻsha qiymatlar — u yerda ladder oʻzgarmaydi; oʻsish 761–1250 oraligʻida yigʻiladi (@1024 +688 px = +7,5 %, @800 +762 = +7,6 %: 8 % budjet ichida, yuqoridagi NATIJA jadvaliga qarang). (Bu umumiy qatlamga ham tegishli — hisobotning `umumiy_taklif` ida.) -------------------------------------------------------------------------- */ @media (min-width:761px){ :root{ --pad-ixcham:36px; /* 36+36 = 72 ixcham (brif 56–80) */ --pad-normal:50px; /* 50+50 = 100 normal (brif 80–104) */ --pad-keng:66px; /* 66+66 = 132 keng (brif 112–144)*/ --pad-bob:76px; /* 76+36 = 112 · 76+50 = 126 bob */ } } @media (max-width:760px){ :root{ --r-yorliq:16px; /* brif §15 mobil ichki pol qiymati */ --r-yorliq-k:18px; --r-qadam:6px; /* 16 + 6 = 22 */ /* mobilda desktop qiymati koʻpaytirilmaydi — oʻz shkalasi (brif §15: 16–32). Proksimiti nisbati saqlanadi: ichki 16 · tashqi 24. */ --r-b09-ich:var(--space-sm); /* 16 */ --r-b09-tash:var(--space-md); /* 24 */ } /* boshliq4 mobil `.bosh` ni 14 px ga tushiradi — brifning mobil poli 16. Sahifadagi hamma shapka bitta qiymatda tursin (BOSH-03 · 06 · 09 · 13 ham shu yerga kiradi), aks holda index ichida 14 va 18 aralashib ketardi. */ main [data-blok^="BOSH-"] .bosh, main [data-blok^="BOSH-"] .bosh-qator .bosh{row-gap:var(--r-yorliq)} /* BOSH-03 · tik yigʻilganda sarlavha bloki bilan lid orasi 44 px edi (gap 20 + `.z3__t` ning oʻgʻirlangan 24 px margini). Margin tiklangach qator boʻshligʻining oʻzi munosabatni beradi: 24 + 6 = 30 (brif: 16–32). */ main [data-blok="BOSH-03"] .z3__bosh{row-gap:var(--space-md)} } /* ========================================================================== §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="BOSH-07"] .bp{row-gap:var(--space-sm)} main [data-blok="BOSH-08"] .bp{row-gap:var(--space-sm)} main [data-blok="BOSH-10"] .b10v1__matn{row-gap:var(--space-sm)} main [data-blok="BOSH-11"] .bp{row-gap:var(--space-sm)} main [data-blok="BOSH-12"] .b12v1__q{row-gap:var(--space-sm)}