/* ==========================================================================
TRANSTEC TRANSLATION - Design System & Core Styles
Version: 1.0.0
========================================================================== */
/* ==========================================================================
1. CSS Custom Properties (Design Tokens)
========================================================================== */
/* ==========================================================================
Self-hosted IBM Plex Sans Arabic (SIL Open Font License 1.1)
==========================================================================
Previously loaded from fonts.googleapis.com, which put the font files
three hops deep (HTML -> Google CSS -> woff2). They landed ~1,450 ms in,
long after first paint, which both blocked render and caused the headline
to re-wrap on swap (CLS 0.26 desktop / 0.213 mobile).
Serving them from this origin lets the two critical faces be preloaded so
they arrive before first paint. Cyrillic and latin-ext subsets are not
shipped: this site has no content that needs them. */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Colors - Brand */
--color-primary: #1B365D;
--color-primary-light: #2A4A7F;
--color-primary-dark: #0F2040;
--color-primary-rgb: 27, 54, 93;
--color-secondary: #C8102E;
--color-secondary-light: #E8143A;
--color-secondary-dark: #A00D24;
--color-secondary-rgb: 200, 16, 46;
--color-accent: #D4A843;
--color-accent-light: #E0BD6A;
--color-accent-dark: #B8912E;
--color-accent-rgb: 212, 168, 67;
/* Colors - Neutral */
--color-white: #FFFFFF;
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
--color-black: #030712;
/* Colors - Semantic */
--color-success: #059669;
--color-warning: #D97706;
--color-error: #DC2626;
--color-info: #2563EB;
/* Colors - Background */
--bg-primary: var(--color-white);
--bg-secondary: var(--color-gray-50);
--bg-tertiary: var(--color-gray-100);
--bg-dark: var(--color-primary);
--bg-darker: var(--color-primary-dark);
/* Colors - Text */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
--text-inverse: var(--color-white);
--text-link: var(--color-primary);
--text-link-hover: var(--color-primary-light);
/* Typography */
--font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
/* Inter was requested but never used: --font-en only applies under
[dir="ltr"] and every page on this site is Arabic. */
--font-en: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: var(--font-ar);
--font-heading: var(--font-ar);
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Font Sizes - Fluid */
--fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
--fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
--fs-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
--fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--fs-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
--fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--fs-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
--fs-3xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
--fs-4xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
--fs-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
/* Font Weights */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Line Heights */
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-normal: 1.6;
--lh-relaxed: 1.75;
/* Long-form reading scale. Body copy at --fs-base/1.75 measured tight for
sustained Arabic reading; this is a touch larger and more open, used by
the article / page / service prose wrappers. */
--fs-reading: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
--lh-reading: 1.9;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
/* Container */
--container-max: 1280px;
--container-padding: 1.25rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;
--transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Z-Index */
--z-dropdown: 100;
--z-sticky: 200;
--z-header: 300;
--z-mobile-nav: 400;
--z-overlay: 500;
--z-modal: 600;
}
/* RTL Overrides */
[dir="rtl"] {
--font-body: var(--font-ar);
--font-heading: var(--font-ar);
}
[dir="ltr"] {
--font-body: var(--font-en);
--font-heading: var(--font-en);
}
/* ==========================================================================
2. Reset & Base
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* `overflow-x: hidden` on body alone does not contain leftward overflow in an
RTL document: the root still sizes to it, so the page renders narrower than
the viewport and parks against the right edge, leaving a blank gutter on the
left (measured 187px on a 390px viewport). Constraining the root as well is
what actually contains it. */
html {
overflow-x: hidden;
max-width: 100%;
}
body {
max-width: 100%;
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
color: var(--text-primary);
background-color: var(--bg-primary);
overflow-x: hidden;
}
body.modal-open {
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary);
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
font-size: inherit;
color: inherit;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--text-primary);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }
p {
margin-bottom: var(--space-md);
line-height: var(--lh-normal);
}
p:last-child {
margin-bottom: 0;
}
/* ==========================================================================
3. Layout
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.section {
padding-block: var(--space-4xl);
}
.section--lg {
padding-block: var(--space-5xl);
}
.section--sm {
padding-block: var(--space-2xl);
}
.section--dark {
background-color: var(--bg-dark);
color: var(--text-inverse);
}
.section--gray {
background-color: var(--bg-secondary);
}
.section__header {
text-align: center;
max-width: 700px;
margin-inline: auto;
margin-bottom: var(--space-3xl);
}
.section__badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-md);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
letter-spacing: 0.02em;
}
.section__title {
margin-bottom: var(--space-md);
color: var(--text-primary);
}
.section__desc {
font-size: var(--fs-lg);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
.section--dark .section__badge {
background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
color: var(--color-white);
}
/* Any heading on a dark band, not just those carrying .section__title.
Templates that write a plain were falling through to the global
near-black heading colour and vanishing into the background. */
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark .section__title {
color: var(--color-white);
}
.section--dark p,
.section--dark li {
color: color-mix(in srgb, var(--color-white) 82%, transparent);
}
.section--dark .section__desc {
color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
/* ==========================================================================
4. Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 0.75rem 1.75rem;
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
line-height: 1;
border-radius: var(--radius-lg);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
text-decoration: none;
}
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn--primary {
background-color: var(--color-secondary);
color: var(--color-white);
border-color: var(--color-secondary);
}
.btn--primary:hover {
background-color: var(--color-secondary-dark);
border-color: var(--color-secondary-dark);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-secondary) 35%, transparent);
}
.btn--secondary {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-light);
border-color: var(--color-primary-light);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.btn--outline {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
transform: translateY(-2px);
}
.btn--white {
background-color: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
.btn--white:hover {
background-color: var(--color-gray-100);
border-color: var(--color-gray-100);
color: var(--color-primary);
transform: translateY(-2px);
}
.btn--outline-white {
background-color: transparent;
color: var(--color-white);
border-color: color-mix(in srgb, var(--color-white) 50%, transparent);
}
.btn--outline-white:hover {
background-color: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
transform: translateY(-2px);
}
.btn--sm {
padding: 0.5rem 1.25rem;
font-size: var(--fs-sm);
}
.btn--lg {
padding: 1rem 2.25rem;
font-size: var(--fs-md);
}
.btn--block {
width: 100%;
}
.btn--icon {
padding: 0.75rem;
border-radius: var(--radius-md);
}
/* ==========================================================================
5. Top Bar
========================================================================== */
.topbar {
/* Matched to the hero's mid tone so the strip reads as one blue with the
section below it, rather than a darker band. */
background-color: var(--color-primary);
color: var(--color-white);
padding: 0.5rem 0;
font-size: var(--fs-sm);
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Desktop only: the info block otherwise hugs the container's leading edge,
while the nav below starts 279px in (.header__actions is 187px wide plus a
92px flex gap). Padding that much makes the trailing item (الخميس) line up
directly above the last nav link (اتصل بنا). */
@media (min-width: 1024px) {
.topbar__inner {
padding-inline-end: 293px;
}
}
.topbar__info {
display: flex;
align-items: center;
gap: var(--space-md);
}
.topbar__item {
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* The handset glyph is drawn for LTR; mirroring it makes the cord and
earpiece face the right way in Arabic. Scoped to the tel link so the
clock icon beside it is left alone. */
[dir="rtl"] .topbar__info a[href^="tel:"] svg {
transform: scaleX(-1);
}
.topbar__item svg {
opacity: 0.8;
}
.topbar__divider {
opacity: 0.3;
}
.topbar__hours {
opacity: 0.9;
}
.topbar__actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* Language Switcher */
/* ==========================================================================
6. Header
========================================================================== */
.site-header {
background-color: var(--color-white);
position: sticky;
top: 0;
z-index: var(--z-header);
border-bottom: 1px solid var(--color-gray-200);
transition: box-shadow var(--transition-base);
}
.site-header.is-stuck {
box-shadow: var(--shadow-lg);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.header__logo a {
display: flex;
align-items: center;
}
.header__logo img,
.header__logo svg {
height: 48px;
width: auto;
/* Reserve width before the SVG loads, otherwise the header reflows. */
aspect-ratio: 724 / 151;
}
.header__nav {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
align-items: center;
gap: 0;
}
.nav-list > li {
position: relative;
}
.nav-list > li > a {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.85rem;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--text-primary);
transition: color var(--transition-fast);
white-space: nowrap;
}
.nav-list > li > a:hover {
color: var(--color-secondary);
}
.nav-list > li.current-menu-item > a,
.nav-list > li.active > a {
color: var(--color-secondary);
}
/* Per-item menu icons */
.nav-link__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.55;
transition: opacity var(--transition-fast);
}
.nav-list > li > a:hover .nav-link__icon,
.nav-list > li.current-menu-item > a .nav-link__icon,
.nav-list > li.active > a .nav-link__icon {
opacity: 1;
}
.mobile-nav-list > li > a .nav-link__icon {
width: 18px;
height: 18px;
margin-inline-end: 0.65rem;
opacity: 0.6;
}
/* Icon + label sit together; the dropdown arrow is pushed to the far edge. */
.mobile-nav-list > li > a {
gap: 0;
}
.mobile-nav-list > li > a .submenu-arrow {
margin-inline-start: auto;
}
.submenu-arrow {
width: 14px;
height: 14px;
opacity: 0.5;
transition: transform var(--transition-fast);
}
.nav-list > li:hover > a .submenu-arrow {
transform: rotate(180deg);
}
/* Dropdown */
.sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid var(--color-gray-200);
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all var(--transition-base);
z-index: var(--z-dropdown);
}
[dir="rtl"] .sub-menu {
left: auto;
right: 0;
}
.nav-list > li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-menu li a {
display: block;
padding: 0.6rem 1.25rem;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.sub-menu li a:hover {
background-color: var(--color-gray-50);
color: var(--color-secondary);
padding-inline-start: 1.5rem;
}
/* Header Actions */
.header__actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
.header__cta {
font-size: var(--fs-sm);
padding: 0.6rem 1.5rem;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
padding: 0.5rem;
z-index: var(--z-mobile-nav);
}
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
width: 24px;
}
.hamburger__line {
display: block;
width: 100%;
height: 2px;
background-color: var(--text-primary);
border-radius: 2px;
transition: all var(--transition-base);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ==========================================================================
7. Mobile Navigation
========================================================================== */
.mobile-nav {
position: fixed;
top: 0;
right: 0;
width: 320px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background-color: var(--color-white);
z-index: var(--z-mobile-nav);
transform: translateX(100%);
transition: transform var(--transition-slow);
overflow-y: auto;
overscroll-behavior: contain;
}
/* The base rule already anchors the drawer to the inline end and slides it
off to the right, which is the correct RTL behaviour. The override that used
to live here forced it to the left edge instead. */
.mobile-nav.is-open {
transform: translateX(0);
}
.mobile-nav-overlay {
position: fixed;
inset: 0;
background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
z-index: calc(var(--z-mobile-nav) - 1);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
}
.mobile-nav-overlay.is-visible {
opacity: 1;
visibility: visible;
}
.mobile-nav__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem var(--space-lg);
border-bottom: 1px solid var(--color-gray-200);
}
.mobile-nav__logo img,
.mobile-nav__logo svg {
height: 40px;
width: auto;
}
.mobile-nav__close {
padding: 0.5rem;
color: var(--text-secondary);
}
.mobile-nav__content {
padding: var(--space-lg);
}
.mobile-nav-list {
margin-bottom: var(--space-xl);
}
.mobile-nav-list > li {
border-bottom: 1px solid var(--color-gray-100);
}
.mobile-nav-list > li > a {
display: flex;
align-items: center;
/* Icon and label read together from the inline start; only the submenu
chevron is pushed to the far edge. */
justify-content: flex-start;
gap: 0.65rem;
padding: 0.875rem 0;
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.mobile-nav-list > li > a .submenu-arrow {
margin-inline-start: auto;
transition: transform var(--transition-fast);
}
.mobile-nav-list > li > a[aria-expanded="true"] .submenu-arrow {
transform: rotate(180deg);
}
.mobile-nav-list .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
display: none;
background-color: var(--color-gray-50);
border-radius: var(--radius-md);
box-shadow: none;
border: none;
margin-bottom: 0.5rem;
}
.mobile-nav-list .sub-menu.is-open {
display: block;
}
.mobile-nav-list .sub-menu li a {
padding: 0.6rem 1rem;
font-size: var(--fs-sm);
}
.mobile-nav__actions {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
}
/* ==========================================================================
8. Hero Section
========================================================================== */
.hero {
position: relative;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
color: var(--color-white);
overflow: hidden;
min-height: 600px;
display: flex;
align-items: center;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 80px;
background: var(--bg-primary);
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%);
}
[dir="rtl"] .hero::after {
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
padding-block: var(--space-5xl);
}
.hero__content {
max-width: 600px;
}
[dir="rtl"] .hero__content {
margin-right: auto;
margin-left: 0;
}
[dir="ltr"] .hero__content {
margin-left: auto;
margin-right: 0;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
color: var(--color-accent);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-lg);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.hero__title {
font-size: var(--fs-5xl);
font-weight: var(--fw-extrabold);
color: var(--color-white);
margin-bottom: var(--space-lg);
line-height: var(--lh-tight);
}
.hero__title span {
color: var(--color-accent);
}
.hero__desc {
font-size: var(--fs-lg);
color: color-mix(in srgb, var(--color-white) 85%, transparent);
margin-bottom: var(--space-xl);
line-height: var(--lh-relaxed);
max-width: 520px;
}
.hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.hero__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero__image {
width: 100%;
max-width: 500px;
height: auto;
aspect-ratio: 500 / 400;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
}
.hero__floating-card {
position: absolute;
background-color: var(--color-white);
color: var(--text-primary);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
display: flex;
align-items: center;
gap: var(--space-md);
animation: float 3s ease-in-out infinite;
}
.hero__floating-card--1 {
top: 10%;
right: -10%;
animation-delay: 0s;
}
[dir="rtl"] .hero__floating-card--1 {
right: auto;
left: -10%;
}
.hero__floating-card--2 {
bottom: 15%;
left: -5%;
animation-delay: 1.5s;
}
[dir="rtl"] .hero__floating-card--2 {
left: auto;
right: -5%;
}
.hero__floating-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero__floating-icon--green {
background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--color-success);
}
.hero__floating-icon--blue {
background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
}
.hero__floating-text {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
}
.hero__floating-subtext {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ==========================================================================
9. Stats Section
========================================================================== */
.stats {
background-color: var(--bg-primary);
padding-block: var(--space-3xl);
margin-top: -40px;
position: relative;
z-index: 1;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
}
.stat-card {
text-align: center;
padding: var(--space-xl);
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.stat-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
/* Each stat carries its own accent so the row reads as four distinct facts
rather than one block of navy numerals. --stat-accent is set per modifier
below and drives the icon, its tint, the numeral and the top rule. */
.stat-card {
--stat-accent: var(--color-primary);
--stat-accent-text: var(--color-primary);
}
/* Two shades per stat: --stat-accent stays vivid for the icon, its tint and
the top rule, all of which are decorative. --stat-accent-text is the shade
the numeral uses and every one clears 4.5:1 on white. The gold measured
2.95:1 as text, which is what PageSpeed flagged on desktop; the green was a
borderline 3.77:1. */
.stat-card--experience {
--stat-accent: var(--color-accent-dark);
--stat-accent-text: #856410;
}
.stat-card--languages {
--stat-accent: var(--color-info);
--stat-accent-text: var(--color-info);
}
.stat-card--projects {
--stat-accent: var(--color-success);
--stat-accent-text: #047857;
}
.stat-card--satisfaction {
--stat-accent: var(--color-secondary);
--stat-accent-text: var(--color-secondary);
}
.stat-card {
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline: 0;
height: 3px;
background-color: var(--stat-accent);
opacity: 0;
transition: opacity var(--transition-base);
}
.stat-card:hover::before,
.stat-card:focus-within::before {
opacity: 1;
}
.stat-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: var(--space-md);
border-radius: var(--radius-lg);
color: var(--stat-accent);
background-color: color-mix(in srgb, var(--stat-accent) 12%, transparent);
transition: transform var(--transition-base), background-color var(--transition-base);
}
.stat-card:hover .stat-card__icon {
transform: translateY(-2px);
background-color: color-mix(in srgb, var(--stat-accent) 18%, transparent);
}
.stat-card__number {
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
color: var(--stat-accent-text);
line-height: 1;
margin-bottom: var(--space-sm);
}
.stat-card__label {
font-size: var(--fs-sm);
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
/* ==========================================================================
10. Services Section
========================================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.service-card {
position: relative;
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
opacity: 0;
transition: opacity var(--transition-base);
}
.service-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-xl);
transform: translateY(-4px);
}
.service-card:hover::before {
opacity: 1;
}
.service-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-secondary) 10%, transparent));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
color: var(--color-primary);
transition: all var(--transition-base);
}
.service-card__icon svg {
width: 28px;
height: 28px;
}
.service-card:hover .service-card__icon {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: var(--color-white);
}
.service-card__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
color: var(--text-primary);
}
.service-card__desc {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
}
.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-secondary);
transition: gap var(--transition-fast);
}
.service-card__link:hover {
gap: var(--space-sm);
color: var(--color-secondary-dark);
}
.service-card__link svg {
width: 16px;
height: 16px;
}
/* Service Card - Image Variant */
.service-card--image {
display: flex;
flex-direction: column;
padding: 0;
text-decoration: none;
color: inherit;
}
.service-card--image::before {
display: none;
}
.service-card--image .service-card__image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.service-card--image .service-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.service-card--image:hover .service-card__image img {
transform: scale(1.08);
}
.service-card--image .service-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 70%, transparent), color-mix(in srgb, var(--color-secondary) 50%, transparent));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition-base);
}
.service-card--image:hover .service-card__overlay {
opacity: 1;
}
.service-card__icon-overlay {
width: 64px;
height: 64px;
border-radius: var(--radius-full);
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
box-shadow: var(--shadow-xl);
}
.service-card__icon-overlay svg {
width: 32px;
height: 32px;
}
.service-card--image .service-card__content {
padding: var(--space-lg);
}
.service-card--image .service-card__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
color: var(--text-primary);
}
.service-card--image .service-card__desc {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-md);
}
.service-card--image .service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-secondary);
transition: gap var(--transition-fast);
}
.service-card--image:hover .service-card__link {
gap: var(--space-sm);
}
/* ==========================================================================
11. About Section
========================================================================== */
.about-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4xl);
align-items: center;
}
.about-section__content {
order: 1;
}
[dir="rtl"] .about-section__content {
order: 2;
}
.about-section__image {
order: 2;
}
[dir="rtl"] .about-section__image {
order: 1;
}
.about-section__badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-md);
background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
color: var(--color-secondary);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
}
.about-section__title {
margin-bottom: var(--space-lg);
}
.about-section__text {
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-xl);
}
.about-section__features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.about-feature {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.about-feature__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
color: var(--color-success);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-feature__icon svg {
width: 20px;
height: 20px;
}
.about-feature__text {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-primary);
}
.about-image-wrapper {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
}
.about-image-wrapper img {
width: 100%;
height: auto;
object-fit: cover;
}
.about-image-wrapper::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid var(--color-primary);
border-radius: var(--radius-2xl);
opacity: 0.1;
}
/* ==========================================================================
12. Process Section
========================================================================== */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
position: relative;
}
.process-grid::before {
content: '';
position: absolute;
top: 40px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
opacity: 0.2;
}
/* Animated Ball */
/* Step number flash synced with ball arrival */
/* Both RTL and LTR flash in same visual order: 1→2→3→4 */
.process-grid .process-step:nth-child(2) .process-step__number {
animation: step-flash 12s ease-in-out infinite;
}
.process-grid .process-step:nth-child(3) .process-step__number {
animation: step-flash 12s ease-in-out 3s infinite;
}
.process-grid .process-step:nth-child(4) .process-step__number {
animation: step-flash 12s ease-in-out 6s infinite;
}
.process-grid .process-step:nth-child(5) .process-step__number {
animation: step-flash 12s ease-in-out 9s infinite;
}
@keyframes step-flash {
0% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
/* Ball arrives - flash starts */
8% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
12% { box-shadow: 0 0 16px 6px color-mix(in srgb, var(--color-secondary) 45%, transparent); transform: scale(1.1); }
16% { box-shadow: 0 0 24px 10px color-mix(in srgb, var(--color-secondary) 25%, transparent); transform: scale(1.12); }
20% { box-shadow: 0 0 10px 3px color-mix(in srgb, var(--color-secondary) 15%, transparent); transform: scale(1.03); }
24% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
.process-step {
text-align: center;
position: relative;
z-index: 1;
}
.process-step__number {
width: 80px;
height: 80px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: var(--color-white);
font-size: var(--fs-xl);
font-weight: var(--fw-extrabold);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
position: relative;
}
.process-step__number::after {
content: '';
position: absolute;
inset: -6px;
border-radius: var(--radius-full);
border: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.process-step__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
color: var(--text-primary);
}
.process-step__desc {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
/* ==========================================================================
13. Why Us Section
========================================================================== */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.why-card {
padding: var(--space-xl);
background-color: color-mix(in srgb, var(--color-white) 5%, transparent);
border-radius: var(--radius-xl);
border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
transition: all var(--transition-base);
}
.why-card:hover {
background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
transform: translateY(-4px);
}
.why-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
}
.why-card__icon svg {
width: 28px;
height: 28px;
}
.why-card__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
color: var(--color-white);
}
.why-card__desc {
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--color-white) 75%, transparent);
line-height: var(--lh-relaxed);
}
/* ==========================================================================
14. Clients / Testimonials
========================================================================== */
.clients-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.client-logo {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
background-color: var(--bg-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
min-height: 124px;
}
.client-logo:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.client-logo img {
max-height: 84px;
max-width: 84px;
object-fit: contain;
transition: transform var(--transition-base);
}
.client-logo:hover img {
transform: scale(1.06);
}
.testimonial-card {
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-xl);
border: 1px solid var(--color-gray-200);
position: relative;
}
.testimonial-card__quote {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
font-size: 4rem;
line-height: 1;
color: var(--color-gray-200);
font-family: Georgia, serif;
}
[dir="rtl"] .testimonial-card__quote {
right: auto;
left: var(--space-lg);
}
.testimonial-card__text {
font-size: var(--fs-base);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
font-style: italic;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: var(--space-md);
}
.testimonial-card__avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background-color: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
}
.testimonial-card__name {
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.testimonial-card__role {
font-size: var(--fs-sm);
color: var(--text-muted);
}
/* ==========================================================================
15. FAQ Section
========================================================================== */
.faq-list {
max-width: 800px;
margin-inline: auto;
}
.faq-item {
border-bottom: 1px solid var(--color-gray-200);
}
.faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
padding: var(--space-lg) 0;
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text-primary);
text-align: start;
cursor: pointer;
transition: color var(--transition-fast);
}
.faq-item__question:hover {
color: var(--color-secondary);
}
.faq-item__icon {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background-color: var(--color-gray-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition-base);
}
.faq-item__icon svg {
width: 14px;
height: 14px;
transition: transform var(--transition-base);
}
.faq-item.is-open .faq-item__icon {
background-color: var(--color-secondary);
color: var(--color-white);
}
.faq-item.is-open .faq-item__icon svg {
transform: rotate(180deg);
}
.faq-item__answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow);
}
.faq-item.is-open .faq-item__answer {
max-height: 500px;
}
.faq-item__answer-inner {
padding-bottom: var(--space-lg);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
/* ==========================================================================
16. CTA Section
========================================================================== */
.cta-section {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light));
padding-block: var(--space-4xl);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.cta-section__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
}
.cta-section__title {
font-size: var(--fs-3xl);
color: var(--color-white);
margin-bottom: var(--space-sm);
}
.cta-section__text {
font-size: var(--fs-lg);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
.cta-section__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
flex-shrink: 0;
}
/* ==========================================================================
17. Footer
========================================================================== */
.site-footer {
background-color: var(--color-gray-900);
color: var(--color-gray-400);
padding-top: var(--space-4xl);
}
.footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--space-3xl);
padding-bottom: var(--space-3xl);
border-bottom: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
}
.footer__logo img,
.footer__logo svg {
height: 48px;
width: auto;
margin-bottom: var(--space-lg);
}
.footer__desc {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
color: var(--color-gray-400);
}
.footer__social {
display: flex;
gap: var(--space-sm);
}
.social-link {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--color-white) 8%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-400);
transition: all var(--transition-base);
}
.social-link:hover {
background-color: var(--color-secondary);
color: var(--color-white);
transform: translateY(-2px);
}
.footer__title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--color-white);
margin-bottom: var(--space-lg);
}
.footer__links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__links a {
font-size: var(--fs-sm);
color: var(--color-gray-400);
transition: all var(--transition-fast);
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.footer__links a:hover {
color: var(--color-white);
padding-inline-start: 4px;
}
/* Footer contact tap targets
---------------------------------------------------------------------------
The two phone links sat as bare inline anchors, about 20px tall and stacked
with no gap, which Lighthouse flags as insufficient touch-target size and
spacing. Making them blocks with vertical padding clears the 24px minimum
and separates them from each other. */
.footer__contact-items .contact-item a[href^="tel:"],
.footer__contact-items .contact-item a[href^="mailto:"] {
display: block;
min-height: 24px;
padding-block: 0.4rem;
line-height: 1.5;
}
.footer__contact-items {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--fs-sm);
}
.contact-item svg {
flex-shrink: 0;
margin-top: 2px;
opacity: 0.7;
}
.contact-item a {
color: var(--color-gray-400);
transition: color var(--transition-fast);
}
.contact-item a:hover {
color: var(--color-white);
}
.contact-item div {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-lg);
}
.footer__credit {
font-size: var(--fs-sm);
color: var(--color-gray-400);
}
.footer__credit a {
color: var(--color-white);
font-weight: var(--fw-medium);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer__credit a:hover,
.footer__credit a:focus-visible {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.footer__copyright {
font-size: var(--fs-sm);
/* gray-500 on the dark footer measured 3.67:1; gray-400 gives 6.99:1. */
color: var(--color-gray-400);
}
.footer__bottom-links {
display: flex;
gap: var(--space-lg);
}
.footer__bottom-links a {
font-size: var(--fs-sm);
color: var(--color-gray-500);
transition: color var(--transition-fast);
}
.footer__bottom-links a:hover {
color: var(--color-white);
}
/* ==========================================================================
18. Breadcrumb
========================================================================== */
.breadcrumb {
background-color: var(--bg-secondary);
padding: var(--space-md) 0;
font-size: var(--fs-sm);
color: var(--text-muted);
}
.breadcrumb a {
color: var(--text-secondary);
transition: color var(--transition-fast);
}
.breadcrumb a:hover {
color: var(--color-secondary);
}
.breadcrumb .separator {
margin: 0 var(--space-sm);
opacity: 0.5;
}
.breadcrumb .current {
color: var(--text-primary);
font-weight: var(--fw-medium);
}
/* ==========================================================================
19. Page Header
========================================================================== */
.page-header {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: var(--color-white);
padding: var(--space-3xl) 0;
text-align: center;
}
.page-header .page-title {
font-size: var(--fs-4xl);
color: var(--color-white);
margin: 0;
}
.page-header .page-desc {
font-size: var(--fs-lg);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
margin-top: var(--space-md);
}
/* ==========================================================================
20. Blog / Posts
========================================================================== */
.posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
padding-block: var(--space-3xl);
}
.post-card {
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.post-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.post-card__image {
aspect-ratio: 16/10;
overflow: hidden;
}
.post-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.post-card:hover .post-card__image img {
transform: scale(1.05);
}
.post-card__content {
padding: var(--space-lg);
}
.post-card__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
}
.post-card__title a {
color: var(--text-primary);
transition: color var(--transition-fast);
}
.post-card__title a:hover {
color: var(--color-secondary);
}
.post-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-xs);
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.post-card__excerpt {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
}
/* ==========================================================================
21. Forms
========================================================================== */
.form-group {
margin-bottom: var(--space-lg);
}
.form-label {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.75rem 1rem;
font-size: var(--fs-base);
color: var(--text-primary);
background-color: var(--bg-primary);
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
/* ==========================================================================
22. Search Form
========================================================================== */
.search-form {
display: flex;
max-width: 500px;
margin-inline: auto;
}
.search-form__input {
flex: 1;
padding: 0.75rem 1rem;
font-size: var(--fs-base);
border: 2px solid var(--color-gray-300);
border-inline-start: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
[dir="rtl"] & {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
border-inline-start: 2px solid var(--color-gray-300);
border-inline-end: none;
}
}
.search-form__input:focus {
outline: none;
border-color: var(--color-primary);
}
.search-form__button {
padding: 0.75rem 1.5rem;
background-color: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
cursor: pointer;
transition: background-color var(--transition-fast);
}
[dir="rtl"] .search-form__button {
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.search-form__button:hover {
background-color: var(--color-primary-light);
}
/* ==========================================================================
23. Single Post / Page
========================================================================== */
.single-content {
max-width: 800px;
margin-inline: auto;
padding-block: var(--space-3xl);
}
.single-content h2 {
margin-top: var(--space-2xl);
margin-bottom: var(--space-md);
}
.single-content h3 {
margin-top: var(--space-xl);
margin-bottom: var(--space-md);
}
.single-content p {
margin-bottom: var(--space-md);
line-height: var(--lh-relaxed);
}
.single-content ul,
.single-content ol {
margin-bottom: var(--space-md);
padding-inline-start: var(--space-xl);
}
.single-content ul {
list-style-type: disc;
}
.single-content ol {
list-style-type: decimal;
}
.single-content li {
margin-bottom: var(--space-sm);
line-height: var(--lh-normal);
}
.single-content blockquote {
border-inline-start: 4px solid var(--color-primary);
padding: var(--space-lg);
margin: var(--space-xl) 0;
background-color: var(--bg-secondary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
color: var(--text-secondary);
}
.single-content img {
border-radius: var(--radius-lg);
margin: var(--space-xl) 0;
}
.single-content a {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 2px;
}
.single-content a:hover {
color: var(--color-secondary-dark);
}
/* ==========================================================================
24. No Results
========================================================================== */
.no-results {
text-align: center;
padding: var(--space-5xl) 0;
}
.no-results h2 {
margin-bottom: var(--space-md);
}
.no-results p {
color: var(--text-secondary);
margin-bottom: var(--space-xl);
}
/* ==========================================================================
25. Pagination
========================================================================== */
.transtec-pagination {
display: flex;
justify-content: center;
gap: var(--space-sm);
padding-block: var(--space-2xl);
}
.transtec-pagination .nav-links {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.transtec-pagination .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-secondary);
background-color: var(--bg-secondary);
transition: all var(--transition-fast);
}
.transtec-pagination .page-numbers:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
.transtec-pagination .page-numbers.current {
background-color: var(--color-primary);
color: var(--color-white);
}
.transtec-pagination .prev,
.transtec-pagination .next {
width: auto;
padding: 0 var(--space-md);
}
/* ==========================================================================
26. Service Single Page
========================================================================== */
.service-hero {
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: var(--color-white);
/* Inner page, not a landing page: the section and its inner grid were each
adding 6rem top and bottom, ~384px of padding before any content. */
padding: var(--space-xl) 0;
text-align: center;
}
.service-hero__icon {
width: 80px;
height: 80px;
border-radius: var(--radius-xl);
background-color: color-mix(in srgb, var(--color-white) 15%, transparent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
color: var(--color-accent);
}
.service-hero__icon svg {
width: 40px;
height: 40px;
}
.service-hero__title {
font-size: var(--fs-4xl);
color: var(--color-white);
margin-bottom: var(--space-md);
}
.service-hero__desc {
font-size: var(--fs-lg);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
max-width: 600px;
margin-inline: auto;
}
.service-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-3xl);
padding-block: var(--space-3xl);
}
.service-sidebar {
position: sticky;
top: 100px;
align-self: start;
}
.service-sidebar__card {
background-color: var(--bg-secondary);
border-radius: var(--radius-xl);
padding: var(--space-xl);
}
.service-sidebar__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-lg);
color: var(--text-primary);
}
.service-sidebar__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.service-sidebar__list a {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
font-size: var(--fs-sm);
color: var(--text-secondary);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.service-sidebar__list a:hover,
.service-sidebar__list a.is-active {
background-color: var(--color-white);
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
/* ==========================================================================
27. Contact Page
========================================================================== */
.contact-grid {
display: grid;
/* The form needs the wider share: it holds the fields and a message box,
while the info column is only short read-only cards. Contact and jobs put
the cards first, so the wide track is the second one there. */
grid-template-columns: 1fr 1.3fr;
gap: var(--space-3xl);
align-items: start;
}
/* The quote page puts the form first in the markup so it leads when the grid
stacks on mobile. On desktop it should still sit in the same column as the
contact page, so the two are reordered visually rather than in the DOM —
which keeps both the mobile reading order and the shared column widths. */
@media (min-width: 1025px) {
.contact-grid:has(> .contact-form-wrapper:first-child) > .contact-info-cards {
order: 1;
}
.contact-grid:has(> .contact-form-wrapper:first-child) > .contact-form-wrapper {
order: 2;
}
}
.contact-info-cards {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.contact-info-card {
display: flex;
align-items: flex-start;
gap: var(--space-lg);
padding: var(--space-lg);
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.contact-info-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
/* Each contact card gets its own icon colour so the column reads as five
distinct details rather than one repeated navy block. */
.contact-info-card { --contact-accent: var(--color-primary); }
.contact-info-card--phone { --contact-accent: var(--color-success); }
.contact-info-card--email { --contact-accent: var(--color-info); }
.contact-info-card--address { --contact-accent: var(--color-secondary); }
.contact-info-card--hours { --contact-accent: var(--color-accent-dark); }
.contact-info-card--social { --contact-accent: #7C3AED; }
.contact-info-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--contact-accent) 12%, transparent);
color: var(--contact-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-card__icon svg {
width: 24px;
height: 24px;
}
.contact-info-card__title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.contact-info-card__text {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
.contact-info-card__text a {
color: var(--color-primary);
font-weight: var(--fw-medium);
}
.contact-form-wrapper {
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
/* Padding matches .contact-info-card on the top and sides so the form
heading sits level with the first card's heading and both cards indent
their content by the same amount. Slightly more at the bottom to give
the tickbox and submit button room. The form still reads as roomy
because its grid column is the wider of the two. */
padding: var(--space-lg) var(--space-lg) var(--space-2xl);
border: 1px solid var(--color-gray-200);
}
/* Give the fields and the message box more breathing room. */
.contact-form .form-group {
margin-bottom: var(--space-lg);
}
.contact-form textarea {
min-height: 190px;
}
@media (max-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-form-wrapper {
padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}
}
.contact-form-wrapper .form-title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
margin-bottom: var(--space-lg);
}
/* ==========================================================================
28. Languages Page
========================================================================== */
.languages-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.language-card {
text-align: center;
padding: var(--space-xl);
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.language-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.language-card__flag {
font-size: 2.5rem;
margin-bottom: var(--space-md);
}
.language-card__name {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.language-card__native {
font-size: var(--fs-sm);
color: var(--text-muted);
}
/* ==========================================================================
29. 404 Page
========================================================================== */
.error-404 {
text-align: center;
padding: var(--space-5xl) 0;
}
.error-404__number {
font-size: clamp(6rem, 15vw, 12rem);
font-weight: var(--fw-extrabold);
color: var(--color-gray-200);
line-height: 1;
margin-bottom: var(--space-lg);
}
.error-404__title {
font-size: var(--fs-3xl);
margin-bottom: var(--space-md);
}
.error-404__text {
font-size: var(--fs-lg);
color: var(--text-secondary);
margin-bottom: var(--space-xl);
max-width: 500px;
margin-inline: auto;
}
.error-404__actions {
display: flex;
gap: var(--space-md);
justify-content: center;
}
/* ==========================================================================
30. Responsive Design
========================================================================== */
/* Tablet */
@media (max-width: 1024px) {
.hero__inner {
grid-template-columns: 1fr;
text-align: center;
padding-block: var(--space-4xl);
}
.hero__content {
max-width: 100%;
margin-inline: auto;
}
.hero__desc {
margin-inline: auto;
}
.hero__actions {
justify-content: center;
}
.hero__visual {
display: none;
}
.stats__grid {
grid-template-columns: repeat(2, 1fr);
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-section {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.about-section__image {
order: 0;
}
.about-section__content {
order: 0;
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2xl);
}
.process-grid::before {
display: none;
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
.clients-grid {
grid-template-columns: repeat(3, 1fr);
}
.iso-grid {
grid-template-columns: repeat(2, 1fr);
}
.industry-slide {
flex: 0 0 320px;
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer__top {
grid-template-columns: repeat(2, 1fr);
}
.cta-section__inner {
flex-direction: column;
text-align: center;
}
.cta-section__actions {
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.cta-section__actions .btn {
flex: 1 1 100%;
justify-content: center;
}
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-content {
grid-template-columns: 1fr;
}
.service-sidebar {
position: static;
}
.contact-grid {
grid-template-columns: 1fr;
}
.languages-grid {
grid-template-columns: repeat(3, 1fr);
}
.form-row {
grid-template-columns: 1fr;
}
.header__nav {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.topbar__hours {
display: none;
}
}
/* Mobile */
@media (max-width: 640px) {
:root {
--container-padding: 1rem;
}
.topbar {
display: none;
}
.header__inner {
height: 64px;
}
.header__cta {
display: none;
}
.hero {
min-height: auto;
}
.hero__inner {
padding-block: var(--space-3xl);
}
.hero__actions {
flex-direction: column;
align-items: stretch;
}
.stats__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.stat-card {
padding: var(--space-md);
}
.services-grid {
grid-template-columns: 1fr;
}
.process-grid {
grid-template-columns: 1fr;
}
.why-grid {
grid-template-columns: 1fr;
}
.clients-grid {
grid-template-columns: repeat(2, 1fr);
}
.iso-grid {
grid-template-columns: 1fr;
}
.industry-slide {
flex: 0 0 280px;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.lang-group__grid {
grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
gap: var(--space-sm);
}
.lang-chip {
min-height: 96px;
padding: var(--space-md) var(--space-xs);
font-size: var(--fs-xs);
}
.lang-chip__flag {
font-size: 1.75rem;
}
.footer__top {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.footer__bottom {
flex-direction: column;
gap: var(--space-md);
text-align: center;
}
.posts-grid {
grid-template-columns: 1fr;
}
.languages-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-section__features {
grid-template-columns: 1fr;
}
.page-header {
padding: var(--space-2xl) 0;
}
.error-404__actions {
flex-direction: column;
align-items: center;
}
}
/* Large Desktop */
@media (min-width: 1440px) {
.container {
max-width: 1400px;
}
}
/* ==========================================================================
31. Utility Classes
========================================================================== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--color-white);
clip: auto !important;
clip-path: none;
color: var(--color-primary);
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
height: auto;
left: var(--space-sm);
line-height: normal;
padding: var(--space-md) var(--space-lg);
text-decoration: none;
top: var(--space-sm);
width: auto;
z-index: var(--z-modal);
}
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-md); }
.mt-2 { margin-top: var(--space-xl); }
.mt-3 { margin-top: var(--space-2xl); }
.mt-4 { margin-top: var(--space-3xl); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-xl); }
.mb-3 { margin-bottom: var(--space-2xl); }
.mb-4 { margin-bottom: var(--space-3xl); }
/* ==========================================================================
32. ISO Certifications - Premium Section
========================================================================== */
.iso-section {
position: relative;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
padding: var(--space-5xl) 0;
overflow: hidden;
}
.iso-section__bg {
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.iso-section__inner {
position: relative;
z-index: 1;
}
.iso-section__header {
text-align: center;
max-width: 650px;
margin: 0 auto var(--space-3xl);
}
.iso-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
color: var(--color-accent);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.iso-section__title {
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
color: var(--color-white);
margin-bottom: var(--space-md);
line-height: var(--lh-tight);
}
.iso-section__desc {
font-size: var(--fs-lg);
color: color-mix(in srgb, var(--color-white) 75%, transparent);
line-height: var(--lh-relaxed);
}
.iso-certs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.iso-cert {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-xl);
background: color-mix(in srgb, var(--color-white) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
border-radius: var(--radius-xl);
transition: all var(--transition-base);
backdrop-filter: blur(8px);
}
.iso-cert:hover {
background: color-mix(in srgb, var(--color-white) 14%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
transform: translateY(-4px);
box-shadow: 0 20px 40px color-mix(in srgb, var(--color-black) 20%, transparent);
}
/* Seal / Badge */
.iso-cert__seal {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.iso-cert__seal-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
animation: seal-spin 20s linear infinite;
}
.iso-cert__seal-ring::before {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px dashed color-mix(in srgb, var(--color-accent) 25%, transparent);
}
@keyframes seal-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.iso-cert__seal-inner {
position: absolute;
inset: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, var(--color-white)));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-dark);
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.iso-cert__check {
position: absolute;
bottom: -2px;
right: -2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-success);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-primary-dark);
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-success) 40%, transparent);
}
[dir="rtl"] .iso-cert__check {
right: auto;
left: -2px;
}
.iso-cert__content {
flex: 1;
}
.iso-cert__number {
display: inline-block;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--color-accent);
letter-spacing: 0.05em;
margin-bottom: var(--space-xs);
text-transform: uppercase;
}
.iso-cert__name {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--color-white);
margin-bottom: var(--space-xs);
}
.iso-cert__desc {
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--color-white) 65%, transparent);
line-height: var(--lh-relaxed);
}
/* Responsive */
@media (max-width: 1024px) {
.iso-certs {
grid-template-columns: 1fr;
max-width: 600px;
margin-inline: auto;
}
}
/* ==========================================================================
33. Industries Slider - Infinite Auto-Scroll
========================================================================== */
.industries-slider {
overflow: hidden;
width: 100%;
padding: var(--space-xl) 0;
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.industries-track {
display: flex;
width: max-content;
}
/* Each group is one full copy of the slides. The second copy is what makes the
loop seamless, so both have to lay out horizontally. */
.industries-group {
display: flex;
}
.slider-rtl .industries-track {
animation: scroll-industries-rtl 40s linear infinite;
}
.slider-ltr .industries-track {
animation: scroll-industries-ltr 40s linear infinite;
}
.industries-slider:hover .industries-track {
animation-play-state: paused;
}
/* RTL stacks the groups right-to-left, so the copy sits to the left of the
original and the track has to travel the opposite way for the seam to meet. */
@keyframes scroll-industries-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(50%); }
}
@keyframes scroll-industries-ltr {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* The gap sits on the slide instead of the track so every slide advances by the
same amount. That keeps one group exactly 50% of the track, which is what the
keyframes translate by. */
.industry-slide {
flex: 0 0 380px;
margin-inline-end: var(--space-lg);
}
.industry-card--image {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.industry-card--image:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.industry-card--image .industry-card__image {
aspect-ratio: 16/10;
overflow: hidden;
}
.industry-card--image .industry-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.industry-card--image:hover .industry-card__image img {
transform: scale(1.08);
}
.industry-card--image .industry-card__content {
padding: var(--space-lg);
}
.industry-card--image .industry-card__title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin-bottom: var(--space-xs);
text-align: center;
}
.industry-card--image .industry-card__desc {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.industries-track {
animation: none !important;
}
.process-step__number {
animation: none !important;
}
}
/* ==========================================================================
34. Languages Section - Professional Flag Chips
========================================================================== */
.languages-groups {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
.lang-group {
/* Card chrome removed at the owner's request — the groups read as plain
sections now, with the title rule doing the separating. Restore the
four properties below to bring the boxed look back. */
padding: 0;
}
.lang-group__title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--color-gray-100);
}
.lang-group__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
gap: var(--space-md);
}
/* Flag card: large flag stacked over the language name, like a tile grid. */
.lang-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
min-height: 118px;
padding: var(--space-lg) var(--space-sm);
background-color: var(--bg-primary);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-xl);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-primary);
text-align: center;
transition: all var(--transition-fast);
cursor: default;
}
.lang-chip:hover {
background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.lang-chip__flag {
font-size: 2.25rem;
line-height: 1;
}
.lang-chip__name {
line-height: 1.35;
}
.lang-chip__native {
font-size: var(--fs-xs);
color: var(--text-muted);
font-weight: var(--fw-regular);
}
.lang-chip--featured {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: var(--color-white);
border-color: var(--color-primary);
font-weight: var(--fw-semibold);
}
.lang-chip--featured:hover {
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.lang-chip--more {
background-color: var(--color-secondary);
color: var(--color-white);
border-color: var(--color-secondary);
font-weight: var(--fw-semibold);
}
.lang-chip--more:hover {
background-color: var(--color-secondary-dark);
color: var(--color-white);
transform: translateY(-3px);
}
/* ==========================================================================
35. Testimonials Section - With Stars
========================================================================== */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.testimonial-card {
position: relative;
background-color: color-mix(in srgb, var(--color-white) 5%, transparent);
border-radius: var(--radius-xl);
padding: var(--space-xl);
border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
transition: all var(--transition-base);
}
.testimonial-card:hover {
background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
transform: translateY(-4px);
}
.testimonial-card__quote {
position: absolute;
top: var(--space-md);
right: var(--space-lg);
font-size: 4rem;
line-height: 1;
color: color-mix(in srgb, var(--color-accent) 30%, transparent);
font-family: Georgia, serif;
}
[dir="rtl"] .testimonial-card__quote {
right: auto;
left: var(--space-lg);
}
.testimonial-card__stars {
display: flex;
gap: 2px;
margin-bottom: var(--space-md);
color: var(--color-accent);
}
.testimonial-card__stars svg {
width: 16px;
height: 16px;
}
.testimonial-card__text {
font-size: var(--fs-base);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
line-height: var(--lh-relaxed);
font-style: italic;
margin-bottom: var(--space-lg);
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: var(--space-md);
}
.testimonial-card__avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
flex-shrink: 0;
}
.testimonial-card__name {
font-weight: var(--fw-semibold);
color: var(--color-white);
font-size: var(--fs-sm);
}
.testimonial-card__role {
font-size: var(--fs-xs);
color: color-mix(in srgb, var(--color-white) 50%, transparent);
margin-top: 2px;
}
/* ==========================================================================
36. Print Styles
========================================================================== */
@media print {
.topbar,
.site-header,
.mobile-nav,
.mobile-nav-overlay,
.cta-section,
.site-footer,
.btn {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
background: #fff;
}
.container {
max-width: 100%;
}
}
/* ==========================================================================
33. Focus States (Accessibility)
========================================================================== */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ==========================================================================
34. Animations (Reduced Motion)
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
35. High Contrast Mode
========================================================================== */
@media (forced-colors: active) {
.btn {
border: 2px solid ButtonText;
}
.service-card,
.stat-card,
.why-card {
border: 1px solid CanvasText;
}
}
/* ==========================================================================
40. Header Tools — Search / Display Mode / Language
========================================================================== */
.header__tools {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}
.header__search {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
color: var(--text-secondary);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-fast);
}
.header__search:hover,
.header__search:focus-visible {
color: var(--color-primary);
border-color: var(--color-accent);
}
.header__search svg {
width: 16px;
height: 16px;
}
/* Display mode: collapsed to the active icon, expands on hover/focus. */
.transtec-mode {
display: inline-flex;
align-items: center;
width: auto;
height: 36px;
padding: 3px;
border-radius: var(--radius-md);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-fast);
}
.transtec-mode__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
transition: width 400ms ease-out, opacity 400ms ease-out,
background-color var(--transition-fast), color var(--transition-fast);
}
.transtec-mode__btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.transtec-mode__btn:hover {
color: var(--color-primary);
background-color: var(--color-gray-100);
}
.transtec-mode__btn.is-active {
background-color: var(--color-accent);
color: var(--color-primary);
}
.transtec-mode:not(.transtec-mode--mobile) {
gap: 0;
}
.transtec-mode:not(.transtec-mode--mobile):hover,
.transtec-mode:not(.transtec-mode--mobile):focus-within {
gap: 2px;
}
.transtec-mode:not(.transtec-mode--mobile) .transtec-mode__btn:not(.is-active) {
width: 0;
min-width: 0;
opacity: 0;
pointer-events: none;
}
.transtec-mode:not(.transtec-mode--mobile):hover .transtec-mode__btn:not(.is-active),
.transtec-mode:not(.transtec-mode--mobile):focus-within .transtec-mode__btn:not(.is-active) {
width: 28px;
opacity: 1;
pointer-events: auto;
}
/* At rest the active icon reads as a plain glyph; the chip appears on hover. */
.transtec-mode:not(.transtec-mode--mobile) .transtec-mode__btn.is-active {
background-color: transparent;
color: var(--text-secondary);
}
.transtec-mode:not(.transtec-mode--mobile):hover .transtec-mode__btn.is-active,
.transtec-mode:not(.transtec-mode--mobile):focus-within .transtec-mode__btn.is-active {
background-color: var(--color-accent);
color: var(--color-primary);
}
/* Mobile drawer variants: always expanded, nothing to reveal. */
.mobile-nav__prefs {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-gray-200);
}
.mobile-nav__search,
.mobile-nav__search svg,
.mobile-nav__search:hover,
.transtec-mode--mobile {
gap: 2px;
}
/* ==========================================================================
41. Search Overlay
========================================================================== */
.transtec-search {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
justify-content: center;
align-items: flex-start;
}
.transtec-search[hidden] {
display: none;
}
.transtec-search__backdrop {
position: absolute;
inset: 0;
background: rgb(15 22 35 / 0.62);
opacity: 0;
transition: opacity var(--transition-base);
}
.transtec-search__panel {
position: relative;
width: min(720px, calc(100% - 2rem));
margin-top: min(18vh, 140px);
background: var(--bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--space-lg);
transform: translateY(-12px);
opacity: 0;
transition: transform var(--transition-base), opacity var(--transition-base);
}
.transtec-search.is-open .transtec-search__backdrop {
opacity: 1;
}
.transtec-search.is-open .transtec-search__panel {
transform: translateY(0);
opacity: 1;
}
.transtec-search__form {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.transtec-search__icon {
width: 20px;
height: 20px;
color: var(--text-muted);
flex-shrink: 0;
}
.transtec-search__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1.05rem;
color: var(--text-primary);
padding: 0.5em 0;
}
.transtec-search__input:focus {
outline: none;
}
.transtec-search__submit {
flex-shrink: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-white);
background: var(--color-secondary);
border: 0;
border-radius: var(--radius-sm);
padding: 0.6em 1.1em;
cursor: pointer;
transition: background var(--transition-fast);
}
.transtec-search__submit:hover {
background: var(--color-secondary-dark);
}
.transtec-search__close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: var(--text-muted);
background: transparent;
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.transtec-search__close:hover {
color: var(--text-primary);
background: var(--color-gray-100);
}
.transtec-search__close svg {
width: 18px;
height: 18px;
}
@media (max-width: 640px) {
.transtec-search__panel {
margin-top: 0;
width: 100%;
border-radius: 0;
min-height: 100%;
}
.transtec-search__submit {
display: none;
}
.mobile-nav__prefs {
justify-content: flex-start;
}
}
/* ==========================================================================
42. Dark Mode
The theme is token-driven, so inverting the neutral ramp carries most of
the page. Only surfaces that hardcode white need their own override.
========================================================================== */
html.dark {
--color-gray-50: #161E2B;
--color-gray-100: #1C2534;
--color-gray-200: #2A3446;
--color-gray-300: #3A465C;
--color-gray-400: #6B7890;
--color-gray-500: #94A0B4;
--color-gray-600: #B6C0D0;
--color-gray-700: #D2D9E4;
--color-gray-800: #E7ECF3;
--color-gray-900: #F4F7FB;
--bg-primary: #111823;
--bg-secondary: #0C121B;
--bg-tertiary: #161E2B;
--text-primary: #F4F7FB;
--text-secondary: #B6C0D0;
--text-muted: #94A0B4;
--text-link: var(--color-accent);
--text-link-hover: var(--color-accent-light);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.55);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
}
html.dark body {
background-color: var(--bg-primary);
color: var(--text-primary);
}
/* Surfaces that name white directly. */
html.dark .site-header,
html.dark .sub-menu,
html.dark .mobile-nav,
html.dark .hero__floating-card {
background-color: var(--bg-primary);
}
html.dark .section--gray {
background-color: var(--bg-secondary);
}
/* The brand navy reads as a light-mode accent; deepen it so the dark page
does not end up lighter inside these bands than outside them. */
html.dark .topbar,
html.dark .section--dark,
html.dark .hero {
background-color: #0A0F18;
}
html.dark .lang-chip--featured {
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}
html.dark .client-logo {
background-color: var(--bg-tertiary);
}
/* Emoji/photographic content keeps its own colours; only knock back the
pure-white logo tiles so they do not glare. */
html.dark .client-logo img {
filter: brightness(0.95);
}
html.dark .transtec-search__backdrop {
background: rgb(0 0 0 / 0.72);
}
/* Header tools on small screens: the drawer carries the mode toggle, so the
header keeps only search and (when multilingual) the language icon. */
@media (max-width: 1024px) {
.header__tools > .transtec-mode {
display: none;
}
}
/* ==========================================================================
43. Services Mega Menu
Three titled columns. Each heading sits in the same
flow as its links
and forces a column break, so groups never split.
========================================================================== */
.sub-menu--mega {
width: max-content;
max-width: min(920px, calc(100vw - 2rem));
padding: var(--space-lg) var(--space-md);
columns: 3;
column-gap: var(--space-lg);
}
/* Anchor the wide panel inside the viewport rather than off the edge. */
.nav-list > li > .sub-menu--mega {
left: 50%;
right: auto;
transform: translateX(-50%) translateY(8px);
}
[dir="rtl"] .nav-list > li > .sub-menu--mega {
left: auto;
right: 50%;
transform: translateX(50%) translateY(8px);
}
.nav-list > li:hover > .sub-menu--mega {
transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .nav-list > li:hover > .sub-menu--mega {
transform: translateX(50%) translateY(0);
}
.sub-menu--mega li {
break-inside: avoid;
}
.mega-group__head {
break-before: column;
margin-bottom: var(--space-sm);
padding: 0 1.25rem 0.6rem;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--text-primary);
border-bottom: 1px solid var(--color-gray-200);
}
/* The first heading opens the panel; it must not push a break before itself. */
.sub-menu--mega > .mega-group__head:first-child {
break-before: avoid;
}
.mega-group__head span::before {
content: '# ';
color: var(--color-secondary);
}
.sub-menu--mega li a {
white-space: nowrap;
}
@media (max-width: 1200px) {
.sub-menu--mega {
columns: 2;
max-width: min(640px, calc(100vw - 2rem));
}
}
/* The drawer is a single narrow column; groups stack instead. */
.mobile-nav-list .sub-menu--mega {
columns: 1;
width: auto;
max-width: none;
padding: var(--space-sm) 0;
}
.mobile-nav-list .mega-group__head {
break-before: avoid;
margin-top: var(--space-sm);
}
/* Dropdown item icons */
.sub-menu li a {
display: flex;
align-items: center;
gap: 0.55rem;
}
.nav-link__icon--sub {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.45;
transition: opacity var(--transition-fast);
}
.sub-menu li a:hover .nav-link__icon--sub {
opacity: 1;
}
/* Hover already shifts the link by padding; keep the icon aligned with it. */
.mobile-nav-list .sub-menu li a {
gap: 0.5rem;
}
/* ==========================================================================
44. Blog Listing
========================================================================== */
.blog-hero {
position: relative;
overflow: hidden;
padding: var(--space-3xl) 0 var(--space-2xl);
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: var(--color-white);
}
.blog-hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgb(255 255 255 / 0.07) 1px, transparent 1px);
background-size: 26px 26px;
pointer-events: none;
}
.blog-hero__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin-inline: auto;
text-align: center;
}
.blog-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 0.45rem 1.15rem;
margin-bottom: var(--space-lg);
background-color: rgb(255 255 255 / 0.12);
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
}
.blog-hero__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background-color: var(--color-accent);
}
.blog-hero__title {
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
line-height: var(--lh-tight);
color: var(--color-white);
margin-bottom: var(--space-md);
}
.blog-hero__desc {
font-size: var(--fs-md);
color: rgb(255 255 255 / 0.78);
margin-bottom: var(--space-xl);
}
.blog-search {
display: flex;
align-items: center;
gap: var(--space-sm);
max-width: 560px;
margin-inline: auto;
padding: 0.4rem 0.4rem 0.4rem 0.4rem;
padding-inline-start: var(--space-md);
background-color: var(--color-white);
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
}
.blog-search__icon {
color: var(--color-gray-400);
flex-shrink: 0;
}
.blog-search__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: var(--fs-sm);
color: var(--color-gray-900);
padding: 0.6rem 0;
}
.blog-search__input:focus {
outline: none;
}
.blog-search__submit {
flex-shrink: 0;
border: 0;
cursor: pointer;
padding: 0.65rem 1.4rem;
border-radius: var(--radius-full);
background-color: var(--color-secondary);
color: var(--color-white);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
transition: background-color var(--transition-fast);
}
.blog-search__submit:hover {
background-color: var(--color-secondary-dark);
}
/* Category filters */
.blog-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
margin-bottom: var(--space-2xl);
}
.blog-filter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.5rem;
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
background-color: var(--color-gray-50);
color: var(--text-secondary);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
cursor: pointer;
transition: all var(--transition-fast);
}
.blog-filter:hover {
background-color: var(--color-gray-100);
color: var(--text-primary);
}
.blog-filter.is-active {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
box-shadow: var(--shadow-md);
}
/* Card grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.blog-card {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--bg-primary);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-xl);
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.blog-card:hover {
transform: translateY(-4px);
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
}
.blog-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--color-gray-100);
}
.blog-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card__media img {
transform: scale(1.06);
}
.blog-card__placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.blog-card__badge {
position: absolute;
top: var(--space-md);
inset-inline-start: var(--space-md);
padding: 0.35rem 0.9rem;
border-radius: var(--radius-full);
background-color: rgb(15 22 35 / 0.55);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter: blur(6px);
color: var(--color-white);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
}
.blog-card__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: var(--space-lg);
}
.blog-card__meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.blog-card__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background-color: var(--color-primary);
color: var(--color-white);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
flex-shrink: 0;
}
.blog-card__date {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--text-muted);
letter-spacing: 0.04em;
}
.blog-card__title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
margin-bottom: var(--space-sm);
}
.blog-card__title a {
color: var(--text-primary);
transition: color var(--transition-fast);
}
.blog-card__title a:hover {
color: var(--color-secondary);
}
.blog-card__excerpt {
flex: 1 1 auto;
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
}
.blog-card__more {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.blog-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background-color: var(--color-gray-100);
transition: all var(--transition-fast);
}
[dir="rtl"] .blog-card__arrow svg {
transform: scaleX(-1);
}
.blog-card__more:hover .blog-card__arrow {
background-color: var(--color-secondary);
color: var(--color-white);
}
.blog-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 0.35rem;
border-radius: var(--radius-full);
background-color: var(--color-gray-200);
color: var(--text-muted);
font-size: 0.65rem;
}
.blog-filter.is-active .blog-filter__count {
background-color: rgb(255 255 255 / 0.22);
color: var(--color-white);
}
/* ==========================================================================
45. Single Article
========================================================================== */
.article-hero {
position: relative;
overflow: hidden;
padding: var(--space-2xl) 0;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: var(--color-white);
}
.article-hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgb(255 255 255 / 0.07) 1px, transparent 1px);
background-size: 26px 26px;
pointer-events: none;
}
.article-hero__inner {
position: relative;
z-index: 1;
max-width: 860px;
}
.article-hero__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.article-hero__badge {
padding: 0.4rem 1.1rem;
border-radius: var(--radius-full);
background-color: rgb(96 165 250 / 0.2);
color: #93C5FD;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
}
.article-hero__meta-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: var(--fs-sm);
color: rgb(255 255 255 / 0.65);
}
.article-hero__title {
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
line-height: var(--lh-tight);
color: var(--color-white);
margin-bottom: var(--space-md);
}
.article-hero__excerpt {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: rgb(255 255 255 / 0.78);
max-width: 680px;
}
.article-hero__author {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.article-hero__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background-color: var(--color-secondary);
color: var(--color-white);
font-size: var(--fs-md);
font-weight: var(--fw-bold);
flex-shrink: 0;
}
.article-hero__author-text {
display: flex;
flex-direction: column;
}
.article-hero__author-name {
font-weight: var(--fw-bold);
}
.article-hero__author-role {
font-size: var(--fs-sm);
color: rgb(255 255 255 / 0.6);
}
/* Two-column body with the sticky contents rail. */
.article-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--space-2xl);
padding-block: var(--space-2xl);
max-width: 1200px;
margin-inline: auto;
}
/* Posts with no headings render no table of contents. Without this the body
became the first grid item and sat in the 260px TOC column, leaving ~940px
empty and the text at ~34 characters per line. */
.article-layout--no-toc {
grid-template-columns: minmax(0, 1fr);
/* Matches the ~892px body width of articles that do have a TOC, so both
article shapes read at the same measure. */
max-width: 900px;
}
.article-toc__inner {
position: sticky;
top: 96px;
padding: var(--space-lg);
background-color: var(--bg-secondary);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-xl);
max-height: calc(100vh - 128px);
overflow-y: auto;
overscroll-behavior: contain;
}
.article-toc__title {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.article-toc__nav {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.article-toc__link {
display: block;
padding: 0.5rem 0.75rem;
border-inline-start: 2px solid transparent;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--text-secondary);
transition: all var(--transition-fast);
}
.article-toc__link:hover {
color: var(--color-secondary);
background-color: var(--color-gray-100);
}
.article-toc__link.is-active {
color: var(--color-secondary);
background-color: var(--color-gray-100);
border-inline-start-color: var(--color-secondary);
font-weight: var(--fw-bold);
}
.article-body__image {
margin: 0 0 var(--space-xl);
border-radius: var(--radius-xl);
overflow: hidden;
}
.article-body__image img {
width: 100%;
height: auto;
display: block;
}
.article-content {
font-size: var(--fs-reading);
line-height: var(--lh-reading);
/* Body copy sits on white here, so full-strength text rather than the
muted secondary tone. */
color: var(--text-primary);
text-align: justify;
}
/* Headings and captions stay left/right aligned — justification only helps
multi-line body copy. */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content figcaption,
.article-content li {
text-align: start;
}
/* Testimonials open with a title line that is authored as a plain paragraph
rather than a heading, so it is styled as the lead here. */
.category-testimonials .article-content > p:first-child,
.category-testimonials .article-content > div:first-child > p:first-child {
font-weight: var(--fw-bold);
color: var(--color-primary);
font-size: var(--fs-lg);
line-height: var(--lh-normal);
text-align: start;
margin-bottom: var(--space-lg);
}
.article-content h2 {
/* Clears the sticky header when jumped to from the contents rail. */
scroll-margin-top: 96px;
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: var(--space-2xl) 0 var(--space-md);
}
.article-content h3 {
scroll-margin-top: 96px;
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: var(--space-xl) 0 var(--space-sm);
}
.article-content p {
margin-bottom: var(--space-lg);
}
.article-content ul,
.article-content ol {
margin: 0 0 var(--space-lg);
padding-inline-start: var(--space-lg);
}
.article-content li {
margin-bottom: var(--space-sm);
}
.article-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
}
.article-content a {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-content blockquote {
margin: var(--space-xl) 0;
padding: var(--space-lg);
border-inline-start: 3px solid var(--color-accent);
background-color: var(--bg-secondary);
border-radius: var(--radius-lg);
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-lg);
}
.article-content th,
.article-content td {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-gray-200);
text-align: start;
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-gray-200);
}
.related-posts {
padding-block: var(--space-2xl);
border-top: 1px solid var(--color-gray-200);
}
.related-posts__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
margin-bottom: var(--space-xl);
}
@media (max-width: 1024px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
/* The rail needs a column of its own; below this it becomes a card above
the article rather than a sticky sidebar. */
.article-layout {
grid-template-columns: minmax(0, 1fr);
}
.article-toc__inner {
position: static;
max-height: none;
}
.article-toc__nav {
max-height: 260px;
overflow-y: auto;
}
}
@media (max-width: 640px) {
.blog-grid {
grid-template-columns: 1fr;
}
.blog-search {
flex-wrap: wrap;
border-radius: var(--radius-xl);
padding: var(--space-sm);
}
.blog-search__submit {
width: 100%;
}
}
/* Dark mode surfaces for the blog. */
html.dark .blog-search {
background-color: var(--bg-tertiary);
}
html.dark .blog-search__input {
color: var(--text-primary);
}
html.dark .blog-hero,
html.dark .article-hero {
background: linear-gradient(135deg, #070B12, #0F1B2E);
}
/* ==========================================================================
46. Contact Form
========================================================================== */
.form-notice {
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-lg);
border-radius: var(--radius-lg);
border-inline-start: 3px solid transparent;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
}
.form-notice--success {
background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
border-inline-start-color: var(--color-success);
color: var(--color-success);
}
.form-notice--error {
background-color: color-mix(in srgb, var(--color-error) 12%, transparent);
border-inline-start-color: var(--color-error);
color: var(--color-error);
}
.form-req {
color: var(--color-secondary);
}
/* Off-screen rather than display:none — some bots skip hidden inputs. */
.form-hp {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.form-privacy {
margin: var(--space-md) 0 0;
font-size: var(--fs-xs);
color: var(--text-muted);
text-align: center;
}
.contact-form .form-group {
margin-bottom: var(--space-md);
}
/* ==========================================================================
47. Blog Infinite Scroll
========================================================================== */
.blog-more {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding-block: var(--space-2xl);
min-height: 80px;
}
/* Once the script takes over, the fallback link stops being the control. */
.blog-more.is-auto .blog-more__link {
display: none;
}
.blog-more__spinner {
width: 34px;
height: 34px;
border: 3px solid var(--color-gray-200);
border-top-color: var(--color-secondary);
border-radius: var(--radius-full);
animation: transtec-spin 700ms linear infinite;
}
.blog-more__spinner[hidden] {
display: none;
}
@keyframes transtec-spin {
to { transform: rotate(360deg); }
}
.blog-more__end {
margin: 0;
font-size: var(--fs-sm);
color: var(--text-muted);
}
.blog-more__end[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.blog-more__spinner {
animation: none;
}
}
/* ==========================================================================
48. Events Index
========================================================================== */
.events-intro {
max-width: 760px;
margin: 0 auto var(--space-2xl);
text-align: center;
}
.events-intro__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
margin-bottom: var(--space-md);
}
.events-intro p {
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
/* ==========================================================================
49. Migrated Page Content
Styles the semantic HTML produced when pages were converted off Elementor.
========================================================================== */
.single-content {
max-width: 900px;
margin-inline: auto;
padding-block: var(--space-2xl);
font-size: var(--fs-reading);
line-height: var(--lh-reading);
color: var(--text-secondary);
}
.single-content h2 {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: var(--space-2xl) 0 var(--space-md);
}
.single-content h3 {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin: var(--space-xl) 0 var(--space-sm);
}
.single-content p {
margin-bottom: var(--space-lg);
}
.single-content ul,
.single-content ol {
margin: 0 0 var(--space-lg);
padding-inline-start: var(--space-lg);
}
.single-content li {
margin-bottom: var(--space-sm);
}
.single-content a {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Small caps label that sat above a heading in the original design. */
.wp-eyebrow {
margin-bottom: 0.35rem;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
}
.wp-figure {
margin: var(--space-xl) 0;
}
.wp-figure img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-xl);
}
/* Side-by-side sections from the original layout. */
.wp-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
align-items: center;
margin-bottom: var(--space-xl);
}
.wp-col > :first-child {
margin-top: 0;
}
.wp-cta {
margin: var(--space-xl) 0;
}
@media (max-width: 640px) {
.wp-row {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
/* ==========================================================================
Service Page - Certified Translation
========================================================================== */
/* Hero */
.service-hero--document {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
color: var(--color-white);
position: relative;
overflow: hidden;
}
.service-hero--document::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.service-hero__inner {
position: relative;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--space-2xl);
align-items: center;
padding-block: var(--space-md);
}
.service-hero__content {
position: relative;
z-index: 1;
}
.breadcrumb--light {
/* Sits inside the dark service hero: the base .breadcrumb paints a light
background and its own padding, which rendered as a pale bar across the
hero with near-white links on it. */
background-color: transparent;
padding: 0;
margin-bottom: var(--space-md);
color: color-mix(in srgb, var(--color-white) 60%, transparent);
}
.breadcrumb--light .separator {
color: color-mix(in srgb, var(--color-white) 40%, transparent);
}
.breadcrumb--light a {
color: color-mix(in srgb, var(--color-white) 70%, transparent);
}
.breadcrumb--light a:hover {
color: var(--color-white);
}
.breadcrumb--light .current {
color: var(--color-accent);
}
.service-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
color: var(--color-accent);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.service-hero__title {
/* One step down from the homepage hero: this is an inner page. */
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
color: var(--color-white);
margin-bottom: var(--space-md);
line-height: var(--lh-tight);
}
.service-hero__desc {
font-size: var(--fs-md);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
max-width: 550px;
}
.service-hero__actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
margin-bottom: var(--space-md);
}
.service-hero__trust {
display: flex;
gap: var(--space-xl);
padding-top: var(--space-xl);
border-top: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}
.service-hero__trust-item {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--color-white) 75%, transparent);
}
.service-hero__trust-item svg {
opacity: 0.8;
}
/* Document Card Visual */
.service-hero__visual {
display: flex;
align-items: center;
justify-content: center;
}
.service-hero__document-card {
width: 240px;
background: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: var(--shadow-2xl);
position: relative;
}
.service-hero__document-card::before {
content: '';
position: absolute;
top: -8px;
right: -8px;
width: 60px;
height: 60px;
background: var(--color-accent);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.document-card__header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.document-card__stamp {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.document-card__label {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--color-primary);
}
.document-card__lines {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.document-card__line {
height: 8px;
border-radius: 4px;
background: var(--color-gray-200);
}
.document-card__line--long { width: 100%; }
.document-card__line--medium { width: 75%; }
.document-card__line--short { width: 50%; }
.document-card__footer {
display: flex;
align-items: center;
gap: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-gray-200);
}
.document-card__seal {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--color-success);
display: flex;
align-items: center;
justify-content: center;
}
.document-card__status {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-success);
}
/* Service Intro */
.service-intro {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.service-intro h2 {
font-size: var(--fs-3xl);
margin-bottom: var(--space-lg);
}
.service-intro__lead {
font-size: var(--fs-lg);
color: var(--text-primary);
font-weight: var(--fw-medium);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
}
.service-intro__content p {
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
.intro-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.intro-stat {
text-align: center;
padding: var(--space-xl);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), color-mix(in srgb, var(--color-secondary) 5%, transparent));
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
}
.intro-stat__number {
display: block;
font-size: var(--fs-3xl);
font-weight: var(--fw-extrabold);
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.intro-stat__label {
font-size: var(--fs-sm);
color: var(--text-secondary);
font-weight: var(--fw-medium);
}
/* Benefits Grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.benefit-card {
padding: var(--space-xl);
background: var(--bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.benefit-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.benefit-card__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-secondary) 8%, transparent));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
color: var(--color-primary);
}
.benefit-card__icon svg {
width: 24px;
height: 24px;
}
.benefit-card h3 {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
}
.benefit-card p {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
}
/* Documents Grid */
.docs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.doc-group {
background: var(--bg-primary);
border-radius: var(--radius-xl);
padding: var(--space-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
}
.doc-group:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-lg);
}
.doc-group__header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--color-gray-100);
}
.doc-group__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
flex-shrink: 0;
}
.doc-group__icon svg {
width: 20px;
height: 20px;
}
.doc-group__title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
}
.doc-group__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.doc-group__item {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-sm);
color: var(--text-secondary);
padding: var(--space-xs) 0;
}
.doc-group__item svg {
color: var(--color-success);
flex-shrink: 0;
}
/* Entities Grid */
.entities-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.entity-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xl);
background: var(--bg-primary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-base);
text-align: center;
}
.entity-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.entity-card__icon {
font-size: 2rem;
}
.entity-card__name {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
/* Trust Grid */
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
}
.trust-card {
text-align: center;
padding: var(--space-xl);
background: color-mix(in srgb, var(--color-white) 5%, transparent);
border-radius: var(--radius-xl);
border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
transition: all var(--transition-base);
}
.trust-card:hover {
background: color-mix(in srgb, var(--color-white) 10%, transparent);
transform: translateY(-4px);
}
.trust-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
color: var(--color-accent);
}
.trust-card__icon svg {
width: 28px;
height: 28px;
}
.trust-card h3 {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--color-white);
margin-bottom: var(--space-sm);
}
.trust-card p {
font-size: var(--fs-sm);
color: color-mix(in srgb, var(--color-white) 70%, transparent);
line-height: var(--lh-relaxed);
}
/* Responsive */
@media (max-width: 1024px) {
.service-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.service-hero__desc {
margin-inline: auto;
}
.service-hero__actions {
justify-content: center;
}
.service-hero__trust {
justify-content: center;
flex-wrap: wrap;
}
.service-hero__visual {
display: none;
}
.service-intro {
grid-template-columns: 1fr;
}
.benefits-grid,
.docs-grid {
grid-template-columns: repeat(2, 1fr);
}
.entities-grid {
grid-template-columns: repeat(2, 1fr);
}
.trust-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.benefits-grid,
.docs-grid,
.entities-grid,
.trust-grid {
grid-template-columns: 1fr;
}
.intro-stats {
grid-template-columns: 1fr;
}
.service-hero__trust {
flex-direction: column;
align-items: center;
}
}
/* Service Content Layout (sidebar + main) */
.service-content-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--space-3xl);
align-items: start;
}
.service-main {
min-width: 0;
font-size: var(--fs-reading);
line-height: var(--lh-reading);
}
.service-main h2 {
font-size: var(--fs-2xl);
margin-top: var(--space-2xl);
margin-bottom: var(--space-md);
}
.service-main h3 {
font-size: var(--fs-xl);
margin-top: var(--space-xl);
margin-bottom: var(--space-sm);
}
.service-main p {
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-md);
}
.service-main ul,
.service-main ol {
padding-inline-start: var(--space-xl);
margin-bottom: var(--space-md);
}
.service-main li {
margin-bottom: var(--space-sm);
color: var(--text-secondary);
line-height: var(--lh-normal);
}
.service-main ul { list-style-type: disc; }
.service-main ol { list-style-type: decimal; }
.service-main strong {
color: var(--text-primary);
font-weight: var(--fw-semibold);
}
.service-sidebar {
position: sticky;
top: 100px;
align-self: start;
}
.service-sidebar__card {
background-color: var(--bg-secondary);
border-radius: var(--radius-xl);
padding: var(--space-xl);
border: 1px solid var(--color-gray-200);
}
.service-sidebar__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--space-lg);
}
.service-sidebar__list {
display: flex;
flex-direction: column;
gap: 0;
}
.service-sidebar__list li {
border-bottom: 1px solid var(--color-gray-200);
}
.service-sidebar__list li:last-child {
border-bottom: none;
}
.service-sidebar__list a {
display: block;
padding: var(--space-sm) var(--space-md);
font-size: var(--fs-sm);
color: var(--text-secondary);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.service-sidebar__list a:hover {
background-color: var(--color-white);
color: var(--color-primary);
}
.service-sidebar__list a.is-active {
background-color: var(--color-primary);
color: var(--color-white);
font-weight: var(--fw-semibold);
}
@media (max-width: 1024px) {
.service-content-layout {
grid-template-columns: 1fr;
}
.service-sidebar {
position: static;
}
}
/* Native image gallery from migrated pages. */
.wp-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-md);
margin: var(--space-xl) 0;
}
.wp-gallery__item {
margin: 0;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--color-gray-200);
background-color: var(--bg-secondary);
}
.wp-gallery__item img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform var(--transition-slow);
}
.wp-gallery__item:hover img {
transform: scale(1.04);
}
/* Stats Grid 6 */
.stats-grid-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-lg);
}
/* Why Grid 3 */
.why-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
/* About Content */
.about-content {
max-width: 800px;
margin: 0 auto;
}
.about-content__text p {
font-size: var(--fs-lg);
color: var(--text-secondary);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-lg);
}
/* Services Grid Full */
.services-grid-full {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.services-grid-full .service-card__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-secondary) 8%, transparent));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
color: var(--color-primary);
}
.services-grid-full .service-card__icon svg {
width: 24px;
height: 24px;
}
/* Testimonials Grid Full */
.testimonials-grid-full {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
@media (max-width: 1024px) {
.stats-grid-6 { grid-template-columns: repeat(3, 1fr); }
.why-grid-3 { grid-template-columns: 1fr; }
.services-grid-full { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid-full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.stats-grid-6 { grid-template-columns: repeat(2, 1fr); }
.services-grid-full { grid-template-columns: 1fr; }
.testimonials-grid-full { grid-template-columns: 1fr; }
}
/* Sidebar helper text, previously an inline style attribute. */
.service-sidebar__text {
font-size: var(--fs-sm);
color: var(--text-secondary);
margin-bottom: var(--space-lg);
}
/* ==========================================================================
Back to top
==========================================================================
Sits at the inline-end corner so it lands bottom-left in Arabic and
bottom-right in English without a direction-specific override. Hidden until
main.js adds .is-visible past 500px of scroll. */
.back-to-top {
position: fixed;
bottom: var(--space-lg);
inset-inline-end: var(--space-lg);
z-index: var(--z-overlay);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background-color: var(--color-primary);
color: var(--color-white);
box-shadow: var(--shadow-xl);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
background-color: var(--color-secondary);
}
.back-to-top:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.back-to-top {
transition: opacity var(--transition-fast), visibility var(--transition-fast);
transform: none;
}
.back-to-top.is-visible {
transform: none;
}
}
/* Contact page social icons — brand colours on hover, neutral at rest so the
row does not compete with the form beside it. */
/* Same mirroring as the topbar: the handset is drawn facing left, which reads
backwards in Arabic. Scoped to the phone card so the other glyphs, which are
direction-neutral, are untouched. */
[dir="rtl"] .contact-info-card--phone .contact-info-card__icon svg {
transform: scaleX(-1);
}
.contact-social {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-xs);
}
.contact-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background-color: var(--color-gray-100);
color: var(--text-secondary);
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.contact-social__link:hover,
.contact-social__link:focus-visible {
color: var(--color-white);
transform: translateY(-2px);
}
.contact-social__link--facebook:hover,
.contact-social__link--facebook:focus-visible { background-color: #1877F2; }
.contact-social__link--twitter:hover,
.contact-social__link--twitter:focus-visible { background-color: #000000; }
.contact-social__link--linkedin:hover,
.contact-social__link--linkedin:focus-visible { background-color: #0A66C2; }
.contact-social__link--instagram:hover,
.contact-social__link--instagram:focus-visible { background-color: #E4405F; }
.contact-social__link--whatsapp:hover,
.contact-social__link--whatsapp:focus-visible { background-color: #25D366; }
.contact-social__link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* reCAPTCHA v2 tickbox
---------------------------------------------------------------------------
The widget is a fixed 302px iframe. On narrow screens that overflows the
form, so it is scaled from its inline-start corner to fit. */
.form-captcha {
display: flex;
justify-content: flex-start;
}
.form-captcha .g-recaptcha {
display: inline-block;
}
@media (max-width: 400px) {
.form-captcha .g-recaptcha {
transform: scale(0.85);
transform-origin: top right;
}
[dir="ltr"] .form-captcha .g-recaptcha {
transform-origin: top left;
}
}