/* ========================================================================== JAH Media — Elementor Widgets — Master Stylesheet Arabic RTL, dark navy/blue theme, glass morphism ========================================================================== */ @font-face { font-family: "Bukra"; src: url("../fonts/29LTBukra-Regular.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ========================================================================== Design tokens (scoped to .jah-w prefix to avoid leaking to theme) ========================================================================== */ .jah-w { --jah-foreground: #ffffff; --jah-muted-fg: #bac5db; --jah-card: #0d1124; --jah-popover: #0d1124; --jah-primary: #0066ff; --jah-primary-fg: #ffffff; --jah-secondary: #181f2e; --jah-muted: #181f26; --jah-accent: #0066ff; --jah-border: rgba(255, 255, 255, 0.12); --jah-border-strong: #1f3047; --jah-radius: 0.75rem; --jah-gradient-primary: linear-gradient(135deg, #0066ff, #14213d); --jah-gradient-card: linear-gradient(145deg, #181f2e 0%, #0a0e1a 100%); --jah-gradient-glow: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.12) 0%, transparent 70%); --jah-shadow-glow: 0 0 40px rgba(0, 102, 255, 0.15); --jah-shadow-card: 0 8px 32px rgba(8, 12, 26, 0.5); /* Direction inherits from . WPML / Polylang / WP set this automatically per language — Arabic gets dir="rtl", English gets dir="ltr". We default to RTL only when no direction is set anywhere upstream. */ direction: inherit; /* `start` honors current direction: right in RTL, left in LTR. */ text-align: start; font-family: "Bukra", "Cairo", system-ui, -apple-system, sans-serif; color: var(--jah-foreground); line-height: 2.2em; } /* Default direction to RTL only when nothing upstream has decided. When WPML sets for English, the inherited `ltr` wins over this fallback because the html element is the closest ancestor. */ html:not([dir]) .jah-w, html[dir=""] .jah-w { direction: rtl; } /* Body background gradient — applied automatically site-wide by the plugin via wp_head inline CSS so any theme inherits the correct backdrop. */ html.jah-body-bg, body.jah-body-bg { background: linear-gradient(90deg, #000000 0%, #000814 20%, #001d6e 60%, #1f3fff 100%) !important; background-attachment: fixed !important; color: #ffffff !important; } body.jah-body-bg #wpadminbar { background: #000; } /* Beat the theme — every widget is wrapped in .jah-w; reset padding/margin inside our containers and force RTL alignment. */ .jah-w *, .jah-w *::before, .jah-w *::after { box-sizing: border-box; } .jah-w h1, .jah-w h2, .jah-w h3, .jah-w h4, .jah-w h5, .jah-w h6 { color: var(--jah-foreground); font-weight: 900; line-height: 1.4em; margin: 0; } .jah-w p, .jah-w li, .jah-w span, .jah-w a { line-height: 2.2em; } .jah-w a { color: inherit; text-decoration: none; } .jah-w img { max-width: 100%; height: auto; display: block; } .jah-w button { font: inherit; cursor: pointer; } .jah-container { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .jah-container { padding: 0 3rem; } } /* Mobile overflow protection */ .jah-w { overflow-x: clip; } /* ========================================================================== Buttons (theme-proof — applied with inline style block per widget) ========================================================================== */ .jah-w .jah-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: 9999px; font-weight: 800; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; text-decoration: none; line-height: 1.4; } .jah-w .jah-btn-primary { background: var(--jah-primary); color: var(--jah-primary-fg); box-shadow: 0 0 30px rgba(0, 102, 255, 0.5); } .jah-w .jah-btn-primary:hover { box-shadow: 0 0 50px rgba(0, 102, 255, 0.85); transform: scale(1.05); } .jah-w .jah-btn-outline { background: transparent; color: var(--jah-foreground); border-color: rgba(255, 255, 255, 0.2); } .jah-w .jah-btn-outline:hover { background: rgba(255, 255, 255, 0.08); } /* Glass utility */ .jah-glass { background: rgba(13, 17, 36, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .jah-eyebrow { font-size: 0.875rem; font-weight: 500; color: var(--jah-muted-fg); letter-spacing: 0.1em; margin-bottom: 1rem; } /* ========================================================================== HEADER ========================================================================== */ .jah-header { position: fixed; top: 0; right: 0; left: 0; z-index: 50; transition: all 0.5s ease; background: transparent; } .jah-header.is-scrolled { background: rgba(13, 17, 36, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--jah-border); } .jah-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; max-width: 1320px; margin: 0 auto; } @media (min-width: 768px) { .jah-header__inner { padding: 1rem 3rem; } } .jah-header__logo img { height: 64px; width: auto; } .jah-header__nav { display: none; align-items: center; gap: 2rem; } @media (min-width: 1024px) { .jah-header__nav { display: flex; } } .jah-header__nav a { font-size: 0.9rem; font-weight: 500; color: var(--jah-muted-fg); transition: color 0.3s; } .jah-header__nav a:hover, .jah-header__nav a.is-active { color: var(--jah-foreground); } /* Flag/icon images inside menu links (e.g. WPML language switcher with "Display flag" enabled) align nicely with the text. */ .jah-header__nav a img, .jah-header__mobile-nav a img { display: inline-block; vertical-align: middle; margin-inline-end: 0.4rem; max-height: 1em; width: auto; } .jah-header__right { display: flex; align-items: center; gap: 1rem; } .jah-header__cta { display: none; font-size: 0.9rem; font-weight: 700; color: var(--jah-foreground); white-space: nowrap; } @media (min-width: 1024px) { .jah-header__cta { display: inline-flex; } } .jah-header__menu-toggle { background: transparent; border: 0; color: var(--jah-foreground); padding: 0.5rem; font-size: 1.25rem; } .jah-header__mobile-nav { display: none; background: rgba(13, 17, 36, 0.95); backdrop-filter: blur(20px); border-top: 1px solid var(--jah-border); padding: 0.5rem 1.5rem 1.5rem; } .jah-header.is-open .jah-header__mobile-nav { display: block; } .jah-header__mobile-nav a { display: block; padding: 0.75rem 0; font-size: 0.9rem; font-weight: 500; color: var(--jah-muted-fg); transition: color 0.3s; } .jah-header__mobile-nav a:hover { color: var(--jah-foreground); } .jah-header__mobile-cta { display: block; padding: 0.75rem 0; font-size: 0.9rem; font-weight: 700; color: var(--jah-foreground); } /* ========================================================================== HERO (homepage) ========================================================================== */ .jah-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background: transparent; } .jah-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: top right; } @media (min-width: 768px) { .jah-hero__bg { background-position: center; } } .jah-hero__overlay { position: absolute; inset: 0; background: rgba(8, 12, 26, 0.3); } @media (min-width: 768px) { .jah-hero__overlay { background: rgba(8, 12, 26, 0.5); } } .jah-hero__watermark { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: min(55vh, 45vw); height: auto; filter: brightness(0) invert(1); opacity: 1; z-index: 3; pointer-events: none; user-select: none; } .jah-hero__glow { position: absolute; bottom: 0; right: 0; width: 50%; height: 40%; opacity: 0.4; pointer-events: none; background: radial-gradient(ellipse at 70% 80%, rgba(0, 102, 255, 0.4), transparent 70%); } .jah-hero__content { position: relative; z-index: 10; width: 100%; max-width: 1320px; margin: 0 auto; padding: 10rem 1.5rem 6rem; } @media (min-width: 768px) { .jah-hero__content { padding: 10rem 3rem 6rem; } } .jah-hero__eyebrow { font-size: 0.95rem; font-weight: 300; letter-spacing: 0.1em; color: #ffffff; margin-bottom: 1.5rem; } .jah-hero__title { font-size: 1.875rem; font-weight: 900; line-height: 1.1; color: var(--jah-foreground); margin-bottom: 3rem; max-width: 1100px; } @media (min-width: 768px) { .jah-hero__title { font-size: 3rem; } } @media (min-width: 1024px) { .jah-hero__title { font-size: 4.5rem; } } @media (min-width: 1280px) { .jah-hero__title { font-size: 5.25rem; } } .jah-hero__scroll { background: transparent; border: 0; padding: 0; color: var(--jah-foreground); font-size: 1.125rem; animation: jahBounce 2s infinite; } @keyframes jahBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ========================================================================== INNER HERO (about/services/philosophy/contact pages) ========================================================================== */ .jah-inner-hero { position: relative; padding: 8rem 0 6rem; overflow: hidden; } @media (min-width: 768px) { .jah-inner-hero { padding: 10rem 0 8rem; } } .jah-inner-hero__glow { position: absolute; top: 33%; width: 600px; height: 600px; opacity: 0.2; pointer-events: none; } .jah-inner-hero__content { position: relative; z-index: 10; max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .jah-inner-hero__content { padding: 0 3rem; } } .jah-inner-hero__title { font-size: 2.25rem; font-weight: 900; line-height: 1.3em; color: var(--jah-foreground); margin-bottom: 1.5rem; max-width: 1100px; } @media (min-width: 768px) { .jah-inner-hero__title { font-size: 3.75rem; } } @media (min-width: 1024px) { .jah-inner-hero__title { font-size: 4.5rem; } } .jah-inner-hero__subtitle { font-size: 1.125rem; color: var(--jah-muted-fg); line-height: 1.7; max-width: 800px; } /* ========================================================================== WHAT WE DO (carousel) ========================================================================== */ .jah-wwd { padding: 6rem 0; background: transparent; } @media (min-width: 768px) { .jah-wwd { padding: 8rem 0; } } .jah-wwd__head { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 4rem; } @media (min-width: 768px) { .jah-wwd__head { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .jah-wwd__desc { max-width: 700px; font-size: 0.95rem; font-weight: 700; color: var(--jah-foreground); line-height: 1.7; margin-bottom: 1.5rem; } @media (min-width: 768px) { .jah-wwd__desc { font-size: 1.125rem; } } .jah-wwd__cta { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; font-weight: 700; color: #ffffff; transition: color 0.3s; } .jah-wwd__cta:hover { color: var(--jah-primary); } .jah-wwd__rail { position: relative; } .jah-wwd__nav { position: absolute; top: -3.5rem; z-index: 20; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border: 0; color: var(--jah-foreground); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; } .jah-wwd__nav:hover { background: rgba(255, 255, 255, 0.2); } .jah-wwd__nav--prev { inset-inline-end: 3.5rem; } .jah-wwd__nav--next { inset-inline-end: 0.5rem; } .jah-wwd__track { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .jah-wwd__track::-webkit-scrollbar { display: none; } .jah-wwd__card { min-width: 300px; flex-shrink: 0; aspect-ratio: 4/5; border-radius: 1rem; overflow: hidden; position: relative; border: 1px solid rgba(0, 102, 255, 0.2); box-shadow: 0 8px 32px rgba(8, 12, 26, 0.5); cursor: pointer; background-size: cover; background-position: center; } @media (min-width: 768px) { .jah-wwd__card { min-width: 350px; } } @media (min-width: 1024px) { .jah-wwd__card { min-width: 400px; } } .jah-wwd__card-fallback { background: radial-gradient(ellipse at top right, #3385ff 0%, transparent 55%), radial-gradient(ellipse at bottom left, #0a52ff 0%, transparent 55%), linear-gradient(160deg, #0066ff 0%, #0066ff 50%, #0a52ff 100%); } .jah-wwd__card-darken { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 50%); } .jah-wwd__card-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; font-size: 1.25rem; font-weight: 700; color: #ffffff; z-index: 10; line-height: 1.3; transition: opacity 0.3s; } @media (min-width: 768px) { .jah-wwd__card-title { font-size: 1.875rem; } } .jah-wwd__card-overlay { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; padding: 1rem; text-align: center; } .jah-wwd__card:hover .jah-wwd__card-overlay, .jah-wwd__card.is-active .jah-wwd__card-overlay { opacity: 1; } .jah-wwd__card:hover .jah-wwd__card-title, .jah-wwd__card.is-active .jah-wwd__card-title { opacity: 0; } .jah-wwd__card-overlay h3 { font-size: 1.5rem; font-weight: 700; color: #ffffff; margin-bottom: 2rem; } .jah-wwd__card-overlay-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 9999px; background: #ffffff; color: #000000; font-weight: 700; font-size: 0.875rem; transition: background 0.3s; } .jah-wwd__card-overlay-link:hover { background: rgba(255, 255, 255, 0.9); } /* ========================================================================== ACHIEVEMENTS (counters) ========================================================================== */ .jah-ach { padding: 6rem 0; position: relative; overflow: hidden; } @media (min-width: 768px) { .jah-ach { padding: 8rem 0; } } .jah-ach__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; opacity: 0.2; background: radial-gradient(circle, rgba(0, 102, 255, 0.3), transparent 70%); } .jah-ach__head { text-align: center; margin-bottom: 5rem; position: relative; z-index: 10; } .jah-ach__title { font-size: 1.625rem; font-weight: 900; color: var(--jah-foreground); line-height: 1.4em; margin: 0 auto 1.5rem; max-width: 900px; } @media (min-width: 768px) { .jah-ach__title { font-size: 3rem; } } @media (min-width: 1024px) { .jah-ach__title { font-size: 3.75rem; } } .jah-ach__subtitle { color: var(--jah-muted-fg); font-size: 1.125rem; max-width: 600px; margin: 0 auto; } .jah-ach__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 900px; margin: 0 auto; position: relative; z-index: 10; } @media (min-width: 768px) { .jah-ach__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } .jah-ach__item { text-align: center; } .jah-ach__icon { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; background: rgba(0, 102, 255, 0.1); border: 1px solid rgba(0, 102, 255, 0.2); color: var(--jah-primary); font-size: 1.5rem; transition: all 0.3s; } .jah-ach__item:hover .jah-ach__icon { background: rgba(0, 102, 255, 0.2); border-color: rgba(0, 102, 255, 0.4); } .jah-ach__value { font-size: 2.25rem; font-weight: 900; color: var(--jah-foreground); margin-bottom: 0.5rem; direction: ltr; } @media (min-width: 768px) { .jah-ach__value { font-size: 3rem; } } .jah-ach__label { font-size: 0.9rem; font-weight: 500; color: var(--jah-muted-fg); } /* ========================================================================== WHY JAH ========================================================================== */ .jah-why { padding: 5rem 0; position: relative; overflow: hidden; } @media (min-width: 768px) { .jah-why { padding: 7rem 0; } } .jah-why__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(140, 60, 180, 0.6), transparent 70%); } .jah-why__inner { position: relative; z-index: 10; } .jah-why__head { margin-bottom: 3rem; } .jah-why__title { font-size: 2.25rem; font-weight: 900; color: #ffffff; margin-bottom: 1rem; } .jah-why__subtitle { color: rgba(255, 255, 255, 0.7); font-size: 1rem; max-width: 700px; } @media (min-width: 768px) { .jah-why__subtitle { font-size: 1.125rem; } } .jah-why__grid { display: grid; gap: 1px; border-radius: 1rem; overflow: hidden; } @media (min-width: 768px) { .jah-why__grid { grid-template-columns: repeat(3, 1fr); } } .jah-why__item { padding: 2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); } .jah-why__item h3 { font-size: 1.125rem; font-weight: 700; color: #ffffff; margin-bottom: 1.5rem; } .jah-why__icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); font-size: 1.25rem; } .jah-why__desc { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; line-height: 1.7; } /* ========================================================================== CLIENTS MARQUEE ========================================================================== */ .jah-clients { padding: 5rem 0; background: transparent; } .jah-clients__head { text-align: center; margin-bottom: 3.5rem; } .jah-clients__eyebrow { font-size: 0.875rem; font-weight: 500; color: var(--jah-muted-fg); letter-spacing: 0.1em; margin-bottom: 1rem; } .jah-clients__title { font-size: 1.875rem; font-weight: 900; color: var(--jah-foreground); margin-bottom: 1rem; } @media (min-width: 768px) { .jah-clients__title { font-size: 3rem; } } .jah-clients__subtitle { color: var(--jah-muted-fg); font-size: 1rem; } .jah-clients__row { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.25rem; overflow: hidden; margin-bottom: 0.75rem; } @media (min-width: 768px) { .jah-clients__row { gap: 0.75rem; margin-bottom: 3.5rem; } } .jah-clients__row + .jah-clients__row { margin-bottom: 0; } .jah-clients__row img { height: 4rem; flex: 1 1 0; min-width: 0; max-width: 14.28%; object-fit: contain; filter: brightness(0) invert(1); } @media (min-width: 768px) { .jah-clients__row img { height: 6rem; } } /* ========================================================================== COMPANY PROFILE ========================================================================== */ .jah-cprofile { padding: 2.5rem 0; } @media (min-width: 768px) { .jah-cprofile { padding: 3.5rem 0; } } .jah-cprofile__card { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(0, 102, 255, 0.3); background: rgba(13, 17, 36, 0.8); backdrop-filter: blur(20px); padding: 2rem 1.5rem; max-width: 720px; margin: 0 auto; } @media (min-width: 768px) { .jah-cprofile__card { padding: 2.5rem; } } .jah-cprofile__bg-glow1, .jah-cprofile__bg-glow2 { position: absolute; width: 24rem; height: 24rem; border-radius: 9999px; pointer-events: none; filter: blur(120px); } .jah-cprofile__bg-glow1 { top: -8rem; right: -8rem; background: rgba(0, 102, 255, 0.2); } .jah-cprofile__bg-glow2 { bottom: -8rem; left: -8rem; background: rgba(0, 102, 255, 0.15); } .jah-cprofile__watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; max-height: 70%; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.04; z-index: 0; pointer-events: none; user-select: none; } .jah-cprofile__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } @media (min-width: 768px) { .jah-cprofile__inner { gap: 1.25rem; } } .jah-cprofile__icon-wrap { position: relative; } .jah-cprofile__icon-glow { position: absolute; inset: 0; background: rgba(0, 102, 255, 0.4); filter: blur(32px); border-radius: 9999px; animation: jahGlowPulse 3s ease-in-out infinite; } .jah-cprofile__icon { position: relative; width: 3rem; height: 3rem; border-radius: 1rem; border: 1px solid rgba(0, 102, 255, 0.4); background: rgba(0, 102, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--jah-primary); font-size: 1.5rem; backdrop-filter: blur(8px); } @media (min-width: 768px) { .jah-cprofile__icon { width: 3.5rem; height: 3.5rem; } } .jah-cprofile__title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; background: linear-gradient(135deg, #ffffff, #80a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 768px) { .jah-cprofile__title { font-size: 1.875rem; } } @media (min-width: 1024px) { .jah-cprofile__title { font-size: 2.25rem; } } .jah-cprofile__divider { width: 5rem; height: 1px; background: linear-gradient(to right, transparent, rgba(0, 102, 255, 0.6), transparent); } .jah-cprofile__buttons { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .jah-cprofile__buttons { flex-direction: row; } } @keyframes jahGlowPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* ========================================================================== FAQ ========================================================================== */ .jah-faq { padding: 6rem 0; } @media (min-width: 768px) { .jah-faq { padding: 8rem 0; } } .jah-faq__grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .jah-faq__grid { grid-template-columns: 2fr 3fr; gap: 3rem; } } .jah-faq__title { font-size: 1.75rem; font-weight: 900; color: var(--jah-foreground); } @media (min-width: 768px) { .jah-faq__title { font-size: 3.75rem; } } .jah-faq__list { width: 100%; } .jah-faq__item { border-bottom: 1px solid var(--jah-border); } .jah-faq__q { width: 100%; background: transparent; border: 0; color: var(--jah-foreground); display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; text-align: start; gap: 1rem; font-size: 1.125rem; font-weight: 500; cursor: pointer; } .jah-faq__q i { flex-shrink: 0; color: var(--jah-muted-fg); transition: color 0.3s; } .jah-faq__a { overflow: hidden; max-height: 0; transition: max-height 0.3s ease, padding 0.3s ease; } .jah-faq__item.is-open .jah-faq__a { max-height: 500px; padding-bottom: 1.5rem; } .jah-faq__a p { color: var(--jah-muted-fg); line-height: 1.8; margin: 0; } /* ========================================================================== FOOTER ========================================================================== */ .jah-footer { padding: 4rem 0; } .jah-footer__grid { display: grid; gap: 3rem; margin-bottom: 4rem; } @media (min-width: 768px) { .jah-footer__grid { grid-template-columns: repeat(4, 1fr); } } .jah-footer__about img { height: 64px; width: auto; margin-bottom: 1rem; } .jah-footer__desc { font-size: 0.875rem; color: var(--jah-muted-fg); line-height: 1.7; } .jah-footer__socials { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .jah-footer__socials a { color: var(--jah-muted-fg); font-size: 1.125rem; transition: color 0.3s; } .jah-footer__socials a:hover { color: var(--jah-foreground); } .jah-footer__col h4 { color: var(--jah-foreground); font-weight: 700; font-size: 0.875rem; margin-bottom: 1.5rem; } .jah-footer__links { display: flex; flex-direction: column; gap: 0.75rem; } .jah-footer__links a, .jah-footer__links span { font-size: 0.875rem; color: var(--jah-muted-fg); transition: color 0.3s; } .jah-footer__links a:hover, .jah-footer__links span:hover { color: var(--jah-foreground); } .jah-footer__contact-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--jah-muted-fg); } .jah-footer__contact-item i { flex-shrink: 0; } .jah-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--jah-border); } @media (min-width: 768px) { .jah-footer__bottom { flex-direction: row; } } .jah-footer__copyright, .jah-footer__top-btn { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); background: transparent; border: 0; cursor: pointer; } .jah-footer__top-btn:hover { color: var(--jah-foreground); } .jah-footer__credit { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin-top: 1rem; text-align: center; } .jah-footer__credit a { color: rgba(255, 255, 255, 0.5); text-decoration: none; } .jah-footer__credit a:hover { color: var(--jah-foreground); } /* ========================================================================== ABOUT STORY (2-col grid) ========================================================================== */ .jah-about-story { padding: 6rem 0; } .jah-about-story__inner { max-width: 1100px; margin: 0 auto; } .jah-about-story__grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .jah-about-story__grid { grid-template-columns: 1fr 1fr; } } .jah-about-story__col h2 { font-size: 2.25rem; font-weight: 900; color: var(--jah-foreground); margin-bottom: 1.5rem; } .jah-about-story__col p { color: var(--jah-muted-fg); line-height: 1.8; margin: 0 0 1.5rem; } .jah-about-story__col p:last-child { margin-bottom: 0; } /* ========================================================================== ABOUT VALUES (grid) ========================================================================== */ .jah-values { padding: 6rem 0; position: relative; } .jah-values__head { text-align: center; margin-bottom: 4rem; position: relative; z-index: 1; } .jah-values__title { font-size: 2.25rem; font-weight: 900; color: var(--jah-foreground); } @media (min-width: 768px) { .jah-values__title { font-size: 3rem; } } .jah-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; padding-top: 2rem; position: relative; z-index: 1; } @media (min-width: 768px) { .jah-values__grid { grid-template-columns: repeat(3, 1fr); } } .jah-values__item { border-radius: 1rem; padding: 1.5rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, #181f26 0%, #11192b 100%); transition: all 0.3s; } .jah-values__item:hover { transform: translateY(-4px); border-color: rgba(0, 102, 255, 0.3); } .jah-values__icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; background: rgba(0, 102, 255, 0.1); border: 1px solid rgba(0, 102, 255, 0.2); color: var(--jah-primary); font-size: 1.25rem; } .jah-values__item h3 { font-size: 0.95rem; font-weight: 700; color: var(--jah-foreground); } /* ========================================================================== SERVICES GRID (services page) ========================================================================== */ .jah-services-grid { padding: 6rem 0; } .jah-services-grid__inner { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .jah-services-grid__inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .jah-services-grid__inner { grid-template-columns: repeat(3, 1fr); } } .jah-services-grid__card { display: block; border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(135deg, #181f26 0%, #11192b 100%); transition: all 0.5s ease; color: inherit; } .jah-services-grid__card:hover { transform: translateY(-4px); border-color: rgba(0, 102, 255, 0.3); } .jah-services-grid__icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: #ffffff; font-size: 1.25rem; transition: transform 0.3s; } .jah-services-grid__card:hover .jah-services-grid__icon { transform: scale(1.1); } .jah-services-grid__card h3 { font-size: 1.125rem; font-weight: 700; color: var(--jah-foreground); margin-bottom: 0.5rem; } .jah-services-grid__desc { font-size: 0.875rem; color: var(--jah-muted-fg); line-height: 1.7; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jah-services-grid__items { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; } .jah-services-grid__items div { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.875rem; color: var(--jah-muted-fg); line-height: 1.7; } .jah-services-grid__bullet { width: 4px; height: 4px; border-radius: 9999px; background: var(--jah-primary); flex-shrink: 0; margin-top: 0.6rem; } .jah-services-grid__more { font-size: 0.75rem; color: var(--jah-primary); margin-top: 0.5rem; display: inline-block; } .jah-services-grid__discover { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.75rem; color: var(--jah-muted-fg); transition: color 0.3s; } .jah-services-grid__card:hover .jah-services-grid__discover { color: var(--jah-primary); } /* ========================================================================== SERVICE DETAIL (single template) ========================================================================== */ .jah-svc-hero { padding: 8rem 0 6rem; position: relative; overflow: hidden; } @media (min-width: 768px) { .jah-svc-hero { padding: 10rem 0 8rem; } } .jah-svc-hero__darken { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); } .jah-svc-hero__glow { position: absolute; top: 33%; right: 25%; width: 500px; height: 500px; opacity: 0.3; background: radial-gradient(circle, rgba(34, 90, 175, 0.4), transparent 70%); } .jah-svc-hero__inner { position: relative; z-index: 10; max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .jah-svc-hero__inner { padding: 0 3rem; } } .jah-svc-hero__back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 2rem; transition: color 0.3s; } .jah-svc-hero__back:hover { color: #ffffff; } .jah-svc-hero__icon { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); color: #ffffff; font-size: 1.875rem; margin-bottom: 1.5rem; } .jah-svc-hero__title { font-size: 2.25rem; font-weight: 900; color: #ffffff; line-height: 1.2; margin-bottom: 1.5rem; } @media (min-width: 768px) { .jah-svc-hero__title { font-size: 3.75rem; } } @media (min-width: 1024px) { .jah-svc-hero__title { font-size: 4.5rem; } } .jah-svc-hero__desc { font-size: 1.125rem; color: rgba(255, 255, 255, 0.7); max-width: 800px; line-height: 1.7; } @media (min-width: 768px) { .jah-svc-hero__desc { font-size: 1.25rem; } } /* ========================================================================== Service hero — flat dark navy gradient, NO image. Applies to every individual service detail page. These overrides defeat the inline style="background-image: ...url(...)" that the widget emits, so the photo never renders. ========================================================================== */ .jah-svc-hero, .jah-w .jah-svc-hero { background: linear-gradient(225deg, #0a1530 0%, #050a1a 60%, #02050f 100%) !important; background-image: linear-gradient(225deg, #0a1530 0%, #050a1a 60%, #02050f 100%) !important; background-color: #050a1a !important; background-size: auto !important; background-position: 0 0 !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } .jah-svc-hero__glow, .jah-svc-hero__darken { display: none !important; } .jah-svc-hero__icon { background: rgba(255, 255, 255, 0.08) !important; } .jah-svc-body { padding: 6rem 0; } .jah-svc-body__inner { max-width: 1100px; margin: 0 auto; } .jah-svc-body__title { font-size: 2.25rem; font-weight: 900; color: var(--jah-foreground); margin-bottom: 3rem; } .jah-svc-body__items { display: grid; gap: 1rem; } @media (min-width: 768px) { .jah-svc-body__items { grid-template-columns: 1fr 1fr; } } .jah-svc-body__item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(135deg, #181f26 0%, #11192b 100%); transition: border-color 0.3s; } .jah-svc-body__item:hover { border-color: rgba(0, 102, 255, 0.3); } .jah-svc-body__item i { color: var(--jah-primary); margin-top: 0.25rem; flex-shrink: 0; } .jah-svc-body__item span { color: var(--jah-foreground); font-weight: 500; } .jah-svc-nav { max-width: 1100px; margin: 5rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .jah-svc-nav a { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--jah-muted-fg); transition: color 0.3s; } .jah-svc-nav a:hover { color: var(--jah-foreground); } /* ========================================================================== PHILOSOPHY BLOCK (12-col grid) ========================================================================== */ .jah-philo { padding: 5rem 0; } @media (min-width: 768px) { .jah-philo { padding: 7rem 0; } } .jah-philo--alt { position: relative; overflow: hidden; background: linear-gradient(160deg, #14213d 0%, #1f3fff14 100%); } .jah-philo--alt::before { content: ""; position: absolute; top: -5rem; right: -5rem; width: 500px; height: 500px; opacity: 0.2; background: radial-gradient(circle, rgba(0, 102, 255, 0.5), transparent 70%); pointer-events: none; } .jah-philo__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: flex-start; position: relative; z-index: 10; } @media (min-width: 768px) { .jah-philo__grid { grid-template-columns: 1fr 2fr; } } .jah-philo__icon { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #ffffff; font-size: 1.5rem; } .jah-philo__title { font-size: 1.875rem; font-weight: 900; color: var(--jah-foreground); line-height: 1.2; } @media (min-width: 768px) { .jah-philo__title { font-size: 2.25rem; } } .jah-philo__text { font-size: 1rem; color: var(--jah-muted-fg); line-height: 2; } @media (min-width: 768px) { .jah-philo__text { font-size: 1.125rem; } } /* ========================================================================== PARTNERS SECTION ========================================================================== */ .jah-partners { padding: 5rem 0; background: transparent; } @media (min-width: 768px) { .jah-partners { padding: 7rem 0; } } .jah-partners__head { display: grid; gap: 2.5rem; align-items: flex-start; margin-bottom: 5rem; } @media (min-width: 768px) { .jah-partners__head { grid-template-columns: 7fr 5fr; gap: 2.5rem; } } .jah-partners__title { font-size: 1.875rem; font-weight: 900; color: var(--jah-foreground); margin-bottom: 1.5rem; } @media (min-width: 768px) { .jah-partners__title { font-size: 3rem; } } .jah-partners__desc { color: var(--jah-muted-fg); line-height: 1.9; font-size: 1rem; } @media (min-width: 768px) { .jah-partners__desc { font-size: 1.125rem; } } .jah-partners__quote { border-radius: 1rem; padding: 2rem; border: 1px solid var(--jah-border); background: linear-gradient(135deg, #1c1438 0%, #0c1124 100%); height: 100%; display: flex; align-items: center; } @media (min-width: 768px) { .jah-partners__quote { padding: 2.5rem; } } .jah-partners__quote p { font-size: 1.25rem; font-weight: 700; color: var(--jah-foreground); line-height: 1.6; } @media (min-width: 768px) { .jah-partners__quote p { font-size: 1.5rem; } } .jah-partners__intro { text-align: center; color: var(--jah-muted-fg); margin: 0 auto 2.5rem; max-width: 800px; font-size: 1rem; line-height: 1.7; } @media (min-width: 768px) { .jah-partners__intro { font-size: 1.125rem; margin-bottom: 3.5rem; } } /* ========================================================================== CONTACT SECTION ========================================================================== */ .jah-contact { padding: 6rem 0; } .jah-contact__grid { display: grid; gap: 2rem; max-width: 1200px; margin: 0 auto; } @media (min-width: 1024px) { .jah-contact__grid { grid-template-columns: 3fr 2fr; } } .jah-contact__form-wrap { border-radius: 1rem; padding: 2rem; border: 1px solid var(--jah-border); background: linear-gradient(135deg, #181f26 0%, #11192b 100%); } @media (min-width: 768px) { .jah-contact__form-wrap { padding: 2.5rem; } } .jah-contact__form-title { font-size: 1.25rem; font-weight: 700; color: var(--jah-foreground); margin-bottom: 1.5rem; } .jah-contact__form .jah-row { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; } @media (min-width: 768px) { .jah-contact__form .jah-row--two { grid-template-columns: 1fr 1fr; } } .jah-contact__form label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--jah-foreground); margin-bottom: 0.5rem; } .jah-contact__form input, .jah-contact__form select, .jah-contact__form textarea { width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--jah-secondary); border: 1px solid var(--jah-border-strong); color: var(--jah-foreground); font-family: inherit; font-size: 1rem; transition: border-color 0.3s; } .jah-contact__form input::placeholder, .jah-contact__form textarea::placeholder { color: var(--jah-muted-fg); } .jah-contact__form input:focus, .jah-contact__form select:focus, .jah-contact__form textarea:focus { outline: none; border-color: var(--jah-primary); } .jah-contact__form textarea { resize: none; } .jah-contact__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .jah-contact__submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 0.5rem; font-weight: 700; color: var(--jah-foreground); border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; transition: all 0.3s; cursor: pointer; } .jah-contact__submit:hover { background: rgba(255, 255, 255, 0.1); } .jah-contact__submit:disabled { opacity: 0.6; cursor: not-allowed; } .jah-contact__alert { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1.25rem; display: none; } .jah-contact__alert.is-success { display: block; background: rgba(20, 80, 50, 0.3); border: 1px solid rgba(20, 120, 60, 0.3); color: #aaffcc; } .jah-contact__alert.is-error { display: block; background: rgba(120, 30, 30, 0.3); border: 1px solid rgba(160, 40, 40, 0.3); color: #ffbbbb; } .jah-contact__cards { display: flex; flex-direction: column; gap: 1.5rem; } .jah-contact__card { border-radius: 1rem; padding: 1.5rem; text-align: center; border: 1px solid var(--jah-border); background: linear-gradient(135deg, #181f26 0%, #11192b 100%); transition: all 0.5s; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .jah-contact__card:hover { transform: translateY(-4px); border-color: rgba(0, 102, 255, 0.3); } .jah-contact__card-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; background: rgba(0, 102, 255, 0.1); border: 1px solid rgba(0, 102, 255, 0.2); color: var(--jah-primary); font-size: 1.125rem; } .jah-contact__card h3 { font-size: 1.125rem; font-weight: 700; color: var(--jah-foreground); margin-bottom: 0.25rem; } .jah-contact__card p { color: var(--jah-muted-fg); font-size: 0.875rem; margin: 0; } .jah-contact__socials { margin-top: 3rem; text-align: center; } .jah-contact__socials h3 { font-size: 1.25rem; font-weight: 700; color: var(--jah-foreground); margin-bottom: 1.5rem; } .jah-contact__socials-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .jah-contact__social { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--jah-border); background: rgba(0, 102, 255, 0.1); color: var(--jah-muted-fg); font-size: 1.125rem; transition: all 0.3s; } .jah-contact__social:hover { color: var(--jah-foreground); border-color: rgba(0, 102, 255, 0.3); transform: translateY(-4px); } /* ========================================================================== ANIMATIONS / REVEAL ========================================================================== */ .jah-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .jah-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== LTR OVERRIDES (English / WPML) When the .jah-w wrapper inherits LTR. These rules adapt any element that was intentionally pointed in the RTL reading direction (left-pointing arrows, RTL-only positions). Centered content, full-width bars, and decorative absolute positions are left alone — they look correct in either direction. ========================================================================== */ /* Flip "read more / next" arrows that were drawn pointing left for RTL. In LTR they should point right — same semantic, opposite glyph. */ .jah-w[dir="ltr"] .jah-services-grid__discover .fa-arrow-left, html[dir="ltr"] .jah-w .jah-services-grid__discover .fa-arrow-left, .jah-w[dir="ltr"] .jah-wwd__cta .fa-arrow-left, html[dir="ltr"] .jah-w .jah-wwd__cta .fa-arrow-left, .jah-w[dir="ltr"] .jah-svc__cta .fa-arrow-left, html[dir="ltr"] .jah-w .jah-svc__cta .fa-arrow-left, .jah-w[dir="ltr"] .jah-svc__nav .fa-arrow-left, html[dir="ltr"] .jah-w .jah-svc__nav .fa-arrow-left, .jah-w[dir="ltr"] .jah-svc__nav .fa-arrow-right, html[dir="ltr"] .jah-w .jah-svc__nav .fa-arrow-right { display: inline-block; transform: scaleX(-1); } /* In RTL the carousel "next" sat on the right side of the rail. In LTR the rail itself flows left-to-right, so the absolute positions also flip via the `inset-inline-end` rule above. No extra override needed. */