/** * SUBVERSION TRADES - DESIGN SYSTEM * Core variables and design tokens * NO Webflow dependencies - built from scratch */ :root { /* ===== COLOR PALETTE ===== */ /* Primary Brand Colors */ --color-accent: #96ef1c; --color-accent-hover: #a2ff45; --color-accent-dark: #85d419; /* Background Colors */ --color-bg-primary: #0a0d0d; --color-bg-secondary: #151918; --color-bg-tertiary: #1a2120; /* Text Colors */ --color-text-primary: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.75); --color-text-tertiary: rgba(255, 255, 255, 0.5); --color-text-muted: rgba(255, 255, 255, 0.4); --color-text-on-accent: #0f1212; /* Service Colors */ --color-lite: #96ef1c; --color-advanced: #00bfff; --color-pro: #96ef1c; /* Semantic Colors */ /* Green reserved strictly for positive states (profitable months, success indicators) */ --color-success: #22c55e; /* True green - not accent color */ --color-error: #ff4444; --color-warning: #ffaa00; --color-info: #0088cc; /* CTA/Link color (Telegram blue for primary CTAs) */ --color-cta: #0088cc; /* Reserved for buttons/links */ /* Alpha Variants */ --color-accent-10: rgba(150, 239, 28, 0.1); --color-accent-20: rgba(150, 239, 28, 0.2); --color-accent-30: rgba(150, 239, 28, 0.3); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-40: rgba(0, 0, 0, 0.4); --color-white-05: rgba(255, 255, 255, 0.05); --color-white-10: rgba(255, 255, 255, 0.1); /* ===== SPACING SCALE ===== */ /* Tight 8px scale for micro-polish */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px - deprecated, use --space-lg for section padding */ --space-2xl: 4rem; /* 64px - deprecated */ --space-3xl: 6rem; /* 96px - deprecated */ /* Standardized spacing for consistency */ --section-padding-y: 2rem; /* 32px - all sections */ --section-padding-x: 1rem; /* 16px - mobile */ --card-gap: 1rem; /* 16px - card grids */ --card-padding: 1.5rem; /* 24px - card interior */ /* ===== TYPOGRAPHY ===== */ /* Font Families */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Normalized Typography Hierarchy */ --text-h1: clamp(2.8rem, 6vw, 3.5rem); /* Hero headline only */ --text-h2: clamp(1.75rem, 3.5vw, 2.25rem); /* Section titles: "From Alert to Action", "Track Record", etc. */ --text-h3: 1.25rem; /* 20px - Card titles */ --text-body: 1rem; /* 16px - Body text */ --text-sm: 0.875rem; /* 14px - Small text */ --text-xs: 0.75rem; /* 12px - Extra small */ /* Deprecated - use normalized hierarchy above */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: 3.125rem; /* 50px */ --text-6xl: 4rem; /* 64px */ --text-7xl: 5rem; /* 80px - Hero headline */ /* Display sizes for hero elements - deprecated */ --display-sm: 3.5rem; /* 56px */ --display-md: 4.5rem; /* 72px */ --display-lg: 5rem; /* 80px */ --display-xl: 6rem; /* 96px */ /* Font Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-loose: 2; /* ===== Z-INDEX SCALE ===== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-mobile-nav: 1000; --z-mobile-cta: 9998; /* ===== LAYOUT ===== */ --container-width: 1400px; --container-padding: var(--space-md); --nav-height-mobile: 60px; --nav-height-desktop: 80px; /* ===== BORDERS & RADIUS ===== */ /* Single radius token for cohesion */ --radius: 16px; --border-radius-sm: 4px; /* deprecated */ --border-radius-md: 8px; /* deprecated */ --border-radius-lg: 12px; /* deprecated */ --border-width: 1px; /* ===== SHADOWS ===== */ /* Two shadow tokens: card vs modal */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); /* Deprecated - use shadow-card or shadow-modal */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4); --shadow-accent: 0 0 20px rgba(150, 239, 28, 0.2); --shadow-accent-lg: 0 0 40px rgba(150, 239, 28, 0.3); /* ===== TRANSITIONS ===== */ --transition-fast: 0.15s; --transition-base: 0.3s; --transition-slow: 0.5s; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* ===== GRADIENTS ===== */ --gradient-primary: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%); --gradient-accent: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)); /* ===== EFFECTS ===== */ --backdrop-blur: blur(10px); --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); } /* ===== MOBILE OVERRIDES ===== */ @media (max-width: 767px) { :root { --container-padding: var(--space-sm); /* Responsive font sizes for mobile */ --text-3xl: 1.75rem; /* 28px - Smaller headings on mobile */ --text-4xl: 2rem; /* 32px */ --text-5xl: 2.5rem; /* 40px */ --text-6xl: 3rem; /* 48px */ --text-7xl: 3.5rem; /* 56px - Hero headline mobile */ /* Display sizes for mobile */ --display-sm: 2.5rem; /* 40px */ --display-md: 3rem; /* 48px */ --display-lg: 3.5rem; /* 56px */ --display-xl: 4rem; /* 64px */ } } /* ===== DESKTOP ENHANCEMENTS ===== */ @media (min-width: 768px) { :root { --container-padding: var(--space-lg); } }