/* ============================================================ BLEZMAG — dizayn tizimi Sayt ham, admin panel ham shu fayldan oziqlanadi. Rang yoki soya o'zgartirilsa — faqat shu yerda, ikkala joyda ham amal qiladi. Uslub goldenlab.uz dan olingan (uch asosiy usul): 1. Chegaralar kulrang emas — URG'U rangi past shaffoflikda 2. Panel yuqorisida ichki oq chiziq — "suzuvchi shisha" hissi 3. Soya qora emas — urg'u rangiga bo'yalgan Farqi: u yerda oltin, bizda yashil. Oziq-ovqat suratlari iliq-yorug' fonda ishtaha ochadi, qora-oltinda xira ko'rinadi. ============================================================ */ :root { /* ─── YORUG' REJIM (asosiy) ─────────────────────────────── */ --fon: #F7F5F0; /* umumiy fon — iliq, sof oq emas */ --fon-yumshoq: #EFECE3; /* ichki bo'limlar */ --sath: #FDFCF9; /* kartalar, suzuvchi panellar */ --siyoh: #1A2620; /* asosiy matn */ --siyoh-xira: #66736C; /* ikkilamchi matn */ --urgu: #0E6B44; /* BLEZMAG yashili */ --urgu-yorqin: #14985F; --urgu-toq: #0A5236; --urgu-parda: #E8F3ED; /* yengil yashil fon */ --olov: #E05A22; /* chegirma, diqqat */ --olov-parda: #FDEDE4; --ogoh: #B45309; /* yig'ilmoqda */ --kok: #2563EB; /* yo'lda */ --xato: #DC2626; /* Chegara — kulrang emas, urg'u rangi shaffofligi. Butun tizimga jonlilik beradigan asosiy hiyla shu. */ --soch-chiziq: rgba(14, 107, 68, 0.20); --soch-yengil: rgba(14, 107, 68, 0.10); /* Suzuvchi panel soyalari. Birinchi qator — yuqoridagi oq yorug'lik (inset). Aynan u panelni fondan "ko'targandek" ko'rsatadi. */ --soya-panel: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(26, 38, 32, 0.05), 0 18px 38px -26px rgba(26, 38, 32, 0.30); --soya-panel-hover: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 4px 12px -6px rgba(26, 38, 32, 0.14), 0 30px 60px -30px rgba(26, 38, 32, 0.38); --soya-baland: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 32px 80px -32px rgba(26, 38, 32, 0.42); /* Bo'rtiq — kichik elementlar uchun (tugma, nishon) */ --bortiq: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(26, 38, 32, 0.06); /* Asosiy tugma — tekis rang emas, gradient */ --cta-fon: linear-gradient(160deg, #14985F 0%, #0E6B44 52%, #0A5236 100%); --cta-matn: #FFFFFF; --cta-soya: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(10, 82, 54, 0.24), 0 12px 26px -14px rgba(10, 82, 54, 0.62); /* Shisha panel — ustidagi qatlam ko'rinib turadi */ --shisha-fon: rgba(253, 252, 249, 0.72); --shisha-blur: blur(16px) saturate(1.4); /* ─── SHRIFTLAR ─────────────────────────────────────────── */ /* Ikkalasi ham kirill harflarini qo'llaydi — rus tili uchun shart */ --f-sarlavha: 'Cormorant', Georgia, serif; --f-matn: 'Golos Text', system-ui, -apple-system, sans-serif; /* ─── BURCHAK ───────────────────────────────────────────── */ --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 30px; --r-full: 100px; /* ─── HARAKAT ───────────────────────────────────────────── */ /* goldenlab'dagi egri chiziq — tez boshlanib, yumshoq to'xtaydi */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-yumshoq: cubic-bezier(.4, 0, .2, 1); /* ─── O'LCHOV ───────────────────────────────────────────── */ --eni: 1260px; --header-h: 74px; color-scheme: light; } /* ─── QORONG'I REJIM ──────────────────────────────────────── */ /* O'zgaruvchi NOMLARI bir xil, faqat qiymatlar boshqa. Shuning uchun qolgan CSS'ga umuman tegilmaydi. */ :root[data-mavzu="qora"] { --fon: #0A0F0C; --fon-yumshoq: #0F1613; --sath: #141C18; --siyoh: #ECF2EE; --siyoh-xira: #8B9C93; /* Qora fonda to'q yashil ko'rinmaydi — yorug'rog'ini olamiz */ --urgu: #34D399; --urgu-yorqin: #6EE7B7; --urgu-toq: #10B981; --urgu-parda: rgba(52, 211, 153, 0.12); --olov: #FB7B4A; --olov-parda: rgba(251, 123, 74, 0.14); --ogoh: #FBBF24; --kok: #60A5FA; --xato: #F87171; --soch-chiziq: rgba(52, 211, 153, 0.20); --soch-yengil: rgba(52, 211, 153, 0.10); /* Qorada oq inset chiziq juda qattiq chiqadi — juda past qilamiz. Chuqurlikni esa urg'u rangiga bo'yalgan yorug'lik beradi. */ --soya-panel: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -28px rgba(52, 211, 153, 0.30); --soya-panel-hover: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px -6px rgba(0, 0, 0, 0.50), 0 30px 64px -30px rgba(52, 211, 153, 0.42); --soya-baland: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 34px 84px -32px rgba(0, 0, 0, 0.72); --bortiq: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.28); --cta-fon: linear-gradient(160deg, #6EE7B7 0%, #34D399 52%, #10B981 100%); --cta-matn: #05231A; --cta-soya: inset 0 1px 0 rgba(255,255,255,.30), 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 30px -14px rgba(52, 211, 153, 0.50); --shisha-fon: rgba(20, 28, 24, 0.68); color-scheme: dark; } /* Foydalanuvchi tanlamagan bo'lsa — tizim sozlamasiga ergashamiz */ @media (prefers-color-scheme: dark) { :root:not([data-mavzu]) { --fon: #0A0F0C; --fon-yumshoq: #0F1613; --sath: #141C18; --siyoh: #ECF2EE; --siyoh-xira: #8B9C93; --urgu: #34D399; --urgu-yorqin: #6EE7B7; --urgu-toq: #10B981; --urgu-parda: rgba(52,211,153,.12); --olov: #FB7B4A; --olov-parda: rgba(251,123,74,.14); --ogoh: #FBBF24; --kok: #60A5FA; --xato: #F87171; --soch-chiziq: rgba(52,211,153,.20); --soch-yengil: rgba(52,211,153,.10); --soya-panel: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.40), 0 18px 40px -28px rgba(52,211,153,.30); --soya-panel-hover: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px -6px rgba(0,0,0,.50), 0 30px 64px -30px rgba(52,211,153,.42); --soya-baland: inset 0 1px 0 rgba(255,255,255,.06), 0 34px 84px -32px rgba(0,0,0,.72); --bortiq: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.28); --cta-fon: linear-gradient(160deg, #6EE7B7 0%, #34D399 52%, #10B981 100%); --cta-matn: #05231A; --cta-soya: inset 0 1px 0 rgba(255,255,255,.30), 0 1px 2px rgba(0,0,0,.34), 0 12px 30px -14px rgba(52,211,153,.50); --shisha-fon: rgba(20,28,24,.68); color-scheme: dark; } } /* ─── UMUMIY ASOS ─────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Gorizontal surilish va "overscroll" sakrashini to'liq bloklaymiz. Telegram mini app'da bu juda muhim — aks holda sahifa yon-yonga suriladi. */ html { overflow-x: hidden; overscroll-behavior: none; } body { background: var(--fon); color: var(--siyoh); font-family: var(--f-matn); -webkit-font-smoothing: antialiased; width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior: none; /* chetга yetganda sakramaydi */ position: relative; /* rejim almashganda keskin sakramasin */ transition: background-color .4s var(--ease-yumshoq), color .4s var(--ease-yumshoq); } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ─── SUZUVCHI PANEL ──────────────────────────────────────── */ /* Butun dizaynning asosiy qurilish bloki */ .panel { background: var(--sath); border: 1px solid var(--soch-chiziq); border-radius: var(--r-l); box-shadow: var(--soya-panel); transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .3s; } .panel-korsatkich:hover { box-shadow: var(--soya-panel-hover); transform: translateY(-3px); } /* Shisha — ostidagi kontent ko'rinib turadi */ .shisha { background: var(--shisha-fon); backdrop-filter: var(--shisha-blur); -webkit-backdrop-filter: var(--shisha-blur); border: 1px solid var(--soch-chiziq); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }