/* ============================================================ LX DESIGN SYSTEM — TOKENS Liman Yazılım | Maritime Deep Tech Single source of truth — tüm değerler buradan beslenir. ============================================================ */ :root { /* ---------------------------------------------------------- COLOR — SURFACE (5 derinlik tonu, dark-only theme) "abyss" en derin, "raised" en yüksek (kart/modal yüzeyi) ---------------------------------------------------------- */ --lx-surface-abyss: #02060f; --lx-surface-deep: #050b1a; --lx-surface-base: #0a1428; --lx-surface-elevated: #111e3b; --lx-surface-raised: #1a2a4f; /* ---------------------------------------------------------- COLOR — PRIMARY (Liman blue spectrum, 11-stop) 50–200: light tints (text on dark) 500–600: brand canonical (#2563eb) 800–950: deep brand (footer, page-holder) ---------------------------------------------------------- */ --lx-color-primary-50: #ecf3ff; --lx-color-primary-100: #d9e6ff; --lx-color-primary-200: #b0d0ff; --lx-color-primary-300: #82b5ff; --lx-color-primary-400: #4d8eff; --lx-color-primary-500: #3b82f6; --lx-color-primary-600: #2563eb; /* CANONICAL BRAND */ --lx-color-primary-700: #1d4ed8; --lx-color-primary-800: #1e40af; /* footer bg */ --lx-color-primary-900: #1e3a8a; --lx-color-primary-950: #0f2167; /* page-holder bg */ /* Aliases for ergonomics */ --lx-color-primary: var(--lx-color-primary-600); --lx-color-primary-soft: var(--lx-color-primary-200); --lx-color-primary-deep: var(--lx-color-primary-900); /* ---------------------------------------------------------- COLOR — GLOW (biyolüminesans cyan accent) Sadece accent / hover glow / data-vis için kullan. Asla body text için kullanma. ---------------------------------------------------------- */ --lx-color-glow: #50e3ff; --lx-color-glow-soft: #7defff; --lx-color-glow-deep: #0fb8e0; /* ---------------------------------------------------------- COLOR — NEUTRAL (cool, blue-tinted; saf gri değil) ---------------------------------------------------------- */ --lx-neutral-50: #f4f7fb; --lx-neutral-100: #e3eaf5; --lx-neutral-200: #c5d2e3; --lx-neutral-300: #94a3b8; --lx-neutral-400: #6b7d96; --lx-neutral-500: #4d5d75; --lx-neutral-600: #364259; --lx-neutral-700: #232f44; --lx-neutral-800: #16203a; --lx-neutral-900: #0a1224; --lx-neutral-950: #050a18; /* ---------------------------------------------------------- COLOR — SEMANTIC ---------------------------------------------------------- */ --lx-color-success: #4ade80; --lx-color-warn: #fbbf24; --lx-color-danger: #f43f5e; --lx-color-info: var(--lx-color-glow); /* ---------------------------------------------------------- COLOR — PRESERVED (karakteristik mevcut öğeler) Neon-border swiper turuncu→mavi gradyanı korunacak. ---------------------------------------------------------- */ --lx-color-neon-orange: #ff6f0e; --lx-color-neon-amber: #ff8c00; --lx-color-neon-blue: #3056d3; --lx-color-neon-indigo: #173178; /* ---------------------------------------------------------- TEXT (token aliases — tüm view'larda bunları kullan) ---------------------------------------------------------- */ --lx-text-primary: var(--lx-neutral-50); --lx-text-secondary: var(--lx-neutral-200); --lx-text-tertiary: var(--lx-neutral-300); --lx-text-muted: var(--lx-neutral-400); --lx-text-link: var(--lx-color-primary-300); --lx-text-link-hover:var(--lx-color-glow); --lx-text-inverse: var(--lx-surface-abyss); /* ---------------------------------------------------------- BORDER ---------------------------------------------------------- */ --lx-border-subtle: rgba(148, 163, 184, 0.10); --lx-border-base: rgba(148, 163, 184, 0.18); --lx-border-strong: rgba(148, 163, 184, 0.30); --lx-border-brand: rgba(59, 130, 246, 0.45); --lx-border-glow: rgba(80, 227, 255, 0.55); /* ---------------------------------------------------------- TYPOGRAPHY — FONT FAMILIES (single-family system) Mona Sans tek font olarak hem display hem body. Variable axis: wght 200..900 + wdth 75..125 — display'de hafif wide kullanılabilir. Mono: system mono stack (ui-monospace → JetBrains/Fira/Consolas) ---------------------------------------------------------- */ --lx-font-display: 'Mona Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lx-font-body: 'Mona Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lx-font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace; /* --lx-font-game: 'Press Start 2P', 'Courier New', monospace; // snake oyunu kullanım dışı */ /* ---------------------------------------------------------- TYPOGRAPHY — TYPE SCALE (Modular 1.25 / Major Third) Base = 16px. Mobile-first; heading'ler clamp() ile. ---------------------------------------------------------- */ --lx-text-2xs: 0.6875rem; /* 11px — micro labels */ --lx-text-xs: 0.75rem; /* 12px */ --lx-text-sm: 0.875rem; /* 14px */ --lx-text-base: 1rem; /* 16px */ --lx-text-md: 1.125rem; /* 18px — body large */ --lx-text-lg: 1.25rem; /* 20px */ --lx-text-xl: 1.5rem; /* 24px */ --lx-text-2xl: 1.875rem; /* 30px */ --lx-text-3xl: 2.25rem; /* 36px */ --lx-text-4xl: 3rem; /* 48px */ --lx-text-5xl: 3.75rem; /* 60px */ --lx-text-6xl: 4.5rem; /* 72px */ --lx-text-7xl: 6rem; /* 96px */ /* Fluid heading sizes (responsive clamp) */ --lx-text-h1: clamp(2.5rem, 4vw + 1rem, 5rem); /* 40 → 80 */ --lx-text-h2: clamp(2rem, 3vw + 1rem, 3.75rem); /* 32 → 60 */ --lx-text-h3: clamp(1.5rem, 2vw + 0.75rem, 2.5rem); /* 24 → 40 */ --lx-text-h4: clamp(1.25rem, 1.2vw + 0.75rem, 1.75rem); --lx-text-h5: clamp(1.125rem, 0.6vw + 0.875rem, 1.375rem); --lx-text-h6: 1.125rem; /* Display (Hero — extreme size) */ --lx-text-display: clamp(3rem, 6vw + 1rem, 7rem); /* ---------------------------------------------------------- TYPOGRAPHY — WEIGHT, LINE-HEIGHT, LETTER-SPACING ---------------------------------------------------------- */ --lx-font-weight-light: 300; --lx-font-weight-normal: 400; --lx-font-weight-medium: 500; --lx-font-weight-semibold: 600; --lx-font-weight-bold: 700; --lx-font-weight-black: 800; --lx-leading-none: 1; --lx-leading-tight: 1.15; --lx-leading-snug: 1.3; --lx-leading-normal: 1.5; --lx-leading-relaxed: 1.65; --lx-leading-loose: 1.85; --lx-tracking-tightest: -0.04em; --lx-tracking-tighter: -0.025em; --lx-tracking-tight: -0.015em; --lx-tracking-normal: 0; --lx-tracking-wide: 0.025em; --lx-tracking-wider: 0.05em; --lx-tracking-widest: 0.12em; /* eyebrow / labels */ /* ---------------------------------------------------------- SPACING (8px grid + 4px sub-step) ---------------------------------------------------------- */ --lx-space-0: 0; --lx-space-px: 1px; --lx-space-0_5: 2px; --lx-space-1: 4px; --lx-space-2: 8px; --lx-space-3: 12px; --lx-space-4: 16px; --lx-space-5: 20px; --lx-space-6: 24px; --lx-space-7: 28px; --lx-space-8: 32px; --lx-space-10: 40px; --lx-space-12: 48px; --lx-space-14: 56px; --lx-space-16: 64px; --lx-space-20: 80px; --lx-space-24: 96px; --lx-space-32: 128px; --lx-space-40: 160px; --lx-space-48: 192px; --lx-space-64: 256px; /* Section vertical rhythm */ --lx-section-y-sm: var(--lx-space-12); --lx-section-y-md: var(--lx-space-20); --lx-section-y-lg: var(--lx-space-32); /* ---------------------------------------------------------- RADIUS ---------------------------------------------------------- */ --lx-radius-none: 0; --lx-radius-sm: 4px; --lx-radius-md: 8px; --lx-radius-lg: 12px; --lx-radius-xl: 20px; --lx-radius-2xl: 28px; --lx-radius-3xl: 40px; --lx-radius-full: 9999px; /* ---------------------------------------------------------- SHADOW (dark-theme aware — derinleşen koyu gölgeler) ---------------------------------------------------------- */ --lx-shadow-sm: 0 1px 2px rgba(2, 6, 15, 0.45); --lx-shadow-md: 0 4px 12px rgba(2, 6, 15, 0.55), 0 1px 2px rgba(2, 6, 15, 0.45); --lx-shadow-lg: 0 10px 30px rgba(2, 6, 15, 0.65), 0 4px 8px rgba(2, 6, 15, 0.40); --lx-shadow-xl: 0 20px 50px rgba(2, 6, 15, 0.70), 0 8px 16px rgba(2, 6, 15, 0.50); --lx-shadow-2xl: 0 30px 80px rgba(2, 6, 15, 0.80), 0 12px 24px rgba(2, 6, 15, 0.55); /* GLOW shadow (Liman'ın imza efekti) */ --lx-glow-sm: 0 0 20px rgba(59, 130, 246, 0.25); --lx-glow-md: 0 0 40px rgba(59, 130, 246, 0.32), 0 0 80px rgba(80, 227, 255, 0.12); --lx-glow-lg: 0 0 60px rgba(59, 130, 246, 0.45), 0 0 120px rgba(80, 227, 255, 0.18); --lx-glow-cyan: 0 0 40px rgba(80, 227, 255, 0.45); /* Inset (depth indicator) */ --lx-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(2, 6, 15, 0.40); /* ---------------------------------------------------------- TRANSITION & EASING ---------------------------------------------------------- */ --lx-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --lx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --lx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lx-ease-glide: cubic-bezier(0.55, 0.5, 0.45, 0.5); --lx-duration-fast: 150ms; --lx-duration-base: 250ms; --lx-duration-slow: 400ms; --lx-duration-slower: 650ms; --lx-transition-fast: var(--lx-duration-fast) var(--lx-ease-out); --lx-transition-base: var(--lx-duration-base) var(--lx-ease-out); --lx-transition-slow: var(--lx-duration-slow) var(--lx-ease-out); --lx-transition-spring: var(--lx-duration-base) var(--lx-ease-spring); /* ---------------------------------------------------------- Z-INDEX SCALE (intentional layering — magic number yasak) ---------------------------------------------------------- */ --lx-z-below: -1; --lx-z-base: 0; --lx-z-raised: 10; --lx-z-overlay: 100; --lx-z-dropdown: 200; --lx-z-sticky: 300; --lx-z-header: 400; --lx-z-modal: 500; --lx-z-toast: 1000; --lx-z-tooltip: 2000; --lx-z-cursor: 9999; /* ---------------------------------------------------------- CONTAINER WIDTHS ---------------------------------------------------------- */ --lx-container-sm: 640px; --lx-container-md: 768px; --lx-container-lg: 1024px; --lx-container-xl: 1200px; --lx-container-2xl: 1440px; --lx-container-3xl: 1600px; --lx-container-padding-x: clamp(1rem, 2vw + 0.5rem, 2rem); /* ---------------------------------------------------------- BREAKPOINT TOKENS (dokümantasyon amaçlı — JS için kullanılabilir) CSS @media query'lerinde 640/768/1024/1280/1536 px kullan. ---------------------------------------------------------- */ --lx-bp-sm: 640px; --lx-bp-md: 768px; --lx-bp-lg: 1024px; --lx-bp-xl: 1280px; --lx-bp-2xl: 1536px; /* ---------------------------------------------------------- BLUR & BACKDROP (glassmorphism) ---------------------------------------------------------- */ --lx-blur-sm: 4px; --lx-blur-md: 12px; --lx-blur-lg: 24px; --lx-blur-xl: 40px; --lx-backdrop-glass: blur(12px) saturate(140%); /* ---------------------------------------------------------- GRADIENTS (referans — bileşenler buradan miras alır) ---------------------------------------------------------- */ --lx-gradient-brand: linear-gradient(135deg, var(--lx-color-primary-700) 0%, var(--lx-color-primary-400) 100%); --lx-gradient-deep: linear-gradient(135deg, var(--lx-color-primary-950) 0%, var(--lx-color-primary-800) 100%); --lx-gradient-aurora: linear-gradient(120deg, var(--lx-color-primary-700) 0%, var(--lx-color-primary-500) 35%, var(--lx-color-glow) 100%); --lx-gradient-text: linear-gradient(90deg, var(--lx-color-primary-300) 0%, var(--lx-color-glow) 50%, var(--lx-color-primary-300) 100%); --lx-gradient-neon-border: linear-gradient(90deg, rgba(255, 111, 14, 0.55), rgba(255, 140, 0, 0.55), var(--lx-color-neon-indigo), var(--lx-color-neon-blue)); --lx-gradient-surface: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.10) 0%, transparent 60%), var(--lx-surface-base); } /* ============================================================ PREFERS-REDUCED-MOTION OVERRIDE `html.lx-motion-force` set edilmişse OS/tarayıcı ayarı bypass edilir (kullanıcı ayarı: localStorage 'lx-motion-force' = '1' / '0'). ============================================================ */ @media (prefers-reduced-motion: reduce) { :root:not(.lx-motion-force) { --lx-duration-fast: 1ms; --lx-duration-base: 1ms; --lx-duration-slow: 1ms; --lx-duration-slower: 1ms; } }