/* ============================================================ * Sportal — Tasarım Token'ları (FAZ 2) * ------------------------------------------------------------ * FBPortal Tema v2 ile UYUMLU yan-namespace. Mevcut --fb-* * token'larını KIRMAZ, sadece Sportal-özel bileşenlerin ihtiyacı * olan ek katmanı ekler. * * İsim konvansiyonu: * --sportal-* tema-aware (light/dark'a göre değişir) * --sportal-radius-* tema-bağımsız ölçü * --sportal-shadow-* tema-aware gölge * --sportal-container-* tema-bağımsız genişlik * * Fallback zinciri (Jannah'tan esinlenmiş, Theme v2 üstüne kurulu): * 1. --sportal-primary → light için #5424fb mor-mavi (Jannah imza) * 2. --fb-neon (Theme v2) → #0066a3 light / #00d4ff dark (yedek) * 3. Hardcoded → acil fallback * * StyleService admin ayarları değişince buraya değil; üst katmana * `storage/cache/sportal_custom_{hash}_{tema}.css` yazar ve bu * dosya cascade'te SONRA yüklenir → override eder. * * Sunai (Frontend/Sunum) — Sportal FAZ 2 Task #1 * ============================================================ */ @layer sportal-tokens { /* ========================================================== LIGHT (varsayılan, :root) Jannah'ın temiz-beyaz magazin estetiği + FBPortal nötr palet ========================================================== */ :root { /* -------- Renk paleti (light) -------- */ --sportal-primary: #5424fb; /* Jannah mor-mavi imzası */ --sportal-primary-fg: #ffffff; --sportal-primary-soft: rgba(84, 36, 251, 0.10); --sportal-primary-ring: rgba(84, 36, 251, 0.35); --sportal-accent: #00d4ff; /* FBPortal cyan, Sportal'da da korunur */ --sportal-accent-fg: #0b2d47; --sportal-accent-soft: rgba(0, 212, 255, 0.12); /* -------- Metin -------- */ --sportal-text: #1a202c; --sportal-text-muted: #64748b; --sportal-text-inverse: #ffffff; /* -------- Zemin / yüzey -------- */ --sportal-bg: #ffffff; --sportal-bg-alt: #f7fafc; --sportal-bg-deep: #edf0f5; /* section-dark-skin için light'ta yumuşak */ --sportal-border: #e2e8f0; --sportal-border-strong: #cbd5e1; /* -------- Glassmorphism (Sportal kart standardı) -------- */ --sportal-cam: rgba(255, 255, 255, 0.72); --sportal-cam-soft: rgba(255, 255, 255, 0.55); --sportal-cam-koyu: rgba(15, 23, 42, 0.62); --sportal-cam-kenar: rgba(255, 255, 255, 0.55); --sportal-cam-blur: 12px; --sportal-cam-blur-lg: 16px; /* -------- Gölge (light — ince ve soft) -------- */ --sportal-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05); --sportal-shadow: 0 4px 14px rgba(17, 24, 39, 0.08), 0 1px 3px rgba(17, 24, 39, 0.04); --sportal-shadow-lg: 0 18px 40px rgba(17, 24, 39, 0.14), 0 4px 12px rgba(17, 24, 39, 0.06); --sportal-shadow-primary: 0 8px 28px rgba(84, 36, 251, 0.22); /* -------- Tipografi -------- */ --sportal-font-baslik: 'Inter', 'Figtree', 'Manrope', -apple-system, system-ui, sans-serif; --sportal-font-metin: 'Inter', 'Figtree', -apple-system, system-ui, sans-serif; --sportal-font-kod: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Fluid type scale — 1.25 (major third) oranı, clamp ile akışkan */ --sportal-scale-base: 1rem; --sportal-scale-ratio: 1.25; /* Heading token'ları — clamp(min, pref, max) */ --sportal-h1: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); /* ~30→44 px */ --sportal-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); /* ~24→34 px */ --sportal-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem); /* ~20→26 px */ --sportal-h4: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem); --sportal-body: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); --sportal-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --sportal-leading: 1.6; --sportal-leading-baslik: 1.25; --sportal-tracking-baslik: -0.015em; /* -------- Boşluk (spacing scale — 4px baz) -------- */ --sportal-bosluk-1: 0.25rem; /* 4 px */ --sportal-bosluk-2: 0.5rem; /* 8 px */ --sportal-bosluk-3: 0.75rem; /* 12 px */ --sportal-bosluk-4: 1rem; /* 16 px */ --sportal-bosluk-5: 1.25rem; --sportal-bosluk-6: 1.5rem; /* 24 px */ --sportal-bosluk-8: 2rem; /* 32 px */ --sportal-bosluk-10: 2.5rem; --sportal-bosluk-12: 3rem; /* 48 px */ --sportal-bosluk-16: 4rem; /* 64 px */ /* Section yatay/düşey padding — Jannah'tan esinlenmiş fluid */ --sportal-section-pad-y: clamp(2rem, 4vw, 4rem); --sportal-section-gap: clamp(1rem, 2vw, 2rem); /* -------- Yarıçap -------- */ --sportal-radius-xs: 4px; --sportal-radius-sm: 6px; --sportal-radius: 10px; --sportal-radius-lg: 16px; --sportal-radius-xl: 24px; --sportal-radius-full: 9999px; /* -------- Container genişlikleri (Jannah main 1170 / single 850) -------- */ --sportal-container: 1170px; --sportal-container-sm: 850px; /* single post content */ --sportal-container-lg: 1440px; /* wide layouts */ /* -------- Geçiş -------- */ --sportal-gecis-hizli: 120ms cubic-bezier(.4, 0, .2, 1); --sportal-gecis: 220ms cubic-bezier(.4, 0, .2, 1); --sportal-gecis-yavas: 360ms cubic-bezier(.16, 1, .3, 1); --sportal-ease-smooth: cubic-bezier(.16, 1, .3, 1); /* -------- Z-index (Theme v2 --fb-z-* ile paralel) -------- */ --sportal-z-section: 1; --sportal-z-sticky: 10; --sportal-z-overlay: 40; /* -------- Title underline (10 stil için ortak) -------- */ --sportal-title-line-w: 3rem; --sportal-title-line-h: 3px; } /* ========================================================== DARK — :root[data-theme="dark"] (Theme v2 attribute uyumlu) Jannah'ın koyu magazin estetiği + FBPortal deep-space ========================================================== */ :root[data-theme="dark"], html.dark, html[data-theme="dark"] { /* -------- Renk paleti (dark) -------- */ --sportal-primary: #7c55ff; /* dark'ta biraz daha parlak mor-mavi */ --sportal-primary-fg: #ffffff; --sportal-primary-soft: rgba(124, 85, 255, 0.18); --sportal-primary-ring: rgba(124, 85, 255, 0.55); --sportal-accent: #00d4ff; --sportal-accent-fg: #0a1a22; --sportal-accent-soft: rgba(0, 212, 255, 0.18); /* -------- Metin -------- */ --sportal-text: #e8e8ec; --sportal-text-muted: #9a9aae; --sportal-text-inverse: #0a0a0f; /* -------- Zemin / yüzey — Jannah dark bg #1f2024 refleksiyonu -------- */ --sportal-bg: #0a0a0f; /* FBPortal deep-space korunur */ --sportal-bg-alt: #12121a; --sportal-bg-deep: #1f2024; /* Jannah'ın "dark-skin" section bg'si */ --sportal-border: rgba(255, 255, 255, 0.10); --sportal-border-strong: rgba(255, 255, 255, 0.18); /* -------- Glassmorphism (dark — daha karanlık, daha bulanık) -------- */ --sportal-cam: rgba(255, 255, 255, 0.04); --sportal-cam-soft: rgba(255, 255, 255, 0.02); --sportal-cam-koyu: rgba(10, 10, 15, 0.78); --sportal-cam-kenar: rgba(255, 255, 255, 0.08); /* -------- Gölge (dark — daha derin, daha yayvan) -------- */ --sportal-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --sportal-shadow: 0 4px 14px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.32); --sportal-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.38); --sportal-shadow-primary: 0 8px 28px rgba(124, 85, 255, 0.32); } /* ========================================================== Reduced motion — Sportal geçişleri sıfıra yaklaştırır (Theme v2 input.css zaten *'a uyguluyor; burada extra gardiyan) ========================================================== */ @media (prefers-reduced-motion: reduce) { :root { --sportal-gecis-hizli: 0.01ms; --sportal-gecis: 0.01ms; --sportal-gecis-yavas: 0.01ms; } } }