/* ============================================================ UVA Mentor — design tokens Extracted from "UVA Mentor Panel.dc.html" (Claude Design handoff). Every value here is taken verbatim from the design file. Nothing is invented. If a value is not in this sheet, it was not in the design. ============================================================ */ :root { /* ── Paper & ink ─────────────────────────────────────────── "Living paper": the screen ground, the prescription card, and the recessed archive sheet, in order of depth. */ /* 17 Eyl — MATBAA. Sahibi: "Claude'a benzemiyor muyuz?" Benziyorduk: krem zemin + serif başlık + tek sıcak turuncu vurgu, o markanın tarifiyle birebir aynıydı. Zemin krem sarısından GAZETE KAĞIDI grisine indi (kırmızı-mavi farkı 14 → 6, parlaklık 0,92 → 0,85: hem daha nötr hem daha donuk). Kağıt/mürekkep/mühür dünyası aynı; değişen yalnız zeminin sıcaklık ekseni. */ --uva-paper: #EFEEE9; /* screen ground */ --uva-card: #E3E2DB; /* prescription card, sidebar */ --uva-edge: #D2D1C8; /* borders, dividers, archive sheet */ --uva-rule: #A9A79B; /* short marker rules, separators */ --uva-ink: #22211D; /* primary text */ --uva-ink-soft: #5C5A52; /* secondary text */ /* ── Accent ──────────────────────────────────────────────── Budget is exactly two accent moments per screen: the "Başla" fill and the "MATEMATİK" subject label. Never body text. */ /* Pas turuncusundan BASKI MÜREKKEBİ kırmızısına: turuncu, gri zeminde de o markanın mercanına en çok benzeyen değişkendi. */ --uva-accent: #A8281C; --uva-accent-hover: #C23325; /* large fills only, never text */ /* ── Seal ────────────────────────────────────────────────── The seal is a blind deboss, not a stamp: a lighter top-left relief edge, a darker bottom-right one, and faint ink at 10%. */ --uva-seal-relief: #F4F3EE; --uva-seal-ink: #A8A28F; --uva-seal-ink-opacity: 0.10; /* ── Type ────────────────────────────────────────────────── İKİ ADIMDA BUGÜNKÜ HÂLE GELDİ, sıra önemli: 1) §22 (17 Eyl): serif BIRAKILDI, tek aile IBM Plex Sans'a inildi. Sebep, "krem + serif + sıcak turuncu" kategori klişesinin üçüncü ayağı olmasıydı. 2) "D" kararı (17 Eyl akşamı, sahibi dört varyantı yan yana görerek): gövde/arayüz Source Sans 3; serif (Newsreader) GERİ GELDİ ama YALNIZ marka katmanında — aşağıdaki --uva-font-marka. Yani "serif kalktı" ARTIK DOĞRU DEĞİL; serif var ve kapsamı dar. Uygulama içi başlıklarda ayrım hâlâ aileden değil AĞIRLIK ve BOYUTTAN geliyor. Rakamlar hizalı: kural mono fontta değil .uva-mono'nun tabular-nums'ında; üçüncü bir aile (mono) YOK. */ /* 20 Eyl — "C" kararı. Source Sans 3 BIRAKILDI: Adobe'nin arayüz fontu, görünmez olmak için tasarlanmış ve sahibi üç kez "karaktersiz" dedi. Yerine Figtree: sıcak, hafif yuvarlak, küçük boyutta okunaklı. */ --uva-font-heading: 'Figtree', 'Segoe UI', Arial, sans-serif; --uva-font-body: 'Figtree', 'Segoe UI', Arial, sans-serif; /* MARKA/DISPLAY: yalnız kelime markası ve açılış h1'i. Uygulama içi başlıklar gövde ailesinde kalır — serif buraya yayılırsa kimlik §22'de bırakılan 'krem + serif' tarifine geri döner. */ --uva-font-marka: 'Newsreader', Georgia, serif; /* 14 Eyl: sahibi Plex Mono'yu beğenmedi (daktilo hissi). Ölçüm-proza karışmasın ilkesi mono'ya değil HİZALI RAKAMA dayanıyor; .uva-mono zaten tabular-nums lining-nums uyguluyor. Üç font → iki. */ --uva-font-mono: 'Figtree', 'Segoe UI', Arial, sans-serif; /* ── Yazı ölçeği ─────────────────────────────────────────── 17 Eyl. Denetim: V3 CSS'inde 18 AYRI boyut, 311 bildirimin yalnız 62'si token'dan geliyordu. 13/14/15/16/17 gibi beş komşu değer aynı işi yapıyordu — bu bir ölçek değil, her sayfanın o an doğru geleni yazması. Ladder mevcut kullanımdan TÜRETİLDİ (en sık altı değer bildirimlerin %90'ını kapsıyordu); 15 ve 17 ölçekten ÇIKARILDI, sırasıyla 14 ve 16'ya toplanıyorlar. Rol adları boyut adı değildir: bir rolün değeri değişirse onu kullanan her yer birlikte değişsin diye. test/v3-tipografi.test.js cirit atmayı engeller. */ --uva-fs-mikro: 11px; /* küçük şekil içi: avatar baş harfleri, deste no */ --uva-fs-minik: 12px; /* alt çubuk etiketi */ --uva-fs-etiket: 13px; /* eyebrow, ders etiketi, form etiketi */ --uva-fs-kucuk: 14px; /* ikincil metin, tablo hücresi, durum/hata satırı */ --uva-fs-govde: 16px; /* gövde, düğme, sayaç değeri */ --uva-fs-lead: 19px; /* giriş paragrafı */ --uva-fs-h3: 23px; --uva-fs-h2: 29px; --uva-fs-h1: 38px; --uva-fs-marka: 20px; /* yalnız "UVA" kelime markası */ --uva-fs-display: 48px; /* bölüm başlığı TAVANI — pazarlama katmanı, uygulama başlıklarından ayrı bir kademe */ /* 20 Eyl — AFİŞ. Açılış kahramanı 96px'e çıktı (tavan; gerçek boyut clamp ile sütuna göre, 1440'ta ~69px). Ağırlık sonunda 600 — "300" ara karardı, bkz. ADR-021 §24 tipografi tarihçesi. O boyut merdivende yoktu ve `clamp()` içinde yazıldığı için tipografi kapısı da göremiyordu — kapı onarıldı, basamak buraya eklendi. Merdiven zaten GERÇEK KULLANIMDAN türetilmişti; bu da öyle. KAPSAM: yalnız açılış sayfasının h1'i. Uygulama içinde kullanılmaz; display (48) bölüm tavanı olarak kendi rolüne döndü. */ --uva-fs-afis: 96px; /* ── Spacing (4px base) ──────────────────────────────────── */ /* 17 Eyl: merdiven GERCEGE gore tamamlandi. Eski dizi 20/28/40 adimlarini atliyordu ama kod onlari 118 kez kullaniyordu; eksik adim, merdiveni kullanilamaz kilar. Numaralar kaydi, mevcut kullanimlar DEGERE gore yeniden eslendi (5=24 artik 6) — aksi halde her --uva-space-5 sessizce 24px'ten 20px'e duserdi. */ --uva-space-1: 4px; --uva-space-2: 8px; --uva-space-3: 12px; --uva-space-4: 16px; --uva-space-5: 20px; --uva-space-6: 24px; --uva-space-7: 28px; --uva-space-8: 32px; --uva-space-9: 40px; --uva-space-10: 48px; --uva-space-11: 64px; --uva-space-12: 96px; --uva-radius: 4px; /* ── Sayfa ölçüsü ────────────────────────────────────────── 22 Eyl. Bu iki değer AÇILIŞ sayfasında doğdu (`.uva-acilis`) ve orada bütün "yerleşim" şikâyetlerinin kökünü çözmüştü: bölümler `margin: 0 var(--uva-kenar)` ile duruyordu, yani ekran genişledikçe içerik geriliyordu. Uygulama tarafında AYNI arıza ölçüldü ve daha büyüktü: raysız sayfalarda `.uva-column` 1200px üstünde üç sütunlu ızgaraya giriyor, ama üçüncü sütun (ray) o sayfalarda YOK — 1440'ta 444px, 1920'de 664px hiçbir şey için rezerve ediliyordu. İçerik solda 680px'e sıkışmış, sağında bir o kadar boşluk duruyordu. Ölçü artık ORTAK: açılış ile uygulama aynı genişlikte durur. */ --uva-olcu: 1280px; --uva-kenar: clamp(20px, 5vw, 96px); /* Akan metin tavanı. Ölçü 1280 olunca bir paragraf 1280px uzayabilir; satır 90+ karaktere çıkar ve göz satır başını kaybeder. Kap geniş olabilir, SATIR olamaz. Kartlar/tablolar bu tavana tabi değildir. */ --uva-metin-olcu: 68ch; /* ── Çizim kademeleri ──────────────────────────────────── 20 Eyl. ÖLÇÜLDÜ: paletin ORTASI YOKTU. Kağıt zeminine göre kontrastlar card 1,12 · edge 1,32 · rule 2,08 — sonra boşluk — accent 6,06 · ink 13,87. Yani her şey ya neredeyse görünmez ya tam sesle konuşuyor; sayfayı taşıyan bir kütle yok. "Soluk" hissinin ölçülebilir karşılığı bu. TUZAK: referans aldığımız sitede çizgiler beyaz üstünde 1,45 ve 2,92:1'de duruyor — yani orada da fısıltı. Ama orada sayfayı tam renkli ekran görüntüleri taşıyor; fısıltı ancak bağıran bir şeyin yanında işe yarar. Bizde bağıran yok → aynı kontrastla çizim eklemek sayfayı DAHA ÇOK soldururdu. Bu yüzden ana çizim bandı 3:1 — bugün boş duran yere. Üç kademe, üçü de rule ile AYNI sıcak gri ekseninde (R>G>B, fark 14): */ --uva-cizim-fon: #C6C4B8; /* 1,51:1 — ortam sahnesi, başlık arkası */ --uva-cizim: #8C8A7E; /* 2,99:1 — VARSAYILAN: boş durum, basılı çizgi */ --uva-cizim-el: #777569; /* 3,99:1 — elle çekilen iz; basılıdan bir ton koyu */ /* 11 Eki — KURŞUN KALEM. Kalem karalamaları (cizim.js kalemIzi) kademenin üstünde: altı çizilen kelime, işaretlenen kutu metnin yanında ve metin kadar okunur olmalı. Mürekkepten bir ton açık, sıcak gri eksende. */ --uva-grafit: #34322C; /* Basılı çizginin kalınlığı TEK yerde. İkon dili 1,3 kullanıyor (16px kutuda); çizimler daha büyük kutuda yaşadığı için optik olarak aynı ağırlık 1,5 eder. */ --uva-cizim-kalinlik: 1.5; /* ── Elevation ───────────────────────────────────────────── One sheet lifted off a desk — a long soft shadow plus a tight contact shadow. The archive sheet gets an inset instead, so it reads as tucked underneath. */ --uva-shadow-card: 0 20px 44px -22px rgba(34, 33, 29, 0.34), 0 6px 18px rgba(34, 33, 29, 0.10), 0 2px 5px rgba(34, 33, 29, 0.07); /* 14 Eyl: ön kart yığından ayrılsın diye belirgin orta katman eklendi (0 8px 24px); arkadaki kağıtlar gölgesiz. Yığın hissi bu farktan gelir. */ --uva-shadow-card-wide: 0 26px 60px -26px rgba(34, 33, 29, 0.36), 0 8px 24px rgba(34, 33, 29, 0.11), 0 3px 6px rgba(34, 33, 29, 0.07); --uva-shadow-tuck: inset 0 6px 10px -8px rgba(34, 33, 29, 0.22); --uva-shadow-tuck-wide: inset 0 7px 12px -9px rgba(34, 33, 29, 0.22); /* 10 Eki: telefonda yapışkan alt çubuk. Kağıt kaydırılırken çubuğun ALTINDAN geçtiğini söyleyen yukarı bakan, kısa bir gölge. Kart gölgesiyle aynı mürekkep. */ --uva-shadow-bar: 0 -8px 20px -16px rgba(34, 33, 29, 0.32); /* ── Light pool ──────────────────────────────────────────── Built by subtracting from the surround, not by lightening the card: transparent at the card, darkening toward the edges. */ --uva-pool: radial-gradient(ellipse 62% 32% at 50% 42%, rgba(239, 238, 233, 0) 0%, rgba(178, 176, 167, 0.14) 64%, rgba(168, 166, 156, 0.34) 100%); --uva-pool-wide: radial-gradient(ellipse 44% 40% at 26% 46%, rgba(239, 238, 233, 0) 0%, rgba(178, 176, 167, 0.16) 60%, rgba(168, 166, 156, 0.44) 100%); /* 14 Eyl (sahibi + inceleme): sayfa-genişliğinde çıkarma havuzu geniş ekranda "leke" gibi okundu — lamba kartın üstünde durmalı, sayfanın değil. Yeni kurgu EKLEMELİ: masa zemini kağıttan bir ton koyu (--uva-desk), lamba kartın üstünde şeffafa sönen ışık lekesi (--uva-lamp). Sütunla birlikte hareket eder; kutu sınırı görünmez çünkü kenarında ışık sıfır. Eski --uva-pool* dursun (mobil ve geri dönüş için). */ --uva-desk: color-mix(in srgb, var(--uva-paper) 88%, #9C9A90); --uva-lamp: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 253, 0.92) 0%, rgba(255, 255, 253, 0.55) 30%, rgba(255, 255, 253, 0.18) 52%, rgba(255, 255, 253, 0) 70%); /* ── Paper grain ─────────────────────────────────────────── Sits on card and archive surfaces only, never behind a text block (it is an overlay layer with pointer-events: none). */ --uva-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E"); --uva-grain-opacity: 0.03; /* ── Selection ───────────────────────────────────────────── */ --uva-selection: rgba(168, 40, 28, 0.20); }