/* * Bilingual-Ready CSS System * Uses logical properties (inline/block, start/end) to natively support * both LTR (English) and RTL (Arabic) without duplicated rules. */ :root { /* Colors */ --color-bg: #ffffff; --color-text: #1a1a1a; --color-text-muted: #555555; --color-primary: #0056b3; --color-primary-hover: #004494; --color-border: #e0e0e0; --color-bg-alt: #f8f9fa; /* Spacing (Logical) */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-base: 1rem; --line-height-base: 1.6; } /* RTL Override: When dir="rtl" is set on , flip the font family to a standard Arabic stack */ html[dir="rtl"] { --font-family: "Tajawal", "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* Base Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-bg); } /* Container */ .container { width: 100%; max-width: 1200px; margin-inline: auto; /* Logical: margin-left/right in LTR, margin-right/left in RTL */ padding-inline: var(--space-sm); /* Logical: padding-left/right */ } /* Typography */ h1, h2, h3 { line-height: 1.2; margin-block-end: var(--space-sm); /* Logical: margin-bottom */ } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.25rem; } p { margin-block-end: var(--space-sm); color: var(--color-text-muted); } /* Buttons */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 600; transition: background-color 0.2s ease; } .btn-primary { background-color: var(--color-primary); color: white; } .btn-primary:hover { background-color: var(--color-primary-hover); } /* Header */ .site-header { border-block-end: 1px solid var(--color-border); /* Logical: border-bottom */ padding-block: var(--space-sm); /* Logical: padding-top/bottom */ } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); } /* Hero */ .hero { padding-block: var(--space-lg); text-align: start; /* Logical: text-align left in LTR, right in RTL */ } .hero-sub { font-size: 1.25rem; max-width: 600px; margin-block-end: var(--space-md); } /* Segments */ .segments { padding-block: var(--space-lg); background-color: var(--color-bg-alt); } .section-sub { max-width: 600px; margin-block-end: var(--space-md); } .segment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-md); } .segment-card { display: block; padding: var(--space-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-text); transition: transform 0.2s ease, box-shadow 0.2s ease; } .segment-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .segment-card.primary { border-color: var(--color-primary); background-color: #f0f7ff; } .segment-card h3 { color: var(--color-primary); margin-block-end: var(--space-xs); } .cta-link { display: inline-block; margin-block-start: var(--space-sm); /* Logical: margin-top */ color: var(--color-primary); font-weight: 600; } /* How It Works */ .how-it-works { padding-block: var(--space-lg); } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-block-end: var(--space-md); } .step { padding: var(--space-md); border-inline-start: 3px solid var(--color-primary); /* Logical: border-left in LTR, border-right in RTL */ } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--color-primary); color: white; border-radius: 50%; font-weight: 700; margin-inline-end: var(--space-xs); /* Logical: margin-right in LTR, margin-left in RTL */ } .center-cta { text-align: center; margin-block-start: var(--space-md); } /* Trust Signal */ .trust { padding-block: var(--space-lg); background-color: var(--color-bg-alt); text-align: start; } .trust-list, .list-check { list-style: none; max-width: 600px; } .trust-list li, .list-check li { padding-inline-start: var(--space-md); /* Logical: padding-left in LTR, padding-right in RTL */ position: relative; margin-block-end: var(--space-sm); } /* Add a checkmark that flips correctly in RTL */ .trust-list li::before, .list-check li::before { content: "✓"; position: absolute; inset-inline-start: 0; /* Logical: left in LTR, right in RTL */ color: var(--color-primary); font-weight: bold; } /* Projects & Challenges Sections */ .projects, .challenges { padding-block: var(--space-lg); text-align: start; } .projects { background-color: var(--color-bg-alt); } /* Form Section */ .form-section { padding-block: var(--space-lg); } .form-section h2 { text-align: start; } #hubspot-form-container { max-width: 600px; margin-inline: auto; margin-block-start: var(--space-md); } /* Footer */ .site-footer { border-block-start: 1px solid var(--color-border); padding-block: var(--space-md); text-align: center; } .footer-links { margin-block-end: var(--space-sm); } .footer-links a { color: var(--color-text-muted); text-decoration: none; margin-inline: var(--space-sm); /* Logical: margin-left/right */ } .footer-links a:hover { color: var(--color-primary); } /* Language Toggle */ .lang-toggle { position: absolute; inset-inline-end: var(--space-sm); /* Logical: right in LTR, left in RTL */ inset-block-start: var(--space-sm); /* Logical: top */ font-size: 0.875rem; } .lang-toggle a { color: var(--color-primary); text-decoration: none; } /* Responsive Adjustments */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .site-header .container { flex-direction: column; gap: var(--space-sm); text-align: center; } .lang-toggle { position: static; margin-block-end: var(--space-sm); } }