/* MasterAI - dizayn tokenləri. * * Bu fayl layihənin YEGANƏ rəng/ölçü mənbəyidir. Heç bir başqa CSS * faylında birbaşa hex rəng və ya piksel ölçüsü yazılmır - yalnız * `var(--...)`. Bu intizam mediapulse.az-dan götürülüb (orada da bütün * sayt `--navy`/`--accent`/`--surface` dəyişənləri üzərində qurulub) və * `tests/test_web_design_system.py` ilə avtomatik yoxlanılır. * * Rəng palitrası Flutter tətbiqindən KÖÇÜRÜLÜB ki, davamlılıq itməsin: * toxum rəngi #2F6FED, 6 fənn aksenti `app_subject_colors.dart`-dan. * * ---- 2026-09-12 YENİLƏNMƏSİ: «əsl tədris tətbiqi» hissi ---- * İki problem ölçülüb düzəldildi: * * 1. KREM FON + SERİF BAŞLIQ. Əvvəlki `--color-bg: #FAFAF8` isti krem * idi və başlıqlar Source Serif ilə yazılırdı. Bu kombinasiya nəşr/ * hüquq bürosu estetikasıdır, tədris tətbiqi deyil - üstəlik hazırda * AI-nın ən çox istehsal etdiyi görünüşdür (krem + serif + isti * aksent), yəni «AI ilə hazırlanmış kimi görünür» hissinin birinci * səbəbi məhz budur. İndi fon SƏRİN qrafitdir, başlıq isə Archivo * (qrotesk). Neytral rənglər təsadüfi boz deyil: hamısı mavi tərəfə * çox az meyllidir, yəni əsas rənglə bir dəstdir. * * 2. FƏNN RƏNGLƏRİ İŞLƏNMİRDİ. Altı fənn aksenti var idi, amma yalnız * kartın 3px sol kənarında. Məhsulun yeganə real rəng kimliyi * istifadəsiz qalırdı. İndi quiz ekranı öz fənninin rəngini götürür * (`--quiz-accent`) və cavab variantlarının hərf nişanları beş ayrı * rəngdədir. * * NİYƏ BU, ƏVVƏLKİ QƏRARLA ZİDDİYYƏT DEYİL: aşağıda «fənn rəngi düymə * rəngi kimi İŞLƏDİLMİR» yazılıb və o qayda QALIR. Rəng yalnız * MƏZMUNU işarələyir - hərf nişanı, tərəqqi, nəticə vəziyyəti. Səhifə * karkası (fon, kart, düymə) sakit qalır. Alabəzək tətbiq rəngin * çoxluğundan deyil, rəngin MƏNASIZ yerdə işlədilməsindən yaranır. */ /* ---- Şriftlər: öz serverimizdə ---- * Google Fonts `` QƏSDƏN silinib. İki səbəb: * 1. Üçüncü tərəf sorğusu render-i bloklayır; brauzer testində məhz * o sorğu ERR_CONNECTION_RESET verirdi. * 2. Sayt Google-a çıxış olmadan da düzgün görünməlidir. * * Yalnız `latin` və `latin-ext` alt-dəstləri saxlanılır. Azərbaycan * hərfləri (Ə U+018F, ə U+0259, Ğ, İ, ı, Ş, ş, Ö, Ü, Ç) latin-ext-dədir. * Hər ikisi DƏYİŞƏN (variable) şriftdir: bir fayl bütün çəkiləri verir. * * Şriftlərin Azərbaycan hərflərini HƏQİQƏTƏN çəkdiyi cmap cədvəlindən * yoxlanılıb, CSS-in `unicode-range` iddiasına güvənilməyib. Bu vacibdir: * eyni yoxlamada Manrope-un Ə hərfi OLMADIĞI aşkarlandı. */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/source-serif-4-latin.woff2') format('woff2'); 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'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); 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; } /* Archivo - başlıq/rəqəm üzü. Dəyişən (wght 100-900), hər iki alt-dəst. * Azərbaycan hərflərinin hamısı (14/14) `cmap` cədvəlindən YOXLANILIB. * Bu yoxlama məcburidir: eyni yoxlamada Figtree-də `Ə` və `ə` OLMADIĞI * aşkarlandı (əvvəl Manrope də məhz buna görə rədd edilmişdi). */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/archivo-latin.woff2') format('woff2'); 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; } :root { /* ---- Brend ---- */ --color-primary: #4A6B4D; --color-primary-hover: #395539; --color-primary-soft: #E3EAE0; --color-on-primary: #FFFFFF; /* ---- QARA SƏTH: «sinif lövhəsi» ---- * Üst zolaq və açılış bölməsi qaradır. Bu, brendin üçüncü rəngidir * (yaşıl + sarı + qara) və eyni zamanda funksional seçimdir: tətbiqin * karkası məzmundan aydın ayrılır, sual kartları ağ kağız kimi * «lövhənin üstündə» oturur. */ --color-ink-surface: #141810; --color-on-ink: #F2F3EC; --color-on-ink-muted: #A8AE9B; /* Qara səthin üstündəki örtüklər. Ayrıca hex DEYİL, şəffaf ağdır: * səth rəngi dəyişsə də örtük onunla birlikdə dəyişir. */ --color-ink-hover: rgba(255, 255, 255, .08); --color-ink-active: rgba(255, 255, 255, .14); /* Qara səth üzərində adaçayı. Əsas `--color-primary` (#4A6B4D) qara * fonda cəmi 3.00:1 verir - AA-dan aşağı. Bu ton HƏR İKİ rejimdə * eynidir, çünki zolaq həmişə qaradır. */ --color-primary-on-ink: #9DBE9F; /* ---- SARI AKSENT: enerji ---- * Ardıcıl düzgün cavab, tərəqqi, birinci yer. XƏBƏRDARLIQ DEYİL - * xəbərdarlıq narıncıdır (aşağı). İki sarı tonun bir-birinə * qarışmaması üçün bu ayrılıq MƏCBURİDİR. */ --color-accent: #D9A21B; --color-accent-soft: #FBEECB; --color-accent-ink: #3A2A00; --color-accent-text: #6B4E00; /* ---- Səth və mətn ---- * Quizlet/Brilliant tərzi: ağ kartlar açıq boz fonda, ayırıcı KÖLGƏ * yox, incə KƏNAR XƏTTİdir. Kölgə yalnız üzən elementlərdə. */ --color-bg: #F3F4EF; --color-surface: #FFFFFF; --color-surface-alt: #E8EAE1; --color-border: #DBDED3; --color-border-strong: #B6BBAA; --color-text: #11150E; --color-text-muted: #4F5648; --color-text-faint: #838A78; /* ---- Semantik ---- * Hər biri cütlükdür: açıq fon + tünd mətn (mediapulse nişan naxışı). */ /* «Düzgün» brend yaşılının DOYMUŞ variantıdır - ayrı bir yaşıl deyil. * Bir ailədir, ona görə ekranda yad görünmür; doymuşluq fərqi isə * brend düyməsi ilə cavab nəticəsini ayırır. */ --color-success: #1B6B41; --color-success-soft: #D8F0E0; /* XƏBƏRDARLIQ SARI DEYİL, NARINCIDIR. Sarı artıq brend aksentidir * (ardıcıllıq, tərəqqi); ikisi eyni ton olsa istifadəçi «diqqət» * siqnalı ilə «afərin» siqnalını ayıra bilməz. */ --color-warning: #8A4A12; --color-warning-soft: #F8E3CE; --color-danger: #B3261E; --color-danger-soft: #FCE4E2; /* Info MAVİ DEYİL: paletdə mavi qalmır. Qrafit neytral status. */ --color-info: #3A4038; --color-info-soft: #E7E9E1; /* Qanun mətnində işarələnən hökm bəndi. Xəbərdarlıq rəngindən * AYRIDIR: burada heç bir problem yoxdur, sadəcə mənbə göstərilir. */ --color-mark: #7A5D00; --color-mark-soft: #FBF0C4; /* ---- Fənn aksentləri (app_subject_colors.dart ilə eyni) ---- * YALNIZ məzmunu işarələmək üçün: fənn nişanı, tərəqqi zolağı, kart * kənarı. Düymə rəngi kimi İŞLƏDİLMİR - əks halda tətbiq alabəzək * görünür (bax dizayn speci, 3-cü bölmə). */ --subject-mentiq: #7C4DFF; --subject-informatika: #00897B; --subject-dunyagorusu: #EF6C00; --subject-azerbaycan-dili: #2E7D32; --subject-qanunvericilik: #C62828; --subject-xarici-dil: #1565C0; /* ---- Cavab variantı rəngləri (A-E) ---- * NİYƏ BEŞ AYRI RƏNG: quiz ekranı beş bərabər boz düymə kimi * görünəndə tələbə üçün heç bir «oyun» hissi yoxdur - hər variantın * öz rəngi olanda göz onları dərhal ayırır və toxunma qərarı * sürətlənir (Kahoot/Quizizz-in işlədən mexanizmi budur). * * Rəng YALNIZ hərf nişanındadır, bütün düyməni doldurmur: variantın * MƏTNİ oxunmalıdır, rəng isə mövqe göstəricisidir. * * 2026-09-12 ikinci yenilənmə: brend yaşıl-sarı-qara olandan sonra * əvvəlki parlaq tonlar (indiqo/firuzə/fuksiya) ekranda yad dəst kimi * oxunurdu. İndi hamısı DƏRİN və torpaq tonlarıdır - beşi də * bir-birindən seçilir, amma adaçayı və qara ilə bir dəstdir. * * QIRMIZI VƏ YAŞIL VARİANT RƏNGİ KİMİ İŞLƏDİLMİR: onlar * «səhv»/«düzgün» siqnallarıdır. İlk versiyada D qırmızı idi və * brauzer render-ində göründü ki, cavab verilməzdən ƏVVƏL D variantı * «təhlükəli» görünür. İndi fuksiyadır. * * Hər biri ağ mətnlə WCAG AA (4.5:1) keçir - hərf nişanının üstündə * ağ hərf yazılır. Tünd rejimdə açıq variantlar tünd mətnlə işlənir. */ --opt-a: #3A4E7A; --opt-b: #1C6152; --opt-c: #8A5A12; --opt-d: #7A3A5E; --opt-e: #4A4F45; --opt-ink: #FFFFFF; /* ---- Boşluq: 4-lük şkala ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px; /* ---- Kölgə (az işlədilir) ---- */ --shadow-raised: 0 1px 3px rgba(18, 21, 28, .07); --shadow-overlay: 0 8px 28px rgba(18, 21, 28, .16); /* ---- Tipoqrafika ---- * Başlıq: Archivo (2026-09-12-dən). Əvvəl Source Serif 4 idi - o * seçim «material sənəddir, ona görə nəşr serifi» məntiqi ilə * edilmişdi. Məntiq düzgün idi, nəticə isə səhv: ekranda məhsul * tədris tətbiqi kimi yox, hüquq bürosunun saytı kimi oxunurdu. * Auditoriya yetkindir, amma məhsul bir OYUN mexanizmi işlədir * (növbəli sual, xal, sıralama) - başlıq üzü də ona uyğun olmalıdır. * Archivo qrotesk ailəsindəndir: ağır çəkilərdə enerjili, sıxılmış * hərf quruluşu rəqəmləri (xal, sayğac, sıralama) yaxşı göstərir. * Nunito qəsdən seçilmədi - o, uşaq tətbiqi kimi oxunur. * * Mətn: Inter saxlanılır. Uzun sual mətnlərində ekran oxunaqlığı * yaxşıdır və Azərbaycan hərflərini tam örtür. * * Hər ikisinin Azərbaycan hərflərini çəkdiyi şrift faylının cmap * cədvəlindən yoxlanılıb (13/13). */ --font-heading: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Source Serif 4 SİLİNMİR - sənəd tipli səhifələrdə (məxfilik, * şərtlər, qanun mətni sitatı) yeri var və şrift faylı onsuz da * yüklənib. `--font-document` kimi qalır, başlıq üzü isə Archivo. */ --font-document: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Dəvət kodu üçün. Sistem monosu QƏSDƏN seçilib - əlavə şrift faylı * yüklənmir. Kod sinifə səslə deyilir və əl ilə yazılır, ona görə * hər simvolun eyni enli və aydın olması vacibdir. */ --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 46px; --text-5xl: 58px; --tracking-tight: -.02em; --tracking-wide: .01em; /* Kod simvolları arasında geniş ara - `K7M3QX` sıxışıq oxunur. */ --tracking-code: .12em; --leading-tight: 1.2; --leading-normal: 1.55; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ---- Ölçülər ---- * 1200px mediapulse-un 1280-indən bir qədər dardır: MasterAI mətn və * sual oxutdurur, çox geniş sətir oxunaqlığı pozur. */ --grid-min: 240px; /* .grid-in defolt minimum sütun eni */ --grid-bank-min: 300px; /* sual bankı kartı: iki düymə yan-yana sığsın */ --textarea-min: 96px; /* çoxsətirli sahənin minimum hündürlüyü */ --tap-target: 56px; /* cavab variantı, əsas düymələr */ --score-ring-size: 120px; /* yekun xal dairəsi (conic-gradient) */ --app-bar-height: 56px; /* üst zolaq (mediapulse ilə eyni) */ --bottom-nav-height: 60px; /* mobil alt naviqasiya */ --width-container: 1200px; --width-prose: 720px; --width-form: 420px; /* ---- Hərəkət ---- */ --motion-fast: 120ms; --motion-base: 200ms; --easing: cubic-bezier(.2, 0, .2, 1); } /* Tünd rejim - sistem seçimi. `[data-theme]` əl ilə keçid üçün * saxlanılır (istifadəçi seçimi sistem seçimini üstələyir). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #9DBE9F; --color-primary-hover: #B4CFB5; --color-primary-soft: #1D2A1E; --color-on-primary: #0E110C; --color-ink-surface: #171C14; --color-on-ink: #EDEFE7; --color-on-ink-muted: #A5AC99; --color-ink-hover: rgba(255, 255, 255, .08); --color-ink-active: rgba(255, 255, 255, .14); --color-primary-on-ink: #9DBE9F; --color-accent: #F0C24A; --color-accent-soft: #332705; --color-accent-ink: #1A1500; --color-accent-text: #F0C24A; --color-bg: #0E110C; --color-surface: #161A13; --color-surface-alt: #1E231A; --color-border: #2B3226; --color-border-strong: #3E4637; --color-text: #EDEFE7; --color-text-muted: #A5AC99; --color-text-faint: #7C8474; --color-success: #6FCB96; --color-success-soft: #10301E; --color-warning: #E8AE72; --color-warning-soft: #33210F; --color-danger: #F2A9A3; --color-danger-soft: #371614; --color-info: #B6BDA8; --color-info-soft: #23281E; --color-mark: #E8CC7A; --color-mark-soft: #322806; --subject-mentiq: #B39DFF; --subject-informatika: #64D8CB; --subject-dunyagorusu: #FFB74D; --subject-azerbaycan-dili: #81C784; --subject-qanunvericilik: #EF9A9A; --subject-xarici-dil: #90CAF9; /* Variant rəngləri tünd rejimdə AÇIQ olur və mətn TÜNDDƏN gəlir - * tünd fonda doymuş tünd rəng üzərində ağ hərf oxunmur. */ --opt-a: #A8B8E0; --opt-b: #7FCDB8; --opt-c: #E8C07A; --opt-d: #D9A0C0; --opt-e: #AEB5A6; --opt-ink: #0D1018; --shadow-raised: 0 1px 3px rgba(0, 0, 0, .5); --shadow-overlay: 0 8px 28px rgba(0, 0, 0, .6); } } [data-theme="dark"] { --color-primary: #9DBE9F; --color-primary-hover: #B4CFB5; --color-primary-soft: #1D2A1E; --color-on-primary: #0E110C; --color-ink-surface: #171C14; --color-on-ink: #EDEFE7; --color-on-ink-muted: #A5AC99; --color-ink-hover: rgba(255, 255, 255, .08); --color-ink-active: rgba(255, 255, 255, .14); --color-primary-on-ink: #9DBE9F; --color-accent: #F0C24A; --color-accent-soft: #332705; --color-accent-ink: #1A1500; --color-accent-text: #F0C24A; --color-bg: #0E110C; --color-surface: #161A13; --color-surface-alt: #1E231A; --color-border: #2B3226; --color-border-strong: #3E4637; --color-text: #EDEFE7; --color-text-muted: #A5AC99; --color-text-faint: #7C8474; --color-success: #6FCB96; --color-success-soft: #10301E; --color-warning: #E8AE72; --color-warning-soft: #33210F; --color-danger: #F2A9A3; --color-danger-soft: #371614; --color-info: #B6BDA8; --color-info-soft: #23281E; --color-mark: #E8CC7A; --color-mark-soft: #322806; --subject-mentiq: #B39DFF; --subject-informatika: #64D8CB; --subject-dunyagorusu: #FFB74D; --subject-azerbaycan-dili: #81C784; --subject-qanunvericilik: #EF9A9A; --subject-xarici-dil: #90CAF9; /* Variant rəngləri tünd rejimdə AÇIQ olur və mətn TÜNDDƏN gəlir - * tünd fonda doymuş tünd rəng üzərində ağ hərf oxunmur. */ --opt-a: #A8B8E0; --opt-b: #7FCDB8; --opt-c: #E8C07A; --opt-d: #D9A0C0; --opt-e: #AEB5A6; --opt-ink: #0D1018; --shadow-raised: 0 1px 3px rgba(0, 0, 0, .5); --shadow-overlay: 0 8px 28px rgba(0, 0, 0, .6); }