/* ========================================================================== BOSH-10 · QADOQ — VARIANT 1 (bir xil fill ikonka) 12.09 · 2-tur: ikki hakamning 1–16 tuzatishlari qoʻllangan brif/TAHRIR-2-12-09-bento.md §9 · brif/BOSH-10-qadoq.md Otabek 12.09 §9: «baklashkalarni orniga … iconni hammasini bir xil razmerda qilish kerak fill icon ishlatib». Otabek 12.09 §6: «iconlarni ong tomonga joylashtirsa boladi raqamlar bilan bir qatorda … saytni hamma joyida». Tuzilma: chapda yorliq · h2 (36%), h2 ostida CTA; oʻngda 5 qator (64%). Qator = IKKI ustun, kartasiz: [1] OʻLCHOV BIRLIGI — HAJM (oʻngga tekis) + 8–12 px + 28 px FILL ikonka. Ikonka raqamning OʻNGIDA, u bilan bitta qatorda (Otabek §6, bento .bp__ust pretsedenti). Ustun eni qatʼiy → beshala ikonka bitta tik chiziqda, beshala raqamning oʻng cheti ham bitta tik chiziqda. [2] NOM (h3 19 px) · izoh — hamma nom bitta chap chiziqda. MASShTABNI TIPOGRAFIKA AYTADI (brif §3 «200 L should feel massive», §7 «USE DIFFERENTIAL SCALE — VERY IMPORTANT»). Ikonkalar Otabekning talabi boʻyicha bir xil qoladi, shuning uchun hajm raqami pogʻonalanadi — har
  • dagi `--sk` orqali, MATNGA TEGILMASDAN: 1 L .92 (22) · 4 L .96 (23) · 5 L 1 (24) · 20 L 1.17 (28) · 200 L 1.46 (35) CHIZIQ INTIZOMI (hakam 7 va 12): BOSH-03 (toʻliq kenglikdagi hairline lenta) va BOSH-06 (hairline toʻr) allaqachon hairline arxetipida — uchinchi jadval yasalmaydi. Qatorlar orasida chiziq YOʻQ (ajratishni oʻlchov ustuni va boʻshliq qiladi); chiziq faqat UCHTA: roʻyxat tepasi · 200 L qatorining tepasi (manzil belgisi) · roʻyxat ostidagi yopuvchi chiziq. Qoidalar: soya 0 · gradient 0 · tracking ≤ 0 (faqat .yorliq CAPS istisno) · matn va shakl yuqoriga tekis (CTA pastga BOGʻLANMAYDI) · ikonka faqat FILL · boʻlim paddingi YOZILMAYDI (ritm.css) · h2 kegli YOZILMAYDI (ritm.css). css/b10.css ga tayanmaydi; asos.css + komponent.css yetarli. ========================================================================== */ .b10v1{ --b10v1-ik:28px; /* ikonka — beshalasi bir xil, sayt standarti (bento .bp__ik · tahrir.css §3 .ish__ik) */ --b10v1-ik-oraliq:clamp(9px,.8vw,12px); /* raqam ↔ ikonka: bitta «oʻlchov birligi» (hakam 1) */ --b10v1-olchov-uy:clamp(112px,9vw,128px); /* 1-ustun: hajm + oraliq + ikonka. Eng keng holat «200 L» (2.4em): 1280 da 74 + 10 + 28 = 113 px. */ --b10v1-oraliq:clamp(20px,1.9vw,30px); /* oʻlchov ustuni ↔ nom ustuni */ --b10v1-qator:clamp(16px,1.5vw,21px); /* qator paddingi (chiziqsiz ajralish) */ --b10v1-hajm-baza:clamp(20px,1.66vw,24px);/* HAJM asos kegli; har qator --sk bilan koʻpaytiradi */ --b10v1-ik-siljish:-1px; /* ikonka SIYOHINING yuqorisi = raqamning bosh chizigʻi. Oʻlchangan: siyoh svg qutisidan 2.8 px pastda boshlanadi, shuning uchun quti 1 px yuqoriga koʻtariladi → farq ≤0.6 px. */ } /* ========================================================================== KARKAS — chapda hero (36), oʻngda roʻyxat (64); roʻyxat ikki qatorni egallaydi, CTA chap ustunning 2-qatorida h2 ostida turadi (yuqoriga tekis). 36/64 (avval 42/58): chap ustunda ~230 px oʻlik joy bor edi (hakam 5 va 14) — boʻshagan en roʻyxatga berildi, qator choʻzilmadi, quyruq boʻshliq yoʻqoldi. grid-template-rows: auto 1fr — span li roʻyxat auto qatorni kattalashtirmaydi. ========================================================================== */ .b10v1__ich{ display:grid; grid-template-columns:minmax(0,36fr) minmax(0,64fr); grid-template-rows:auto 1fr; column-gap:clamp(32px,3.4vw,48px);align-items:start; } /* ========================================================================== 1 · HERO — yorliq · sarlavha (tik, chapga tekis) ========================================================================== */ .b10v1__hero{ grid-column:1;grid-row:1; display:grid;justify-items:start;align-content:start; gap:clamp(18px,1.9vw,26px); } /* 10em: «sexdagi bochkagacha» tor ustunda ham 2–3 qatorga tushadi, yetim soʻz yoʻq. HTML da «1 litrdan» — «1» qator oxirida yolgʻiz qolmaydi. */ .b10v1__sarlavha{max-width:10em;text-wrap:balance} /* ========================================================================== 3 · CTA — alohida grid-bola: desktopda h2 ostida, ≤1100 da roʻyxatdan keyin. margin-top clamp(28,2.8vw,40) → clamp(18,1.8vw,26): yorliq · h2 · CTA bitta ixcham blok boʻlib turadi (hakam 5 va 14). ========================================================================== */ .b10v1__cta{ grid-column:1;grid-row:2; align-self:start;justify-self:start; margin-top:clamp(18px,1.8vw,26px); } /* ========================================================================== 2 · QADOQ ROʻYXATI — kartasiz, uch chiziqli ========================================================================== */ .b10v1__roy{ grid-column:2;grid-row:1/3; list-style:none;margin:0;padding:0; display:grid;align-content:start; border-top:1px solid var(--chiziq); border-bottom:1px solid var(--chiziq); } .b10v1__q{ display:grid;align-items:start; grid-template-columns:var(--b10v1-olchov-uy) minmax(0,1fr); column-gap:var(--b10v1-oraliq); padding-block:var(--b10v1-qator); } /* 200 L — safarning manzili: yuqorisida strukturaviy chiziq (hakam 12). Qolgan qatorlar orasida chiziq yoʻq — ajratishni oʻlchov ustuni va boʻshliq qiladi. */ .b10v1__q:last-child{border-top:1px solid var(--chiziq)} /* ---------- 1-ustun: OʻLCHOV BIRLIGI (hajm + ikonka) ---------- Qatʼiy en + [1fr auto] → raqamlarning oʻng cheti va ikonkalar chap cheti ikkita tik chiziqda; oralaridagi masofa doim --b10v1-ik-oraliq. */ .b10v1__olchov{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:start;column-gap:var(--b10v1-ik-oraliq); width:100%; } /* HAJM — differensial shkala: --sk har
  • da (matn oʻzgarmaydi) */ .b10v1__hajm{ justify-self:end; font-size:calc(var(--b10v1-hajm-baza)*var(--sk,1)); line-height:1.05;font-weight:700; color:var(--navy);letter-spacing:var(--tracking-zich); font-variant-numeric:tabular-nums;white-space:nowrap; } /* IKONKA — yalangʻoch FILL belgi: fon yoʻq, choʻntak yoʻq, radius yoʻq. Beshalasi 28 px (sprite: bitta 20×20 siyoh qutisi, balandlik 19.2/24). margin-top — ikonka siyohining yuqorisi raqamning bosh chizigʻida (±1 px). */ .b10v1__ik{ width:var(--b10v1-ik);height:var(--b10v1-ik); justify-self:start;align-self:start; background:none;border-radius:0;color:var(--navy); margin-top:var(--b10v1-ik-siljish); } /* ---------- 2-ustun: NOM · izoh ---------- */ .b10v1__matn{display:grid;align-content:start;gap:4px} /* IERARXIYA: hajm (22→35, eng kuchli) ▸ kim uchun (19) ▸ izoh (16) */ .b10v1__kim{ margin:0; font-size:19px;line-height:1.3;font-weight:700; color:var(--navy);letter-spacing:var(--tracking); } .b10v1__izoh{ margin:0; font-size:var(--tana);line-height:1.6;color:var(--slate); max-width:32em;text-wrap:pretty; } /* ========================================================================== FOTO TAYYORGARLIGI — Otabek §9: «rasm qoysa bolsa joy tashlab ket» Hozirgi markupda YOʻQ (28 px ikonka ustuniga foto sigʻmaydi — oldingi izoh notoʻgʻri vaʼda berardi, hakam 6 va 15). Mijozdan foto kelganda dizayn qayta qilinmaydi, bitta qator almashadi:
    … har
  • ning boshiga:
    QADOQ · 4:5
    Qolgan hamma narsa (oʻlchov ustuni, ikonka, tipografika) oʻz joyida qoladi. ========================================================================== */ .b10v1--foto .b10v1__q{ grid-template-columns:clamp(96px,7.6vw,120px) var(--b10v1-olchov-uy) minmax(0,1fr); } .b10v1__foto{aspect-ratio:4/5;width:100%;align-self:start} .b10v1--foto .b10v1__q > .b10v1__olchov{grid-column:2} .b10v1--foto .b10v1__q > .b10v1__matn{grid-column:3} /* ========================================================================== RESPONSIV — 1440 · 1280 · 1024 · 768 · 390 ========================================================================== */ /* Planshet: bitta oqim — hero → roʻyxat → CTA (SKILL §8 tartibi). max-width 720: 1024 da qator 972 px ga choʻzilib har satrda ~270 px quyruq boʻshliq qolardi (hakam 4). Eng uzun satr 612 px joy egallaydi → 720 da chiziq matndan 108 px keyin tugaydi: choʻzilgan jadval emas, oʻlchangan indeks. */ @media (max-width:1100px){ .b10v1__ich{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:clamp(26px,3.2vw,40px)} .b10v1__hero{grid-row:1} .b10v1__roy{grid-column:1;grid-row:2;max-width:720px} .b10v1__cta{grid-row:3;margin-top:0} .b10v1__sarlavha{max-width:16em} .b10v1__izoh{max-width:32em} } /* Mobil: HAJM va NOM baribir BITTA qatorda qoladi (hakam 13) — ikki ustunli tuzilma saqlanadi, faqat oʻlchov ustuni torayadi. Ikkita qalin navy qator boʻlib parchalanmaydi. */ @media (max-width:480px){ .b10v1{ --b10v1-olchov-uy:106px; /* «200 L» 27.7 px da 67 px + 8 + 28 = 103 */ --b10v1-ik-oraliq:8px; --b10v1-oraliq:14px; --b10v1-qator:15px; --b10v1-hajm-baza:19px; --b10v1-ik-siljish:-1.5px; } .b10v1__kim{font-size:17px} .b10v1__izoh{font-size:15px;line-height:1.55} .b10v1--foto .b10v1__q{grid-template-columns:var(--b10v1-olchov-uy) minmax(0,1fr)} .b10v1--foto .b10v1__q > .b10v1__olchov{grid-column:1} .b10v1--foto .b10v1__q > .b10v1__matn{grid-column:2} .b10v1__foto{display:none} }