/* ============================================================ Alwaha HR Recruitment — style.css Color system: slate-blue brand (oklch 46.93% 0.045 241.97), yellow accent (oklch 82% 0.1813 96.75) 2026: oklch, @layer, @container, CSS Nesting, logical props ============================================================ */ @layer base, components, utilities; /* ============================================================ BASE — Tokens, Reset, Typography ============================================================ */ @layer base { :root { color-scheme: light dark; /* ── Slate ramp — brand primary (oklch L 0.045 241.97) ─── */ --slate-50: oklch(0.97 0.01 242); --slate-100: oklch(0.93 0.018 242); --slate-200: oklch(0.88 0.026 242); --slate-300: oklch(0.80 0.032 242); --slate-400: oklch(0.68 0.038 242); --slate-500: oklch(0.58 0.042 242); --slate-600: oklch(0.4693 0.045 241.97); /* ★ brand primary */ --slate-700: oklch(0.36 0.038 242); --slate-800: oklch(0.26 0.030 242); --slate-900: oklch(0.16 0.020 242); /* ── Yellow ramp — accent (oklch L 0.1813 96.75) ────────── */ --yellow-50: oklch(0.97 0.04 97); --yellow-100: oklch(0.94 0.08 97); --yellow-200: oklch(0.90 0.12 97); --yellow-300: oklch(0.86 0.155 97); --yellow-400: oklch(0.82 0.1813 96.75); /* ★ brand accent */ --yellow-500: oklch(0.72 0.1813 97); --yellow-600: oklch(0.60 0.16 97); --yellow-700: oklch(0.46 0.13 97); --yellow-800: oklch(0.32 0.09 97); --yellow-900: oklch(0.20 0.05 97); /* ── Neutral ramp — near-zero chroma ────────────────────── */ --neutral-white: #ffffff; --neutral-50: oklch(0.98 0.004 242); --neutral-100: oklch(0.95 0.007 242); --neutral-200: oklch(0.90 0.010 242); --neutral-300: oklch(0.80 0.014 242); --neutral-400: oklch(0.62 0.018 242); --neutral-600: oklch(0.44 0.018 242); --neutral-700: oklch(0.28 0.014 242); --neutral-800: oklch(0.18 0.010 242); --neutral-900: oklch(0.10 0.006 242); /* ── Status — functional only, never decorative ─────────── */ --status-success: oklch(0.55 0.18 142); --status-success-bg: oklch(0.94 0.07 142); --status-error: oklch(0.62 0.18 25); --status-error-bg: oklch(0.96 0.04 25); --status-warning: oklch(0.60 0.16 75); --status-warning-bg: oklch(0.96 0.06 75); --status-info: oklch(0.55 0.14 242); --status-info-bg: oklch(0.94 0.04 242); /* ── External brand colors ──────────────────────────────── */ --whatsapp-green: #25D366; /* WhatsApp official brand green — external brand exception */ --whatsapp-green-dk: #0a6b3a; /* Dark text on WhatsApp green surfaces */ --whatsapp-text: oklch(12% 0.06 155); /* Dark green text on WhatsApp button fills */ /* ── Semantic: Backgrounds ───────────────────────────────── */ --bg-page: var(--neutral-white); --bg-subtle: var(--slate-50); --bg-muted: var(--slate-100); --bg-card: var(--neutral-white); --bg-inverse: var(--slate-600); --bg-inverse-deep: var(--slate-900); --bg-inverse-card: var(--slate-800); --bg-accent: var(--yellow-400); --bg-accent-subtle:var(--yellow-50); --bg-accent-hover: var(--yellow-500); --bg-success: var(--status-success-bg); --bg-error: var(--status-error-bg); --bg-warning: var(--status-warning-bg); --bg-info: var(--status-info-bg); /* ── Semantic: Text ──────────────────────────────────────── */ --text-heading: var(--slate-900); --text-body: var(--slate-800); --text-secondary: var(--slate-600); --text-muted: var(--slate-400); --text-disabled: var(--slate-300); --text-placeholder: var(--neutral-400); --text-inverse: #ffffff; --text-inverse-muted: oklch(100% 0 0 / 0.72); --text-on-accent: var(--yellow-900); --text-link: var(--slate-600); --text-link-hover: var(--slate-900); --text-link-accent: var(--yellow-600); --text-success: var(--status-success); --text-error: var(--status-error); --text-warning: var(--status-warning); --text-info: var(--status-info); /* ── Semantic: Borders ───────────────────────────────────── */ --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-focus: var(--yellow-400); --border-accent: var(--yellow-400); --border-accent-strong: var(--yellow-600); --border-inverse: var(--slate-700); --border-success: var(--status-success); --border-error: var(--status-error); --border-warning: var(--status-warning); /* ── Semantic: Buttons ───────────────────────────────────── */ --btn-primary-bg: var(--slate-600); --btn-primary-hover: var(--slate-700); --btn-primary-text: #ffffff; --btn-accent-bg: var(--yellow-400); --btn-accent-hover: var(--yellow-500); --btn-accent-text: var(--yellow-900); --btn-secondary-bg: var(--slate-100); --btn-secondary-hover: var(--slate-200); --btn-secondary-text: var(--slate-700); --btn-disabled-bg: var(--slate-100); --btn-disabled-text: var(--slate-300); /* ── Industry card category pastels (intentional hue variation) ── */ --ind-construction-bg: oklch(97.5% 0.015 230); --ind-construction-border:oklch(85% 0.03 230 / 0.25); --ind-hospitality-bg: oklch(97.5% 0.015 80); --ind-hospitality-border: oklch(85% 0.03 80 / 0.25); --ind-facility-bg: oklch(97% 0.018 155); --ind-facility-border: oklch(82% 0.03 155 / 0.25); --ind-food-bg: oklch(97.5% 0.022 97); --ind-food-border: oklch(85% 0.04 97 / 0.25); --ind-manufacturing-bg: oklch(97.5% 0.015 260); --ind-manufacturing-border:oklch(82% 0.03 260 / 0.25); --ind-transport-bg: oklch(97% 0.018 40); --ind-transport-border: oklch(82% 0.03 40 / 0.25); /* ── Shadows — brand-tinted with slate-900 ───────────────── */ --shadow-card: 0 2px 4px oklch(20% 0.05 242 / 0.10), 0 4px 12px oklch(18% 0.03 242 / 0.06); --shadow-card-hover:0 4px 8px oklch(20% 0.05 242 / 0.16), 0 8px 24px oklch(18% 0.03 242 / 0.12); --shadow-btn: 0 1px 2px oklch(16% 0.02 242 / 0.12), 0 4px 12px oklch(16% 0.02 242 / 0.16); --shadow-nav: 0 1px 0 oklch(16% 0.02 242 / 0.08), 0 4px 16px oklch(16% 0.02 242 / 0.06); /* ─── Typography ───────────────────────────────────────── */ --font-body: 'Dubai', system-ui, sans-serif; --font-size-xs: clamp(0.75rem, 1vw, 0.8125rem); --font-size-sm: clamp(0.8125rem, 1.3vw, 0.9375rem); --font-size-base: clamp(0.9375rem, 1.5vw, 1rem); --font-size-lg: clamp(1rem, 1.8vw, 1.1875rem); --font-size-xl: clamp(1.0625rem, 2vw, 1.3125rem); --font-size-2xl: clamp(1.375rem, 2.8vw, 1.75rem); --font-size-3xl: clamp(1.875rem, 4vw, 2.75rem); /* ─── Letter-spacing tokens ───────────────────────────── */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.06em; --tracking-widest: 0.1em; /* ─── Line-height tokens ──────────────────────────────── */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.2; --leading-mid: 1.25; --leading-normal: 1.3; --leading-relaxed: 1.6; --leading-wide: 1.7; --leading-loose: 1.75; /* ─── Spacing ──────────────────────────────────────────── */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 5rem; /* ─── Layout ───────────────────────────────────────────── */ --nav-height: 72px; --max-width: 1280px; /* ─── Border Radius Scale ──────────────────────────────── */ --border-radius-xs: 4px; /* flag images, small details */ --border-radius-sm: 6px; /* small interactive elements */ --border-radius-md: 8px; /* inputs, footer social */ --border-radius: 12px; /* main cards */ --border-radius-lg: 16px; /* carousel cards, large tiles */ --border-radius-xl: 2rem; /* section bottom rounding (32px) */ --border-radius-2xl: 1.5rem; /* section top rounding (24px) */ --border-radius-pill: 999px; /* pill shapes */ /* ─── Transitions — ease-out enters, ease-in exits ─────── */ --transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1); /* enter */ --transition-normal: 250ms cubic-bezier(0, 0, 0.2, 1); /* enter */ --transition-slow: 350ms cubic-bezier(0, 0, 0.2, 1); /* enter */ --transition-exit-fast: 120ms cubic-bezier(0.4, 0, 1, 1); /* exit */ --transition-exit-normal: 200ms cubic-bezier(0.4, 0, 1, 1); /* exit */ } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { font-family: var(--font-body); font-size: var(--font-size-base); color: var(--text-body); background-color: var(--bg-subtle); line-height: var(--leading-relaxed); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; font-size-adjust: from-font; } ul { list-style: none; } a { color: inherit; text-decoration: none; } :is(img, svg) { display: block; max-width: 100%; } button { cursor: pointer; border: none; background: none; font: inherit; } /* Global Typography */ :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-body); color: var(--text-heading); font-weight: 600; font-optical-sizing: auto; } h1 { font-size: var(--font-size-3xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin-block-end: 1rem; text-wrap: balance; } h2 { font-size: var(--font-size-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); margin-block-end: 1rem; text-wrap: balance; } h3 { font-size: var(--font-size-xl); font-weight: 600; line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); text-wrap: balance; } h4 { font-size: var(--font-size-lg); font-weight: 600; line-height: var(--leading-normal); text-wrap: balance; } h5 { font-size: var(--font-size-base); font-weight: 600; line-height: var(--leading-normal); text-wrap: balance; } h6 { font-size: var(--font-size-sm); font-weight: 600; line-height: var(--leading-normal); text-wrap: balance; } p { color: var(--text-body); margin-block-end: 1.5rem; max-width: 68ch; /* optimal reading width — override to none on layout/UI text */ &:last-child { margin-block-end: 0; } } /* ── Dark mode — override semantic tokens only ────────────── */ @media (prefers-color-scheme: dark) { :root { --bg-page: var(--neutral-900); --bg-subtle: var(--neutral-800); --bg-card: var(--neutral-700); --border-default: var(--slate-700); --text-heading: var(--slate-50); --text-body: var(--slate-200); --text-secondary: var(--slate-400); --text-muted: var(--slate-500); --btn-primary-bg: var(--slate-500); --btn-primary-hover: var(--slate-400); /* yellow-400 accent stays identical in dark mode */ /* Shadows — softer on dark backgrounds */ --shadow-card: 0 2px 12px oklch(0% 0 0 / 0.30); --shadow-card-hover: 0 8px 32px oklch(0% 0 0 / 0.50); --shadow-nav: 0 1px 0 oklch(0% 0 0 / 0.20), 0 4px 16px oklch(0% 0 0 / 0.30); } } /* Skip Link */ .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--spacing-md); background: var(--bg-inverse-deep); color: var(--text-inverse); font-weight: 700; padding-block: var(--spacing-sm); padding-inline: var(--spacing-md); border-radius: var(--border-radius-sm); z-index: 9999; transition: inset-block-start var(--transition-fast); &:focus-visible { inset-block-start: var(--spacing-md); } } } /* ============================================================ COMPONENTS ============================================================ */ @layer components { /* ────────────────────────────────────────────────────────── NAVBAR — white, with steel blue logo + yellow accent ────────────────────────────────────────────────────────── */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background-color: transparent; padding-block-start: clamp(0.75rem, 1.5vw, 1.25rem); padding-inline: clamp(1rem, 5vw, 5rem); } .navbar { width: 100%; } .nav-container { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin-inline: auto; padding-block: 0.9rem; padding-inline: clamp(0.75rem, 2vw, 1.5rem); height: calc(var(--nav-height) - 0.75rem); gap: var(--spacing-lg); border-radius: var(--border-radius-xs); /* Default: transparent over hero */ background-color: transparent; box-shadow: none; transition: background-color var(--transition-normal), box-shadow var(--transition-normal), backdrop-filter var(--transition-normal); /* Scrolled: white floating pill */ .scrolled & { background-color: oklch(100% 0 0 / 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 2px oklch(16% 0.02 242 / 0.06), 0 4px 12px oklch(16% 0.02 242 / 0.08), 0 16px 48px oklch(16% 0.02 242 / 0.05); } } .logo { display: flex; align-items: center; flex-shrink: 0; & .logo-img { height: 36px; width: auto; display: block; object-fit: contain; } & .logo-dark { display: none; } & .logo-light { display: block; } .scrolled & { & .logo-dark { display: block; } & .logo-light { display: none; } } } .nav-links { display: none; /* hidden on mobile by default; shown at >= 641px */ align-items: center; gap: var(--spacing-xl); & a { display: inline-flex; align-items: center; font-size: var(--font-size-sm); font-weight: 500; /* Default: white over hero */ color: var(--text-inverse-muted); position: relative; padding-block-end: 4px; transition: color 0.25s ease; /* Underline track */ &::after { content: ''; position: absolute; inset-block-end: 0; left: 0; width: 100%; height: 2px; border-radius: 2px; background-color: var(--text-inverse); transform: scaleX(0); transform-origin: center; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } &:is(:hover, :focus-visible) { color: var(--text-inverse); &::after { transform: scaleX(1); } } /* Scrolled: dark text on white pill */ .scrolled & { color: var(--slate-700); &::after { background-color: var(--slate-600); } &:is(:hover, :focus-visible) { color: var(--slate-700); } } @media (prefers-reduced-motion: reduce) { &::after { transition: none; } } } } .nav-left { display: flex; align-items: center; gap: var(--spacing-md); flex: 1; justify-content: flex-start; } .nav-right { display: flex; align-items: center; gap: var(--spacing-md); flex: 1; justify-content: flex-end; } .lang-toggle { background: transparent; /* Default: white outline over hero */ border: 1.5px solid oklch(100% 0 0 / 0.5); color: oklch(100% 0 0 / 0.88); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.05em; padding-block: var(--spacing-xs); padding-inline: var(--spacing-sm); /* Using var(--spacing-sm) for consistency */ border-radius: var(--border-radius-pill); transition: border-color var(--transition-fast), color var(--transition-fast); &:is(:hover, :focus-visible) { border-color: oklch(100% 0 0); color: var(--neutral-white); /* Use token for white */ } /* Use token for white */ /* Scrolled: dark on white pill */ .scrolled & { border-color: var(--neutral-300); color: var(--slate-700); &:is(:hover, :focus-visible) { border-color: var(--slate-600); color: var(--slate-700); } } } .btn-contact { display: none; /* hidden on mobile by default; shown at >= 641px */ align-items: center; gap: 0.4em; & span:not([hidden]) { display: inline-flex; align-items: center; gap: 0.4em; } font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.02em; padding-block: 0.55em; padding-inline: 1.25em; border-radius: 6px; background-color: var(--bg-accent); border: 1.5px solid var(--bg-accent); color: var(--btn-accent-text); white-space: nowrap; position: relative; overflow: hidden; box-shadow: 0 1px 2px oklch(16% 0.02 242 / 0.10), 0 3px 8px oklch(16% 0.02 242 / 0.12); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.2s ease, border-color 0.2s ease; /* Shimmer sweep layer */ &::before { content: ''; position: absolute; inset: 0; background: linear-gradient( /* Consider a semantic token for shimmer color */ 105deg, transparent 35%, oklch(100% 0 0 / 0.5) 50%, transparent 65% ); transform: translateX(-110%); transition: transform 0.55s ease; pointer-events: none; } & .btn-arrow { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } &:is(:hover, :focus-visible) { background-color: var(--bg-accent); border-color: var(--bg-accent); color: var(--btn-accent-text); transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 3px oklch(82% 0.1813 96.75 / 0.25), 0 6px 16px oklch(82% 0.1813 96.75 / 0.35), 0 12px 28px oklch(0% 0 0 / 0.12); &::before { transform: translateX(110%); } & .btn-arrow { transform: translateY(3px); } } &:active { transform: translateY(1px) scale(0.97); box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08), 0 2px 4px var(--shadow-btn); /* Use semantic shadow token */ transition-duration: 0.1s; } & .nav-download-icon { pointer-events: none; } /* Scrolled: same yellow on white pill */ .scrolled & { background-color: var(--bg-accent); border-color: var(--bg-accent); color: var(--btn-accent-text); &:is(:hover, :focus-visible) { background-color: var(--bg-accent); border-color: var(--bg-accent); } } @media (prefers-reduced-motion: reduce) { transition: box-shadow 0.2s ease, background-color 0.2s ease; &::before { display: none; } &:is(:hover, :focus-visible) { transform: none; } &:active { transform: none; } } } .hamburger { display: flex; /* visible by default on mobile */ flex-direction: column; justify-content: center; gap: var(--spacing-xs); width: 44px; height: 44px; padding: 10px; border-radius: var(--border-radius-sm); & span { display: block; width: 100%; height: 2px; background-color: oklch(100% 0 0); border-radius: 2px; transition: /* Use semantic token for white */ background-color var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal); .scrolled & { background-color: var(--slate-700); } } &[aria-expanded="true"] { & span:nth-child(1) { transform: translateY(7px) rotate(45deg); } & span:nth-child(2) { opacity: 0; } & span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } } .mobile-menu { background-color: oklch(100% 0 0 / 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Use semantic token for white with opacity */ padding-block: var(--spacing-lg); padding-inline: var(--spacing-xl); border-radius: 0 0 var(--border-radius) var(--border-radius); border-block-start: 1px solid var(--neutral-100); box-shadow: 0 8px 24px oklch(16% 0.02 242 / 0.14), 0 2px 8px oklch(16% 0.02 242 / 0.08); margin-block-start: 0.5rem; &[hidden] { display: none; } & ul { display: flex; flex-direction: column; gap: var(--spacing-sm); } & a { display: block; padding-block: 0.75rem; padding-inline: var(--spacing-md); font-weight: 500; color: var(--slate-700); border-radius: var(--border-radius-sm); transition: background-color var(--transition-fast), color var(--transition-fast); &:is(:hover, :focus-visible) { background-color: var(--slate-100); color: var(--slate-900); } &.mobile-cta { margin-block-start: var(--spacing-sm); background-color: var(--bg-accent); color: var(--btn-accent-text); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.04em; padding-block: var(--spacing-sm); padding-inline: var(--spacing-lg); text-align: center; border-radius: var(--border-radius-pill); &:is(:hover, :focus-visible) { background-color: var(--bg-accent-hover); color: var(--btn-accent-text); } } } } /* ────────────────────────────────────────────────────────── HERO — steel blue gradient, white text ────────────────────────────────────────────────────────── */ .hero { container-type: inline-size; container-name: hero; position: sticky; /* pins the hero while the next section scrolls over it */ top: 0; z-index: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg-inverse); overflow: hidden; padding-block-start: var(--nav-height); } /* ── Hero background image ───────────────────────────────── Absolutely fills the hero behind the overlay and content. Rules: • object-fit: cover — fills without distortion, crops to fill • object-position — anchors focal point (upper body of workers) • z-index: 0 — below overlay (z-index 1) and content (z-index 2) • No loading="lazy" — eager by default, critical LCP element ────────────────────────────────────────────────────────── */ .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; /* anchor to upper-middle — shows faces/torsos */ z-index: 0; opacity: 0.02; /* Smooth low-quality placeholder: browser renders bg-color until image loads */ background-color: var(--bg-inverse); } /* ── Hero overlay ─────────────────────────────────────────── Three-layer composite mask applied on top of the photo: Layer 1 (top): bottom-fade — fades photo to brand-dark at the bottom edge, helping the scroll-over transition look intentional rather than abrupt. Layer 2 (middle): directional dimmer — on desktop, text sits on the left so we darken the left 50% more heavily. On mobile the section is full-width text so a uniform tint is used. Layer 3 (bottom): vignette — radial shadow that pulls the viewer's eye to the centre and softens all four edges. All layers use the brand slate-900 (oklch 16% 0.020 242) so the overlay tint is always on-brand, never flat black. ────────────────────────────────────────────────────────── */ .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* With photo at 5% opacity the hero bg-color handles contrast. Overlay is only a subtle bottom fade to smooth the scroll transition. */ background: linear-gradient( to bottom, transparent 60%, oklch(16% 0.020 242 / 0.35) 100% ); } .hero-container { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr; /* mobile-first: 1 col; expands to 2 col at >= 900px */ align-items: center; gap: var(--spacing-2xl); max-width: var(--max-width); margin-inline: auto; padding-block-start: var(--spacing-lg); padding-block-end: var(--spacing-3xl); padding-inline: clamp(2rem, 8vw, 8rem); width: 100%; } .hero-content { display: flex; flex-direction: column; gap: var(--spacing-lg); & > * { animation: fadeInUp 320ms cubic-bezier(0, 0, 0.2, 1) both; } & > *:nth-child(1) { animation-delay: 0.05s; } & > *:nth-child(2) { animation-delay: 0.15s; } & > *:nth-child(3) { animation-delay: 0.25s; } & > *:nth-child(4) { animation-delay: 0.35s; } & > *:nth-child(5) { animation-delay: 0.42s; } & h1 { font-size: clamp(2.4rem, 6cqi, 4.5rem); font-weight: 800; line-height: 0.95; color: var(--text-inverse); letter-spacing: -0.03em; text-transform: uppercase; } } .hero-accent { color: var(--yellow-400); background: none; font-style: normal; white-space: nowrap; } .hero-badge-text { display: flex; align-items: center; gap: var(--spacing-md); color: var(--yellow-400); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.08em; margin-block-end: 0; max-width: none; } .hero-badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--yellow-400); flex-shrink: 0; animation: dotAlarm 2.4s ease-in-out infinite; /* ambient pulse — slow is intentional */ } @keyframes dotAlarm { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .hero-subtitle { font-size: var(--font-size-sm); color: var(--text-inverse-muted); line-height: var(--leading-wide); max-width: 48ch; opacity: 0.88; } .hero-cta-group { display: flex; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; margin-block-start: var(--spacing-sm); } .hero-cards-label { font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-inverse-muted); text-align: center; margin-block-end: var(--spacing-sm); } .hero-stats { display: flex; align-items: center; gap: var(--spacing-lg); margin-block-start: var(--spacing-md); padding-block-start: var(--spacing-md); /* Use semantic token for white with opacity */ border-block-start: 1px solid oklch(100% 0 0 / 0.18); flex-wrap: wrap; } .hero-stat { display: flex; flex-direction: column; gap: 2px; & strong { font-size: var(--font-size-2xl); font-weight: 600; color: var(--text-inverse); line-height: var(--leading-none); font-variant-numeric: tabular-nums lining-nums; } & span { font-size: var(--font-size-xs); color: var(--text-inverse-muted); letter-spacing: 0.04em; text-transform: uppercase; } } .hero-stat-divider { width: 1px; height: 36px; background-color: oklch(100% 0 0 / 0.2); /* Use semantic token for white with opacity */ flex-shrink: 0; } /* Primary CTA — dark amber, WCAG AA 4.8:1 with brand-900 */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; background-color: var(--bg-accent); color: var(--btn-accent-text); font-weight: 700; font-size: var(--font-size-md); letter-spacing: 0.02em; padding-block: 1em; padding-inline: 3.25em; border-radius: 8px; position: relative; overflow: hidden; box-shadow: 0 1px 2px oklch(16% 0.02 242 / 0.12), 0 4px 12px oklch(16% 0.02 242 / 0.16); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.2s ease; &::before { content: ''; position: absolute; inset: 0; background: linear-gradient( /* Consider a semantic token for shimmer color */ 105deg, transparent 35%, oklch(100% 0 0 / 0.5) 50%, transparent 65% ); transform: translateX(-110%); transition: transform 0.55s ease; pointer-events: none; } & .btn-primary__icon { flex-shrink: 0; } &:is(:hover, :focus-visible) { background-color: var(--bg-accent); color: var(--btn-accent-text); transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 3px oklch(82% 0.1813 96.75 / 0.25), 0 6px 16px oklch(82% 0.1813 96.75 / 0.35), 0 12px 28px oklch(0% 0 0 / 0.12); &::before { transform: translateX(110%); } } &:active { transform: translateY(1px) scale(0.97); box-shadow: 0 1px 2px oklch(0% 0 0 / 0.10), 0 2px 6px var(--shadow-btn); /* Use semantic shadow token */ transition-duration: 0.1s; } &:focus-visible { outline: 3px solid var(--text-inverse); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { transition: box-shadow 0.2s ease, background-color 0.2s ease; &::before { display: none; } &:is(:hover, :focus-visible) { transform: none; } &:active { transform: none; } } } /* Inline arrow link — for use on dark hero */ .link-arrow { display: inline-flex; align-items: center; gap: 0.35em; /* Use semantic token for white with opacity */ color: var(--text-inverse-muted); font-weight: 600; font-size: var(--font-size-sm); letter-spacing: 0.02em; text-decoration: none; transition: color var(--transition-fast); & .link-arrow__icon { transition: transform var(--transition-fast); } &:is(:hover, :focus-visible) { color: oklch(100% 0 0 / 1); & .link-arrow__icon { transform: translateX(4px); } } /* Use semantic token for white */ &:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } [dir="rtl"] & .link-arrow__icon { transform: scaleX(-1); } [dir="rtl"] &:is(:hover, :focus-visible) .link-arrow__icon { transform: scaleX(-1) translateX(-4px); } } /* ────────────────────────────────────────────────────────── HERO RIGHT — worker image + country carousel ────────────────────────────────────────────────────────── */ .hero-right { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; } /* Added aspect-ratio to prevent CLS */ .hero-cards { position: relative; z-index: 2; flex: none; width: min(260px, 80%); height: min(220px, 28vh); overflow: hidden; mask-image: linear-gradient( to bottom, transparent 0%, black 16%, black 84%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 16%, black 84%, transparent 100% ); } .scroll-track { position: relative; width: 100%; height: 100%; contain: layout; } .country-card { position: absolute; left: 50%; width: min(260px, 80%); display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); /* Use semantic token for white with opacity */ background: oklch(100% 0 0 / 0.10); border: 1px solid oklch(100% 0 0 / 0.20); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--border-radius); padding-block: var(--spacing-md); padding-inline: var(--spacing-lg); box-shadow: 0 8px 32px oklch(0% 0 0 / 0.25); cursor: default; will-change: transform, opacity; transform-origin: center center; opacity: 0; /* hidden until JS positions and fades in */ } .card-check { position: absolute; inset-block-start: -10px; inset-inline-end: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-accent); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transform-origin: 100% 0%; html[dir="rtl"] & { transform-origin: 0% 0%; } &::after { content: ''; display: block; width: 12px; height: 7px; /* Use semantic token for white */ border-left: 2.5px solid oklch(100% 0 0); border-bottom: 2.5px solid oklch(100% 0 0); transform: rotate(-45deg) translate(1px, -2px); } } .card-flag { flex-shrink: 0; border-radius: var(--border-radius-xs); overflow: hidden; line-height: 0; & img { width: 40px; height: 30px; object-fit: cover; display: block; } } .card-info { & strong { font-size: var(--font-size-base); font-weight: 600; color: var(--text-inverse); white-space: nowrap; } } /* ────────────────────────────────────────────────────────── TRUSTPILOT BAR ────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────── SHARED SECTION UTILITIES ────────────────────────────────────────────────────────── */ .section-container { max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(2rem, 8vw, 8rem); } .section-header { text-align: center; max-width: 60ch; margin-inline: auto; margin-block-end: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); & h2 { color: var(--slate-900); font-size: var(--font-size-xl); margin-block-end: 0; } } .section-badge { display: inline-block; background-color: var(--bg-muted); color: var(--text-secondary); border: 1px solid var(--border-default); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-block: var(--spacing-xs); padding-inline: var(--spacing-md); border-radius: var(--border-radius-pill); } .section-subtitle { font-size: var(--font-size-base); color: var(--text-muted); line-height: var(--leading-wide); margin-block-end: 0; max-width: 68ch; } /* ────────────────────────────────────────────────────────── SERVICES SECTION — white bg ────────────────────────────────────────────────────────── */ .services { container-type: inline-size; container-name: services; background-color: var(--bg-page); padding-block: var(--spacing-3xl); content-visibility: auto; /* Skips rendering until scrolled into view */ } .services-grid { display: grid; grid-template-columns: 1fr; /* mobile-first; expands via @container */ gap: var(--spacing-lg); } .service-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--border-radius); padding: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-md); box-shadow: var(--shadow-card); transition: border-color var(--transition-exit-normal), transform var(--transition-exit-normal), box-shadow var(--transition-exit-normal); &:is(:hover, :focus-within) { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal); } & h3 { color: var(--slate-900); font-size: var(--font-size-lg); font-weight: 600; margin-block-end: 0; } & p { color: var(--text-muted); font-size: var(--font-size-sm); line-height: var(--leading-loose); margin-block-end: 0; } } .service-icon { width: 52px; height: 52px; border-radius: var(--border-radius); background: var(--bg-muted); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; transition: background-color var(--transition-normal), color var(--transition-normal); & svg { width: 22px; height: 22px; } .service-card:is(:hover, :focus-within) & { background: var(--bg-accent); color: var(--text-on-accent); border-color: transparent; } } /* ────────────────────────────────────────────────────────── INDUSTRIES SECTION — light teal bg ────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────── CLIENT LOGOS BAR ────────────────────────────────────────────────────────── */ .industries { container-type: inline-size; container-name: industries; background: rgba(246, 251, 255, 1); padding-block: clamp(3rem, 5vw, 5rem); content-visibility: auto; position: relative; z-index: 1; } .industries-title { color: var(--slate-900); font-size: clamp(2rem, 5cqi, 3.25rem); font-weight: 600; letter-spacing: -0.02em; margin-block-start: 0; margin-block-end: var(--spacing-lg); text-align: center; width: 100%; display: block; } /* Bento grid layout — mobile-first: 1 col; widens at container breakpoints */ .industries-bento { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); grid-template-areas: "construction" "hospitality" "facility" "food" "manufacturing" "transportation"; } /* Each card — category-specific pastels, tokens defined in :root */ .ind-construction { grid-area: construction; background: var(--ind-construction-bg); border-color: var(--ind-construction-border); } .ind-hospitality { grid-area: hospitality; background: var(--ind-hospitality-bg); border-color: var(--ind-hospitality-border); } .ind-facility { grid-area: facility; background: var(--ind-facility-bg); border-color: var(--ind-facility-border); } .ind-food { grid-area: food; background: var(--ind-food-bg); border-color: var(--ind-food-border); } .ind-manufacturing { grid-area: manufacturing; background: var(--ind-manufacturing-bg); border-color: var(--ind-manufacturing-border); } .ind-transportation { grid-area: transportation; background: var(--ind-transport-bg); border-color: var(--ind-transport-border); } /* ── Shared photo style (Hostinger bento pattern) ── Portrait photo anchored to bottom-inline-end, text stays top-inline-start, photo clips at card edge */ .ind-card .ind-photo { position: absolute; inset-block: 0; inset-inline-end: var(--spacing-xl); block-size: 100%; inline-size: auto; pointer-events: none; user-select: none; & img { block-size: 100%; inline-size: auto; object-fit: contain; object-position: bottom center; display: block; filter: drop-shadow(2px 0 16px oklch(0% 0 0 / 0.10)); } } /* Ensure text stays readable over photo — limit body width (tablet+) */ @container industries (width >= 400px) { .ind-card:has(.ind-photo) .ind-body { max-inline-size: 55%; } } /* Food & Beverages, Manufacturing: photo centered below text (single-row cards) */ .ind-food, .ind-manufacturing { &:has(.ind-photo) .ind-body { max-inline-size: 100%; } & .ind-photo { position: static; block-size: auto; inline-size: 100%; display: flex; justify-content: center; & img { block-size: auto; inline-size: 85%; max-inline-size: 340px; object-fit: contain; object-position: top center; filter: drop-shadow(0 4px 16px oklch(0% 0 0 / 0.10)); } } } .ind-card { border: 1px solid transparent; border-radius: var(--border-radius); padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); position: relative; overflow: hidden; box-shadow: var(--shadow-card); } .ind-icon { width: 44px; height: 44px; border-radius: var(--border-radius); background: var(--bg-muted); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; transition: background-color var(--transition-normal), color var(--transition-normal); & svg { width: 20px; height: 20px; } .ind-card:is(:hover, :focus-within) & { background: var(--bg-accent); color: var(--text-on-accent); border-color: transparent; } } .ind-body { display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; & h3 { color: var(--slate-900); font-size: var(--font-size-xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); margin-block-end: 0; } & p { color: var(--text-muted); font-size: var(--font-size-xs); line-height: var(--leading-relaxed); margin-block-end: 0; } } /* Hire Workers CTA pill */ .ind-cta { display: inline-flex; align-items: center; gap: 0.4em; background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--border-default); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.04em; padding-block: var(--spacing-sm); padding-inline: var(--spacing-lg); border-radius: var(--border-radius-pill); width: fit-content; margin-block-start: auto; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); &:is(:hover, :focus-visible) { background-color: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-accent); gap: var(--spacing-sm); } &:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; } } .ind-cta-arrow { font-size: 1em; line-height: var(--leading-none); } /* "Get ready CVs ↗" — underlined text link inside each industry card */ .ind-collection-cta { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-end; margin-block-start: auto; color: var(--slate-700); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: none; text-decoration: none; transition: gap 0.2s ease, opacity 0.2s ease; & > span[lang] { text-decoration: none; } &:hover, &:focus-visible { opacity: 0.8; gap: 0.55em; outline-offset: 3px; } } .ind-collection-arrow { font-size: 1.5em; line-height: 1; display: inline-block; text-decoration: none; } .ind-deco { position: absolute; bottom: calc(-1 * var(--spacing-2xl)); right: calc(-1 * var(--spacing-2xl)); width: 180px; height: 180px; color: var(--slate-600); opacity: 0.06; pointer-events: none; transition: opacity var(--transition-normal); & svg { width: 100%; height: 100%; } .ind-card:is(:hover, :focus-within) & { opacity: 0.10; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================ WHY AFRICAN MANPOWER — Validation section after industries ============================================================ */ .why-africa { background-color: var(--slate-50); padding-block: clamp(2rem, 4vw, 3.5rem); container-type: inline-size; container-name: why-africa; position: relative; z-index: 1; isolation: isolate; border-start-start-radius: var(--border-radius-2xl); border-start-end-radius: var(--border-radius-2xl); } .why-africa__header { text-align: center; max-width: 75ch; margin-inline: auto; margin-block-end: clamp(1rem, 2vw, 1.5rem); display: flex; flex-direction: column; align-items: center; gap: 0; } .why-africa__eyebrow { font-size: var(--font-size-sm); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--slate-600); margin-block-end: 0; line-height: 1; } .why-africa__headline { font-size: clamp(2rem, 5cqi, 3.25rem); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--slate-900); margin-block-start: 0.1em; } .why-africa__sub { font-size: var(--font-size-lg); color: var(--text-muted); line-height: var(--leading-relaxed); max-width: 44ch; } /* 3-column benefit cards — mobile: single col */ .why-africa__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); margin-block-end: clamp(2.5rem, 4vw, 4rem); } .why-africa__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-lg); } /* Photo — element with real images */ .why-africa__photo { inline-size: 100%; aspect-ratio: 4 / 3; max-inline-size: 340px; border-radius: var(--border-radius-sm); overflow: hidden; flex-shrink: 0; display: block; & img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } } .why-africa__card-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--slate-900); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); } .why-africa__card-desc { font-size: var(--font-size-base); font-weight: 400; color: var(--slate-600); line-height: var(--leading-relaxed); } .why-africa__card-desc { font-size: var(--font-size-base); color: var(--text-body); line-height: var(--leading-relaxed); max-inline-size: 34ch; } /* Container query — 3-col cards on wider viewports */ @container why-africa (width >= 640px) { .why-africa__grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ CLIENTS STRIP — Infinite logo marquee ============================================================ */ .clients-strip { position: relative; z-index: 1; padding-block: 6rem; background: var(--bg-page); overflow: hidden; border-block: 1px solid var(--border-default); } /* Inline layout: trust label left, marquee right */ .clients-strip__inline { display: flex; align-items: center; gap: var(--spacing-xl); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--spacing-xl); } .clients-strip__trust { flex-shrink: 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; margin: 0; } /* ---- Slider window: clips overflow + gradient fade on both edges ---- */ .logo-slider { overflow: hidden; position: relative; flex: 1; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } /* ---- Scrolling track ---- */ .logo-slide-track { display: flex; width: max-content; will-change: transform; } /* ---- Individual logo slot ---- */ .logo-item { flex: 0 0 auto; padding: 0 44px; display: flex; align-items: center; justify-content: center; } .logo-item img { max-width: 100px; max-height: 36px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.55; transition: filter 300ms ease, opacity 300ms ease; color: transparent; } /* Dim all items on strip hover, then brighten the one being hovered */ .logo-slider:hover .logo-item img { opacity: 0.3; filter: grayscale(100%); } .logo-slider:hover .logo-item img:hover { filter: grayscale(0%); opacity: 1; } /* RTL scroll direction is handled in JS (animation-direction has no effect without CSS animation) */ /* ────────────────────────────────────────────────────────── HOW WE WORK — 2-col visual card + 4-step process list ────────────────────────────────────────────────────────── */ /* ── Section-scoped palette: #445E72 steel-blue scale ── */ .how-we-work { --hww-primary: var(--slate-600); --hww-primary-dk: var(--slate-800); --hww-mid: var(--slate-500); --hww-tint: var(--slate-600); --hww-pale: var(--slate-100); --hww-hover-bg: rgba(255, 252, 226, 1); --hww-icon-hover: var(--slate-700); position: relative; z-index: 3; background-color: #ffffff; padding-block: 6rem 2rem; container-type: inline-size; container-name: how-we-work; } .hww__inner { max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(2rem, 8vw, 8rem); display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: center; } /* ── Left visual card ── */ .hww__visual { display: flex; justify-content: center; align-items: center; } .hww__card { background: rgba(255, 254, 246, 1); border-radius: var(--border-radius-lg); padding: var(--spacing-xl); box-shadow: 0 1px 2px oklch(16% 0.02 242 / 0.05), 0 4px 12px oklch(16% 0.02 242 / 0.09), 0 16px 40px oklch(16% 0.02 242 / 0.11); width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--spacing-lg); } .hww__card-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.6em; background: transparent; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; border: none; } .hww__card-badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--bg-accent); flex-shrink: 0; animation: dotAlarm 2.4s ease-in-out infinite; } .hww__card-hero { display: flex; flex-direction: column; gap: 0; line-height: 1.05; } .hww__card-line1 { display: flex; align-items: center; gap: 0.2em; font-size: clamp(1.75rem, 4.5cqi, 2.6rem); font-weight: 700; color: var(--hww-primary-dk); margin: 0; } .hww__card-arrow { inline-size: 0.85em; block-size: 0.85em; color: var(--status-success); flex-shrink: 0; } .hww__card-line2 { font-size: clamp(2.8rem, 8cqi, 4.4rem); font-weight: 900; color: var(--hww-primary-dk); letter-spacing: -0.02em; margin: 0; } .hww__card-tagline { font-size: var(--font-size-sm); color: var(--hww-mid); font-style: italic; line-height: var(--leading-relaxed); border-block-start: 1px solid oklch(80% 0.032 242 / 0.4); padding-block-start: var(--spacing-md); } /* ── Right content ── */ .hww__heading { font-size: var(--font-size-3xl); font-weight: 800; color: var(--text-heading); line-height: var(--leading-snug); margin-block-end: var(--spacing-md); } .hww__sub { font-size: var(--font-size-base); color: var(--text-body); line-height: var(--leading-loose); max-width: 52ch; margin-block-end: var(--spacing-lg); } /* ── Steps list ── */ .hww__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); counter-reset: step; } /* * Shadow technique (2026 best practice): * Default: subtle 3-layer oklch shadow for natural depth. * Hover: ::after pseudo-element with a stronger shadow fades in via * opacity — animating opacity is GPU-composited, far cheaper * than animating box-shadow directly. */ .hww__step { position: relative; isolation: isolate; display: grid; grid-template-columns: 3.75rem 1fr; gap: var(--spacing-lg); padding-block: var(--spacing-md); padding-inline: var(--spacing-sm); border-radius: var(--border-radius-md); counter-increment: step; transition: background var(--transition-normal); /* Subtle resting shadow — 3 layers for realistic depth */ box-shadow: 0 1px 2px oklch(16% 0.02 242 / 0.06), 0 3px 8px oklch(16% 0.02 242 / 0.08), 0 8px 20px oklch(16% 0.02 242 / 0.05); /* Elevated hover shadow lives on ::after; opacity-only transition */ &::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 2px 4px oklch(16% 0.02 242 / 0.10), 0 8px 20px oklch(16% 0.02 242 / 0.14), 0 20px 40px oklch(16% 0.02 242 / 0.08); opacity: 0; transition: opacity var(--transition-normal); pointer-events: none; z-index: -1; } &:hover { background: var(--hww-hover-bg); &::after { opacity: 1; } & .hww__step-icon { background: var(--hww-icon-hover); color: oklch(100% 0 0); } } } .hww__step-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 3rem; block-size: 3rem; background: var(--hww-tint); color: oklch(100% 0 0); border-radius: 50%; align-self: center; transition: background var(--transition-normal), color var(--transition-normal); &::before { content: counter(step); font-weight: 800; font-size: var(--font-size-xl); } } .hww__step-body::before { display: none; } .hww__step-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-heading); margin-block-end: var(--spacing-xs); line-height: var(--leading-normal); } .hww__step-desc { font-size: var(--font-size-sm); color: var(--text-body); line-height: var(--leading-wide); } /* ── Responsive: 2-col at wide viewports ── */ @container how-we-work (width >= 860px) { .hww__inner { grid-template-columns: 2fr 3fr; align-items: center; } } /* ────────────────────────────────────────────────────────── TESTIMONIALS CAROUSEL — Synthesia-style portrait cards ────────────────────────────────────────────────────────── */ .testi { /* ── Design tokens — mobile-first defaults ── */ --testi-gap: 24px; --testi-peek: 40px; /* mobile: smaller peek */ --card-w: min(280px, calc(100vw - 120px)); /* mobile: narrower cards */ --card-h: 480px; padding-block: 2rem 2rem; background: var(--bg-page); overflow: visible; position: relative; } /* ── Section header ── */ .testi-header { text-align: center; margin-block-end: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); } .testi-badge { display: inline-block; background: var(--bg-accent-subtle); color: var(--yellow-700); border: 1px solid var(--border-accent); border-radius: var(--border-radius-pill); padding: 0.25em 0.9em; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .testi-title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-heading); line-height: var(--leading-snug); } .testi-sub { font-size: var(--font-size-base); color: var(--text-muted); max-inline-size: 52ch; } /* ── Viewport — full-width, clips overflow for peek effect ── */ /* container-type lets cards use 100cqw = this element's exact width (no scrollbar confusion) */ .testi-viewport { position: relative; overflow: hidden; width: 100%; min-height: 520px; /* Reserve space for carousel */ container-type: inline-size; margin-block-start: var(--spacing-xl); } /* Side fade masks — hidden; peek cards are dimmed via opacity only */ .testi-mask { display: none; } /* ── Scrolling track — GPU-composited, no transition by default ── */ /* direction:ltr keeps flex order physical (LTR) so the JS translateX offset calculation works identically regardless of document dir. */ .testi-track { display: flex; gap: var(--testi-gap); padding-block: 32px; will-change: transform; direction: ltr; } /* Restore RTL text direction inside each card when site is Arabic */ :root[dir="rtl"] .testi-card { direction: rtl; } /* Transition only when JS adds .is-animating */ .testi-track.is-animating { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* ── Portrait cards — fixed size, no flex grow/shrink ── */ .testi-card { flex: 0 0 min(360px, calc((100cqw - 4 * var(--testi-gap)) * 3 / 11)); width: min(360px, calc((100cqw - 4 * var(--testi-gap)) * 3 / 11)); aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; opacity: 0.5; transition: opacity 0.4s ease; outline: none; } /* Active cards — full brightness */ .testi-card.is-active { opacity: 1; } .testi-card:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; } /* Photo layer */ .testi-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 4-stop dark gradient overlay */ .testi-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(91, 114, 131, 1) 0%, rgba(91, 114, 131, 0.55) 20%, rgba(91, 114, 131, 0.12) 38%, transparent 52% ); pointer-events: none; opacity: 1; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Pill pinned to top-left corner of each card */ .testi-card__top { position: absolute; top: 16px; inset-inline-start: 16px; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), translate 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Category pill — solid navbar teal */ .testi-card__pill { background: var(--bg-accent); border-radius: var(--border-radius-pill); color: var(--btn-accent-text); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 5px 12px; white-space: nowrap; } /* Brand / company name */ .testi-card__brand { color: oklch(100% 0 0 / 0.92); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 1px 4px oklch(0% 0 0 / 0.5); } /* Bottom text block */ .testi-card__bottom { position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; padding: 24px 40px 40px; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), translate 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* On hover — reveal the clean photo by fading out overlay + text */ .testi-card:is(:hover, :focus-visible) .testi-card__overlay { opacity: 0; } .testi-card:is(:hover, :focus-visible) .testi-card__top { opacity: 0; translate: 0 -8px; } .testi-card:is(:hover, :focus-visible) .testi-card__bottom { opacity: 0; translate: 0 8px; } .testi-card__quote { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-inverse); line-height: var(--leading-mid); margin-block-end: 14px; } .testi-card__attr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: var(--font-size-xs); } .testi-card__name { color: var(--text-inverse); font-weight: 700; } .testi-card__sep { color: oklch(100% 0 0 / 0.45); } .testi-card__role { color: oklch(100% 0 0 / 0.62); } /* ── Navigation arrows ── */ .testi-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--neutral-white); border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px oklch(0% 0 0 / 0.15); color: var(--neutral-900); transition: scale 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .testi-arrow:hover { scale: 1.08; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.22); background: var(--bg-accent); color: var(--btn-accent-text); } .testi-arrow:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; } .testi-arrow--prev { inset-inline-start: 16px; } .testi-arrow--next { inset-inline-end: 16px; } .testi-arrow svg { width: 16px; height: 16px; flex-shrink: 0; } /* Mirror arrow icons for RTL */ [dir="rtl"] .testi-arrow svg { transform: scaleX(-1); } /* ── Dot / pill indicators ── */ .testi-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-block-start: var(--spacing-xl); padding-block-end: var(--spacing-sm); } .testi-dot { height: 8px; width: 8px; border-radius: var(--border-radius-pill); background: var(--neutral-300); border: none; cursor: pointer; padding: 0; transition: width 0.35s ease, background 0.35s ease; } .testi-dot.is-active { width: 28px; background: var(--btn-primary-bg); } .testi-dot:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; } /* Testi responsive handled in @layer utilities (mobile-first) */ @media (prefers-reduced-motion: reduce) { .testi-track, .testi-card, .testi-card__photo, .testi-dot { transition: none !important; } .testi-card__top, .testi-card__bottom { transition: opacity 0.2s ease; } .testi-card:is(:hover, :focus-visible) .testi-card__top, .testi-card:is(:hover, :focus-visible) .testi-card__bottom { translate: 0; } } } /* ============================================================ UTILITIES — @container, @media, RTL, Motion, Focus ============================================================ */ @layer utilities { /* ==================================================== RESPONSIVE — mobile-first (width >= breakpoints) Base styles = mobile; breakpoints add complexity. ==================================================== */ /* ---- Hero ---- */ /* Mobile: hero stacks to 1 column — content on top, cards below */ @container hero (width < 900px) { .hero-right { justify-content: center; padding-block-end: var(--spacing-xl); } .hero-cards { height: min(280px, 38vh); width: 200px; } } @container hero (width >= 640px) { .hero-cards { height: min(320px, 45vh); } .hero-cta-group { justify-content: flex-start; } } @container hero (width >= 900px) { .hero-container { grid-template-columns: 1fr 1fr; text-align: start; align-items: stretch; } .hero-content { align-items: flex-start; justify-content: center; } .hero-right { align-self: stretch; } .hero-cards { flex: 1; width: auto; height: min(460px, 65vh); } } /* ---- Industries ---- */ @container industries (width >= 580px) { .industries-bento { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); grid-template-areas: "construction hospitality" "facility food" "facility manufacturing" "transportation transportation"; } } @container industries (width >= 900px) { .industries-bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: var(--spacing-md); grid-template-areas: "construction construction hospitality hospitality" "facility facility food manufacturing" "facility facility food manufacturing"; } } /* ---- Industries mobile — reflow portrait photos below text ---- */ @container industries (width < 580px) { .ind-construction .ind-photo, .ind-hospitality .ind-photo, .ind-facility .ind-photo, .ind-transportation .ind-photo { position: static; block-size: 160px; inline-size: 100%; display: flex; justify-content: center; inset-block: unset; inset-inline-end: unset; & img { block-size: 100%; inline-size: auto; max-inline-size: 55%; object-fit: contain; object-position: bottom center; } } .ind-card:has(.ind-photo) .ind-body { max-inline-size: 100%; } } /* ---- Services ---- */ @container services (width >= 520px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @container services (width >= 900px) { .services-grid { grid-template-columns: repeat(4, 1fr); } } /* ---- Contact grid — moved after .contact-grid base rule to fix cascade order ---- */ /* ---- Mobile-only fixes (< 641px) ---- */ @media (width < 641px) { /* Clients strip: stack trust label above marquee */ .clients-strip__inline { flex-direction: column; gap: var(--spacing-md); } .clients-strip__trust { white-space: normal; text-align: center; } /* Hero stat dividers: hide when row wraps on narrow screens */ .hero-stat-divider { display: none; } .hero-stats { gap: var(--spacing-md); } /* Gallery: single card at a time — width matches JS computeCardW() */ .testi-card { flex: 0 0 calc(100cqw - 48px); width: calc(100cqw - 48px); } /* Gallery card bottom text: tighter padding on narrow cards */ .testi-card__bottom { padding: 16px 20px 24px; } /* Logo: readable size on mobile */ .logo .logo-img { height: 32px; } /* Body bottom padding so sticky CTA doesn't cover content */ body { padding-block-end: 72px; } } /* ---- Sticky mobile CTA ---- */ .mobile-sticky-cta { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 90; padding: var(--spacing-sm) var(--spacing-md); background: oklch(100% 0 0 / 0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-block-start: 1px solid var(--neutral-100); box-shadow: 0 -4px 16px oklch(16% 0.02 242 / 0.10); } .mobile-sticky-cta__btn { display: flex; align-items: center; justify-content: center; gap: 0.5em; width: 100%; padding-block: 0.875em; background: var(--whatsapp-green); color: var(--whatsapp-text); font-size: var(--font-size-base); font-weight: 700; letter-spacing: 0.02em; border-radius: 6px; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 2px 8px oklch(55% 0.18 155 / 0.30); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.2s ease; &::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 35%, oklch(100% 0 0 / 0.4) 50%, transparent 65% ); transform: translateX(-110%); transition: transform 0.55s ease; pointer-events: none; } &:is(:hover, :focus-visible) { background: var(--whatsapp-green); transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 3px oklch(55% 0.18 155 / 0.25), 0 6px 16px oklch(55% 0.18 155 / 0.35), 0 12px 28px oklch(0% 0 0 / 0.10); &::before { transform: translateX(110%); } } &:active { transform: translateY(1px) scale(0.97); box-shadow: 0 1px 4px oklch(55% 0.18 155 / 0.20); transition-duration: 0.1s; } &:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { transition: background 0.2s ease; &::before { display: none; } &:is(:hover, :focus-visible) { transform: none; } &:active { transform: none; } } } @media (width < 641px) { .mobile-sticky-cta { display: block; opacity: 0; pointer-events: none; transform: translateY(100%); transition: opacity 0.25s ease, transform 0.25s ease; } .mobile-sticky-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } } /* ---- Navbar — show desktop links at >= 641px ---- */ @media (width >= 641px) { .nav-links { display: flex; } .btn-contact { display: inline-flex; align-items: center; gap: 0.35em; } .hamburger { display: none; } } /* ---- Testimonials — larger at >= 640px ---- */ @media (width >= 640px) { .testi { --testi-peek: 80px; --card-w: 360px; } .testi-card__pill { font-size: var(--font-size-xs); padding: 5px 12px; } .testi-arrow { width: 48px; height: 48px; } .testi-arrow svg { width: 20px; height: 20px; } } /* ---- Large screens ---- */ @media (width >= 1400px) { .hero-container { grid-template-columns: 1.1fr 0.9fr; } } /* ---- RTL overrides ---- */ html[dir="rtl"] { & .hero-container { direction: rtl; } & .hero-content { text-align: start; } & .hero-cards { align-items: flex-start; } } @container hero (width >= 900px) { html[dir="rtl"] .hero-content { align-items: flex-start; text-align: start; } html[dir="rtl"] .hero-cards { align-items: flex-start; } } /* Arabic headline corrections — letter-spacing breaks cursive connections */ html[dir="rtl"] .hero-content h1 { letter-spacing: 0; line-height: 1.2; } /* ---- Scroll-Driven Hero Recede (SiteGround-style sticky cover effect) ---- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .hero-container { will-change: transform, opacity; animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 15svh 85svh; /* starts fading after 15% scroll, completes at 85% */ } @keyframes hero-recede { from { transform: scale(1); opacity: 1; } to { transform: scale(0.90); opacity: 0.45; } } } } /* ---- Reduced Motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ========== CONTACT SECTION ========== */ .contact { position: relative; z-index: 1; container-type: inline-size; container-name: contact; border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl); background: rgba(246, 251, 255, 1); padding-block: clamp(3rem, 6vh, 5rem) clamp(6rem, 12vh, 11rem); min-height: auto; display: flex; align-items: center; } /* Badge override for dark hero background */ .contact .section-badge { background-color: oklch(100% 0 0 / 0.15); color: oklch(100% 0 0); border: 1px solid oklch(100% 0 0 / 0.25); } /* ── Contact grid (intro left | email | whatsapp) ── */ .contact-grid { display: grid; grid-template-columns: 1fr; /* mobile-first: stacked */ gap: var(--spacing-xl); align-items: center; } .contact-intro { display: flex; flex-direction: column; gap: var(--spacing-xs); align-items: flex-start; } .contact-heading { font-size: clamp(2.4rem, 6cqi, 4.5rem); font-weight: 800; color: var(--text-heading); line-height: 0.95; letter-spacing: -0.03em; text-transform: capitalize; margin: 0; text-align: start; } html[dir="rtl"] .contact-heading { letter-spacing: 0; line-height: 1.2; } .contact-subheading { margin-block-start: 0.75rem; font-size: clamp(1rem, 2cqi, 1.25rem); color: var(--text-muted); font-weight: 400; } /* Channel type label pill (Formal / Fastest) */ .contact-channel__label { position: absolute; inset-block-start: var(--spacing-md); inset-inline-start: var(--spacing-md); display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); border: 1px solid oklch(0% 0 0 / 0.15); border-radius: var(--border-radius-pill); padding-block: 4px; padding-inline: 10px; } .contact-channel__label--fast { color: var(--whatsapp-green-dk); border-color: var(--whatsapp-green); background: oklch(97% 0.06 155 / 0.50); } /* Channel cards */ .contact-channel { border-radius: var(--border-radius-lg); padding: var(--spacing-xl); padding-block-start: 3.5rem; /* clear the absolute-positioned label */ min-height: 340px; position: relative; display: flex; flex-direction: column; gap: 0; /* manual spacing for precision */ align-self: stretch; } /* Hospitality pastel (warm amber) */ .contact-channel--email { background: rgba(255, 252, 226, 1); border: 1px solid oklch(85% 0.03 80 / 0.40); /* Use semantic token for shadow color */ box-shadow: 0 1px 2px oklch(75% 0.08 80 / 0.18), 0 2px 4px oklch(75% 0.08 80 / 0.14), 0 4px 8px oklch(75% 0.08 80 / 0.10), 0 8px 16px oklch(75% 0.08 80 / 0.08), 0 16px 32px oklch(75% 0.08 80 / 0.05); } /* WhatsApp card — dominant primary CTA */ .contact-channel--whatsapp { background: oklch(97.5% 0.025 155); border: 2px solid var(--whatsapp-green); box-shadow: /* Use semantic token for shadow color */ 0 0 0 1px oklch(55% 0.18 155 / 0.08), 0 4px 8px oklch(55% 0.18 155 / 0.14), 0 8px 16px oklch(55% 0.18 155 / 0.12), 0 16px 32px oklch(55% 0.18 155 / 0.10), 0 32px 64px oklch(55% 0.18 155 / 0.07); padding: var(--spacing-lg); padding-block-start: 3.5rem; /* preserve label clearance despite padding override */ } /* Icon */ .contact-channel__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-block-start: var(--spacing-lg); margin-block-end: var(--spacing-md); & svg { width: 32px; height: 32px; } } .contact-channel--email .contact-channel__icon { border-radius: 50%; background: oklch(90% 0.04 80 / 0.40); color: var(--slate-900); /* Use semantic token for background color */ } .contact-channel--whatsapp .contact-channel__icon { color: var(--whatsapp-green); position: relative; border-radius: 50%; background: none; box-shadow: /* Use semantic token for shadow color */ 0 0 0 14px oklch(60% 0.15 155 / 0.08), 0 0 0 28px oklch(60% 0.15 155 / 0.04); } /* Title */ .contact-channel__title { font-size: var(--font-size-lg); font-weight: 600; margin: 0; margin-block-end: var(--spacing-sm); } .contact-channel--email .contact-channel__title { color: var(--text-heading); } .contact-channel--whatsapp .contact-channel__title { color: var(--text-heading); } /* Description */ .contact-channel__desc { font-size: var(--font-size-xs); line-height: 1.65; margin: 0; } .contact-channel--email .contact-channel__desc { color: var(--text-muted); } .contact-channel--whatsapp .contact-channel__desc { color: var(--text-muted); } /* Meta — email address / phone number; pushes itself + button to the bottom */ .contact-channel__meta { margin-block-start: auto; margin-block-end: var(--spacing-md); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.02em; padding-block-start: var(--spacing-lg); max-width: none; } .contact-channel--email .contact-channel__meta { color: var(--text-secondary); } .contact-channel--whatsapp .contact-channel__meta { color: var(--text-secondary); } /* CTA button */ .contact-channel__btn { display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start; border: 2px solid var(--btn-primary-bg); border-radius: 6px; padding-block: 0.6em; padding-inline: 1.25em; font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--btn-primary-bg); background: transparent; text-decoration: none; position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; &::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 35%, oklch(100% 0 0 / 0.35) 50%, transparent 65% ); transform: translateX(-110%); transition: transform 0.55s ease; pointer-events: none; } & svg { width: 15px; height: 15px; flex-shrink: 0; } &:is(:hover, :focus-visible) { background: var(--btn-primary-bg); color: var(--btn-primary-text); transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 3px oklch(16% 0.02 242 / 0.2), 0 6px 16px oklch(16% 0.02 242 / 0.25), 0 12px 28px oklch(16% 0.02 242 / 0.10); &::before { transform: translateX(110%); } } &:active { transform: translateY(1px) scale(0.97); box-shadow: none; transition-duration: 0.1s; } @media (prefers-reduced-motion: reduce) { transition: background 0.2s ease, color 0.2s ease; &::before { display: none; } &:is(:hover, :focus-visible) { transform: none; } &:active { transform: none; } } } /* Email button — secondary outline */ .contact-channel__btn--email { border-color: var(--btn-primary-bg); background: transparent; color: var(--btn-primary-bg); align-self: stretch; justify-content: center; &:is(:hover, :focus-visible) { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); } } /* WhatsApp button — outline, fills green on hover */ .contact-channel__btn--whatsapp { background: transparent; border-color: var(--whatsapp-green); color: var(--whatsapp-green); align-self: stretch; justify-content: center; padding-block: 0.875em; font-size: var(--font-size-sm); &:is(:hover, :focus-visible) { background: var(--whatsapp-green); border-color: var(--whatsapp-green); color: var(--whatsapp-text); box-shadow: /* Use semantic token for shadow color */ 0 0 0 3px oklch(55% 0.18 155 / 0.25), 0 6px 16px oklch(55% 0.18 155 / 0.35), 0 12px 28px oklch(0% 0 0 / 0.10); } } /* Tel link inside meta slot */ .contact-channel__meta--tel { text-decoration: none; color: inherit; display: block; &:hover { text-decoration: underline; } } /* Micro-copy — friction-reducing text under CTAs */ .contact-micro-copy { font-size: var(--font-size-xs); color: var(--text-muted); margin: 0; margin-block-start: var(--spacing-sm); max-width: none; text-align: center; } /* "What happens next" numbered steps */ .contact-steps { list-style: none; padding: 0; margin: var(--spacing-sm) 0 0; display: flex; flex-direction: column; gap: 5px; counter-reset: step; } .contact-steps li { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-xs); color: var(--text-muted); counter-increment: step; &::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; background: var(--whatsapp-green); color: var(--whatsapp-text); font-size: var(--font-size-xs); font-weight: 700; flex-shrink: 0; } /* Use semantic token for WhatsApp text color */ } /* Contact grid — responsive breakpoints AFTER the base rule so they correctly override it */ @container contact (width >= 520px) { .contact-grid { grid-template-columns: 1fr 1fr; } .contact-intro { grid-column: 1 / -1; } } @container contact (width >= 860px) { .contact-grid { grid-template-columns: 1fr 1.25fr 0.85fr; } .contact-intro { grid-column: auto; } } /* Email icon — subtle opacity shift on parent hover instead of a looping animation */ .contact-channel--email:hover .contact-channel__icon { opacity: 0.85; transition: opacity var(--transition-fast); } /* Button arrow nudge on hover */ .contact-channel__btn svg { transition: transform 200ms ease; } .contact-channel__btn:is(:hover, :focus-visible) svg { transform: translateX(4px); } /* ---- Grid utility system ---- */ /* Usage:
— responsive by default via container */ .grid { display: grid; gap: var(--spacing-lg); --cols: 1; grid-template-columns: repeat(var(--cols), 1fr); } .grid--2 { --cols: 2; } .grid--3 { --cols: 3; } .grid--4 { --cols: 4; } /* Collapse to 1 col on narrow viewports */ @media (width <= 520px) { .grid--2, .grid--3, .grid--4 { --cols: 1; } } @media (width > 520px) and (width <= 900px) { .grid--4 { --cols: 2; } .grid--3 { --cols: 2; } } /* ---- Disabled states ---- */ [disabled], [aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; pointer-events: none; } /* ---- Empty states for dynamic carousels ---- */ .testi-empty { display: none; align-items: center; justify-content: center; min-height: var(--card-h, 520px); width: 100%; border: 2px dashed var(--neutral-300); border-radius: var(--border-radius); color: var(--text-muted); /* Use semantic token for white with opacity */ font-size: var(--font-size-base); &:not([hidden]) { display: flex; } } .country-empty { display: none; align-items: center; justify-content: center; height: 100%; /* Use semantic token for white with opacity */ color: oklch(100% 0 0 / 0.7); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-md); &:not([hidden]) { display: flex; } } /* ---- Focus Visible ---- */ :focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } } /* ============================================================ SITE FOOTER ============================================================ */ @layer components { #main-content { position: relative; z-index: 1; } .site-footer { position: sticky; bottom: 0; z-index: 0; display: flex; flex-direction: column; background: var(--bg-inverse); color: var(--text-inverse); } /* Inner wrapper — centers and constrains content */ .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 0; /* individual margins control spacing between groups */ max-width: 1280px; width: 100%; margin-inline: auto; padding-block: clamp(3.5rem, 8vh, 6rem) clamp(3rem, 6vh, 5rem); padding-inline: clamp(1.5rem, 5vw, 4rem); } /* ── Social row: line ——— [icons] ——— line ── */ .footer-social-row { display: flex; align-items: center; gap: 1.75rem; width: 100%; margin-block-start: clamp(2.5rem, 5vh, 4rem); /* clear visual break above social strip */ } .footer-rule { flex: 1; height: 1px; background-color: oklch(100% 0 0 / 0.25); } .footer-social { display: flex; align-items: center; gap: 1.75rem; } .footer-social-link { color: oklch(100% 0 0); text-decoration: none; line-height: 0; transition: color 180ms ease; &:is(:hover, :focus-visible) { /* Use semantic token for white with opacity */ color: oklch(100% 0 0 / 0.75); } &:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 4px; border-radius: 2px; } } /* Brand / logo */ .footer-brand { display: block; line-height: 0; } .footer-logo { width: clamp(130px, 15vw, 200px); height: auto; } /* Copyright — tight to logo, clearly subordinate */ .footer-copy { font-size: var(--font-size-xs); margin-block-start: var(--spacing-sm); color: var(--text-inverse-muted); } /* Navigation links row */ .footer-nav { margin-block: var(--spacing-lg); & ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); } & a { font-size: var(--font-size-xs); color: var(--text-inverse-muted); transition: color var(--transition-fast); &:hover { color: var(--text-inverse); } } } /* Sentinel element for sticky nav */ .sentinel-element { position: absolute; top: 100svh; height: 1px; width: 1px; pointer-events: none; } /* ========== BOTTOM BAR ========== */ .bottom-bar { background-color: oklch(15% 0.01 250); padding-block: 0.875rem; } .bottom-bar__inner { max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } @media (min-width: 640px) { .bottom-bar__inner { justify-content: space-between; } } .bottom-bar__social { display: flex; align-items: center; gap: 1.25rem; } .bottom-bar__icon { color: oklch(70% 0 0); line-height: 0; text-decoration: none; transition: color 180ms ease; } .bottom-bar__icon:is(:hover, :focus-visible) { color: oklch(100% 0 0); } .bottom-bar__legal { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .bottom-bar__legal a { color: oklch(60% 0 0); font-size: 0.75rem; text-decoration: none; transition: color 180ms ease; } .bottom-bar__legal a:is(:hover, :focus-visible) { color: oklch(90% 0 0); } .bottom-bar__sep { color: oklch(40% 0 0); font-size: 0.75rem; user-select: none; }