/* Generated by kreston_style_bundle() — edit the sources in assets/css/, not this file. */
/* ==== variables.css ==== */
/* ==========================================================================
Kreston Egypt — Design System Variables (v3 — Light Premium Editorial)
========================================================================== */
:root {
/* ── Brand Colors ── */
--k-primary: #0B1D3A;
--k-primary-mid: #142D54;
--k-primary-light: #1E3F6E;
--k-primary-vivid: #2563EB;
--k-accent: #C9A84C;
--k-accent-light: #DFC06A;
--k-accent-dim: rgba(201, 168, 76, 0.12);
/* ── Neutrals (lighter, warmer) ── */
--k-white: #FFFFFF;
--k-offwhite: #FAFAF8;
--k-cream: #F3F1EC;
--k-gray-50: #F8F7F5;
--k-gray-100: #F0EDE8;
--k-gray-200: #E2DED6;
--k-gray-300: #C5C0B6;
--k-gray-400: #9A9488;
--k-gray-500: #706B60;
--k-gray-600: #504C44;
--k-gray-700: #3A3730;
--k-gray-800: #242220;
--k-gray-900: #141310;
--k-black: #050504;
/* ── Semantic surfaces / ink (overridden wholesale in dark.css) ──
--k-white and --k-black stay literal: they are also used as ink on dark
panels, which must not flip. Anything that paints a *page* surface uses
--k-surface*; the brand navy used as *text* uses --k-brand-ink. */
--k-surface: #FFFFFF;
--k-surface-2: #FFFFFF;
--k-surface-rgb: 250, 250, 248;
--k-brand-ink: #0B1D3A;
--k-nav-ink: #000000;
/* ── Typography ──
Self-hosted Inter (Latin) + IBM Plex Sans Arabic, same pairing as the
chemexa-ghana theme. Faces are inlined from assets/fonts/fonts.css. */
--k-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--k-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--k-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--k-font-ar: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, sans-serif;
/* ── Fluid Type Scale ── */
--k-t-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
--k-t-sm: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
--k-t-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
--k-t-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
--k-t-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
--k-t-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--k-t-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
--k-t-4xl: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
--k-t-5xl: clamp(2.25rem, 1.6rem + 3.25vw, 3.25rem);
--k-t-6xl: clamp(2.75rem, 1.8rem + 4.75vw, 4.5rem);
--k-t-7xl: clamp(3.25rem, 2rem + 6.25vw, 6rem);
--k-t-8xl: clamp(3.75rem, 2rem + 8.75vw, 8rem);
/* 8.5rem put the headline at 136px and gave it a 612px block that filled the
hero on its own. 6.5rem keeps the display weight without the copy having to
fight the rest of the composition for room. */
--k-t-hero: clamp(2.75rem, 1.4rem + 7vw, 6.5rem);
/* ── Weights ── */
--k-w-light: 300;
--k-w-regular: 400;
--k-w-medium: 500;
--k-w-semibold: 600;
--k-w-bold: 700;
--k-w-black: 900;
/* ── Spacing ── */
--k-s-1: 0.25rem;
--k-s-2: 0.5rem;
--k-s-3: 0.75rem;
--k-s-4: 1rem;
--k-s-5: 1.25rem;
--k-s-6: 1.5rem;
--k-s-8: 2rem;
--k-s-10: 2.5rem;
--k-s-12: 3rem;
--k-s-16: 4rem;
--k-s-20: 5rem;
--k-s-24: 6rem;
--k-s-32: 8rem;
/* ── Layout ── */
/* A flat 1280px cap left 317px of empty gutter on each side of a 1920px
screen -- a third of the display carrying nothing. The floor keeps every
viewport up to ~1685px exactly as it was; only screens wider than that
reclaim any of it, and the 1500px ceiling stops the measure from growing
past what a line of body copy can comfortably span. */
--k-container: clamp(1280px, 76vw, 1500px);
--k-container-narrow: 860px;
--k-container-wide: clamp(1440px, 84vw, 1680px);
--k-gutter: clamp(1.5rem, 1rem + 2vw, 3rem);
/* ── Transitions ── */
--k-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--k-ease-out: cubic-bezier(0, 0, 0.2, 1);
--k-duration-fast: 200ms;
--k-duration-base: 400ms;
--k-duration-slow: 600ms;
--k-duration-reveal: 300ms;
/* ── Shadows ── */
--k-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--k-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--k-shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
--k-shadow-xl: 0 24px 64px rgba(0,0,0,0.1);
/* ── Z-Index ── */
--k-z-header: 100;
--k-z-overlay: 200;
/* ── Header ──
--k-header-h is the whole fixed chrome: the utility bar plus the logo/nav
bar beneath it. Everything that clears the header -- hero padding, sticky
offsets, scroll-margin on article headings -- is written against it, so
deriving it keeps all of those correct without touching a single caller.
The utility bar collapses on mobile, where --k-topbar-h drops to zero. */
--k-topbar-h: 38px;
--k-header-bar-h: 72px;
--k-header-h: calc(var(--k-header-bar-h) + var(--k-topbar-h));
--k-header-h-scroll: 60px;
}
@media (max-width: 767px) {
:root { --k-topbar-h: 0px; }
}
@media (min-width: 1024px) {
:root {
--k-header-bar-h: 80px;
--k-header-h-scroll: 68px;
}
}
/* ==== base.css ==== */
/* ==========================================================================
Kreston Egypt — Base (v2)
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Not `hidden`: that makes the element a scroll container and silently
disables position: sticky everywhere below it. `clip` stops the same
horizontal overflow while leaving sticky working. */
overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
font-family: var(--k-font-body);
font-size: var(--k-t-base);
font-weight: var(--k-w-regular);
line-height: 1.65;
color: var(--k-gray-600);
background: var(--k-surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* No overflow here. `overflow-x: clip` against the default `overflow-y:
visible` is not a valid pair, so the browser resolves the element to
hidden/auto — a scroll container, which is exactly what stops
position: sticky from working. The rule on above already clips
horizontal overflow for the whole document. */
}
/*
* Qi Addons ships `body:not(.wp-admin):not(.editor-styles-wrapper){overflow-x:hidden}`.
* That makes a scroll container, which silently disables every
* position: sticky on the site — the contents rail on articles included.
* Horizontal overflow is already clipped on above, so body does not
* need it. Specificity here (0,2,2) beats the plugin's (0,2,1) regardless of
* which stylesheet loads last.
*
* `visible`, not `clip`: clip on one axis against visible on the other is an
* invalid pair and the browser resolves it straight back to hidden/auto.
*/
html body:not(.wp-admin):not(.editor-styles-wrapper) {
overflow-x: visible;
}
/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--k-font-heading);
font-weight: var(--k-w-bold);
line-height: 1.1;
color: var(--k-gray-900);
letter-spacing: -0.03em;
}
.display-hero {
font-family: var(--k-font-heading);
font-size: var(--k-t-hero);
font-weight: var(--k-w-black);
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.display-lg {
font-family: var(--k-font-heading);
font-size: var(--k-t-7xl);
font-weight: var(--k-w-black);
line-height: 0.95;
letter-spacing: -0.035em;
text-transform: uppercase;
}
.display-md {
font-family: var(--k-font-heading);
font-size: var(--k-t-6xl);
font-weight: var(--k-w-bold);
line-height: 1.0;
letter-spacing: -0.03em;
}
.editorial-title {
font-family: var(--k-font-display);
font-size: var(--k-t-5xl);
font-weight: var(--k-w-bold);
line-height: 1.1;
letter-spacing: -0.02em;
}
.editorial-subtitle {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-regular);
line-height: 1.5;
color: var(--k-gray-400);
letter-spacing: -0.01em;
}
.label {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--k-accent);
}
p { margin-bottom: 1.5em; line-height: 1.7; }
a {
color: inherit;
text-decoration: none;
transition: color var(--k-duration-fast) var(--k-ease);
}
a:hover { color: var(--k-brand-ink); }
a:focus-visible {
outline: 2px solid var(--k-primary);
outline-offset: 3px;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection {
background: var(--k-primary);
color: var(--k-white);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--k-gray-100); }
::-webkit-scrollbar-thumb { background: var(--k-gray-300); border-radius: 3px; }
/* ── Back to top ──────────────────────────────────────────────────────────
Fixed to the trailing bottom corner, which mirrors on Arabic pages because
the offset is logical. Hidden until main.js decides the reader is far
enough down; without JavaScript the [hidden] attribute simply stays and the
control never appears, which is the right outcome for a scroll affordance
that could not scroll smoothly anyway. */
.k-to-top {
position: fixed;
inset-block-end: var(--k-s-6);
inset-inline-end: var(--k-s-6);
z-index: calc(var(--k-z-header) - 1);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--k-primary);
color: var(--k-white);
box-shadow: var(--k-shadow-lg);
opacity: 0;
transform: translateY(8px);
transition: opacity var(--k-duration-base) var(--k-ease-out),
transform var(--k-duration-base) var(--k-ease-out),
background var(--k-duration-fast) var(--k-ease);
}
.k-to-top svg { width: 18px; height: 18px; }
.k-to-top.is-visible {
opacity: 1;
transform: none;
}
.k-to-top:hover,
.k-to-top:focus-visible {
background: var(--k-accent);
color: var(--k-gray-900);
}
html.dark .k-to-top {
background: var(--k-surface-2);
color: var(--k-gray-200);
border: 1px solid var(--k-gray-200);
}
html.dark .k-to-top:hover,
html.dark .k-to-top:focus-visible {
background: var(--k-accent);
color: var(--k-gray-900);
}
/* Clear of a thumb on a phone, and of the bottom bar in Safari. */
@media (max-width: 767px) {
.k-to-top {
inset-block-end: calc(var(--k-s-4) + env(safe-area-inset-bottom, 0px));
inset-inline-end: var(--k-s-4);
width: 42px;
height: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
.k-to-top { transition: opacity var(--k-duration-fast) var(--k-ease); transform: none; }
}
.skip-link {
position: fixed;
top: -100%;
left: var(--k-s-4);
z-index: 9999;
padding: var(--k-s-3) var(--k-s-6);
background: var(--k-primary);
color: var(--k-white);
font-weight: var(--k-w-semibold);
font-size: var(--k-t-sm);
}
.skip-link:focus { top: 0; color: var(--k-white); }
/* Visually hidden but still announced — used by the search form's label. */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
position: fixed;
top: var(--k-s-4);
left: var(--k-s-4);
width: auto;
height: auto;
clip: auto;
padding: var(--k-s-3) var(--k-s-4);
background: var(--k-surface-2);
color: var(--k-gray-900);
box-shadow: var(--k-shadow-lg);
z-index: calc(var(--k-z-overlay) + 20);
}
/* ==== layout.css ==== */
/* ==========================================================================
Kreston Egypt — Layout (v2 — Editorial)
========================================================================== */
.k-container {
width: 100%;
max-width: var(--k-container);
margin-inline: auto;
padding-inline: var(--k-gutter);
}
.k-container--narrow { max-width: var(--k-container-narrow); }
.k-container--wide { max-width: var(--k-container-wide); }
.k-container--full { max-width: none; padding-inline: 0; }
/* ── Section System ──
Sections stack directly on one another, so the gap a reader actually sees
is two of these paddings, not one. At the old 9rem ceiling that came to
288px of empty band between every pair of sections on a wide screen -- more
than a quarter of a 1080px viewport, eight times down the home page. The
7rem ceiling brings the seam to 224px, which still reads as generous
editorial spacing without the page feeling half-empty. */
.k-section {
position: relative;
padding-block: clamp(4.5rem, 3.25rem + 4.5vw, 7rem);
}
.k-section--flush { padding-block: 0; }
.k-section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
/* A hero already closes with a full band of its own bottom padding. The section
that follows it added a second one, so the first heading sat roughly 270px
below the hero copy -- two gaps reading as one dead strip. The hero supplies
the separation; this only needs to clear it.
.k-global-body sets its own padding-top (its first block is a full-bleed
band that must meet the hero) and is left alone. */
.k-hero-page + .k-section:not(.k-global-body),
.k-post-hero + .k-section:not(.k-global-body) {
padding-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.k-section--dark {
background: var(--k-gray-900);
color: var(--k-gray-300);
}
.k-section--dark h1, .k-section--dark h2, .k-section--dark h3,
.k-section--dark h4, .k-section--dark .display-hero,
.k-section--dark .display-lg, .k-section--dark .display-md {
color: var(--k-white);
}
.k-section--dark .label { color: var(--k-accent); }
.k-section--primary {
background: var(--k-primary);
color: var(--k-white);
}
.k-section--primary h1, .k-section--primary h2, .k-section--primary h3,
.k-section--primary .display-hero, .k-section--primary .display-lg,
.k-section--primary .display-md {
color: var(--k-white);
}
.k-section--primary .label { color: var(--k-accent); }
.k-section--cream { background: var(--k-offwhite); }
/* ── Editorial Grid ── */
.k-grid {
display: grid;
gap: var(--k-gutter);
}
.k-grid--2 { grid-template-columns: 1fr; }
.k-grid--3 { grid-template-columns: 1fr; }
.k-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.k-grid--2 { grid-template-columns: repeat(2, 1fr); }
.k-grid--3 { grid-template-columns: repeat(2, 1fr); }
.k-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.k-grid--3 { grid-template-columns: repeat(3, 1fr); }
.k-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* ── Split Layouts ── */
.k-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--k-gutter);
align-items: center;
}
@media (min-width: 1024px) {
.k-split { grid-template-columns: 1fr 1fr; }
.k-split--60-40 { grid-template-columns: 3fr 2fr; }
.k-split--40-60 { grid-template-columns: 2fr 3fr; }
.k-split--reverse > *:first-child { order: 2; }
.k-split--reverse > *:last-child { order: 1; }
}
/* ── Accent Line ── */
.k-accent-line {
width: 48px;
height: 2px;
background: var(--k-accent);
margin-block: var(--k-s-6);
}
/* ── Screen Reader Only ── */
.k-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ==== components.css ==== */
/* ==========================================================================
Kreston Egypt — Components (v2 — Premium Editorial)
========================================================================== */
/* ── Buttons ── */
.k-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 2.25rem;
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
line-height: 1;
border: none;
cursor: pointer;
transition: all var(--k-duration-base) var(--k-ease);
white-space: nowrap;
min-height: 52px;
position: relative;
overflow: hidden;
}
.k-btn::after {
content: '';
position: absolute;
inset: 0;
background: currentColor;
opacity: 0;
transition: opacity var(--k-duration-fast) var(--k-ease);
}
.k-btn:hover::after { opacity: 0.08; }
.k-btn--primary {
background: var(--k-primary);
color: var(--k-white);
}
.k-btn--primary:hover { background: var(--k-primary-mid); color: var(--k-white); transform: translateY(-2px); box-shadow: var(--k-shadow-lg); }
.k-btn--outline {
background: transparent;
color: var(--k-brand-ink);
border: 1.5px solid var(--k-brand-ink);
}
.k-btn--outline:hover { background: var(--k-primary); color: var(--k-white); transform: translateY(-2px); }
.k-btn--white {
background: var(--k-white);
color: var(--k-primary);
}
.k-btn--white:hover { background: #F1EFEA; color: var(--k-primary); transform: translateY(-2px); box-shadow: var(--k-shadow-lg); }
.k-btn--ghost {
background: transparent;
color: var(--k-white);
border: 1.5px solid rgba(255,255,255,0.35);
}
.k-btn--ghost:hover { background: var(--k-white); color: var(--k-primary); border-color: var(--k-white); }
.k-btn--accent {
background: var(--k-accent);
color: var(--k-gray-900);
}
.k-btn--accent:hover { background: var(--k-accent-light); transform: translateY(-2px); box-shadow: var(--k-shadow-lg); }
.k-btn--sm { padding: 0.75rem 1.5rem; font-size: 0.6875rem; min-height: 40px; }
.k-btn--lg { padding: 1.25rem 3rem; font-size: var(--k-t-sm); min-height: 60px; }
.k-btn__arrow {
display: inline-flex;
transition: transform var(--k-duration-fast) var(--k-ease);
font-size: 1.1em;
}
.k-btn:hover .k-btn__arrow { transform: translateX(4px); }
[dir="rtl"] .k-btn:hover .k-btn__arrow { transform: translateX(-4px); }
/* ── Stat Numbers ── */
.k-stat {
display: flex;
flex-direction: column;
}
.k-stat__number {
font-family: var(--k-font-heading);
/* Not --k-t-7xl (up to 96px): the widest figure on the home page, "27,500+",
measures 346px at that size and the Kreston Global stat cell only gives it
215px of content box at 2000px wide -- it overflowed by 131px and was
visibly cut off, with "2001" clipped by 18px behind it. This scales with
the viewport so the longest figure fits at every width. */
font-size: clamp(1.75rem, 0.9rem + 2.2vw, 3.25rem);
font-weight: var(--k-w-black);
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--k-brand-ink);
}
.k-stat__number--accent { color: var(--k-accent); }
.k-stat__number--white { color: var(--k-white); }
.k-stat__number--light { color: var(--k-gray-200); }
.k-stat__suffix {
font-size: 0.5em;
font-weight: var(--k-w-bold);
vertical-align: super;
margin-left: 0.1em;
}
.k-stat__label {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-gray-400);
margin-top: var(--k-s-3);
}
.k-stat__label--white { color: rgba(255,255,255,0.5); }
.k-stat__label--accent { color: var(--k-accent); }
/* ── Tags ── */
.k-tag {
display: inline-flex;
align-items: center;
padding: 0.4rem 1rem;
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--k-accent-dim);
color: var(--k-accent);
text-decoration: none;
transition: all var(--k-duration-fast) var(--k-ease);
}
.k-tag:hover {
background: var(--k-accent);
color: var(--k-gray-900);
}
/* ── Breadcrumb ── */
.k-breadcrumb {
padding: var(--k-s-8) 0 var(--k-s-4);
font-size: var(--k-t-xs);
color: var(--k-gray-400);
}
.k-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--k-s-2);
}
.k-breadcrumb__item a {
color: var(--k-gray-400);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-breadcrumb__item a:hover { color: var(--k-white); }
.k-breadcrumb__item--active { color: var(--k-white); font-weight: var(--k-w-medium); }
.k-breadcrumb__sep { opacity: 0.4; margin: 0 var(--k-s-1); }
/* ── Page Hero (Light) ── */
.k-hero-page {
position: relative;
padding: calc(var(--k-header-h) + clamp(4rem, 3rem + 6vw, 8rem)) 0 clamp(4rem, 3rem + 6vw, 8rem);
background: var(--k-offwhite);
overflow: hidden;
}
.k-hero-page::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.04) 0%, transparent 50%);
}
.k-hero-page::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--k-gray-200), transparent);
}
.k-hero-page__content {
position: relative;
z-index: 2;
}
/* The cap is a measure guard, not a layout device. At 800px it was narrower
than a single authored line of this headline (the About page needs 1027px at
the top of the clamp), so each half re-wrapped and left "TRUST." and "ON."
stranded on lines of their own -- four lines where the markup asks for two.
1040px clears the longest headline on the site and still sits inside the
1280px container, so short titles are unaffected. */
.k-hero-page__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-6xl);
font-weight: var(--k-w-black);
color: var(--k-brand-ink);
line-height: 0.95;
letter-spacing: -0.035em;
text-transform: uppercase;
max-width: min(100%, 1040px);
/* Below ~1280px the container is narrower than a full headline line and it
has to wrap anyway. Balancing splits it evenly rather than dropping a
single word onto a line of its own. Ignored by browsers without support,
which just wrap as before. */
text-wrap: balance;
}
.k-hero-page__desc {
font-size: var(--k-t-lg);
color: var(--k-gray-400);
max-width: 560px;
margin-top: var(--k-s-6);
line-height: 1.7;
}
/* ── CTA Section ──
Kept on the same rhythm as .k-section; at the old 12rem ceiling this band
alone ran 192px top and bottom on a wide screen. */
.k-cta {
position: relative;
padding: clamp(4.5rem, 3.25rem + 4.5vw, 7rem) 0;
background: var(--k-primary);
text-align: center;
overflow: hidden;
}
.k-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(201,168,76,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(30,63,110,0.3) 0%, transparent 60%);
}
.k-cta::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--k-accent), transparent);
opacity: 0.3;
}
.k-cta__content { position: relative; z-index: 2; }
.k-cta__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-6xl);
font-weight: var(--k-w-black);
color: var(--k-white);
line-height: 0.95;
letter-spacing: -0.035em;
text-transform: uppercase;
max-width: 700px;
margin-inline: auto;
margin-bottom: var(--k-s-8);
}
.k-cta__desc {
font-size: var(--k-t-lg);
color: rgba(255,255,255,0.65);
max-width: 540px;
margin-inline: auto;
margin-bottom: var(--k-s-10);
line-height: 1.7;
}
.k-cta__actions {
display: flex;
flex-wrap: wrap;
gap: var(--k-s-4);
justify-content: center;
}
/* ── Article Content ── */
.k-article {
max-width: 740px;
margin-inline: auto;
}
.k-article h2 { margin-top: var(--k-s-12); margin-bottom: var(--k-s-6); }
.k-article h3 { margin-top: var(--k-s-10); margin-bottom: var(--k-s-4); }
.k-article p { margin-bottom: var(--k-s-6); font-size: var(--k-t-lg); line-height: 1.8; }
.k-article ul, .k-article ol { margin-bottom: var(--k-s-6); padding-left: var(--k-s-6); }
.k-article ul { list-style: disc; }
.k-article ol { list-style: decimal; }
.k-article li { margin-bottom: var(--k-s-2); line-height: 1.7; }
.k-article blockquote {
border-left: 3px solid var(--k-accent);
padding: var(--k-s-6) var(--k-s-8);
margin: var(--k-s-10) 0;
background: var(--k-offwhite);
font-style: italic;
font-size: var(--k-t-xl);
}
/* ── Form Elements ── */
.k-field { margin-bottom: var(--k-s-6); }
.k-field__label {
display: block;
font-size: var(--k-t-sm);
font-weight: var(--k-w-medium);
color: var(--k-gray-700);
margin-bottom: var(--k-s-2);
}
.k-field__input,
.k-field__textarea,
.k-field__select {
width: 100%;
padding: var(--k-s-4) var(--k-s-5);
border: 1px solid var(--k-gray-200);
background: var(--k-surface-2);
font-size: var(--k-t-base);
color: var(--k-gray-800);
transition: border-color var(--k-duration-fast) var(--k-ease);
min-height: 52px;
}
.k-field__input:focus,
.k-field__textarea:focus,
.k-field__select:focus {
outline: none;
border-color: var(--k-primary);
box-shadow: 0 0 0 3px rgba(11,29,58,0.08);
}
.k-field__textarea { min-height: 160px; resize: vertical; }
.k-field__select {
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 44px;
}
[dir="rtl"] .k-field__select { background-position: left 14px center; padding-right: var(--k-s-5); padding-left: 44px; }
.k-form-row { display: grid; grid-template-columns: 1fr; gap: var(--k-s-6); }
@media (min-width: 768px) { .k-form-row--2 { grid-template-columns: repeat(2, 1fr); } }
/* ── Pagination ── */
.k-pagination { margin-top: var(--k-s-12); }
.k-pagination__list { display: flex; align-items: center; justify-content: center; gap: var(--k-s-2); list-style: none; }
.k-pagination__item a,
.k-pagination__item span {
display: flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 var(--k-s-3);
font-size: var(--k-t-sm); font-weight: var(--k-w-medium);
color: var(--k-gray-500); text-decoration: none;
border: 1px solid var(--k-gray-200);
transition: all var(--k-duration-fast) var(--k-ease);
}
.k-pagination__item a:hover { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-white); }
.k-pagination__item .current { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-white); }
/* ==== header.css ==== */
/* ==========================================================================
Kreston Egypt — Header (v2 — Minimal Premium)
========================================================================== */
.k-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: var(--k-z-header);
height: var(--k-header-h);
display: flex;
flex-direction: column;
align-items: stretch;
transition: all var(--k-duration-base) var(--k-ease);
}
/* The at-rest state. Named --transparent for the era when it was; it now
paints the same surface as the scrolled state, so the header reads as a
solid bar from the top rather than floating over the hero. The name is kept
because header.php, main.js and any custom CSS all target it.
--k-surface-2 is white in light mode and the dark panel colour in dark. */
.k-header--transparent {
background: var(--k-surface-2);
}
.k-header--solid {
background: rgba(255,255,255,0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(0,0,0,0.06);
height: var(--k-header-h-scroll);
}
.k-header__inner {
display: flex;
flex: 1;
min-height: 0;
align-self: stretch;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--k-container);
margin-inline: auto;
padding-inline: var(--k-gutter);
}
/* ── Utility bar ───────────────────────────────────────────────────────────
The secondary pages -- Career, FAQ, Our Portfolio -- sit here rather than in
the main nav, which frees the width the main bar needs for the two new
dropdowns. It lives inside the fixed header rather than above it so that
--k-header-h covers both bars and every offset written against it stays
right. On scroll it collapses to nothing and the header shrinks to
--k-header-h-scroll, so the bar reads as chrome you pass rather than
something that follows you down the page. */
.k-topbar {
height: var(--k-topbar-h);
flex-shrink: 0;
overflow: hidden;
background: var(--k-primary);
color: rgba(255,255,255,0.72);
font-size: 0.75rem;
transition: height var(--k-duration-base) var(--k-ease);
}
.k-header--solid .k-topbar { height: 0; }
/* Both groups sit together at the trailing edge: the secondary links, then the
contact details. space-between pushed them to opposite ends of the bar, which
stranded the links against the far edge instead of keeping them next to the
contact block they belong beside. */
.k-topbar__inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--k-s-8);
height: var(--k-topbar-h);
width: 100%;
max-width: var(--k-container);
margin-inline: auto;
padding-inline: var(--k-gutter);
}
.k-topbar__contact,
.k-topbar__links {
display: flex;
align-items: center;
gap: var(--k-s-5);
min-width: 0;
}
.k-topbar__item,
.k-topbar__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.k-topbar__item svg,
.k-topbar__link svg { width: 13px; height: 13px; opacity: 0.65; flex-shrink: 0; }
.k-topbar__link { transition: color var(--k-duration-fast) var(--k-ease); }
.k-topbar__link:hover,
.k-topbar__link:focus-visible { color: var(--k-white); }
.k-topbar__link--current { color: var(--k-white); }
/* Separators between the utility links, not before the first. */
.k-topbar__links .k-topbar__link + .k-topbar__link { position: relative; }
.k-topbar__links .k-topbar__link + .k-topbar__link::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--k-s-5) / -2);
top: 50%;
height: 11px;
width: 1px;
transform: translateY(-50%);
background: rgba(255,255,255,0.22);
}
/* The bar is desktop chrome; below 768px --k-topbar-h is 0 and these links
are repeated in the mobile menu instead. */
@media (max-width: 767px) {
.k-topbar { display: none; }
}
/* The email is the first thing to go when the bar gets tight. */
@media (max-width: 1100px) {
.k-topbar__item--email { display: none; }
}
/* ── Logo ── */
.k-logo {
display: flex;
align-items: center;
gap: var(--k-s-3);
text-decoration: none;
flex-shrink: 0;
z-index: 10;
}
.k-logo img,
.k-logo__img {
height: 46px;
width: auto;
max-width: none;
display: block;
}
@media (min-width: 1024px) {
.k-logo img,
.k-logo__img { height: 56px; }
}
.k-header--solid .k-logo img,
.k-header--solid .k-logo__img { height: 44px; }
/* ── Desktop Nav ──
Ink comes from the grey ramp, not from --k-white: every hero in this theme
paints --k-offwhite, so the transparent header sits on a light ground. The
ramp inverts in dark.css, so these rules stay legible there too. */
.k-nav { display: none; }
@media (min-width: 1024px) {
.k-nav {
display: flex;
align-items: stretch;
align-self: stretch;
gap: 0;
/* Sits closer to the tools than the logo; mirrors in RTL. */
margin-inline-start: clamp(1rem, 5vw, 6rem);
}
/* The panel is anchored here so it opens under the item that owns it. It
used to have no positioned ancestor, so every panel resolved its
left: 50% against the fixed header and they all opened at the same
point -- up to 230px away from the item the reader had actually
pointed at. .k-mega's own centring maths is unchanged. */
.k-nav__item {
position: relative;
display: flex;
align-items: center;
}
}
.k-nav__link {
display: flex;
align-items: center;
gap: 0.35rem;
/* Widened once the CTA left the row -- 0.6rem was set when the button was
competing for the same width. */
padding: 0.625rem 0.85rem;
font-size: var(--k-t-sm);
font-weight: var(--k-w-medium);
color: var(--k-nav-ink);
text-decoration: none;
white-space: nowrap;
transition: color var(--k-duration-fast) var(--k-ease);
min-height: 44px;
}
.k-header--solid .k-nav__link { color: var(--k-nav-ink); }
.k-nav__link:hover,
.k-header--solid .k-nav__link:hover { color: var(--k-brand-ink); }
.k-nav__icon {
width: 15px;
height: 15px;
flex-shrink: 0;
opacity: 0.55;
transition: opacity var(--k-duration-fast) var(--k-ease);
}
.k-nav__link:hover .k-nav__icon { opacity: 1; }
.k-nav__arrow {
width: 8px; height: 8px;
transition: transform var(--k-duration-fast) var(--k-ease);
opacity: 0.5;
}
.k-nav__item:hover .k-nav__arrow,
.k-nav__item:focus-within .k-nav__arrow { transform: rotate(180deg); opacity: 1; }
/* ── Mega Menu ── */
.k-mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
min-width: 720px;
/* Anchored to its item now, so a wide panel under an item near the edge
must still be told to stay inside the viewport. */
max-width: calc(100vw - var(--k-s-8));
background: var(--k-surface-2);
box-shadow: var(--k-shadow-xl);
border-top: 3px solid var(--k-primary);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all var(--k-duration-base) var(--k-ease);
padding: var(--k-s-10);
}
.k-nav__item:hover .k-mega,
.k-nav__item:focus-within .k-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition-delay: 0ms;
}
/* Closing waits a moment; opening does not. */
.k-mega { transition-delay: 180ms; }
.k-mega__grid {
display: grid;
gap: var(--k-s-8);
}
/* Services: the list beside a featured article. */
.k-mega__grid--split { grid-template-columns: 1.4fr 1fr; }
/* Sectors: one column, so nine entries read as a single list rather than a
grid the eye has to scan in two directions. */
.k-mega__grid--single { grid-template-columns: 1fr; }
.k-mega__heading {
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-accent);
margin-bottom: var(--k-s-5);
padding-bottom: var(--k-s-3);
border-bottom: 1px solid var(--k-gray-200);
}
/* An icon leads each entry, the way the top-level items are marked, so eight
lines of similar-length text can be told apart at a glance. Padding is
logical so the Arabic panel indents from the right. */
.k-mega__link {
display: flex;
align-items: center;
gap: var(--k-s-3);
padding: 0.6rem 0;
text-decoration: none;
border-bottom: 1px solid var(--k-gray-100);
transition: all var(--k-duration-fast) var(--k-ease);
}
.k-mega__link:last-child { border-bottom: none; }
.k-mega__link-icon {
width: 17px;
height: 17px;
flex-shrink: 0;
color: var(--k-gray-400);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-mega__link:hover .k-mega__link-icon { color: var(--k-accent); }
.k-mega__link-title {
font-size: var(--k-t-sm);
font-weight: var(--k-w-semibold);
color: var(--k-gray-800);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-mega__link:hover .k-mega__link-title { color: var(--k-brand-ink); }
/* ── The entry for the page you are on ────────────────────────────────────
The section rail marks the current service; the dropdown that got you
there did not, so opening it from that page told you nothing about where
you were. Marked the same way the rail marks it -- a gold rule on the
leading edge and the title in brand ink -- so the two agree. The tinted
band and inline padding are what carry it when the panel is scanned
quickly; the rule alone was too easy to miss among eight rows. */
.k-mega__link--current {
background: color-mix(in srgb, var(--k-accent) 9%, transparent);
box-shadow: inset 2px 0 0 var(--k-accent);
padding-inline: var(--k-s-4);
/* Pull the band out to the panel's gutter so the text stays on the same
line it sits on in every other row. */
margin-inline: calc(var(--k-s-4) * -1);
}
[dir="rtl"] .k-mega__link--current { box-shadow: inset -2px 0 0 var(--k-accent); }
.k-mega__link--current .k-mega__link-icon { color: var(--k-accent); }
.k-mega__link--current .k-mega__link-title {
color: var(--k-brand-ink);
font-weight: var(--k-w-bold);
}
/* color-mix is not universal yet; the older engines still get the rule and
the ink, just without the wash. */
@supports not (background: color-mix(in srgb, red 9%, transparent)) {
.k-mega__link--current { background: var(--k-gray-100); }
}
.k-mega__link-desc {
font-size: var(--k-t-xs);
color: var(--k-gray-400);
line-height: 1.4;
margin-top: 0.15rem;
}
.k-mega__featured {
border-left: 1px solid var(--k-gray-200);
padding-left: var(--k-s-8);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.k-mega__cta {
display: block;
padding: var(--k-s-5);
background: var(--k-primary);
color: var(--k-white);
text-decoration: none;
margin-top: var(--k-s-6);
text-align: center;
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background var(--k-duration-fast) var(--k-ease);
}
.k-mega__cta:hover { background: var(--k-primary-mid); color: var(--k-white); }
/* The sectors panel is a single list; it needs less width than the split one,
and its rows are tighter so nine of them do not overrun the viewport. */
.k-mega--industry { min-width: 460px; }
/* The About and Set Up a Business panels are plain link lists, so they only
need to be as wide as their longest label rather than the sector grid. */
.k-mega--about,
.k-mega--setup { min-width: 300px; }
.k-mega--industry .k-mega__link,
.k-mega--about .k-mega__link,
.k-mega--setup .k-mega__link { padding-block: 0.45rem; }
/* ── Header Right ── */
.k-header__right {
display: flex;
align-items: center;
gap: var(--k-s-2);
z-index: 10;
}
/* The header CTA is gone; the mobile menu keeps its own. Kept as a no-op so
any stray markup or custom CSS referring to it cannot reintroduce a button
into the row. */
.k-header__cta { display: none; }
/* Between the nav appearing at 1024px and about 1280px the row is genuinely
over-subscribed: logo, seven items and three tool boxes need roughly 120px
more than the container gives. The icons are decoration and the labels are
the content, so the icons go first -- that alone returns about 145px -- and
the logo steps back down to its smaller size. */
@media (min-width: 1024px) and (max-width: 1279px) {
.k-nav__icon { display: none; }
.k-nav__link { padding-inline: 0.55rem; gap: 0.25rem; }
.k-logo img,
.k-logo__img { height: 46px; }
}
/* ── Header tool buttons (search · display mode · language) ───────────────
One shared skin so the three controls read as a set. The header sits
transparent over the hero and turns solid on scroll, so every colour has a
`--solid` counterpart. */
.k-tool {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--k-gray-200);
border-radius: 6px;
background: var(--k-surface-2);
color: var(--k-gray-500);
text-decoration: none;
cursor: pointer;
transition: background var(--k-duration-fast) var(--k-ease),
color var(--k-duration-fast) var(--k-ease),
border-color var(--k-duration-fast) var(--k-ease);
}
.k-tool svg {
width: 17px;
height: 17px;
display: block;
}
.k-tool:hover,
.k-tool:focus-visible {
background: var(--k-gray-100);
color: var(--k-brand-ink);
border-color: var(--k-accent);
}
.k-header--solid .k-tool { color: var(--k-gray-500); }
.k-header--solid .k-tool:hover,
.k-header--solid .k-tool:focus-visible {
background: var(--k-gray-100);
color: var(--k-brand-ink);
}
/* ── Display mode (light · dark · system) ── */
.k-mode {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--k-gray-200);
border-radius: 6px;
background: var(--k-surface-2);
transition: border-color var(--k-duration-fast) var(--k-ease);
}
.k-mode:hover,
.k-mode:focus-within { border-color: var(--k-accent); }
.k-mode__btn {
width: 28px;
height: 28px;
border: 0;
border-radius: 4px;
background: transparent;
}
.k-mode__btn svg { width: 15px; height: 15px; }
/* The active mode is the one the user picked, not the one being displayed —
`system` stays lit even while it resolves to dark. */
.k-mode__btn[aria-pressed="true"] {
background: var(--k-white);
color: var(--k-brand-ink);
box-shadow: var(--k-shadow-sm);
}
html.dark .k-mode__btn[aria-pressed="true"] {
background: var(--k-accent);
color: var(--k-gray-900);
}
/* ── Language ── */
.k-lang {
display: flex;
align-items: center;
}
.k-lang__link {
width: auto;
gap: 0.35rem;
padding: 0.45em 0.7em;
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.02em;
white-space: nowrap;
}
.k-lang__label { line-height: 1; }
/* ── Mobile Toggle ── */
.k-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
color: var(--k-gray-800);
z-index: 10;
}
@media (min-width: 1024px) { .k-menu-btn { display: none; } }
.k-menu-btn__lines {
width: 22px; height: 14px;
position: relative;
}
.k-menu-btn__line {
display: block;
width: 100%; height: 2px;
background: currentColor;
position: absolute;
left: 0;
transition: all var(--k-duration-fast) var(--k-ease);
}
.k-menu-btn__line:nth-child(1) { top: 0; }
.k-menu-btn__line:nth-child(2) { top: 6px; }
.k-menu-btn__line:nth-child(3) { top: 12px; }
.k-menu-btn--active .k-menu-btn__line:nth-child(1) { top: 6px; transform: rotate(45deg); }
.k-menu-btn--active .k-menu-btn__line:nth-child(2) { opacity: 0; }
.k-menu-btn--active .k-menu-btn__line:nth-child(3) { top: 6px; transform: rotate(-45deg); }
/* ── Mobile Menu ── */
.k-mobile {
position: fixed;
top: 0; right: -100%;
width: 100%; max-width: 420px;
height: 100vh; height: 100dvh;
background: var(--k-surface-2);
z-index: var(--k-z-overlay);
overflow-y: auto;
transition: right var(--k-duration-slow) var(--k-ease-out);
/* The drawer covers the header, so it does not need to clear it -- that
offset left a screenful of blank above "Home". Its own head bar sits at
the top instead. */
padding: var(--k-s-4) var(--k-s-6) var(--k-s-8);
overscroll-behavior: contain;
}
[dir="rtl"] .k-mobile { right: auto; left: -100%; }
.k-mobile--open { right: 0; }
[dir="rtl"] .k-mobile--open { left: 0; }
.k-mobile__overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: calc(var(--k-z-overlay) - 1);
opacity: 0; visibility: hidden;
transition: all var(--k-duration-base) var(--k-ease);
}
.k-mobile__overlay--visible { opacity: 1; visibility: visible; }
/* ── Drawer head ──
A title and a dismiss, sticky so the way out stays reachable after the
reader has scrolled a long section open. */
.k-mobile__head {
position: sticky;
top: calc(var(--k-s-4) * -1);
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--k-s-4);
margin: calc(var(--k-s-4) * -1) calc(var(--k-s-6) * -1) var(--k-s-2);
padding: var(--k-s-3) var(--k-s-6);
background: var(--k-surface-2);
border-bottom: 1px solid var(--k-gray-100);
}
.k-mobile__head-title {
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k-gray-400);
}
[dir="rtl"] .k-mobile__head-title { letter-spacing: 0; text-transform: none; }
.k-mobile__close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-inline-end: calc(var(--k-s-2) * -1);
padding: 0;
background: none;
border: 0;
border-radius: 50%;
color: var(--k-gray-500);
cursor: pointer;
transition: background var(--k-duration-fast) var(--k-ease),
color var(--k-duration-fast) var(--k-ease);
}
.k-mobile__close svg { width: 20px; height: 20px; }
.k-mobile__close:hover,
.k-mobile__close:focus-visible {
background: var(--k-gray-100);
color: var(--k-brand-ink);
}
/* ── Sections ──
The parent link and its disclosure share a row; the sub-list drops below
the pair, which is why the group is a grid rather than a flex row. */
.k-mobile__group--has-sub {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.k-mobile__group--has-sub > .k-mobile__link { border-bottom: 0; }
.k-mobile__group--has-sub { border-bottom: 1px solid var(--k-gray-100); }
.k-mobile__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
color: var(--k-gray-400);
cursor: pointer;
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-mobile__toggle svg {
width: 12px;
height: 12px;
transition: transform var(--k-duration-fast) var(--k-ease-out);
}
.k-mobile__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.k-mobile__toggle:hover { color: var(--k-brand-ink); }
.k-mobile__sub {
grid-column: 1 / -1;
padding: 0 0 var(--k-s-3) calc(19px + var(--k-s-3));
}
[dir="rtl"] .k-mobile__sub { padding-left: 0; padding-right: calc(19px + var(--k-s-3)); }
.k-mobile__sub-heading {
margin-bottom: var(--k-s-1);
font-size: 0.6875rem;
font-weight: var(--k-w-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k-accent);
}
[dir="rtl"] .k-mobile__sub-heading { letter-spacing: 0; text-transform: none; }
.k-mobile__sub-link {
display: block;
padding: 0.5rem 0;
font-size: var(--k-t-sm);
line-height: 1.4;
color: var(--k-gray-600);
text-decoration: none;
border-inline-start: 2px solid transparent;
padding-inline-start: var(--k-s-3);
margin-inline-start: calc(var(--k-s-3) * -1);
transition: color var(--k-duration-fast) var(--k-ease),
border-color var(--k-duration-fast) var(--k-ease);
}
.k-mobile__sub-link:hover,
.k-mobile__sub-link:focus-visible { color: var(--k-brand-ink); }
.k-mobile__sub-link--current {
color: var(--k-brand-ink);
font-weight: var(--k-w-semibold);
border-inline-start-color: var(--k-primary-vivid);
}
@media (prefers-reduced-motion: reduce) {
.k-mobile__toggle svg { transition: none; }
}
.k-mobile__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--k-s-4) 0;
font-size: var(--k-t-xl);
font-weight: var(--k-w-semibold);
color: var(--k-gray-800);
text-decoration: none;
border-bottom: 1px solid var(--k-gray-100);
min-height: 52px;
}
.k-mobile__link:hover { color: var(--k-brand-ink); }
.k-mobile__link-inner {
display: flex;
align-items: center;
gap: var(--k-s-3);
}
.k-mobile__icon {
width: 19px;
height: 19px;
flex-shrink: 0;
color: var(--k-accent);
}
/* The utility-bar links, restated for mobile. Set smaller and quieter than
the primary items so the menu still reads as one main list plus an aside. */
.k-mobile__secondary {
display: flex;
flex-wrap: wrap;
gap: var(--k-s-3) var(--k-s-5);
margin-top: var(--k-s-5);
padding-top: var(--k-s-5);
border-top: 1px solid var(--k-gray-200);
}
/* These sat at 22px tall, just under the 24px minimum WCAG 2.5.8 asks of a
tap target. The padding grows the touch area without moving the text: the
negative margin gives the extra height back to the layout, so the drawer
looks exactly as it did. */
.k-mobile__secondary-link {
font-size: var(--k-t-sm);
color: var(--k-gray-500);
text-decoration: none;
display: inline-block;
padding-block: var(--k-s-2);
margin-block: calc(var(--k-s-2) * -1);
}
.k-mobile__secondary-link:hover,
.k-mobile__secondary-link:focus-visible,
.k-mobile__secondary-link--current { color: var(--k-brand-ink); }
.k-mobile__cta {
margin-top: var(--k-s-8);
}
/* ── Search overlay ───────────────────────────────────────────────────────
Progressive enhancement: the header trigger is a real link to the results
page, and this panel is a real GET form. With JS off both still work; JS
only intercepts the link to open the panel in place. */
.k-search {
position: fixed;
inset: 0;
z-index: calc(var(--k-z-overlay) + 10);
display: flex;
align-items: flex-start;
justify-content: center;
}
.k-search[hidden] { display: none; }
.k-search__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: k-search-fade var(--k-duration-fast) var(--k-ease);
}
.k-search__panel {
position: relative;
display: flex;
flex-direction: column;
width: min(720px, calc(100% - 2 * var(--k-gutter)));
margin-top: clamp(2rem, 8vh, 6rem);
/* Live results can run to a dozen rows — cap the panel to the viewport and
let the result list scroll inside it rather than running off the page. */
max-height: calc(100vh - clamp(4rem, 16vh, 12rem));
background: var(--k-surface-2);
border-top: 3px solid var(--k-accent);
box-shadow: var(--k-shadow-xl);
padding: var(--k-s-6);
animation: k-search-rise var(--k-duration-base) var(--k-ease-out);
}
@keyframes k-search-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-search-rise {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.k-search__backdrop,
.k-search__panel { animation: none; }
}
.k-search__form {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--k-s-3);
border-bottom: 2px solid var(--k-gray-200);
padding-bottom: var(--k-s-3);
}
.k-search__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--k-gray-400);
}
.k-search__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font-family: var(--k-font-body);
font-size: var(--k-t-xl);
color: var(--k-gray-900);
padding: var(--k-s-2) 0;
}
.k-search__input:focus { outline: none; }
.k-search__input::placeholder { color: var(--k-gray-300); }
.k-search__submit {
flex-shrink: 0;
border: 0;
cursor: pointer;
background: var(--k-primary);
color: var(--k-white);
font-family: var(--k-font-body);
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.7rem 1.25rem;
transition: background var(--k-duration-fast) var(--k-ease);
}
.k-search__submit:hover { background: var(--k-primary-mid); }
.k-search__close {
position: absolute;
top: var(--k-s-3);
right: var(--k-s-3);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--k-gray-400);
cursor: pointer;
transition: color var(--k-duration-fast) var(--k-ease);
}
[dir="rtl"] .k-search__close { right: auto; left: var(--k-s-3); }
.k-search__close:hover { color: var(--k-gray-900); }
.k-search__close svg { width: 18px; height: 18px; }
.k-search__hint {
flex-shrink: 0;
margin-top: var(--k-s-4);
font-size: var(--k-t-xs);
color: var(--k-gray-400);
}
/* The result markup itself comes from the existing AJAX handler and is styled
in home.css; this only gives it somewhere bounded to live. */
.k-search__results {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
margin-top: var(--k-s-4);
}
.k-search__results:empty { margin-top: 0; }
.k-search__results .k-search-results__link {
display: flex;
align-items: center;
gap: var(--k-s-3);
padding: var(--k-s-3);
text-decoration: none;
border-bottom: 1px solid var(--k-gray-100);
}
.k-search__results .k-search-results__thumb {
width: 44px;
height: 44px;
object-fit: cover;
flex-shrink: 0;
}
.k-search__results .k-search-results__type {
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k-accent);
}
.k-search__results .k-search-results__title {
font-size: var(--k-t-sm);
font-weight: var(--k-w-semibold);
color: var(--k-gray-800);
}
.k-search__results .k-search-results__excerpt {
font-size: var(--k-t-xs);
color: var(--k-gray-400);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.k-search__results .k-search-results__empty {
padding: var(--k-s-4) var(--k-s-3);
font-size: var(--k-t-sm);
color: var(--k-gray-400);
}
/* ── Mobile: the tools move into the drawer ── */
.k-header__tools--desktop { display: none; }
@media (min-width: 1024px) {
.k-header__tools--desktop { display: flex; align-items: center; gap: var(--k-s-2); }
}
.k-mobile__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--k-s-3);
margin-top: var(--k-s-6);
padding-top: var(--k-s-6);
border-top: 1px solid var(--k-gray-100);
}
/* Inside the drawer there is no transparent-over-hero state to serve. */
.k-mobile__tools .k-tool { color: var(--k-gray-500); }
.k-mobile__tools .k-tool:hover { background: var(--k-gray-100); color: var(--k-brand-ink); }
.k-mobile__tools .k-mode { background: var(--k-gray-100); }
.k-mobile__tools .k-mode__btn[aria-pressed="true"] {
background: var(--k-white);
color: var(--k-brand-ink);
box-shadow: var(--k-shadow-sm);
}
html.dark .k-mobile__tools .k-mode__btn[aria-pressed="true"] {
background: var(--k-accent);
color: var(--k-gray-900);
}
.k-mobile__tools .k-lang__label { display: inline; }
@media (min-width: 1024px) { .k-mobile__tools { display: none; } }
/* ── Arabic typography ──
Same pairing as chemexa-ghana: IBM Plex Sans Arabic in front of Inter. */
[lang="ar"] body,
body.rtl,
[dir="rtl"] body,
html[lang^="ar"] body {
font-family: var(--k-font-ar);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6 {
font-family: var(--k-font-ar);
letter-spacing: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
HEADER CONTROLS — collapsed at rest, expand on hover/focus
Mirrors the chemexa-ghana behaviour: the mode toggle shows only the option
currently in force, and the language control shows only its globe, until
either is engaged. Keeps the header quiet and leaves room for the nav.
The collapsed state keys off html[data-theme], which the boot script in
sets before first paint — keying off aria-pressed instead would
collapse all three buttons until main.js ran, and the control would visibly
pop in. aria-pressed stays as the accessible state.
══════════════════════════════════════════════════════════════════════════ */
.k-mode { transition: gap 400ms ease-out, background 400ms ease-out, padding 400ms ease-out; }
.k-mode__btn {
overflow: hidden;
flex-shrink: 0;
transition: width 400ms ease-out, opacity 400ms ease-out,
background var(--k-duration-fast) var(--k-ease),
color var(--k-duration-fast) var(--k-ease);
}
/* Touch has no hover to expand with, so it keeps all three visible. */
@media (hover: hover) {
.k-mode:not(.k-mode--mobile) { gap: 0; }
.k-mode:not(.k-mode--mobile):hover,
.k-mode:not(.k-mode--mobile):focus-within { gap: 2px; }
/* Every option is closed; the one matching the stored mode reopens below. */
.k-mode:not(.k-mode--mobile) .k-mode__btn {
width: 0;
min-width: 0;
opacity: 0;
pointer-events: none;
}
html[data-theme="light"] .k-mode:not(.k-mode--mobile) .k-mode__btn[data-mode="light"],
html[data-theme="dark"] .k-mode:not(.k-mode--mobile) .k-mode__btn[data-mode="dark"],
html[data-theme="system"] .k-mode:not(.k-mode--mobile) .k-mode__btn[data-mode="system"] {
width: 28px;
opacity: 1;
pointer-events: auto;
}
.k-mode:not(.k-mode--mobile):hover .k-mode__btn,
.k-mode:not(.k-mode--mobile):focus-within .k-mode__btn {
width: 28px;
opacity: 1;
pointer-events: auto;
}
/* At rest the live option reads as a plain glyph; the chip appears only
once the control is engaged and there is something to choose between. */
.k-mode:not(.k-mode--mobile) .k-mode__btn[aria-pressed="true"] {
background: transparent;
box-shadow: none;
color: var(--k-gray-600);
}
.k-mode:not(.k-mode--mobile):hover .k-mode__btn[aria-pressed="true"],
.k-mode:not(.k-mode--mobile):focus-within .k-mode__btn[aria-pressed="true"] {
background: var(--k-white);
color: var(--k-brand-ink);
box-shadow: var(--k-shadow-sm);
}
html.dark .k-mode:not(.k-mode--mobile) .k-mode__btn[aria-pressed="true"] {
background: transparent;
box-shadow: none;
color: var(--k-gray-500);
}
html.dark .k-mode:not(.k-mode--mobile):hover .k-mode__btn[aria-pressed="true"],
html.dark .k-mode:not(.k-mode--mobile):focus-within .k-mode__btn[aria-pressed="true"] {
background: var(--k-accent);
color: var(--k-gray-900);
}
}
/* ── Language: globe at rest, label eases open ──
max-width animates where width:auto cannot. The label runs ~40px ("العربية")
to ~50px ("English"), so a 5rem target keeps margin for a fallback font while
leaving the visible sweep long enough to read as motion rather than a snap. */
.k-lang__link { transition: gap 500ms ease-out, background var(--k-duration-fast) var(--k-ease), color var(--k-duration-fast) var(--k-ease); }
.k-lang__label {
display: inline-block;
white-space: nowrap;
overflow: hidden;
transition: max-width 500ms ease-out, opacity 400ms ease-out;
}
@media (hover: hover) {
.k-mobile__tools .k-lang__link { gap: 0.35rem; }
.k-header__tools--desktop .k-lang__link { gap: 0; }
.k-header__tools--desktop .k-lang__link:hover,
.k-header__tools--desktop .k-lang__link:focus-visible { gap: 0.35rem; }
.k-header__tools--desktop .k-lang__label {
max-width: 0;
opacity: 0;
}
.k-header__tools--desktop .k-lang__link:hover .k-lang__label,
.k-header__tools--desktop .k-lang__link:focus-visible .k-lang__label {
max-width: 5rem;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.k-mode,
.k-mode__btn,
.k-lang__link,
.k-lang__label { transition: none; }
}
/* ── Current page ─────────────────────────────────────────────────────────
A gold rule under the label, matching the chemexa-ghana treatment. Drawn
on a pseudo-element so it tracks the text, not the link's padding box. */
.k-nav__link--current {
color: var(--k-brand-ink);
font-weight: var(--k-w-semibold);
}
.k-nav__link--current .k-nav__icon { opacity: 1; }
.k-nav__link--current::after {
content: '';
position: absolute;
left: 0.6rem;
right: 0.6rem;
bottom: 0.35rem;
height: 2px;
background: var(--k-accent);
}
.k-nav__link { position: relative; }
/* Drawer rows get a leading gold rule instead — there is no baseline to
underline against in a stacked list. */
.k-mobile__link--current {
color: var(--k-brand-ink);
box-shadow: inset 3px 0 0 var(--k-accent);
padding-inline-start: var(--k-s-4);
}
.k-mobile__link--current .k-mobile__icon { color: var(--k-brand-ink); }
/* ==== footer.css ==== */
/* ==========================================================================
Kreston Egypt — Footer (v2 — Premium)
========================================================================== */
.k-footer {
background: var(--k-gray-900);
color: var(--k-gray-400);
padding-top: clamp(4rem, 3rem + 5vw, 7rem);
/* The footer is dark in both themes, so the light-surface grey ramp does not
apply to it: --k-gray-500 lands at 3.5:1 against this ground, under the
4.5:1 that small print needs. These two are measured against it. */
--k-footer-muted: rgba(255, 255, 255, 0.55);
--k-footer-faint: rgba(255, 255, 255, 0.38);
}
.k-footer__main {
padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.k-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--k-s-10);
}
@media (min-width: 768px) {
.k-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* ── Brand ── */
.k-footer__brand { max-width: 340px; }
.k-footer__logo {
display: block;
height: 32px;
width: auto;
margin-bottom: var(--k-s-6);
filter: brightness(0) invert(1);
}
.k-footer__desc {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
line-height: 1.7;
margin-bottom: var(--k-s-6);
}
.k-footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--k-s-3);
/* Sits under the description rather than floating at the column's foot. */
margin-top: var(--k-s-6);
}
.k-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
/* Same rounded box as the header controls, so the two sets read as one
family rather than two different button styles. */
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all var(--k-duration-fast) var(--k-ease);
}
.k-footer__social-link:hover {
background: var(--k-accent);
border-color: var(--k-accent);
color: var(--k-gray-900);
}
/* ── Column ── */
.k-footer__col-title {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-white);
margin-bottom: var(--k-s-6);
}
.k-footer__links { list-style: none; padding: 0; margin: 0; }
.k-footer__link {
margin-bottom: var(--k-s-3);
}
.k-footer__link a {
display: inline-flex;
align-items: center;
gap: var(--k-s-2);
font-size: var(--k-t-sm);
color: var(--k-gray-400);
text-decoration: none;
transition: color var(--k-duration-fast) var(--k-ease);
min-height: 36px;
}
.k-footer__link a:hover { color: var(--k-white); }
/* ── Contact ── */
.k-footer__contact-item {
display: flex;
gap: var(--k-s-4);
margin-bottom: var(--k-s-5);
align-items: flex-start;
}
.k-footer__contact-icon {
width: 36px; height: 36px;
background: rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--k-accent);
}
.k-footer__contact-text {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
line-height: 1.6;
}
.k-footer__contact-text a {
color: var(--k-gray-400);
text-decoration: none;
}
.k-footer__contact-text a:hover { color: var(--k-white); }
/* ── Global Badge ── */
.k-footer__global {
padding: var(--k-s-5);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
margin-top: var(--k-s-6);
}
.k-footer__global-label {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--k-footer-muted);
margin-bottom: var(--k-s-2);
}
.k-footer__global-name {
font-size: var(--k-t-sm);
font-weight: var(--k-w-bold);
color: var(--k-white);
}
.k-footer__global-stat {
font-size: var(--k-t-xs);
color: var(--k-footer-muted);
margin-top: 0.25rem;
}
/* ── Bottom ── */
.k-footer__bottom {
padding: var(--k-s-5) 0 var(--k-s-6);
}
.k-footer__bottom-inner {
display: flex;
flex-direction: column;
gap: var(--k-s-4);
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.k-footer__bottom-inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
[dir="rtl"] .k-footer__bottom-inner { text-align: right; }
}
/* Copyright and agency credit stack as one block, so space-between on the row
puts them together at the start and leaves the legal links at the end. */
.k-footer__bottom-start {
display: flex;
flex-direction: column;
align-items: center;
}
/* flex-start is the *cross*-start of a column, which follows `direction` on its
own: the left edge in LTR, the right edge in RTL. An [dir="rtl"] override to
flex-end therefore does the opposite of mirroring -- it stranded the credit
on the left while the copyright above it stayed right. One rule serves both. */
@media (min-width: 768px) {
.k-footer__bottom-start { align-items: flex-start; }
}
.k-footer__copyright {
font-size: var(--k-t-xs);
color: var(--k-footer-muted);
line-height: 1.6;
}
/* Agency credit, set a step below the copyright so it reads as a signature
rather than a third piece of legal small print. */
.k-footer__credit {
margin-top: var(--k-s-2);
font-size: var(--k-t-xs);
/* --footer-faint is for the watermark; at this size the line still has to
clear 4.5:1, so it uses the same muted tone as the rest of the small print. */
color: var(--k-footer-muted);
}
.k-footer__credit a,
.k-footer__copyright a {
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-footer__credit a:hover,
.k-footer__credit a:focus-visible,
.k-footer__copyright a:hover,
.k-footer__copyright a:focus-visible {
color: var(--k-white);
text-decoration: underline;
}
/* ── Photo credits ──
Licence compliance that does not have to shout. Closed it is one muted line
the length of its own label; open it stacks the credits it already printed. */
.k-footer__credits {
margin-top: var(--k-s-2);
}
.k-footer__credits-summary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: var(--k-t-xs);
color: var(--k-footer-muted);
cursor: pointer;
list-style: none;
transition: color var(--k-duration-fast) var(--k-ease);
}
/* Safari still paints the disclosure triangle without this. */
.k-footer__credits-summary::-webkit-details-marker { display: none; }
.k-footer__credits-summary::after {
content: "";
width: 0.4rem;
height: 0.4rem;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform var(--k-duration-fast) var(--k-ease-out);
}
.k-footer__credits[open] .k-footer__credits-summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.k-footer__credits-summary:hover,
.k-footer__credits-summary:focus-visible { color: var(--k-white); }
.k-footer__credits-body { margin-top: var(--k-s-2); }
/* Inside the disclosure the lines are a list, so they sit tighter than the
agency signature above them. */
.k-footer__credits-body .k-footer__credit {
margin-top: 0;
line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
.k-footer__credits-summary::after { transition: none; }
}
.k-footer__legal {
display: flex;
gap: var(--k-s-6);
}
.k-footer__legal a {
font-size: var(--k-t-xs);
color: var(--k-footer-muted);
text-decoration: none;
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-footer__legal a:hover { color: var(--k-white); }
/* ── Tagline ── */
.k-footer__tagline {
text-align: center;
padding: var(--k-s-8) 0;
border-top: 1px solid rgba(255,255,255,0.04);
}
.k-footer__tagline-text {
font-family: var(--k-font-display);
font-size: var(--k-t-2xl);
font-style: italic;
/* A watermark, but 0.08 was under the threshold of visible -- it read as a
rendering fault rather than a flourish. */
color: var(--k-footer-faint);
letter-spacing: 0.02em;
}
/* The footer logo is no longer wrapped in the_custom_logo()'s own anchor, so
it needs an explicit size the way the header one does. */
.k-footer__logo-img {
height: 34px;
width: auto;
max-width: none;
display: block;
margin-bottom: var(--k-s-6);
}
/* ── Refinements ──────────────────────────────────────────────────────────
The five columns were set on a 2.5fr lead that left the brand column with a
lot of dead space once the link lists ran short. Even them out and give the
lists a tighter vertical rhythm. */
@media (min-width: 1024px) {
/* Brand block, then the two link columns. The brand takes the extra room
the removed Services/Industries columns freed up rather than letting the
three sit stranded across a wide footer. */
.k-footer__grid {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
gap: clamp(2rem, 1rem + 4vw, 6rem);
}
}
.k-footer__desc { max-width: 34ch; }
.k-footer__link { margin-bottom: var(--k-s-3); }
.k-footer__link:last-child { margin-bottom: 0; }
.k-footer__link a {
transition: color var(--k-duration-fast) var(--k-ease),
padding-inline-start var(--k-duration-fast) var(--k-ease);
}
/* A small inward nudge on hover, matching the arrow motion used elsewhere. */
.k-footer__link a:hover {
color: var(--k-white);
padding-inline-start: 4px;
}
.k-footer__col-title { margin-bottom: var(--k-s-5); }
/* ── Three-column refinement ──────────────────────────────────────────────
With the Services and Industries lists gone the footer reads as a brand
statement beside two short columns, so the type can be larger and the
rhythm looser than it was when five columns were competing. */
.k-footer__desc {
max-width: 42ch;
font-size: var(--k-t-base);
line-height: 1.75;
}
.k-footer__logo-img { margin-bottom: var(--k-s-6); }
.k-footer__social { margin-top: var(--k-s-8); }
/* Links get room to breathe now that the columns are short. */
.k-footer__link { margin-bottom: var(--k-s-4); }
.k-footer__link a { font-size: var(--k-t-base); }
.k-footer__contact-item + .k-footer__contact-item { margin-top: var(--k-s-5); }
/* Keep the two link columns aligned to the brand text, not floated high. */
@media (min-width: 1024px) {
.k-footer__col-title { margin-bottom: var(--k-s-6); }
}
/* ==== home.css ==== */
/* ==========================================================================
Kreston Egypt — Homepage (v3 — Light Premium Editorial)
========================================================================== */
/* ════════════════════════════════════════════════════════════════════════════
HERO — Bright, confident, with photography
════════════════════════════════════════════════════════════════════════════ */
/* The header is position:fixed and paints over whatever sits beneath it, and
this hero pins its content to the bottom with no top padding at all. On a
viewport short enough that the headline block fills the hero -- 1440x900 is
enough, where the content measures 887px against a 999px hero -- the content
box starts at y=0 and the first line of the headline ends up 71px behind the
navigation bar, clipped by this rule's own overflow:hidden. Reserving the
header's height as top padding means the content can never start above it;
on tall viewports there is spare room and align-items:flex-end still holds
the copy down at the bottom, so the intended composition is unchanged. */
.k-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: flex-end;
background: var(--k-offwhite);
color: var(--k-gray-900);
overflow: hidden;
padding-top: var(--k-header-h);
padding-bottom: clamp(4rem, 3rem + 5vw, 7rem);
}
.k-hero__bg {
position: absolute;
inset: 0;
z-index: 1;
}
/* ── The scrim ────────────────────────────────────────────────────────────
The photograph used to be held at 18% opacity under a gradient that reached
fully opaque, which left it as a grey suggestion rather than a picture. It is
now shown at full strength and the *text* is protected instead, which is the
right way round: a scrim that is heavy where the words are and light where
they are not.
Two gradients stack here. The first runs along the inline axis — nearly solid
behind the headline, opening up across the middle so the photograph carries
the rest of the frame, and easing back up at the far edge to seat the side
stats. The second is a soft vertical veil that keeps the header legible at
the top and the scroll cue at the bottom.
Both are built from --k-surface-rgb, so dark mode inverts them for free. */
.k-hero__bg::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to var(--k-hero-scrim-to, right),
rgba(var(--k-surface-rgb), 0.97) 0%,
rgba(var(--k-surface-rgb), 0.95) 20%,
rgba(var(--k-surface-rgb), 0.88) 32%,
rgba(var(--k-surface-rgb), 0.45) 44%,
rgba(var(--k-surface-rgb), 0.12) 62%,
rgba(var(--k-surface-rgb), 0.10) 86%,
rgba(var(--k-surface-rgb), 0.34) 100%
),
linear-gradient(to bottom,
rgba(var(--k-surface-rgb), 0.42) 0%,
rgba(var(--k-surface-rgb), 0.06) 16%,
rgba(var(--k-surface-rgb), 0) 52%,
rgba(var(--k-surface-rgb), 0.26) 100%
);
z-index: 3;
}
/* The copy sits at the inline start, so the heavy end of the scrim has to
follow the writing direction rather than always being on the left. */
[dir="rtl"] .k-hero { --k-hero-scrim-to: left; }
/* On a phone the copy is full width, so an inline-axis scrim protects nothing —
the headline and the body would both sit straight on the photograph. Below
900px the scrim turns to run down the page instead: firm through the text,
easing off under the buttons so the photograph still reads at the bottom of
the frame rather than disappearing again. */
@media (max-width: 900px) {
.k-hero__bg::before {
background: linear-gradient(
to bottom,
rgba(var(--k-surface-rgb), 0.90) 0%,
rgba(var(--k-surface-rgb), 0.88) 46%,
rgba(var(--k-surface-rgb), 0.74) 68%,
rgba(var(--k-surface-rgb), 0.42) 88%,
rgba(var(--k-surface-rgb), 0.30) 100%
);
}
}
.k-hero__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
/* A touch of the grade used on the country heroes: a little saturation out
and a little contrast in, so stock photography reads as art-directed
rather than dropped in. */
filter: saturate(0.86) contrast(1.04) brightness(1.01);
}
/* Decorative geometric accent */
.k-hero__grid-overlay {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0.03;
pointer-events: none;
}
/* Warm orb accent */
.k-hero__orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
z-index: 2;
}
.k-hero__orb--1 {
width: 500px; height: 500px;
background: rgba(201,168,76,0.08);
top: -10%; right: 10%;
}
.k-hero__orb--2 {
width: 400px; height: 400px;
background: rgba(11,29,58,0.04);
bottom: 10%; left: -5%;
}
.k-hero__content {
position: relative;
z-index: 10;
width: 100%;
max-width: var(--k-container);
margin-inline: auto;
padding-inline: var(--k-gutter);
}
.k-hero__label {
display: inline-flex;
align-items: center;
gap: var(--k-s-4);
margin-bottom: var(--k-s-6);
}
.k-hero__label-line {
width: 40px;
height: 1.5px;
background: var(--k-accent);
}
.k-hero__label-text {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--k-accent);
}
.k-hero__title {
font-family: var(--k-font-heading);
/* Deliberately not --k-t-hero: that token is shared with the About hero and
base h1. At 6.5rem this headline filled the viewport on its own and pushed
the description and buttons below the fold; 4.25rem leaves the composition
room to breathe while keeping the display weight. */
font-size: clamp(2.25rem, 1.1rem + 4vw, 4.25rem);
font-weight: var(--k-w-black);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--k-brand-ink);
max-width: 800px;
margin-bottom: var(--k-s-8);
}
.k-hero__title-accent {
color: var(--k-accent);
display: block;
}
.k-hero__desc {
font-size: var(--k-t-lg);
color: var(--k-gray-700);
max-width: 520px;
line-height: 1.7;
margin-bottom: var(--k-s-10);
}
.k-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--k-s-4);
align-items: center;
}
/* ── Hero Side Stats (desktop only) ── */
.k-hero__side-stats {
position: absolute;
/* Logical, not `right`: the hero copy starts from the inline start, so the
stats belong at the inline end. With a physical `right` they sat on top of
the Arabic headline. */
inset-inline-end: var(--k-gutter);
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: none;
}
@media (min-width: 1200px) {
.k-hero__side-stats {
display: flex;
flex-direction: column;
gap: var(--k-s-10);
align-items: flex-end;
}
}
.k-hero__side-stat { text-align: end; }
/* The photograph now runs right up to the stats. A hard panel behind them would
look bolted on, so this is a soft radial wash that fades out before it meets
anything — enough to seat the numbers without drawing a box. */
.k-hero__side-stats::before {
content: '';
position: absolute;
/* Generous and very gradual: a tight halo reads as a panel bolted behind the
numbers, a wide one just looks like the light falling that way. */
inset: -26% -46% -26% -70%;
z-index: -1;
background: radial-gradient(
ellipse at center,
rgba(var(--k-surface-rgb), 0.90) 0%,
rgba(var(--k-surface-rgb), 0.74) 30%,
rgba(var(--k-surface-rgb), 0.34) 58%,
rgba(var(--k-surface-rgb), 0) 100%
);
pointer-events: none;
}
.k-hero__side-stat-num {
font-family: var(--k-font-heading);
font-size: var(--k-t-5xl);
font-weight: var(--k-w-black);
color: var(--k-brand-ink);
line-height: 1;
letter-spacing: -0.03em;
}
.k-hero__side-stat-label {
font-size: var(--k-t-xs);
font-weight: var(--k-w-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
/* Was --k-gray-400, which had enough contrast against flat white but not
against the photograph now showing through behind it. */
color: var(--k-gray-700);
margin-top: var(--k-s-2);
}
.k-hero__side-stat-line {
width: 30px;
height: 1.5px;
background: var(--k-accent);
margin-top: var(--k-s-3);
margin-inline-start: auto;
}
/* ── Scroll Indicator ── */
.k-hero__scroll {
position: absolute;
bottom: var(--k-s-8);
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--k-s-3);
color: var(--k-gray-400);
}
.k-hero__scroll-text {
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.k-hero__scroll-line {
width: 1px;
height: 36px;
background: linear-gradient(180deg, var(--k-accent), transparent);
animation: hero-scroll-pulse 2.5s ease-in-out infinite;
}
@keyframes hero-scroll-pulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
50% { opacity: 1; transform: scaleY(1); }
}
/* The cue is absolutely positioned against the bottom of the hero. Once the
copy stacks to full width it lands on top of the "Talk to an expert" button
-- measured overlapping it by 48px at 375px wide -- and sits in front of a
real tap target. It is decorative, and least useful on a touch device, so it
is dropped rather than nudged. */
@media (max-width: 767px) {
.k-hero__scroll { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
TRUST STATEMENT — Light section, editorial
════════════════════════════════════════════════════════════════════════════ */
.k-trust {
background: var(--k-surface-2);
padding: clamp(4rem, 3rem + 5vw, 7rem) 0;
position: relative;
}
.k-trust::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--k-gray-200), transparent);
}
.k-trust__inner {
max-width: 780px;
margin-inline: auto;
text-align: center;
}
.k-trust__quote {
font-family: var(--k-font-display);
font-size: var(--k-t-3xl);
font-weight: var(--k-w-bold);
line-height: 1.3;
color: var(--k-gray-800);
margin-bottom: var(--k-s-6);
}
.k-trust__quote-accent {
color: var(--k-brand-ink);
}
.k-trust__desc {
font-size: var(--k-t-lg);
color: var(--k-gray-500);
line-height: 1.8;
max-width: 600px;
margin-inline: auto;
}
/* ════════════════════════════════════════════════════════════════════════════
SERVICES EXPLORER — Interactive, light background
════════════════════════════════════════════════════════════════════════════ */
.k-services {
background: var(--k-offwhite);
position: relative;
}
.k-services__header {
position: relative;
z-index: 2;
margin-bottom: clamp(3rem, 2rem + 5vw, 5rem);
}
.k-services__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
position: relative;
z-index: 2;
}
@media (min-width: 1024px) {
.k-services__grid {
grid-template-columns: 1fr 1fr;
}
}
/* ── Service Item (Interactive) ── */
.k-service-item {
position: relative;
display: flex;
align-items: center;
padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) 0;
border-bottom: 1px solid var(--k-gray-200);
text-decoration: none;
transition: all var(--k-duration-base) var(--k-ease);
cursor: pointer;
}
.k-service-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 0;
background: var(--k-accent);
transition: height var(--k-duration-base) var(--k-ease);
}
.k-service-item:hover::before { height: 100%; }
[dir="rtl"] .k-service-item::before { left: auto; right: 0; }
.k-service-item:hover {
padding-left: var(--k-s-6);
}
[dir="rtl"] .k-service-item:hover { padding-left: 0; padding-right: var(--k-s-6); }
.k-service-item__number {
font-family: var(--k-font-heading);
font-size: var(--k-t-2xl);
font-weight: var(--k-w-black);
color: var(--k-gray-200);
min-width: 60px;
transition: color var(--k-duration-base) var(--k-ease);
flex-shrink: 0;
}
.k-service-item:hover .k-service-item__number { color: var(--k-accent); }
.k-service-item__content {
flex: 1;
padding: 0 var(--k-s-5);
}
.k-service-item__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-bold);
color: var(--k-gray-800);
margin-bottom: var(--k-s-1);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-service-item:hover .k-service-item__title { color: var(--k-brand-ink); }
.k-service-item__desc {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
line-height: 1.5;
max-height: 0;
overflow: hidden;
transition: max-height var(--k-duration-slow) var(--k-ease),
opacity var(--k-duration-base) var(--k-ease);
opacity: 0;
}
.k-service-item:hover .k-service-item__desc {
max-height: 80px;
opacity: 1;
}
.k-service-item__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--k-gray-200);
color: var(--k-gray-300);
flex-shrink: 0;
transition: all var(--k-duration-base) var(--k-ease);
}
.k-service-item:hover .k-service-item__arrow {
background: var(--k-primary);
border-color: var(--k-primary);
color: var(--k-white);
}
/* ── Service Visual Panel (desktop) ── */
.k-services__visual {
position: relative;
min-height: 350px;
overflow: hidden;
}
@media (min-width: 1024px) {
.k-services__visual {
position: sticky;
top: var(--k-header-h);
height: calc(100vh - var(--k-header-h));
display: flex;
align-items: center;
justify-content: center;
background: var(--k-gray-100);
border-left: 1px solid var(--k-gray-200);
}
}
.k-services__visual-text {
font-family: var(--k-font-heading);
font-size: clamp(4rem, 3rem + 6vw, 10rem);
font-weight: var(--k-w-black);
color: var(--k-gray-200);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
text-align: center;
user-select: none;
}
/* ════════════════════════════════════════════════════════════════════════════
ABOUT — Light, editorial split
════════════════════════════════════════════════════════════════════════════ */
.k-about {
background: var(--k-surface-2);
}
.k-about__split {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 2rem + 5vw, 6rem);
align-items: center;
}
@media (min-width: 1024px) {
.k-about__split { grid-template-columns: 1.1fr 0.9fr; }
/* The partner portrait is a 214x300 source. The default split would hand it
the wider of the two columns and blow it up past 590px; this gives it a
column it can nearly fill at native size and lets the message -- which is
the point of the section -- take the width instead. */
.k-about__split--portrait { grid-template-columns: minmax(0, 300px) 1fr; }
}
.k-about__split--portrait { align-items: start; }
.k-about__split--portrait .k-about__image {
max-width: 300px;
/* The portrait's own ratio (214x300), so cover has nothing to crop and the
photo shows exactly as supplied rather than losing the top of the head. */
aspect-ratio: 107 / 150;
}
.k-about__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-6xl);
font-weight: var(--k-w-black);
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--k-gray-900);
margin-bottom: var(--k-s-8);
}
.k-about__title-accent {
color: var(--k-brand-ink);
}
.k-about__text {
font-size: var(--k-t-lg);
color: var(--k-gray-500);
line-height: 1.8;
margin-bottom: var(--k-s-6);
}
.k-about__stat-highlight {
display: inline-flex;
align-items: baseline;
gap: var(--k-s-3);
margin-top: var(--k-s-8);
padding-top: var(--k-s-8);
border-top: 1px solid var(--k-gray-200);
}
.k-about__stat-big {
font-family: var(--k-font-heading);
font-size: var(--k-t-5xl);
font-weight: var(--k-w-black);
color: var(--k-brand-ink);
line-height: 1;
letter-spacing: -0.03em;
}
.k-about__stat-text {
font-size: var(--k-t-sm);
font-weight: var(--k-w-medium);
color: var(--k-gray-400);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.k-about__image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}
.k-about__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.k-about__image-accent {
position: absolute;
bottom: -20px;
right: -20px;
width: 120px;
height: 120px;
border: 1px solid var(--k-accent);
opacity: 0.25;
z-index: -1;
}
/* ════════════════════════════════════════════════════════════════════════════
WHY KRESTON — Light background, bold statement
════════════════════════════════════════════════════════════════════════════ */
.k-why {
background: var(--k-offwhite);
position: relative;
}
.k-why__statement {
position: relative;
z-index: 2;
margin-bottom: clamp(3rem, 2rem + 5vw, 5rem);
text-align: center;
}
.k-why__big-text {
font-family: var(--k-font-heading);
font-size: clamp(2.5rem, 1.5rem + 6vw, 6.5rem);
font-weight: var(--k-w-black);
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--k-brand-ink);
}
.k-why__big-text-accent {
color: var(--k-accent);
display: block;
}
.k-why__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--k-gray-200);
}
@media (min-width: 768px) {
.k-why__grid { grid-template-columns: repeat(4, 1fr); }
}
.k-why__item {
background: var(--k-surface-2);
padding: clamp(2rem, 1.5rem + 3vw, 3rem);
text-align: center;
}
.k-why__item-number {
font-family: var(--k-font-heading);
font-size: clamp(2.5rem, 2rem + 3vw, 3.5rem);
font-weight: var(--k-w-black);
color: var(--k-brand-ink);
line-height: 1;
letter-spacing: -0.03em;
}
.k-why__item-label {
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k-gray-400);
margin-top: var(--k-s-2);
}
/* ════════════════════════════════════════════════════════════════════════════
EGYPT — Light/partial with image, editorial layout
════════════════════════════════════════════════════════════════════════════ */
.k-egypt {
position: relative;
overflow: hidden;
background: var(--k-surface-2);
}
.k-egypt__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 2rem + 4vw, 5rem);
align-items: center;
}
.k-egypt__image {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.k-egypt__image img {
width: 100%;
height: 100%;
object-fit: cover;
/* The photograph is square and the frame is not, so something is always
cropped. Biasing upward keeps the minaret tips inside the 4:3 frame the
narrow layout uses -- they are the half of the silhouette that identifies
the building, and a centred crop clips them. */
object-position: 50% 30%;
}
/* "EGYPT. A MARKET OF OPPORTUNITY." sets a min-content width the text column
will not drop below, so the declared 1.3/0.7 split never really applies --
the text takes ~690px and the photograph is squeezed into ~420px. The column
widths are left alone (forcing them with minmax(0, …) makes the display type
overflow its track), but centred in a 642px row that 4/3 photograph floated
with roughly 160px of dead space above and below it. Stretching the track
makes it the full-height panel this layout reads as -- the treatment
.k-about__image and the services split already use. Ordered after the base
rule above so the aspect-ratio reset wins. */
@media (min-width: 1024px) {
.k-egypt__grid {
grid-template-columns: 1.3fr 0.7fr;
align-items: stretch;
}
.k-egypt__image {
aspect-ratio: auto;
min-height: 100%;
}
}
.k-egypt__image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.9));
}
.k-egypt__title {
font-family: var(--k-font-heading);
font-size: clamp(2.5rem, 1.5rem + 6vw, 6rem);
font-weight: var(--k-w-black);
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--k-brand-ink);
margin-bottom: var(--k-s-6);
}
.k-egypt__title-accent { color: var(--k-accent); }
.k-egypt__desc {
font-size: var(--k-t-lg);
color: var(--k-gray-500);
line-height: 1.8;
max-width: 520px;
margin-bottom: var(--k-s-8);
}
.k-egypt__tags {
display: flex;
flex-wrap: wrap;
gap: var(--k-s-3);
margin-bottom: var(--k-s-8);
}
.k-egypt__data-card {
background: var(--k-offwhite);
border: 1px solid var(--k-gray-200);
padding: var(--k-s-6);
}
.k-egypt__data-card + .k-egypt__data-card { border-top: none; }
.k-egypt__data-num {
font-family: var(--k-font-heading);
font-size: var(--k-t-3xl);
font-weight: var(--k-w-black);
color: var(--k-brand-ink);
line-height: 1;
letter-spacing: -0.03em;
}
.k-egypt__data-label {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
margin-top: var(--k-s-2);
}
/* ════════════════════════════════════════════════════════════════════════════
INDUSTRIES — Interactive list, light
════════════════════════════════════════════════════════════════════════════ */
.k-industries {
background: var(--k-offwhite);
}
.k-industries__list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 768px) {
.k-industries__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.k-industries__list { grid-template-columns: repeat(3, 1fr); }
}
.k-industry-item {
position: relative;
display: flex;
align-items: center;
gap: var(--k-s-5);
padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
border-bottom: 1px solid var(--k-gray-200);
text-decoration: none;
transition: all var(--k-duration-base) var(--k-ease);
overflow: hidden;
}
.k-industry-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 0;
background: var(--k-accent);
transition: height var(--k-duration-base) var(--k-ease);
}
.k-industry-item:hover::before { height: 100%; }
[dir="rtl"] .k-industry-item::before { left: auto; right: 0; }
.k-industry-item:hover {
background: var(--k-surface-2);
padding-left: calc(clamp(1.25rem, 1rem + 1.5vw, 2rem) + var(--k-s-4));
}
[dir="rtl"] .k-industry-item:hover {
padding-left: clamp(1.25rem, 1rem + 1.5vw, 2rem);
padding-right: calc(clamp(1.25rem, 1rem + 1.5vw, 2rem) + var(--k-s-4));
}
.k-industry-item__num {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
color: var(--k-gray-300);
min-width: 24px;
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-industry-item:hover .k-industry-item__num { color: var(--k-accent); }
.k-industry-item__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-bold);
color: var(--k-gray-700);
transition: color var(--k-duration-fast) var(--k-ease);
flex: 1;
}
.k-industry-item:hover .k-industry-item__title { color: var(--k-brand-ink); }
.k-industry-item__arrow {
color: var(--k-gray-300);
transition: all var(--k-duration-fast) var(--k-ease);
opacity: 0;
transform: translateX(-8px);
}
[dir="rtl"] .k-industry-item__arrow { transform: translateX(8px); }
.k-industry-item:hover .k-industry-item__arrow {
opacity: 1;
transform: translateX(0);
color: var(--k-accent);
}
/* ── Default active row ────────────────────────────────────────────────────
Nothing in a list of plain titles says "click me". The first row carries the
hover treatment permanently — accent rule, indented title, visible arrow — so
the affordance is on screen before any pointer arrives. It is scoped to the
list *not* being hovered: the moment a visitor points at any other row, the
first one drops back to rest and the hover styles above take over. */
.k-industries__list:not(:hover) .k-industry-item.is-active::before { height: 100%; }
.k-industries__list:not(:hover) .k-industry-item.is-active {
background: var(--k-surface-2);
padding-left: calc(clamp(1.25rem, 1rem + 1.5vw, 2rem) + var(--k-s-4));
}
[dir="rtl"] .k-industries__list:not(:hover) .k-industry-item.is-active {
padding-left: clamp(1.25rem, 1rem + 1.5vw, 2rem);
padding-right: calc(clamp(1.25rem, 1rem + 1.5vw, 2rem) + var(--k-s-4));
}
.k-industries__list:not(:hover) .k-industry-item.is-active .k-industry-item__num { color: var(--k-accent); }
.k-industries__list:not(:hover) .k-industry-item.is-active .k-industry-item__title { color: var(--k-brand-ink); }
.k-industries__list:not(:hover) .k-industry-item.is-active .k-industry-item__arrow {
opacity: 1;
transform: translateX(0);
color: var(--k-accent);
}
/* ════════════════════════════════════════════════════════════════════════════
GLOBAL NETWORK — Dark navy, strategic use
════════════════════════════════════════════════════════════════════════════ */
.k-global {
background: var(--k-primary);
position: relative;
overflow: hidden;
}
.k-global::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 60%, rgba(201,168,76,0.05) 0%, transparent 50%);
}
.k-global__header {
position: relative;
z-index: 2;
margin-bottom: clamp(3rem, 2rem + 5vw, 5rem);
}
.k-global__map-wrap {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: var(--k-s-12);
}
.k-global__map { width: 100%; max-width: 860px; margin-inline: auto; }
.k-global__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,0.08);
position: relative;
z-index: 2;
}
.k-global__stat {
background: var(--k-primary);
/* 3.5rem a side took 112px out of a 327px cell, leaving the figure less room
than it needed. */
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════════════
INSIGHTS — Editorial layout, light
════════════════════════════════════════════════════════════════════════════ */
.k-insights {
background: var(--k-surface-2);
}
.k-insights__layout {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 1024px) {
.k-insights__layout { grid-template-columns: 1.2fr 0.8fr; }
}
/* ── Featured Article ── */
.k-featured {
display: block;
text-decoration: none;
}
.k-featured__image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
margin-bottom: var(--k-s-6);
}
.k-featured__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--k-duration-slow) var(--k-ease);
}
.k-featured:hover .k-featured__image img { transform: scale(1.03); }
.k-featured__category {
position: absolute;
top: var(--k-s-5);
left: var(--k-s-5);
}
.k-featured__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-4xl);
font-weight: var(--k-w-bold);
color: var(--k-gray-900);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: var(--k-s-4);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-featured:hover .k-featured__title { color: var(--k-brand-ink); }
.k-featured__excerpt {
font-size: var(--k-t-base);
color: var(--k-gray-400);
line-height: 1.7;
margin-bottom: var(--k-s-4);
}
.k-featured__meta {
font-size: var(--k-t-xs);
color: var(--k-gray-400);
display: flex;
align-items: center;
gap: var(--k-s-3);
}
/* ── Secondary Articles ── */
.k-secondary-list {
display: flex;
flex-direction: column;
gap: 0;
}
.k-secondary {
display: flex;
gap: var(--k-s-5);
padding: var(--k-s-5) 0;
border-bottom: 1px solid var(--k-gray-200);
text-decoration: none;
transition: all var(--k-duration-base) var(--k-ease);
}
.k-secondary:first-child { padding-top: 0; }
.k-secondary:hover { padding-left: var(--k-s-4); }
[dir="rtl"] .k-secondary:hover { padding-left: 0; padding-right: var(--k-s-4); }
.k-secondary__image {
width: 90px;
height: 90px;
flex-shrink: 0;
overflow: hidden;
}
.k-secondary__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.k-secondary__content { flex: 1; }
.k-secondary__category {
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--k-accent);
margin-bottom: var(--k-s-2);
}
.k-secondary__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-base);
font-weight: var(--k-w-bold);
color: var(--k-gray-700);
line-height: 1.3;
margin-bottom: var(--k-s-2);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-secondary:hover .k-secondary__title { color: var(--k-brand-ink); }
.k-secondary__date {
font-size: var(--k-t-xs);
color: var(--k-gray-400);
}
/* ════════════════════════════════════════════════════════════════════════════
LEADERSHIP — Light, large portraits
════════════════════════════════════════════════════════════════════════════ */
.k-leadership {
background: var(--k-offwhite);
}
.k-leadership__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 1.5rem + 3vw, 3rem);
}
@media (min-width: 768px) {
.k-leadership__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.k-leadership__grid { grid-template-columns: repeat(3, 1fr); }
}
.k-leader { text-decoration: none; }
.k-leader__image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
margin-bottom: var(--k-s-5);
}
.k-leader__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: all var(--k-duration-slow) var(--k-ease);
}
.k-leader:hover .k-leader__image img {
filter: grayscale(0%);
transform: scale(1.03);
}
.k-leader__name {
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-bold);
color: var(--k-gray-900);
margin-bottom: var(--k-s-1);
}
.k-leader__position {
font-size: var(--k-t-sm);
color: var(--k-brand-ink);
font-weight: var(--k-w-medium);
}
.k-leader__expertise {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
line-height: 1.6;
margin-top: var(--k-s-3);
}
/* ════════════════════════════════════════════════════════════════════════════
CTA — Dark, strategic, final
════════════════════════════════════════════════════════════════════════════ */
.k-cta {
position: relative;
padding: clamp(4.5rem, 3.25rem + 4.5vw, 7rem) 0;
background: var(--k-primary);
text-align: center;
overflow: hidden;
}
.k-cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.06) 0%, transparent 60%);
}
.k-cta::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--k-accent), transparent);
opacity: 0.3;
}
.k-cta__content { position: relative; z-index: 2; }
.k-cta__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-6xl);
font-weight: var(--k-w-black);
color: var(--k-white);
line-height: 0.95;
letter-spacing: -0.035em;
text-transform: uppercase;
max-width: 700px;
margin-inline: auto;
margin-bottom: var(--k-s-8);
}
.k-cta__desc {
font-size: var(--k-t-lg);
color: rgba(255,255,255,0.6);
max-width: 520px;
margin-inline: auto;
margin-bottom: var(--k-s-10);
line-height: 1.7;
}
.k-cta__actions {
display: flex;
flex-wrap: wrap;
gap: var(--k-s-4);
justify-content: center;
}
/* ════════════════════════════════════════════════════════════════════════════
ANIMATIONS
════════════════════════════════════════════════════════════════════════════ */
/* Reveal-on-scroll. Tuned so content never *feels* late: the observer fires
while an element is still below the fold (see main.js), the travel is short,
and the fade is under half a second — by the time the reader's eye gets
there it is already settled. Anything a reader could think was "loading"
is a failure of this rule, not a feature of it. */
html.js [data-reveal] {
opacity: 0;
transition: opacity var(--k-duration-reveal) var(--k-ease-out),
transform var(--k-duration-reveal) var(--k-ease-out);
}
/* Reduced motion: no hidden state at all. The script skips the observer in
that case, so without this the content would simply never appear. */
@media (prefers-reduced-motion: reduce) {
html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
html.js [data-reveal="up"] { transform: translateY(18px); }
html.js [data-reveal="down"] { transform: translateY(-18px); }
html.js [data-reveal="left"] { transform: translateX(18px); }
html.js [data-reveal="right"] { transform: translateX(-18px); }
html.js [data-reveal="scale"] { transform: scale(0.98); }
html.js [data-reveal].revealed { opacity: 1; transform: none; }
/* Shown before the reader ever scrolled: no transition to sit through. */
html.js [data-reveal].revealed--instant { transition: none; }
/* ════════════════════════════════════════════════════════════════════════════
MOBILE
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.k-hero { min-height: 85vh; align-items: flex-end; padding-bottom: var(--k-s-12); }
.k-hero__title { font-size: clamp(2.25rem, 10vw, 3.5rem); }
.k-services__visual { display: none; }
.k-egypt__title { font-size: clamp(2rem, 8vw, 3rem); }
.k-why__big-text { font-size: clamp(2rem, 7vw, 3rem); }
}
/* ════════════════════════════════════════════════════════════════════════════
SEARCH
════════════════════════════════════════════════════════════════════════════ */
.k-search-results { margin-top: var(--k-s-6); }
.k-search-results__list { list-style: none; }
.k-search-results__item { border-bottom: 1px solid var(--k-gray-200); }
.k-search-results__link {
display: flex;
gap: var(--k-s-5);
padding: var(--k-s-5) 0;
text-decoration: none;
transition: background var(--k-duration-fast) var(--k-ease);
}
.k-search-results__link:hover { background: var(--k-offwhite); }
.k-search-results__thumb { width: 80px; height: 80px; flex-shrink: 0; object-fit: cover; }
.k-search-results__type {
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--k-accent);
}
.k-search-results__title { font-size: var(--k-t-base); font-weight: var(--k-w-bold); color: var(--k-gray-800); }
.k-search-results__excerpt { font-size: var(--k-t-sm); color: var(--k-gray-400); margin-top: var(--k-s-1); }
.k-search-results__empty { text-align: center; padding: var(--k-s-12) 0; color: var(--k-gray-400); }
/* ════════════════════════════════════════════════════════════════════════════
HERO SLIDER
Three slides share one grid cell, so the section is as tall as the tallest of
them and nothing reflows as they change — no absolute positioning, no fixed
height to maintain, no jump when a longer headline comes round.
Only the copy rotates. The two calls to action sit outside the slides: they
would otherwise be duplicated three times in the markup, and a button that
stays put is easier to hit than one that fades under the cursor.
════════════════════════════════════════════════════════════════════════════ */
.k-hero__slides {
display: grid;
}
.k-hero__slide {
grid-area: 1 / 1; /* every slide in the same cell */
opacity: 0;
visibility: hidden; /* also takes it out of the a11y tree */
transition: opacity 700ms var(--k-ease-out), visibility 0s linear 700ms;
}
.k-hero__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 700ms var(--k-ease-out), visibility 0s;
}
/* The "smart" part: the three lines do not arrive together. Each one lifts into
place a beat after the one above, which reads as the sentence being written
rather than a panel being swapped. */
.k-hero__slide > * {
transform: translateY(18px);
opacity: 0;
transition: transform 700ms var(--k-ease-out), opacity 700ms var(--k-ease-out);
}
.k-hero__slide.is-active > * {
transform: none;
opacity: 1;
}
.k-hero__slide.is-active .k-hero__label { transition-delay: 60ms; }
.k-hero__slide.is-active .k-hero__title { transition-delay: 150ms; }
.k-hero__slide.is-active .k-hero__desc { transition-delay: 260ms; }
.k-hero__slide.is-active .k-hero__place { transition-delay: 360ms; }
/* Names the place in the photograph, the same way the country pages do under
their headline: small, letterspaced, with the gold rule. */
.k-hero__place {
margin-top: var(--k-s-5);
font-size: var(--k-t-xs);
font-weight: var(--k-w-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--k-gray-500);
}
.k-hero__place::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 2px;
margin-inline-end: var(--k-s-3);
vertical-align: middle;
background: var(--k-accent);
}
html.dark .k-hero__place { color: var(--k-gray-400); }
/* ── Backgrounds ───────────────────────────────────────────────────────────
Same stacking trick. The active photograph also drifts very slowly outward,
which stops a six-second hold from feeling like a still. */
.k-hero__bg-slides {
position: absolute;
inset: 0;
display: grid;
/* the slow scale below is 6% larger than the frame; keep it inside */
overflow: hidden;
}
.k-hero__bg-slide {
grid-area: 1 / 1;
opacity: 0;
transition: opacity 1100ms var(--k-ease-out);
}
.k-hero__bg-slide.is-active {
opacity: 1;
}
.k-hero__bg-slide .k-hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.06);
transition: transform 9s linear;
}
.k-hero__bg-slide.is-active .k-hero__bg-img {
transform: scale(1);
}
/* ── Dots ──────────────────────────────────────────────────────────────────
Each dot doubles as the progress bar for its own slide: the fill runs the
length of the interval, so the wait is visible instead of arbitrary. */
.k-hero__dots {
display: flex;
gap: var(--k-s-3);
margin-top: var(--k-s-10);
}
.k-hero__dot {
position: relative;
width: 44px;
height: 3px;
padding: 0;
border: 0;
border-radius: 2px;
background: var(--k-gray-300);
cursor: pointer;
overflow: hidden;
transition: background var(--k-duration-fast) var(--k-ease-out);
/* the bar is 3px tall but the tap target must not be */
box-shadow: 0 0 0 10px transparent;
}
.k-hero__dot:hover { background: var(--k-gray-400); }
.k-hero__dot:focus-visible {
outline: 2px solid var(--k-accent);
outline-offset: 6px;
}
.k-hero__dot-fill {
position: absolute;
inset: 0;
transform: scaleX(0);
transform-origin: left center;
background: var(--k-accent);
border-radius: inherit;
}
[dir="rtl"] .k-hero__dot-fill { transform-origin: right center; }
.k-hero__dot.is-active .k-hero__dot-fill {
animation: k-hero-dot var(--k-hero-interval, 6500ms) linear forwards;
}
/* Paused while the pointer or keyboard focus is in the hero, so nothing moves
out from under someone who is reading or about to click. */
.k-hero--slider.is-paused .k-hero__dot.is-active .k-hero__dot-fill {
animation-play-state: paused;
}
@keyframes k-hero-dot {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (max-width: 900px) {
.k-hero__dots { margin-top: var(--k-s-8); }
.k-hero__dot { width: 34px; }
}
/* Without JS the slides never advance, so show the first one and hide the
controls rather than leaving an empty stack. */
html:not(.js) .k-hero__slide > *,
html:not(.js) .k-hero__slide { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .k-hero__slide:not(:first-child) { display: none; }
html:not(.js) .k-hero__dots { display: none; }
/* Reduced motion: the slider still advances so no content is unreachable, but
it cross-fades flat — no lift, no drift, no progress animation. */
@media (prefers-reduced-motion: reduce) {
.k-hero__slide > *,
.k-hero__bg-slide .k-hero__bg-img { transition: none; transform: none; }
.k-hero__bg-slide.is-active .k-hero__bg-img { transform: none; }
.k-hero__dot.is-active .k-hero__dot-fill { animation: none; transform: scaleX(1); }
}
/* ==== pages.css ==== */
/* ==========================================================================
Kreston Egypt — Inner page primitives
The homepage got a bespoke component per section (see home.css); the inner
templates instead compose a small set of shared primitives — a section
heading block, a card, a stats bar, and a couple of layout helpers. Those
primitives were referenced by every template but had never been written,
which is why every page except the front page rendered unstyled.
Everything here reads from the tokens in variables.css, so the dark palette
applies without a single override.
========================================================================== */
/* ── Section heading block ────────────────────────────────────────────────
Gold eyebrow, navy title, muted lead — the same rhythm the homepage
sections use, factored out so the inner pages share it. */
.k-section-head {
max-width: var(--k-container-narrow);
margin-bottom: var(--k-s-12);
}
.k-section-head__label {
display: block;
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k-accent);
margin-bottom: var(--k-s-4);
}
.k-section-head__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-4xl);
font-weight: var(--k-w-bold);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--k-gray-900);
}
.k-section-head__desc {
margin-top: var(--k-s-5);
font-size: var(--k-t-lg);
line-height: 1.7;
color: var(--k-gray-500);
}
/* Section heads default to the light-surface palette -- near-black title, mid
grey description -- which vanishes on the navy sections. Any section that
paints a dark surface has to restate them. */
.k-global .k-section-head__title,
.k-cta .k-section-head__title,
.k-stats-bar .k-section-head__title,
.k-section--dark .k-section-head__title { color: var(--k-white); }
.k-global .k-section-head__desc,
.k-cta .k-section-head__desc,
.k-stats-bar .k-section-head__desc,
.k-section--dark .k-section-head__desc { color: rgba(255, 255, 255, 0.72); }
/* Centred variant, used where a section header sits above a grid. */
.k-section-head--center {
margin-inline: auto;
text-align: center;
}
/* ── Card ─────────────────────────────────────────────────────────────────
The generic content card: insights, services, industries, team listings.
Square corners and a hairline, matching the editorial treatment rather
than the rounded-shadow card the plugins bring with them. */
.k-card {
display: flex;
flex-direction: column;
background: var(--k-surface-2);
border: 1px solid var(--k-gray-200);
transition: border-color var(--k-duration-base) var(--k-ease),
box-shadow var(--k-duration-base) var(--k-ease),
transform var(--k-duration-base) var(--k-ease);
}
.k-card:hover {
border-color: var(--k-accent);
box-shadow: var(--k-shadow-lg);
transform: translateY(-3px);
}
/* The whole card is usually one link; keep it a block so the padding is
clickable rather than just the text. */
.k-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.k-card__image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--k-gray-100);
flex-shrink: 0;
}
.k-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--k-duration-slow) var(--k-ease);
}
.k-card:hover .k-card__image img { transform: scale(1.04); }
.k-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--k-s-6);
}
.k-card__label {
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-accent);
margin-bottom: var(--k-s-3);
}
.k-card__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-semibold);
line-height: 1.3;
color: var(--k-gray-900);
transition: color var(--k-duration-fast) var(--k-ease);
}
.k-card__link:hover .k-card__title { color: var(--k-brand-ink); }
.k-card__excerpt {
margin-top: var(--k-s-3);
font-size: var(--k-t-sm);
line-height: 1.65;
color: var(--k-gray-500);
}
/* Pushed to the bottom so cards of differing text length still line up. */
.k-card__meta {
margin-top: auto;
padding-top: var(--k-s-5);
display: flex;
align-items: center;
gap: var(--k-s-3);
font-size: var(--k-t-xs);
color: var(--k-gray-400);
}
/* ── Service card ── */
.k-service-card {
position: relative;
padding: var(--k-s-8);
background: var(--k-surface-2);
border: 1px solid var(--k-gray-200);
border-top: 3px solid var(--k-primary);
height: 100%;
transition: border-top-color var(--k-duration-base) var(--k-ease),
box-shadow var(--k-duration-base) var(--k-ease),
transform var(--k-duration-base) var(--k-ease);
}
.k-service-card:hover {
border-top-color: var(--k-accent);
box-shadow: var(--k-shadow-lg);
transform: translateY(-3px);
}
.k-service-card__number {
display: block;
font-family: var(--k-font-heading);
font-size: var(--k-t-sm);
font-weight: var(--k-w-bold);
letter-spacing: 0.1em;
color: var(--k-accent);
margin-bottom: var(--k-s-4);
}
.k-service-card__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-semibold);
line-height: 1.3;
color: var(--k-gray-900);
margin-bottom: var(--k-s-3);
}
.k-service-card__desc {
font-size: var(--k-t-sm);
line-height: 1.65;
color: var(--k-gray-500);
}
/* ── Team card ── */
.k-team-card {
background: var(--k-surface-2);
border: 1px solid var(--k-gray-200);
overflow: hidden;
}
.k-team-card__image {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--k-gray-100);
}
.k-team-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.k-team-card__name {
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-semibold);
color: var(--k-gray-900);
padding: var(--k-s-5) var(--k-s-5) 0;
}
.k-team-card__position {
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k-accent);
padding: var(--k-s-2) var(--k-s-5) 0;
}
.k-team-card__bio {
font-size: var(--k-t-sm);
line-height: 1.65;
color: var(--k-gray-500);
padding: var(--k-s-3) var(--k-s-5) var(--k-s-5);
}
/* ── Stats bar ────────────────────────────────────────────────────────────
A full-width band of figures. Sits on the navy, so its ink is the literal
white rather than the grey ramp. */
.k-stats-bar {
background: var(--k-primary);
padding: var(--k-s-12) 0;
}
.k-stats-bar__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--k-s-8);
text-align: center;
}
.k-stats-bar__item + .k-stats-bar__item {
border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 767px) {
.k-stats-bar__item + .k-stats-bar__item { border-inline-start: 0; }
}
.k-stats-bar__number {
font-family: var(--k-font-heading);
font-size: var(--k-t-5xl);
font-weight: var(--k-w-black);
line-height: 1;
letter-spacing: -0.04em;
color: var(--k-white);
}
.k-stats-bar__suffix { color: var(--k-accent); }
.k-stats-bar__label {
margin-top: var(--k-s-3);
font-size: var(--k-t-xs);
font-weight: var(--k-w-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
/* ── Insights grid ── */
.k-insights__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--k-s-8);
}
/* ── Contact form ── */
.k-contact-form {
display: flex;
flex-direction: column;
gap: var(--k-s-5);
}
/* The consent checkbox is a row, not a stacked field. */
.k-contact-form .k-field--check {
flex-direction: row;
align-items: flex-start;
gap: var(--k-s-3);
}
.k-contact-form input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 0.15rem;
flex-shrink: 0;
accent-color: var(--k-primary);
}
/* ── Sidebar widget ── */
.k-widget {
padding: var(--k-s-6);
background: var(--k-offwhite);
border: 1px solid var(--k-gray-200);
}
.k-widget + .k-widget { margin-top: var(--k-s-6); }
/* ── Layout helpers ── */
.k-flex { display: flex; align-items: center; gap: var(--k-s-4); }
.k-flex--wrap { flex-wrap: wrap; }
.k-gap-4 { gap: var(--k-s-4); }
.k-divider {
height: 1px;
border: 0;
background: var(--k-gray-200);
margin: var(--k-s-12) 0;
}
/* The class is no longer a JS hook -- the count-up was removed and the figure
is simply rendered. Tabular figures are kept because these sit in a row of
equal-width cells, where proportional digits make "35" and "100" look
optically misaligned against their labels. */
.k-counter { font-variant-numeric: tabular-nums; }
/* ── Page hero with a photographic backdrop ───────────────────────────────
The plain hero paints --k-offwhite and a 4%-opacity gold wash, which on a
wide screen reads as an empty band. This variant puts a photo behind it,
scrimmed from the leading edge so the navy title keeps its contrast. */
/* Light base, not navy: the scrim and the title colour both assume a light
ground, so if the photo is slow or missing the hero must still read. */
.k-hero-page--media { background: var(--k-offwhite); }
.k-hero-page__media {
position: absolute;
inset: 0;
z-index: 0;
}
.k-hero-page__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
.k-hero-page--media::before {
z-index: 1;
background: linear-gradient(
100deg,
rgba(var(--k-surface-rgb), 0.97) 0%,
rgba(var(--k-surface-rgb), 0.94) 38%,
rgba(var(--k-surface-rgb), 0.62) 62%,
rgba(var(--k-surface-rgb), 0.28) 100%
);
}
[dir="rtl"] .k-hero-page--media::before { transform: scaleX(-1); }
/* The hairline at the foot would cut across the photo. */
.k-hero-page--media::after { opacity: 0.35; }
/* The place under the country name. Sized and weighted like the eyebrow
labels elsewhere on the site rather than like body copy, so it reads as a
caption belonging to the photograph and never competes with the H1. */
.k-hero-page__place {
margin-top: var(--k-s-4);
font-size: var(--k-t-sm);
font-weight: var(--k-w-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--k-gray-500);
}
/* A short gold rule ties it to the headline above it, matching the accent the
hero eyebrows use. Logical properties so it sits on the correct side in
Arabic. */
.k-hero-page__place::before {
content: "";
display: inline-block;
width: 1.75rem;
height: 2px;
margin-inline-end: var(--k-s-3);
vertical-align: middle;
background: var(--k-accent);
}
html.dark .k-hero-page__place { color: var(--k-gray-400); }
/* ── Country hero art direction ───────────────────────────────────────────
Thirty-seven landmark photographs, from thirty-seven sources, have to read as
one system. Rather than ask for pre-graded files -- which drift the moment
somebody supplies an ungraded one -- the correction lives here and applies to
every country hero equally:
· saturate(0.82) pulls back the postcard colour that tourism photography
carries, so a turquoise sea and a sandstone ruin sit at the same intensity;
· contrast(0.96) + brightness(1.04) lift the frame toward the page's own
off-white, which is what makes the scrim read as part of the page rather
than a panel laid over a photograph;
· the object-position keeps the horizon high in frame, where landmarks sit,
rather than centring on foreground.
Supply photographs untreated. Anything pre-graded gets corrected twice. */
.k-hero-page--country .k-hero-page__media img {
filter: saturate(0.82) contrast(0.96) brightness(1.04);
object-position: center 42%;
}
/* The leading third carries the country name, so it is held near-opaque and the
photograph is allowed to open up across the rest. Landmarks belong in the
outer two thirds of the frame (see countries/README.md). */
.k-hero-page--country::before {
background: linear-gradient(
100deg,
rgba(var(--k-surface-rgb), 0.96) 0%,
rgba(var(--k-surface-rgb), 0.90) 34%,
rgba(var(--k-surface-rgb), 0.55) 62%,
rgba(var(--k-surface-rgb), 0.22) 100%
);
}
/* Narrow viewports have no width for a horizontal fade, so the title would end
up over the open end of it. The wash tips downward instead and keeps a floor
under the whole line. */
@media (max-width: 700px) {
.k-hero-page--country::before {
background: linear-gradient(
168deg,
rgba(var(--k-surface-rgb), 0.93) 0%,
rgba(var(--k-surface-rgb), 0.86) 55%,
rgba(var(--k-surface-rgb), 0.72) 100%
);
}
}
html.dark .k-hero-page--country .k-hero-page__media img {
filter: saturate(0.78) brightness(0.62);
}
html.dark .k-hero-page--media__media img,
html.dark .k-hero-page--media .k-hero-page__media img {
filter: brightness(0.6) saturate(0.9);
}
/* ── Mosaic hero backdrop ─────────────────────────────────────────────────
For a page whose subject is its own photographs. Rows are fixed and the
columns flow off the trailing edge to be clipped, so the tiles keep a
sensible shape at every width instead of collapsing into stripes once the
grid can only fit two of them across. The tiles are ~400px originals asked
to fill ~150-260px, which is the one arrangement that keeps them sharp. */
.k-hero-page__mosaic {
position: absolute;
/* Bleeds a pixel past the box so the gap grid never shows a seam at the
edges when the hero height lands on a fraction. */
inset: -1px;
z-index: 0;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: column;
grid-auto-columns: clamp(140px, 15vw, 260px);
gap: 2px;
background: var(--k-gray-200);
}
@media (min-width: 900px) {
.k-hero-page__mosaic { grid-template-rows: repeat(3, 1fr); }
}
/* Twenty photographs carry far more detail than the one they replace, so the
thin end of the scrim has to hold more back or the band turns into noise
competing with the headline. */
.k-hero-page--mosaic::before {
background: linear-gradient(
100deg,
rgba(var(--k-surface-rgb), 0.97) 0%,
rgba(var(--k-surface-rgb), 0.93) 34%,
rgba(var(--k-surface-rgb), 0.72) 62%,
rgba(var(--k-surface-rgb), 0.48) 100%
);
}
/* A near-horizontal wash needs width to fade across. On a phone the title
runs the full container and would end up over the thin end of it, so the
gradient tips downward instead and keeps a floor under the whole line. */
@media (max-width: 700px) {
.k-hero-page--mosaic::before {
background: linear-gradient(
168deg,
rgba(var(--k-surface-rgb), 0.93) 0%,
rgba(var(--k-surface-rgb), 0.86) 55%,
rgba(var(--k-surface-rgb), 0.74) 100%
);
}
}
.k-hero-page__mosaic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Pulled back so the grid reads as one texture rather than twenty competing
photographs, and so the navy title keeps its contrast over the thin end
of the scrim. */
filter: grayscale(0.35) contrast(0.95);
}
/* Columns flow toward the trailing edge, so in RTL they must be clipped on
the left instead -- which is also the side the mirrored scrim thins out. */
[dir="rtl"] .k-hero-page__mosaic { direction: rtl; }
/* --k-gray-200 inverts to a dark navy in the dark palette, so the gap colour
needs no override here -- only the tiles do. */
html.dark .k-hero-page__mosaic img { filter: grayscale(0.4) brightness(0.55) saturate(0.85); }
/* Long-form prose: cap the measure so a full-width column stays readable. */
/* Page bodies run the full width of their container. Elementor's boxed inner
is sized from --content-width: min(100%, var(--container-max-width,1140px)),
and the Elementor kit declares --container-max-width on .e-con itself -- a
direct declaration, so setting it on an ancestor is ignored and it has to be
set on .e-con here. Doing it through Elementor's own variable also avoids a
specificity fight with custom-frontend.css, which loads after this file. */
.k-article { max-width: none; }
.k-article .e-con { --container-max-width: 100%; }
.k-article > * + * { margin-top: var(--k-s-5); }
/* ══════════════════════════════════════════════════════════════════════════
ENGAGEMENT CHAIN — image + statement beside a connected list of stages
Modelled on the chemexa-ghana "More Than a Trading Company" block.
══════════════════════════════════════════════════════════════════════════ */
.k-chain {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(2rem, 1rem + 4vw, 5rem);
align-items: start;
}
.k-chain > * { min-width: 0; }
@media (max-width: 900px) {
.k-chain { grid-template-columns: 1fr; }
}
/* The stage list is the taller column, so the visual rides alongside it.
The grid item has to stretch to the full row height for sticky to have any
travel — with `align-items: start` it would be exactly as tall as its own
content and never move. So the item stretches and the wrapper inside sticks. */
.k-chain__visual { align-self: stretch; }
.k-chain__visual-inner {
position: sticky;
top: calc(var(--k-header-h) + var(--k-s-8));
}
@media (max-width: 900px) {
.k-chain__visual { align-self: auto; }
.k-chain__visual-inner { position: static; }
}
.k-chain__figure { margin: 0; }
.k-chain__img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.k-chain__figure figcaption {
margin-top: var(--k-s-3);
font-size: var(--k-t-xs);
font-weight: var(--k-w-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--k-gray-400);
}
.k-chain__statement {
display: flex;
gap: var(--k-s-4);
align-items: flex-start;
margin-top: var(--k-s-6);
padding: var(--k-s-5);
background: var(--k-offwhite);
border: 1px solid var(--k-gray-200);
}
.k-chain__statement p {
font-size: var(--k-t-sm);
line-height: 1.7;
color: var(--k-gray-500);
}
.k-chain__statement-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 2px;
color: var(--k-accent);
}
.k-chain__cta { margin-top: var(--k-s-6); }
/* ── Stages ── */
.k-chain__steps {
list-style: none;
margin: 0;
padding: 0;
}
.k-chain__step {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--k-s-6);
padding-bottom: var(--k-s-10);
}
.k-chain__step:last-child { padding-bottom: 0; }
.k-chain__marker {
position: relative;
display: flex;
justify-content: center;
}
/* Connector runs from one stage marker to the next, fading as it goes. */
.k-chain__marker::after {
content: '';
position: absolute;
top: 48px;
bottom: calc(-1 * var(--k-s-10));
width: 2px;
background: linear-gradient(180deg, rgba(201, 168, 76, 0.55), rgba(201, 168, 76, 0.08));
}
.k-chain__step:last-child .k-chain__marker::after { display: none; }
.k-chain__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--k-primary);
color: var(--k-accent);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.k-chain__dot svg { width: 21px; height: 21px; }
.k-chain__stage {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--k-accent);
margin-bottom: var(--k-s-2);
}
/* Arabic has no case and much tighter tracking tolerance. */
[dir="rtl"] .k-chain__stage { letter-spacing: 0; text-transform: none; }
.k-chain__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-2xl);
font-weight: var(--k-w-bold);
line-height: 1.25;
color: var(--k-gray-900);
margin-bottom: var(--k-s-3);
}
.k-chain__text {
font-size: var(--k-t-base);
line-height: 1.7;
color: var(--k-gray-500);
}
.k-chain__tags {
list-style: none;
margin: var(--k-s-5) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--k-s-3) var(--k-s-6);
}
.k-chain__tags li {
display: flex;
align-items: center;
gap: var(--k-s-2);
font-size: var(--k-t-sm);
font-weight: var(--k-w-semibold);
color: var(--k-gray-800);
}
.k-chain__tags svg {
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--k-accent);
}
/* ── Trust statement ──────────────────────────────────────────────────────
Was a bare centred paragraph on white. Now a proper pull-quote: oversized
gold quote mark, a rule, and an attribution line. */
.k-trust__inner {
position: relative;
max-width: 60rem;
margin-inline: auto;
padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem);
text-align: center;
background: var(--k-offwhite);
border-block: 1px solid var(--k-gray-200);
}
.k-trust__mark {
display: block;
font-family: var(--k-font-display);
font-size: 5rem;
line-height: 0.6;
color: var(--k-accent);
opacity: 0.5;
margin-bottom: var(--k-s-4);
}
.k-trust__rule {
width: 56px;
height: 2px;
background: var(--k-accent);
margin: var(--k-s-6) auto var(--k-s-4);
}
.k-trust__attrib {
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-gray-400);
}
[dir="rtl"] .k-trust__attrib { letter-spacing: 0; text-transform: none; }
/* ── Global network ── */
.k-global__top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 1rem + 4vw, 5rem);
align-items: start;
margin-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}
@media (max-width: 900px) {
.k-global__top { grid-template-columns: 1fr; }
}
.k-global__desc {
margin: var(--k-s-6) 0 var(--k-s-8);
font-size: var(--k-t-lg);
line-height: 1.75;
color: rgba(255, 255, 255, 0.72);
}
.k-global__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--k-s-6);
}
.k-global__point {
display: flex;
gap: var(--k-s-4);
align-items: flex-start;
padding-bottom: var(--k-s-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.k-global__point:last-child { border-bottom: 0; padding-bottom: 0; }
.k-global__point svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 3px;
color: var(--k-accent);
}
.k-global__point strong {
display: block;
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-semibold);
color: var(--k-white);
margin-bottom: var(--k-s-2);
}
.k-global__point span {
font-size: var(--k-t-sm);
line-height: 1.65;
color: rgba(255, 255, 255, 0.6);
}
/* Four figures now, not three. */
.k-global__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--k-s-8);
padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* ── Section rail (services / sectors) ────────────────────────────────────
Reuses the article contents rail, so both sticky columns behave alike. */
.k-section-nav .k-toc__heading {
letter-spacing: 0.08em;
color: var(--k-brand-ink);
font-size: var(--k-t-sm);
}
.k-section-nav .k-toc__link { padding-block: 0.6rem; }
/* Elementor's post-navigation widget puts a Prev/Next pair at the foot of
every service page. The sticky rail beside the content now does that job,
and the pair duplicated it. Hidden rather than deleted, so the widget is
still in the page and one line here brings it back. */
.page-child .elementor-post-navigation,
.page-child .post-navigation {
display: none;
}
/* Guard against any kit stylesheet still colouring the hero (see post.css). */
.k-hero-page .k-hero-page__title { color: var(--k-brand-ink); }
.k-hero-page .k-hero-page__desc { color: var(--k-gray-500); }
/* ── About page ───────────────────────────────────────────────────────────
The second line of the hero headline sits back a step so the first line
still carries the emphasis. */
.k-hero-page__title-soft {
color: var(--k-gray-500);
display: block;
}
html.dark .k-hero-page__title-soft { color: var(--k-gray-400); }
/* ── About: the page body ────────────────────────────────────────────────
The body is native HTML now (timeline, vision / mission, values, numbered
reasons); its structures are styled in content.css. */
/* ── Kreston Global: the page body ────────────────────────────────────────
The body is one Elementor blob -- intro prose, a divider, then the "In
Numbers" heading and its two icon rows -- so the split between the two
halves has to be made in CSS rather than by wrapping them in separate
template sections.
Selectors are structural rather than Elementor's generated element ids
(.elementor-element-0faea07 and friends), which change whenever the block
is rebuilt in the editor. */
/* The intro prose becomes its own off-white band. It breaks out of the
container to the full viewport width and then pads its text back to the
original column, so it reads as a section rather than a card floating in
the middle of the page. html already carries overflow-x: clip, so the
scrollbar's width cannot turn this into a horizontal scroll. */
.k-global-body .k-article > .k-block:first-child {
background: var(--k-offwhite);
/* width is pinned as well as the margins: the parent is a flex column, so
negative inline margins alone only slide the item left -- they do not
widen it past the track. */
width: 100vw;
max-width: none;
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50%);
padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
/* The band now does the separating, so the line-and-icon divider that used to
do it is redundant. */
.k-global-body .k-article .k-rule { display: none; }
/* The band runs to the top of the section, so the section's own top padding
would show as a white strip above it. */
.k-global-body { padding-top: 0; }
/* ==== about.css ==== */
/* ==========================================================================
Kreston Egypt — About Page (v3 — Premium Editorial)
========================================================================== */
/* ════════════════════════════════════════════════════════════════════════════
HERO — Large editorial with photo
════════════════════════════════════════════════════════════════════════════ */
.about-hero {
position: relative;
min-height: 85vh;
min-height: 85dvh;
display: flex;
align-items: flex-end;
background: var(--k-gray-900);
overflow: hidden;
padding-bottom: clamp(5rem, 4rem + 6vw, 9rem);
}
.about-hero__bg {
position: absolute;
inset: 0;
z-index: 1;
}
.about-hero__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.45;
}
.about-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(5,5,4,0.3) 0%,
rgba(5,5,4,0.15) 30%,
rgba(5,5,4,0.4) 60%,
rgba(11,29,58,0.95) 100%
);
}
.about-hero__content {
position: relative;
z-index: 10;
}
.about-hero__label {
display: inline-flex;
align-items: center;
gap: var(--k-s-4);
margin-bottom: var(--k-s-6);
}
.about-hero__label-line {
width: 40px;
height: 1.5px;
background: var(--k-accent);
}
.about-hero__label-text {
font-family: var(--k-font-heading);
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--k-accent);
}
.about-hero__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-hero);
font-weight: var(--k-w-black);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--k-white);
margin-bottom: var(--k-s-4);
}
.about-hero__title-accent {
color: var(--k-accent);
display: block;
}
.about-hero__subtitle {
font-family: var(--k-font-display);
font-size: var(--k-t-2xl);
font-style: italic;
color: rgba(255,255,255,0.5);
letter-spacing: 0.01em;
}
.about-hero__scroll {
position: absolute;
bottom: var(--k-s-8);
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--k-s-3);
color: rgba(255,255,255,0.35);
}
.about-hero__scroll-text {
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.about-hero__scroll-line {
width: 1px;
height: 36px;
background: linear-gradient(180deg, var(--k-accent), transparent);
animation: hero-scroll-pulse 2.5s ease-in-out infinite;
}
/* ════════════════════════════════════════════════════════════════════════════
INTRO — Editorial split
════════════════════════════════════════════════════════════════════════════ */
.about-intro {
background: var(--k-white);
padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
}
.about-intro__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 2rem + 5vw, 6rem);
align-items: start;
}
@media (min-width: 1024px) {
.about-intro__grid { grid-template-columns: 1fr 1fr; }
}
.about-intro__heading {
font-family: var(--k-font-heading);
font-size: var(--k-t-6xl);
font-weight: var(--k-w-black);
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--k-gray-900);
margin-top: var(--k-s-4);
}
.about-intro__heading-accent {
color: var(--k-primary);
display: block;
}
.about-intro__text {
font-size: var(--k-t-lg);
color: var(--k-gray-500);
line-height: 1.8;
}
.about-intro__text p { margin-bottom: var(--k-s-6); }
/* ════════════════════════════════════════════════════════════════════════════
LEADERSHIP MESSAGE — Full-width editorial
════════════════════════════════════════════════════════════════════════════ */
.about-leader {
background: var(--k-offwhite);
padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
}
.about-leader__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 2rem + 5vw, 6rem);
align-items: center;
}
@media (min-width: 1024px) {
.about-leader__grid { grid-template-columns: 0.8fr 1.2fr; }
}
.about-leader__image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}
.about-leader__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-leader__image-accent {
position: absolute;
bottom: -16px;
right: -16px;
width: 120px;
height: 120px;
border: 1px solid var(--k-accent);
opacity: 0.2;
z-index: -1;
}
.about-leader__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-5xl);
font-weight: var(--k-w-black);
line-height: 1.0;
letter-spacing: -0.03em;
color: var(--k-gray-900);
margin-top: var(--k-s-4);
margin-bottom: var(--k-s-6);
}
.about-leader__title-accent {
color: var(--k-primary);
display: block;
}
.about-leader__divider {
width: 48px;
height: 2px;
background: var(--k-accent);
margin-bottom: var(--k-s-8);
}
.about-leader__quote {
font-family: var(--k-font-display);
font-size: var(--k-t-xl);
font-style: italic;
line-height: 1.6;
color: var(--k-gray-600);
border-left: 3px solid var(--k-accent);
padding-left: var(--k-s-6);
margin-bottom: var(--k-s-6);
}
.about-leader__text {
font-size: var(--k-t-base);
color: var(--k-gray-500);
line-height: 1.8;
margin-bottom: var(--k-s-4);
}
.about-leader__author {
display: flex;
align-items: center;
gap: var(--k-s-5);
margin-top: var(--k-s-8);
padding-top: var(--k-s-8);
border-top: 1px solid var(--k-gray-200);
}
.about-leader__author-line {
width: 40px;
height: 2px;
background: var(--k-accent);
flex-shrink: 0;
}
.about-leader__author-name {
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-bold);
color: var(--k-gray-900);
margin-bottom: 2px;
}
.about-leader__author-position {
font-size: var(--k-t-sm);
color: var(--k-primary);
font-weight: var(--k-w-medium);
}
.about-leader__author-firm {
font-size: var(--k-t-xs);
color: var(--k-gray-400);
margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════════════════
VALUES — Four pillars
════════════════════════════════════════════════════════════════════════════ */
.about-values {
background: var(--k-white);
padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
}
.about-values__header {
text-align: center;
max-width: 700px;
margin-inline: auto;
margin-bottom: clamp(3rem, 2rem + 5vw, 5rem);
}
.about-values__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 768px) {
.about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.about-values__grid { grid-template-columns: repeat(4, 1fr); }
}
.about-value {
padding: var(--k-s-8) 0;
border-top: 1px solid var(--k-gray-200);
}
.about-value__num {
font-family: var(--k-font-heading);
font-size: var(--k-t-3xl);
font-weight: var(--k-w-black);
color: var(--k-gray-200);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: var(--k-s-5);
}
.about-value__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-bold);
color: var(--k-gray-900);
margin-bottom: var(--k-s-4);
}
.about-value__line {
width: 32px;
height: 2px;
background: var(--k-accent);
margin-bottom: var(--k-s-5);
}
.about-value__desc {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
line-height: 1.7;
}
/* ════════════════════════════════════════════════════════════════════════════
TIMELINE — Journey
════════════════════════════════════════════════════════════════════════════ */
.about-timeline {
background: var(--k-offwhite);
padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
}
.about-timeline__header {
text-align: center;
max-width: 700px;
margin-inline: auto;
margin-bottom: clamp(3rem, 2rem + 5vw, 5rem);
}
.about-timeline__track {
max-width: 800px;
margin-inline: auto;
position: relative;
padding-left: clamp(3rem, 2rem + 4vw, 6rem);
}
.about-timeline__track::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--k-gray-200);
}
.about-timeline__item {
position: relative;
padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}
.about-timeline__item:last-child { padding-bottom: 0; }
.about-timeline__marker {
position: absolute;
left: calc(-1 * clamp(3rem, 2rem + 4vw, 6rem));
top: 0;
display: flex;
align-items: center;
gap: var(--k-s-3);
}
.about-timeline__marker::before {
content: '';
width: 10px;
height: 10px;
background: var(--k-accent);
border-radius: 50%;
flex-shrink: 0;
}
.about-timeline__year {
font-family: var(--k-font-heading);
font-size: var(--k-t-sm);
font-weight: var(--k-w-bold);
color: var(--k-primary);
letter-spacing: 0.02em;
}
.about-timeline__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-bold);
color: var(--k-gray-900);
margin-bottom: var(--k-s-3);
}
.about-timeline__desc {
font-size: var(--k-t-base);
color: var(--k-gray-400);
line-height: 1.7;
}
/* ════════════════════════════════════════════════════════════════════════════
TEAM — Large portraits grid
════════════════════════════════════════════════════════════════════════════ */
.about-team {
background: var(--k-white);
padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
}
.about-team__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 1.5rem + 3vw, 3rem);
}
@media (min-width: 768px) {
.about-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.about-team__grid { grid-template-columns: repeat(3, 1fr); }
}
.about-team__member {
text-decoration: none;
}
.about-team__member-image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
margin-bottom: var(--k-s-5);
}
.about-team__member-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: all var(--k-duration-slow) var(--k-ease);
}
.about-team__member:hover .about-team__member-image img {
filter: grayscale(0%);
transform: scale(1.03);
}
.about-team__member-name {
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-bold);
color: var(--k-gray-900);
margin-bottom: var(--k-s-1);
}
.about-team__member-position {
font-size: var(--k-t-sm);
color: var(--k-primary);
font-weight: var(--k-w-medium);
margin-bottom: var(--k-s-3);
}
.about-team__member-bio {
font-size: var(--k-t-sm);
color: var(--k-gray-400);
line-height: 1.6;
margin-bottom: var(--k-s-3);
}
.about-team__member-links {
display: flex;
gap: var(--k-s-3);
}
.about-team__member-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--k-gray-200);
color: var(--k-gray-400);
text-decoration: none;
transition: all var(--k-duration-fast) var(--k-ease);
}
.about-team__member-link:hover {
background: var(--k-primary);
border-color: var(--k-primary);
color: var(--k-white);
}
/* ════════════════════════════════════════════════════════════════════════════
GLOBAL — Dark navy section
════════════════════════════════════════════════════════════════════════════ */
.about-global {
background: var(--k-primary);
padding: clamp(5rem, 4rem + 6vw, 9rem) 0;
overflow: hidden;
}
.about-global__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 2rem + 5vw, 6rem);
align-items: center;
}
@media (min-width: 1024px) {
.about-global__grid { grid-template-columns: 1.2fr 0.8fr; }
}
.about-global__title {
font-family: var(--k-font-heading);
font-size: var(--k-t-5xl);
font-weight: var(--k-w-black);
line-height: 1.0;
letter-spacing: -0.03em;
color: var(--k-white);
}
.about-global__desc {
font-size: var(--k-t-lg);
color: rgba(255,255,255,0.6);
line-height: 1.8;
margin-top: var(--k-s-6);
margin-bottom: var(--k-s-8);
}
.about-global__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--k-s-6);
}
.about-global__stat { text-align: center; }
.about-global__stat-num {
font-family: var(--k-font-heading);
font-size: var(--k-t-4xl);
font-weight: var(--k-w-black);
color: var(--k-accent);
line-height: 1;
letter-spacing: -0.03em;
}
.about-global__stat-label {
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-top: var(--k-s-2);
}
.about-global__visual {
display: flex;
align-items: center;
justify-content: center;
}
.about-global__map {
width: 100%;
max-width: 500px;
}
/* ════════════════════════════════════════════════════════════════════════════
MOBILE
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.about-hero { min-height: 75vh; }
.about-hero__title { font-size: clamp(2.5rem, 10vw, 4rem); }
.about-intro__heading { font-size: clamp(2rem, 8vw, 3rem); }
.about-leader__title { font-size: clamp(2rem, 7vw, 2.75rem); }
.about-global__stats { grid-template-columns: 1fr; gap: var(--k-s-8); }
}
/* ==== content.css ==== */
/* ==========================================================================
Kreston Egypt — Page body content (native replacement for Elementor)
==========================================================================
Page bodies are plain HTML now. Each former Elementor top-level container
is a .k-block; inside, a small vocabulary of structures replaces the
widgets that used to draw them: .k-steps (numbered items), .k-timeline,
.k-vm (vision / mission), .k-values, .k-numbers (stat tiles), .k-cards,
.k-flags, .k-faq, .k-iconlist, .k-social, .k-figure, .k-rule.
Everything is written with logical properties so the Arabic side mirrors
without an RTL sheet, and with the semantic surface / ink tokens so dark
mode needs nothing extra. Markup carries no newlines, so wpautop leaves it
alone.
========================================================================== */
/* ── Rhythm ─────────────────────────────────────────────────────────────── */
.k-article .k-block + .k-block { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.k-article .k-block > * + * { margin-top: var(--k-s-5); }
.k-article .k-block p { margin-bottom: 0; }
.k-article .k-block > h2 + *,
.k-article .k-block > h3 + * { margin-top: var(--k-s-4); }
.k-article .k-block h2 {
font-family: var(--k-font-heading);
font-size: var(--k-t-3xl);
font-weight: var(--k-w-bold);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--k-gray-900);
margin: 0;
}
.k-article .k-block > * + h2 { margin-top: var(--k-s-12); }
.k-article .k-block h3 {
font-family: var(--k-font-heading);
font-size: var(--k-t-xl);
font-weight: var(--k-w-semibold);
line-height: 1.3;
color: var(--k-gray-900);
margin: 0;
}
.k-article .k-block > * + h3 { margin-top: var(--k-s-8); }
.k-article .k-block h4 { font-size: var(--k-t-lg); font-weight: var(--k-w-semibold); margin: 0; }
/* Prose lists only. `.k-article .k-block ol` (0,2,1) outranks the component
selectors below (`.k-article .k-timeline`, 0,2,0), so without this guard it
reset the margin and indent of every list-based structure on the page --
which is why the timeline sat flush against the paragraph above it. A list
that carries a class is a component and styles itself. */
.k-article .k-block ul:not([class]),
.k-article .k-block ol:not([class]) {
margin: 0;
padding-inline-start: 1.25rem;
}
.k-article .k-block li:not([class]) { margin-bottom: var(--k-s-2); line-height: 1.7; color: var(--k-gray-600); }
.k-article .k-block li:not([class])::marker { color: var(--k-accent); }
.k-eyebrow {
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k-accent);
}
.k-lead { font-size: var(--k-t-xl); color: var(--k-gray-500); line-height: 1.6; }
.k-rule {
border: 0;
height: 1px;
background: var(--k-gray-200);
margin-block: var(--k-s-10);
}
.k-actions { margin-top: var(--k-s-6); }
/* Inline icons (Font Awesome paths inlined at conversion time). */
.k-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
flex-shrink: 0;
}
/* Tables typed into the old text widgets. */
.k-article .k-block table { width: 100%; border-collapse: collapse; font-size: var(--k-t-sm); }
.k-article .k-block th,
.k-article .k-block td { padding: var(--k-s-3) var(--k-s-4); border-bottom: 1px solid var(--k-gray-200); text-align: start; vertical-align: top; }
.k-article .k-block th { font-weight: var(--k-w-semibold); color: var(--k-gray-900); }
/* ── Grid columns ──────────────────────────────────────────────────────── */
.k-grid__col > * + * { margin-top: var(--k-s-5); }
/* ── Figures ───────────────────────────────────────────────────────────── */
.k-figure { margin: 0; }
.k-figure img { max-width: 100%; height: auto; display: block; }
.k-figure--center { text-align: center; }
.k-figure--center img { margin-inline: auto; }
.k-figure figcaption { margin-top: var(--k-s-2); font-size: var(--k-t-sm); color: var(--k-gray-500); }
/* ── Numbered items (services, reasons) ────────────────────────────────── */
.k-article .k-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
}
.k-steps__item {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr);
column-gap: var(--k-s-5);
padding-block: var(--k-s-8);
border-top: 1px solid var(--k-gray-200);
margin: 0;
}
.k-steps__item:first-child { border-top: 0; padding-top: 0; }
.k-steps__item:last-child { padding-bottom: 0; }
.k-steps__num {
font-family: var(--k-font-heading);
font-size: var(--k-t-2xl);
font-weight: var(--k-w-black);
line-height: 1;
letter-spacing: -0.02em;
color: var(--k-accent);
padding-top: 0.2em;
}
.k-steps__body > * + * { margin-top: var(--k-s-4); }
.k-article .k-block .k-steps__title { font-size: var(--k-t-xl); font-weight: var(--k-w-bold); }
.k-steps__body p { color: var(--k-gray-600); }
@media (min-width: 768px) {
.k-steps__item { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--k-s-8); }
.k-steps__num { font-size: var(--k-t-3xl); }
}
/* ── Milestones ────────────────────────────────────────────────────────── */
.k-article .k-timeline {
list-style: none;
margin: var(--k-s-12) 0 var(--k-s-6);
padding: 0 0 0 1.75rem;
padding-inline: 1.75rem 0;
position: relative;
display: grid;
gap: var(--k-s-6);
}
.k-timeline::before {
content: "";
position: absolute;
inset-block: 6px;
inset-inline-start: 6px;
width: 2px;
background: var(--k-gray-200);
}
.k-timeline__item { position: relative; margin: 0; }
.k-timeline__item::before {
content: "";
position: absolute;
inset-inline-start: calc(-1.75rem + 0);
top: 0.35em;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--k-brand-ink);
box-shadow: 0 0 0 4px var(--k-surface-2);
}
.k-timeline__year {
display: block;
font-family: var(--k-font-heading);
font-size: var(--k-t-2xl);
font-weight: var(--k-w-black);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--k-brand-ink);
}
.k-article .k-block .k-timeline__title { margin-top: var(--k-s-2); }
.k-article .k-block .k-timeline__text { margin-top: var(--k-s-2); font-size: 0.9375rem; line-height: 1.5; color: var(--k-gray-500); }
@media (min-width: 768px) {
.k-article .k-timeline {
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: var(--k-s-5);
padding: 0;
margin-block: var(--k-s-12) var(--k-s-6);
}
.k-timeline::before { inset: 6px 0 auto; height: 2px; width: auto; }
.k-timeline__item { padding-top: var(--k-s-8); text-align: center; }
.k-timeline__item::before { inset-inline-start: 50%; top: 0; transform: translateX(-50%); }
[dir="rtl"] .k-timeline__item::before { transform: translateX(50%); }
.k-article .k-block .k-timeline__text { max-width: 22ch; margin-inline: auto; }
}
/* ── Vision / Mission ──────────────────────────────────────────────────── */
.k-vm {
display: grid;
grid-template-columns: 1fr;
gap: var(--k-s-6);
margin-top: var(--k-s-10);
}
@media (min-width: 768px) {
.k-vm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-vm--single { grid-template-columns: minmax(0, 1fr); }
}
/* The pair reads as two statements, not two boxes: a tinted ground, the gold
rule running down the reading edge (logical, so it swaps sides in Arabic),
and the statement set a step larger than body copy. The cards stretch to the
taller of the two, so the shorter one no longer leaves a ragged gap. */
.k-vm__card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
padding-inline-start: clamp(2rem, 1.5rem + 2vw, 3rem);
background: var(--k-gray-50);
border: 1px solid var(--k-gray-200);
overflow: hidden;
transition: border-color var(--k-duration-base) var(--k-ease),
box-shadow var(--k-duration-base) var(--k-ease);
}
.k-vm__card::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 3px;
background: linear-gradient(var(--k-accent), var(--k-accent-light));
}
.k-vm__card:hover {
border-color: var(--k-gray-300);
box-shadow: var(--k-shadow-md);
}
.k-article .k-block .k-vm__title {
font-size: var(--k-t-2xl);
font-weight: var(--k-w-bold);
letter-spacing: -0.015em;
color: var(--k-brand-ink);
margin: 0 0 var(--k-s-5);
}
/* A short gold dash sets the title off from the statement below it. */
.k-article .k-block .k-vm__title::after {
content: "";
display: block;
width: 2.25rem;
height: 2px;
margin-top: var(--k-s-4);
background: var(--k-accent);
}
.k-vm__text { flex: 1; }
.k-vm__text p { color: var(--k-gray-600); line-height: 1.8; font-size: var(--k-t-lg); }
.k-vm__text p + p { margin-top: var(--k-s-3); }
html.dark .k-vm__card { background: var(--k-surface-2); }
/* ── Values ────────────────────────────────────────────────────────────── */
.k-values { margin-top: var(--k-s-10); }
/* Every cell is placed explicitly. Left to auto-placement the number drifted
onto a row of its own above the title: the title and description carry
definite columns, which the placement algorithm resolves before the
auto-placed number, and it was pushed to the next row. Baseline alignment
then sets the number, the title and the description's first line on one
line, so the row reads across instead of stepping down. */
.k-values__item {
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
column-gap: var(--k-s-3);
row-gap: var(--k-s-2);
align-items: baseline;
padding-block: var(--k-s-6);
border-top: 1px solid var(--k-gray-200);
}
.k-values__num {
grid-area: 1 / 1;
font-family: var(--k-font-heading);
font-size: var(--k-t-sm);
font-weight: var(--k-w-black);
letter-spacing: 0.02em;
color: var(--k-accent);
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
/* Placed explicitly rather than left to auto-placement: the description
carries a definite `grid-column`, which the placement algorithm resolves
first and then pushes an auto-placed sibling past -- the title landed in the
description's own track, leaving the middle column empty and the number
stranded 212px from the word it labels. */
.k-article .k-block .k-values__title {
grid-area: 1 / 2;
font-size: var(--k-t-lg);
font-weight: var(--k-w-bold);
line-height: 1.4;
}
.k-values__text { grid-area: 2 / 2; }
.k-values__text p { color: var(--k-gray-500); line-height: 1.75; font-size: var(--k-t-base); }
/* The number is a marker for the title, not a column of its own, so it sits
tight against it; only the title/description split needs a real gutter.
The old 3rem + 2rem gap + 13rem title track pushed the description 320px in
and left a visible hole between "01" and the word beside it. */
@media (min-width: 900px) {
.k-values__item {
grid-template-columns: 1.75rem minmax(0, 10rem) minmax(0, 1fr);
column-gap: var(--k-s-3);
padding-block: var(--k-s-8);
}
.k-values__text {
grid-area: 1 / 3;
padding-inline-start: var(--k-s-6);
}
}
/* ── Stat tiles (Kreston Global in numbers) ────────────────────────────── */
.k-numbers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--k-s-6) var(--k-s-4);
margin-top: var(--k-s-8);
}
@media (min-width: 768px) {
.k-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-s-10) var(--k-s-6); }
}
.k-number { text-align: center; padding-inline: var(--k-s-2); }
.k-number .k-icon {
display: block;
width: 4rem;
height: 4rem;
padding: 1.1rem;
margin-inline: auto;
border-radius: 50%;
background: var(--k-brand-ink);
color: var(--k-white);
box-sizing: border-box;
}
.k-number__value {
display: block;
margin-top: var(--k-s-4);
font-family: var(--k-font-heading);
font-size: var(--k-t-4xl);
font-weight: var(--k-w-black);
line-height: 1;
letter-spacing: -0.03em;
color: var(--k-gray-900);
font-variant-numeric: tabular-nums;
}
.k-number__unit { font-size: 0.6em; color: var(--k-accent); margin-inline-start: 0.08em; }
.k-number__label {
display: block;
margin-top: var(--k-s-2);
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-gray-500);
}
.k-number__text { display: block; margin-top: var(--k-s-1); font-size: var(--k-t-sm); color: var(--k-gray-400); }
/* ── Cards (services, media) ───────────────────────────────────────────── */
.k-cards { margin-top: var(--k-s-8); }
.k-article .k-block .k-card__title { margin: 0; }
.k-card__excerpt p { font-size: var(--k-t-sm); line-height: 1.65; color: var(--k-gray-500); }
.k-card__excerpt p + p { margin-top: var(--k-s-2); }
.k-card__cta {
display: block;
margin-top: auto;
padding-top: var(--k-s-5);
font-size: var(--k-t-sm);
font-weight: var(--k-w-semibold);
color: var(--k-brand-ink);
}
.k-card__body > .k-card__title + .k-card__excerpt { margin-top: var(--k-s-3); }
.k-card__link { color: inherit; text-decoration: none; }
/* ── Country flags ───────────────────────────────────────────────────────
Each country is a card rather than a bare icon. The flags were previously
clipped into circles, which is the wrong shape for a flag: a circular mask
cuts the corners off a square source and takes the distinguishing marks with
them -- Kenya's shield, the stars on several West African flags -- leaving a
row of similar-looking discs. They are shown square-on now, rounded just
enough to sit comfortably on the card, so each flag is fully visible.
The source images are square 250px renderings, so cover and contain give the
same result here; cover is kept so a non-square file added later still fills
its box rather than letterboxing. */
.k-article .k-flags {
list-style: none;
margin: var(--k-s-8) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: var(--k-s-5);
}
.k-flags__item { margin: 0; }
.k-flags__item a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--k-s-4);
height: 100%;
padding: var(--k-s-6) var(--k-s-4);
text-align: center;
text-decoration: none;
color: var(--k-gray-700);
background: var(--k-surface-2);
border: 1px solid var(--k-gray-200);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: transform var(--k-duration-fast) var(--k-ease),
box-shadow var(--k-duration-fast) var(--k-ease),
border-color var(--k-duration-fast) var(--k-ease),
color var(--k-duration-fast) var(--k-ease);
}
/* Same lift the rest of the site uses for a card, with the gold edge that
marks the thing you are pointing at. :focus-visible is included so the
keyboard sees what the mouse sees. */
.k-flags__item a:hover,
.k-flags__item a:focus-visible {
transform: translateY(-4px);
border-color: var(--k-accent);
box-shadow: var(--k-shadow-lg);
color: var(--k-brand-ink);
}
.k-flags__item img {
width: 3rem;
height: 3rem;
object-fit: cover;
border-radius: 7px;
/* A little depth so the flag reads as an object on the card rather than a
sticker printed on it. */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
background: var(--k-surface-2);
}
.k-flags__name {
font-size: var(--k-t-sm);
font-weight: var(--k-w-semibold);
line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
.k-flags__item a { transition: box-shadow var(--k-duration-fast) var(--k-ease), border-color var(--k-duration-fast) var(--k-ease); }
.k-flags__item a:hover,
.k-flags__item a:focus-visible { transform: none; }
}
/* ── FAQ ───────────────────────────────────────────────────────────────── */
.k-faq { border-bottom: 1px solid var(--k-gray-200); }
.k-faq__item { border-top: 1px solid var(--k-gray-200); padding-block: var(--k-s-4); }
.k-faq__q {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--k-s-4);
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-semibold);
line-height: 1.4;
color: var(--k-gray-900);
}
.k-faq__q::-webkit-details-marker { display: none; }
.k-faq__q::after {
content: "+";
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
display: grid;
place-items: center;
border: 1px solid var(--k-gray-300);
border-radius: 50%;
font-weight: var(--k-w-regular);
color: var(--k-gray-500);
transition: transform var(--k-duration-fast) var(--k-ease), background var(--k-duration-fast) var(--k-ease);
}
.k-faq__item[open] > .k-faq__q::after { content: "–"; background: var(--k-brand-ink); border-color: var(--k-brand-ink); color: var(--k-white); }
.k-faq__a { padding-top: var(--k-s-3); }
.k-faq__a > * + * { margin-top: var(--k-s-3); }
.k-faq__a p { color: var(--k-gray-500); line-height: 1.75; font-size: var(--k-t-base); }
/* ── Icon lists, social links, icon boxes, author ──────────────────────── */
.k-article .k-iconlist { list-style: none; margin: 0; padding: 0; }
.k-iconlist li { display: flex; align-items: flex-start; gap: var(--k-s-3); margin-bottom: var(--k-s-2); }
.k-iconlist .k-icon { color: var(--k-accent); margin-top: 0.3em; }
.k-iconlist a { color: inherit; }
.k-article .k-social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--k-s-3); }
.k-social li { margin: 0; }
.k-social a {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--k-gray-200);
border-radius: 50%;
color: var(--k-gray-600);
transition: all var(--k-duration-fast) var(--k-ease);
}
.k-social a:hover { background: var(--k-brand-ink); border-color: var(--k-brand-ink); color: var(--k-white); }
.k-iconbox { display: flex; gap: var(--k-s-4); align-items: flex-start; }
.k-iconbox__icon {
width: 2.75rem;
height: 2.75rem;
padding: 0.75rem;
box-sizing: border-box;
border-radius: 50%;
background: var(--k-accent-dim);
color: var(--k-brand-ink);
}
.k-iconbox__body > * + * { margin-top: var(--k-s-2); }
.k-author { display: flex; gap: var(--k-s-6); align-items: center; }
.k-author__img { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.k-author__bio { color: var(--k-gray-500); }
/* ── Dark mode touch-ups: the brand-ink tile flips to accent for contrast ── */
html.dark .k-number .k-icon { background: var(--k-accent); color: var(--k-black); }
html.dark .k-flags__item img { background: var(--k-gray-100); }
/* ── Late refinements ──────────────────────────────────────────────────── */
/* A numbered run after prose or a list needs its own breathing room. */
.k-article .k-block > * + .k-steps { margin-top: var(--k-s-10); }
/* The heading over the stat tiles sits on their axis. */
.k-article .k-block:has(> .k-numbers) > h2 { text-align: center; }
/* Links inside prose read as links. */
.k-article .k-block p a { color: var(--k-brand-ink); text-decoration: underline; text-underline-offset: 0.15em; }
/* ── Milestones: revealed one at a time ─────────────────────────────────────
The entries come in along the rail rather than all at once. DOM order is
the reading order, and the rail is laid out with `grid-auto-flow: column`
under the document's own direction -- so the first entry is leftmost in
English and rightmost in Arabic, and stepping through the DOM runs
left-to-right in one and right-to-left in the other with no second rule.
Only the slide-in offset has to be mirrored.
Guarded on html.js: without JavaScript nothing adds .is-in, so the entries
must never start hidden. main.js also force-reveals after two seconds. */
html.js .k-timeline__item {
opacity: 0;
transform: translateY(16px);
transition: opacity 300ms var(--k-ease-out), transform 300ms var(--k-ease-out);
}
html.js .k-timeline.is-in .k-timeline__item { opacity: 1; transform: none; }
.k-timeline.is-in .k-timeline__item:nth-child(1) { transition-delay: 0ms; }
.k-timeline.is-in .k-timeline__item:nth-child(2) { transition-delay: 60ms; }
.k-timeline.is-in .k-timeline__item:nth-child(3) { transition-delay: 120ms; }
.k-timeline.is-in .k-timeline__item:nth-child(4) { transition-delay: 180ms; }
.k-timeline.is-in .k-timeline__item:nth-child(5) { transition-delay: 240ms; }
.k-timeline.is-in .k-timeline__item:nth-child(6) { transition-delay: 300ms; }
.k-timeline.is-in .k-timeline__item:nth-child(n+7) { transition-delay: 360ms; }
/* The dot is drawn on the item, so it fades in with it; the rail behind them
draws itself in first, in the same direction. */
html.js .k-timeline::before { transform-origin: left center; }
html.js[dir="rtl"] .k-timeline::before { transform-origin: right center; }
@media (min-width: 768px) {
/* Horizontal rail: the entries arrive from the side they travel towards. */
html.js .k-timeline__item { transform: translateX(-22px); }
html.js[dir="rtl"] .k-timeline__item { transform: translateX(22px); }
html.js .k-timeline.is-in .k-timeline__item { transform: none; }
html.js .k-timeline::before { transform: scaleX(0); transition: transform 700ms var(--k-ease-out); }
html.js .k-timeline.is-in::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
html.js .k-timeline__item,
html.js .k-timeline::before {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── Media Center: the gallery of network events ───────────────────────────
These entries are not links, so nothing here advertises a click -- no lift,
no border highlight, no pointer. What twenty of them did need was an edge:
as bare photo-over-text they ran together into one long column of pictures
with no telling where an entry ended, so each now sits in the same hairline
card the rest of the site uses for a listing. The newest entry leads at full
width, which gives the wall a place to start. Selectors are scoped under
.k-block because the generic prose rules for p and h3 there outrank a lone
component class. */
.k-article .k-block .k-media {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
margin-top: var(--k-s-6);
align-items: stretch;
}
@media (min-width: 700px) {
.k-article .k-block .k-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.k-article .k-block .k-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.k-media__item {
display: flex;
flex-direction: column;
margin: 0;
background: var(--k-surface-2);
border: 1px solid var(--k-gray-200);
}
/* 3:2 matches the source photographs, so nothing is cropped to fit. */
.k-media__figure {
margin: 0;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--k-gray-100);
border-bottom: 1px solid var(--k-gray-200);
}
.k-media__figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Fills the rest of the card so entries of differing text length still end
flush with each other along the row. */
.k-media__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--k-s-6);
}
.k-article .k-block .k-media__date {
margin: 0 0 var(--k-s-3);
font-size: var(--k-t-xs);
font-weight: var(--k-w-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k-accent);
font-variant-numeric: tabular-nums;
}
.k-article .k-block .k-media__title {
margin: 0;
font-family: var(--k-font-heading);
font-size: var(--k-t-lg);
font-weight: var(--k-w-bold);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--k-gray-900);
text-wrap: balance;
}
/* Fourteen of the twenty entries carry no date, so without this the titles
along a row start at two different heights. The rule stands in for the
missing eyebrow and keeps every card on one baseline. */
.k-media__body > .k-media__title:first-child::before {
content: "";
display: block;
width: 1.75rem;
height: 2px;
margin-bottom: calc(var(--k-s-3) + 0.35em);
background: var(--k-accent);
opacity: 0.55;
}
.k-media__text { margin-top: var(--k-s-4); }
.k-article .k-block .k-media__text p {
margin: 0;
font-size: var(--k-t-sm);
line-height: 1.7;
color: var(--k-gray-500);
}
.k-article .k-block .k-media__text p + p { margin-top: var(--k-s-3); }
/* ── The lead entry ───────────────────────────────────────────────────────
The newest event runs the width of the grid with the photograph beside the
text rather than above it, so the page opens on something with a shape of
its own instead of the first of twenty identical tiles. Logical properties
throughout: in Arabic the photograph takes the right-hand half. */
@media (min-width: 700px) {
.k-article .k-block .k-media > .k-media__item:first-child {
grid-column: 1 / -1;
flex-direction: row;
}
.k-media__item:first-child .k-media__figure {
flex: 0 0 48%;
aspect-ratio: auto;
border-bottom: 0;
border-inline-end: 1px solid var(--k-gray-200);
}
.k-media__item:first-child .k-media__body {
justify-content: center;
padding: clamp(var(--k-s-6), 3vw, var(--k-s-10));
}
.k-article .k-block .k-media__item:first-child .k-media__title {
font-size: var(--k-t-2xl);
line-height: 1.25;
}
.k-article .k-block .k-media__item:first-child .k-media__text p {
font-size: var(--k-t-base);
}
}
/* ── Document download link ───────────────────────────────────────────────
Appended to a page whose body is a flipbook canvas: the document is the
page's whole content, and until now there was no way to reach the file
itself -- not for a reader who wants to keep it, and not for a crawler. */
.k-doc-link {
margin-top: var(--k-s-8);
}
.k-article .k-doc-link a {
display: inline-flex;
align-items: baseline;
gap: var(--k-s-3);
padding: var(--k-s-4) var(--k-s-6);
background: var(--k-surface-2);
border: 1px solid var(--k-gray-200);
border-inline-start: 3px solid var(--k-accent);
font-weight: var(--k-w-semibold);
color: var(--k-gray-900);
text-decoration: none;
transition: border-color var(--k-duration-fast) var(--k-ease),
box-shadow var(--k-duration-fast) var(--k-ease);
}
.k-article .k-doc-link a:hover {
border-color: var(--k-accent);
box-shadow: var(--k-shadow-md);
}
.k-doc-link__meta {
font-size: var(--k-t-xs);
font-weight: var(--k-w-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k-gray-400);
font-variant-numeric: tabular-nums;
}
/* ── Country key facts ───────────────────────────────────────────────────
Every country page carries the same capital / area / currency trio. Stored
as three lines separated by
, it reads as loose prose that happens to
be bold in places. A two-column definition list gives the labels a column
of their own, so the values line up and the block scans as data.
grid-template-columns uses max-content for the labels: the column is only
as wide as the longest one, in either language, without a fixed width to
maintain. border-inline-start puts the accent rule on the correct side when
the page flips to RTL. */
.k-facts {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--k-s-2) var(--k-s-8);
margin: var(--k-s-8) 0;
padding: var(--k-s-5) var(--k-s-6);
background: var(--k-gray-50);
border: 1px solid var(--k-gray-200);
border-inline-start: 3px solid var(--k-accent);
border-radius: 10px;
}
.k-facts dt {
color: var(--k-gray-500);
font-size: var(--k-t-sm);
font-weight: var(--k-w-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
align-self: baseline;
}
.k-facts dd {
margin: 0;
color: var(--k-gray-800);
font-weight: var(--k-w-medium);
}
/* Below ~380px the two columns start squeezing the values onto two lines each;
one column per row costs less height than the wrapping does. */
@media (max-width: 380px) {
.k-facts {
grid-template-columns: 1fr;
gap: 0;
padding: var(--k-s-4) var(--k-s-5);
}
.k-facts dt { margin-top: var(--k-s-3); }
.k-facts dt:first-child { margin-top: 0; }
}
/* ==== maps.css ==== */
/* ==========================================================================
Kreston Egypt — Country Maps
One drawing per country, inlined by kreston_map_html() and painted entirely
from the design tokens — which is the whole reason the SVG is inlined rather
than linked. Every tone is the brand navy mixed into --k-surface, so dark
mode is mostly a consequence of dark.css flipping that surface; the block at
the foot of this file only re-balances the mixes and the hover label.
Layering. The regions are drawn once, as real elements, so each is
hoverable. The `