/* ========================================================================== BOSHLIQ-4 · 4-brif (13.09): BOʻSHLIQ · VERTIKAL RITM · BOʻLIM AJRALISHI «More breathing room WITHOUT creating huge empty sections.» Uch daraja MUSTAQIL boshqariladi (brifning CORE RULE bandi): 1. ICHKI boʻshliq — boʻlim ichidagi elementlar orasi 2. BOʻLIM AJRALISHI — ikki boʻlim kontenti orasidagi masofa 3. SAHIFA RITMI — ixcham / normal / keng navbatlashuvi Yuklanish: … → tizim → kompozitsiya → zichlik3 → z- → **boshliq4** → r- Ortga qaytarish: `qur.py` dan "boshliq4" ni olib tashlash. ⚠ BOʻLIM AJRALISHI = ikki qoʻshni paddingning YIGʻINDISI. Boʻlimlar bir-biriga TEGIB turadi (sirt almashuvi shu bilan oʻqiladi), shuning uchun ajralish margin bilan emas, padding bilan beriladi — margin boʻlsa ikki sirt orasida tana foni koʻrinib, brend tilidagi «sirt juftligi» buziladi. ========================================================================== */ /* -------------------------------------------------------------------------- §1 · BOʻSHLIQ TOKENLARI (brif §19) — butun saytda YAGONA shkala. Bundan keyin boʻshliq qiymati «qoʻlda» yozilmaydi, shu tokenlardan olinadi. -------------------------------------------------------------------------- */ :root{ --space-xs:8px; --space-sm:16px; --space-md:24px; --space-lg:32px; --space-xl:48px; --space-2xl:64px; --space-3xl:80px; --space-4xl:96px; --space-5xl:120px; --space-6xl:144px; /* --- boʻlim paddingi = ajralishning YARMI --- */ /* ixcham : 36+36 = 72 px ajralish (brif: 56–80) */ /* normal : 50+50 = 100 px (brif: 80–104) */ /* keng : 66+66 = 132 px (brif: 112–144) */ /* bob : 76 px — faqat bir tomonda, katta gʻoya oʻtishida (≤144) */ --pad-ixcham:clamp(26px,2.6vw,36px); --pad-normal:clamp(36px,3.5vw,50px); --pad-keng:clamp(48px,4.6vw,66px); --pad-bob:clamp(52px,5.3vw,76px); --tz-pad-a:var(--pad-keng); --tz-pad-b:var(--pad-normal); --tz-pad-c:var(--pad-ixcham); } /* ⚠ OʻLCHANGAN TUZATISH (13.09): yuqoridagi clamp lar `vw` ga bogʻlangani uchun 761–1250 px oraligʻida toʻrtala tier ham oʻz minimumiga qulab tushardi va 26–36 px lik tor tasmaga siqilardi — yaʼni shu kengliklarda RITM YOʻQOLARDI (bob oʻtishi normal bilan tenglashib qolardi). Desktop diapazonida tierlar qatʼiy px: pogʻonalar 761 dan 1920 gacha bir xil oʻqiladi. */ @media (min-width:761px){ :root{ --pad-ixcham:36px; --pad-normal:50px; --pad-keng:66px; --pad-bob:80px; } } /* -------------------------------------------------------------------------- §2 · BOB OʻTISHI — «MAJOR TRANSITION» (brif §4 va §6) Ikki KONSEPTUAL jihatdan boshqa gʻoya uchrashgan joyda ajralish 120–144 px boʻladi. Bu boʻlimning BALANDLIGINI oshirmaydi — faqat KIRISHINI ochadi (padding-top), chunki brifning 21-bandi: «SECTION HEIGHT ≠ SECTION SEPARATION». Sahifa oʻz roʻyxatini `css/r-.css` da qoʻshadi. -------------------------------------------------------------------------- */ main [data-blok].bob-ochilishi{padding-top:var(--pad-bob)} /* -------------------------------------------------------------------------- §3 · ICHKI MUNOSABATLAR (brif §2, §16) Oʻlchangan muammo: `zichlik3.css` `.bosh` gapini 11 px ga tushirgan edi — yorliq sarlavhaga yopishib qolgan (brif: 16–20 px). Munosabat endi pogʻonalangan: yorliq→sarlavha 18 · sarlavha→lid 24 · shapka→kontent 32. -------------------------------------------------------------------------- */ /* ⚠ Sahifa qatlamlari (`z-*.css`) bu joyni `main [data-blok^="BOSH-"] .bosh` (0-2-1) bilan yozgan — shuning uchun umumiy shartnoma ham `[data-blok]` bilan bir xil ogʻirlikda va KEYIN turadi. Plain selektor — `[data-blok]` siz boʻlimlar uchun zaxira. */ main .bosh,main .bosh-qator .bosh, main [data-blok] .bosh,main [data-blok] .bosh-qator .bosh{row-gap:18px} main .bosh > .lid, main [data-blok] .bosh > .lid{margin-top:6px} /* 18 + 6 = 24 */ /* Shapka → kontent: bu SAHIFA KOMPOZITSIYASIGA bogʻliq (baʼzi boʻlimda shapka ataylab kontentga yopishadi yoki yonma-yon turadi), shuning uchun ATAYLAB zaif selektor — sahifa qatlami uni bosa oladi. Yuqoridagi `row-gap` esa aksincha: u ichki MUNOSABAT shartnomasi va sahifadan ustun turadi. */ main .bosh,main .bosh-qator{margin-bottom:var(--space-lg)} /* Sarlavha bloki ostidagi birinchi amal matnga yopishmaydi (brif §2) */ main .bosh + .btn,main .bosh > .btn,main .bosh > .hs__amal{margin-top:var(--space-xs)} /* -------------------------------------------------------------------------- §4 · MATN BLOKI (brif §3) — uzun matn bitta devorga aylanmaydi -------------------------------------------------------------------------- */ /* ⚠ OʻLCHANGAN TUZATISH (13.09, nazoratchi koʻrigi): bu joyda avval `main p + p{margin-top:…}` kabi keng qoidalar turgan edi. Saytdagi matn bloklarining KOʻPI grid/flex konteyner ichida — u yerda oraliqni `gap` beradi, margin esa uning USTIGA qoʻshiladi. Oʻlchov: 166 joyda margin ortiqcha edi (sumlar 32–40 px, brif §3 ning 16–28 oraligʻidan yuqori), atigi 15 joyda kerak edi. Qoida: grid/flex konteynerda oraliq = `gap` (sahifa qatlami boshqaradi), OQIM kontekstida = quyidagi margin. Shuning uchun selektorlar ELEMENT ota-onalariga bogʻlangan — bu kodbazada ular doim oqim konteksti. */ main :where(details,article,blockquote,li,dd,td,.ich) > p + p{margin-top:var(--space-sm)} main :where(details,article,blockquote,li,dd,td,.ich) > :is(h3,h4) + p{margin-top:var(--space-md)} main :where(details,article,blockquote,li,dd,td,.ich) > .lid + p{margin-top:var(--space-md)} /* -------------------------------------------------------------------------- §5 · KARTA VA TOʻR (brif §13) — kataklar bir-biriga tegmaydi Pol qiymat: 24 px. Chiziq bilan ajratilgan registrlar (`border-top` li qatorlar) bundan MUSTASNO — ularda ajratuvchi chiziqning oʻzi vazifani bajaradi va gap qoʻshilsa chiziq kontentdan uzilib qoladi. -------------------------------------------------------------------------- */ main .bento:not(.bento--registr){gap:max(var(--space-md),var(--bento-gap,0px))} /* -------------------------------------------------------------------------- §6 · MOBIL (brif §15) — desktop boʻshligʻi koʻpaytirilmaydi, oʻz shkalasi ajralish: ixcham 52 · normal 72 · keng 96 · bob 112 (brif: 48–72 / 72–96) ichki: yorliq→sarlavha 14 · sarlavha→lid 20 · shapka→kontent 24 -------------------------------------------------------------------------- */ @media (max-width:760px){ :root{ --pad-ixcham:26px; --pad-normal:36px; --pad-keng:48px; --pad-bob:56px; } main .bosh,main .bosh-qator .bosh, main [data-blok] .bosh,main [data-blok] .bosh-qator .bosh{row-gap:14px} main .bosh > .lid,main [data-blok] .bosh > .lid{margin-top:6px} main .bosh,main .bosh-qator{margin-bottom:var(--space-md)} main p + p{margin-top:var(--space-sm)} main .lid + p,main p + .tana-k,main .tana-k + .tana-k{margin-top:var(--space-sm)} } /* -------------------------------------------------------------------------- §7 · HERO → BIRINCHI BOʻLIM (brif §4: «Dark section ↓ 80–120px transition ↓ light section», §7: «Hero → Oil Selector» oʻtishi nomma-nom koʻrsatilgan) Oʻlchandi (13.09, siyoh-siyoh): katalog 46 · mahsulot 21 · moy tanlash 45 · qoʻllash 18 · brend 23 px. Sabab: hero pastidagi uch fakt relsi (`.hs__meta`) band qirrasiga yaqin turadi — quyuq bandning oʻzi tugaydi-yu, keyingi boʻlim deyarli unga tegib boshlanadi. Yechim heroning BALANDLIGIGA tegmaydi (brif §21): faqat keyingi boʻlimning KIRISHI ochiladi. Selektor ataylab zaif (0-1-1) — sahifa qatlami oʻz qiymatini qoʻygan boʻlsa (masalan index) oʻshanisi ustun turadi. -------------------------------------------------------------------------- */ /* ⚠ `tizim.css` §6 boʻlim paddingini `main [data-blok][data-blok]` (0-2-1) bilan yozgan — undan zaif selektor eshitilmaydi. Shuning uchun bu yerda ham 0-2-1. */ main .hs + [data-blok][data-blok]{padding-top:var(--pad-bob)} @media (max-width:760px){ main .hs + [data-blok][data-blok]{padding-top:var(--pad-keng)} }