/* ============================================================================= REMOTIR WWW - THEME SYSTEM ============================================================================= CSS Custom Properties for branding and theming. Change these values to adjust the look and feel across the entire site. ============================================================================= */ :root { /* ========================================================================= COLORS - BACKGROUNDS (DARK) ========================================================================= */ --color-bg-primary: #05052C; /* Main dark background */ --color-bg-elevated: #151b2b; /* Slightly lighter for cards */ --color-bg-surface: #1a2035; /* Surface elements */ --color-bg-card: #090952; /* Dark card backgrounds */ --color-bg-card-alt: #101089; /* Alternative card/badge bg */ --color-bg-card-highlight: #22225e; /* Highlighted card bg */ --color-bg-purple-dark: #2a2153; /* Purple tinted dark bg */ /* ========================================================================= COLORS - BACKGROUNDS (LIGHT) ========================================================================= */ --color-bg-light: #ffffff; /* White background */ --color-bg-light-hover: #f9fafb; /* Light hover state */ --color-bg-light-active: #f3f4f6; /* Light active state */ --color-bg-light-subtle: #fafafa; /* Very subtle light bg */ /* Light section accent backgrounds */ --color-bg-accent-purple: #ebe9fe; /* Purple tinted light bg */ --color-bg-accent-blue: #eff4ff; /* Blue tinted light bg */ --color-bg-accent-orange: #fff4ed; /* Orange tinted light bg */ --color-bg-accent-blue-soft: #f0f5ff; /* Soft blue for active states */ /* ========================================================================= COLORS - TEXT (DARK BACKGROUNDS) ========================================================================= */ --color-text-primary: #ffffff; /* Main text on dark bg */ --color-text-secondary: #d5d7da; /* Subtitles, descriptions */ --color-text-muted: #717680; /* Muted text, inactive nav */ --color-text-placeholder: #535862; /* Placeholders */ --color-text-soft: #a0a4ab; /* Soft text (footer) */ --color-text-purple-light: #bdb4fe; /* Light purple text */ --color-text-purple-soft: #b3b8db; /* Soft purple/blue text */ --color-text-purple-accent: #d6bbfb; /* Purple accent text */ --color-text-blue-light: #84adff; /* Light blue text (labels) */ --color-text-lavender: #ebe9fe; /* Lavender text */ /* ========================================================================= COLORS - TEXT (LIGHT BACKGROUNDS) ========================================================================= */ --color-text-dark: #181d27; /* Dark text on light bg */ --color-text-dark-secondary: #535862; /* Secondary text on light bg */ --color-text-dark-muted: #414651; /* Muted text on light bg */ --color-text-dark-subtle: #252b37; /* Subtle dark text */ /* ========================================================================= COLORS - BRAND ========================================================================= */ --color-brand-primary: #4f5db3; /* Brand blue */ --color-brand-accent: #6366f1; /* Accent purple/indigo */ --color-brand-blue: #2970ff; /* Primary blue CTA */ --color-brand-blue-hover: #1d5ed9; /* Blue hover state */ --color-brand-blue-active: #1a53c2; /* Blue active state */ --color-brand-purple: #7a5af8; /* Purple accent */ --color-brand-purple-dark: #7b3ced; /* Dark purple accent */ /* ========================================================================= COLORS - SEMANTIC ========================================================================= */ --color-success: #149658; /* Success green */ --color-success-light: #34c759; /* Light success green */ --color-success-text: #079455; /* Success text color */ --color-success-alt: #099250; /* Alternative success green */ --color-error: #db3124; /* Error red */ --color-error-light: #ff3b30; /* Light error red */ --color-warning: #f3b216; /* Warning yellow */ --color-info: #1e61d4; /* Info blue */ /* ========================================================================= COLORS - UI ELEMENTS ========================================================================= */ --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.2); --color-border-light: #e9eaeb; /* Light border color */ --color-border-light-hover: #9ca3af; /* Light border hover */ --color-border-card: #1f2b7b; /* Card border on dark bg */ --color-border-highlight: #18215e; /* Highlight border */ /* Button colors */ --color-btn-primary-bg: #ffffff; --color-btn-primary-text: #414651; --color-btn-primary-border: #d5d7da; --color-btn-ghost-bg: rgba(255, 255, 255, 0.1); --color-btn-ghost-text: #ffffff; /* ========================================================================= COLORS - GRADIENTS ========================================================================= */ --gradient-card-blue: linear-gradient(180deg, rgba(9, 40, 92, 1) 0%, rgba(8, 32, 69, 1) 100%); --gradient-card-teal: linear-gradient(180deg, rgba(11, 58, 61, 1) 0%, rgba(11, 37, 41, 1) 100%); --gradient-card-purple: linear-gradient(180deg, rgba(54, 33, 94, 1) 0%, rgba(31, 21, 54, 1) 100%); --gradient-card-gray: linear-gradient(180deg, rgba(58, 67, 72, 1) 0%, rgba(32, 39, 45, 1) 100%); --gradient-cta: linear-gradient(180deg, #0e0e7c 0%, #090952 100%); --gradient-case-study: radial-gradient(ellipse at 82% 13%, rgba(34, 47, 134, 1) 0%, rgba(24, 33, 94, 1) 100%); /* ========================================================================= TYPOGRAPHY ========================================================================= */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font sizes - Core scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.375rem; /* 22px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 1.75rem; /* 28px */ --text-5xl: 2rem; /* 32px */ --text-6xl: 2.25rem; /* 36px */ --text-7xl: 2.625rem; /* 42px */ --text-8xl: 3rem; /* 48px */ --text-9xl: 3.875rem; /* 62px */ --text-10xl: 4.25rem; /* 68px */ --text-11xl: 5rem; /* 80px */ /* Semantic heading sizes */ --heading-hero: var(--text-9xl); /* 62px - Hero titles */ --heading-hero-mobile: var(--text-6xl); /* 36px - Hero on mobile */ --heading-page: var(--text-10xl); /* 68px - Page titles */ --heading-section: var(--text-8xl); /* 48px - Section titles */ --heading-section-mobile: var(--text-6xl); /* 36px - Section on mobile */ --heading-card: var(--text-3xl); /* 24px - Card titles */ --heading-small: var(--text-xl); /* 20px - Small headings */ /* Body text sizes */ --body-lg: var(--text-2xl); /* 22px - Large body text */ --body-md: var(--text-lg); /* 18px - Medium body text */ --body-sm: var(--text-md); /* 16px - Small body text */ /* Font weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.2; --leading-body: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Letter spacing */ --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; /* ========================================================================= SPACING ========================================================================= */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-18: 4.5rem; /* 72px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ========================================================================= LAYOUT ========================================================================= */ --container-max: 1100px; --container-wide: 1200px; --container-narrow: 800px; --container-padding: 18px; --nav-height: 80px; /* Section padding variants */ --section-padding: 96px; --section-padding-lg: var(--space-32); /* 128px */ --section-padding-md: var(--space-24); /* 96px */ --section-padding-sm: var(--space-16); /* 64px */ --section-padding-xs: var(--space-12); /* 48px */ /* Common gaps */ --gap-cards: var(--space-6); /* 24px - Between cards */ --gap-cards-sm: var(--space-3); /* 12px - Small card gap */ --gap-section-header: var(--space-12); /* 48px - After section header */ --gap-content: var(--space-8); /* 32px - Content blocks */ /* ========================================================================= BORDERS & RADIUS ========================================================================= */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ========================================================================= SHADOWS ========================================================================= */ --shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.05); --shadow-sm: 0 1px 3px rgba(10, 13, 18, 0.1); --shadow-md: 0 4px 6px rgba(10, 13, 18, 0.1); --shadow-lg: 0 10px 15px rgba(10, 13, 18, 0.1); --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.3); --shadow-2xl: 0 24px 48px -12px rgba(10, 13, 18, 0.18); --shadow-btn: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 -2px 0 rgba(10, 13, 18, 0.05); --shadow-card: 0 1px 2px rgba(10, 13, 18, 0.05); --shadow-card-hover: 0 8px 32px rgba(41, 112, 255, 0.15); --shadow-dropdown: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04); --shadow-dark-card: 0px 0px 2px rgba(0, 0, 0, 0.3), 0px 0px 6px 2px rgba(0, 0, 0, 0.15); /* ========================================================================= TRANSITIONS ========================================================================= */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* ========================================================================= Z-INDEX ========================================================================= */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-tooltip: 500; }