/* ============================================================ BridgeConnect — DESIGN SYSTEM Versiune: 1.0 Descriere: Variabile globale (culori, tipografie, spacing, shadows, radii, animations) pentru intregul brand. ============================================================ */ /* Fonts încărcate NON-BLOCKING via in HTML head cu preconnect (SEO/CWV optimizat). NU @import aici — blochează render-ul. Vezi in index/consultanta/recrutare.html */ :root { /* ============================================ CULORI — BRAND PRIMAR Inspirate din "pod peste ape" (bridge) — adancime + caldura ============================================ */ /* Primary — Deep Ocean (incredere, profunzime, finante) */ --color-primary-50: #E6EEF4; --color-primary-100: #CCDCE9; --color-primary-200: #99B9D3; --color-primary-300: #6696BD; --color-primary-400: #3373A7; --color-primary-500: #0B3D5C; /* Brand principal */ --color-primary-600: #093350; --color-primary-700: #072940; --color-primary-800: #051F30; --color-primary-900: #031520; /* Accent — Warm Gold (premium, optimism, soare/sud) */ --color-accent-50: #FFF8E6; --color-accent-100: #FFEFCC; --color-accent-200: #FFDF99; --color-accent-300: #FFCF66; --color-accent-400: #FFBF33; --color-accent-500: #FFB627; /* Accent principal */ --color-accent-600: #E69F1E; --color-accent-700: #BF8519; --color-accent-800: #806011; --color-accent-900: #403008; /* Secondary — Coral Warm (caldura, actiune, energie) */ --color-coral-500: #FF6B35; --color-coral-600: #E55A2B; /* ============================================ NEUTRALS — Sistem de griuri ============================================ */ --color-white: #FFFFFF; --color-gray-50: #F8FAFC; --color-gray-100: #F1F5F9; --color-gray-200: #E2E8F0; --color-gray-300: #CBD5E1; --color-gray-400: #94A3B8; --color-gray-500: #64748B; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1E293B; --color-gray-900: #0F172A; --color-black: #000000; /* ============================================ STATUS — Semantic colors ============================================ */ --color-success: #10B981; --color-success-bg: #D1FAE5; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-danger: #EF4444; --color-danger-bg: #FEE2E2; --color-info: #3B82F6; --color-info-bg: #DBEAFE; /* ============================================ TIPOGRAFIE ============================================ */ --font-display: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Poppins', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Scale tipografic (modular scale 1.250 — Major Third) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 6rem; /* 96px */ /* Font weights — folosim contrast puternic thin/bold */ --font-thin: 100; --font-extralight:200; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold:800; --font-black: 900; /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; /* Letter spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* ============================================ SPACING — Sistem 4px base ============================================ */ --space-0: 0; --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-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ============================================ BORDER RADIUS ============================================ */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* ============================================ SHADOWS — Premium layered ============================================ */ --shadow-xs: 0 1px 2px rgba(11, 61, 92, 0.05); --shadow-sm: 0 1px 3px rgba(11, 61, 92, 0.08), 0 1px 2px rgba(11, 61, 92, 0.06); --shadow-md: 0 4px 6px -1px rgba(11, 61, 92, 0.10), 0 2px 4px -1px rgba(11, 61, 92, 0.06); --shadow-lg: 0 10px 15px -3px rgba(11, 61, 92, 0.10), 0 4px 6px -2px rgba(11, 61, 92, 0.05); --shadow-xl: 0 20px 25px -5px rgba(11, 61, 92, 0.10), 0 10px 10px -5px rgba(11, 61, 92, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(11, 61, 92, 0.25); --shadow-glow: 0 0 40px rgba(255, 182, 39, 0.35); --shadow-inner: inset 0 2px 4px rgba(11, 61, 92, 0.06); /* ============================================ TRANSITIONS / ANIMATIONS ============================================ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; /* ============================================ Z-INDEX SCALE ============================================ */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 9999; /* ============================================ LAYOUT ============================================ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-max: 1600px; /* ============================================ GRADIENTS — Signature brand ============================================ */ --gradient-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-600) 100%); --gradient-hero: linear-gradient(135deg, #0B3D5C 0%, #093350 50%, #051F30 100%); --gradient-warm: linear-gradient(135deg, #FFB627 0%, #FF6B35 100%); --gradient-mesh: radial-gradient(at 20% 30%, rgba(255, 182, 39, 0.15) 0px, transparent 50%), radial-gradient(at 80% 70%, rgba(11, 61, 92, 0.20) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(255, 107, 53, 0.10) 0px, transparent 50%); } /* ============================================ RESET + BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-light); /* Light pe body pentru eleganta */ line-height: var(--leading-normal); color: var(--color-gray-800); background-color: var(--color-white); min-height: 100vh; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-default); } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================ TIPOGRAFIE — Heading defaults ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-extrabold); /* 800 — contrast puternic vs body light */ line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-primary-500); } h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.75rem); font-weight: var(--font-black); letter-spacing: -0.03em; } h2 { font-size: clamp(2rem, 3.5vw + 1rem, 3.25rem); font-weight: var(--font-extrabold); letter-spacing: -0.025em; } h3 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); font-weight: var(--font-bold); } h4 { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); font-weight: var(--font-bold); } h5 { font-size: var(--text-xl); font-weight: var(--font-semibold); } h6 { font-size: var(--text-lg); font-weight: var(--font-semibold); } p { line-height: var(--leading-relaxed); color: var(--color-gray-700); font-weight: var(--font-light); } /* Utility classes pentru contrast thin/bold pe accente */ .text-thin { font-weight: var(--font-thin); } .text-light { font-weight: var(--font-light); } .text-regular { font-weight: var(--font-regular); } .text-bold { font-weight: var(--font-bold); } .text-extrabold{ font-weight: var(--font-extrabold); } .text-black { font-weight: var(--font-black); } /* Accent text: combinare thin + bold inline */ .accent-mix .thin { font-weight: var(--font-thin); } .accent-mix .bold { font-weight: var(--font-black); } /* ============================================ UTILITARE — Container + flex helpers ============================================ */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); } .container-wide { max-width: var(--container-2xl); } .container-narrow { max-width: var(--container-md); } /* Scrollbar custom (subtle, premium) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-gray-100); } ::-webkit-scrollbar-thumb { background: var(--color-primary-300); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-500); } /* Selection */ ::selection { background: var(--color-accent-500); color: var(--color-primary-700); }