` ichida, `position:relative` bilan va DOM'da KEYIN turadi — shuning uchun ularning `background:#F5F5F5` foni fiksatsiyalangan yo'lakchalarni yopib qo'yardi. O'lchov: yo'lakchalar sahifaning atigi ~33% ida (hero'da) ko'rinardi. To'g'ri yechim — referensdagi arxitektura: HAR BIR BLOK o'z yo'lakchasini chizadi ("Line Bg" har bo'limda alohida element). Bizda buni blokning O'Z FONIDA ikkita 1px vertikal qatlam bilan qilamiz: fon rangi ustidan chizilgani uchun uni hech narsa yopmaydi va har bir blokni alohida boshqarish mumkin. Shtrix naqshi 3px/2px — Chrome'ning `1px dashed` bilan bir xil (o'lchangan). */ .grain{ display:none !important; } .section:not(#jarvis), .trust-band, #jarvis > .sec-light, .site-footer{ background-image: repeating-linear-gradient(180deg, var(--rail) 0 3px, transparent 3px 5px), repeating-linear-gradient(180deg, var(--rail) 0 3px, transparent 3px 5px); background-size:1px 5px, 1px 5px; background-position: calc(50% - var(--wrap) / 2) 0, calc(50% + var(--wrap) / 2 - 1px) 0; background-repeat:repeat-y, repeat-y; } /* `#jarvis` — o'zi 5827px va ichida gorizontal lenta bor; yo'lakchalar uning O'ZIGA emas, faqat lentadan tashqaridagi bolalariga beriladi. */ /* ISTISNO — "10 yo'nalish" gorizontal lentasi (Otabek, 2026-08-07). Bu blok to'liq kenglikda skroll qilinadi, yo'lakcha uni kesib o'tsa lenta "qafasda" qolgandek ko'rinadi. */ #jarvis > .lanes{ background-image:none; } /* Tor ekranda konteyner chetlari ekran chetiga juda yaqin tushadi — yo'lakchalar ifloslik qiladi, referensda ham mobil versiyada yo'q. */ @media (max-width:1279px){ .section:not(#jarvis), .trust-band, #jarvis > .sec-light, .site-footer{ background-image:none; } } /* ========================================================================== 3. Bo'limlar orasidagi gorizontal punktir chiziq DIQQAT: `.aw-grid-bg::before` band (atmosfera nuri) va ko'p bo'limda `.section` bilan `.aw-grid-bg` BIR ELEMENTDA — shuning uchun bu yerda faqat `::after` ishlatiladi. ========================================================================== */ .section, .trust-band, #jarvis > .sec-light, #jarvis > .lanes{ position:relative; } /* Referens DOM'ida bu qator UCHTA elementdan iborat (1210×10px, x=115): Dot (10×10, oq to'ldirilgan, 1px solid halqa, markaz x=120) Line (1190×1, 1px dashed, x=125..1315) Dot (markaz x=1320) Ya'ni punktir chiziq tugunga TEGIB turadi, uni kesib o'tmaydi, va tugun ICHI OQ — shuning uchun ortidan o'tayotgan vertikal yo'lakcha aynan kesishmada "uzilgandek" ko'rinadi. Aynan shu detal yetishmayotgan edi. Bitta `::after` da uchala qatlam (`::before` `.aw-grid-bg` da band): 1-2. tugunlar → `border-box`, chetlarga tiralgan 3. chiziq → `content-box` (10px ichkarida), 3px/2px shtrix naqshi Element kengligi = konteyner + 10px, shunda tugun markazlari AYNAN vertikal yo'lakchalar ustiga (markazdan ±600px) tushadi. */ /* Selektor ro'yxati ataylab keng: · `.section` — asosiy bo'limlar · `.trust-band` — `#trust` da `.section` klassi yo'q · `#jarvis > .sec-light`, `#jarvis > .lanes` `#jarvis` 5827px — u aslida referensdagi 3 ta alohida bo'limga teng (Jarvis boshi · "nimalar qila oladi" lentasi · isbot+CTA). Referensda har biri o'z ajratgichiga ega bo'lardi, shuning uchun ichki blok chegaralariga ham chiziq qo'yiladi — aks holda 5800px masofada birorta chiziq bo'lmay, ritm uziladi. */ .section::after, .trust-band::after, #jarvis > .sec-light:not(.jv-proof-band)::after, #jarvis > .lanes::after{ content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); box-sizing:border-box; width:calc(min(var(--wrap), 100% - var(--pad) * 2) + 10px); height:10px; padding-inline:10px; pointer-events:none; z-index:0; background-image: radial-gradient(circle at 5px 5px, var(--rail-dot) 0 3.9px, var(--rail) 3.9px 5px, transparent 5px), radial-gradient(circle at calc(100% - 5px) 5px, var(--rail-dot) 0 3.9px, var(--rail) 3.9px 5px, transparent 5px), repeating-linear-gradient(90deg, var(--rail) 0 3px, transparent 3px 5px); background-size:10px 10px, 10px 10px, auto 1px; background-position:left center, right center, center center; background-repeat:no-repeat, no-repeat, repeat-x; background-origin:border-box, border-box, content-box; background-clip:border-box, border-box, content-box; } /* DIQQAT: avval `#hero::after` va `#boshlash::after` o'chirilgan edi — bu XATO edi. Referensning butun sahifasi xaritalab chiqildi va u yerda ajratgich HAR BIR bo'lim chegarasida bor, jumladan hero ostida ham: chiziq y = 94 · 587 · 1506 · 1738 · 2335 · 3264 · 4723 · 5921 · 6480 · 7167 · 8248 · 9073 · 10026 bo'lim chegaralari = 0 · 1503 · 1743 · 2341 · 3271 · 4731 · 5928 · 6486 · 7174 · 8255 ... ya'ni har bir chegaraga bittadan chiziq to'g'ri keladi. Hero ostidagi chiziq o'chirilgani uchun bizda sarlavha chizig'idan keyin 1255px bo'shliq qolgan va "faqat birinchi blokda chiziq bor" ko'rinishi paydo bo'lgan edi. Ajratgich keyingi bo'limning fonidan pastda qolib ketmasligi uchun z-index ko'tariladi: bo'limlar `position:relative; z-index:auto` — ya'ni ular yangi stacking kontekst yaratmaydi va DOM tartibida chiziladi; musbat z-index chiziqni keyingi bo'lim fonidan yuqoriga olib chiqadi. */ .section::after{ z-index:3; } /* Sarlavha ostidagi qator — referensda y=94px da, xuddi shu retsept */ #site-header::after{ content:""; position:absolute; left:50%; bottom:-21px; transform:translateX(-50%); box-sizing:border-box; width:calc(min(var(--wrap), 100vw - var(--pad) * 2) + 10px); height:10px; padding-inline:10px; pointer-events:none; background-image: radial-gradient(circle at 5px 5px, var(--rail-dot) 0 3.9px, var(--rail) 3.9px 5px, transparent 5px), radial-gradient(circle at calc(100% - 5px) 5px, var(--rail-dot) 0 3.9px, var(--rail) 3.9px 5px, transparent 5px), repeating-linear-gradient(90deg, var(--rail) 0 3px, transparent 3px 5px); background-size:10px 10px, 10px 10px, auto 1px; background-position:left center, right center, center center; background-repeat:no-repeat, no-repeat, repeat-x; background-origin:border-box, border-box, content-box; background-clip:border-box, border-box, content-box; } /* ========================================================================== 4. MOBIL — referensda mobil versiyada yo'naltiruvchi chiziqlar yo'q ========================================================================== */ @media (max-width:1023px){ .grain{ display:none !important; } #site-header::after{ display:none; } } @media (max-width:767px){ /* mobilda shaftoli nur tepada kuchliroq — referensdagidek */ .bg-layer{ opacity:.75; } .bg-layer::before{ width:760px; height:640px; margin-left:-380px; top:-220px; } .bg-layer::after{ width:520px; height:380px; margin-left:-260px; top:-80px; } }