/* ============================================================ * Binderim Design System — colors_and_type.css * * Source of truth pulled from: * - Croone.TCGSepeti.Mobile/src/theme/index.ts (MD3 light/dark themes) * - Croone.TCGSepeti.Admin/wwwroot/css/site.css (Bootstrap 5 + theme-dark) * - Croone.TCGSepeti.Admin/wwwroot/css/home/home-index.css (hero, cards) * - Croone.TCGSepeti.Admin/wwwroot/maintenance.html (gradients, motifs) * * Light theme is the default. Adding the `theme-dark` class to * or (matching the production web pattern) swaps every token. * The mobile RN app uses the same palette + Inter font stack. * ============================================================ */ /* ---------- 1. Webfonts ---------- */ /* Inter is the only typeface in the system. Mobile loads * @expo-google-fonts/inter; web self-hosts the woff2 files under * wwwroot/fonts/inter (from @fontsource/inter v5). Self-hosting keeps * the font off the Google CDN — no external request, no CSP exception, * KVKK/GDPR-clean. latin + latin-ext subsets cover Turkish (ş ğ ı İ). */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('../../fonts/inter/inter-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('../../fonts/inter/inter-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('../../fonts/inter/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('../../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('../../fonts/inter/inter-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('../../fonts/inter/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('../../fonts/inter/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('../../fonts/inter/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('../../fonts/inter/inter-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('../../fonts/inter/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('../../fonts/inter/inter-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('../../fonts/inter/inter-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 2. Brand & raw palette ---------- */ :root { /* --- Brand --- */ --brand-navy: #0f1d3a; /* Deep navy from the logo "B" */ --brand-gold: #d4a64a; /* Gold outline from the logo */ --brand-gold-soft: #f1d28a; /* Highlight on the gold */ /* Indigo — the product brand colour. Inherited from react-native-paper MD3 + Bootstrap utility blue overrides. */ --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; /* Brand primary on web */ --indigo-700: #4338ca; --indigo-800: #3730a3; --indigo-900: #312e81; /* Blue — secondary accent (Bootstrap primary tone) */ --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e3a8a; --blue-900: #172554; /* Violet — used in hero / feature gradient pairs */ --violet-500: #8b5cf6; --violet-600: #7c3aed; /* Slate — every neutral surface in the product */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* Semantic raw */ --success-500: #16a34a; --success-600: #15803d; --success-emerald: #047857; /* price ↑ */ --success-mint: #0f766e; /* money / price tags */ --danger-500: #dc3545; /* Bootstrap red */ --danger-600: #b91c1c; /* price ↓ */ --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-amber: #fde68a; /* TCG game tint accents (used on the homepage game cards) */ --tcg-pokemon: #ef4444; --tcg-onepiece: #f97316; --tcg-lol: #5865f2; --tcg-panini: #0ea5e9; } /* ---------- 3. Semantic LIGHT tokens ---------- */ :root, .theme-light { /* Foregrounds */ --fg-1: var(--slate-900); /* Primary text */ --fg-2: var(--slate-700); /* Body */ --fg-3: var(--slate-500); /* Muted */ --fg-4: var(--slate-400); /* Placeholder, disabled */ --fg-on-brand: #ffffff; /* Backgrounds & surfaces */ --bg-app: var(--slate-50); --bg-canvas: #ffffff; --bg-elevated: #ffffff; --bg-sunken: var(--slate-100); --bg-tint: var(--indigo-50); --bg-overlay: rgba(15, 23, 42, 0.4); --bg-glass: rgba(255, 255, 255, 0.85); /* Brand */ --color-brand: var(--indigo-600); --color-brand-hover: var(--indigo-700); --color-brand-active: var(--indigo-800); --color-brand-soft: var(--indigo-50); --color-brand-fg: var(--indigo-700); /* Secondary (blue) */ --color-accent: var(--blue-600); --color-accent-hover: var(--blue-700); --color-accent-soft: var(--blue-100); /* Semantic */ --color-success: var(--success-500); --color-success-soft:#dcfce7; --color-danger: var(--danger-500); --color-danger-soft: #fee2e2; --color-warning: var(--warning-500); --color-warning-soft:#fef3c7; --color-info: var(--blue-500); /* Money */ --color-price-up: var(--success-emerald); --color-price-down: var(--danger-600); --color-money: var(--success-mint); /* Borders */ --border-1: var(--slate-200); /* default */ --border-2: var(--slate-300); /* stronger / inputs */ --border-strong: var(--slate-400); /* Shadow ramp — soft, layered (matches site.css "box-shadow") */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 2px 12px rgba(15, 23, 42, 0.06); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); --shadow-xl: 0 25px 70px rgba(15, 23, 42, 0.12); --shadow-brand: 0 8px 24px rgba(99, 102, 241, 0.20); /* Focus ring (Bootstrap-like) */ --focus-ring: 0 0 0 0.25rem rgba(99, 102, 241, 0.25); /* Decorative gradients */ --grad-hero: linear-gradient(160deg, #f8fafc 0%, #eef2ff 40%, #e0e7ff 100%); --grad-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --grad-feature: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --grad-cta: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); --grad-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --grad-warning: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } /* ---------- 4. Semantic DARK tokens ---------- */ .theme-dark { --fg-1: #f1f5f9; --fg-2: #e2e8f0; --fg-3: var(--slate-400); --fg-4: var(--slate-500); --fg-on-brand: var(--slate-900); --bg-app: var(--slate-900); --bg-canvas: var(--slate-800); --bg-elevated: var(--slate-800); --bg-sunken: var(--slate-900); --bg-tint: rgba(129, 140, 248, 0.10); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-glass: rgba(30, 41, 59, 0.85); --color-brand: var(--indigo-400); --color-brand-hover: var(--indigo-300); --color-brand-active: var(--indigo-200); --color-brand-soft: rgba(99, 102, 241, 0.18); --color-brand-fg: var(--indigo-200); --color-accent: #60a5fa; --color-accent-hover: var(--blue-300); --color-accent-soft: rgba(59, 130, 246, 0.20); --color-success-soft:rgba(34, 197, 94, 0.18); --color-danger: #fca5a5; --color-danger-soft: rgba(220, 38, 38, 0.20); --color-price-up: #34d399; --color-price-down: #f87171; --color-money: #5eead4; --border-1: var(--slate-700); --border-2: var(--slate-600); --border-strong: var(--slate-500); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-xl: 0 25px 70px rgba(0, 0, 0, 0.50); --shadow-brand: 0 8px 24px rgba(129, 140, 248, 0.25); --focus-ring: 0 0 0 0.25rem rgba(129, 140, 248, 0.35); --grad-hero: linear-gradient(160deg, #0f172a 0%, #131b2e 40%, #1a1f3a 100%); --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --grad-cta: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); } /* ---------- 5. Typography — base ---------- */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — sized for binderim.com's mobile-first 14→16px html base */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.05rem; /* 16.8 — hero subtitle */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 — feature title */ --fs-2xl: 2rem; /* 32 — hero title */ --fs-3xl: 2.5rem; /* 40 — marketing headline */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.5; --lh-relaxed:1.6; --lh-loose: 1.7; --tracking-tight: -0.5px; --tracking-normal: 0; --tracking-wide: 0.5px; /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* cards */ --radius-xl: 14px; /* large cards / inputs (mobile) */ --radius-2xl: 16px; /* hero feature panels */ --radius-3xl: 20px; /* hero shell */ --radius-pill: 999px; /* Spacing (the 4-pt scale that Bootstrap and the Razor pages effectively use) */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ /* Motion */ --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 350ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); } /* ---------- 6. Semantic typography roles ---------- */ .ds-display { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .ds-h1, h1.ds { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0 0 var(--space-3); } .ds-h2, h2.ds { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-3); } .ds-h3, h3.ds { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-2); } .ds-subtitle { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-3); } .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--fg-2); } .ds-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--fg-3); } .ds-overline { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs); line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); } .ds-price { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-base); color: var(--color-money); font-variant-numeric: tabular-nums; } .ds-mono, code.ds, kbd.ds { font-family: var(--font-mono); font-size: 0.92em; }