/* ============================================================ KitKat WEB — merkez token dosyası Kardeş kit: Desktop\kitkat (iOS). Bu dosya WEB için ayrı yazıldı; iOS'a özgü olanlar (44px dokunma tabanı, Liquid Glass, safe-area) BURAYA GİRMEZ. Ortak felsefe: renk/font/boşluk SADECE token. synced: kitkat v1.8.0 · anti-slop core v0.1 Sürüm geçmişi + kullanan siteler: README.md ============================================================ */ :root { --kw-version: "0.1.0"; /* ---- Tipografi ---------------------------------------------------- 3 aile tavanı (gate 37): display + ui + mono (sadece kod/kimlik dizisi). Ölçek akışkan: clamp(min, tercih, max) — ara kırılma noktası yok. */ --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Unbounded", var(--font-ui); --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; --fs-micro: 0.6875rem; /* 11px — mono etiket/damga */ --fs-tiny: 0.75rem; /* 12px */ --fs-small: 0.875rem; /* 14px */ --fs-body: 1rem; /* 16px — web tabanı */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); --fs-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); --fs-h3: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem); --fs-h2: clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem); --fs-h1: clamp(2.25rem, 1.6rem + 3.1vw, 4.5rem); --fs-mega: clamp(3rem, 1.4rem + 7vw, 7.5rem); /* wordmark / tek sayı */ --lh-tight: 1.04; /* display; all-caps 1.0 altına İNMEZ (gate 55) */ --lh-snug: 1.2; --lh-body: 1.55; --lh-loose: 1.7; --tr-tight: -0.02em; --tr-caps: 0.08em; /* mono/all-caps etiket */ /* ---- Boşluk: 4px ölçek, isimsiz değer YOK (gate 24) ---- */ --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; --sp-10: 128px; --sec-y: clamp(48px, 7vw, 112px); /* bölüm dikey ritmi */ --gutter: clamp(16px, 4vw, 40px); /* sayfa kenar boşluğu */ /* ---- Ölçüler ---- */ --w-prose: 68ch; /* 45–75ch bandı (gate 25) */ --w-content: 1180px; --w-wide: 1400px; --ctl-sm: 34px; --ctl-md: 42px; /* input ve buton ORTAK taban (gate 39) */ --ctl-lg: 52px; --tap-min: 40px; /* web: işaretçi+dokunma karışık; iOS'taki 44 değil */ /* ---- Köşe: sert kütle dili. Blob yok; kapsül sadece rozet. ---- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; --chamfer: 10px; /* pahlı köşe kesimi (.kw-chamfer) */ /* ---- Kenar & yükselti ---- */ --focus-ring: 3px; /* outline kalınlığı — border DEĞİL (gate 39) */ /* ---- STİL KATMANI (data-style) — varsayılan "beton": gölge değil ÇİZGİ taşır. Komponentler bu değişkenleri okur, sabit değer yazmaz; böylece tek satır stil değişimi tüm siteyi başka bir dile çevirir. ---- */ --btn-shadow: 0 2px 0 var(--btn-line); --btn-shadow-hover: 0 2px 0 var(--btn-line); --btn-press: 2px; /* basınca inme miktarı */ --btn-lift: 0px; /* hover'da kalkma (temiz stilde 1px) */ --btn-radius: var(--r-sm); --panel-radius: var(--r-md); --panel-shadow: none; --panel-border: 1px solid var(--c-line); --input-radius: var(--r-sm); --tick-display: block; /* köşe işaretleri (teknik çizim hissi) */ --hero-glow: none; /* ---- Hareket ---- */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 340ms; --dur-4: 600ms; --ease-out: cubic-bezier(.2, .8, .3, 1); --ease-in-out: cubic-bezier(.6, 0, .2, 1); /* overshoot SADECE fiziksel etkileşimde — UI state geçişinde yasak (gate 12) */ --ease-throw: cubic-bezier(.34, 1.4, .64, 1); /* ---- Gren dokusu: beton yüzeyin malzemesi (dekor değil) ---- */ --grain-opacity: .05; } /* ---- STİL: temiz (sign.bnj.app dili) — yumuşak kâğıt yüzey, geniş köşe, renkli parıltılı birincil buton, gren yok, köşe işareti yok ---- */ :root[data-style="temiz"] { --font-display: "Inter", var(--font-ui); --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tr-tight: -0.025em; --lh-tight: 1.08; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --grain-opacity: 0; /* temiz dilde bölüm ritmi biraz sıkı: boşluk çok olunca sayfa "yavan" okunuyor */ --sec-y: clamp(40px, 5.2vw, 84px); --btn-shadow: 0 7px 18px color-mix(in oklab, var(--btn-line) 34%, transparent); --btn-shadow-hover: 0 10px 23px color-mix(in oklab, var(--btn-line) 44%, transparent); --btn-press: 0px; --btn-lift: 1px; --btn-radius: var(--r-sm); --panel-radius: var(--r-lg); --panel-shadow: 0 18px 55px var(--c-shadow); --panel-border: 1px solid var(--c-line); --input-radius: var(--r-sm); --tick-display: none; --hero-glow: radial-gradient(60% 55% at 50% 0%, color-mix(in oklab, var(--c-accent) 9%, transparent) 0%, transparent 70%); } /* ============================================================ RENK PAKETLERİ — data-pack ile seçilir, data-mode ile mod zorlanır. Kural: her nötrde en az .006 chroma (gate 22) · saf #000/#fff YOK (gate 7) · mor-mavi gradyan YOK (gate 2) · accent viewport'un ~%5'ini geçmez (gate 23) ============================================================ */ /* ---- BETON (varsayılan) — ham beton + güvenlik turuncusu ---- */ :root, :root[data-pack="beton"] { --c-canvas: oklch(0.183 0.008 96); --c-surface: oklch(0.223 0.009 96); --c-surface-2: oklch(0.268 0.010 96); --c-line: oklch(0.330 0.012 96); --c-line-strong: oklch(0.430 0.014 96); --c-ink: oklch(0.960 0.006 96); --c-ink-2: oklch(0.790 0.009 96); --c-ink-3: oklch(0.640 0.011 96); --c-accent: oklch(0.780 0.176 62); --c-accent-2: oklch(0.660 0.150 44); --c-accent-ink: oklch(0.200 0.030 62); /* accent dolgunun ÜSTÜNDEKİ metin */ --c-shadow: oklch(0.10 0.01 96 / .55); --c-ok: oklch(0.800 0.150 150); --c-warn: oklch(0.840 0.150 88); --c-err: oklch(0.680 0.185 27); color-scheme: dark; } :root[data-pack="beton"][data-mode="light"] { --c-canvas: oklch(0.945 0.007 96); --c-surface: oklch(0.985 0.005 96); --c-surface-2: oklch(0.910 0.009 96); --c-line: oklch(0.800 0.012 96); --c-line-strong: oklch(0.660 0.016 96); --c-ink: oklch(0.235 0.012 96); --c-ink-2: oklch(0.420 0.012 96); --c-ink-3: oklch(0.485 0.012 96); --c-accent: oklch(0.555 0.170 45); --c-accent-2: oklch(0.520 0.160 38); --c-accent-ink: oklch(0.985 0.010 62); --c-shadow: oklch(0.40 0.02 96 / .18); --c-ok: oklch(0.500 0.140 150); --c-warn: oklch(0.540 0.140 78); --c-err: oklch(0.510 0.190 27); color-scheme: light; } /* ---- KAĞIT — sıcak kâğıt + mürekkep + tek kırmızı ---- */ :root[data-pack="kagit"] { --c-canvas: oklch(0.955 0.012 84); --c-surface: oklch(0.990 0.008 84); --c-surface-2: oklch(0.920 0.014 84); --c-line: oklch(0.810 0.018 84); --c-line-strong: oklch(0.640 0.022 84); --c-ink: oklch(0.240 0.018 84); --c-ink-2: oklch(0.420 0.016 84); --c-ink-3: oklch(0.505 0.014 84); --c-accent: oklch(0.545 0.192 27); --c-accent-2: oklch(0.470 0.150 20); --c-accent-ink: oklch(0.985 0.008 84); --c-shadow: oklch(0.42 0.03 84 / .16); --c-ok: oklch(0.490 0.130 150); --c-warn: oklch(0.540 0.140 78); --c-err: oklch(0.510 0.190 27); color-scheme: light; } :root[data-pack="kagit"][data-mode="dark"] { --c-canvas: oklch(0.205 0.014 84); --c-surface: oklch(0.245 0.015 84); --c-surface-2: oklch(0.290 0.016 84); --c-line: oklch(0.360 0.018 84); --c-line-strong: oklch(0.460 0.020 84); --c-ink: oklch(0.955 0.010 84); --c-ink-2: oklch(0.780 0.012 84); --c-ink-3: oklch(0.672 0.014 84); --c-accent: oklch(0.700 0.170 30); --c-accent-2: oklch(0.620 0.150 22); --c-accent-ink: oklch(0.200 0.030 30); --c-shadow: oklch(0.10 0.01 84 / .55); --c-ok: oklch(0.800 0.140 150); --c-warn: oklch(0.840 0.150 88); --c-err: oklch(0.680 0.185 27); color-scheme: dark; } /* ---- TEMİZ — sign.bnj.app paleti: kâğıt beyaz + lacivert mürekkep + kırmızı ---- */ :root[data-pack="temiz"] { --c-canvas: oklch(0.977 0.003 250); /* #f7f8fa */ --c-surface: oklch(1.000 0.000 250); /* #ffffff */ --c-surface-2: oklch(0.968 0.010 40); /* kırmızıya çalan yumuşak zemin */ --c-line: oklch(0.905 0.010 250); /* #dfe5ed */ --c-line-strong: oklch(0.808 0.016 250); --c-ink: oklch(0.285 0.048 258); /* #14223a */ --c-ink-2: oklch(0.535 0.024 258); /* #667085 */ --c-ink-3: oklch(0.545 0.023 258); --c-accent: oklch(0.567 0.240 32); /* #eb1000 */ --c-accent-2: oklch(0.487 0.210 32); /* #b80c00 */ --c-accent-ink: oklch(1.000 0.000 32); --c-shadow: oklch(0.35 0.03 258 / .10); --c-ok: oklch(0.520 0.110 165); --c-warn: oklch(0.560 0.140 78); --c-err: oklch(0.520 0.190 27); color-scheme: light; } :root[data-pack="temiz"][data-mode="dark"] { --c-canvas: oklch(0.208 0.020 258); --c-surface: oklch(0.248 0.022 258); --c-surface-2: oklch(0.292 0.026 30); --c-line: oklch(0.352 0.024 258); --c-line-strong: oklch(0.452 0.028 258); --c-ink: oklch(0.968 0.008 258); --c-ink-2: oklch(0.790 0.014 258); --c-ink-3: oklch(0.672 0.018 258); --c-accent: oklch(0.575 0.230 32); --c-accent-2: oklch(0.505 0.200 32); --c-accent-ink: oklch(1.000 0.000 32); --c-shadow: oklch(0.08 0.02 258 / .55); --c-ok: oklch(0.800 0.140 165); --c-warn: oklch(0.840 0.150 88); --c-err: oklch(0.680 0.185 27); color-scheme: dark; } /* ---- MÜREKKEP — koyu mavi-gri kütle + camgöbeği sinyal ---- */ :root[data-pack="murekkep"] { --c-canvas: oklch(0.190 0.020 248); --c-surface: oklch(0.232 0.024 248); --c-surface-2: oklch(0.278 0.026 248); --c-line: oklch(0.340 0.030 248); --c-line-strong: oklch(0.440 0.034 248); --c-ink: oklch(0.965 0.008 248); --c-ink-2: oklch(0.790 0.014 248); --c-ink-3: oklch(0.668 0.018 248); --c-accent: oklch(0.820 0.150 196); --c-accent-2: oklch(0.720 0.140 214); --c-accent-ink: oklch(0.200 0.030 220); --c-shadow: oklch(0.10 0.02 248 / .60); --c-ok: oklch(0.810 0.150 155); --c-warn: oklch(0.845 0.150 88); --c-err: oklch(0.690 0.185 25); color-scheme: dark; } :root[data-pack="murekkep"][data-mode="light"] { --c-canvas: oklch(0.950 0.010 248); --c-surface: oklch(0.988 0.006 248); --c-surface-2: oklch(0.910 0.014 248); --c-line: oklch(0.800 0.018 248); --c-line-strong: oklch(0.640 0.024 248); --c-ink: oklch(0.240 0.022 248); --c-ink-2: oklch(0.420 0.020 248); --c-ink-3: oklch(0.500 0.018 248); --c-accent: oklch(0.500 0.115 214); --c-accent-2: oklch(0.450 0.110 232); --c-accent-ink: oklch(0.985 0.006 214); --c-shadow: oklch(0.40 0.03 248 / .18); --c-ok: oklch(0.500 0.130 155); --c-warn: oklch(0.540 0.140 78); --c-err: oklch(0.510 0.190 25); color-scheme: light; } /* Sistem tercihi açık moddaysa ve mod zorlanmamışsa: varsayılan paket açılır */ @media (prefers-color-scheme: light) { :root:not([data-mode]):not([data-pack]), :root[data-pack="beton"]:not([data-mode]) { --c-canvas: oklch(0.945 0.007 96); --c-surface: oklch(0.985 0.005 96); --c-surface-2: oklch(0.910 0.009 96); --c-line: oklch(0.800 0.012 96); --c-line-strong: oklch(0.660 0.016 96); --c-ink: oklch(0.235 0.012 96); --c-ink-2: oklch(0.420 0.012 96); --c-ink-3: oklch(0.485 0.012 96); --c-accent: oklch(0.555 0.170 45); --c-accent-2: oklch(0.520 0.160 38); --c-accent-ink: oklch(0.985 0.010 62); --c-shadow: oklch(0.40 0.02 96 / .18); --c-ok: oklch(0.500 0.140 150); --c-warn: oklch(0.540 0.140 78); --c-err: oklch(0.510 0.190 27); color-scheme: light; } } /* Yüksek kontrast isteyen kullanıcı: çizgi ve ikincil metin sertleşir */ @media (prefers-contrast: more) { :root { --c-line: var(--c-line-strong); --c-ink-3: var(--c-ink-2); } }