/* * JunkerClub tasarım tokenları v2 — spec bölüm 10 + MARKA-KITI-v12. * Rol aksanı: varsayılan müşteri yeşili; body.jr-company altında firma turuncusu. * Bu değişkenler hem siteyi hem (Faz 5) sosyal şablonları besler. */ :root { /* Marka renkleri */ --jr-green-start: #0f9d77; --jr-green-end: #1ac28e; --jr-orange-start: #f46b45; --jr-orange-end: #eb3349; /* Pay & Unlock */ --jr-pay-1: #ff8a00; --jr-pay-2: #ff5e3a; --jr-pay-3: #ff2d55; --jr-pay-gradient: linear-gradient(135deg, var(--jr-pay-1), var(--jr-pay-2), var(--jr-pay-3)); /* Nötrler */ --jr-ink: #0f172a; --jr-ink-soft: #1e293b; --jr-slate: #475569; --jr-slate-light: #94a3b8; --jr-soft: #f1f5f9; --jr-softer: #f8fafc; --jr-line: #e2e8f0; --jr-line-soft: #eef2f7; --jr-white: #ffffff; /* yüzey/kart rengi */ --jr-bg: #ffffff; /* sayfa zemini — gece modunda yüzeyden ayrışır */ /* Footer */ --jr-footer-bg: #0b1220; --jr-footer-bg-2: #101a30; --jr-footer-text: #cbd5e1; /* Rol aksanı (müşteri varsayılanı) */ --jr-accent-start: var(--jr-green-start); --jr-accent-end: var(--jr-green-end); --jr-accent-gradient: linear-gradient(135deg, var(--jr-accent-start), var(--jr-accent-end)); --jr-accent-soft: rgba(15, 157, 119, 0.09); --jr-accent-ring: rgba(26, 194, 142, 0.35); /* Tipografi — hızlı system stack */ --jr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --jr-fs-xs: 12px; --jr-fs-sm: 14px; --jr-fs-md: 16px; --jr-fs-lg: 18px; --jr-fs-xl: clamp(22px, 3vw, 28px); --jr-fs-hero: clamp(34px, 5.4vw, 58px); /* Ölçüler */ --jr-radius: 14px; --jr-radius-lg: 22px; --jr-radius-sm: 10px; --jr-radius-pill: 999px; --jr-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --jr-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); --jr-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.14); --jr-shadow-accent: 0 10px 26px rgba(15, 157, 119, 0.28); --jr-container: 1160px; --jr-container-narrow: 720px; --jr-app-bar-h: 64px; --jr-header-h: 72px; /* sticky header + topbar — hero viewport hesabında düşülür */ --jr-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Logo "Club" gradyanı — markanın biraz daha açık yeşili (madde 1) */ :root { --jr-logo-gradient: linear-gradient(135deg, #12b487, #3adfa9); } body.jr-company { --jr-accent-start: var(--jr-orange-start); --jr-accent-end: var(--jr-orange-end); /* Gradyan açıkça yeniden tanımlanır — firma girişinde TÜM butonlar turuncu (madde 5) */ --jr-accent-gradient: linear-gradient(135deg, var(--jr-orange-start), var(--jr-orange-end)); --jr-accent-soft: rgba(244, 107, 69, 0.10); --jr-accent-ring: rgba(244, 107, 69, 0.35); --jr-shadow-accent: 0 10px 26px rgba(235, 51, 73, 0.26); --jr-logo-gradient: linear-gradient(135deg, var(--jr-orange-start), var(--jr-orange-end)); } /* Pay & Unlock nabız animasyonu (spec bölüm 10) */ @keyframes jr-pay-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.45); } 50% { box-shadow: 0 0 0 12px rgba(255, 45, 85, 0); } } @keyframes jr-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes jr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ============ Gece modu (html.jr-dark) ============ Marka renkleri (yeşil/turuncu) sabittir; yalnızca nötrler ve gölgeler değişir. Yön: cesur/glow — derin lacivert zemin + aksan renkli parlama gölgeleri. Sınıf 'e inline head script ile eklenir (FOUC önleme). */ html.jr-dark { color-scheme: dark; /* Zemin + yüzey — zemin daha koyu ki kartlar derinlik kazansın */ --jr-bg: #070c16; --jr-white: #0e1626; --jr-soft: #16233a; --jr-softer: #0b1220; --jr-line: #223046; --jr-line-soft: #1a2436; /* Metin nötrleri — tersine çevrilmiş */ --jr-ink: #f1f5f9; --jr-ink-soft: #e2e8f0; --jr-slate: #a5b4c8; --jr-slate-light: #64748b; /* Aksan yumuşakları — koyu zeminde biraz daha belirgin */ --jr-accent-soft: rgba(26, 194, 142, 0.14); --jr-accent-ring: rgba(26, 194, 142, 0.30); /* Gölgeler — glow diline geçer */ --jr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --jr-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); --jr-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.65); --jr-shadow-accent: 0 0 26px rgba(26, 194, 142, 0.35); } /* Gece + firma: turuncu glow ve yumuşaklar */ html.jr-dark body.jr-company { --jr-accent-soft: rgba(244, 107, 69, 0.16); --jr-accent-ring: rgba(244, 107, 69, 0.32); --jr-shadow-accent: 0 0 26px rgba(235, 51, 73, 0.38); }