/* ============ FONTS DEFINITIONS ============ */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('./fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'), url('./fonts/roboto/roboto-v30-latin-regular.woff') format('woff'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('./fonts/roboto/roboto-v30-latin-700.woff2') format('woff2'), url('./fonts/roboto/roboto-v30-latin-700.woff') format('woff'); } @font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 400; src: url('./fonts/iransans/IRANSans.woff2') format('woff2'), url('./fonts/iransans/IRANSans.woff') format('woff'), url('./fonts/iransans/IRANSans.ttf') format('truetype'); } @font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 700; src: url('./fonts/iransans/IRANSans-Black.woff2') format('woff2'), url('./fonts/iransans/IRANSans_Black.woff') format('woff'), url('./fonts/iransans/IRANSans_Black.ttf') format('truetype'); } /* ============ GLOBAL STYLES ============ */ :root { --primary-color: #0056b3; /* Professional Blue */ --secondary-color: #00a896; /* Teal for data accent */ --bg-light: #f8f9fa; --text-dark: #212529; } body { /* Standard Font LTR */ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--text-dark); } /* Language Specific Styles */ html[lang="fa"] body { /* Persischer Font RTL */ font-family: 'IRANSans', Tahoma, sans-serif !important; } html[dir="rtl"] { text-align: right; } /* Navigation */ .navbar { box-shadow: 0 2px 4px rgba(0,0,0,.1); } .lang-switch .btn-link { color: var(--text-dark); text-decoration: none; font-weight: 500; } .lang-switch .btn-link.active { color: var(--primary-color); font-weight: 700; } /* Hero Section */ #hero { padding: 120px 0 100px; /* Leichter Hintergrundverlauf statt Bild für den gesamten Bereich */ background: linear-gradient(135deg, #f0f4f8 0%, #e6f7f5 100%); min-height: 70vh; display: flex; align-items: center; } .hero-image-container { text-align: center; } /* Das neue thematische Bild */ .hero-image-container img { border-radius: 15px; /* Eckig statt rund */ box-shadow: 0 15px 30px rgba(0,0,0,0.15); max-width: 100%; height: auto; border: none; /* Ein leichter blauer Schimmer um das Bild */ filter: drop-shadow(0 0 10px rgba(0, 86, 179, 0.2)); } .hero-title { font-weight: 800; color: var(--text-dark); } .hero-subtitle { font-size: 1.35rem; color: var(--primary-color); font-weight: 500; margin-bottom: 20px; } /* Section Styling */ section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 60px; position: relative; padding-bottom: 15px; font-weight: 700; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--secondary-color); } .bg-light-alt { background-color: var(--bg-light); } /* Skills Tags */ .skill-tag { display: inline-block; background-color: white; border: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--primary-color); padding: 8px 18px; border-radius: 30px; margin: 6px; font-weight: 500; transition: all 0.3s ease; } .skill-tag:hover { border-color: var(--secondary-color); background-color: rgba(0, 168, 150, 0.05); } /* Timeline for Experience & Logos */ .timeline-item { padding: 25px; border-left: 4px solid var(--secondary-color); position: relative; background: white; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-radius: 8px; } html[dir="rtl"] .timeline-item { border-left: none; border-right: 4px solid var(--secondary-color); } /* Logo Styling */ .company-header { display: flex; align-items: center; margin-bottom: 15px; } .company-logo-link { flex-shrink: 0; margin-right: 20px; } html[dir="rtl"] .company-logo-link { margin-right: 0; margin-left: 20px; } .company-logo { width: auto; height: 50px; /* Feste Höhe für Konsistenz */ object-fit: contain; /* Graustufen im Normalzustand, Farbe beim Hover (optional) */ filter: grayscale(100%); opacity: 0.7; transition: all 0.3s; } .company-logo-link:hover .company-logo { filter: grayscale(0%); opacity: 1; } .company-info h4 { margin-bottom: 5px; font-weight: 700; color: var(--primary-color); } .timeline-date { font-size: 0.9rem; color: #6c757d; font-weight: 500; } /* Footer */ footer { background-color: var(--text-dark); color: white; padding: 40px 0; text-align: center; } footer a { color: var(--secondary-color); text-decoration: none; }