/* ========================================================================== qoplar.uz — dizayn tizimi 1. Shriftlar 2. Tokenlar 3. Asos 4. Tipografika 5. Maket 6. Komponentlar 7. Yordamchi klasslar Ranglar: kobalt ko'k + to'q sariq. Jigarrang va qora ishlatilmaydi. ========================================================================== */ /* 1. Shriftlar: sarlavha — Manrope, matn — Inter (o'z serverimizda; Google Fonts Xitoyda bloklangan) */ @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* 2. Tokenlar ------------------------------------------------------------ */ :root { /* Kobalt ko'k */ --blue-50: #F4F7FF; --blue-100: #E3ECFF; --blue-200: #C7D6FF; --blue-300: #9DB6FF; --blue-500: #3D68E6; --blue-600: #1E4FD8; /* asosiy */ --blue-700: #1A41B8; --blue-800: #15338F; --navy-900: #0B1F5C; /* sarlavhalar, to'q bo'limlar (qora o'rniga) */ /* To'q sariq — aksent */ --orange-50: #FFF4EB; --orange-100: #FFE4CC; --orange-300: #FFB070; --orange-500: #FF7A1A; /* CTA foni (matn: navy) */ --orange-600: #F06A0A; --orange-700: #C2410C; /* oq fonda to'q sariq matn */ /* Neytral (ko'kish kulrang) */ --slate-300: #C5CDE3; --slate-400: #98A3C4; --slate-500: #6B7AA3; /* faqat yirik matn / ikonkalar */ --slate-600: #4A5A85; /* ikkinchi darajali matn */ --line: #DCE3F5; --white: #FFFFFF; /* Holatlar */ --green-50: #EAF8F0; --green-600: #15803D; --red-50: #FDEDEC; --red-600: #C62828; /* Semantik */ --bg: var(--blue-50); --surface: var(--white); --text: var(--navy-900); --text-muted: var(--slate-600); --primary: var(--blue-600); --primary-hover: var(--blue-700); --accent: var(--orange-500); --accent-hover: var(--orange-600); --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary); /* Yuzalar va matn (qorong‘i rejimda qayta belgilanadi) */ --surface-2: var(--blue-50); --tint: var(--blue-100); --tint-fg: var(--blue-800); --tint-orange: var(--orange-50); --input-bd: var(--slate-300); --header-bg: rgb(255 255 255 / 0.92); --glass: rgb(255 255 255 / 0.72); --glow-blue: 0 18px 40px -14px rgb(30 79 216 / 0.45); --glow-orange: 0 14px 34px -12px rgb(255 122 26 / 0.55); color-scheme: light; /* Shriftlar */ --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; /* Tipografik shkala (mobil → desktop) */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.9375rem; /* 15 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); --fs-h2: clamp(1.375rem, 1.1rem + 1.4vw, 2.5rem); --fs-h1: clamp(1.625rem, 1.1rem + 2.8vw, 3.75rem); /* Oraliqlar (4px asosida) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Shakl va soya */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgb(11 31 92 / 0.06), 0 1px 1px rgb(11 31 92 / 0.04); --shadow-md: 0 6px 20px -6px rgb(11 31 92 / 0.16); --shadow-lg: 0 24px 48px -16px rgb(11 31 92 / 0.24); /* Harakat — asosiy animatsiyalar 6-bosqichda */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; --container: 1200px; --header-h: 72px; } /* 2.1 Qorong‘i rejim — (ui.js: tanlov yoki tizim sozlamasi). Faqat sayt layouti bu atributni qo‘yadi — admin va ERP o‘zgarmaydi. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #050C24; --surface: #0C1736; --surface-2: #111F47; --tint: rgb(77 120 240 / 0.18); --tint-fg: #BCCDFF; --tint-orange: rgb(255 122 26 / 0.12); --text: #E7EDFF; --text-muted: #A4B1D6; --line: #1E2D5C; --input-bd: #2B3C72; --header-bg: rgb(6 14 40 / 0.8); --glass: rgb(12 23 54 / 0.66); --primary: #4D78F0; --primary-hover: #6B90F6; --orange-700: #FF9C52; --orange-100: rgb(255 122 26 / 0.22); --blue-200: #2E4790; --blue-300: #3A58AC; --green-50: rgb(21 128 61 / 0.16); --green-600: #4ADE80; --red-50: rgb(198 40 40 / 0.16); --red-600: #F87171; --slate-400: #7383AE; --slate-500: #8A98C2; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.55); --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.7); } /* 3. Asos ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; overflow-x: clip; /* chat to'lqini va dekorativ dog'lar gorizontal skroll bermasin (sticky buzilmaydi) */ font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :lang(zh) body, body:lang(zh) { font-family: var(--font-body), var(--font-cjk); } img, svg, video { display: block; max-width: 100%; height: auto; } /* Komponent klasslaridagi display hidden atributini bosib ketmasligi uchun */ [hidden] { display: none !important; } a { color: var(--primary); text-underline-offset: 3px; } a:hover { color: var(--primary-hover); } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); } ::selection { background: var(--orange-300); color: var(--navy-900); } button, input, select, textarea { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; } /* 4. Tipografika ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); color: var(--text); text-wrap: balance; /* Uzun ruscha so'zlar ("полипропиленовые") tor ekranda sig'ishi uchun */ overflow-wrap: break-word; hyphens: manual; /* matnda ­ qo'yiladi */ } /* Manrope'da ieroglif yo'q — xitoychada tizim shriftiga o'tamiz */ :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4 { font-family: var(--font-cjk); letter-spacing: 0; } h1 { font-size: var(--fs-h1); font-weight: 800; text-wrap: pretty; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 700; } p { margin: 0 0 var(--sp-4); text-wrap: pretty; } .lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 62ch; } .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-700); margin-bottom: var(--sp-3); } .eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .muted { color: var(--text-muted); } .num { font-variant-numeric: tabular-nums; } /* 5. Maket ---------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .container { padding-inline: var(--sp-5); } } .section { padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)); } .section--white { background: var(--surface); } .section--blue { background: var(--blue-600); color: var(--white); } .section--blue h2, .section--blue h3 { color: var(--white); } .section--blue .lead { color: var(--blue-100); } .section__head { max-width: 720px; margin-bottom: var(--sp-6); } .grid { display: grid; gap: var(--sp-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .stack > * + * { margin-top: var(--sp-4); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* 6. Komponentlar ------------------------------------------------------------ */ /* 6.1 Header — §12 da (packs2 navbar) */ /* Til tanlash */ .lang-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); } .lang-switch a { min-width: 34px; padding: 6px 8px; white-space: nowrap; border-radius: var(--r-pill); text-align: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); text-decoration: none; } .lang-switch a:hover { color: var(--primary); } .lang-switch a[aria-current="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); } /* 6.2 Tugmalar */ .btn { --btn-bg: var(--primary); --btn-fg: var(--white); --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5); border: 1.5px solid var(--btn-bd); border-radius: var(--r-md); background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: var(--fs-sm); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .btn:hover { --btn-bg: var(--primary-hover); color: var(--btn-fg); } .btn:active { transform: translateY(1px); } .btn svg { width: 20px; height: 20px; flex: none; } .btn--accent { --btn-bg: var(--accent); --btn-fg: var(--navy-900); } .btn--accent:hover { --btn-bg: var(--accent-hover); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--primary); --btn-bd: var(--blue-200); } .btn--outline:hover { --btn-bg: var(--surface-2); --btn-bd: var(--primary); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); } .btn--ghost:hover { --btn-bg: var(--tint); } .btn--white { --btn-bg: var(--white); --btn-fg: var(--primary); } .btn--white:hover { --btn-bg: var(--surface-2); } .btn--telegram { --btn-bg: #229ED9; --btn-fg: var(--white); } .btn--telegram:hover { --btn-bg: #1B8BC2; } .btn--sm { min-height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-xs); border-radius: var(--r-sm); } .btn--lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-md); } .btn--block { width: 100%; } .btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; } /* 6.3 Belgilar (badge) */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; background: var(--tint); color: var(--tint-fg); } .badge--accent { background: var(--orange-100); color: var(--orange-700); } .badge--success { background: var(--green-50); color: var(--green-600); } .badge--danger { background: var(--red-50); color: var(--red-600); } .badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-muted); } /* 6.4 Kartalar */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .card--hover { transition: border-color var(--dur-base), box-shadow var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); } .card--hover:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); translate: 0 -3px; } /* Mahsulot kartasi */ .product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .product-card__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--surface-2); border-bottom: 1px solid var(--line); } .product-card__media img { height: auto; width: auto; max-height: min(220px, 78%); max-width: 60%; } .product-card__media .badge { position: absolute; top: var(--sp-4); left: var(--sp-4); } .product-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; } .product-card__title { font-size: var(--fs-lg); margin: 0; } .product-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .product-card__price { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); } .product-card__price b { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--primary); } /* Afzallik / statistika */ .feature { display: flex; flex-direction: column; gap: var(--sp-3); } .feature__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--tint); color: var(--primary); } .feature__icon svg { width: 24px; height: 24px; } .feature h3 { font-size: var(--fs-lg); margin: 0; } .feature p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } .stat { display: flex; flex-direction: column; gap: var(--sp-1); } .stat__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1; color: var(--primary); } .section--blue .stat__value { color: var(--white); } .stat__label { font-size: var(--fs-sm); color: var(--text-muted); } .section--blue .stat__label { color: var(--blue-100); } /* 6.5 Segment tablar */ .tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .tabs__tab { border: 0; background: transparent; cursor: pointer; padding: 10px 18px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted); transition: background-color var(--dur-fast), color var(--dur-fast); } .tabs__tab:hover { color: var(--primary); } .tabs__tab[aria-selected="true"] { background: var(--primary); color: var(--white); } /* 6.6 Narx jadvali */ .price-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; } .price-table { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; } .price-table caption { text-align: left; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-xs); color: var(--text-muted); caption-side: bottom; border-top: 1px solid var(--line); } .price-table th, .price-table td { padding: 14px var(--sp-4); text-align: center; border-bottom: 1px solid var(--line); } .price-table thead th { background: var(--navy-900); color: var(--white); vertical-align: top; font-size: var(--fs-sm); } .price-table thead th small { display: block; font-weight: 500; color: #C7D6FF; font-size: var(--fs-xs); margin-top: 4px; } .price-table thead th:first-child, .price-table tbody th { text-align: left; } .price-table tbody th { font-weight: 700; color: var(--text-muted); background: var(--surface-2); white-space: nowrap; } .price-table td b { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); } .price-table td span { font-size: var(--fs-xs); color: var(--text-muted); } .price-table tbody tr:last-child > * { border-bottom: 0; } /* Mobilda jadval surilganda "Tiraj" ustuni ko'rinib turadi */ .price-table thead th:first-child, .price-table tbody th { position: sticky; left: 0; z-index: 1; } .price-table tbody th { box-shadow: inset -1px 0 0 var(--line); } .price-table tbody tr:hover td { background: var(--tint-orange); } .price-table .is-best { position: relative; } .price-table .is-best b { color: var(--orange-700); } /* 6.7 Formalar */ .field { display: flex; flex-direction: column; gap: 6px; } .field + .field { margin-top: var(--sp-4); } .label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); } .label .req { color: var(--orange-700); } .input, .select, .textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--input-bd); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: 16px; /* iOS'da avtomatik kattalashtirishni oldini oladi */ transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .textarea { min-height: 110px; resize: vertical; } .input::placeholder, .textarea::placeholder { color: var(--slate-400); } .input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--blue-100); } .field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--red-600); } .field__hint { font-size: var(--fs-xs); color: var(--text-muted); } .field__error { font-size: var(--fs-xs); color: var(--red-600); font-weight: 600; } .select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A5A85' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Telefon: +998 prefiks */ .input-group { display: flex; align-items: stretch; } .input-group__addon { display: flex; align-items: center; padding: 0 12px; border: 1.5px solid var(--input-bd); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--surface-2); color: var(--text-muted); font-weight: 600; } .input-group .input { border-radius: 0 var(--r-md) var(--r-md) 0; } /* Variant tanlash (o'lcham, miqdor) */ .choice { position: relative; } .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .choice__box { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--dur-fast), background-color var(--dur-fast); } .choice:hover .choice__box { border-color: var(--blue-300); } .choice input:checked + .choice__box { border-color: var(--primary); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--primary); } .choice input:focus-visible + .choice__box { box-shadow: var(--focus); } /* 6.8 Ogohlantirishlar */ .alert { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-sm); } .alert--info { background: var(--surface-2); border-color: var(--blue-200); color: var(--tint-fg); } .alert--success { background: var(--green-50); border-color: #B7E4C7; color: var(--green-600); } .alert--warning { background: var(--tint-orange); border-color: var(--orange-100); color: var(--orange-700); } .alert--danger { background: var(--red-50); border-color: #F5C2C0; color: var(--red-600); } .alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } /* 6.9 Chat vidjeti (ko'rinish; mantiq 7-bosqichda) */ .chat-panel { width: min(380px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); } .chat-panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--primary); color: var(--white); } .chat-panel__head small { display: block; color: var(--blue-100); font-size: var(--fs-xs); } .chat-panel__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; } .chat-panel__avatar img { width: 28px; } .chat-panel__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface-2); min-height: 200px; } .bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .bubble--in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .bubble--out { align-self: flex-end; background: var(--primary); color: var(--white); border-bottom-right-radius: 4px; } .bubble time { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; } .chat-panel__form { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line); } .chat-panel__form .input { min-height: 44px; } /* Haqiqiy vidjet (sahifada suzib turadi) */ .chat.is-open .chat-launcher { opacity: 0; pointer-events: none; transform: scale(0.9); } .chat-panel--float { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 61; display: flex; flex-direction: column; height: min(600px, calc(100dvh - 32px)); transform-origin: bottom right; animation: chat-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); } .chat-panel--float[hidden] { display: none; } @keyframes chat-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } } .chat-panel__who { flex: 1; min-width: 0; } .chat-panel__who strong { font-family: var(--font-display); font-size: var(--fs-sm); } .chat-panel__close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; } .chat-panel__close:hover { background: rgba(255, 255, 255, 0.15); } .chat-panel__close svg { width: 20px; height: 20px; } .chat-panel--float .chat-panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; } .bubble__who { display: block; font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 2px; } .bubble__text a { color: var(--primary); font-weight: 600; text-underline-offset: 2px; } .bubble--admin { border-color: var(--orange-100); background: var(--tint-orange); } .bubble--admin .bubble__who { color: var(--orange-700); } .bubble--out time { text-align: right; } .bubble.is-pending { opacity: 0.6; } .chat-sys { align-self: center; max-width: 92%; padding: 6px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--blue-200); color: var(--text-muted); font-size: var(--fs-xs); text-align: center; } .chat-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); } .chat-quick__btn { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--blue-200); background: var(--surface); color: var(--primary); font: inherit; font-size: var(--fs-xs); cursor: pointer; } .chat-quick__btn:hover { background: var(--tint); } .chat-typing { display: flex; gap: 4px; padding: 14px; } .chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-200); animation: chat-dot 1s infinite ease-in-out; } .chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-dot { 50% { transform: translateY(-4px); background: var(--primary); } } .chat-panel__bar { padding: var(--sp-2) var(--sp-3) 0; } .chat-panel__bar [hidden] { display: none; } .chat-panel__manager { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: var(--tint-orange); color: var(--orange-700); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; } .chat-panel__manager svg { width: 16px; height: 16px; } .chat-panel__manager:hover { background: var(--orange-100); } .chat-esc { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); } .chat-esc[hidden] { display: none; } .chat-esc p { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); } .chat-esc .chat-esc__err { color: var(--red-600); } .chat-esc__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); } .chat-panel__input { resize: none; padding-block: 10px; line-height: 1.4; max-height: 120px; } .chat-panel__send { flex: none; width: 44px; min-height: 44px; padding: 0; } .chat-panel__send svg { width: 20px; height: 20px; } .chat-panel__note { margin: 0; padding: 0 var(--sp-3) var(--sp-2); font-size: 11px; color: var(--text-muted); } @media (max-width: 520px) { .chat-panel--float { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } .chat-open body { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .chat-panel--float, .chat-typing i { animation: none; } } @media print { .chat { display: none; } } /* 6.10 Footer */ .site-footer { background: var(--navy-900); color: var(--blue-100); padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-sm); } .site-footer a { color: var(--white); text-decoration: none; } .site-footer a:hover { color: var(--orange-300); } .site-footer h4 { color: var(--white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; } .footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .site-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgb(255 255 255 / 0.12); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; color: var(--slate-400); } /* 6.11 Xato sahifasi */ .error-page__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--blue-200); margin: 0 0 var(--sp-3); } /* 7. Yordamchi klasslar ------------------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--accent); color: var(--navy-900); font-weight: 700; border-radius: var(--r-sm); } .skip-link:focus { top: var(--sp-2); } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* Harakatni kamaytirishni so'raganlar uchun */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 8. Sahifa komponentlari (4-bosqich) -------------------------------------- */ .container--narrow { max-width: 860px; } .h3 { font-size: var(--fs-h3); } .h4 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 700; } .prose p { font-size: var(--fs-md); line-height: 1.75; } .empty-state { padding: var(--sp-7) 0; text-align: center; color: var(--text-muted); } /* Bosh sahifa hero */ .hero { padding-block: clamp(var(--sp-6), 6vw, var(--sp-9)); overflow: hidden; } .hero__inner { display: grid; gap: var(--sp-7); align-items: center; } @media (min-width: 900px) { .hero__inner { grid-template-columns: 1.25fr 1fr; } } .hero__title { margin-bottom: var(--sp-4); font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3.25rem); } .hero__actions { margin-top: var(--sp-5); } .hero__trust { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-2); } .hero__trust li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); } .hero__trust svg { width: 20px; height: 20px; flex: none; color: var(--green-600); margin-top: 1px; } .hero__visual { position: relative; min-height: 320px; display: grid; place-items: center; } .hero__visual::before { content: ""; position: absolute; inset: 8% 6%; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); } .hero__sack { position: absolute; width: min(46%, 220px); } .hero__sack--back { transform: translate(34%, -6%) rotate(8deg); } .hero__sack--front { transform: translate(-30%, 6%) rotate(-6deg); } @media (max-width: 899.98px) { .hero__visual { min-height: 240px; } } /* Ichki sahifa sarlavhasi */ .page-hero { padding-block: var(--sp-6) var(--sp-7); } .page-hero__inner { display: grid; gap: var(--sp-5); align-items: center; } @media (min-width: 900px) { .page-hero__inner { grid-template-columns: 1fr 220px; } } .page-hero__img { width: 180px; justify-self: center; } @media (max-width: 899.98px) { .page-hero__img { display: none; } } .breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--primary); } .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); } .chip { padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: var(--fs-sm); color: var(--text); text-decoration: none; } .chip:hover { border-color: var(--primary); color: var(--primary); } /* Guruh bloki */ .group-head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; justify-content: space-between; } .group-head__tagline { margin: var(--sp-2) 0 0; color: var(--orange-700); font-weight: 600; } .group-body { display: grid; gap: var(--sp-5); margin-block: var(--sp-6); } @media (min-width: 900px) { .group-body { grid-template-columns: 1fr 1fr; } } .specs { display: grid; gap: var(--sp-3); margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-content: start; } .specs__item { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); } .specs dt { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; } .specs dd { margin: 0; font-size: var(--fs-sm); } .terms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-content: start; } .terms__item { display: flex; gap: var(--sp-3); align-items: flex-start; } .terms__icon { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--tint-orange); color: var(--orange-700); } .terms__icon svg { width: 18px; height: 18px; } .terms small { display: block; font-size: var(--fs-xs); color: var(--text-muted); } .terms b { font-size: var(--fs-sm); } .price-block + .price-block { margin-top: var(--sp-7); } .group-head + .price-block { margin-top: var(--sp-6); } .price-block h3 small { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; } .price-block .terms { margin-top: var(--sp-5); } .price-note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--sp-3) 0 0; } .price-note span { white-space: nowrap; } .price-table--list { min-width: 520px; } .price-table .price-table__purpose { text-align: left; font-size: var(--fs-sm); max-width: 320px; } .price-table td.is-empty { color: var(--slate-400); } .price-table tr.is-best td b { color: var(--orange-700); } .custom-box { display: grid; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } @media (min-width: 900px) { .custom-box { grid-template-columns: auto auto 1fr; align-items: start; } .custom-box .btn { grid-column: 1 / -1; justify-self: start; } } .custom-box small { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; } .custom-box__price b { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--primary); } .custom-box__example { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-radius: var(--r-md); } /* Buyurtma qadamlari */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .steps__item { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); } .steps__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--white); font-family: var(--font-display); font-weight: 800; margin-bottom: var(--sp-3); } .steps__item h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); } .steps__item p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } /* AI studiya e'loni */ .ai-teaser { display: flex; gap: var(--sp-5); align-items: center; padding: var(--sp-6); border-radius: var(--r-xl); background: var(--surface); border: 1px dashed var(--blue-300); } .ai-teaser__icon { flex: none; width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--tint); color: var(--primary); } .ai-teaser__icon svg { width: 32px; height: 32px; } .ai-teaser__title { font-size: var(--fs-h3); margin: var(--sp-2) 0; } @media (max-width: 599.98px) { .ai-teaser { flex-direction: column; align-items: flex-start; } } /* FAQ */ .faq { display: grid; gap: var(--sp-3); } .faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); font-weight: 700; } .faq__q::-webkit-details-marker { display: none; } .faq__chev svg { width: 20px; height: 20px; transition: transform var(--dur-base) var(--ease-out); color: var(--slate-500); } .faq__item[open] .faq__chev svg { transform: rotate(180deg); } .faq__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); } /* CTA band */ .cta-band { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; justify-content: space-between; padding: clamp(var(--sp-5), 4vw, var(--sp-7)); border-radius: var(--r-xl); background: var(--primary); color: var(--white); } .cta-band__title { color: var(--white); margin-bottom: var(--sp-2); } .cta-band__text { margin: 0; color: var(--blue-100); } /* Kalkulyator */ .calc { display: grid; gap: var(--sp-5); align-items: start; } .calc > * { min-width: 0; } /* uzun select matni ustunni kengaytirmasin */ @media (min-width: 900px) { .calc { grid-template-columns: 1.3fr 1fr; } .calc__result { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } .calc__form .field { margin-top: var(--sp-4); } .calc__types { border: 0; padding: 0; margin-inline: 0; } .segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .segmented__opt { position: relative; flex: 1 1 160px; } .segmented__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .segmented__opt span { display: block; text-align: center; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted); } .segmented__opt input:checked + span { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); } .segmented__opt input:focus-visible + span { box-shadow: var(--focus); } .check { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; font-size: var(--fs-sm); } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); flex: none; } .calc__result { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--navy-900); color: var(--white); display: grid; gap: var(--sp-4); } .calc__lines { margin: 0; display: grid; gap: var(--sp-3); } .calc__lines div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); } .calc__lines dt { color: #C7D6FF; } .calc__lines dd { margin: 0; font-weight: 700; text-align: right; } .calc__total { display: grid; gap: 2px; padding-top: var(--sp-4); border-top: 1px solid rgb(255 255 255 / .15); } .calc__total span { color: #C7D6FF; font-size: var(--fs-sm); } .calc__total b { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; } .calc__total small { color: var(--orange-300); font-weight: 700; } .calc__note { margin: 0; font-size: var(--fs-xs); color: #C7D6FF; } .calc__result .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* Kontaktlar */ .contact-card { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: inherit; } .contact-card small { color: var(--text-muted); } .contact-card b { font-size: var(--fs-lg); overflow-wrap: anywhere; } .feature__icon--tg { background: #E3F4FB; color: #1B8BC2; } .contact-extra { margin-top: var(--sp-5); display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } /* CMS */ .news-card { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: inherit; } .news-card__img { border-radius: var(--r-md); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } .news-card__title { font-size: var(--fs-lg); margin: 0; } .article__cover { border-radius: var(--r-lg); margin-block: var(--sp-5); width: 100%; } .gallery { columns: 3 260px; column-gap: var(--sp-4); } .gallery__item { break-inside: avoid; margin: 0 0 var(--sp-4); } .gallery__item img, .gallery__item video { border-radius: var(--r-md); width: 100%; } .gallery__item figcaption { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); } .person__photo { border-radius: var(--r-lg); aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: var(--sp-3); } .person__name { font-size: var(--fs-lg); margin-bottom: 4px; } .logos { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .logos__item { display: grid; place-items: center; min-width: 140px; height: 80px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; } .logos__item img { max-height: 48px; width: auto; } a.product-card { text-decoration: none; color: inherit; } /* 9. Buyurtma ustasi (5-bosqich) -------------------------------------------- */ .page-hero--compact { padding-block: var(--sp-5); } .page-hero--compact h1 { margin-bottom: var(--sp-2); } .stepper { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); counter-reset: none; } .stepper__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--slate-500); font-size: var(--fs-sm); font-weight: 600; min-width: 0; } .stepper__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-weight: 800; font-size: var(--fs-xs); } .stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stepper__item.is-active { border-color: var(--primary); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); } .stepper__item.is-active .stepper__num { background: var(--primary); color: var(--white); } .stepper__item.is-done .stepper__num { background: var(--green-600); color: var(--white); } @media (max-width: 599.98px) { .stepper__label { display: none; } .stepper__item { justify-content: center; } .stepper__item.is-active .stepper__label { display: inline; } .stepper { grid-template-columns: auto auto auto auto; justify-content: start; } } .wizard__grid { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .wizard__grid { grid-template-columns: 1.2fr 1fr; } .cart { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } .wizard__grid > * { min-width: 0; } .wizard__step.card { max-width: 860px; } .wizard__nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; } .wizard .field { margin-top: var(--sp-4); } .wizard fieldset.field { border: 0; padding: 0; margin-inline: 0; } .wizard .check + .check { margin-top: var(--sp-2); } .cart__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); } .cart__item { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); } .cart__item > div:first-child { display: grid; gap: 2px; min-width: 0; } .cart__item small { font-size: var(--fs-xs); } .cart__side { display: grid; justify-items: end; align-content: space-between; gap: var(--sp-2); } .cart__total { display: grid; gap: 2px; padding: var(--sp-4) 0; border-top: 1px dashed var(--line); margin-bottom: var(--sp-3); } .cart__total span { font-size: var(--fs-sm); color: var(--text-muted); } .cart__total b { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--primary); } .cart__total small { color: var(--orange-700); font-weight: 700; } .cart .btn[disabled] { opacity: .5; } .options { display: grid; gap: var(--sp-3); } .options--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .choice__box--col { flex-direction: column; align-items: flex-start; gap: 2px; } .choice__box--col .muted { font-size: var(--fs-sm); } .transfer { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px dashed var(--line); } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .offer-table { min-width: 520px; } .offer-table th.offer-table__name { text-align: left; background: var(--surface); color: var(--text); } .offer-table__name b, .offer-table__name small { display: block; } .offer-table__name small { font-weight: 500; } .offer-table tfoot th, .offer-table tfoot td { background: var(--surface-2); border-bottom: 0; } .offer-table tfoot th { text-align: right; } .offer-table td b { font-size: var(--fs-md); } .summary { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .summary div { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); } .summary dt { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .summary dd { margin: 4px 0 0; } .done { text-align: center; } .done__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--green-600); margin-bottom: var(--sp-4); } .done__icon svg { width: 32px; height: 32px; } .done__facts { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); text-align: left; } .done__facts div { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); } .done__facts dt { font-size: var(--fs-xs); color: var(--text-muted); } .done__facts dd { margin: 4px 0 0; } .done__code { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; color: var(--primary); } .done__account, .done__pay { margin-top: var(--sp-5); } .done__creds { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: var(--sp-4) 0; } .done__creds dt { font-size: var(--fs-xs); color: var(--text-muted); } .done__creds dd { margin: 4px 0 0; font-weight: 700; font-size: var(--fs-lg); } .done__password { font-size: var(--fs-lg); padding: 4px 10px; border-radius: var(--r-sm); background: var(--tint-orange); color: var(--text); letter-spacing: .06em; user-select: all; } .done__card { font-family: var(--font-display); font-size: var(--fs-h3); margin: var(--sp-3) 0 0; } /* 10. Kuzatish va mijoz kabineti (6-bosqich) ------------------------------- */ .text-danger { color: var(--red-600); } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); } .icon-btn:hover { border-color: var(--primary); color: var(--primary); } .icon-btn svg { width: 20px; height: 20px; } .auth { max-width: 520px; margin-inline: auto; } .auth .feature__icon { margin-bottom: var(--sp-4); } .auth__alt { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-sm); } .status-grid { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 960px) { .status-grid { grid-template-columns: 1.1fr 1fr; } } .status-grid > * { min-width: 0; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline__item { position: relative; display: flex; gap: var(--sp-4); padding-bottom: var(--sp-5); } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line); } .timeline__item:last-child::before { display: none; } .timeline__item.is-done::before { background: var(--green-600); } .timeline__dot { flex: none; position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--white); } .timeline__dot svg { width: 16px; height: 16px; } .timeline__item.is-done .timeline__dot { background: var(--green-600); border-color: var(--green-600); } .timeline__item.is-active .timeline__dot { border-color: var(--primary); box-shadow: 0 0 0 4px var(--blue-100); } .timeline__item.is-active .timeline__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); } .timeline__body { padding-top: 4px; } .timeline__body b { display: block; } .timeline__item.is-todo .timeline__body b { color: var(--slate-400); font-weight: 600; } .timeline__item.is-active .timeline__body b { color: var(--primary); } .timeline__body p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } .timeline__body time { display: block; font-size: var(--fs-xs); color: var(--slate-500); margin-top: 2px; } .kv { margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); } .kv div { display: flex; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--line); } .kv div:last-child { border-bottom: 0; padding-bottom: 0; } .kv dt { color: var(--text-muted); font-size: var(--fs-sm); } .kv dd { margin: 0; text-align: right; } .item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .item-list li { display: grid; gap: 2px; } .receipt-form { display: grid; gap: var(--sp-3); } .upload { position: relative; display: block; cursor: pointer; } .upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload__box { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 72px; padding: var(--sp-4); border: 2px dashed var(--blue-300); border-radius: var(--r-md); background: var(--surface-2); color: var(--primary); font-weight: 700; text-align: center; overflow-wrap: anywhere; } .upload__box svg { width: 22px; height: 22px; flex: none; } .upload input:focus-visible + .upload__box { box-shadow: var(--focus); } .receipt-preview { max-height: 260px; width: auto; margin-inline: auto; border-radius: var(--r-md); border: 1px solid var(--line); } .order-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } .order-card { display: grid; gap: var(--sp-3); text-decoration: none; color: inherit; } .order-card__head, .order-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .order-card__head b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--primary); } .order-card__stage { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .order-card__foot span { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; font-size: var(--fs-sm); } .order-card__foot svg { width: 16px; height: 16px; } .item-list li.cluster { display: flex; } /* 11. AI studiya (7-bosqich) ------------------------------------------------ */ .studio-credits { display: grid; justify-items: end; gap: 4px; max-width: 320px; text-align: right; } .studio-credits .badge { font-size: var(--fs-sm); padding: 6px 14px; } .studio { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 1000px) { .studio { grid-template-columns: 1.15fr 1fr; } .studio__result { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } .studio > * { min-width: 0; } .studio__form { display: grid; gap: var(--sp-4); } .studio__sec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-4) var(--sp-5) var(--sp-5); } .studio__sec > summary { cursor: pointer; font-weight: 700; font-size: var(--fs-md); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .studio__sec > summary::-webkit-details-marker { display: none; } .studio__sec > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--slate-500); border-bottom: 2px solid var(--slate-500); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out); flex: none; } .studio__sec[open] > summary { margin-bottom: var(--sp-4); } .studio__sec[open] > summary::after { transform: rotate(-135deg); } .studio__sec > summary small { font-weight: 500; margin-right: auto; } .studio__pair { gap: 0 var(--sp-4); } .studio__pair .field { margin-top: var(--sp-4); } .studio__logo-preview { max-height: 90px; width: auto; margin-top: var(--sp-3); border-radius: var(--r-sm); background: repeating-conic-gradient(#EEF2FC 0% 25%, #fff 0% 50%) 50% / 16px 16px; padding: 6px; } .upload--sm .upload__box { min-height: 52px; font-weight: 600; font-size: var(--fs-sm); } .range { width: 100%; accent-color: var(--primary); } .palettes { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .palette { position: relative; } .palette input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .palette__box { display: grid; gap: 4px; padding: var(--sp-3); border: 1.5px solid var(--line); border-radius: var(--r-md); height: 100%; } .palette input:checked + .palette__box { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-2); } .palette input:focus-visible + .palette__box { box-shadow: var(--focus); } .palette__swatch { height: 28px; border-radius: 6px; margin-bottom: 4px; } .palette--minimalist .palette__swatch { background: linear-gradient(90deg, #fff 0 60%, #1E4FD8 60%); border: 1px solid var(--line); } .palette--industrial .palette__swatch { background: linear-gradient(90deg, #FACC15 0 45%, #374151 45% 80%, #fff 80%); } .palette--premium .palette__swatch { background: linear-gradient(90deg, #1F2937 0 55%, #D4AF37 55% 85%, #fff 85%); } .chipset { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); } .chipbox { position: relative; } .chipbox input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .chipbox span { display: inline-block; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line); font-size: var(--fs-sm); font-weight: 600; background: var(--surface); } .chipbox input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--white); } .chipbox input:disabled + span { opacity: .45; } .chipbox input:focus-visible + span { box-shadow: var(--focus); } .studio__result { display: grid; gap: var(--sp-4); } .studio__canvas { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--blue-300); overflow: hidden; } .studio__placeholder { width: 34%; opacity: .55; } .studio__progress { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5); text-align: center; color: var(--primary); font-weight: 600; } .spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--blue-200); border-top-color: var(--primary); animation: q-spin .9s linear infinite; } @keyframes q-spin { to { transform: rotate(360deg); } } .studio__image { display: block; width: 100%; height: 100%; } .studio__image img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); } .studio__actions { display: grid; gap: var(--sp-3); } .design-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: var(--sp-4); } .design-tile img { border-radius: var(--r-md); border: 1px solid var(--line); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .design-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .design-card { padding: 0; overflow: hidden; display: grid; } .design-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-bottom: 1px solid var(--line); } .design-card__body { display: grid; gap: var(--sp-2); padding: var(--sp-4); } .design-pick { display: flex; gap: var(--sp-3); align-items: center; margin: 0 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--r-md); background: var(--tint-orange); border: 1px solid var(--orange-100); } .design-pick img { width: 96px; height: auto; border-radius: var(--r-sm); } .design-pick figcaption { display: grid; gap: 2px; font-size: var(--fs-sm); } /* 9. Harakat tizimi (11-bosqich) — "joyiga tushish" -------------------------- Bloklar qadoq stolga qo'yilgandek qisqa masofadan ko'tarilib o'tiradi; qoplar stolga tushadi; ishlab chiqarish bosqichlari chiziq bo'lib to'ladi. Eski saytdagi effektlar ishlatilmaydi. Hamma narsa "harakatni kamaytirish" sozlamasini hurmat qiladi. */ :root { --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: linear(0, 0.22 9%, 0.69 21%, 1.04 34%, 1.1 41%, 1.07 49%, 1.0 62%, 0.99 74%, 1); --rv-step: 70ms; } /* 9.1 Paydo bo'lish (motion.js: [data-rv] → .is-in) */ .motion [data-rv] { opacity: 0; transform: translateY(18px); } .motion [data-rv].is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease-settle), transform 640ms var(--ease-settle), translate 350ms var(--ease-settle), box-shadow 350ms ease, border-color 300ms; transition-delay: calc(var(--rv-i, 0) * var(--rv-step)), calc(var(--rv-i, 0) * var(--rv-step)), 0s, 0s, 0s; } /* Ichki elementlar: raqam "bosiladi", ikonka joyiga tushadi */ .motion .steps__item[data-rv] .steps__num, .motion .feature[data-rv] .feature__icon { transform: scale(0.55); opacity: 0; } .motion .steps__item.is-in .steps__num, .motion .feature.is-in .feature__icon { transform: none; opacity: 1; transition: transform 620ms var(--ease-spring), opacity 300ms ease; transition-delay: calc(var(--rv-i, 0) * var(--rv-step) + 160ms); } @media (prefers-reduced-motion: no-preference) { /* 9.2 Hero sahnasi (sof CSS — sahifa ochilishi bilan) */ .hero__copy > * { animation: q-rise 700ms var(--ease-settle) both; } .hero__copy > :nth-child(2) { animation-delay: 70ms; } .hero__copy > :nth-child(3) { animation-delay: 140ms; } .hero__copy > :nth-child(4) { animation-delay: 210ms; } .hero__copy > :nth-child(5) { animation-delay: 280ms; } .hero__visual::before { animation: q-table 700ms var(--ease-settle) 120ms both; } .hero__sack--back { animation: q-sack-back 900ms var(--ease-spring) 380ms both; } .hero__sack--front { animation: q-sack-front 1000ms var(--ease-spring) 560ms both; } .hero__sack { translate: calc(var(--px, 0) * var(--depth, 10px)) calc(var(--py, 0) * var(--depth, 10px)); transition: translate 600ms var(--ease-settle); } .hero__sack--back { --depth: 8px; } .hero__sack--front { --depth: -14px; } .page-hero__inner > * { animation: q-rise 640ms var(--ease-settle) both; } .page-hero__inner > :nth-child(2) { animation-delay: 90ms; } /* 9.3 Kartalar: qop "qo'lga olinadi" */ .product-card__media img { transition: transform 500ms var(--ease-settle); } .product-card:hover .product-card__media img { transform: translateY(-8px) rotate(-2deg); } /* 9.4 Tugma: strelka oldinga suriladi */ .btn > svg:last-child:not(:first-child) { transition: transform 260ms var(--ease-settle); } .btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); } /* 9.5 Sarlavha: aylantirilganda soya, telefonda pastga aylantirsa yashirinadi */ .site-header { transition: box-shadow 240ms ease, transform 320ms var(--ease-settle), background-color 240ms ease; } .site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgb(11 31 92 / 0.35); } .site-header.is-hidden { transform: translateY(-100%); } /* 9.6 Kuzatuv: bajarilgan bosqichlar chizig'i ketma-ket to'ladi */ .motion .timeline__item.is-done::before { transform: scaleY(0); transform-origin: top; } .motion .timeline.is-drawn .timeline__item.is-done::before { transform: none; transition: transform 420ms var(--ease-settle) calc(var(--tl-i, 0) * 140ms + 200ms); } .motion .timeline.is-drawn .timeline__item.is-active .timeline__dot { animation: q-step 900ms var(--ease-spring) calc(var(--tl-i, 0) * 140ms + 260ms) both; } /* 9.7 FAQ: yumshoq ochilish (Chromium 131+; boshqalarda — odatdagidek) */ :root { interpolate-size: allow-keywords; } .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-settle), content-visibility 320ms allow-discrete; } .faq__item[open]::details-content { block-size: auto; } /* 9.8 Kalkulyator: summa yangilanganda */ .calc__total b { display: inline-block; } /* 9.9 Sahifalar orasida o'tish (View Transitions; qo'llamaydigan brauzerda — oddiy o'tish) */ @view-transition { navigation: auto; } .site-header { view-transition-name: site-header; } ::view-transition-old(root) { animation: q-vt-out 160ms ease both; } ::view-transition-new(root) { animation: q-vt-in 360ms var(--ease-settle) both; } } @keyframes q-rise { from { opacity: 0; transform: translateY(16px); } } @keyframes q-table { from { opacity: 0; transform: scale(0.94); } } @keyframes q-sack-back { from { opacity: 0; transform: translate(80%, -6%) rotate(18deg); } to { transform: translate(34%, -6%) rotate(8deg); } } @keyframes q-sack-front { from { opacity: 0; transform: translate(-30%, -60%) rotate(-16deg); } 30% { opacity: 1; } to { transform: translate(-30%, 6%) rotate(-6deg); } } @keyframes q-step { from { transform: scale(0.6); } } @keyframes q-vt-out { to { opacity: 0; } } @keyframes q-vt-in { from { opacity: 0; transform: translateY(10px); } } /* 12. packs2 dizayni (qoplar.uz ranglarida) ---------------------------------------- Sarlavha mega-menyusi, drawer, buyruqlar paneli, mavzu kaliti, bosh sahifa bloklari, dumaloq chat tugmasi va "yuqoriga" tugmasi. Mantiq — ui.js. */ :root { --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); } /* 12.1 Umumiy */ html.is-locked { overflow: hidden; } .logo-dark { display: none !important; } :root[data-theme="dark"] .logo-light { display: none !important; } :root[data-theme="dark"] .logo-dark { display: block !important; } .live-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; } .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: q-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; } .section--tight { padding-block: clamp(var(--sp-6), 5vw, var(--sp-8)); } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .lead { margin-inline: auto; } .section__head--center .eyebrow::before { display: none; } .btn--glow { box-shadow: var(--glow-orange); } .btn--glow:hover { box-shadow: 0 18px 40px -12px rgb(255 122 26 / 0.75); } .btn--glass { --btn-bg: rgb(255 255 255 / 0.12); --btn-fg: #fff; --btn-bd: rgb(255 255 255 / 0.35); backdrop-filter: blur(8px); } .btn--glass:hover { --btn-bg: rgb(255 255 255 / 0.22); --btn-fg: #fff; } [data-magnetic] { transition: translate 450ms var(--ease-pop), background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow 300ms; } kbd { font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-muted); white-space: nowrap; } /* 12.2 Sarlavha */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--header-bg); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); transition: height 300ms var(--ease-settle), box-shadow 240ms ease, transform 320ms var(--ease-settle), background-color 240ms ease; } .site-header.is-compact { height: 60px; } .site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-4); } .site-header__logo { flex: none; display: block; } .site-header__logo img { height: 34px; width: auto; transition: height 300ms var(--ease-settle); } .site-header.is-compact .site-header__logo img { height: 30px; } .site-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .mnav { position: relative; flex: 1; display: flex; justify-content: center; } .mnav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; } .mnav__item { position: relative; } .mnav__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-sm); color: var(--text); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast), background-color var(--dur-fast); } .mnav__link:hover, .is-open > .mnav__link, .mnav__link[aria-current="page"], .mnav__link[data-active] { color: var(--primary); } .mnav__link > svg { flex: none; width: 16px; height: 16px; transition: rotate 260ms var(--ease-settle); } .mnav__ai { flex: none; } @media (max-width: 1379.98px) { .mnav__link { padding: 0 9px; } .hbtn--search kbd { display: none; } .hbtn--search { padding: 0 10px; } .site-header__inner { gap: var(--sp-3); } } .is-open > .mnav__link > svg { rotate: 180deg; } .mnav__ai { display: inline-grid; color: var(--accent); } .mnav__ai svg { width: 16px; height: 16px; } .mnav__ink { position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; border-radius: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: transform 340ms var(--ease-settle), width 340ms var(--ease-settle), opacity 200ms; } .mpanel { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60; min-width: 330px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 180ms ease, transform 280ms var(--ease-settle), visibility 0s linear 280ms; } .mpanel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* sichqoncha "ko'prigi" */ .is-open > .mpanel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .mnav__item:has(> .mpanel--mega) { position: static; } .mpanel--mega { width: min(780px, calc(100vw - 32px)); padding: 12px; } .mpanel__grid { display: grid; grid-template-columns: 1fr 250px; gap: 12px; } .mprod { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); color: var(--text); text-decoration: none; transition: background-color var(--dur-fast); } .mprod:hover, .mprod:focus-visible { background: var(--surface-2); color: var(--text); } .mprod__img { flex: none; width: 68px; height: 76px; display: grid; place-items: center; border-radius: var(--r-md); background: linear-gradient(150deg, var(--tint), transparent); } .mprod__img img { height: 62px; width: auto; transition: transform 400ms var(--ease-settle); } .mprod:hover .mprod__img img { transform: translateY(-4px) rotate(-5deg); } .mprod__text { display: grid; gap: 2px; } .mprod__text b { font-size: var(--fs-sm); } .mprod__text small { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; } .mprod__text em { font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--primary); } .mpanel__links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); } .mpanel__links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-decoration: none; } .mpanel__links a:hover { background: var(--surface-2); color: var(--primary); } .mpanel__links svg { width: 16px; height: 16px; } .mpromo { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-md); background: linear-gradient(150deg, var(--blue-600), var(--navy-900)); color: #fff; text-decoration: none; } .mpromo::after { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -60px; bottom: -70px; border-radius: 50%; background: var(--orange-500); opacity: 0.45; filter: blur(40px); transition: transform 600ms var(--ease-settle); } .mpromo:hover { color: #fff; } .mpromo:hover::after { transform: translate(-20px, -20px) scale(1.15); } .mpromo b { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.25; } :lang(zh) .mpromo b { font-family: var(--font-cjk); } .mpromo small { color: var(--blue-100); font-size: var(--fs-xs); line-height: 1.5; } .mpromo__kicker { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.14); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .mpromo__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 8px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--navy-900); font-size: var(--fs-xs); font-weight: 800; transition: translate 300ms var(--ease-pop); } .mpromo:hover .mpromo__cta { translate: 3px 0; } .mpromo__cta svg { width: 14px; height: 14px; } .mleaf { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: none; cursor: pointer; font: inherit; text-align: left; color: var(--text); text-decoration: none; transition: background-color var(--dur-fast); } .mleaf:hover, .mleaf:focus-visible { background: var(--surface-2); color: var(--text); } .mleaf__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--tint); color: var(--primary); transition: transform 400ms var(--ease-pop); } .mleaf__icon svg { width: 18px; height: 18px; } .mleaf:hover .mleaf__icon { transform: rotate(-8deg) scale(1.08); } .mleaf__text b { display: block; font-size: var(--fs-sm); } .mleaf__text small { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; } .hlang { position: relative; } .mpanel--lang { left: auto; right: 0; min-width: 200px; transform: translateY(-8px); } .hlang.is-open > .mpanel--lang { transform: none; } .mpanel--lang a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: var(--fs-sm); } .mpanel--lang a b { min-width: 28px; font-size: var(--fs-xs); color: var(--primary); } .mpanel--lang a:hover { background: var(--surface-2); } .mpanel--lang a[aria-current="true"] { background: var(--tint); font-weight: 700; } .mnav-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(5 12 36 / 0.22); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .mnav-backdrop.is-on { opacity: 1; pointer-events: auto; } .hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 40px; min-width: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); } .hbtn:hover, .hlang.is-open > .hbtn { border-color: var(--primary); color: var(--primary); } .hbtn svg { width: 18px; height: 18px; } .hbtn--search { padding: 0 8px 0 11px; } /* Mavzu kaliti (iOS uslubidagi pill) */ .theme-toggle { position: relative; flex: none; width: 56px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); cursor: pointer; transition: background-color 300ms, border-color 300ms; } .theme-toggle:hover { border-color: var(--primary); } .theme-toggle__sun, .theme-toggle__moon { position: absolute; top: 50%; translate: 0 -50%; display: grid; transition: opacity 300ms; } .theme-toggle__sun { left: 8px; color: var(--orange-500); } .theme-toggle__moon { right: 8px; color: var(--slate-500); } .theme-toggle svg { width: 14px; height: 14px; stroke-width: 2.5; } .theme-toggle__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px rgb(11 31 92 / 0.25); transition: transform 460ms var(--ease-pop), background-color 300ms; } .theme-toggle[aria-pressed="true"] .theme-toggle__knob { transform: translateX(24px); background: var(--primary); } .theme-toggle[aria-pressed="true"] .theme-toggle__moon { opacity: 0; } .theme-toggle[aria-pressed="false"] .theme-toggle__sun { opacity: 0; } .theme-toggle:active .theme-toggle__knob { scale: 0.9; } .nav-toggle { display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); cursor: pointer; } .nav-toggle path { transition: transform 300ms var(--ease-settle); } .nav-toggle:hover path:last-child { transform: translateX(-6px); } @media (max-width: 1199.98px) { .mnav { display: none; } .nav-toggle { display: inline-grid; } .hbtn--search kbd { display: none; } .hbtn--search { padding: 0 10px; } } @media (max-width: 639.98px) { .site-header__actions .hlang, .site-header__actions .theme-toggle, .site-header__actions .hbtn--cabinet, .site-header__cta { display: none; } .site-header__logo img, .site-header.is-compact .site-header__logo img { height: 28px; } } /* Mavzu almashganda bosilgan nuqtadan doira bo'lib yoyiladi */ html.theme-vt .site-header { view-transition-name: none; } html.theme-vt::view-transition-old(root) { animation: none; } html.theme-vt::view-transition-new(root) { animation: q-theme-reveal 560ms var(--ease-settle); } @keyframes q-theme-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); } } /* 12.3 Mobil drawer */ .drawer { position: fixed; inset: 0; z-index: 95; } .drawer__backdrop { position: absolute; inset: 0; background: rgb(5 12 36 / 0.45); backdrop-filter: blur(4px); opacity: 0; transition: opacity 300ms ease; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 380ms var(--ease-settle); } .drawer.is-open .drawer__backdrop { opacity: 1; } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .drawer__head img { height: 28px; width: auto; } .drawer__search { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; } .drawer__search svg { width: 18px; height: 18px; flex: none; } .drawer__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer__body { flex: 1; display: grid; gap: var(--sp-2); align-content: start; } .drawer.is-open .drawer__body > * { animation: q-drawer-item 520ms var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); } @keyframes q-drawer-item { from { opacity: 0; transform: translateX(28px); } } .dacc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .dacc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px 16px; font-weight: 700; cursor: pointer; } .dacc > summary::-webkit-details-marker { display: none; } .dacc > summary svg { width: 18px; height: 18px; color: var(--text-muted); transition: rotate 260ms var(--ease-settle); } .dacc[open] > summary svg { rotate: 180deg; } .dacc__body { display: grid; gap: 2px; padding: 0 8px 8px; } .dacc__body a, .dacc__body button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left; text-decoration: none; } .dacc__body a:hover, .dacc__body button:hover { background: var(--surface-2); color: var(--primary); } .dacc__body svg { width: 18px; height: 18px; flex: none; color: var(--primary); } .dacc__body small { color: var(--text-muted); } .drawer__link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font-weight: 700; text-decoration: none; } .drawer__link svg { width: 18px; height: 18px; color: var(--primary); } .drawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-2); } .drawer__cta { margin-top: auto; flex: none; } /* 12.4 Buyruqlar paneli */ .cmdk { position: fixed; inset: 0; z-index: 100; display: grid; justify-items: center; align-items: start; padding: min(14vh, 120px) var(--sp-4) var(--sp-4); } .cmdk__backdrop { position: absolute; inset: 0; background: rgb(5 12 36 / 0.5); backdrop-filter: blur(6px); animation: q-fade 200ms ease both; } .cmdk__box { position: relative; width: min(640px, 100%); max-height: min(72vh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 40px 80px -20px rgb(5 12 36 / 0.5); overflow: hidden; animation: q-cmdk 320ms var(--ease-settle) both; } .cmdk__search { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); } .cmdk__search > svg { width: 20px; height: 20px; flex: none; color: var(--text-muted); } .cmdk__input { flex: 1; min-width: 0; height: 56px; border: 0; background: none; outline: none; font-size: 16px; color: var(--text); } .cmdk__input::placeholder { color: var(--slate-400); } .cmdk__list { overflow-y: auto; padding: 8px; overscroll-behavior: contain; } .cmdk__group { padding: 10px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .cmdk__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left; text-decoration: none; } .cmdk__item[aria-selected="true"] { background: var(--tint); color: var(--primary); } .cmdk__icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--primary); } .cmdk__icon svg { width: 16px; height: 16px; } .cmdk__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk__item small { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; } .cmdk__empty { margin: 0; padding: var(--sp-6); text-align: center; color: var(--text-muted); } .cmdk__foot { padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 11px; color: var(--text-muted); } @media (max-width: 639.98px) { .cmdk { padding-top: var(--sp-3); } .cmdk__foot { display: none; } } /* 12.5 Hero */ .hero2 { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(var(--sp-6), 6vw, 88px) clamp(var(--sp-8), 7vw, 104px); } .hero2__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero2__orb { position: absolute; border-radius: 50%; filter: blur(60px); } .hero2__orb--a { width: 540px; height: 540px; top: -180px; right: -140px; background: radial-gradient(circle, var(--blue-500), transparent 70%); opacity: 0.5; } .hero2__orb--b { width: 420px; height: 420px; bottom: -200px; left: -140px; background: radial-gradient(circle, var(--orange-500), transparent 70%); opacity: 0.28; } .hero2__grid { position: absolute; inset: 0; background-image: radial-gradient(rgb(30 79 216 / 0.16) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 62% 40%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at 62% 40%, #000 25%, transparent 72%); } :root[data-theme="dark"] .hero2__grid { background-image: radial-gradient(rgb(157 182 255 / 0.14) 1px, transparent 1px); } .particle { position: absolute; border-radius: 50%; background: var(--orange-500); opacity: 0.5; animation: q-drift 6s ease-in-out infinite; } .hero2__inner { display: grid; gap: clamp(var(--sp-6), 5vw, 56px); align-items: center; } @media (min-width: 960px) { .hero2__inner { grid-template-columns: 1.1fr 0.9fr; } } .hero2__copy { min-width: 0; } .ai-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp-4); padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); font-size: var(--fs-xs); font-weight: 700; color: var(--text); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast); } .ai-badge:hover { border-color: var(--primary); color: var(--primary); } .ai-badge svg { width: 14px; height: 14px; transition: translate 300ms var(--ease-pop); } .ai-badge:hover svg { translate: 3px 0; } .hero2__copy .eyebrow { display: flex; } .hero2__typing { margin: 0 0 var(--sp-3); min-height: 2.6em; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem); line-height: 1.3; color: var(--text); } :lang(zh) .hero2__typing { font-family: var(--font-cjk); } .typing__text { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .typing__caret { display: inline-block; width: 3px; height: 1em; margin-left: 3px; vertical-align: -0.12em; border-radius: 2px; background: var(--accent); animation: q-caret 1s steps(1) infinite; } .hero2__dash { color: var(--text-muted); font-weight: 600; } .hero2__title { margin-bottom: var(--sp-4); font-size: clamp(1.6rem, 1rem + 2vw, 2.75rem); } .hero2__lead { max-width: 56ch; } .hero2__actions { margin-top: var(--sp-5); } .hero2__actions .btn svg { width: 20px; height: 20px; } .hero2__visual { position: relative; isolation: isolate; justify-self: center; width: min(100%, 440px); margin-inline: 24px; } .holo { position: absolute; inset: -7%; z-index: -1; pointer-events: none; } .holo span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(61 104 230 / 0.35); animation: q-holo 5s ease-in-out infinite; } .holo span:nth-child(2) { inset: 9%; border-color: rgb(255 122 26 / 0.35); animation-delay: 0.8s; } .holo span:nth-child(3) { inset: -5%; border: 1.5px dashed rgb(61 104 230 / 0.28); animation: q-spin 60s linear infinite; } .hslides { position: relative; aspect-ratio: 0.926; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, var(--blue-600), var(--navy-900)); box-shadow: 0 40px 80px -30px rgb(11 31 92 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.08); } .hslide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 6s linear; } .hslide.is-active { opacity: 1; transform: none; } .hslide > img { width: 100%; height: 100%; object-fit: cover; } .hslide--scene { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgb(61 104 230 / 0.7), transparent 66%); } .hslide--pp { background: radial-gradient(circle at 50% 42%, rgb(255 122 26 / 0.5), transparent 66%); } .hslide--scene .hslide__sack { width: 52%; height: auto; object-fit: contain; filter: drop-shadow(0 30px 30px rgb(0 0 0 / 0.35)); animation: q-float 6s ease-in-out infinite; } .hslide figcaption { position: absolute; left: 16px; bottom: 44px; padding: 6px 12px; border-radius: var(--r-pill); background: rgb(11 31 92 / 0.45); backdrop-filter: blur(8px); color: #fff; font-size: var(--fs-xs); font-weight: 700; } .hslides__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center; gap: 8px; } .hslides__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.45); cursor: pointer; transition: width 350ms var(--ease-settle), background-color 300ms; } .hslides__dot::after { content: ""; position: absolute; inset: -10px -6px; } .hslides__dot[aria-current="true"] { width: 26px; background: #fff; } .hchip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-md); font-size: var(--fs-xs); font-weight: 700; color: var(--text); white-space: nowrap; } .hchip svg { width: 16px; height: 16px; color: var(--primary); flex: none; } .hchip b { color: var(--primary); } .hchip--1 { top: 7%; left: -12%; } .hchip--2 { top: 32%; right: -14%; } .hchip--3 { bottom: 24%; left: -14%; } .hchip--4 { bottom: -5%; right: 2%; } @media (max-width: 599.98px) { .hero2__visual { width: min(100%, 340px); } .hchip--1 { left: -4%; } .hchip--2 { right: -6%; } .hchip--3 { display: none; } .hchip--4 { right: -2%; } } .hero2__scroll { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-muted); animation: q-bounce 2s ease-in-out infinite; } .hero2__scroll svg { width: 22px; height: 22px; } .hero2__scroll:hover { color: var(--primary); } /* 12.6 Ishonch paneli, xizmatlar, ajratgich */ .tbar { padding-block: var(--sp-6) var(--sp-5); background: var(--surface); border-block: 1px solid var(--line); } .tbar__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .tmetric { display: grid; gap: 6px; padding-left: 16px; border-left: 3px solid; border-image: linear-gradient(var(--primary), var(--accent)) 1; } .tmetric__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; color: var(--primary); } :lang(zh) .tmetric__value { font-family: var(--font-body); } .tmetric__label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; } .tbar__ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px dashed var(--line); font-size: var(--fs-sm); font-weight: 600; } .svc-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .svc { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-3); padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); color: var(--text); text-decoration: none; transition: translate 350ms var(--ease-settle), box-shadow 350ms ease, border-color 300ms; } .svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgb(61 104 230 / 0.16), transparent 60%); opacity: 0; transition: opacity 300ms; } .svc:hover { translate: 0 -4px; box-shadow: var(--glow-blue); border-color: var(--blue-200); color: var(--text); } .svc:hover::before { opacity: 1; } .svc__num { position: absolute; top: 18px; right: 24px; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--blue-200); } .svc__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, var(--blue-500), var(--blue-800)); color: #fff; box-shadow: var(--glow-blue); transition: transform 500ms var(--ease-pop); } .svc__icon svg { width: 24px; height: 24px; } .svc:hover .svc__icon { transform: rotate(-10deg) scale(1.06); } .svc__title { margin: 0; font-size: var(--fs-lg); } .svc__text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .svc__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--primary); } .svc__link svg { width: 16px; height: 16px; transition: translate 300ms var(--ease-pop); } .svc:hover .svc__link svg { translate: 4px 0; } .sdivider { position: relative; max-width: var(--container); height: 1px; margin-inline: auto; overflow: hidden; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); } .sdivider span { position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: q-sweep 4s ease-in-out infinite; } /* 12.7 Korxona, ishonch nishonlari, namuna */ .ent__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; } @media (min-width: 900px) { .ent__grid { grid-template-columns: 1fr 1.05fr; } } .ent__media { position: relative; isolation: isolate; margin: 0; } .ent__media::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; z-index: -1; border: 2px dashed var(--blue-200); border-radius: var(--r-xl); } .ent__media img { width: 100%; aspect-ratio: 792 / 540; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } .ent__glow { position: absolute; right: -24px; bottom: -24px; z-index: -2; width: 60%; height: 60%; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--accent), var(--primary)); opacity: 0.3; filter: blur(34px); } .tbadges { list-style: none; margin: var(--sp-5) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .tbadge { position: relative; } .tbadge__btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); } .tbadge__btn:hover, .tbadge__btn[aria-expanded="true"] { border-color: var(--primary); background: var(--tint); } .tbadge__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--primary); } .tbadge__icon svg { width: 16px; height: 16px; } .tbadge__pop { position: absolute; z-index: 5; left: 0; top: calc(100% + 8px); width: min(300px, 78vw); padding: 12px 14px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--r-md); background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg); font-size: var(--fs-xs); line-height: 1.55; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 200ms, transform 280ms var(--ease-settle), visibility 0s linear 280ms; } .tbadge:nth-child(even) .tbadge__pop { left: auto; right: 0; } .tbadge__btn[aria-expanded="true"] + .tbadge__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .sample { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 18px; border: 1px dashed var(--orange-300); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--tint-orange), var(--tint)); } .sample .btn { grid-column: 1 / -1; justify-self: start; } @media (min-width: 600px) { .sample { grid-template-columns: auto 1fr auto; } .sample .btn { grid-column: auto; } } .sample__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--accent); color: var(--navy-900); animation: q-wiggle 5s ease-in-out infinite; } .sample__icon svg { width: 24px; height: 24px; } .sample p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } /* 12.8 Interaktiv mahsulot kartalari */ .iprod-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; } .iprod { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); transition: translate 350ms var(--ease-settle), box-shadow 350ms ease, border-color 300ms; } .iprod:hover, .iprod:focus-within { translate: 0 -4px; box-shadow: var(--shadow-lg); border-color: var(--blue-200); } .iprod__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 50% 62%, var(--tint), transparent 70%), var(--surface-2); } .iprod__media img { height: 78%; width: auto; filter: drop-shadow(0 18px 20px rgb(11 31 92 / 0.25)); transition: transform 600ms var(--ease-settle); } .iprod:hover .iprod__media img { transform: translateY(-10px) rotate(-3deg) scale(1.04); } .iprod__price { position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--navy-900); font-size: var(--fs-sm); font-weight: 800; box-shadow: var(--glow-orange); } .iprod__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); } .iprod__title { margin: 0; font-size: var(--fs-h3); } .iprod__title a { color: inherit; text-decoration: none; } .iprod__title a:hover { color: var(--primary); } .iprod__more { display: grid; grid-template-rows: 0fr; align-self: stretch; transition: grid-template-rows 450ms var(--ease-settle); } .iprod__more > div { overflow: hidden; } @media (hover: hover) { .iprod:hover .iprod__more, .iprod:focus-within .iprod__more { grid-template-rows: 1fr; } } @media (hover: none) { .iprod__more { grid-template-rows: 1fr; } } .iprod__more-title { display: block; padding-top: 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .iprod__specs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .iprod__specs li { display: flex; gap: 8px; font-size: var(--fs-sm); } .iprod__specs svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--green-600); } .iprod__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); } .iprod__actions .btn svg { width: 16px; height: 16px; } /* 12.9 Video qo'llanmalar */ .vgrid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .vcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: translate 350ms var(--ease-settle), box-shadow 350ms ease, border-color 300ms; } .vcard:hover { translate: 0 -4px; box-shadow: var(--glow-blue); border-color: var(--blue-200); } .vcard__poster { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--blue-600), var(--navy-900)); } .vcard--2 .vcard__poster { background: linear-gradient(135deg, var(--orange-500), var(--blue-700)); } .vcard--3 .vcard__poster { background: linear-gradient(135deg, var(--navy-900), var(--blue-500)); } .vcard__poster img { height: 58%; width: auto; opacity: 0.85; filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.3)); transition: transform 600ms var(--ease-settle); } .vcard:hover .vcard__poster img { transform: scale(1.08) rotate(-3deg); } .vcard__play { position: absolute; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.94); color: var(--blue-600); box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); transition: transform 400ms var(--ease-pop); } .vcard__play::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #fff; animation: q-pulse-ring 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; } .vcard__play svg { width: 22px; height: 22px; margin-left: 3px; } .vcard:hover .vcard__play { transform: scale(1.12); } .vcard__body { display: grid; gap: 4px; padding: 18px 20px 20px; } .vcard__body small { font-weight: 800; color: var(--orange-700); } .vcard__body b { font-size: var(--fs-md); } .vcard__body .muted { font-size: var(--fs-xs); } .vmodal { width: min(720px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); } .vmodal[open] { animation: q-cmdk 320ms var(--ease-settle) both; } .vmodal::backdrop { background: rgb(5 12 36 / 0.6); backdrop-filter: blur(4px); } .vmodal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); } .vmodal__screen { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 280px; aspect-ratio: 16 / 9; padding: var(--sp-5); background: var(--surface-2); text-align: center; } .vmodal__screen p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--text-muted); } .vmodal__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--primary); } .vmodal__icon svg { width: 28px; height: 28px; margin-left: 3px; } @media (max-width: 519.98px) { .vmodal__screen { aspect-ratio: auto; } } /* 12.10 Hamkorlar / sohalar marquee */ .marquee-sec .section__head { margin-bottom: var(--sp-6); } .marquee { display: flex; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee__track { flex: none; display: flex; gap: 16px; min-width: max-content; margin: 0; padding: 4px 0; list-style: none; animation: q-marquee 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .mtile { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 22px 0 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font-weight: 700; white-space: nowrap; transition: border-color 200ms, color 200ms; } .mtile:hover { border-color: var(--primary); color: var(--primary); } .mtile img { max-height: 44px; width: auto; } .mtile__initials { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 12px; background: linear-gradient(145deg, var(--tint), var(--tint-orange)); color: var(--primary); font-family: var(--font-display); font-weight: 800; } .mtile__initials svg { width: 20px; height: 20px; } /* 12.11 Yakuniy CTA va statistika paneli */ .fcta { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--sp-5); align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 32px; color: #fff; background: linear-gradient(125deg, var(--blue-600) 0%, var(--blue-800) 48%, var(--navy-900) 100%); box-shadow: 0 40px 80px -36px rgb(30 79 216 / 0.65); } @media (min-width: 900px) { .fcta { grid-template-columns: 1fr auto; } } .fcta h2 { margin-bottom: 10px; color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); } .fcta p { margin: 0; max-width: 56ch; color: var(--blue-100); } .fcta__blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); } .fcta__blob--a { width: 340px; height: 340px; top: -150px; right: -60px; background: var(--orange-500); opacity: 0.45; animation: q-float 10s ease-in-out infinite; } .fcta__blob--b { width: 300px; height: 300px; bottom: -170px; left: 8%; background: var(--blue-500); opacity: 0.6; animation: q-float 12s ease-in-out 1s infinite reverse; } .fcta__grain { position: absolute; inset: 0; z-index: -1; opacity: 0.14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } .fcta__sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .fcta__sparks i { position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-300); opacity: 0; } .fcta__sparks i:nth-child(1) { left: 12%; } .fcta__sparks i:nth-child(2) { left: 28%; } .fcta__sparks i:nth-child(3) { left: 46%; } .fcta__sparks i:nth-child(4) { left: 62%; } .fcta__sparks i:nth-child(5) { left: 78%; } .fcta__sparks i:nth-child(6) { left: 90%; } .fcta:hover .fcta__sparks i { animation: q-spark 1.6s ease-out infinite; } .fcta:hover .fcta__sparks i:nth-child(2) { animation-delay: 0.3s; } .fcta:hover .fcta__sparks i:nth-child(3) { animation-delay: 0.6s; } .fcta:hover .fcta__sparks i:nth-child(4) { animation-delay: 0.15s; } .fcta:hover .fcta__sparks i:nth-child(5) { animation-delay: 0.45s; } .fcta:hover .fcta__sparks i:nth-child(6) { animation-delay: 0.75s; } .fcta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .vstats-wrap { padding-bottom: clamp(var(--sp-6), 5vw, var(--sp-7)); } .vstats { display: grid; gap: 8px; padding: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--glass); backdrop-filter: blur(14px); box-shadow: var(--shadow-md); } .vstat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: var(--r-lg); background: none; font: inherit; color: var(--text); text-align: left; } .vstat b { display: block; font-size: var(--fs-md); font-weight: 800; } .vstat small { display: block; font-size: var(--fs-xs); color: var(--text-muted); } .vstat__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--primary); } .vstat__icon svg { width: 20px; height: 20px; } .vstat--ai { cursor: pointer; background: linear-gradient(135deg, rgb(34 197 94 / 0.12), transparent); transition: background-color 200ms; } .vstat--ai:hover { background-color: rgb(34 197 94 / 0.08); } .vstat--ai .vstat__icon { background: rgb(34 197 94 / 0.15); } /* 12.12 Dumaloq chat tugmasi — vaqti-vaqti bilan tebranadi, "jonli" nuqta bilan */ .chat-launcher { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60; isolation: isolate; width: 58px; height: 58px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(145deg, var(--blue-500), var(--blue-700)); box-shadow: 0 14px 30px -10px rgb(30 79 216 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.25); transition: opacity 200ms, transform 350ms var(--ease-pop), box-shadow 300ms; } .chat-launcher:hover { transform: scale(1.08); box-shadow: 0 18px 38px -10px rgb(30 79 216 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.25); } .chat-launcher:active { transform: scale(0.95); } .chat-launcher__icon { display: grid; transform-origin: 50% 85%; animation: q-wobble 6s ease-in-out 2.5s infinite; } .chat-launcher__icon svg { width: 26px; height: 26px; } .chat-launcher:hover .chat-launcher__icon { animation: q-wobble-now 700ms ease-in-out; } .chat-launcher__ring { position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--blue-500); animation: q-pulse-ring 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; } .chat-launcher__live { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2.5px var(--bg); } .chat-launcher__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: q-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; } .chat-launcher__badge { position: absolute; top: -4px; left: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--navy-900); font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; box-shadow: 0 0 0 2.5px var(--bg); } .chat-launcher__badge:not([hidden]) { animation: q-pop 500ms var(--ease-pop), q-shake 1.2s ease-in-out 1s infinite; } /* 12.13 "Yuqoriga" tugmasi — aylantirish halqasi bilan */ .to-top { position: fixed; right: calc(var(--sp-4) + 7px); bottom: 88px; z-index: 59; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; transform: translateY(16px) scale(0.8); transition: opacity 300ms ease, transform 450ms var(--ease-pop), background-color 200ms, color 200ms; } .to-top.is-on { opacity: 1; transform: none; } .to-top:hover { background: var(--primary); color: #fff; } .to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; } .to-top__ring circle { fill: none; stroke: var(--line); stroke-width: 3; } .to-top__ring .to-top__progress { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 120ms linear; } .to-top__icon { display: grid; } .to-top__icon svg { width: 20px; height: 20px; } .to-top:hover .to-top__icon { animation: q-hop 650ms var(--ease-pop); } .to-top.is-launch .to-top__icon { animation: q-launch 750ms var(--ease-settle); } html.chat-open .to-top { opacity: 0; pointer-events: none; } @media print { .to-top, .site-header__actions, .drawer, .cmdk { display: none !important; } } /* 12.14 Qorong'i mavzu: alohida tuzatishlar */ :root[data-theme="dark"] .site-footer { background: #030A1F; border-top: 1px solid var(--line); } :root[data-theme="dark"] .hslides { box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8), inset 0 0 0 1px rgb(255 255 255 / 0.08); } :root[data-theme="dark"] .fcta { box-shadow: 0 40px 80px -36px rgb(0 0 0 / 0.8); } :root[data-theme="dark"] .theme-toggle__knob { box-shadow: 0 2px 8px rgb(0 0 0 / 0.5); } /* 12.15 Hero sahnasi, menyu elementlari va kalit kadrlar */ @media (prefers-reduced-motion: no-preference) { .hero2__copy > * { animation: q-rise 700ms var(--ease-settle) both; } .hero2__copy > :nth-child(2) { animation-delay: 60ms; } .hero2__copy > :nth-child(3) { animation-delay: 120ms; } .hero2__copy > :nth-child(4) { animation-delay: 180ms; } .hero2__copy > :nth-child(5) { animation-delay: 240ms; } .hero2__copy > :nth-child(6) { animation-delay: 300ms; } .hero2__copy > :nth-child(7) { animation-delay: 360ms; } .hslides { animation: q-scale-in 900ms var(--ease-settle) 160ms both; } .holo { animation: q-fade 1.2s ease 500ms both; } .hchip { animation: q-pop 700ms var(--ease-pop) both, q-float 7s ease-in-out infinite; } .hchip--1 { animation-delay: 700ms, 1.4s; } .hchip--2 { animation-delay: 850ms, 2.2s; } .hchip--3 { animation-delay: 1000ms, 3s; } .hchip--4 { animation-delay: 1150ms, 1.8s; } /* Fon aylantirilganda sekinroq suriladi (parallaks; scroll-timeline bor brauzerlarda) */ @supports (animation-timeline: scroll()) { .hero2__bg { animation: q-parallax linear both; animation-timeline: scroll(root); animation-range: 0 900px; } } .is-open > .mpanel .mleaf, .is-open > .mpanel .mprod, .is-open > .mpanel .mpromo { animation: q-leaf 420ms var(--ease-settle) both; } .is-open > .mpanel > :nth-child(2), .is-open > .mpanel .mprod:nth-child(2) { animation-delay: 40ms; } .is-open > .mpanel > :nth-child(3) { animation-delay: 80ms; } .is-open > .mpanel > :nth-child(4), .is-open > .mpanel .mpromo { animation-delay: 120ms; } .is-open > .mpanel > :nth-child(5) { animation-delay: 160ms; } .is-open > .mpanel > :nth-child(6) { animation-delay: 200ms; } } @keyframes q-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } } @keyframes q-fade { from { opacity: 0; } } @keyframes q-cmdk { from { opacity: 0; transform: translateY(-10px) scale(0.98); } } @keyframes q-leaf { from { opacity: 0; transform: translateY(-8px); } } @keyframes q-scale-in { from { opacity: 0; transform: scale(0.94); } } @keyframes q-pop { from { opacity: 0; transform: scale(0.6); } } @keyframes q-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } @keyframes q-drift { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.3; } 50% { transform: translate3d(6px, -18px, 0); opacity: 0.85; } } @keyframes q-holo { 0%, 100% { transform: scale(0.95); opacity: 0.35; } 50% { transform: scale(1.06); opacity: 0.8; } } @keyframes q-caret { 50% { opacity: 0; } } @keyframes q-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes q-sweep { from { transform: translateX(-110%); } to { transform: translateX(400%); } } @keyframes q-marquee { to { transform: translateX(calc(-100% - 16px)); } } @keyframes q-spark { 0% { opacity: 0; transform: translateY(10px) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1); } } @keyframes q-parallax { to { transform: translateY(180px); } } @keyframes q-pulse-ring { 0% { transform: scale(0.9); opacity: 0.55; } 70%, 100% { transform: scale(1.6); opacity: 0; } } @keyframes q-wobble { 0%, 84%, 100% { transform: rotate(0); } 86% { transform: rotate(-18deg) scale(1.12); } 88% { transform: rotate(15deg) scale(1.12); } 90% { transform: rotate(-11deg) scale(1.08); } 92% { transform: rotate(8deg) scale(1.04); } 94% { transform: rotate(-4deg); } 96% { transform: rotate(2deg); } } @keyframes q-wobble-now { 20% { transform: rotate(-16deg) scale(1.1); } 40% { transform: rotate(13deg) scale(1.1); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } } @keyframes q-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } } @keyframes q-shake { 0%, 70%, 100% { transform: translateX(0); } 75% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 85% { transform: translateX(-2px); } 90% { transform: translateX(1px); } } @keyframes q-hop { 40% { transform: translateY(-5px); } } @keyframes q-launch { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-26px); opacity: 0; } 46% { transform: translateY(18px); opacity: 0; } 100% { transform: none; opacity: 1; } } /* 13. packs2 ichki sahifalari: kompaniya, jamoa, hamkorlar, kalkulyator, AI maslahatchi, kontaktlar, vakansiyalar, galereya lightbox ------------------------------------------------------------------ */ /* 13.1 Ichki sahifa sarlavhasi (PageHero) */ .phero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(var(--sp-6), 5vw, 72px) clamp(var(--sp-6), 5vw, 64px); background: var(--surface); border-bottom: 1px solid var(--line); } .phero h1 { max-width: 22ch; margin-bottom: var(--sp-3); } .phero .eyebrow { display: flex; } .phero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .phero__bg span { position: absolute; border-radius: 50%; filter: blur(60px); } .phero__bg span:first-child { width: 420px; height: 420px; top: -200px; right: -100px; background: radial-gradient(circle, var(--blue-500), transparent 70%); opacity: 0.35; } .phero__bg span:last-child { width: 300px; height: 300px; bottom: -180px; left: 30%; background: radial-gradient(circle, var(--orange-500), transparent 70%); opacity: 0.2; } .phero__float { position: absolute; z-index: -1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); color: var(--primary); box-shadow: var(--shadow-md); animation: q-float 6s ease-in-out infinite; } .phero__float svg { width: 20px; height: 20px; } .phero__float--1 { top: 18%; right: 22%; } .phero__float--2 { top: 52%; right: 8%; animation-delay: 0.6s; } .phero__float--3 { bottom: 14%; right: 30%; animation-delay: 1.1s; } .phero__float--4 { top: 14%; right: 4%; animation-delay: 0.3s; } @media (max-width: 899.98px) { .phero__float { display: none; } } .empty-state--box { padding: var(--sp-6); border: 1px dashed var(--blue-200); border-radius: var(--r-lg); background: var(--surface-2); } .svc--static:hover { translate: none; } /* 13.2 Kompaniya haqida */ .section--navy { background: var(--navy-900); color: var(--blue-100); } :root[data-theme="dark"] .section--navy { background: #030A1F; border-block: 1px solid var(--line); } .section--navy h2 { color: #fff; } .story { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); align-items: start; } @media (min-width: 960px) { .story { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); } } .story__body { max-width: 68ch; } .story__body .story__text { font-size: var(--fs-md); line-height: 1.75; margin-bottom: var(--sp-4); } .story__side { display: grid; gap: var(--sp-5); align-content: start; } @media (min-width: 960px) { .story__side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } .story__stats { margin-top: var(--sp-5); } .story__text { color: var(--blue-100); } .story__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .stat--box { padding: var(--sp-5); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--r-lg); text-align: center; } .section--navy .stat__value { color: var(--orange-300); } .section--navy .stat__label { color: var(--blue-100); } .story__media { margin: 0; } .story__media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } .ptimeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); } @media (min-width: 900px) { .ptimeline { grid-template-columns: repeat(5, 1fr); } } .ptimeline__step { position: relative; display: grid; gap: 6px; } @media (min-width: 900px) { .ptimeline__step { justify-items: center; text-align: center; } .ptimeline__step:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: calc(50% + 28px); width: calc(100% - 56px + var(--sp-5)); height: 2px; background: linear-gradient(90deg, var(--primary), var(--line)); } } .ptimeline__num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--blue-500), var(--blue-700)); color: #fff; font-family: var(--font-display); font-weight: 800; box-shadow: var(--glow-blue); } .ptimeline__step p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .quotes { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .quote { position: relative; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); } .quote__mark { position: absolute; top: -6px; left: 18px; font-family: Georgia, serif; font-size: 72px; line-height: 1; color: var(--accent); } .quote blockquote { margin: 0; font-style: italic; color: var(--text); } .quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; } .quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .quote figcaption b { display: block; } .quote figcaption small { display: block; color: var(--text-muted); font-size: var(--fs-xs); } .certs { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .cert { display: grid; gap: 6px; color: var(--text); text-decoration: none; } .cert__img { display: block; aspect-ratio: 200 / 260; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: translate 350ms var(--ease-settle), box-shadow 350ms; } .cert__img img { width: 100%; height: 100%; object-fit: cover; } .cert:hover .cert__img { translate: 0 -4px; box-shadow: var(--shadow-lg); } /* 13.3 Jamoa va hamkorlar */ .team-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .person-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); text-align: center; transition: translate 350ms var(--ease-settle), box-shadow 350ms; } .person-card:hover { translate: 0 -4px; box-shadow: var(--shadow-lg); } .person-card__photo, .person-card__avatar { width: 112px; height: 112px; border-radius: 50%; margin-bottom: var(--sp-2); } .person-card__photo { object-fit: cover; } .person-card__avatar { display: grid; place-items: center; background: linear-gradient(145deg, var(--blue-500), var(--orange-500)); color: #fff; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; } .person-card__name { margin: 0; font-size: var(--fs-lg); } .person-card__role { margin: 0; color: var(--orange-700); font-weight: 700; font-size: var(--fs-sm); } .person-card__bio { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } .person-card__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--sp-2); } .pgrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .pcard { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 200ms, translate 300ms var(--ease-settle); } a.pcard:hover { border-color: var(--primary); translate: 0 -2px; color: var(--text); } .pcard__logo { grid-row: span 2; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, var(--tint), var(--tint-orange)); color: var(--primary); font-family: var(--font-display); font-weight: 800; } .pcard__logo img { max-width: 44px; max-height: 44px; } /* 13.4 Kalkulyator sahifasi va yordam taklifi */ .csteps { list-style: none; margin: var(--sp-4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .csteps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 700; } .csteps__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--primary); } .csteps__icon svg { width: 15px; height: 15px; } .nudge { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 70; width: min(320px, calc(100vw - 32px)); display: grid; gap: 8px; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(20px); transition: opacity 300ms, transform 450ms var(--ease-pop); } .nudge.is-on { opacity: 1; transform: none; } .nudge p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .nudge .btn { justify-self: start; } .nudge__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--primary); animation: q-wiggle 4s ease-in-out infinite; } .nudge__icon svg { width: 20px; height: 20px; } .nudge__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; } .nudge__close:hover { background: var(--surface-2); } .nudge__close svg { width: 16px; height: 16px; } /* 13.5 AI maslahatchi */ .aihero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(var(--sp-6), 5vw, 72px); text-align: center; } .aihero__inner { display: flex; flex-direction: column; align-items: center; } .aihero .eyebrow::before { display: none; } .aihero .lead { margin-inline: auto; } .aihero__note { margin-top: var(--sp-4); font-size: var(--fs-xs); } .mascot { position: relative; width: 128px; height: 128px; display: grid; place-items: center; margin-bottom: var(--sp-5); } .mascot__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(61 104 230 / 0.45); animation: q-holo 4s ease-in-out infinite; } .mascot__ring--2 { inset: 10px; border-color: rgb(255 122 26 / 0.45); animation-delay: 0.8s; } .mascot__core { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--blue-500), var(--blue-800)); color: #fff; box-shadow: var(--glow-blue); animation: q-float 5s ease-in-out infinite; } .mascot__core svg { width: 36px; height: 36px; } .prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: var(--sp-3) 0 var(--sp-5); } .prompt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--blue-200); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color 200ms, background-color 200ms, translate 300ms var(--ease-pop); } .prompt svg { width: 16px; height: 16px; color: var(--accent); } .prompt:hover { border-color: var(--primary); background: var(--tint); translate: 0 -2px; } @media (prefers-reduced-motion: no-preference) { .prompt { animation: q-pop 450ms var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); } } /* 13.6 Kontaktlar */ .depts { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .dept { display: flex; align-items: center; gap: 14px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 200ms, translate 300ms var(--ease-pop), box-shadow 300ms; } .dept:hover { border-color: var(--primary); translate: 0 -2px; box-shadow: var(--shadow-md); color: var(--text); } .dept b { display: block; } .dept small { display: block; color: var(--primary); font-weight: 700; } .dept__icon { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 14px; background: var(--tint); color: var(--primary); } .dept--finance .dept__icon { background: var(--green-50); color: var(--green-600); } .dept--factory .dept__icon { background: var(--tint-orange); color: var(--orange-700); } .dept__icon svg { width: 22px; height: 22px; } .contact-grid { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 960px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } } .contact-grid > * { min-width: 0; } .cform .field { margin-top: var(--sp-4); } .cform__grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .cform .btn { margin-top: var(--sp-3); } .form-ok { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; outline: none; animation: q-scale-in 400ms var(--ease-settle); } .contact-side { display: grid; gap: var(--sp-5); } .loc__row { display: flex; gap: 10px; margin: 0 0 var(--sp-3); } .loc__row svg { width: 20px; height: 20px; flex: none; color: var(--primary); margin-top: 2px; } .loc__map { margin-bottom: var(--sp-4); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); aspect-ratio: 4 / 3; } .loc__map iframe { width: 100%; height: 100%; border: 0; } .socials { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .social { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font-weight: 700; text-decoration: none; transition: border-color 200ms, box-shadow 300ms, translate 300ms var(--ease-pop); } .social svg { width: 20px; height: 20px; color: var(--primary); } .social:hover { translate: 0 -2px; color: var(--text); } .social--telegram:hover { border-color: #38A1E8; box-shadow: 0 0 28px -6px rgb(56 161 232 / 0.55); } .social--instagram:hover { border-color: #DB2777; box-shadow: 0 0 28px -6px rgb(219 39 119 / 0.5); } .social--facebook:hover, .social--linkedin:hover { border-color: var(--primary); box-shadow: var(--glow-blue); } .social--youtube:hover { border-color: #EF4444; box-shadow: 0 0 28px -6px rgb(239 68 68 / 0.5); } /* 13.7 Vakansiyalar */ .open-apply { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; margin-top: var(--sp-5); padding: var(--sp-5); border: 1px dashed var(--orange-300); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--tint-orange), var(--tint)); } .open-apply p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } .open-apply .btn { grid-column: 1 / -1; justify-self: start; } @media (min-width: 600px) { .open-apply { grid-template-columns: auto 1fr auto; } .open-apply .btn { grid-column: auto; } } .apply-modal { width: min(480px, calc(100vw - 32px)); } .apply-modal__body { padding: var(--sp-5); } .apply-modal__body .field + .field { margin-top: var(--sp-4); } .apply-modal__body .btn { margin-top: var(--sp-4); } .apply-modal__pos { margin: 0 0 var(--sp-3); font-weight: 800; color: var(--primary); } /* 13.8 Lightbox va galereya tablari */ .gtabs { margin-bottom: var(--sp-5); } .gtabs small { opacity: 0.7; margin-left: 4px; } .gallery__item a { display: block; overflow: hidden; border-radius: var(--r-md); cursor: zoom-in; } .gallery__item a img { transition: transform 500ms var(--ease-settle); } .gallery__item a:hover img { transform: scale(1.04); } .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(3 8 25 / 0.94); color: #fff; overflow: hidden; } .lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; animation: q-fade 200ms ease; } .lightbox::backdrop { background: transparent; } .lightbox__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; } .lightbox__count { margin-right: auto; font-size: var(--fs-sm); opacity: 0.8; } .lightbox__btn, .lightbox__nav { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 50%; background: rgb(255 255 255 / 0.08); color: #fff; font-size: 22px; cursor: pointer; transition: background-color 200ms; } .lightbox__btn:hover, .lightbox__nav:hover { background: rgb(255 255 255 / 0.2); } .lightbox__btn svg, .lightbox__nav svg { width: 20px; height: 20px; } .lightbox__nav { margin: 0 12px; z-index: 2; } .lightbox.is-single .lightbox__nav { visibility: hidden; } .lightbox__stage { margin: 0; height: 100dvh; display: grid; place-items: center; align-content: center; gap: 12px; padding: 64px 0 24px; overflow: hidden; } .lightbox__stage img { max-width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 8px; opacity: 0; transition: opacity 300ms, transform 250ms var(--ease-settle); cursor: zoom-in; } .lightbox__stage img.is-in { opacity: 1; } .lightbox.is-zoomed .lightbox__stage img { cursor: zoom-out; } .lightbox__stage figcaption { font-size: var(--fs-sm); opacity: 0.85; text-align: center; padding: 0 16px; } @media (max-width: 599.98px) { .lightbox__nav { position: absolute; bottom: 16px; } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } .lightbox[open] { grid-template-columns: 1fr; } } /* 13.9 Menyu: Kompaniya — ikki ustun; footer ish vaqti */ .mpanel--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: min(640px, calc(100vw - 32px)); } .mnav__item:has(> .mpanel--cols) { position: static; } .footer-hours { color: var(--slate-400); } /* 14. Admin boshqaradigan qismlar: video, sahifalar --------------------------------- */ .vmodal__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } .vcard--photo .vcard__poster { background: #0B1F5C; } .vcard__poster .vcard__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; filter: none; } .rich h2 { margin-top: var(--sp-6); font-size: var(--fs-h3); } .rich h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); } .rich ul, .rich ol { padding-left: 1.3em; margin: 0 0 var(--sp-4); display: grid; gap: 6px; } .rich blockquote { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .rich figure { margin: var(--sp-5) 0; } .rich figure img { border-radius: var(--r-md); width: 100%; } .rich figcaption { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); } .group-figure { margin: var(--sp-5) 0 0; } .group-figure a { display: block; max-width: 880px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); cursor: zoom-in; } .group-figure img { width: 100%; height: auto; transition: transform 500ms var(--ease-settle); } .group-figure a:hover img { transform: scale(1.02); } .calc__figure { margin: var(--sp-4) 0 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); } .calc__figure img { width: 100%; height: auto; } .gcats { margin: 0 0 var(--sp-5); } .gcats .chip[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; } .gcats .chip small { opacity: .7; margin-left: 4px; } /* «MASTERKRAFT» MChJ — rekvizitlar kartochkasi */ .company-card { display: grid; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .company-card__head { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--line); } .company-card__logo { flex: none; display: grid; place-items: center; width: 84px; height: 72px; padding: 6px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); } .company-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .company-card__head small { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-700); } .company-card__head b { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; } .company-card__list { margin: 0; display: grid; gap: 10px; } .company-card__list div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; font-size: var(--fs-sm); } .company-card__list dt { color: var(--text-muted); } .company-card__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .company-card__note { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-muted); } .footer-maker { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-4); padding: 10px 12px; border-radius: var(--r-md); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); text-decoration: none; } .footer-maker:hover { background: rgb(255 255 255 / 0.1); } .footer-maker__logo { flex: none; display: grid; place-items: center; width: 56px; height: 46px; padding: 4px; border-radius: 8px; background: #fff; } .footer-maker__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .footer-maker small { display: block; font-size: 11px; color: var(--slate-400); } .footer-maker b { display: block; color: #fff; font-size: var(--fs-sm); } .feature__icon--wa { background: #E7F8EE; color: #1DA851; } :root[data-theme="dark"] .feature__icon--wa { background: rgb(37 211 102 / 0.15); color: #4ADE80; } .social--whatsapp:hover { border-color: #25D366; box-shadow: 0 0 28px -6px rgb(37 211 102 / 0.5); } .social--whatsapp svg { color: #1DA851; } .social--facebook svg { color: #1877F2; } .contact-cards .contact-card b { font-size: var(--fs-md); } .maker-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--sp-2); padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color 200ms, translate 300ms var(--ease-pop); } .maker-badge:hover { border-color: var(--primary); translate: 0 -2px; color: var(--text); } .maker-badge__logo { flex: none; display: grid; place-items: center; width: 60px; height: 50px; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid var(--line); } .maker-badge__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .maker-badge small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-700); } .maker-badge b { display: block; font-size: var(--fs-sm); } .maker-badge em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); } /* ===================================================================== 25. Bosh sahifa: yirtiladigan qog'oz (Masterkraft) → soha tanlovi → qatlamlar tear.js: zarrachalar (21st particles-bg sozlamalari), yirtilish (Tiger Tear Reveal geometriyasi), qatlamlar va yirtiq chetlar. JS bo'lmasa — oddiy hero (qog'oz ko'rinmaydi). ===================================================================== */ :root { --paper: #f4f2ec; --paper-core: #ffffff; --paper-fibre: #d3cbbb; --tear-g1: #f3f6fe; --tear-g2: #d9e4fc; --tear-g3: #b7cbf8; --tear-top: var(--header-h); } :root[data-theme="dark"] { --paper: #e9e5db; --paper-core: #f7f4ec; --paper-fibre: #c9bfab; --tear-g1: #08122f; --tear-g2: #0d1f57; --tear-g3: #1a3a9a; } @media (max-width: 719px) { :root { --tear-top: 0px; } } .particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .tear { position: relative; z-index: 2; background: var(--paper); } .tear__stage { position: relative; --open: 1; --rise: 1; --pop: 1; } .tear__svg, .scrollcue { display: none; } .tear__reveal { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(to top right, var(--tear-g1), var(--tear-g2), var(--tear-g3)); } .tear__reveal .particles { z-index: -1; -webkit-mask-image: radial-gradient(ellipse 34% 42% at 22% 52%, rgb(0 0 0 / 0.16), #000 100%); mask-image: radial-gradient(ellipse 34% 42% at 22% 52%, rgb(0 0 0 / 0.16), #000 100%); } .tear__grid { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; padding-block: clamp(28px, 5vh, 64px); } @media (min-width: 960px) { .tear__grid { grid-template-columns: 1fr 1fr; } } .tear__copy { min-width: 0; opacity: var(--pop); transform: translateY(calc((1 - var(--pop)) * 30px)); } .tear__title { margin: var(--sp-3) 0 var(--sp-4); font-size: clamp(1.75rem, 1rem + 2.6vw, 3.4rem); line-height: 1.06; } .tear__lead { max-width: 52ch; } .tear__actions { margin-top: var(--sp-5); } .tear__actions .btn svg { width: 20px; height: 20px; } /* JS tayyor: sahna qadaladi, qog'oz ko'rinadi */ .tear.is-ready .tear__stage { position: sticky; top: var(--tear-top); height: calc(100svh - var(--tear-top)); overflow: hidden; --open: 0; --rise: 0; --pop: 0; } .tear.is-ready .tear__reveal { position: absolute; inset: 0; display: flex; align-items: center; visibility: hidden; } .tear.is-ready .tear__reveal > .container { width: 100%; } @media (min-width: 960px) { .tear.is-ready .tear__grid { padding-block: clamp(56px, 11vh, 110px) clamp(24px, 4vh, 48px); } } .tear.is-ready .tear__stage.is-torn .tear__reveal { visibility: visible; } .tear.is-ready .tear__stage:not(.is-open) .tear__reveal { pointer-events: none; } .tear.is-ready .tear__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; animation: tear-intro 1.1s var(--ease-settle) both; } .tear.is-ready .scrollcue { display: flex; } @keyframes tear-intro { from { opacity: 0; transform: translateY(18px) scale(0.985); } } /* Pastda o'rtada: aylantirish belgisi (sichqoncha + g'ildirak + strelkalar) */ .scrollcue { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 10px; pointer-events: none; color: var(--navy-900); animation: cue-in 0.8s 0.9s var(--ease-settle) both; } .scrollcue__mouse { width: 28px; height: 44px; border-radius: 16px; border: 2px solid currentColor; position: relative; opacity: 0.85; } .scrollcue__mouse::before { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--orange-500); animation: cue-wheel 1.7s cubic-bezier(.6, 0, .4, 1) infinite; } .scrollcue span { font: 700 10px var(--font-body); letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; margin-right: -0.34em; } .scrollcue__chev { display: grid; margin-top: -4px; } .scrollcue__chev i { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; margin: -3px auto 0; opacity: 0; animation: cue-chev 1.7s ease-in-out infinite; } .scrollcue__chev i:nth-child(2) { animation-delay: 0.2s; } @keyframes cue-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } } @keyframes cue-chev { 0%, 100% { opacity: 0; transform: translateY(-4px) rotate(45deg); } 50% { opacity: 0.8; transform: translateY(2px) rotate(45deg); } } @keyframes cue-in { from { opacity: 0; transform: translate(-50%, 10px); } } /* Soha tanlovi */ .ind { min-width: 0; display: grid; gap: 12px; justify-items: center; opacity: var(--pop); } .ind__title { margin: 0; font: 700 var(--fs-xs) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .ind__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .ind__chip { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); color: var(--text); padding: 7px 14px; border-radius: var(--r-pill); font: 600 var(--fs-sm) var(--font-body); cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .ind__chip i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange-500); } .ind__chip[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .ind__chip[aria-selected="true"] i { animation: ind-fill var(--ind-dur, 5s) linear forwards; } .ind.is-paused .ind__chip i { animation-play-state: paused; } .ind.is-stopped .ind__chip i { animation: none; width: 0; } @keyframes ind-fill { to { width: 100%; } } :root[data-theme="dark"] .ind__chip[aria-selected="true"] { background: var(--orange-500); border-color: var(--orange-500); color: #1b1006; } .ind__stage { position: relative; width: min(460px, 100%, 52svh); aspect-ratio: 1; transform: translateY(calc((1 - var(--rise)) * 26%)) scale(calc(1.12 - var(--rise) * 0.12)); } .ind__stage::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.5) 70%, transparent); } .ind__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transform: scale(1.06); transition: opacity 0.9s var(--ease-settle), transform 5s linear; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); } .ind__img.is-on { opacity: 1; transform: none; } .ind__card { position: absolute; left: 4%; right: 4%; bottom: 2%; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-decoration: none; color: var(--navy-900); background: rgb(255 255 255 / 0.8); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 14px 34px -16px rgb(11 31 92 / 0.5), inset 0 0 0 1px rgb(255 255 255 / 0.6); transition: transform 0.3s var(--ease-settle); } .ind__card:hover { transform: translateY(-3px); } :root[data-theme="dark"] .ind__card { background: rgb(11 22 60 / 0.8); color: #fff; box-shadow: 0 14px 34px -16px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.1); } .ind__card-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-600); color: #fff; } .ind__card-ic svg { width: 20px; height: 20px; } .ind__card-body { min-width: 0; flex: 1; } .ind__card small { display: block; color: var(--slate-600); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } :root[data-theme="dark"] .ind__card small { color: var(--slate-300); } .ind__card-body b { display: block; font-size: var(--fs-sm); line-height: 1.3; } .ind__card-price { flex: none; text-align: right; } .ind__card-price b { display: block; font: 800 1.25rem var(--font-display); color: var(--orange-600); } .ind__card-price small { display: inline-flex; align-items: center; gap: 4px; color: var(--blue-600); text-transform: none; letter-spacing: 0; font-size: 12px; } :root[data-theme="dark"] .ind__card-price small { color: var(--blue-300); } .ind__card-price svg { width: 14px; height: 14px; } .ind__swap { animation: ind-swap 0.5s var(--ease-settle); } @keyframes ind-swap { from { opacity: 0; transform: translateY(6px); } } @media (max-width: 959px) { .tear__grid { text-align: center; justify-items: center; } .tear__copy .eyebrow { justify-content: center; } .tear__actions { justify-content: center; } .ind { order: -1; } } @media (max-width: 719px) { .tear.is-ready .tear__grid { padding-block: 64px 12px; gap: 10px; } .tear.is-ready .tear__lead { display: none; } .tear.is-ready .tear__actions { margin-top: var(--sp-3); } .tear.is-ready .tear__title { font-size: 1.5rem; margin-bottom: 0; } .ind__stage { width: min(300px, 74vw, 40svh); } .ind__chips { gap: 4px; } .ind__chip { padding: 5px 10px; font-size: 12px; } .ind__card { padding: 8px 10px; gap: 8px; } .ind__card-ic { display: none; } .ind__card-body b { font-size: 12px; } .ind__card-price b { font-size: 1rem; } } /* Qog'oz fonli bo'lim va yirtiq chetlar (qog'oz qorong'i rejimda ham qog'oz) */ .paper { position: relative; z-index: 2; background-color: var(--paper); background-size: 220px 220px; color: var(--navy-900); } .paper .eyebrow { color: var(--blue-600); } .torn { position: absolute; left: 0; width: 100%; height: 46px; display: block; pointer-events: none; z-index: 4; } .torn--top { top: 0; transform: translateY(-96%); filter: drop-shadow(0 -8px 10px rgb(11 31 92 / 0.16)); } .torn--bottom { bottom: 0; transform: translateY(96%); filter: drop-shadow(0 8px 10px rgb(11 31 92 / 0.2)); } .torn .t-paper { fill: var(--paper); } .torn .t-core { fill: var(--paper-core); } /* Qatlamlar */ .plies-sec { height: 220vh; } .plies-sec__pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; align-items: center; --sep: 0; } .plies-sec__pin > .container { width: 100%; } .plies-sec__grid { display: grid; gap: 18px 32px; align-items: center; } @media (min-width: 900px) { .plies-sec__grid { grid-template-columns: 1.05fr 0.95fr; } .plies-sec__head { grid-column: 1 / -1; } } .plies-sec__head { text-align: center; } .plies-sec__head h2 { margin: 8px 0 12px; color: var(--navy-900); } .plies-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #dce3f5, 0 6px 16px -10px rgb(11 31 92 / 0.3); } .plies-switch button { border: 0; background: none; color: #4a5a85; padding: 6px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; } .plies-switch button[aria-pressed="true"] { background: var(--navy-900); color: #fff; } .plystack { position: relative; height: 330px; perspective: 1100px; } .plystack__in { position: absolute; left: 50%; top: 52%; width: 320px; height: 200px; margin: -100px 0 0 -160px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-34deg); } .ply-sheet { position: absolute; inset: 0; border-radius: 6px; transition: opacity 0.5s, box-shadow 0.4s; transform: translateZ(calc(var(--z) * (6px + var(--sep) * 40px) + var(--lift, 0px))); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 22px 30px -16px rgb(11 31 92 / 0.45); } .ply-sheet.is-hidden { opacity: 0; } .ply-sheet.is-active { --lift: 26px; box-shadow: 0 0 0 2px var(--orange-500), 0 30px 40px -16px rgb(11 31 92 / 0.55); } .ply-sheet--white { background: #fff url("/assets/content/brand/masterkraft.webp") center 40% / 30% auto no-repeat; } .ply-sheet--white::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--orange-500); border-radius: 0 0 6px 6px; } .ply-sheet--kraft, .ply-sheet--inner { background: repeating-linear-gradient(115deg, rgb(90 50 10 / 0.07) 0 2px, transparent 2px 7px), linear-gradient(135deg, #c9995f, #b5814a); } .ply-sheet--pe { background: linear-gradient(120deg, rgb(160 195 255 / 0.35), rgb(255 255 255 / 0.7) 45%, rgb(150 190 255 / 0.3)); box-shadow: 0 0 0 1px rgb(30 79 216 / 0.25), 0 22px 30px -16px rgb(11 31 92 / 0.25); } .plies-sec__side { display: grid; gap: 14px; justify-items: start; } .plies-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; } .plies-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px #dce3f5; opacity: 0.45; transform: translateX(10px); transition: opacity 0.4s, transform 0.5s var(--ease-settle), box-shadow 0.4s, background-color 0.4s; } .plies-list li.is-seen { opacity: 1; transform: none; } .plies-list li.is-active { background: #fff; box-shadow: inset 0 0 0 2px var(--orange-500), 0 14px 28px -16px rgb(11 31 92 / 0.4); } .plies-list li.is-hidden { display: none; } .plies-list i { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 800 13px var(--font-display); font-style: normal; background: var(--sw); color: #1b1006; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); } .plies-list b { display: block; font-size: 15px; color: var(--navy-900); } .plies-list small { color: #4a5a85; font-size: 13px; } .plies-sec .btn--outline { background: #fff; color: var(--navy-900); border-color: #dce3f5; } @media (max-width: 899px) { .plies-sec__head h2 { font-size: 1.35rem; } .plies-sec__head .eyebrow { display: none; } .plystack { height: 190px; margin-top: 40px; } .plystack__in { width: 180px; height: 114px; margin: -57px 0 0 -90px; top: 62%; } .plies-list { gap: 6px; } .plies-list li { padding: 7px 10px; } .plies-list small { display: none; } .plies-sec__side { justify-items: center; } } /* JS yo'q: qatlamlar oddiy blok */ .plies-sec:not(.is-ready) { height: auto; padding-block: var(--sp-8); } .plies-sec:not(.is-ready) .plies-sec__pin { position: static; height: auto; --sep: 0.6; } .plies-sec:not(.is-ready) .plies-list li { opacity: 1; transform: none; } /* Yakuniy CTA: zarrachalar */ .fcta .particles { z-index: 0; opacity: 0.7; } .fcta__body, .fcta__actions { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .scrollcue__mouse::before, .scrollcue__chev i, .ind__chip i { animation: none; } .scrollcue__chev i { opacity: 0.6; } } .plies-sec + section { padding-top: 76px; } @media (max-width: 719px) { .tear.is-ready .tear__copy .eyebrow { display: none; } .ind__card-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* 26. Mahsulot (qop) fotosuratlari: menyu, bosh sahifa kartochkalari, mahsulot sahifasi — product_image() */ .mprod__img--photo { overflow: hidden; background: #f5f5f5; box-shadow: inset 0 0 0 1px var(--line); } .mprod__img--photo img { width: 100%; height: 100%; object-fit: cover; } .mprod:hover .mprod__img--photo img { transform: scale(1.08); } .iprod__media--photo img.iprod__photo { position: absolute; top: 6%; left: 50%; height: 88%; width: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; translate: -50% 0; border-radius: 18px; filter: none; box-shadow: 0 22px 40px -18px rgb(11 31 92 / 0.45), 0 0 0 1px rgb(11 31 92 / 0.06); } .iprod:hover .iprod__media--photo img.iprod__photo { transform: translateY(-8px) scale(1.03) rotate(-1.5deg); } .page-hero__img--photo { width: 210px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; transform: rotate(-3deg); box-shadow: 0 30px 50px -24px rgb(11 31 92 / 0.55), 0 0 0 1px rgb(11 31 92 / 0.06); } /* 27. Bosh sahifa ochilishi: loading (qop to'ladi → qog'oz yirtiladi) va yashirin menyu qatori — partials/home-intro.php */ .ldr { display: none; } html.has-loader { overflow: hidden; } html.has-loader .ldr { display: block; position: fixed; inset: 0; z-index: 1000; cursor: progress; --p: 0; } .ldr__half { position: absolute; inset: 0; transition: transform 0.95s cubic-bezier(.7, 0, .2, 1), opacity 0.4s 0.6s; } .ldr__half--top { filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.45)); } .ldr__half--bottom { filter: drop-shadow(0 -14px 22px rgb(0 0 0 / 0.45)); } .ldr__core, .ldr__sheet { position: absolute; inset: 0; } .ldr__core { background: #f7f4ec; opacity: 0; transition: opacity 0.12s; } .ldr.is-done .ldr__core { opacity: 1; } .ldr__sheet { background: radial-gradient(70% 60% at 50% 45%, #173fb0 0%, #0B1F5C 55%, #050d26 100%); } .ldr__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; } .ldr__logo { position: relative; width: min(260px, 56vw); aspect-ratio: 1024 / 783; } .ldr__logo i { position: absolute; inset: 0; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; } .ldr__logo-dim { background: rgb(255 255 255 / 0.14); } .ldr__logo-fill { background: linear-gradient(180deg, #fff6dc 0%, #f3c46b 35%, #c98a2b 75%, #8a5a17 100%); clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); } .ldr__logo::after { content: ""; position: absolute; left: -10%; right: -10%; top: calc((1 - var(--p)) * 100%); height: 2px; background: linear-gradient(90deg, transparent, #ffd78a, transparent); box-shadow: 0 0 16px 4px rgb(255 190 90 / 0.55); opacity: calc(1 - var(--p) * var(--p)); } .ldr__name { font: 800 clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem) var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; } .ldr__bar { width: min(220px, 50vw); height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.14); overflow: hidden; } .ldr__bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--orange-500); box-shadow: 0 0 12px var(--orange-500); } .ldr__pct { font: 600 12px var(--font-body); letter-spacing: 0.2em; color: rgb(255 255 255 / 0.55); } .ldr.is-done { pointer-events: none; } .ldr.is-done .ldr__half--top { transform: translateY(-62%) rotate(-3deg); opacity: 0; } .ldr.is-done .ldr__half--bottom { transform: translateY(62%) rotate(2.4deg); opacity: 0; } /* Yashirin menyu qatori: ochilishda faqat qog'oz va logotip, aylantirganda menyu tushib keladi */ html.is-home .site-header { position: fixed; left: 0; right: 0; top: 0; } html.is-home { --tear-top: 0px; } html.is-home .tear.is-ready .tear__stage { top: 0; height: 100svh; } html.is-home .tear:not(.is-ready) .tear__grid { padding-top: calc(var(--header-h) + 24px); } html.is-home .site-header { transition: transform 0.55s var(--ease-settle), box-shadow 240ms ease, background-color 240ms ease; } html.hdr-hide .site-header:not(:focus-within) { transform: translateY(-110%); box-shadow: none; } .intro-corner { display: none; } html.is-home .intro-corner { display: flex; position: fixed; top: 14px; right: max(16px, calc((100vw - 1200px) / 2)); z-index: 49; gap: 8px; align-items: center; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 0.35s, transform 0.45s var(--ease-settle); } html.is-home.hdr-hide .intro-corner { opacity: 1; transform: none; pointer-events: auto; } html.has-loader .intro-corner { opacity: 0 !important; } .intro-corner__menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgb(11 31 92 / 0.14); border-radius: var(--r-pill); background: rgb(255 255 255 / 0.72); backdrop-filter: blur(10px); color: var(--navy-900); font: 700 var(--fs-sm) var(--font-body); cursor: pointer; } .intro-corner__menu svg { width: 18px; height: 18px; } .intro-corner__menu:hover { background: #fff; } .intro-corner .btn { height: 40px; } @media (max-width: 719px) { .intro-corner .btn { display: none; } } @media (prefers-reduced-motion: reduce) { html.has-loader .ldr { display: none; } html.has-loader { overflow: auto; } } /* 28. Baho va fikrlar (partials/reviews.php, review-item.php) */ .stars { --size: 22px; --v: 0; display: inline-block; flex: none; width: calc(var(--size) * 5); height: var(--size); vertical-align: middle; background: linear-gradient(90deg, #f5a524 calc(var(--v) / 5 * 100%), var(--slate-300) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 5.9 6.6 1-4.8 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.5 9.4l6.6-1z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 5.9 6.6 1-4.8 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.5 9.4l6.6-1z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x; } :root[data-theme="dark"] .stars { background: linear-gradient(90deg, #f5a524 calc(var(--v) / 5 * 100%), rgb(255 255 255 / 0.18) 0); } .stars--sm { --size: 16px; } .reviews__grid { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .reviews__grid { grid-template-columns: minmax(280px, 0.8fr) 1.6fr; } .reviews__side { position: sticky; top: calc(var(--header-h) + 16px); } } .reviews__side { display: grid; gap: var(--sp-4); } .rsum { display: grid; gap: var(--sp-4); } .rsum__avg { display: grid; justify-items: start; gap: 4px; } .rsum__avg b { font: 800 3rem/1 var(--font-display); color: var(--text); } .rsum__avg small, .rsum__empty p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; } .rsum__empty { display: grid; gap: 8px; } .rsum__dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rsum__dist li { display: grid; grid-template-columns: 12px 14px 1fr 28px; align-items: center; gap: 8px; font-size: var(--fs-xs); } .rsum__dist svg { width: 14px; height: 14px; color: #f5a524; fill: #f5a524; } .rsum__dist i { position: relative; height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; } .rsum__dist i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: #f5a524; } .rsum__dist li > span:last-child { text-align: right; } .rform { display: grid; gap: var(--sp-3); } .rform h3 { margin: 0 0 var(--sp-3); } .rform__row { display: grid; gap: var(--sp-3); } @media (min-width: 560px) { .rform__row { grid-template-columns: 1fr 1fr; } } .rform .field { margin-bottom: var(--sp-3); } .rform__count { display: block; text-align: right; font-size: 12px; margin-top: 4px; } .rform__rules { display: flex; gap: 8px; font-size: var(--fs-xs); margin: 0 0 var(--sp-3); } .rform__rules svg { flex: none; width: 16px; height: 16px; color: var(--primary); } .rstars { border: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; } .rstars legend { padding: 0; margin-bottom: 6px; } .rstars__input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; width: max-content; } .rstars { display: block; } .rstars__input input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rstars__input label { cursor: pointer; padding: 2px; color: var(--slate-300); transition: color 0.15s, transform 0.2s var(--ease-settle); } .rstars__input label svg { width: 34px; height: 34px; fill: currentColor; stroke-width: 1.2; } .rstars__input label:hover, .rstars__input label:hover ~ label, .rstars__input input:checked ~ label { color: #f5a524; } .rstars__input label:hover { transform: scale(1.15); } .rstars__input input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } .rstars__hint { display: inline-block; margin-left: 10px; font-weight: 700; font-size: var(--fs-sm); vertical-align: middle; min-height: 1em; } .reviews__list { display: grid; gap: var(--sp-3); } .reviews__list [data-review-list] { display: grid; gap: var(--sp-3); } .reviews__more { justify-self: center; } .reviews__more svg { width: 18px; height: 18px; } .rv { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .rv__head { display: flex; align-items: center; gap: 12px; } .rv__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 1.05rem var(--font-display); color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--navy-900)); } .rv__who { min-width: 0; flex: 1; } .rv__who b { font-size: var(--fs-sm); } .rv__who small { display: block; color: var(--text-muted); font-size: var(--fs-xs); } .rv__badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--green-50); color: var(--green-600); font-size: 11px; font-weight: 700; vertical-align: middle; } .rv__badge svg { width: 12px; height: 12px; } .rv__body { margin: var(--sp-3) 0 0; overflow-wrap: anywhere; } .rv__reply { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--primary); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface-2); } .rv__reply b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; } .rv__reply b svg { width: 15px; height: 15px; } .rv__reply p { margin: 6px 0 0; font-size: var(--fs-sm); } .reviews__none { margin: 0; } /* Sarlavha yonidagi qisqa baho (mahsulot va yangilik sahifalari) */ .rbadge { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); text-decoration: none; } .rbadge b { color: var(--text); } .rbadge:hover { color: var(--primary); } /* 29. Kuzatuv: mahsulotlar va ombor (partials/order-status.php) */ .whs { margin-top: var(--sp-5); } .whs__wrap { overflow-x: auto; margin-top: var(--sp-3); } .whs__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .whs__table th, .whs__table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .whs__table thead th { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .whs__table tfoot th { border-bottom: 0; font-size: var(--fs-sm); } .whs__table .r { text-align: right; } .whs__bar { position: relative; display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; max-width: 280px; } .whs__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; } .whs__bar-p { background: var(--blue-200); } .whs__bar-d { background: var(--primary); } .whs__state { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); } .whs__state--in_stock { background: var(--blue-100); color: var(--blue-800); } .whs__state--full { background: var(--green-50); color: var(--green-600); } .whs__state--over { background: var(--orange-50); color: var(--orange-700); } .whs__state--short { background: var(--red-50); color: var(--red-600); } :root[data-theme="dark"] .whs__state--in_stock { background: rgb(61 104 230 / 0.2); color: var(--blue-300); } :root[data-theme="dark"] .whs__state--full { background: rgb(21 128 61 / 0.2); color: #6ee7a0; } :root[data-theme="dark"] .whs__state--over { background: rgb(255 122 26 / 0.18); color: var(--orange-300); } :root[data-theme="dark"] .whs__state--short { background: rgb(198 40 40 / 0.2); color: #ff9b9b; } .whs__note { display: flex; gap: 8px; align-items: flex-start; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); } .whs__note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--primary); } .whs__hist-title { margin: var(--sp-5) 0 var(--sp-2); } .whs__hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .whs__hist li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); } .whs__hist li span:first-of-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .whs__hist svg { width: 16px; height: 16px; color: var(--primary); } @media (max-width: 640px) { .whs__table thead { display: none; } .whs__table, .whs__table tbody, .whs__table tr, .whs__table td, .whs__table tfoot { display: block; width: 100%; } .whs__table tr { padding: 10px 0; border-bottom: 1px solid var(--line); } .whs__table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; } .whs__table td[data-label=""] { display: block; text-align: left; } .whs__table td::before { content: attr(data-label); color: var(--text-muted); text-align: left; font-size: var(--fs-xs); } .whs__table td[data-label=""]::before { content: none; } .whs__table tfoot tr { display: flex; flex-wrap: wrap; gap: 10px; } .whs__table tfoot th { padding: 6px 0; } } .whs__state--partial { background: var(--blue-100); color: var(--blue-800); } :root[data-theme="dark"] .whs__state--partial { background: rgb(61 104 230 / 0.2); color: var(--blue-300); } /* ===================================================================== 30. AI studiya / AI dizayn urg'usi — partials/ai-promo.php, ai-bar.php, menyu, footer ===================================================================== */ :root { --ai-a: #6d5cff; --ai-b: #1E4FD8; --ai-c: #FF7A1A; --ai-grad: linear-gradient(110deg, var(--ai-a), var(--ai-b) 45%, var(--ai-c)); } /* Gradient tugma (aylanuvchi yorug'lik chegara bilan) */ .btn--ai { position: relative; isolation: isolate; color: #fff; border: 0; background: var(--ai-grad); background-size: 200% 100%; box-shadow: 0 14px 34px -12px rgb(109 92 255 / 0.65); animation: ai-flow 6s ease-in-out infinite alternate; } .btn--ai:hover { color: #fff; box-shadow: 0 18px 40px -12px rgb(109 92 255 / 0.85); } .btn--ai svg { width: 18px; height: 18px; } .btn--ai::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%); background-size: 250% 100%; animation: ai-shine 3.2s ease-in-out infinite; mix-blend-mode: soft-light; } @keyframes ai-flow { to { background-position: 100% 0; } } @keyframes ai-shine { 0%, 40% { background-position: 150% 0; } 100% { background-position: -100% 0; } } /* Kichik belgi */ .aipill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); font: 700 var(--fs-xs) var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ai-a); background: rgb(109 92 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(109 92 255 / 0.25); } .aipill svg { width: 15px; height: 15px; animation: ai-twinkle 2.4s ease-in-out infinite; } .aipill b { margin-left: 2px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--ai-c); color: #1b1006; font-size: 10px; } .aipill--sm { padding: 3px 9px; font-size: 10px; } :root[data-theme="dark"] .aipill { color: #b3a9ff; background: rgb(109 92 255 / 0.18); } @keyframes ai-twinkle { 50% { transform: rotate(18deg) scale(1.18); filter: drop-shadow(0 0 6px rgb(255 176 112 / 0.9)); } } /* Animatsiyali SVG: qop, AI chizayotgan logotip, skanerlash, yulduzchalar */ .aiart { position: relative; display: grid; place-items: center; width: 120px; aspect-ratio: 160 / 180; flex: none; } .aiart--lg { width: min(300px, 70vw); } .aiart--sm { width: 64px; } .aiart__svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgb(11 31 92 / 0.35)); animation: ai-float 6s ease-in-out infinite; } .aiart__sack { fill: rgb(255 255 255 / 0.96); stroke-width: 3; } .aiart__seam { stroke: #c9d6f5; stroke-width: 2; stroke-dasharray: 4 5; fill: none; } .aiart__logo { fill: none; stroke: var(--ai-b); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: ai-draw 4.8s ease-in-out infinite; } .aiart__line { stroke: var(--ai-c); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ai-draw 4.8s ease-in-out infinite; } .aiart__line--1 { animation-delay: 0.6s; } .aiart__line--2 { stroke: #9fb2ef; animation-delay: 0.9s; } .aiart__scan { opacity: 0.85; filter: drop-shadow(0 0 6px #8ab4ff); animation: ai-scan 2.4s ease-in-out infinite; } .aiart__spark { position: absolute; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px #ffb070); animation: ai-spark 2.8s ease-in-out infinite; } .aiart__spark--1 { top: 2%; right: 4%; } .aiart__spark--2 { top: 38%; left: -4%; width: 10px; height: 10px; animation-delay: 0.9s; } .aiart__spark--3 { bottom: 10%; right: -2%; width: 18px; height: 18px; animation-delay: 1.7s; background: #c9bfff; } .aiart__ring { position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, rgb(109 92 255 / 0.0), rgb(109 92 255 / 0.55), rgb(255 122 26 / 0.5), rgb(30 79 216 / 0.0)); filter: blur(18px); animation: ai-spin 9s linear infinite; } @keyframes ai-float { 50% { transform: translateY(-8px) rotate(-1.5deg); } } @keyframes ai-draw { 0% { stroke-dashoffset: 160; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 160; opacity: 0; } } @keyframes ai-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { transform: translateY(118px); opacity: 0; } } @keyframes ai-spark { 0%, 100% { transform: scale(0.3) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } } @keyframes ai-spin { to { transform: rotate(360deg); } } /* Keng blok (bosh sahifa, mahsulot sahifalari) */ .aiband { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--sp-5); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 32px; color: #fff; background: radial-gradient(120% 140% at 85% 20%, #2b1f8f 0%, #13277a 45%, #0B1F5C 100%); box-shadow: 0 40px 80px -40px rgb(43 31 143 / 0.75); } @media (min-width: 900px) { .aiband { grid-template-columns: 1.25fr 0.75fr; } } .aiband::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 80% 40%, #000, transparent 70%); } .aiband__glow { position: absolute; z-index: -1; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgb(255 122 26 / 0.35), transparent 65%); animation: ai-float 8s ease-in-out infinite; } .aiband .aipill { color: #d9d3ff; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); } .aiband__title { margin: var(--sp-3) 0; color: #fff; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); line-height: 1.1; background: linear-gradient(90deg, #fff 0%, #fff 40%, #ffd7b0 55%, #fff 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-text 6s ease-in-out infinite; } @keyframes ai-text { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } } .aiband__text { color: #c9d3f5; max-width: 56ch; margin: 0 0 var(--sp-4); } .aiband__meta { color: #c9d3f5; font-size: var(--fs-sm); font-weight: 600; } .aiband__art { justify-self: center; } .aisteps { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .aisteps li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); font-weight: 600; font-size: var(--fs-sm); animation: ai-step 0.7s calc(var(--i) * 0.15s) var(--ease-settle) both; } .aisteps__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ai-grad); } .aisteps__n svg { width: 15px; height: 15px; } @keyframes ai-step { from { opacity: 0; transform: translateY(8px); } } /* Ixcham kartochka (yangiliklar, kuzatuv) */ .aicard { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: 22px; text-decoration: none; color: #fff; background: radial-gradient(120% 160% at 100% 0%, #2b1f8f, #0B1F5C 60%); box-shadow: 0 24px 50px -28px rgb(43 31 143 / 0.8); transition: transform 0.3s var(--ease-settle); } .aicard:hover { transform: translateY(-3px); color: #fff; } .aicard .aiart { width: 86px; } .aicard__body { display: grid; gap: 4px; flex: 1; min-width: 0; } .aicard__body b { font: 800 1.1rem var(--font-display); } .aicard__body small { color: #c9d3f5; font-size: var(--fs-sm); } .aicard .aipill { justify-self: start; color: #d9d3ff; background: rgb(255 255 255 / 0.1); } .aicard__cta { flex: none; } .aicard--soft { background: radial-gradient(120% 160% at 100% 0%, #3a2fa8, #15338F 65%); } @media (max-width: 640px) { .aicard { flex-wrap: wrap; } .aicard__cta { width: 100%; justify-content: center; } } /* Kalkulyator natijasi ostida */ .aicalc { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-3); padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--text); background: linear-gradient(120deg, rgb(109 92 255 / 0.1), rgb(255 122 26 / 0.08)); box-shadow: inset 0 0 0 1px rgb(109 92 255 / 0.25); transition: box-shadow 0.3s, transform 0.3s var(--ease-settle); } .aicalc:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ai-a), 0 12px 24px -16px rgb(109 92 255 / 0.6); color: var(--text); } .aicalc .aiart__svg { filter: drop-shadow(0 6px 8px rgb(11 31 92 / 0.25)); } .aicalc .aiart__ring { filter: blur(10px); } .aicalc b { display: block; font-size: var(--fs-sm); background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .aicalc small { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.4; } .aicalc__go { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ai-grad); color: #fff; } .aicalc__go svg { width: 16px; height: 16px; } /* Sahifa tepasidagi eʼlon qatori */ .aibar { position: relative; z-index: 51; display: flex; align-items: center; background: var(--ai-grad); background-size: 200% 100%; animation: ai-flow 8s ease-in-out infinite alternate; color: #fff; transition: opacity 0.3s, margin 0.3s; } .aibar.is-gone { opacity: 0; } .aibar__link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 6px 44px 6px 16px; color: #fff; text-decoration: none; font-size: var(--fs-sm); font-weight: 600; } .aibar__link:hover { color: #fff; } .aibar__ic svg { width: 18px; height: 18px; animation: ai-twinkle 2.4s ease-in-out infinite; } .aibar__new { padding: 1px 8px; border-radius: var(--r-pill); background: #fff; color: var(--ai-a); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } .aibar__cta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.18); white-space: nowrap; } .aibar__cta svg { width: 14px; height: 14px; } .aibar__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.15); color: #fff; cursor: pointer; } .aibar__close svg { width: 14px; height: 14px; } @media (max-width: 640px) { .aibar__text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12px; } .aibar__cta { display: none; } } /* Menyu: AI studiya bandi */ .mnav__link--ai .mnav__label { background: var(--ai-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-flow 5s ease-in-out infinite alternate; font-weight: 800; } .mnav__aitag { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--ai-grad); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.5; box-shadow: 0 0 0 0 rgb(109 92 255 / 0.6); animation: ai-pulse 2.4s ease-out infinite; } @keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgb(109 92 255 / 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgb(109 92 255 / 0); } } :root[data-theme="dark"] .mnav__link--ai .mnav__label { background-image: linear-gradient(110deg, #b3a9ff, #8ab4ff 45%, #ffb070); } /* Telefon menyusi */ .drawer__ai { display: flex; align-items: center; gap: 12px; margin: 0 16px 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #fff; background: var(--ai-grad); background-size: 200% 100%; animation: ai-flow 6s ease-in-out infinite alternate; box-shadow: 0 14px 30px -14px rgb(109 92 255 / 0.8); } .drawer__ai-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgb(255 255 255 / 0.18); flex: none; } .drawer__ai-ic svg { width: 20px; height: 20px; animation: ai-twinkle 2.4s ease-in-out infinite; } .drawer__ai b { display: block; font-size: var(--fs-sm); } .drawer__ai em { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #fff; color: var(--ai-a); font-style: normal; font-size: 10px; text-transform: uppercase; } .drawer__ai small { display: block; font-size: 12px; opacity: 0.88; line-height: 1.35; } .drawer__ai > svg { width: 18px; height: 18px; flex: none; margin-left: auto; } /* Footer */ .footer-ai { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(120deg, rgb(109 92 255 / 0.35), rgb(255 122 26 / 0.18)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); } .footer-ai:hover { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); } .footer-ai__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ai-grad); flex: none; } .footer-ai__ic svg { width: 18px; height: 18px; animation: ai-twinkle 2.4s ease-in-out infinite; } .footer-ai b { display: block; font-size: var(--fs-sm); } .footer-ai small { display: block; font-size: 12px; opacity: 0.8; line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .btn--ai, .btn--ai::after, .aipill svg, .aiart__svg, .aiart__logo, .aiart__line, .aiart__scan, .aiart__spark, .aiart__ring, .aiband__glow, .aiband__title, .aisteps li, .aibar, .aibar__ic svg, .mnav__link--ai .mnav__label, .mnav__aitag, .drawer__ai, .drawer__ai-ic svg, .footer-ai__ic svg { animation: none !important; } .aiart__logo, .aiart__line { stroke-dashoffset: 0; } .aiart__scan, .aiart__spark { opacity: 0; } } /* Kalkulyator natijasi (to'q fon) ichida AI kartochka */ .calc__result .aicalc { color: #fff; background: linear-gradient(120deg, rgb(109 92 255 / 0.35), rgb(255 122 26 / 0.18)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); } .calc__result .aicalc:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45), 0 12px 24px -14px rgb(0 0 0 / 0.6); } .calc__result .aicalc b { background: none; -webkit-text-fill-color: #fff; color: #fff; } .calc__result .aicalc small { color: #c9d3f5; } .rbadge { flex-wrap: nowrap; white-space: nowrap; } .rbadge > svg { width: 18px; height: 18px; flex: none; color: #f5a524; } .cta-band .btn--ai { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55), 0 14px 34px -12px rgb(43 31 143 / 0.8); } @media (max-width: 600px) { .aiart--lg { width: min(200px, 56vw); } } /* ===================================================================== 31. AI studiya — «AI laboratoriya» (views/pages/studio.php, partials/qopbot.php, js/studio.js) ===================================================================== */ .lab-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: clamp(32px, 6vw, 72px) clamp(36px, 6vw, 80px); background: radial-gradient(120% 120% at 80% 10%, #2b1f8f 0%, #13277a 45%, #071443 100%); } .lab-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .lab-hero__orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: ai-float 9s ease-in-out infinite; } .lab-hero__orb--a { width: 460px; height: 460px; right: -120px; top: -160px; background: #6d5cff; } .lab-hero__orb--b { width: 380px; height: 380px; left: -140px; bottom: -200px; background: #ff7a1a; opacity: .3; animation-delay: -4s; } .lab-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); animation: lab-grid 20s linear infinite; } @keyframes lab-grid { to { background-position: 40px 40px, 40px 40px; } } .lab-hero__dot { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #b3c7ff; box-shadow: 0 0 10px #8ab4ff; animation: ai-spark 3.6s var(--d) ease-in-out infinite; } .lab-hero__inner { display: grid; gap: var(--sp-6); align-items: center; } @media (min-width: 900px) { .lab-hero__inner { grid-template-columns: 1.3fr 0.7fr; } } .lab-hero .aipill { color: #d9d3ff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); } .lab-hero__title { margin: var(--sp-3) 0 var(--sp-2); color: #fff; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.05; background: linear-gradient(90deg, #fff 0%, #fff 40%, #c9bfff 55%, #ffd7b0 65%, #fff 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ai-text 7s ease-in-out infinite; } .lab-hero__typing { margin: 0 0 var(--sp-3); min-height: 1.6em; font: 700 clamp(1.05rem, .9rem + .7vw, 1.4rem) var(--font-display); color: #ffb070; } .lab-hero__typing .typing__caret { background: #ffb070; } .lab-hero__lead { color: #c9d3f5; max-width: 56ch; margin: 0 0 var(--sp-4); } .lab-hero__chips { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .lab-hero__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font-size: var(--fs-sm); font-weight: 600; animation: ai-step .7s calc(var(--i) * .12s + .3s) var(--ease-settle) both; } .lab-hero__chips svg { width: 16px; height: 16px; color: #ffb070; } .lab-credits { display: inline-grid; gap: 2px; padding: 10px 16px; border-radius: 16px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); } .lab-credits__n { font: 800 1.15rem var(--font-display); color: #fff; } .lab-credits small { color: #c9d3f5; font-size: 12px; max-width: 40ch; } .lab-hero__bot { position: relative; display: grid; justify-items: center; gap: 6px; } .lab-hero__botname { font: 700 var(--fs-xs) var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #9fb2ef; } .lab-bubble { position: relative; max-width: 300px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--navy-900); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6); justify-self: start; margin-left: 12%; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .4s, transform .5s var(--ease-settle); } .lab-bubble.is-in { opacity: 1; transform: none; } .lab-bubble::after { content: ""; position: absolute; left: 18px; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; } @media (max-width: 899px) { .lab-hero__bot { grid-row: 1; } .lab-bubble { margin-left: 0; justify-self: center; } } /* Qopbot */ .qopbot { position: relative; width: var(--qb-size, 180px); aspect-ratio: 200 / 220; --ex: 0; --ey: 0; } .qopbot__svg { width: 100%; height: 100%; overflow: visible; } .qopbot__shadow { fill: rgb(0 0 0 / .25); animation: qb-shadow 4s ease-in-out infinite; transform-origin: 100px 210px; } .qopbot__float { animation: qb-float 4s ease-in-out infinite; } .qopbot__eyes { transform: translate(calc(var(--ex) * 7px), calc(var(--ey) * 5px)); transition: transform .15s linear; } .qopbot__pupil { animation: qb-blink 4.6s infinite; transform-box: fill-box; transform-origin: center; } .qopbot__halo { animation: qb-halo 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .qopbot__bulb { animation: qb-bulb 1.8s ease-in-out infinite; } .qopbot__core { animation: qb-core 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .qopbot__arm { transform-box: view-box; transform-origin: 138px 140px; animation: qb-wave 3.2s ease-in-out infinite; } .qopbot__happy, .qopbot__tick { opacity: 0; transition: opacity .3s; } .qopbot__paint { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0; } .qopbot__paint--1 { background: #ff7a1a; right: 2%; top: 18%; } .qopbot__paint--2 { background: #6d5cff; right: 12%; top: 8%; } .qopbot__paint--3 { background: #19a974; right: -4%; top: 30%; } .qopbot[data-mood="paint"] .qopbot__arm { animation: qb-paint .5s ease-in-out infinite alternate; } .qopbot[data-mood="paint"] .qopbot__paint { animation: qb-drop 1.2s ease-out infinite; } .qopbot[data-mood="paint"] .qopbot__paint--2 { animation-delay: .4s; } .qopbot[data-mood="paint"] .qopbot__paint--3 { animation-delay: .8s; } .qopbot[data-mood="paint"] .qopbot__core { fill: #ff7a1a; animation-duration: .8s; } .qopbot[data-mood="happy"] .qopbot__eyes { opacity: 0; } .qopbot[data-mood="happy"] .qopbot__happy, .qopbot[data-mood="happy"] .qopbot__tick { opacity: 1; } .qopbot[data-mood="happy"] .qopbot__core { fill: #19a974; } .qopbot[data-mood="happy"] .qopbot__float { animation: qb-jump .9s ease-in-out 3, qb-float 4s 2.7s ease-in-out infinite; } @keyframes qb-float { 50% { transform: translateY(-8px); } } @keyframes qb-shadow { 50% { transform: scaleX(.82); opacity: .6; } } @keyframes qb-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } } @keyframes qb-halo { 50% { transform: scale(1.5); opacity: .4; } } @keyframes qb-bulb { 50% { fill: #ffd28a; } } @keyframes qb-core { 50% { transform: scale(1.15); } } @keyframes qb-wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(6deg); } 90% { transform: rotate(-10deg); } } @keyframes qb-paint { from { transform: rotate(-16deg); } to { transform: rotate(10deg); } } @keyframes qb-drop { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(14px, 40px) scale(.4); } } @keyframes qb-jump { 40% { transform: translateY(-22px); } } /* Bosqichlar, ilhom */ .lab-top { margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: 22px; background: linear-gradient(120deg, rgb(109 92 255 / .07), rgb(255 122 26 / .05)); box-shadow: inset 0 0 0 1px rgb(109 92 255 / .18); } .lab-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .lab-steps li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); } .lab-steps__ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--slate-400); transition: background .4s, color .4s, box-shadow .4s, transform .4s var(--ease-settle); } .lab-steps__ic svg { width: 20px; height: 20px; } .lab-steps li.is-done { color: var(--text); } .lab-steps li.is-done .lab-steps__ic { background: var(--ai-grad); color: #fff; box-shadow: 0 10px 20px -10px rgb(109 92 255 / .8); transform: translateY(-2px); } .lab-meter { height: 6px; margin: var(--sp-3) 0 4px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .lab-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ai-grad); transition: width .6s var(--ease-settle); } .lab-meter__txt { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); text-align: right; } .lab-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .lab-ideas__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--ai-a); } .lab-ideas__title svg { width: 16px; height: 16px; } :root[data-theme="dark"] .lab-ideas__title { color: #b3a9ff; } .lab-idea { border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 7px 14px; border-radius: var(--r-pill); font: 600 var(--fs-sm) var(--font-body); cursor: pointer; transition: transform .25s var(--ease-settle), border-color .25s, box-shadow .25s; } .lab-idea:hover { transform: translateY(-2px); border-color: var(--ai-a); box-shadow: 0 10px 20px -14px rgb(109 92 255 / .8); } .lab-idea.is-on { border-color: var(--ai-a); box-shadow: inset 0 0 0 1px var(--ai-a); } .lab-flash { animation: lab-flash 1s ease-out; } @keyframes lab-flash { 0% { box-shadow: 0 0 0 0 rgb(109 92 255 / .6); } 100% { box-shadow: 0 0 0 10px rgb(109 92 255 / 0); } } @media (max-width: 560px) { .lab-steps span:not(.lab-steps__ic) { font-size: 10px; } .lab-steps__ic { width: 36px; height: 36px; } } /* Forma bo'limlari */ .studio__num { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 10px; background: rgb(109 92 255 / .1); color: var(--ai-a); flex: none; margin-right: 4px; } .studio__num svg { width: 17px; height: 17px; } .studio__sec > summary { justify-content: flex-start; } .studio__sec > summary::after { margin-left: auto; } .studio__sec[open] { box-shadow: 0 16px 30px -24px rgb(11 31 92 / .4); } .upload--ai .upload__box { border-color: rgb(109 92 255 / .45); background: linear-gradient(120deg, rgb(109 92 255 / .06), rgb(255 122 26 / .05)); color: var(--ai-a); min-height: 90px; } .upload--ai:hover .upload__box { border-style: solid; } .lab-go { font-size: 1.05rem; } /* Natija paneli */ .lab-result { padding: var(--sp-4); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgb(11 31 92 / .5); } .lab-result__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lab-canvas { aspect-ratio: 4 / 4.2; border-style: solid; border-color: rgb(109 92 255 / .25); background: radial-gradient(circle at 50% 40%, var(--surface), var(--surface-2)); } .lab-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } /* Jonli sxema */ .lab-live { display: grid; justify-items: center; gap: 8px; width: 100%; height: 100%; padding: 6%; --c1: #0B1F5C; --c2: #f5a524; --bg: #fffdf8; } .lab-live[data-palette="minimalist"] { --c1: #1E4FD8; --c2: #1E4FD8; --bg: #ffffff; } .lab-live[data-palette="premium"] { --c1: #1f1f1f; --c2: #c9a24a; --bg: #f6f1e7; } .lab-live__svg { width: auto; height: 88%; max-width: 100%; filter: drop-shadow(0 22px 26px rgb(11 31 92 / .28)); animation: ai-float 6s ease-in-out infinite; } .lab-live__sack { fill: var(--bg); stroke: var(--c1); stroke-width: 2; transition: fill .4s, stroke .4s; } .lab-live__weave { stroke: rgb(0 0 0 / 0); stroke-width: 1; } .lab-live[data-sack="pp"] .lab-live__weave { stroke: rgb(11 31 92 / .08); } .lab-live[data-sack="pp"] .lab-live__sack { stroke-dasharray: 3 2; } .lab-live__band { fill: var(--c2); transition: fill .4s; } .lab-live__brand { font: 900 26px var(--font-display); fill: var(--c1); letter-spacing: .04em; } .lab-live__product { font: 600 12px var(--font-body); fill: var(--c1); opacity: .75; } .lab-live__kg { font: 900 18px var(--font-display); fill: var(--bg); } .lab-live[data-palette="minimalist"] .lab-live__kg { fill: #fff; } .lab-live__note { color: var(--text-muted); font-size: 11px; text-align: center; } /* Kutish ekrani */ .lab-wait { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, #2b1f8f 0%, #0B1F5C 70%); color: #fff; z-index: 2; } .lab-wait[hidden] { display: none; } .lab-wait .qopbot { --qb-size: 110px; } .lab-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; text-align: left; } .lab-stages li { display: flex; align-items: center; gap: 8px; color: #8b98c9; transition: color .3s; } .lab-stages li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #3d4c8c; flex: none; transition: .3s; } .lab-stages li.is-active { color: #fff; font-weight: 700; } .lab-stages li.is-active::before { border-color: #ffb070; border-top-color: transparent; animation: ai-spin .8s linear infinite; } .lab-stages li.is-done { color: #b3f0cf; } .lab-stages li.is-done::before { border-color: #19a974; background: #19a974 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat; } .lab-bar { position: relative; width: min(280px, 90%); height: 10px; border-radius: 10px; background: rgb(255 255 255 / .12); overflow: hidden; } .lab-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--ai-grad); background-size: 200% 100%; animation: ai-flow 2s linear infinite alternate; transition: width .4s; } .lab-bar b { position: absolute; right: -2px; top: -20px; font-size: 11px; } .lab-fact { margin: 4px 0 0; max-width: 34ch; min-height: 3em; font-size: 12px; color: #c9d3f5; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-settle); } .lab-fact.is-in { opacity: 1; transform: none; } .lab-score { margin: 0; font-weight: 800; color: #ffd28a; } .lab-wait small { color: #8b98c9; font-size: 11px; } .lab-game { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .lab-star { position: absolute; bottom: -40px; pointer-events: auto; border: 0; background: none; padding: 6px; font-size: 22px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 8px #ffb070); animation: lab-rise 4s linear forwards; } .lab-star.is-hit { animation: lab-pop .38s ease-out forwards; } @keyframes lab-rise { to { transform: translateY(calc(-1 * (100% + 520px))) rotate(200deg); } } @keyframes lab-pop { to { transform: scale(2.2); opacity: 0; } } /* Natija */ .lab-image { position: relative; z-index: 1; cursor: zoom-in; } .lab-image.is-reveal img { animation: lab-reveal 1.1s var(--ease-settle) both; } @keyframes lab-reveal { from { clip-path: inset(0 0 100% 0); filter: blur(12px) saturate(1.6); transform: scale(1.04); } to { clip-path: inset(0 0 0 0); filter: none; transform: none; } } .lab-done { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--green-50); animation: ai-step .6s var(--ease-settle) both; } .lab-done b { display: inline-flex; align-items: center; gap: 6px; color: var(--green-600); } .lab-done b svg { width: 18px; height: 18px; } :root[data-theme="dark"] .lab-done { background: rgb(21 128 61 / .18); } .lab-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lab-actions .btn { justify-content: center; } .lab-actions .btn svg { width: 17px; height: 17px; } .studio.is-busy .studio__form { opacity: .6; pointer-events: none; transition: opacity .3s; } /* Galereya */ .lab-history-head { margin-top: var(--sp-7); } .lab-gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: var(--sp-4); } .lab-card { margin: 0; overflow: hidden; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease-settle), box-shadow .3s; } .lab-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgb(11 31 92 / .5); } .lab-card.is-new { animation: ai-step .7s var(--ease-settle) both; box-shadow: 0 0 0 2px var(--ai-a); } .lab-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); cursor: zoom-in; } .lab-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-settle); } .lab-card:hover .lab-card__img img { transform: scale(1.06); } .lab-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; } .lab-card__acts { display: flex; gap: 4px; } .lab-card__btn { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 700; font-size: 12px; } .lab-card__btn svg { width: 16px; height: 16px; } .lab-card__btn:hover { background: var(--tint); color: var(--primary); } .lab-card__btn--go { background: var(--ai-grad); color: #fff; } .lab-card__btn--go:hover { color: #fff; background: var(--ai-grad); filter: brightness(1.08); } /* Mehmon */ .lab-guest { display: grid; gap: var(--sp-6); align-items: start; } @media (min-width: 960px) { .lab-guest { grid-template-columns: 420px 1fr; } } .lab-guest__card { margin: 0; } .lab-examples__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: var(--sp-3); } .lab-example { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 18px; animation: ai-step .7s calc(var(--i) * .08s) var(--ease-settle) both; } .lab-example img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-settle); } .lab-example:hover img { transform: scale(1.07); } .lab-example span { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: rgb(11 31 92 / .78); color: #fff; font-size: 11px; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .lab-hero__orb, .lab-hero__grid, .lab-hero__dot, .lab-hero__title, .lab-hero__chips li, .qopbot *, .lab-live__svg, .lab-bar i, .lab-example, .lab-card.is-new, .lab-image.is-reveal img { animation: none !important; } .lab-bubble { opacity: 1; transform: none; } } @media (min-width: 1000px) { .studio .lab-top { grid-column: 1 / -1; } .studio .studio__form { grid-row: 2; } .studio .lab-result { grid-row: 2; grid-column: 2; } } .lab-top { margin-bottom: 0; } .lab-card__btn--go span { white-space: nowrap; } .lab-gallery { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* 32. Nestandart qop buyurtmasi (views/pages/order.php, js/order.js) */ .cmode { margin-top: var(--sp-3); } .cform-c { margin-top: var(--sp-4); } .cform-c__intro { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); } .cform-c__grid { display: grid; gap: var(--sp-4); } @media (min-width: 1200px) { .cform-c__grid { grid-template-columns: 1fr 230px; align-items: start; } } .cform-c__row { display: grid; gap: 0 var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .cform-c__row .field { margin-top: var(--sp-3); } .cform-c__checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--sp-3); } .cform-c__fields fieldset { border: 0; padding: 0; margin: var(--sp-3) 0 0; } .cest { position: relative; display: grid; justify-items: center; gap: 4px; padding: var(--sp-4); border-radius: 20px; text-align: center; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(120% 120% at 80% 0%, #2b1f8f 0%, #0B1F5C 70%); box-shadow: 0 24px 50px -30px rgb(11 31 92 / 0.8); transition: opacity 0.3s; } @media (min-width: 1200px) { .cest { position: sticky; top: calc(var(--header-h) + 16px); } } .cest.is-loading { opacity: 0.75; } .cest.is-pop .cest__unit { animation: ai-step 0.5s var(--ease-settle); } .cest__svg { width: 120px; height: 132px; overflow: visible; } .cest__bag { fill: rgb(255 255 255 / 0.95); stroke: #8ab4ff; stroke-width: 2; transition: d 0.4s var(--ease-settle); } .cest__dim { stroke: #ffb070; stroke-width: 1.5; stroke-dasharray: 3 3; } .cest__lbl { fill: #ffd7b0; font: 700 11px var(--font-body); } .cest__badge { padding: 2px 10px; border-radius: var(--r-pill); background: rgb(255 176 112 / 0.2); color: #ffd7b0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .cest__title { font-size: var(--fs-sm); color: #c9d3f5; } .cest__unit { font: 800 1.35rem/1.2 var(--font-display); } .cest__total { font-size: var(--fs-sm); font-weight: 700; color: #ffd7b0; } .cest__mold { font-size: 12px; color: #c9d3f5; } .cest.is-error .cest__unit { font: 600 var(--fs-sm) var(--font-body); color: #ffb4b4; } .cest__mgr { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / 0.08); font-size: 12px; line-height: 1.4; text-align: left; color: #e6ecff; } .cest__mgr svg { width: 16px; height: 16px; flex: none; color: #ffb070; margin-top: 1px; } .cbadge { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--orange-50); color: var(--orange-700); font-size: 11px; font-weight: 800; } :root[data-theme="dark"] .cbadge { background: rgb(255 122 26 / 0.18); color: var(--orange-300); } .cart__item--custom { box-shadow: inset 3px 0 0 var(--orange-500); padding-left: 10px; } .cnote { margin-top: var(--sp-3); font-size: var(--fs-sm); } /* Kuzatuv: narx holati (nestandart) */ .pstat { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--sp-3); padding: 12px 14px; border-radius: 14px; font-size: var(--fs-sm); } .pstat p { margin: 4px 0 0; } .pstat__ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; } .pstat__ic svg { width: 18px; height: 18px; } .pstat--wait { background: var(--orange-50); color: var(--orange-700); } .pstat--wait .pstat__ic { background: rgb(255 122 26 / 0.15); } .pstat--ok { background: var(--green-50); color: var(--text); } .pstat--ok .pstat__ic { background: var(--green-600); color: #fff; } .pstat__reason { padding: 8px 10px; border-radius: 10px; background: rgb(255 255 255 / 0.7); } :root[data-theme="dark"] .pstat--wait { background: rgb(255 122 26 / 0.14); color: var(--orange-300); } :root[data-theme="dark"] .pstat--ok { background: rgb(21 128 61 / 0.16); } :root[data-theme="dark"] .pstat__reason { background: rgb(255 255 255 / 0.06); } .pstat__hist { margin-top: 8px; font-size: var(--fs-xs); } .pstat__hist ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .pstat__hist li { display: grid; gap: 2px; } /* Kategoriya: nestandart buyurtma banneri */ .custband { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-6); border-radius: 24px; background: linear-gradient(135deg, var(--navy, #0B1F5C), #1E4FD8); color: #fff; box-shadow: 0 20px 50px -20px rgba(11,31,92,.5); } .custband__ic { font-size: 44px; line-height: 1; } .custband > div { flex: 1; min-width: 240px; } .custband h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); } .custband p { margin: 0; color: rgba(255,255,255,.82); } @media (max-width: 640px) { .custband { padding: var(--sp-5); } .custband .btn { width: 100%; justify-content: center; } } .cart__item--custom .cart__side b { white-space: nowrap; } /* Qogʻoz qop narx jadvali: qatorlar = aniq oʻlcham (eni×boʻyi×tag), ustunlar = tiraj */ .price-table--sizes th[scope="row"] { text-align: left; white-space: nowrap; } .price-table--sizes th[scope="row"] b { display: block; font-size: 1.02em; } .price-table--sizes th[scope="row"] small { display: block; font-weight: 400; color: var(--text-muted); white-space: normal; max-width: 220px; } .price-table--sizes thead th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; } .price-table--sizes thead th.is-best { color: var(--orange-600, #EA580C); } .price-table--sizes tr.is-sep > * { border-top: 2px solid var(--line-strong, var(--line)); } /* Kalkulyator: nestandart rejim */ .calc .cmode { margin-bottom: var(--sp-4); } .calc__custom { display: grid; gap: var(--sp-3); } .calc__custom-intro { margin: 0; font-size: var(--fs-sm); } .calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .calc__grid .field { margin: 0; } .calc__checks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); } .calc__manager { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--orange-50); border: 1px solid var(--orange-100); } .calc__manager p { margin: 6px 0 0; font-size: var(--fs-sm); } /* Tanlangan oʻlcham: eni · boʻyi · tag */ .dims-hint { display: inline-flex; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: var(--blue-50, #EEF3FF); color: var(--cobalt-700, #1E4FD8); font-weight: 600; font-size: var(--fs-xs); } .calc__manager p { color: var(--navy-900, #0B1F5C); } /* Kuzatuv: ortiqcha toʻlov */ .kv__over dd b { color: var(--green-600); } .kv__over dd small { display: block; font-size: var(--fs-xs); color: var(--text-muted); max-width: 260px; margin-left: auto; text-align: right; } /* Kuzatuv: Telegram xabarnomalari */ .tgcard { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; background: linear-gradient(135deg, #EAF6FD, var(--surface)); } .tgcard__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #229ED9; color: #fff; flex: none; } .tgcard__body { flex: 1; min-width: 200px; } .tgcard__body p { margin: 4px 0 0; font-size: var(--fs-sm); } /* Buyurtma: mijozda qolip bor */ .mold-known { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--green-50); color: var(--green-600); font-size: var(--fs-sm); font-weight: 600; } /* Onlayn toʻlov tugmalari */ .paynow__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); } .paynow__btn { justify-content: center; color: #fff; font-weight: 800; letter-spacing: .02em; } .paynow__btn--payme { background: #00CCCC; } .paynow__btn--payme:hover { background: #00b3b3; } .paynow__btn--click { background: #0075FF; } .paynow__btn--click:hover { background: #0062d6; } /* Kompaniya haqida: hamkorlar ixcham, keyslar + sertifikatlar yonma-yon */ .pgrid--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .proof { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .proof__card { padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); scroll-margin-top: 90px; } .proof__card .h4 { margin: var(--sp-3) 0 var(--sp-2); } .proof__card p { margin: 0 0 var(--sp-3); } .proof__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50, #EEF3FF); color: var(--cobalt, #1E4FD8); } #team, #partners { scroll-margin-top: 80px; } @media (max-width: 720px) { .proof { grid-template-columns: 1fr; } } /* 404: «4 [qop] 4» animatsiyasi */ .nf { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 8vw, 110px); text-align: center; background: linear-gradient(180deg, var(--surface-2, #F4F7FE), var(--bg, #fff)); } .nf__bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; } .nf__bg span:nth-child(1) { width: 380px; height: 380px; left: -120px; top: -80px; background: #C9D7FF; } .nf__bg span:nth-child(2) { width: 320px; height: 320px; right: -100px; top: 30%; background: #FFD9BD; } .nf__bg span:nth-child(3) { width: 260px; height: 260px; left: 40%; bottom: -160px; background: #DCE6FF; } .nf__inner { position: relative; max-width: 760px; } .nf__art { margin: 0 auto var(--sp-4); max-width: 520px; } .nf__svg { width: 100%; height: auto; overflow: visible; } .nf__digit { transform-box: fill-box; transform-origin: center; animation: nfPop .7s cubic-bezier(.2, .9, .3, 1.3) both; } .nf__digit--r { animation-delay: .12s; } .nf__sack { animation: nfDrop .9s cubic-bezier(.2, .9, .3, 1.2) .2s both; } .nf__sway { transform-box: fill-box; transform-origin: 50% 100%; animation: nfSway 3.2s ease-in-out 1.1s infinite; } .nf__shadow { transform-box: fill-box; transform-origin: center; animation: nfShadow 3.2s ease-in-out 1.1s infinite; } .nf__q { animation: nfQ 1.6s ease-in-out infinite; } .nf__bits rect { transform-box: fill-box; transform-origin: center; animation: nfBit 4s ease-in-out infinite; } .nf__bits rect:nth-child(2) { animation-delay: -1s; } .nf__bits rect:nth-child(3) { animation-delay: -2s; } .nf__bits rect:nth-child(4) { animation-delay: -3s; } .nf__eyebrow { justify-content: center; } .nf__title { margin: var(--sp-2) 0 var(--sp-3); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); } .nf__lead { margin: 0 auto; max-width: 520px; } .nf__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); } .nf__try { margin: var(--sp-8) 0 var(--sp-3); color: var(--text-muted); font-weight: 600; } .nf__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); text-align: left; } .nf__link { display: flex; align-items: center; gap: var(--sp-3); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; animation: nfUp .5s ease both; animation-delay: calc(.5s + var(--i) * .08s); } .nf__link:hover, .nf__link:focus-visible { transform: translateY(-3px); border-color: var(--blue-300, #93B4FF); box-shadow: 0 14px 30px -18px rgba(11, 31, 92, .45); } .nf__link b { display: block; } .nf__link small { display: block; color: var(--text-muted); font-size: var(--fs-xs); } .nf__link-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-50, #EEF3FF); color: var(--cobalt, #1E4FD8); } .nf__link-go { margin-left: auto; color: var(--text-muted); transition: transform .2s; } .nf__link:hover .nf__link-go { transform: translateX(4px); color: var(--orange-600, #EA580C); } @keyframes nfPop { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } } @keyframes nfDrop { 0% { opacity: 0; transform: translateY(-120px); } 70% { opacity: 1; transform: translateY(8px); } 100% { transform: none; } } @keyframes nfSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes nfShadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86); } } @keyframes nfQ { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes nfBit { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -12px) rotate(160deg); } } @keyframes nfUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .nf__links { grid-template-columns: 1fr; } .nf__actions .btn { flex: 1 1 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .nf *, .nf__link { animation: none !important; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nf__bg span { opacity: .1; } } :root[data-theme="dark"] .nf__bg span { opacity: .1; } /* 13.9 Aksiya oynasi (admin → Aksiya) */ .promo { border: 0; padding: 0; background: none; max-width: min(760px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); overflow: visible; color: var(--text); } .promo::backdrop { background: rgb(5 12 36 / 0.55); backdrop-filter: blur(3px); } .promo[open] { animation: promo-in 520ms var(--ease-pop); } .promo[open]::backdrop { animation: promo-fade 300ms ease; } .promo.is-closing { animation: promo-out 220ms ease forwards; } @keyframes promo-in { from { opacity: 0; transform: translateY(24px) scale(0.94); } } @keyframes promo-out { to { opacity: 0; transform: translateY(12px) scale(0.97); } } @keyframes promo-fade { from { opacity: 0; } } .promo__card { position: relative; display: grid; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; max-height: calc(100dvh - 32px); } .promo__card.has-img { grid-template-columns: 1fr 1.1fr; } .promo__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--primary), var(--accent)); z-index: 1; } .promo__media { position: relative; min-height: 260px; background: var(--surface-2); } .promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .promo__body { display: grid; align-content: center; justify-items: start; gap: var(--sp-3); padding: clamp(24px, 4vw, 40px); overflow-y: auto; } .promo__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--navy-900); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; animation: q-wiggle 3s ease-in-out 1s infinite; } .promo__badge svg { width: 16px; height: 16px; } .promo__title { margin: 0; padding-right: 32px; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.12; color: var(--text); } .promo__card.has-img .promo__title { padding-right: 0; } .promo__text { margin: 0; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55; } .promo__until { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--orange-700); } .promo__until svg { width: 16px; height: 16px; } .promo__cta { margin-top: var(--sp-2); } .promo__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.9); color: var(--navy-900); box-shadow: var(--shadow-md); cursor: pointer; transition: transform 200ms, background-color 200ms; } .promo__close:hover { transform: rotate(90deg); background: #fff; } .promo__close svg { width: 20px; height: 20px; } :root[data-theme="dark"] .promo__until { color: var(--orange-300); } @media (max-width: 640px) { .promo { margin-bottom: 16px; } .promo__card.has-img { grid-template-columns: 1fr; } .promo__media { min-height: 0; aspect-ratio: 16 / 9; } .promo__body { padding: 22px 20px 24px; } .promo__cta { width: 100%; } } /* 13.10 «Xato yoki taklif» vidjeti */ .fb-launch { position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 58; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-md); cursor: pointer; transition: transform 300ms var(--ease-pop), border-color 200ms, color 200ms, opacity 200ms; } .fb-launch svg { width: 20px; height: 20px; color: var(--accent); flex: none; } .fb-launch:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); } .fb-launch:hover svg { animation: q-wiggle 900ms ease-in-out; } html.chat-open .fb-launch { opacity: 0; pointer-events: none; } @media (max-width: 720px) { .fb-launch { width: 44px; padding: 0; justify-content: center; } .fb-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media print { .fb-launch, .promo { display: none !important; } } .fb { border: 0; padding: 0; background: none; width: min(520px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); color: var(--text); overflow: visible; } .fb::backdrop { background: rgb(5 12 36 / 0.45); backdrop-filter: blur(2px); } .fb[open] { animation: chat-rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); } .fb__card { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .fb__head { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-5) var(--sp-5) var(--sp-3); } .fb__head h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.25rem; } .fb__head p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .fb__head > div { flex: 1; } .fb__x { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; } .fb__x:hover { background: var(--surface-2); color: var(--text); } .fb__x svg { width: 20px; height: 20px; } .fb__main { display: grid; gap: var(--sp-4); padding: var(--sp-2) var(--sp-5) var(--sp-5); overflow-y: auto; overscroll-behavior: contain; } .fb__main[hidden], .fb__ok[hidden] { display: none; } .fb__main .field + .field { margin-top: 0; } .fb__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fb__type { position: relative; } .fb__type input { position: absolute; opacity: 0; pointer-events: none; } .fb__type span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); cursor: pointer; transition: border-color 160ms, background-color 160ms, color 160ms, transform 200ms var(--ease-pop); } .fb__type span svg { width: 22px; height: 22px; } .fb__type:hover span { border-color: var(--blue-300); } .fb__type input:focus-visible + span { box-shadow: var(--focus); } .fb__type input:checked + span { transform: translateY(-1px); } .fb__type--bug input:checked + span { border-color: var(--red-600); background: var(--red-50); color: var(--red-600); } .fb__type--issue input:checked + span { border-color: var(--orange-500); background: var(--tint-orange); color: var(--orange-700); } .fb__type--idea input:checked + span { border-color: var(--primary); background: var(--surface-2); color: var(--primary); } :root[data-theme="dark"] .fb__type--bug input:checked + span { background: rgb(220 38 38 / 0.14); color: #FCA5A5; border-color: #F87171; } :root[data-theme="dark"] .fb__type--issue input:checked + span { background: rgb(255 122 26 / 0.14); color: var(--orange-300); } :root[data-theme="dark"] .fb__type--idea input:checked + span { color: #9DB6FF; border-color: #9DB6FF; } .fb__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .fb__shot { display: grid; gap: 8px; } .fb__file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: var(--r-md); color: var(--primary); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: border-color 160ms, background-color 160ms; } .fb__file:hover { border-color: var(--primary); background: var(--surface-2); } .fb__file:focus-within { box-shadow: var(--focus); } .fb__file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .fb__file svg { width: 20px; height: 20px; } .fb__file small { flex-basis: 100%; padding-left: 28px; color: var(--text-muted); font-weight: 400; } .fb__preview { display: flex; align-items: center; gap: var(--sp-3); } .fb__preview[hidden] { display: none; } .fb__preview img { width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); } .fb__auto { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--fs-xs); color: var(--text-muted); } .fb__auto svg { width: 14px; height: 14px; flex: none; margin-top: 2px; } .fb__err { color: var(--red-600); font-size: var(--fs-xs); font-weight: 600; } .fb__err[hidden] { display: none; } .fb__err--all { margin: 0; font-size: var(--fs-sm); } .fb__send { width: 100%; } .fb__send:disabled { opacity: 0.7; cursor: progress; } .fb__ok { display: grid; justify-items: center; gap: var(--sp-2); padding: 32px var(--sp-5); text-align: center; } .fb__ok h3 { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-size: 1.5rem; } .fb__ok p { margin: 0 0 var(--sp-3); color: var(--text-muted); max-width: 34ch; } .fb__okicon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--green-50); color: var(--green-600); animation: q-pop 600ms var(--ease-pop); } .fb__okicon svg { width: 36px; height: 36px; } @media (max-width: 560px) { .fb { width: 100vw; margin: auto 0 0; max-height: 92dvh; } .fb__card { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; border-bottom: 0; } .fb__row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .promo[open], .promo.is-closing, .fb[open], .promo__badge, .fb__okicon { animation: none !important; } }