/* ========================================================================== FF/00-TOKENS.CSS — FlexFolio skin: TOKEN RETARGET + global ritm/tipografika Otabek, 2026-08-07. Manba: https://flexfollio.framer.website/ — barcha qiymat brauzerda `getComputedStyle` bilan JONLI o'lchangan (spec: ref/FLEXFOLIO-SPEC.md). Bu fayl mavjud KASKADNI buzmaydi: u faqat `aiwork.css`, `depth.css` va `rang.css` dagi `:root` o'zgaruvchilarini qayta belgilaydi. Sayt to'liq token-asosli qurilgani uchun shu bitta blok ranglar/soyalarning ~70% ini FlexFolio tiliga o'tkazadi — jumladan bu skinda alohida qayta yozilmagan bo'limlarni ham. Bekor qilish: index.html dan ff/* larini olib tashlash kifoya. ========================================================================== */ /* ========================================================================== 1. AIWORK TOKENLARI ========================================================================== */ :root{ /* --- Yuzalar --- */ --page: #F5F5F5; /* o'lchangan body foni */ --panel: #FFFFFF; --panel-2: #FAFAFA; /* ikkilamchi yuza, plita */ /* --- Siyoh: iliq qora-jigarrang, SOF QORA EMAS --- */ --ink: #1E0D01; /* rgb(30,13,1) */ --ink-strong: #1E0D01; --ink-mut: rgba(30,13,1,.60); --ink-dim: rgba(30,13,1,.60); --line: rgba(30,13,1,.10); --line-soft: rgba(30,13,1,.06); /* --- Aksent: apelsin. Nom `--blue` bo'lib qolaveradi (300+ joyda) --- */ --blue: #F97518; /* rgb(249,117,24) */ --blue-2: #FFB640; /* mesh/gradient oxiri */ --blue-lo: rgba(249,117,24,.10); --blue-ink: #C2510A; /* MAYDA apelsin matn — oq fonda 4.66:1 (AA) */ --blue-ring: rgba(249,117,24,.35); --acc-deep: #D75900; --acc-head: #F2690D; /* KATTA sarlavha ta'kidi — 3.09:1 (AA large) */ --dark-a: #1E0D01; --dark-b: #1E0D01; /* --- Shakl: pill hukmron (o'lchangan: radius 100px — 128 marta) --- */ --r-xs: 100px; /* eyebrow / chip */ --r-sm: 100px; /* tugma, kichik interaktiv */ --r-md: 12px; /* ichki element — o'zgarmaydi */ --r-lg: 20px; /* karta — o'lchangan */ --r-xl: 24px; /* katta panel / o'ram */ --r-xl-m: 20px; --r-pill: 100px; --r-nav: 100px; --r-nav-sm: 100px; --r-nav-link: 100px; --r-btn: 100px; /* --- Ritm --- */ --wrap: 1200px; /* o'lchangan: 1440px'da x=120 / x=1320 */ --pad: clamp(20px, 3vw, 30px); /* DIQQAT: `--band` nomi SAQLANADI — 05-lanes-proof.css:29 unga `margin-top: var(--band) !important` bilan bog'langan. Faqat qiymati kichrayadi. Asimmetrik past padding alohida `--band-b` orqali. */ --band: clamp(56px, 5.8vw, 84px); /* o'lchangan: 84px */ --band-b:clamp(58px, 6vw, 86px); /* o'lchangan: 86px */ --gap: 31px; /* o'lchangan hukmron grid gap */ /* --- Imzo qatlami: yo'naltiruvchi chiziqlar --- Referens DOM'idan aynan olindi (Framer chegarani `::after` pseudo- elementda chizadi, shuning uchun elementning o'zida `border:0` ko'rinadi): vertikal chiziq : 1px DASHED rgba(30,13,1,.12), x=120 va x=1319 gorizontal chiziq : 1px DASHED rgba(30,13,1,.12), 1190px, x=125..1315 tugun (Dot) : 10×10px, fon #FFFFFF, radius 100px, 1px SOLID rgba(30,13,1,.12) — ya'ni OQ TO'LDIRILGAN doira, ichi shaffof HALQA EMAS Shtrix qadami rasmdan o'lchandi: 3px shtrix / 2px bo'shliq (davr 5px) — bu Chrome'ning 1px `dashed` uchun tabiiy naqshi. */ --rail: rgba(30,13,1,.12); --rail-dot: #FFFFFF; /* tugunning ichki to'ldirishi */ --glow-warm: 250,132,132; /* #FA8484 */ --glow-pink: 254,131,242; } /* ========================================================================== 2. DEPTH TOKENLARI `depth.css` o'z `:root` iga ega va u aiwork'dan KEYIN yuklanadi — shuning uchun uning tokenlari alohida qayta belgilanishi shart. Eng muhimi `--sh-rgb`: butun saytdagi soyalar shundan hisoblanadi. ========================================================================== */ :root{ --sh-rgb: 30, 13, 1; /* binafshaga moyil soya → iliq neytral */ /* FlexFolio'da chuqurlik juda yumshoq. O'lchangan retsept (oq pill/karta) */ --sh-1: 0 .602px 1.566px -1.5px rgba(0,0,0,.17), 0 2.289px 5.950px -3px rgba(0,0,0,.14), 0 10px 26px -4.5px rgba(0,0,0,.02); --sh-2: none; /* KARTADA SOYA YO'Q — o'lchangan */ --sh-3: 0 .602px 1.566px -1.5px rgba(0,0,0,.17), 0 2.289px 5.950px -3px rgba(0,0,0,.14), 0 10px 26px -4.5px rgba(0,0,0,.02); --sh-4: 0 1px 2px rgba(30,13,1,.06), 0 12px 28px -10px rgba(30,13,1,.14), 0 30px 60px -24px rgba(30,13,1,.16); --hair: inset 0 0 0 1px rgba(30,13,1,.06); --hair-soft: inset 0 0 0 1px rgba(30,13,1,.04); --hair-acc: inset 0 0 0 1px rgba(249,117,24,.22); /* FlexFolio'da yuqori qirra yaltirashi yo'q */ --gloss: none; /* Apelsin tugma nuri — o'lchangan: `inset 0 4px 4px rgb(249,117,24), 0 10px 24px rgba(215,89,0,.2)` */ --sh-blue: inset 0 4px 4px #F97518, 0 10px 24px rgba(215,89,0,.20); --sh-blue-hi: inset 0 4px 4px #FF8531, 0 14px 30px rgba(215,89,0,.28); --sh-blue-press: inset 0 2px 6px rgba(215,89,0,.35); /* Apelsin shkalasi */ --blue-50: #FFF4EC; --blue-100: #FFE6D2; --blue-200: #FFC79B; --blue-300: #FFB640; --blue-400: #FF9A3D; --blue-500: #F97518; --blue-600: #D75900; --blue-700: #A33F00; /* Yordamchi aksentlar — endi hammasi bitta apelsin oilasida */ --acc-violet: #F97518; --acc-cyan: #F97518; --acc-amber: #F97518; /* `#hero-h1` va `#jarvis .jv-head h2` shu tokendan rang oladi */ --ink-head: #1E0D01; --page-tint: #FAFAFA; --panel-hi: #FFFFFF; --panel-lo: #FFFFFF; /* kartadagi binafsha gradientni tekislaydi */ } /* ========================================================================== 3. RANG QATLAMI — gradient endi faqat DEKOR uchun. Sarlavhadagi `background-clip:text` zanjiri 01-primitives.css da uziladi. ========================================================================== */ :root{ --grad: linear-gradient(90deg, #F97518 0%, #FF4D00 50%, #FFB640 100%); --grad-sm: linear-gradient(90deg, #D75900 0%, #F97518 100%); } /* ========================================================================== 4. SAHIFA ========================================================================== */ /* DIQQAT: `depth.css:122` `body{background: …}` SHORTHAND yozadi va u yerda binafsha radial gradient bor. Faqat `background-color` berish YETMAYDI — rasm omon qoladi va sahifa lilak tusda qolaveradi (o'lchangan: x=720,y=320 da (250,244,248), ya'ni ko'k kanal yashildan yuqori — sovuq lilak; referensda esa (255,227,231) — iliq shaftoli). Shuning uchun `background-image` ANIQ qayta yoziladi. */ body{ background-color:var(--page); background-image:linear-gradient(180deg, #FDF3F0 0%, var(--page) 520px); background-repeat:no-repeat; background-attachment:scroll; color:var(--ink); font:500 16px/1.5 var(--body); /* o'lchangan: Inter 16/500, lh 24px */ letter-spacing:normal; } /* ========================================================================== 5. KONTEYNER VA BO'LIM RITMI O'lchangan: konteyner 1200px · bo'lim 84/86 · hero 200/80 · features 100/100 · FAQ 120/120 · CTA+footer 80/24 ========================================================================== */ .container{ max-width:calc(var(--wrap) + var(--pad) * 2); } .container-narrow{ max-width:780px; } /* Kontent yo'naltiruvchi chiziqqa TEGIB turmasligi kerak. Referensda yo'lakchalar x=120/1320 da, kartalar esa x=152..1288 — ya'ni har ikki tomondan 32px nafas bor. Bizda konteyner aynan 1200px bo'lgani uchun kontent chiziqqa yopishib qolgan edi. Yechim: chiziqlar joyida qoladi (ular `--wrap` dan hisoblanadi), faqat konteynerning ichki paddingi 32px ga oshadi. Faqat chiziqlar ko'rinadigan kenglikda — mobilda ortiqcha bo'shliq kerak emas. */ @media (min-width:1024px){ .container{ padding-inline:calc(var(--pad) + 32px); } } .section{ padding-block:var(--band) var(--band-b); } /* 13.9vw — 1440px'da AYNAN 200px beradi (13vw atigi 187px edi) */ #hero{ padding-block:clamp(110px, 13.9vw, 200px) clamp(60px, 5.6vw, 80px); } #xizmatlar{ padding-block:clamp(60px, 6.9vw, 100px); } #savollar{ padding-block:clamp(60px, 8.3vw, 120px); } #boshlash{ padding-block:clamp(60px, 5.5vw, 80px) 24px; } /* `#trust` ID + !important bilan yozilgan — teng kuch bilan qaytariladi */ #trust{ padding-block:var(--band) var(--band-b) !important; } /* ========================================================================== 6. TIPOGRAFIKA FlexFolio imzosi: sarlavhalar YENGIL vaznda (400/500), lekin tracking juda zich, va zichlik o'lcham bilan birga o'sadi (60px'da -3.5px, 38px'da -1.5px) — shuning uchun `clamp()` px'da yoziladi, em'da emas. ========================================================================== */ h1, h2, h3, h4, h5, h6{ font-family:var(--display); /* Geist — lokal woff2, allaqachon bor */ color:var(--ink); } h1{ font-size:clamp(38px, 4.17vw, 60px); /* 60px @1440 · 38px @390 */ font-weight:500; line-height:1.0; letter-spacing:clamp(-3.5px, -0.243vw, -1.5px); } h2{ font-size:clamp(32px, 3.33vw, 48px); font-weight:400; /* yengil vazn — imzo */ line-height:1.04; letter-spacing:clamp(-3.5px, -0.243vw, -1px); } h3{ font-size:clamp(24px, 2.5vw, 36px); font-weight:400; line-height:1.2; letter-spacing:-0.03em; } /* Bo'lim sarlavhasi idishi h2 shkalasini oladi */ .sec-head{ font-family:var(--display); font-weight:400; font-size:clamp(32px, 3.33vw, 48px); line-height:1.04; letter-spacing:clamp(-3.5px, -0.243vw, -1px); color:var(--ink); } /* Lead / bo'lim sub — o'lchangan Inter 18/500, ls -0.36px, lh 1.4 */ .lead, .sec-sub, .jv-sub{ font-family:var(--body); font-size:18px; font-weight:500; line-height:1.4; letter-spacing:-0.36px; color:var(--ink-mut); } /* Mayda / meta — o'lchangan Inter 14/500 */ small, .svc-meta, .work-tag, .step-day{ font-family:var(--body); font-size:14px; font-weight:500; line-height:1.7; letter-spacing:normal; } /* ========================================================================== 7. FOKUS — apelsin halqa ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } /* ========================================================================== 8. MOBIL — o'lchangan mobil shkalasi H1 38px / ls -1.5px · H2 32px / ls -1px · bo'lim 60/60 · pad 20px ========================================================================== */ @media (max-width:767px){ :root{ --band:60px; --band-b:60px; --pad:20px; --gap:16px; /* depth.css:1351 mobilda --sh-2/--sh-3 ni qayta belgilaydi — bu yerda teng kuch bilan qaytariladi, aks holda soyalar qaytib keladi */ --sh-2:none; --sh-3:0 .602px 1.566px -1.5px rgba(0,0,0,.17), 0 2.289px 5.950px -3px rgba(0,0,0,.14), 0 10px 26px -4.5px rgba(0,0,0,.02); } #hero{ padding-block:110px 60px; } #xizmatlar, #savollar{ padding-block:60px; } .lead, .sec-sub, .jv-sub{ font-size:16px; } }