/* ============================================================ tokens.css — MODE Agency tasarım token'ları DESIGN.md §2'nin birebir uygulaması. Bu dosyada YALNIZCA custom property tanımları bulunur — tek bir bileşen kuralı bile yoktur. Kural şu: renk hiçbir yerde doğrudan yazılmaz; bölümler `data-act` ile kendi temasını bildirir, bileşenler de temanın --bg / --fg / --line değişkenlerini okur. Masthead'in açık perdenin üzerinden geçerken kendini tersine çevirebilmesi tam olarak bu yüzden mümkün. ============================================================ */ /* ------------------------------------------------------------ 1. Palet — ham renkler Doğrudan kullanılmaz; aşağıdaki perde (act) temaları üzerinden semantik isimlere bağlanır. ------------------------------------------------------------ */ :root { /* ink — tuval (siyaha yakın kademeler) */ --ink-900: #08080a; /* sayfa zemini */ --ink-800: #0c0c10; /* yükseltilmiş bant */ --ink-700: #111116; /* kart */ --ink-600: #16161c; /* kart hover */ --ink-500: #1f1f27; /* koyu zeminde saç teli çizgi */ /* bone — fildişi kademeler */ --bone-100: #fbf9f5; --bone-200: #f4f1ea; /* koyu zeminde ana metin */ --bone-300: #e8e3d8; /* açık perdede yükseltilmiş yüzey */ --bone-400: #d9d3c6; /* açık zeminde saç teli çizgi */ --mute-dark: #8b8994; /* ink üzerinde soluk metin */ --mute-light: #6a6660; /* bone üzerinde soluk metin */ /* signal — NADİR kullanılır. Yalnızca: hero'nun son display satırı, aktif/mevcut durum göstergeleri, focus ring, .btn--signal dolgusu ve hero canvas kenarları. Başka hiçbir yerde değil. */ --ember: #ff4b1f; --flare: #ff2d6f; --violet: #6d3af2; --signal-grad: linear-gradient(96deg, var(--ember) 0%, var(--flare) 46%, var(--violet) 100%); --signal-grad-soft: linear-gradient(96deg, rgba(255,75,31,.16), rgba(109,58,242,.16)); /* KÜÇÜK METİN ÜSTÜNDE KULLANILAN sinyal dolgusu. --signal-grad üzerinde beyaz etiket 3.35:1 (ember) / 3.58:1 (flare) veriyordu; 14px'lik birincil CTA etiketi ve 11.5px'lik chip/filter etiketleri WCAG 1.4.3'ü (4.5:1) geçmiyordu. Aynı renk ailesinin koyultulmuş kademeleri: beyazla 4.7:1 / 5.0:1 / 7.2:1. Büyük display tipografi (--t-mega hero satırı) 3:1 eşiğine tabi olduğu için orada canlı --signal-grad korunur. */ --signal-grad-ui: linear-gradient(96deg, #d63a12 0%, #d81a55 46%, #5c2ee0 100%); } /* ------------------------------------------------------------ 2. Perde (act) temaları — rengi ayarlamanın TEK yolu `` ve `` varsayılan olarak data-act="dark" taşır; her `.act` kendi temasını yeniden bildirebilir. ------------------------------------------------------------ */ [data-act="dark"] { --bg: var(--ink-900); --bg-raise: var(--ink-700); --bg-raise-2: var(--ink-600); --fg: var(--bone-200); --fg-strong: var(--bone-100); --mute: var(--mute-dark); --line: var(--ink-500); --line-soft: rgba(244,241,234,.09); } [data-act="light"] { --bg: var(--bone-200); --bg-raise: var(--bone-100); --bg-raise-2: var(--bone-300); --fg: var(--ink-900); --fg-strong: #000; --mute: var(--mute-light); --line: var(--bone-400); --line-soft: rgba(8,8,10,.10); } /* ------------------------------------------------------------ 3. Tipografi — yığın ve akışkan ölçek Fraunces variable olarak yüklenir; display başlıklar 'WONK' aksını kullanır (bkz. base.css → .u-display). Her eyebrow / indeks / etiket / sayaç --font-mono ile büyük harf ve --tr-mono harf aralığında yazılır. ------------------------------------------------------------ */ :root { --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --t-mono: 0.72rem; --t-body-s: 0.875rem; --t-body: 1rem; --t-body-l: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); --t-h4: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); --t-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); --t-h2: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem); --t-h1: clamp(2.9rem, 1.6rem + 6vw, 7rem); --t-mega: clamp(3.4rem, 0.8rem + 12vw, 13rem); --lh-mega: 0.86; --lh-tight: 0.98; --lh-snug: 1.12; --lh-body: 1.62; --tr-mono: 0.18em; /* mono etiketlerin harf aralığı */ } /* ------------------------------------------------------------ 4. Boşluk, yarıçap, hareket, katman Yarıçaplar eski siteden bilinçli olarak daha küçük (her yerde 28px yerine en fazla 26px) — keskin köşeler daha editoryal okunuyor. ------------------------------------------------------------ */ :root { --pad-shell: clamp(1.25rem, 4vw, 4rem); --w-shell: 1440px; --w-wide: 1760px; --w-text: 68ch; --gap: clamp(1rem, 2vw, 2rem); --act-pad: clamp(5rem, 4rem + 7vw, 11rem); /* bölüm padding-block */ --act-pad-tight: clamp(3rem, 2.5rem + 3vw, 5.5rem); --r-xs: 4px; --r-sm: 8px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.76,0,.24,1); --d-fast: .22s; --d-base: .42s; --d-slow: .8s; --d-curtain: .62s; --z-noise: 5; --z-masthead: 100; --z-mega: 90; --z-cursor: 9998; --z-curtain: 9000; --z-preloader: 9999; }