/* =========================================================================
Next Maroc Digital — design system
Cinematic, editorial, story-driven. Every animation is gated behind the
html.js class (added by base.html) and prefers-reduced-motion, so the
site stays fully readable without JavaScript or with motion disabled.
========================================================================= */
/* -------------------------------------------------------------------------
0. Fonts — self-hosted (static/fonts/, see the README there).
Inter Tight (display, brand) and Inter (text) from the corporate design,
IBM Plex Sans Arabic (Arabic), JetBrains Mono (code).
Nothing is requested from Google any more, so no visitor IP reaches Google
for typography. Files and unicode ranges are the ones Google's CSS API
served to the former in base.html, limited to the latin, latin-ext
and arabic subsets the three site languages need. font-display: swap keeps
text visible while a file loads.
------------------------------------------------------------------------- */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-400-700-normal-latin.260c81a4759b.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-400-700-normal-latin-ext.1ad231aac0a8.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter Tight";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/inter-tight-500-700-normal-latin.f5af7a761c2b.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter Tight";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/inter-tight-500-700-normal-latin-ext.496654ac82a3.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/jetbrains-mono-400-normal-latin.b636a65da4f0.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/jetbrains-mono-400-normal-latin-ext.bd4781a31b42.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/jetbrains-mono-400-normal-latin.b636a65da4f0.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/jetbrains-mono-400-normal-latin-ext.bd4781a31b42.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-400-normal-arabic.4fa3d81d41ab.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-400-normal-latin.4767e1197706.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-400-normal-latin-ext.8f47bcb71f45.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-500-normal-arabic.106892212ea7.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-500-normal-latin.80ebc672c915.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-500-normal-latin-ext.71f4c6840dd1.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-600-normal-arabic.64891a810259.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-600-normal-latin.f417eeb0d15e.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-600-normal-latin-ext.73f6208660e9.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-700-normal-arabic.a4390abc98c2.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-700-normal-latin.8d04403cf599.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Arabic";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/ibm-plex-sans-arabic-700-normal-latin-ext.8f4b1a9530f1.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* -------------------------------------------------------------------------
1. Tokens
------------------------------------------------------------------------- */
:root {
--bg: #f3f5f8;
--surface: #ffffff;
--surface-2: #e8ecf1;
--ink: #0b1d33;
--ink-2: #3a4350;
--muted: #5a6472;
--line: #e3e7ec;
--line-2: #c9d0d8;
--dark: #0b1d33;
--dark-2: #122640;
--dark-3: #1b2f4a;
--on-dark: #ffffff;
--on-dark-2: #c9d2de;
--on-dark-muted: #8f9bab;
--dark-line: rgba(255, 255, 255, 0.09);
--blue: #0b1d33;
--blue-2: #0f7a52;
--blue-glow: #2fb07c;
--teal: #0f7a52;
--teal-2: #2fb07c;
--teal-ink: #0f7a52;
--teal-soft: #e6f3ed;
--grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--blue) 100%); /* flat navy: the brand has no gradients */
/* contextual tokens — redefined inside dark contexts below */
--heading: var(--ink);
--text: var(--ink-2);
--muted-c: var(--muted);
--line-c: var(--line);
--accent-text: var(--teal-ink);
--font-display: "Inter Tight", "Inter Display", "Inter", system-ui, sans-serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--font-ar: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
--container-w: 1240px;
--gutter: clamp(20px, 4vw, 40px);
--header-h: 76px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 16px;
--shadow-sm: 0 2px 12px rgba(11, 29, 51, 0.06);
--shadow-md: 0 24px 60px -24px rgba(11, 29, 51, 0.28);
--shadow-glow: 0 18px 50px -16px rgba(47, 176, 124, 0.45);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
--dur: 1s;
}
.cta-card,
.aside-card-accent,
.solution-card-other,
.site-footer {
--heading: #ffffff;
--text: var(--on-dark-2);
--muted-c: var(--on-dark-muted);
--line-c: var(--dark-line);
--accent-text: var(--teal-2);
}
/* -------------------------------------------------------------------------
2. Base
------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* the open menu locks the page scroll; the padding stands in for the vanished
scrollbar (--nav-sbw, measured by main.js) so nothing slides sideways */
body.nav-open { overflow: hidden; padding-inline-end: var(--nav-sbw, 0px); }
::selection { background: var(--teal); color: #fff; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
h1, h2, h3, h4 {
margin: 0 0 0.5em;
line-height: 1.15;
font-weight: 600;
color: var(--heading);
letter-spacing: -0.02em;
text-wrap: balance;
}
p { margin: 0 0 1em; color: var(--text); }
:focus-visible {
outline: 2px solid #1e63c7;
outline-offset: 3px;
border-radius: 4px;
}
.container {
width: 100%;
max-width: var(--container-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* -------------------------------------------------------------------------
3. Typography
------------------------------------------------------------------------- */
.display {
font-size: clamp(2.4rem, 4.8vw, 4.15rem);
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 600;
}
.h-display {
font-size: clamp(1.9rem, 4vw, 3.2rem);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 600;
}
.lead {
font-size: clamp(1.05rem, 1.35vw, 1.22rem);
line-height: 1.65;
max-width: 56ch;
color: var(--text);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-text);
}
.eyebrow-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px rgba(47, 176, 124, 0.18);
animation: pulse 2.4s ease-in-out infinite;
}
.index {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.12em;
color: var(--muted-c);
}
.index::after {
content: "";
width: 40px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
/* Read highlight: words light up as the reading line passes */
.read .rw { opacity: 0.28; transition: opacity 0.45s ease; }
.read .rw.on { opacity: 1; }
/* -------------------------------------------------------------------------
4. Buttons (magnetic, shine sweep, ripple)
------------------------------------------------------------------------- */
.btn {
--tx: 0px;
--ty: 0px;
--lift: 0px;
--press: 1;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 24px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
transform: translate3d(var(--tx), calc(var(--ty) + var(--lift)), 0) scale(var(--press));
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.btn > * { position: relative; z-index: 2; }
.btn:hover { --lift: -2px; }
.btn:active { --press: 0.97; }
.btn-arrow {
font-size: 1.05em;
transition: transform 0.4s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(5px); }
.btn::before {
content: "";
position: absolute;
inset: -1px;
z-index: 1;
background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
transform: translateX(-130%) skewX(-12deg);
transition: transform 0.9s var(--ease);
pointer-events: none;
}
.btn:hover::before { transform: translateX(130%) skewX(-12deg); }
.btn-outline::before { background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.18) 50%, transparent 68%); }
.ripple {
position: absolute;
z-index: 1;
border-radius: 50%;
background: currentColor;
opacity: 0.25;
transform: scale(0);
animation: ripple 0.75s ease-out forwards;
pointer-events: none;
}
.btn-cta {
background: var(--grad-brand);
color: #fff;
box-shadow: 0 10px 30px -12px rgba(11, 29, 51, 0.6);
}
.btn-cta:hover { box-shadow: var(--shadow-glow), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; }
.btn-light {
background: #fff;
color: var(--ink);
}
.btn-light:hover { background: var(--teal-soft); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5); }
.btn-ghost {
background: rgba(255, 255, 255, 0.55);
border-color: rgba(11, 29, 51, 0.14);
color: var(--ink);
backdrop-filter: blur(8px);
}
.btn-ghost:hover {
background: #fff;
border-color: var(--teal);
}
.btn-outline {
background: transparent;
border-color: var(--line-2);
color: var(--ink);
}
.btn-outline:hover {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.btn-sm { padding: 10px 18px; font-size: 0.88rem; }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
/* -------------------------------------------------------------------------
5. Header
------------------------------------------------------------------------- */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
z-index: 200;
background: linear-gradient(90deg, var(--teal-2), var(--blue-glow));
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
.site-header {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 100;
padding-top: 18px; /* a little air above the capsule, so it sits with the hero rather than on the edge */
transition: transform 0.7s var(--ease);
}
@media (max-width: 575.98px) { .site-header { padding-top: 12px; } }
.site-header.is-hidden { transform: translateY(-130%); }
body.nav-open .site-header { transform: none; padding-inline-end: var(--nav-sbw, 0px); }
.site-header .container { padding: 0 12px; }
/* The shell, after the "Margin" Framer template: one small white capsule,
centred, holding only the logo and a "Menu" pill, at every screen size.
The Menu pill expands the capsule into a card listing the pages, the hub
sub-pages (chevrons), the language switch and the CTA. Its radius is half
its closed height, so it reads as a capsule closed and a rounded card open. */
.nav-shell {
--nav-fg: var(--ink);
--nav-fg-inv: #fff;
--nav-muted: var(--muted);
--nav-line: rgba(11, 29, 51, 0.16);
--nav-hover: var(--surface-2);
--nav-radius: 26px;
--nav-item-h: 36px;
--dd-line: rgba(11, 29, 51, 0.12);
--dd-hover: var(--surface-2);
--dd-icon-bg: var(--teal-soft);
--dd-icon-fg: var(--teal-ink);
--dd-accent: var(--teal-ink);
position: relative;
isolation: isolate;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px;
width: 100%;
max-width: 400px;
margin-inline: auto;
padding: 6px;
border-radius: var(--nav-radius);
border: 1px solid rgba(11, 29, 51, 0.07); /* a hairline, not an outline: the shadow carries the edge */
background: #fff;
color: var(--nav-fg);
box-shadow: 0 1px 2px rgba(11, 29, 51, 0.06), 0 10px 30px -8px rgba(11, 29, 51, 0.16);
transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
/* while main.js animates the card between its closed and open sizes: the
animated width may pass the class's max-width, and the list is clipped */
.nav-shell.is-morphing { max-width: none; overflow: hidden; }
.site-header.is-scrolled .nav-shell { box-shadow: 0 1px 2px rgba(11, 29, 51, 0.06), 0 14px 40px -6px rgba(11, 29, 51, 0.22); }
/* hover on the closed capsule: it lifts a touch and its shadow deepens */
@media (hover: hover) {
body:not(.nav-open) .nav-shell:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(11, 29, 51, 0.06), 0 18px 44px -10px rgba(11, 29, 51, 0.28);
}
.nav-shell .navbar-brand { transition: opacity 0.3s ease; }
.nav-shell .navbar-brand:hover { opacity: 0.72; }
}
.navbar-brand {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
color: inherit;
}
.nav-shell .navbar-brand { height: var(--nav-item-h); padding: 0 10px; }
/* smaller than the footer logo: the capsule is 52px tall */
.nav-shell .navbar-brand .brand-logo--full { height: 24px; }
.nav-shell .navbar-brand .brand-logo--mark { height: 22px; }
/* the "Menu" pill (label + hamburger); reads "Fermer" + cross while open */
.navbar-toggler {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
height: var(--nav-item-h);
padding-inline: 14px 12px;
border-radius: 999px;
border: 1px solid var(--nav-line);
background: transparent;
color: inherit;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
/* hover: the pill fills navy and the hamburger bars spread a little */
body:not(.nav-open) .navbar-toggler:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
body:not(.nav-open) .navbar-toggler:hover .navbar-toggler-icon::before { top: -6px; }
body:not(.nav-open) .navbar-toggler:hover .navbar-toggler-icon::after { top: 6px; }
body.nav-open .navbar-toggler:hover { background: var(--surface-2); border-color: var(--nav-line); }
body.nav-open .navbar-toggler { background: var(--nav-hover); border-color: transparent; }
/* both labels share one grid cell, so the pill keeps the width of the longer one */
.navbar-toggler-label { display: grid; justify-items: center; }
.navbar-toggler-label > span { grid-area: 1 / 1; }
.navbar-toggler .is-open,
body.nav-open .navbar-toggler .is-closed { visibility: hidden; }
body.nav-open .navbar-toggler .is-open { visibility: visible; }
body.is-rtl .navbar-toggler { font-family: var(--font-ar); font-size: 0.8rem; letter-spacing: 0; }
.navbar-toggler-icon {
position: relative;
display: block;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: background 0.2s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: "";
position: absolute;
left: 0;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.navbar-toggler-icon::before { top: -5px; }
.navbar-toggler-icon::after { top: 5px; }
body.nav-open .navbar-toggler-icon { background: transparent; }
body.nav-open .navbar-toggler-icon::before { top: 0; transform: rotate(45deg); }
body.nav-open .navbar-toggler-icon::after { top: 0; transform: rotate(-45deg); }
/* the expanded list, under the logo row; the page behind is dimmed.
Without JavaScript the list is simply always open. */
.navbar-collapse { display: none; transition: opacity 0.25s ease; }
/* just opened: the card is still growing, so clicks wait until it settles (main.js) */
.navbar-collapse.is-settling { pointer-events: none; }
/* closing: the list fades while the card folds around it, then hides (main.js) */
.navbar-collapse.is-closing { opacity: 0; pointer-events: none; transition-duration: 0.18s; }
.navbar-collapse.show,
html:not(.js) .navbar-collapse {
flex-basis: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 0 2px;
max-height: calc(100vh - 100px);
max-height: calc(100dvh - 100px);
overflow-y: auto;
overscroll-behavior: contain;
animation: overlay-in 0.3s var(--ease) both;
}
html:not(.js) .navbar-toggler { display: none; }
body.nav-open::after,
body.nav-closing::after {
content: "";
position: fixed;
inset: 0;
z-index: 98; /* above the cookie banner (95), under the header (100) */
background: rgba(11, 29, 51, 0.24);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: overlay-in 0.4s var(--ease) both;
}
body.nav-closing:not(.nav-open)::after { pointer-events: none; animation: overlay-out 0.36s var(--ease) both; }
.main-nav { display: flex; flex-direction: column; gap: 1px; }
.main-nav .nav-link {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 6px 12px;
border-radius: 14px;
font-size: 0.94rem;
font-weight: 500;
color: var(--nav-fg);
transition: background 0.25s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active { background: var(--nav-hover); }
/* the current page: a green point before its label */
.main-nav .nav-link.active::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
}
.navbar-collapse.show .main-nav > li { animation: nav-rise 0.45s var(--ease) both; }
.navbar-collapse.show .main-nav > li:nth-child(2) { animation-delay: 0.04s; }
.navbar-collapse.show .main-nav > li:nth-child(3) { animation-delay: 0.08s; }
.navbar-collapse.show .main-nav > li:nth-child(4) { animation-delay: 0.12s; }
.navbar-collapse.show .main-nav > li:nth-child(5) { animation-delay: 0.16s; }
.navbar-collapse.show .main-nav > li:nth-child(6) { animation-delay: 0.2s; }
.navbar-collapse.show .nav-actions { animation: nav-rise 0.45s var(--ease) 0.24s both; }
@keyframes nav-rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes nav-swap {
from { opacity: 0; transform: translateX(var(--swap-from, 16px)); }
to { opacity: 1; transform: none; }
}
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 2px 2px;
border-top: 1px solid var(--nav-line);
}
.lang-switch {
flex: none;
display: inline-flex;
height: var(--nav-item-h);
padding: 3px;
border-radius: 999px;
border: 1px solid var(--nav-line);
}
.lang-form { display: flex; }
.lang-btn {
height: 100%;
border: 0;
background: transparent;
color: var(--nav-muted);
padding: 0 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.3s var(--ease), color 0.25s ease;
}
.lang-btn:hover { color: var(--nav-fg); background: var(--nav-hover); }
.lang-btn.active { color: var(--nav-fg-inv); background: var(--nav-fg); }
/* the pill shell gets a pill button: the one exception to the radius-sm rule of section 24 */
.nav-shell .nav-cta {
flex: 1 1 auto;
height: var(--nav-item-h);
padding: 0 16px;
border-radius: 999px;
font-size: 0.84rem;
box-shadow: none;
}
.nav-shell .nav-cta:hover { box-shadow: 0 10px 24px -10px rgba(11, 29, 51, 0.45); }
/* -------------------------------------------------------------------------
5b. Hub sub-lists (nav)
One holds the hub link, a chevron button and the
list of its sub-pages, which the chevron expands inline as a plain
one-column list. The hub link itself goes to the hub page.
------------------------------------------------------------------------- */
.has-dropdown {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.has-dropdown > .nav-link { flex: 1 1 0; min-width: 0; }
.has-dropdown.is-open > .nav-link { background: var(--nav-hover); }
.nav-sub-toggle {
flex: none;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 14px;
border: 1px solid var(--nav-line);
background: transparent;
color: inherit;
font-size: 0.85rem;
cursor: pointer;
transition: transform 0.45s var(--ease), background 0.3s ease, border-color 0.3s ease;
}
.nav-sub-toggle:hover { background: var(--nav-hover); }
.has-dropdown.is-open .nav-sub-toggle { transform: rotate(180deg); background: var(--nav-hover); border-color: transparent; }
.nav-dropdown { flex-basis: 100%; display: none; }
.has-dropdown.is-open .nav-dropdown {
display: block;
margin-inline-start: 17px; /* under the label, after the active dot */
padding: 2px 0 6px;
padding-inline-start: 8px;
border-inline-start: 1px solid var(--nav-line);
animation: nav-rise 0.35s var(--ease) both;
}
.nav-dropdown-list { display: flex; flex-direction: column; gap: 1px; }
.nav-sub-link {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 8px;
border-radius: 12px;
font-size: 0.88rem;
font-weight: 500;
color: inherit;
transition: background 0.25s ease;
}
.nav-sub-link:hover { background: var(--dd-hover); }
.nav-sub-icon {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--dd-icon-bg);
color: var(--dd-icon-fg);
font-size: 0.85rem;
transition: background 0.3s ease, color 0.3s ease;
}
.nav-sub-link:hover .nav-sub-icon { background: var(--grad-brand); color: #fff; }
/* last row of a panel: the contact page, for a need the list does not name */
.nav-sub-other { margin-top: 4px; color: var(--dd-accent); }
.nav-sub-other .btn-arrow { margin-inline-start: auto; transition: transform 0.35s var(--ease); }
.nav-sub-other:hover .btn-arrow { transform: translateX(5px); }
/* teaser entry ("soon"): blurred, tagged, linked to nothing */
.nav-sub-link.is-soon { cursor: default; opacity: 0.55; }
.nav-sub-link.is-soon:hover { background: transparent; }
.nav-sub-link.is-soon:hover .nav-sub-icon { background: var(--dd-icon-bg); color: var(--dd-icon-fg); }
.nav-sub-link.is-soon .nav-sub-icon,
.nav-sub-link.is-soon .nav-sub-text { filter: blur(1.2px); }
.nav-sub-tag {
flex: none;
margin-inline-start: auto;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--dd-line);
font-family: var(--font-mono);
font-style: normal;
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: var(--dd-accent);
}
/* the hub template also prints a short label (IA / AI); the list always has room for the full one */
.nav-label-short { display: none; }
/* -------------------------------------------------------------------------
5c. Wide screens: the open capsule grows into a wide, low card. The pages
sit in one row, the language switch and the CTA in a footer row, and an
open hub drops its sub-pages into a tinted panel under the row, its groups
side by side as columns of equal width, each listed top to bottom.
.has-dropdown becomes display: contents so its label joins the row and its
panel can wrap below it (the ::after spacer forces the break); the chevron
button is hidden here and drawn inside the label pill instead.
------------------------------------------------------------------------- */
@media (min-width: 960px) {
body.nav-open .nav-shell,
html:not(.js) .nav-shell { max-width: 880px; }
.navbar-collapse.show,
html:not(.js) .navbar-collapse { gap: 10px; padding: 10px 4px 4px; }
.main-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.main-nav::after { content: ""; order: 1; flex-basis: 100%; }
.main-nav > li:not(.has-dropdown) { flex: none; }
.has-dropdown { display: contents; }
.has-dropdown > .nav-link { flex: none; }
.main-nav .nav-link {
min-height: 38px;
padding: 6px 14px;
border-radius: 999px;
white-space: nowrap;
}
/* one control, not two: hovering or focusing the label opens the panel and a
click goes to the hub page (main.js), so the separate chevron button goes
away and a chevron joins the pill instead */
.nav-sub-toggle { display: none; }
.has-dropdown > .nav-link::after {
content: "";
flex: none;
width: 11px;
height: 11px;
opacity: 0.5;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5.5l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5.5l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 0.35s var(--ease), opacity 0.3s ease;
}
.has-dropdown.is-open > .nav-link::after { transform: rotate(180deg); opacity: 1; }
.has-dropdown.is-open .nav-dropdown {
order: 2;
flex-basis: 100%;
margin: 8px 0 0;
padding: 10px;
border: 0;
border-radius: 18px;
background: rgba(11, 29, 51, 0.035);
}
/* one column per group (Solutions: by sector, by function), sharing the
width equally; a hub without groups flows its one list into two balanced
columns instead, so its panel is not left half empty either */
.nav-sub-groups {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 0 8px;
}
.nav-sub-col:only-child .nav-dropdown-list { display: block; columns: 2; column-gap: 8px; }
.nav-sub-col:only-child .nav-dropdown-list > li { break-inside: avoid; padding-bottom: 1px; }
/* the columns are wide: the "soon" tag stays beside its label */
.nav-dropdown .nav-sub-tag { margin-inline-start: 0; }
/* switching straight from one hub to the other (main.js): the tinted panel
stays and eases to its new height, its content slides in from the side
of the new label instead of the whole panel rising again */
.has-dropdown.is-swapped-in .nav-dropdown { animation: none; overflow: hidden; }
.has-dropdown.is-swapped-in .nav-dropdown-inner { animation: nav-swap 0.34s var(--ease) both; }
.nav-dropdown .nav-sub-link { padding: 6px 10px; }
.nav-dropdown .nav-sub-link:hover { background: #fff; }
.nav-sub-other { display: inline-flex; margin-top: 8px; }
.nav-actions { justify-content: space-between; padding: 10px 4px 2px; border-top-color: rgba(11, 29, 51, 0.08); }
.nav-shell .nav-cta { flex: none; }
}
/* -------------------------------------------------------------------------
6. Flash messages (fixed toasts under the header)
------------------------------------------------------------------------- */
.flash-stack {
position: fixed;
top: calc(var(--header-h) + 12px);
inset-inline: 0;
z-index: 90;
display: grid;
justify-items: center;
gap: 10px;
padding: 0 var(--gutter);
pointer-events: none;
}
.alert {
pointer-events: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 500;
box-shadow: 0 20px 50px -20px rgba(11, 29, 51, 0.35);
animation: flash-in 0.6s var(--ease) both;
}
.alert i { font-size: 1.15rem; }
.alert-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.alert-danger, .alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-info, .alert-warning { background: var(--teal-soft); color: #0b5c3e; border: 1px solid #bfe3d2; }
.contact-form .alert { border-radius: 14px; animation: none; box-shadow: none; }
/* -------------------------------------------------------------------------
7. Atmosphere: living canvas, orbs, grid, grain
------------------------------------------------------------------------- */
.hero-bg,
.section-bg,
.cta-bg {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
filter: saturate(0.85) brightness(1.04);
}
.hero-video-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(243, 245, 248, 0.9), rgba(243, 245, 248, 0.66) 40%, rgba(243, 245, 248, 0.96)),
radial-gradient(70% 60% at 30% 50%, rgba(243, 245, 248, 0.72), transparent 70%);
}
.ambient-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.22;
filter: saturate(1.1);
}
/* Stock-footage panels: a clip in a glass frame, lit by its own measured accent */
.clip {
--clip-accent: var(--teal);
--clip-base: var(--dark-2);
position: relative;
margin: 0;
overflow: hidden;
border-radius: 24px;
background: var(--clip-base);
box-shadow:
0 0 0 1px rgba(11, 29, 51, 0.08),
0 30px 80px -30px color-mix(in srgb, var(--clip-accent) 60%, transparent),
0 20px 50px -30px rgba(11, 29, 51, 0.4);
transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.clip-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.clip-landscape { aspect-ratio: 16 / 10; }
.clip-portrait { aspect-ratio: 9 / 16; }
.clip-glow {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--clip-base) 70%, #000));
box-shadow: inset 0 0 90px color-mix(in srgb, var(--clip-accent) 28%, transparent);
pointer-events: none;
}
.clip-frame {
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
pointer-events: none;
}
.clip:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--clip-accent) 60%, transparent), 0 40px 100px -30px color-mix(in srgb, var(--clip-accent) 75%, transparent), 0 20px 50px -30px rgba(11, 29, 51, 0.4); }
/* portrait clip beside inner page headlines */
.page-hero-grid {
display: grid;
gap: 40px;
align-items: center;
}
.page-hero-media { display: none; }
@media (min-width: 992px) {
.page-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
.page-hero-media { display: block; }
.hero-panel {
width: 100%;
max-width: 300px;
transform: rotate(-3deg);
animation: float 9s ease-in-out infinite;
}
.hero-panel:hover { transform: rotate(0deg) scale(1.02); animation-play-state: paused; }
}
.hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.75;
-webkit-mask-image: radial-gradient(ellipse at 58% 45%, #000 35%, transparent 85%);
mask-image: radial-gradient(ellipse at 58% 45%, #000 35%, transparent 85%);
}
.page-hero .hero-canvas { opacity: 0.5; }
.orb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.6;
will-change: transform;
}
.orb-1 {
width: min(70vw, 820px);
height: min(70vw, 820px);
top: -28%;
inset-inline-start: -14%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.65), transparent 62%);
animation: drift 22s ease-in-out infinite alternate;
}
.orb-2 {
width: min(55vw, 640px);
height: min(55vw, 640px);
bottom: -30%;
inset-inline-end: -10%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.55), transparent 62%);
animation: drift 26s ease-in-out infinite alternate-reverse;
}
.orb-3 {
width: min(36vw, 420px);
height: min(36vw, 420px);
top: 30%;
inset-inline-end: 22%;
background: radial-gradient(circle, rgba(47, 176, 124, 0.35), transparent 62%);
animation: drift 30s ease-in-out infinite alternate;
opacity: 0.45;
}
.orb-a {
width: min(60vw, 700px);
height: min(60vw, 700px);
top: -20%;
inset-inline-end: -16%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.4), transparent 62%);
animation: drift 28s ease-in-out infinite alternate;
}
.orb-c1 {
width: 60%;
padding-top: 60%;
top: -40%;
inset-inline-start: -15%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.7), transparent 62%);
}
.orb-c2 {
width: 50%;
padding-top: 50%;
bottom: -45%;
inset-inline-end: -10%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.6), transparent 62%);
}
.grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(11, 29, 51, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 29, 51, 0.06) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(ellipse at 55% 40%, #000 25%, transparent 72%);
mask-image: radial-gradient(ellipse at 55% 40%, #000 25%, transparent 72%);
}
.noise {
position: absolute;
inset: 0;
opacity: 0.08;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* -------------------------------------------------------------------------
8. Hero (home)
------------------------------------------------------------------------- */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
padding: calc(var(--header-h) + 48px) 0 72px;
background: var(--bg);
color: var(--ink);
}
@media (min-width: 768px) {
.hero { min-height: min(100svh, 960px); padding-top: calc(var(--header-h) + 32px); }
}
.hero-grid {
position: relative;
display: grid;
gap: 56px;
align-items: center;
}
@media (min-width: 992px) {
.hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 40px; }
}
.hero-copy { max-width: 780px; }
.hero-copy .display { margin-bottom: 28px; }
.hero-copy .lead { margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-visual {
position: relative;
width: 100%;
max-width: 520px;
aspect-ratio: 1 / 1;
margin-inline: auto;
}
.hero-halo {
position: absolute;
inset: 10%;
border-radius: 50%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.35), rgba(15, 122, 82, 0.12) 45%, transparent 70%);
filter: blur(30px);
}
.hero-layer {
position: absolute;
transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.layer-1 { top: 8%; inset-inline-start: 2%; }
.layer-2 { top: 20%; inset-inline-end: 0; }
.layer-3 { bottom: 20%; inset-inline-start: 0; }
.layer-4 { bottom: 6%; inset-inline-end: 4%; }
.layer-core {
top: 50%;
inset-inline-start: 50%;
transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0);
}
body.is-rtl .layer-core {
transform: translate3d(calc(50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0);
}
.hero-card {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 20px 14px 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.28), inset 0 1px 0 #fff;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--ink);
font-weight: 600;
font-size: 0.98rem;
white-space: nowrap;
animation: float 7s ease-in-out infinite;
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.hero-card:hover { border-color: rgba(15, 122, 82, 0.6); box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.28), 0 0 40px -10px rgba(15, 122, 82, 0.45); }
.hero-card i {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--teal-soft);
color: var(--teal-ink);
font-size: 1.3rem;
}
.card-2 { animation-delay: -2s; }
.card-3 { animation-delay: -4s; }
.card-4 { animation-delay: -1s; }
.hero-core {
position: relative;
display: grid;
place-items: center;
width: 190px;
height: 190px;
border-radius: 50%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.18), rgba(255, 255, 255, 0.55) 70%);
border: 1px solid rgba(11, 29, 51, 0.08);
box-shadow: inset 0 0 60px rgba(15, 122, 82, 0.18), 0 30px 60px -30px rgba(11, 29, 51, 0.25);
}
.hero-core::before {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 68%, rgba(47, 176, 124, 0.9) 86%, transparent 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
animation: spin 9s linear infinite;
}
.hero-core::after {
content: "";
position: absolute;
inset: -46px;
border-radius: 50%;
border: 1px dashed rgba(11, 29, 51, 0.14);
animation: spin 60s linear infinite reverse;
}
.brand-mark-lg {
font-size: 1.5rem;
padding: 12px 20px;
border-radius: 16px;
box-shadow: 0 0 60px rgba(15, 122, 82, 0.4);
animation: core-glow 3.2s ease-in-out infinite;
}
.hero-scroll-hint {
position: absolute;
bottom: 28px;
left: 50%;
width: 1px;
height: 56px;
background: rgba(11, 29, 51, 0.14);
overflow: hidden;
transform: translateX(-50%);
}
.hero-scroll-hint span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40%;
background: var(--teal);
animation: hint 2.2s var(--ease) infinite;
}
@media (max-width: 767px) { .hero-scroll-hint { display: none; } }
@media (max-width: 639px) {
.hero-visual { max-width: 400px; }
.hero-card { padding: 10px 14px 10px 10px; font-size: 0.86rem; gap: 10px; border-radius: 14px; }
.hero-card i { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }
.hero-core { width: 140px; height: 140px; }
.hero-core::after { inset: -30px; }
.brand-mark-lg { font-size: 1.2rem; padding: 10px 16px; }
}
/* scroll-driven fade of the hero as the story starts (desktop, modern browsers) */
@supports (animation-timeline: scroll()) {
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
.hero-grid {
animation: hero-exit linear both;
animation-timeline: scroll(root);
animation-range: 0 90vh;
}
}
}
/* -------------------------------------------------------------------------
9. Marquee
------------------------------------------------------------------------- */
.marquee {
position: relative;
padding: 18px 0;
background: var(--surface);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
color: var(--muted);
overflow: hidden;
}
.marquee::before,
.marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: clamp(60px, 10vw, 160px);
z-index: 2;
pointer-events: none;
}
.marquee::before {
inset-inline-start: 0;
background: linear-gradient(to right, var(--surface), transparent);
}
.marquee::after {
inset-inline-end: 0;
background: linear-gradient(to left, var(--surface), transparent);
}
body.is-rtl .marquee::before { background: linear-gradient(to left, var(--surface), transparent); }
body.is-rtl .marquee::after { background: linear-gradient(to right, var(--surface), transparent); }
.marquee-track {
display: flex;
width: max-content;
animation: marquee 46s linear infinite;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 12px;
margin-inline-end: 56px;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.3s ease;
}
.marquee-item:hover { color: var(--ink); }
.marquee-item i { color: var(--teal-ink); font-size: 1rem; }
body.is-rtl .marquee-track { animation-name: marquee-rtl; }
/* -------------------------------------------------------------------------
10. Stats
------------------------------------------------------------------------- */
.stats {
padding: clamp(48px, 7vw, 80px) 0;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.stats-grid {
display: grid;
gap: 28px;
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.stat {
position: relative;
padding: 6px 0 6px 22px;
padding-inline: 22px 0;
border-inline-start: 2px solid var(--teal);
transition: padding 0.5s var(--ease), border-color 0.4s ease;
}
.stat::before {
content: "";
position: absolute;
inset: -12px -16px;
border-radius: 18px;
background: radial-gradient(60% 80% at 10% 50%, rgba(15, 122, 82, 0.12), transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.stat:hover { padding-inline-start: 30px; border-color: var(--blue-2); }
.stat:hover::before { opacity: 1; }
.stat-num {
display: block;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
transition: transform 0.5s var(--ease);
}
.stat:hover .stat-num {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transform: translateX(4px);
}
body.is-rtl .stat:hover .stat-num { transform: translateX(-4px); }
.stat-label {
display: block;
margin-top: 12px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
/* -------------------------------------------------------------------------
11. Sections
------------------------------------------------------------------------- */
.section {
position: relative;
padding: clamp(72px, 10vw, 128px) 0;
}
.section-tint {
position: relative;
isolation: isolate;
/* clip (not hidden): hidden would turn the section into the scroll container
for sticky children and stop them from sticking */
overflow: clip;
background: var(--surface-2);
color: var(--ink);
}
.section-head {
max-width: 780px;
margin-bottom: clamp(40px, 6vw, 64px);
}
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 0; }
.section-intro {
margin-top: 18px;
font-size: 1.05rem;
max-width: 60ch;
}
.section-cta {
display: flex;
justify-content: center;
margin-top: 44px;
}
/* -------------------------------------------------------------------------
12. Page hero (inner pages)
------------------------------------------------------------------------- */
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--bg);
color: var(--ink);
padding: calc(var(--header-h) + clamp(56px, 9vw, 112px)) 0 clamp(56px, 8vw, 96px);
}
.page-hero-inner { max-width: 860px; }
.page-hero .display { margin-bottom: 24px; }
.page-hero .lead { margin-bottom: 0; }
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 24px;
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.08em;
color: var(--muted);
}
.breadcrumb a { color: var(--ink-2); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--blue); }
.crumb-sep { opacity: 0.5; }
/* -------------------------------------------------------------------------
13. Cards: spotlight, 3D tilt, present mode, services bento, values
------------------------------------------------------------------------- */
.spot { position: relative; overflow: hidden; }
.spot::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(15, 122, 82, 0.18), transparent 45%);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }
.tilt {
--rx: 0deg;
--ry: 0deg;
--lift: 0px;
--sc: 1;
transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0) scale(var(--sc));
transform-style: preserve-3d;
transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.35s ease, opacity 0.5s ease, filter 0.5s ease;
}
.bento {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
grid-auto-flow: dense;
perspective: 1400px;
}
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.service-card {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 300px;
padding: 28px;
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid var(--line);
}
.service-card::after {
content: "";
position: absolute;
inset-inline-end: -30%;
bottom: -40%;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.12), transparent 65%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
@property --angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
.service-card:hover {
border-color: transparent;
background: var(--surface);
box-shadow:
0 0 36px -8px color-mix(in srgb, var(--accent, var(--teal)) 55%, transparent),
0 30px 60px -30px color-mix(in srgb, var(--accent, var(--teal)) 50%, transparent),
var(--shadow-md);
}
/* the glowing ring is a rotating layer of its own (transform only, no repaint of the card);
the solution / AI hub cards (section 25) carry the same span */
.service-card > .service-glow,
.solution-card > .service-glow {
position: absolute;
inset: -1px;
z-index: 2;
border-radius: inherit;
padding: 2px;
overflow: hidden;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.service-card > .service-glow::before,
.solution-card > .service-glow::before {
content: "";
position: absolute;
inset: -100%;
background: conic-gradient(from 0deg, var(--accent, var(--teal)), var(--blue-glow) 30%, transparent 55%, var(--accent, var(--teal)) 80%, var(--accent, var(--teal)));
animation: spin 3.5s linear infinite;
animation-play-state: paused;
will-change: transform;
}
.service-card:hover > .service-glow,
.service-card.is-source > .service-glow,
.solution-card:hover > .service-glow { opacity: 1; }
.service-card:hover > .service-glow::before,
.service-card.is-source > .service-glow::before,
.solution-card:hover > .service-glow::before { animation-play-state: running; }
.bento .service-card { will-change: transform; }
.bento .spot::before { will-change: transform; }
.service-card:hover::after { opacity: 1; }
.service-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.service-index {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.1em;
color: var(--muted-c);
transition: color 0.3s ease;
}
.service-card:hover .service-index { color: var(--teal-ink); }
.service-icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--teal-soft);
color: var(--teal-ink);
font-size: 1.35rem;
transition: transform 0.6s var(--ease), background 0.35s ease, color 0.35s ease, box-shadow 0.5s ease;
}
.service-card:hover .service-icon {
transform: rotate(-8deg) scale(1.12);
color: #fff;
box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent, var(--teal)) 80%, transparent);
}
.service-card h3 {
margin: 6px 0 0;
font-size: 1.22rem;
letter-spacing: -0.015em;
}
.service-body { position: relative; flex: 1; min-height: 158px; }
.service-summary,
.service-card p {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
}
.service-summary { transition: opacity 0.35s ease, transform 0.5s var(--ease); }
.service-more {
position: absolute;
inset: 0 0 auto 0;
margin: 0;
font-size: 0.84rem;
line-height: 1.5;
color: var(--ink);
opacity: 0;
transform: translateY(12px);
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
pointer-events: none;
transition: opacity 0.45s ease 0.05s, transform 0.6s var(--ease) 0.05s;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 0.9rem;
font-weight: 600;
color: var(--blue);
transition: opacity 0.3s ease, transform 0.4s var(--ease);
}
.service-link i { transition: transform 0.35s var(--ease); }
.service-card:hover .service-link i { transform: translateX(4px); }
body.is-rtl .service-card:hover .service-link i { transform: translateX(-4px); }
@media (hover: hover) {
.service-card:hover .service-summary { opacity: 0; transform: translateY(-10px); }
.service-card:hover .service-more { opacity: 1; transform: none; }
}
.service-ghost {
position: absolute;
inset-inline-end: -8%;
bottom: -12%;
font-size: 150px;
line-height: 1;
color: var(--accent, var(--teal));
opacity: 0.05;
transform: rotate(-12deg) scale(0.85);
transition: transform 0.8s var(--ease), opacity 0.5s ease;
pointer-events: none;
}
.spot > .service-ghost { z-index: 0; }
.service-card:hover .service-ghost,
.chapter-card:hover .service-ghost { opacity: 0.11; transform: rotate(-4deg) scale(1); }
.service-icon-lg {
width: 72px;
height: 72px;
font-size: 2rem;
border-radius: 20px;
}
.page-hero .service-icon-lg {
margin-bottom: 26px;
background: var(--teal-soft);
color: var(--teal-ink);
border: 1px solid rgba(11, 127, 119, 0.12);
}
/* -------------------------------------------------------------------------
14. Approach chapter (sticky storytelling)
------------------------------------------------------------------------- */
.approach-grid {
display: grid;
gap: 48px;
align-items: start;
}
@media (min-width: 992px) {
.approach-grid { grid-template-columns: 0.85fr 1.15fr; gap: 96px; }
.approach-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
}
.approach .section-head { margin-bottom: 36px; }
.approach-progress {
width: min(100%, 300px);
height: 2px;
border-radius: 2px;
background: var(--line-2);
overflow: hidden;
}
.approach-progress span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--teal-2), var(--blue-glow));
transform: scaleX(0.25);
transform-origin: 0 50%;
transition: transform 0.7s var(--ease);
}
body.is-rtl .approach-progress span { transform-origin: 100% 50%; }
.process-list {
display: grid;
border-top: 1px solid var(--line-2);
}
.process-step {
display: grid;
grid-template-columns: 64px 1fr;
gap: 20px;
padding: clamp(28px, 4vw, 44px) 0;
border-bottom: 1px solid var(--line);
opacity: 0.38;
transition: opacity 0.6s ease;
}
.process-step.is-active,
.process-step:hover { opacity: 1; }
.process-num {
padding-top: 8px;
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: 0.08em;
color: var(--muted);
transition: color 0.4s ease;
}
.process-step.is-active .process-num,
.process-step:hover .process-num { color: var(--teal-ink); }
.process-step h3 {
margin-bottom: 10px;
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
letter-spacing: -0.025em;
}
.process-step p {
margin: 0;
max-width: 52ch;
font-size: 1.04rem;
line-height: 1.65;
}
@media (max-width: 639px) {
.process-step { grid-template-columns: 44px 1fr; gap: 14px; }
}
/* -------------------------------------------------------------------------
15. CTA card (kept as is)
------------------------------------------------------------------------- */
.cta-band { padding: clamp(32px, 5vw, 80px) 0 clamp(72px, 9vw, 128px); }
.cta-card {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(40px, 6vw, 80px);
border-radius: var(--radius-xl);
background: var(--dark);
color: var(--on-dark);
box-shadow: 0 40px 100px -40px rgba(11, 29, 51, 0.5);
}
.cta-card-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.cta-card h2 { margin-bottom: 12px; max-width: 18ch; }
.cta-card p { margin: 0; font-size: 1.1rem; max-width: 48ch; }
/* -------------------------------------------------------------------------
16. Services stories: a horizontal story rail. One panel per service: a
wide navy plate drawing the service's schema (section 33) with a caption
chip, the summary as a highlighted pull quote and the description beside
it. On desktop the section pins and scrolling glides the rail sideways
while the plate's layers drift for depth. Phones get a swipeable deck.
------------------------------------------------------------------------- */
.chapters {
--panel-w: min(78vw, 1080px);
--panel-gap: 4vw;
--deck-step: 60vh;
--plate-ratio: 2.2;
}
.chapters-pin { position: relative; }
.story-head {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 26px;
}
.chapter-progress {
flex: 1;
height: 2px;
border-radius: 2px;
background: var(--line-2);
overflow: hidden;
}
.chapter-progress span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--teal-2), var(--blue-glow));
transform: scaleX(0.125);
transform-origin: 0 50%;
transition: transform 0.5s var(--ease);
}
body.is-rtl .chapter-progress span { transform-origin: 100% 50%; }
.story-nav { display: flex; align-items: center; gap: 10px; }
.story-counter {
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.12em;
color: var(--muted);
/* "current / total" reads the same way in Arabic: keep the pair in left-to-right order */
direction: ltr;
unicode-bidi: isolate;
}
.story-counter b { font-weight: 500; color: var(--ink); }
.story-arrow {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: #fff;
color: var(--ink-2);
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.5s var(--ease);
}
.story-arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
body.is-rtl .story-arrow i { transform: scaleX(-1); }
.story-rail { position: relative; }
.story-track {
display: grid;
gap: 48px;
margin: 0;
padding: 0;
list-style: none;
}
.story-panel {
--hl: 1;
--drift: 0;
display: grid;
gap: 22px;
}
.story-plate {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: 22px;
background: var(--dark);
box-shadow:
0 0 0 1px rgba(11, 29, 51, 0.08),
0 40px 100px -40px color-mix(in srgb, var(--accent, var(--teal)) 70%, transparent);
}
.story-chip {
position: absolute;
bottom: -1px;
inset-inline-start: -1px;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
max-width: calc(100% - 6rem);
padding: 12px 20px 12px 14px;
border-start-end-radius: 16px;
border-end-start-radius: 22px;
background: var(--surface);
border-top: 2px solid var(--accent, var(--teal));
}
.story-chip .service-icon {
flex: none;
width: 40px;
height: 40px;
border-radius: 12px;
font-size: 1.1rem;
background: color-mix(in srgb, var(--accent, var(--teal)) 16%, #fff);
color: color-mix(in srgb, var(--accent, var(--teal)) 72%, #000);
}
.story-chip h3 { margin: 0; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.story-chip-sub {
margin: 2px 0 0;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
color: var(--muted);
}
.story-lead {
margin: 0;
max-width: 34ch;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
line-height: 1.4;
font-weight: 500;
color: var(--ink);
}
/* the highlighter sweeps across the pull quote as the panel becomes the active one */
.story-lead mark {
color: inherit;
padding: 0.05em 0.15em;
border-radius: 4px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background-color: transparent;
background-image: linear-gradient(color-mix(in srgb, var(--accent, var(--teal)) 36%, transparent), color-mix(in srgb, var(--accent, var(--teal)) 36%, transparent));
background-repeat: no-repeat;
background-position: 0 0;
background-size: calc(var(--hl) * 100%) 100%;
}
body.is-rtl .story-lead mark { background-position: 100% 0; }
.story-body p {
margin: 0 0 14px;
max-width: 46ch;
font-size: 1rem;
line-height: 1.68;
color: var(--ink-2);
}
.story-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
transition: color 0.3s ease;
}
.story-link i { transition: transform 0.35s var(--ease); }
.story-link:hover { color: var(--ink); }
.story-link:hover i { transform: translateX(4px); }
body.is-rtl .story-link i { transform: scaleX(-1); }
body.is-rtl .story-link:hover i { transform: scaleX(-1) translateX(4px); }
body.is-rtl .story-chip h3,
body.is-rtl .story-lead { font-family: var(--font-ar); }
@media (min-width: 992px) {
.story-panel {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
column-gap: 56px;
row-gap: 24px;
align-items: start;
}
.story-plate { grid-column: 1 / -1; aspect-ratio: var(--plate-ratio); max-height: 50vh; }
.story-lead { grid-column: 2; grid-row: 2; }
.story-body { grid-column: 1; grid-row: 2; }
}
/* the pinned, scroll-driven rail (desktop, motion allowed, JS on) */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
.js .chapters-pin { height: calc(100vh + (var(--n, 8) - 1) * var(--deck-step)); }
.js .chapters-viewport {
position: sticky;
top: var(--header-h);
height: calc(100vh - var(--header-h));
display: grid;
align-content: center;
}
.js .story-head { margin-bottom: 22px; }
.js .story-rail { overflow: hidden; padding: 24px 0 40px; }
.js .story-track {
display: flex;
gap: var(--panel-gap);
padding-inline: var(--rail-pad, 10vw);
will-change: transform;
}
.js .story-panel { flex: 0 0 var(--panel-w); }
.js .story-plate { opacity: calc(0.55 + 0.45 * var(--hl)); }
.js .story-lead,
.js .story-body { opacity: calc(0.3 + 0.7 * var(--hl)); }
}
/* phones and tablets: the rail is a deck of cards the reader swipes through,
one service per card, snapping into place with the next card peeking in.
The head's progress bar, counter and arrows follow the swipe (main.js)
and the highlighter sweeps the pull quote of the card that settles. */
@media (max-width: 991.98px) {
.chapters {
--panel-w: min(84vw, 560px);
--panel-gap: 14px;
padding-top: clamp(28px, 5vw, 48px);
padding-bottom: clamp(40px, 6vw, 64px);
}
.story-head { gap: 16px; margin-bottom: 20px; }
.story-arrow { width: 40px; height: 40px; font-size: 0.95rem; }
.story-track {
display: flex;
align-items: stretch;
gap: var(--panel-gap);
/* room after the last card so it can snap to the same start edge as the others */
padding: 6px var(--gutter) 36px;
padding-inline-end: max(var(--gutter), calc(100% - var(--panel-w) - var(--gutter)));
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.story-track::-webkit-scrollbar { display: none; }
.story-panel {
flex: 0 0 var(--panel-w);
scroll-snap-align: start;
scroll-snap-stop: always;
gap: 0;
align-content: start;
padding: 8px 8px 24px;
border-radius: 24px;
background: var(--surface);
box-shadow: 0 0 0 1px rgba(11, 29, 51, 0.05), var(--shadow-sm);
transition: box-shadow 0.6s var(--ease);
}
.story-panel.is-current {
box-shadow:
0 0 0 1px rgba(11, 29, 51, 0.05),
0 30px 70px -36px color-mix(in srgb, var(--accent, var(--teal)) 60%, transparent),
var(--shadow-sm);
}
.story-plate {
aspect-ratio: 4 / 3;
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(11, 29, 51, 0.06);
}
.story-chip {
gap: 10px;
max-width: calc(100% - 3rem);
padding: 10px 16px 8px 10px;
border-start-end-radius: 14px;
border-end-start-radius: 18px;
}
.story-chip .service-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }
.story-chip h3 { font-size: 0.92rem; }
.story-chip-sub { display: none; }
.story-lead {
margin: 22px 10px 0;
max-width: none;
font-size: 1.12rem;
}
.story-body { margin: 14px 10px 0; }
.story-body p { max-width: none; font-size: 0.95rem; line-height: 1.62; }
.story-link { margin-top: 2px; }
/* with JavaScript only the settled card carries the highlight, swept in on arrival */
.js .story-panel { --hl: 0; }
.js .story-panel.is-current { --hl: 1; }
.js .story-lead mark { transition: background-size 0.9s var(--ease) 0.2s; }
}
/* -------------------------------------------------------------------------
17. About
------------------------------------------------------------------------- */
.about-grid {
display: grid;
gap: 56px;
align-items: start;
}
@media (min-width: 992px) {
.about-grid { grid-template-columns: 1.15fr 0.85fr; gap: 96px; }
.about-values { position: sticky; top: calc(var(--header-h) + 40px); }
}
.about-block + .about-block { margin-top: clamp(40px, 5vw, 64px); }
.about-block { display: grid; gap: 24px; }
.about-media { aspect-ratio: 4 / 3; border-radius: 20px; }
@media (min-width: 768px) {
.about-block { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.about-media { margin-top: 6px; }
}
.contact-media { aspect-ratio: 16 / 10; border-radius: 20px; }
.about-block h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
margin-bottom: 16px;
}
.about-p {
font-size: 1.12rem;
line-height: 1.75;
max-width: 58ch;
margin: 0;
}
.about-values { display: grid; gap: 16px; perspective: 1200px; }
.value-card {
padding: 26px;
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid var(--line);
}
.value-card:hover {
border-color: rgba(15, 122, 82, 0.6);
box-shadow: 0 0 0 1px rgba(15, 122, 82, 0.3), 0 30px 70px -30px rgba(15, 122, 82, 0.4), var(--shadow-md);
}
.value-card:hover .service-icon {
transform: rotate(-8deg) scale(1.12);
background: var(--grad-brand);
color: #fff;
}
.value-card h3 { margin: 18px 0 6px; font-size: 1.15rem; }
.value-card p { margin: 0; font-size: 0.95rem; }
.activity-list {
counter-reset: activity;
max-width: 920px;
border-top: 1px solid var(--line-2);
}
.activity-list li {
counter-increment: activity;
padding: 22px 0;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
font-size: 1.03rem;
line-height: 1.65;
transition: color 0.3s ease, padding 0.4s var(--ease);
}
.activity-list li::before {
content: counter(activity, decimal-leading-zero);
padding-top: 5px;
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.1em;
color: var(--teal-ink);
}
.activity-list li:hover { color: var(--ink); }
/* -------------------------------------------------------------------------
18. Service detail
------------------------------------------------------------------------- */
.service-detail-grid {
display: grid;
gap: 48px;
align-items: start;
}
@media (min-width: 992px) {
.service-detail-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; }
.service-detail-aside { position: sticky; top: calc(var(--header-h) + 40px); }
}
.prose p {
font-size: 1.12rem;
line-height: 1.75;
color: var(--ink-2);
max-width: 66ch;
margin-bottom: 1.4em;
}
.prose p:first-child {
font-size: clamp(1.2rem, 1.8vw, 1.42rem);
line-height: 1.5;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
.service-detail-aside { display: grid; gap: 16px; perspective: 1200px; }
.aside-card {
padding: 26px;
border-radius: var(--radius-md);
background: var(--surface);
border: 1px solid var(--line);
}
.aside-card:hover { border-color: rgba(15, 122, 82, 0.5); box-shadow: var(--shadow-md); }
.aside-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.aside-card p { font-size: 0.95rem; }
.aside-card-accent {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--dark);
border-color: transparent;
color: var(--on-dark);
}
.aside-card-accent:hover { border-color: rgba(47, 176, 124, 0.4); box-shadow: 0 30px 70px -30px rgba(15, 122, 82, 0.5); }
.aside-card-accent::after {
content: "";
position: absolute;
z-index: -1;
inset-inline-end: -40%;
top: -40%;
width: 90%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.5), transparent 62%);
filter: blur(30px);
}
.aside-card-accent .btn { margin-top: 8px; }
.aside-links li { border-top: 1px solid var(--line); }
.aside-links li:first-child { border-top: 0; }
.aside-links a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-2);
transition: color 0.2s ease, padding 0.35s var(--ease);
}
.aside-links a:hover { color: var(--blue); padding-inline-start: 6px; }
.aside-links i { color: var(--teal-ink); font-size: 1.1rem; }
/* -------------------------------------------------------------------------
19. Contact
------------------------------------------------------------------------- */
.contact-grid {
display: grid;
gap: 48px;
align-items: start;
}
@media (min-width: 992px) {
.contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 64px; }
.contact-info { position: sticky; top: calc(var(--header-h) + 40px); }
}
.contact-form {
display: grid;
gap: 20px;
padding: clamp(24px, 4vw, 44px);
border-radius: var(--radius-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 30px 80px -40px rgba(11, 29, 51, 0.25);
}
.form-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { display: grid; gap: 8px; }
.form-group label {
font-weight: 600;
font-size: 0.88rem;
color: var(--ink);
transition: color 0.2s ease;
}
.form-group:focus-within label { color: var(--teal-ink); }
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--line-2);
border-radius: 14px;
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 1rem;
transition: border-color 0.25s ease, box-shadow 0.35s var(--ease), background 0.25s ease, transform 0.35s var(--ease);
}
.form-group select {
appearance: none;
-webkit-appearance: none;
padding-inline-end: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
body.is-rtl .form-group select { background-position: left 16px center; }
.form-group textarea { min-height: 160px; resize: vertical; }
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
background: #fff;
border-color: var(--teal);
box-shadow: 0 0 0 4px rgba(15, 122, 82, 0.18), 0 12px 30px -16px rgba(15, 122, 82, 0.5);
transform: translateY(-1px);
}
.field-error { margin: 0; font-size: 0.85rem; color: #dc2626; }
.contact-form .btn-block { margin-top: 6px; }
.contact-info { display: grid; gap: 16px; perspective: 1200px; }
.contact-details li,
.check-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--line);
font-size: 0.95rem;
color: var(--ink-2);
}
.contact-details li:first-child,
.check-list li:first-child { border-top: 0; }
.contact-details i,
.check-list i { color: var(--teal-ink); font-size: 1.1rem; }
.contact-details a:hover { color: var(--blue); }
/* -------------------------------------------------------------------------
20. Footer
------------------------------------------------------------------------- */
.site-footer {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(64px, 8vw, 96px) 0 32px;
background: var(--dark);
color: var(--on-dark-2);
}
.footer-top {
display: grid;
gap: 40px;
padding-bottom: 48px;
border-bottom: 1px solid var(--dark-line);
}
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand .navbar-brand { color: #fff; }
.footer-brand p {
margin: 20px 0 0;
max-width: 44ch;
font-size: 0.95rem;
line-height: 1.65;
}
.footer-col h3 {
margin-bottom: 18px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
.footer-col li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 0.95rem;
}
.footer-col a { display: inline-block; transition: color 0.25s ease, transform 0.4s var(--ease); }
.footer-col a:hover { color: #fff; transform: translateX(4px); }
body.is-rtl .footer-col a:hover { transform: translateX(-4px); }
.footer-col i { color: var(--teal-2); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 24px;
font-size: 0.85rem;
color: var(--on-dark-muted);
}
.footer-bottom p { margin: 0; color: inherit; }
.back-to-top {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--dark-line);
color: var(--on-dark);
transition: background 0.3s ease, color 0.3s ease, transform 0.45s var(--ease), box-shadow 0.45s ease;
}
.back-to-top:hover { background: #fff; color: var(--ink); transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(255, 255, 255, 0.4); }
.footer-wordmark {
position: absolute;
z-index: -1;
left: 50%;
bottom: -0.2em;
transform: translateX(-50%);
font-family: var(--font-sans);
font-size: clamp(9rem, 30vw, 26rem);
font-weight: 700;
letter-spacing: -0.06em;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
pointer-events: none;
user-select: none;
white-space: nowrap;
}
/* -------------------------------------------------------------------------
21. Motion: reveals + keyframes
Reveals use the individual translate/scale properties so they compose
with the transform-based tilt instead of overriding it.
------------------------------------------------------------------------- */
.js .reveal {
opacity: 0;
translate: 0 32px;
scale: 0.96;
filter: blur(10px);
transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), scale var(--dur) var(--ease), filter var(--dur) var(--ease);
transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; scale: 1; filter: none; }
.js .reveal-words .w { display: inline-block; }
.js .reveal-words .w span {
display: inline-block;
opacity: 0;
transform: translateY(0.5em);
filter: blur(6px);
transition: opacity 0.7s ease, transform 0.9s var(--ease), filter 0.7s ease;
}
.js .reveal-words.is-in .w span {
opacity: 1;
transform: none;
filter: none;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(47, 176, 124, 0.18); }
50% { box-shadow: 0 0 0 9px rgba(47, 176, 124, 0); }
}
@keyframes drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(8%, 10%, 0) scale(1.12); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes core-glow {
0%, 100% { box-shadow: 0 0 60px rgba(15, 122, 82, 0.4); }
50% { box-shadow: 0 0 90px rgba(47, 176, 124, 0.75), 0 0 30px rgba(47, 176, 124, 0.5); }
}
@keyframes hint {
0% { transform: translateY(-110%); }
60%, 100% { transform: translateY(260%); }
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
to { transform: translateX(50%); }
}
@keyframes flash-in {
from { opacity: 0; transform: translateY(-12px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes overlay-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@keyframes ripple {
to { transform: scale(1); opacity: 0; }
}
@keyframes angle-spin {
to { --angle: 360deg; }
}
@keyframes hero-exit {
to { transform: translateY(-48px); opacity: 0.15; }
}
/* -------------------------------------------------------------------------
13b. Service stage
A bento card expands in place: its rectangle is morphed (animated
clip-path) into a full-viewport window lit by the service's own clip,
the rest of the page blurs behind it, and a rail browses the others.
------------------------------------------------------------------------- */
/* card touches: an expand hint appears */
.service-meta { display: inline-flex; align-items: center; gap: 10px; }
.service-expand {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 0.8rem;
color: #fff;
background: var(--accent, var(--teal));
box-shadow: 0 8px 20px -8px var(--accent, var(--teal));
opacity: 0;
scale: 0.6;
translate: 6px 0;
transition: opacity 0.4s ease, scale 0.6s var(--ease), translate 0.6s var(--ease);
}
.service-card:hover .service-expand { opacity: 1; scale: 1; translate: 0 0; }
/* the clicked card becomes the morph source; its siblings step far back */
.service-card.is-source {
--sc: 1.08;
--lift: -14px;
border-color: transparent;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent, var(--teal)) 55%, transparent),
0 0 90px -10px color-mix(in srgb, var(--accent, var(--teal)) 80%, transparent),
var(--shadow-md);
}
.service-card.is-source > *,
.service-card.is-source > .service-glow { opacity: 0; transition: opacity 0.25s ease; }
.bento.is-open .service-card:not(.is-source) {
--sc: 0.96;
opacity: 0.4;
transition: opacity 0.9s ease, transform 0.9s var(--ease);
}
.bento.is-open .service-card.is-source { opacity: 1; }
/* page scroll lock without layout shift (scrollbar width compensated) */
html.stage-open { overflow: hidden; }
html.stage-open body { padding-inline-end: var(--sbw, 0px); }
html.stage-open .site-header { padding-inline-end: var(--sbw, 0px); }
@property --stage-accent {
syntax: "";
inherits: true;
initial-value: #0f7a52;
}
.service-stage {
position: fixed;
inset: 0;
z-index: 300;
--stage-inset: 0px;
--stage-radius: 0px;
--stage-pad-x: clamp(22px, 5vw, 72px);
--stage-pad-y: clamp(28px, 6vh, 64px);
}
@media (min-width: 992px) {
.service-stage { --stage-inset: clamp(12px, 1.8vw, 26px); --stage-radius: 30px; }
}
.service-stage[hidden] { display: none; }
.stage-veil {
position: absolute;
inset: 0;
background: rgba(243, 245, 248, 0.78);
opacity: 0;
transition: opacity 0.7s ease;
}
.service-stage.is-open .stage-veil { opacity: 1; }
.service-stage.is-closing .stage-veil { opacity: 0; transition: opacity 0.5s ease 0.15s; }
.stage-window {
--stage-accent: var(--teal);
position: absolute;
inset: var(--stage-inset);
border-radius: var(--stage-radius);
overflow: hidden;
isolation: isolate;
background: var(--bg);
color: var(--ink);
box-shadow: 0 60px 140px -40px rgba(11, 29, 51, 0.45), 0 0 0 1px rgba(11, 29, 51, 0.08);
outline: none;
transition: --stage-accent 0.9s ease, opacity 0.4s ease;
}
.service-stage:not(.is-open):not(.is-morphing) .stage-window { opacity: 0; }
/* the card's conic glow continues around the stage */
.stage-window::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--angle), var(--stage-accent), transparent 28%, rgba(11, 29, 51, 0.1) 50%, transparent 62%, var(--stage-accent) 82%, var(--stage-accent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: angle-spin 7s linear infinite;
opacity: 0.9;
pointer-events: none;
}
/* backdrop: the clip's poster, blurred and drifting, tinted by its accent */
.stage-backdrop {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.stage-bg {
position: absolute;
inset: -8%;
background-size: cover;
background-position: center;
filter: blur(38px) saturate(1.1) brightness(1.08);
opacity: 0;
transition: opacity 1.1s ease;
animation: stage-drift 30s ease-in-out infinite alternate;
}
.stage-bg:nth-child(2) { animation-delay: -15s; }
.stage-bg.is-on { opacity: 0.6; }
.stage-tint {
position: absolute;
inset: 0;
background:
radial-gradient(55% 60% at 82% 12%, color-mix(in srgb, var(--stage-accent) 22%, transparent), transparent 70%),
radial-gradient(45% 50% at 10% 95%, color-mix(in srgb, var(--stage-accent) 12%, transparent), transparent 70%),
linear-gradient(105deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 50%, color-mix(in srgb, var(--bg) 55%, transparent) 100%);
}
.stage-backdrop .grid-lines { opacity: 0.6; }
.stage-close {
position: absolute;
top: 18px;
inset-inline-end: 18px;
z-index: 8;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(11, 29, 51, 0.1);
background: rgba(255, 255, 255, 0.8);
color: var(--ink);
font-size: 1.05rem;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
scale: 0.7;
transition: opacity 0.5s ease 0.5s, scale 0.7s var(--ease) 0.5s, background 0.25s ease, rotate 0.5s var(--ease);
}
.service-stage.is-open .stage-close { opacity: 1; scale: 1; }
.service-stage.is-closing .stage-close { opacity: 0; transition: opacity 0.2s ease; }
.stage-close:hover { background: #fff; rotate: 90deg; }
/* scrolling inside the stage browses the services: a hint at the edge, a small
pull before it snaps, and the panels travel in the direction scrolled */
.stage-hint {
position: absolute;
top: 50%;
inset-inline-end: 22px;
z-index: 7;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
translate: 0 -50%;
color: rgba(11, 29, 51, 0.45);
font-size: 1.05rem;
opacity: 0;
transition: opacity 0.6s ease 1.2s;
pointer-events: none;
}
.service-stage.is-open .stage-hint { opacity: 1; }
.service-stage.has-scrolled .stage-hint,
.service-stage.is-closing .stage-hint { opacity: 0; transition-delay: 0s; }
.stage-hint-chev { font-size: 0.9rem; animation: hint-bob 1.8s ease-in-out infinite; }
@keyframes hint-bob {
0%, 100% { translate: 0 0; opacity: 0.4; }
50% { translate: 0 5px; opacity: 1; }
}
.stage-scroll { transition: translate 0.3s var(--ease); }
.service-stage.is-back .stage-panel:not(.is-active) .stage-copy > * { translate: 0 -28px; }
.service-stage.is-back .stage-panel.is-leaving .stage-copy > * { translate: 0 18px; }
@media (max-width: 991px) { .stage-hint { display: none; } }
/* scrolling content: one panel per service, stacked in the same grid cell so two can crossfade */
.stage-scroll {
position: absolute;
inset: 0;
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(11, 29, 51, 0.25) transparent;
}
.stage-panels { display: grid; min-height: 100%; }
.stage-panel {
grid-area: 1 / 1;
display: grid;
gap: 32px;
align-content: start;
padding: calc(var(--stage-pad-y) + 30px) var(--stage-pad-x) 130px;
min-height: 100%;
}
.stage-panel[hidden] { display: none; }
.stage-panel.is-leaving { pointer-events: none; }
.stage-copy { max-width: 640px; }
.stage-kicker {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin: 0 0 22px;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.14em;
color: color-mix(in srgb, var(--stage-accent) 70%, #000);
}
.stage-num { font-size: 1.7rem; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--ink); }
.stage-of { color: var(--muted); }
.stage-icon {
margin-bottom: 22px;
background: color-mix(in srgb, var(--stage-accent) 16%, #fff);
color: color-mix(in srgb, var(--stage-accent) 72%, #000);
border: 1px solid color-mix(in srgb, var(--stage-accent) 30%, transparent);
box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--stage-accent) 90%, transparent);
}
.stage-title {
margin: 0 0 20px;
font-size: clamp(1.9rem, 3.6vw, 3.1rem);
line-height: 1.06;
letter-spacing: -0.03em;
font-weight: 600;
color: var(--ink);
}
.stage-lead { margin: 0 0 26px; color: var(--ink-2); }
.stage-body p {
margin: 0 0 16px;
max-width: 60ch;
font-size: 1.02rem;
line-height: 1.72;
color: var(--ink-2);
}
.stage-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 28px;
margin-top: 30px;
padding: 22px 24px;
border-radius: 20px;
background: linear-gradient(135deg, color-mix(in srgb, var(--stage-accent) 12%, #fff), #fff);
border: 1px solid color-mix(in srgb, var(--stage-accent) 30%, var(--line));
}
.stage-cta h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink); }
.stage-cta p { margin: 0; max-width: 44ch; font-size: 0.92rem; color: var(--ink-2); }
.stage-media { position: relative; display: grid; gap: 18px; align-content: start; }
.stage-media .clip { width: 100%; max-height: min(48vh, 440px); aspect-ratio: 16 / 10; }
.stage-media .stage-cta { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 14px; }
.stage-media .stage-cta > div { width: 100%; }
.stage-ghost {
position: absolute;
z-index: -1;
inset-inline-end: -10%;
bottom: -14%;
font-size: clamp(160px, 22vw, 300px);
line-height: 1;
color: var(--stage-accent);
opacity: 0.12;
transform: rotate(-8deg);
filter: blur(1px);
pointer-events: none;
}
@media (min-width: 992px) {
.stage-panel {
grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
gap: clamp(36px, 5vw, 88px);
align-items: start;
padding-top: var(--stage-pad-y);
}
.stage-media { position: sticky; top: var(--stage-pad-y); }
.stage-media .clip-portrait {
width: min(100%, 440px);
max-height: min(50vh, 460px);
aspect-ratio: 4 / 5;
margin-inline-start: auto;
}
}
@media (max-width: 991px) {
.stage-media { display: contents; }
.stage-media > .clip { order: -1; }
.stage-media .stage-cta { order: 3; }
.stage-ghost { display: none; }
.stage-panel { padding-bottom: 120px; }
}
/* choreography: copy lines rise in sequence, the media swings in from the side */
.stage-copy > * {
opacity: 0;
translate: 0 28px;
scale: 0.94;
transform-origin: 0 50%;
filter: blur(8px);
transition: opacity 0.7s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease-spring), filter 0.7s var(--ease);
transition-delay: var(--d, 0s);
}
.stage-copy > :nth-child(1) { --d: 0.1s; }
.stage-copy > :nth-child(2) { --d: 0.16s; }
.stage-copy > :nth-child(3) { --d: 0.22s; }
.stage-copy > :nth-child(4) { --d: 0.34s; }
.stage-copy > :nth-child(5) { --d: 0.42s; }
.stage-copy > :nth-child(6) { --d: 0.52s; }
.stage-panel.is-active .stage-copy > * { opacity: 1; translate: 0 0; scale: 1; filter: none; }
.stage-panel.is-leaving .stage-copy > * {
opacity: 0;
translate: 0 -16px;
filter: blur(6px);
transition-duration: 0.28s;
transition-delay: 0s;
}
.js .stage-title .w { display: inline-block; }
.js .stage-title .w span {
display: inline-block;
opacity: 0;
transform: translateY(0.6em) rotate(2deg);
filter: blur(6px);
transition: opacity 0.6s ease, transform 0.9s var(--ease), filter 0.6s ease;
}
.js .stage-panel.is-active .stage-title .w span { opacity: 1; transform: none; filter: none; }
.stage-media {
opacity: 0;
transform: perspective(1200px) rotateY(-12deg) translateX(48px) scale(0.84);
transition: opacity 0.8s var(--ease) 0.28s, transform 1.1s var(--ease-spring) 0.28s;
}
body.is-rtl .stage-media { transform: perspective(1200px) rotateY(12deg) translateX(-48px) scale(0.84); }
@media (max-width: 991px) {
.stage-media,
body.is-rtl .stage-media { transform: translateY(24px) scale(0.96); }
}
.stage-panel.is-active .stage-media { opacity: 1; transform: none; }
.stage-panel.is-leaving .stage-media {
opacity: 0;
transform: translateX(-24px) scale(0.97);
transition-duration: 0.3s;
transition-delay: 0s;
}
body.is-rtl .stage-panel.is-leaving .stage-media { transform: translateX(24px) scale(0.97); }
/* rail: previous / next, one dot per service, the active title above */
.stage-rail {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 7;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
padding: 44px var(--stage-pad-x) 18px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 90%, transparent) 34%, color-mix(in srgb, var(--bg) 98%, transparent) 100%);
pointer-events: none;
translate: 0 24px;
opacity: 0;
transition: translate 0.9s var(--ease) 0.45s, opacity 0.7s ease 0.45s;
}
.stage-rail > * { pointer-events: auto; }
.service-stage.is-open .stage-rail { translate: 0 0; opacity: 1; }
.service-stage.is-closing .stage-rail { opacity: 0; translate: 0 16px; transition: opacity 0.25s ease, translate 0.25s ease; }
.stage-rail-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 0;
}
.stage-rail-label {
margin: 0;
max-width: min(72vw, 520px);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
translate: 0 6px;
transition: opacity 0.5s ease, translate 0.6s var(--ease);
}
.stage-rail-label.is-in { opacity: 1; translate: 0 0; }
.stage-dots {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.stage-dot,
.stage-arrow {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(11, 29, 51, 0.12);
background: rgba(255, 255, 255, 0.75);
color: var(--ink-2);
font-size: 1rem;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: background 0.3s ease, color 0.3s ease, transform 0.5s var(--ease), box-shadow 0.5s ease, border-color 0.3s ease;
}
.stage-dot:hover,
.stage-arrow:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.stage-dot.is-active {
background: var(--stage-accent);
border-color: transparent;
color: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-accent) 28%, transparent), 0 12px 30px -10px var(--stage-accent);
}
.stage-arrow { flex: none; width: 50px; height: 50px; }
.stage-close:focus-visible,
.stage-dot:focus-visible,
.stage-arrow:focus-visible { outline: 2px solid #1e63c7; outline-offset: 3px; }
body.is-rtl .stage-arrow i { transform: scaleX(-1); }
body.is-rtl .stage-title,
body.is-rtl .stage-cta h3,
body.is-rtl .stage-rail-label,
body.is-rtl .stage-kicker { font-family: var(--font-ar); letter-spacing: 0; }
body.is-rtl .stage-title { line-height: 1.25; }
@media (max-width: 639px) {
.stage-dots { display: none; }
.stage-rail { padding-top: 36px; }
}
@keyframes stage-drift {
from { transform: scale(1) translate(0, 0); }
to { transform: scale(1.12) translate(-2%, 2%); }
}
@media (prefers-reduced-motion: reduce) {
.stage-bg,
.stage-window::after { animation: none; }
.stage-copy > *,
.stage-media,
.stage-rail,
.stage-close,
.stage-rail-label { opacity: 1; translate: 0 0; transform: none; filter: none; }
.bento.is-open .service-card:not(.is-source) { opacity: 1; }
}
/* -------------------------------------------------------------------------
13c. Round-3 feedback: hero light-up, expertise backdrop, popout cards,
calmer process steps, activity list
------------------------------------------------------------------------- */
/* hero: touching a card lights its connector; touching the core lights everything */
.hero-card,
.hero-core { cursor: default; }
.hero-card { transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, scale 0.6s var(--ease); }
.hero-card i { transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
.hero-card:hover,
.hero-card.is-lit {
scale: 1.05;
border-color: rgba(15, 122, 82, 0.7);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.3), 0 0 54px -6px rgba(15, 122, 82, 0.45), inset 0 1px 0 #fff;
}
.hero-card:hover i,
.hero-card.is-lit i {
background: var(--teal);
color: #fff;
box-shadow: 0 0 26px rgba(15, 122, 82, 0.6);
}
.hero-halo { transition: scale 1.2s var(--ease), background 0.9s ease; }
.hero-visual.is-lit .hero-halo {
scale: 1.3;
background: radial-gradient(circle, rgba(47, 176, 124, 0.5), rgba(15, 122, 82, 0.3) 45%, transparent 70%);
}
.hero-core { transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease; }
.hero-core.is-lit {
border-color: rgba(15, 122, 82, 0.6);
background: radial-gradient(circle, rgba(47, 176, 124, 0.3), rgba(15, 122, 82, 0.18) 55%, rgba(255, 255, 255, 0.6) 78%);
box-shadow: inset 0 0 70px rgba(47, 176, 124, 0.35), 0 0 140px -10px rgba(15, 122, 82, 0.55);
}
.hero-core.is-lit::before {
animation-duration: 2.4s;
background: conic-gradient(from 0deg, transparent 0 40%, rgba(47, 176, 124, 1) 72%, transparent 100%);
}
.hero-core.is-lit::after { border-color: rgba(47, 176, 124, 0.5); animation-duration: 20s; }
.hero-core.is-lit .brand-mark-lg {
box-shadow: 0 0 100px rgba(47, 176, 124, 0.95), 0 0 34px rgba(255, 255, 255, 0.55);
animation-duration: 1.3s;
}
/* expertise section: the hero's backdrop behind a frosted section head (colours in 13e) */
.expertises {
position: relative;
isolation: isolate;
overflow: clip;
}
.section-scrim {
position: absolute;
inset: 0;
}
.expertises .section-head {
display: inline-block;
padding: 24px 30px 26px;
border-radius: var(--radius-md);
}
/* hovered card pops out towards the visitor (no sibling fade or blur any more) */
.service-card:hover,
.service-card.is-source { z-index: 4; }
/* while the pointer rests on a card its description lights up word by word (a
reading sweep, purely visual); the card opens on click only */
.service-expand { position: relative; }
/* process steps: nothing moves the layout any more (a padding shift re-fitted the
backdrop video); the active step gets an accent bar instead */
.process-step { position: relative; }
.process-step::before {
content: "";
position: absolute;
inset-inline-start: -26px;
top: 50%;
width: 3px;
height: 0;
border-radius: 2px;
background: linear-gradient(180deg, var(--teal-2), var(--blue-glow));
translate: 0 -50%;
opacity: 0;
transition: height 0.6s var(--ease), opacity 0.4s ease;
}
.process-step.is-active::before { height: 58%; opacity: 1; }
.process-step h3 { transition: color 0.4s ease; }
.process-step.is-active h3 { color: var(--ink); }
.approach .noise { mix-blend-mode: normal; opacity: 0.05; }
/* about: the activity list is a block list (a grid turned each highlighted word into a cell) */
.activity-list li {
display: block;
position: relative;
padding: 22px 0;
padding-inline-start: 76px;
}
.activity-list li::before {
position: absolute;
inset-inline-start: 0;
top: 22px;
}
.activity-list li:hover { padding-inline-start: 76px; }
.activity-list li > span { transition: translate 0.4s var(--ease); }
@media (max-width: 639px) {
.activity-list li { padding-inline-start: 48px; }
.activity-list li:hover { padding-inline-start: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-card,
.hero-card.is-lit,
.hero-visual.is-lit .hero-halo { scale: 1; }
}
/* -------------------------------------------------------------------------
13d. Subject select, scroll-driven marker highlight, CTA hover hue
------------------------------------------------------------------------- */
/* contact subject: the native select stays (keyboard, phones); a tile shows the
chosen subject's icon, the chevron badge turns, and on desktop a glass list opens */
.select-shell {
--accent: var(--teal);
position: relative;
}
.select-shell select {
padding-inline-start: 60px;
background-image: none;
}
.select-tile,
.select-chev {
position: absolute;
top: 50%;
display: grid;
place-items: center;
translate: 0 -50%;
pointer-events: none;
}
.select-tile {
inset-inline-start: 10px;
width: 38px;
height: 38px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 16%, #fff);
color: color-mix(in srgb, var(--accent) 72%, #000);
font-size: 1.1rem;
transition: background 0.4s ease, color 0.4s ease, scale 0.5s var(--ease-spring);
}
.select-shell.is-changed .select-tile { scale: 1.12; }
.select-chev {
inset-inline-end: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-2);
color: var(--muted);
font-size: 0.9rem;
transition: rotate 0.45s var(--ease), background 0.3s ease, color 0.3s ease;
}
.select-shell:focus-within .select-chev { color: var(--teal-ink); }
.select-shell.is-open .select-chev { rotate: 180deg; background: var(--accent); color: #fff; }
.select-shell:focus-within select,
.select-shell.is-open select {
background: #fff;
border-color: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent), 0 12px 30px -16px color-mix(in srgb, var(--accent) 60%, transparent);
}
.select-menu {
position: absolute;
z-index: 20;
inset-inline: 0;
top: calc(100% + 8px);
max-height: min(60vh, 540px);
overflow: auto;
padding: 8px;
border-radius: 18px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 30px 80px -30px rgba(11, 29, 51, 0.35);
opacity: 0;
translate: 0 -8px;
scale: 0.98;
transform-origin: 50% 0;
visibility: hidden;
transition: opacity 0.25s ease, translate 0.45s var(--ease), scale 0.45s var(--ease), visibility 0s linear 0.3s;
}
.select-shell.is-open .select-menu {
opacity: 1;
translate: 0 0;
scale: 1;
visibility: visible;
transition-delay: 0s;
}
.select-option {
--accent: var(--teal);
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 0.95rem;
text-align: start;
cursor: pointer;
opacity: 0;
translate: 0 6px;
transition: background 0.2s ease, opacity 0.4s ease var(--d, 0s), translate 0.5s var(--ease) var(--d, 0s);
}
.select-shell.is-open .select-option { opacity: 1; translate: 0 0; }
.select-option-icon {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 16%, #fff);
color: color-mix(in srgb, var(--accent) 72%, #000);
font-size: 1rem;
}
.select-option-check {
margin-inline-start: auto;
color: var(--teal-ink);
opacity: 0;
transition: opacity 0.2s ease;
}
.select-option:hover,
.select-option.is-hot { background: var(--surface-2); }
.select-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, #fff); }
.select-option[aria-selected="true"] .select-option-check { opacity: 1; }
/* marker highlight: a teal highlighter sweeps each word as it is read. The hero
headline is driven by scroll progress, the process steps by the reading line. */
.hero .display .w > span,
.process-body h3.read .rw > span {
background-image: linear-gradient(90deg, var(--blue-glow), var(--teal-2));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 0.11em;
padding-bottom: 0.06em;
transition: background-size 0.5s var(--ease);
}
.hero .display .w > span {
transition: opacity 0.7s ease, transform 0.9s var(--ease), filter 0.7s ease, background-size 0.5s var(--ease);
}
body.is-rtl .hero .display .w > span,
body.is-rtl .process-body h3.read .rw > span { background-position: 100% 100%; }
.hero .display .w.on > span,
.process-body h3.read .rw.on > span { background-size: 100% 0.11em; }
.process-body h3.read .rw { opacity: 0.45; }
.process-body h3.read .rw.on { opacity: 1; }
/* CTA card: a hue shift and the conic glow while hovered (untouched at rest) */
.cta-card { transition: box-shadow 0.8s var(--ease); }
.cta-card .cta-bg { transition: filter 1.4s ease; }
.cta-card .orb { transition: scale 1.6s var(--ease); }
.cta-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--angle), var(--teal-2), transparent 30%, var(--blue-glow) 50%, transparent 70%, var(--teal-2));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.cta-card:hover { box-shadow: 0 0 0 1px rgba(47, 176, 124, 0.35), 0 50px 130px -40px rgba(47, 176, 124, 0.45); }
.cta-card:hover .cta-bg { filter: hue-rotate(-45deg) saturate(1.4) brightness(1.25); }
.cta-card:hover .orb { scale: 1.25; }
.cta-card:hover::after { opacity: 1; animation: angle-spin 5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.select-option { opacity: 1; translate: 0 0; }
.cta-card:hover::after { animation: none; }
}
/* -------------------------------------------------------------------------
13e. Round-10: the node network behind the approach chapter and the story
rail, and a continuously eased card hover. Round-17 (section 24) made the
whole site bright, so the dark stats strip and dark CTA band of this round
are gone again.
------------------------------------------------------------------------- */
/* expertises: on the home hero's backdrop (ribbon and node network, ground
set in hero-home.css); a frosted white panel behind the section head and
white glass cards with black text. Every card keeps its own service accent
(ring, icon gradient, ghost icon, shadow) for the hover. */
.expertises {
background: var(--bg);
color: var(--ink);
}
/* the washed ambient clips (hub items section) */
.ambient-video-light {
opacity: 1;
filter: saturate(0.9) brightness(1.05) contrast(0.95);
object-position: 50% 50%;
transform: translateZ(0);
}
.expertises .section-head {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 24px 60px -34px rgba(11, 29, 51, 0.35), inset 0 1px 0 #fff;
-webkit-backdrop-filter: blur(18px) saturate(1.2);
backdrop-filter: blur(18px) saturate(1.2);
}
.expertises .service-card {
background-color: rgba(255, 255, 255, 0.86);
border-color: rgba(255, 255, 255, 0.95);
/* a small contact shadow under the long soft one, for depth at rest */
box-shadow:
0 1px 2px rgba(11, 29, 51, 0.06),
0 6px 16px -6px rgba(11, 29, 51, 0.25),
0 24px 60px -34px rgba(11, 29, 51, 0.3),
inset 0 1px 0 #fff;
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
}
.expertises .service-card:hover,
.expertises .service-card.is-source {
background-color: rgba(255, 255, 255, 0.97);
border-color: transparent;
box-shadow:
0 0 36px -8px color-mix(in srgb, var(--accent, var(--teal)) 50%, transparent),
0 30px 60px -30px color-mix(in srgb, var(--accent, var(--teal)) 45%, transparent),
var(--shadow-md);
}
.expertises .service-card.is-source {
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent, var(--teal)) 55%, transparent),
0 0 90px -10px color-mix(in srgb, var(--accent, var(--teal)) 70%, transparent),
var(--shadow-md);
}
.expertises .service-summary { color: var(--ink-2); }
.expertises .service-more { color: var(--ink); }
.expertises .service-ghost { opacity: 0.07; }
.expertises .service-card:hover .service-ghost { opacity: 0.14; }
.expertises .service-card::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--blue-glow)) 14%, transparent), transparent 65%); }
/* the node network (the hero's living background) behind the approach chapter
and the story rail; the host section catches the pointer, the canvas just draws */
.net-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.85;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 96%);
mask-image: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 96%);
}
.net-host { position: relative; }
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
.net-bg { display: none; }
}
/* smooth hover: JS eases a hover amount (--hv, 0..1) and the tilt angles every
frame, so pop-out, lift, spotlight and tilt move as one continuous motion from
the first frame to the last. While it runs, the CSS transform transition is
off (it would restart on every frame and fight the easing). */
.tilt {
--hover-sc: 1.015;
--hover-lift: -6px;
--sc: calc(1 + (var(--hover-sc) - 1) * var(--hv, 0));
--lift: calc(var(--hover-lift) * var(--hv, 0));
transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s ease, background-color 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}
.service-card { --hover-sc: 1.05; --hover-lift: -10px; }
.tilt.is-tilting { transition-property: box-shadow, border-color, background-color, opacity, filter; }
.tilt.is-source { transition-property: transform, box-shadow, border-color, background-color, opacity, filter; }
.service-card.is-tilting { z-index: 4; } /* stays above its neighbours until it has settled */
html:not(.js) .tilt:hover { --hv: 1; }
@media (hover: none) { .tilt:hover { --hv: 1; } }
/* the icon's gradient fades in on a layer of its own (a solid-to-gradient
background cannot be interpolated and used to snap) */
.service-icon { position: relative; isolation: isolate; }
.service-icon::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(135deg, var(--blue), var(--accent, var(--teal)));
opacity: 0;
transition: opacity 0.45s ease;
}
.service-card:hover .service-icon::before { opacity: 1; }
/* -------------------------------------------------------------------------
21b. Hub catalogue (/solutions/, /artificial-intelligence/): the hero's
jump chips, then one ruled chapter per group of pages/hubs.py. From
1024px a chapter is two columns: its head in a sticky side column (index,
count, label, lead), its items as compact tiles in an auto-fill grid that
takes the remaining width and wraps as items are added (2026-11-03:
replaced the two-column card grid, which left most of each card empty).
A hub without groups (AI) is one chapter without a head. A tile: icon and
index, title, lead (the hover copy of section 25 swaps in over it), then
a foot with the services mobilised as icon chips (the name in a tooltip;
the stage spells out each one's role) and the open button. The contact
card closes the catalogue as one slim band.
------------------------------------------------------------------------- */
.solution-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
}
.solution-jump a,
.solution-jump .is-soon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line-2);
background: rgba(255, 255, 255, 0.6);
color: var(--ink-2);
font-size: 0.86rem;
font-weight: 500;
transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.4s var(--ease);
}
.solution-jump i { color: var(--teal-ink); }
.solution-jump a:hover {
color: var(--teal-ink);
border-color: rgba(15, 122, 82, 0.5);
background: var(--teal-soft);
transform: translateY(-2px);
}
.solution-jump .is-soon { opacity: 0.45; filter: blur(0.8px); cursor: default; }
/* the catalogue: a stack of chapters (the stage script dims this one grid, section 25) */
.solution-grid { display: grid; gap: clamp(36px, 5vw, 60px); perspective: 1200px; }
.solution-group {
display: grid;
gap: 20px;
padding-top: 22px;
border-top: 1px solid var(--line-2);
}
.solution-group--plain { padding-top: 0; border-top: 0; }
.solution-group-head { display: grid; gap: 10px; align-content: start; }
.solution-group-index {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--muted);
}
.solution-group-index .index { color: var(--teal-ink); }
.solution-group-count { padding-inline-start: 12px; border-inline-start: 1px solid var(--line-2); }
.solution-group-head h2 {
margin: 0;
font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
letter-spacing: -0.02em;
}
.solution-group-lead {
margin: 0;
max-width: 32ch;
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink-2);
}
@media (min-width: 1024px) {
.solution-group {
grid-template-columns: minmax(200px, 0.85fr) minmax(0, 3.6fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.solution-group--plain { grid-template-columns: minmax(0, 1fr); }
.solution-group-head { position: sticky; top: calc(var(--header-h) + 28px); }
}
/* the tiles: as many tracks as fit, every row the same height (the foot sticks to the bottom);
auto-fit stretches a short chapter over its row, so three sectors read 3-up and four
functions 4-up on the same page with no empty cell */
.solution-tiles {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr));
}
.solution-card {
display: flex;
flex-direction: column;
padding: 18px 18px 14px;
border-radius: 20px;
}
.solution-card > * { position: relative; z-index: 1; }
.solution-card-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.solution-card .service-icon {
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 1.15rem;
}
.solution-card h2 {
margin: 16px 0 6px;
font-size: 1.12rem;
line-height: 1.25;
letter-spacing: -0.015em;
}
/* .solution-card prefix: .value-card p resets paragraph margins with higher specificity */
.solution-card .solution-lead {
margin: 0;
color: var(--ink-2);
font-size: 0.9rem;
line-height: 1.5;
}
.solution-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line);
}
/* service chips: icon only, the name in a tooltip above the row (anchored to the list,
not the chip, so a long name never runs past the tile's edge) */
.solution-services {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.solution-chip {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid transparent;
color: var(--teal-ink);
font-size: 0.92rem;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}
.solution-chip:hover,
.solution-chip:focus-visible {
background: var(--teal-soft);
border-color: rgba(15, 122, 82, 0.4);
transform: translateY(-2px);
}
.solution-chip:focus-visible { outline: 2px solid #1e63c7; outline-offset: 2px; }
.solution-chip::after {
content: attr(data-label);
position: absolute;
z-index: 3;
bottom: calc(100% + 8px);
inset-inline-start: 0;
width: max-content;
max-width: 230px;
padding: 6px 10px;
border-radius: 8px;
background: var(--dark-2);
color: #fff;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.35s var(--ease);
}
.solution-chip:hover::after,
.solution-chip:focus-visible::after { opacity: 1; transform: none; }
/* contact band */
.solution-card-other {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 28px;
padding: 24px 28px;
background: var(--dark-2);
border-color: transparent;
color: var(--on-dark);
}
.solution-card-other::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(70% 60% at 100% 0%, rgba(15, 122, 82, 0.45), transparent 70%),
radial-gradient(60% 50% at 0% 100%, rgba(15, 122, 82, 0.35), transparent 70%);
pointer-events: none;
}
.solution-card-other-text { display: flex; align-items: center; gap: 18px; }
.solution-card-other .service-icon { flex: none; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.1); color: var(--teal-2); }
.solution-card-other h2 { margin: 0 0 4px; color: #fff; font-size: 1.2rem; }
.solution-card-other .solution-lead { color: var(--on-dark-2); }
.solution-card-other .btn { flex: none; }
/* teaser tile ("soon"): dashed, blurred content, crisp tag, no link anywhere */
.solution-card.is-soon { border-style: dashed; }
.solution-card.is-soon:hover { border-color: var(--line-2); box-shadow: none; }
.solution-card.is-soon:hover .service-icon { transform: none; background: var(--teal-soft); color: var(--teal-ink); }
.solution-card.is-soon .service-icon,
.solution-card.is-soon h2,
.solution-card.is-soon .solution-lead { filter: blur(1.5px); opacity: 0.55; }
.solution-tag {
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--line-2);
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-ink);
}
/* -------------------------------------------------------------------------
22. RTL / Arabic
------------------------------------------------------------------------- */
body.is-rtl { font-family: var(--font-ar); }
body.is-rtl h1,
body.is-rtl h2,
body.is-rtl h3,
body.is-rtl h4,
body.is-rtl .display,
body.is-rtl .h-display,
body.is-rtl .main-nav .nav-link,
body.is-rtl .btn,
body.is-rtl .brand-full,
body.is-rtl .hero-card,
body.is-rtl .stat-num {
font-family: var(--font-ar);
letter-spacing: 0;
}
body.is-rtl .display { line-height: 1.22; }
body.is-rtl .h-display { line-height: 1.28; }
body.is-rtl .process-step h3,
body.is-rtl .about-block h2 { line-height: 1.3; }
body.is-rtl .eyebrow,
body.is-rtl .index,
body.is-rtl .stat-label,
body.is-rtl .marquee-item,
body.is-rtl .footer-col h3,
body.is-rtl .breadcrumb,
body.is-rtl .service-index,
body.is-rtl .chapter-index,
body.is-rtl .chapter-num,
body.is-rtl .process-num,
body.is-rtl .lang-btn {
font-family: var(--font-ar);
letter-spacing: 0;
}
body.is-rtl .btn-arrow { transform: scaleX(-1); }
body.is-rtl .btn:hover .btn-arrow { transform: scaleX(-1) translateX(5px); }
body.is-rtl .btn::before { transform: translateX(130%) skewX(12deg); }
body.is-rtl .btn:hover::before { transform: translateX(-130%) skewX(12deg); }
body.is-rtl .scroll-progress { transform-origin: 100% 50%; }
body.is-rtl .hero-card { padding: 14px 14px 14px 20px; }
body.is-rtl .nav-sub-link,
body.is-rtl .solution-jump a,
body.is-rtl .solution-group-lead,
body.is-rtl .solution-lead {
font-family: var(--font-ar);
letter-spacing: 0;
}
body.is-rtl .nav-sub-other:hover .btn-arrow { transform: scaleX(-1) translateX(5px); }
/* -------------------------------------------------------------------------
23. Reduced motion
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.js .reveal { opacity: 1; translate: 0 0; scale: 1; filter: none; }
.js .reveal-words .w span { opacity: 1; transform: none; filter: none; }
.read .rw { opacity: 1; }
.marquee-track { animation: none; }
.hero-grid { animation: none; }
.tilt, .chapter-card { transform: none; }
.site-header.is-hidden { transform: none; }
}
/* -------------------------------------------------------------------------
24. Round-17: the bright theme. White and neutral backgrounds on every page
with dark text; the only dark surfaces left are the CTA card (kept as is),
its small cousin on the service detail page, the "other" card of the hubs
and the footer. The contact and service detail heroes carry a stock clip
washed almost white (hero_bg.html takes clip=); the home, hub, services
and about heroes sit on the ribbon (section 28). Inner sections alternate
between the page background and the cool grey tint band (.section-tint).
------------------------------------------------------------------------- */
:root {
/* node network colours (r, g, b triplets) read by initNetwork in main.js */
--net-link: 15, 122, 82;
--net-pointer: 15, 122, 82;
--net-node: 11, 29, 51;
--net-spark: 11, 29, 51;
}
.hero .orb,
.page-hero .orb { opacity: 0.4; }
.page-hero .hero-canvas { opacity: 0.45; }
/* the home hero clip is a nearly white screen of code: let a little more through */
.hero .hero-video-shade {
background:
linear-gradient(180deg, rgba(243, 245, 248, 0.82), rgba(243, 245, 248, 0.5) 40%, rgba(243, 245, 248, 0.96)),
radial-gradient(70% 60% at 30% 50%, rgba(243, 245, 248, 0.6), transparent 70%);
}
/* the CTA card keeps its white grid on dark */
.cta-card .grid-lines {
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}
/* approach chapter: the solar-field clip under a heavy wash (the steps sit
straight on it, no cards), the node network drawn over it */
.approach {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--bg);
}
.approach .section-scrim {
background: linear-gradient(180deg, rgba(243, 245, 248, 0.95) 0%, rgba(243, 245, 248, 0.76) 22%, rgba(243, 245, 248, 0.74) 78%, rgba(243, 245, 248, 0.96) 100%);
}
.approach .orb-a { opacity: 0.35; }
/* the drone footage is earth-toned: drained of colour it reads as a neutral grey texture */
.approach .ambient-video-light { filter: saturate(0.45) brightness(1.1) contrast(0.9); }
/* tint bands keep their atmosphere layers soft */
.section-tint .orb { opacity: 0.35; }
.section-tint .noise { opacity: 0.05; mix-blend-mode: normal; }
.section-tint .contact-form,
.section-tint .aside-card,
.section-tint .value-card { background: var(--surface); }
/* hub pages: the card grid sits on the ribbon with the node network over it;
the cards are white glass so the ribbon lives in the gaps, the "other" card stays dark */
.hub-items .value-card {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 24px 60px -34px rgba(11, 29, 51, 0.3), inset 0 1px 0 #fff;
-webkit-backdrop-filter: blur(7px) saturate(1.2);
backdrop-filter: blur(7px) saturate(1.2);
}
.hub-items .value-card:hover { background: rgba(255, 255, 255, 0.94); }
/* the node network runs unmasked and denser here (data-net-density / data-net-max on the
section) so the pointer-linked lines also glow through the card glass */
.hub-items .net-canvas {
opacity: 1;
-webkit-mask-image: none;
mask-image: none;
}
.hub-items .solution-card-other,
.hub-items .solution-card-other:hover { background: var(--dark-2); border-color: transparent; }
.hub-items .solution-card.is-soon { border-color: var(--line-2); }
/* -------------------------------------------------------------------------
25. Hub stage: a sector / capability card of /solutions/ and /artificial-
intelligence/ opens into the service stage window (partials/hub_stage.html,
mounted by main.js beside the home page stage)
------------------------------------------------------------------------- */
/* the tile: an expand badge beside the index on hover, a round arrow button at the
foot's end (label for assistive tech); the full text only reads inline without JavaScript */
.js .solution-card[data-stage] { cursor: pointer; }
.solution-card:hover .service-expand { opacity: 1; scale: 1; translate: 0 0; }
.solution-card .solution-body p {
margin: 0 0 14px;
max-width: 52ch;
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink-2);
}
.js .solution-body { display: none; }
/* hover copy: like the services bento, the lead gives way to the full text, which
the reading sweep (main.js) lights up word by word; pointer devices only */
.solution-text { position: relative; margin: 0 0 18px; }
.solution-card .solution-text .solution-lead { margin: 0; transition: opacity 0.35s ease, transform 0.5s var(--ease); }
.solution-card .solution-more {
position: absolute;
inset: 0 0 auto 0;
margin: 0;
max-width: 56ch;
font-size: 0.8rem;
line-height: 1.5;
color: var(--ink);
opacity: 0;
transform: translateY(12px);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
pointer-events: none;
transition: opacity 0.45s ease 0.05s, transform 0.6s var(--ease) 0.05s;
}
html:not(.js) .solution-more { display: none; }
@media (hover: hover) and (pointer: fine) {
.solution-text { min-height: 4.9rem; } /* room for four lines of the hover copy (three of the lead): no height jump */
.solution-card:hover .solution-text .solution-lead { opacity: 0; transform: translateY(-10px); }
.solution-card:hover .solution-more { opacity: 1; transform: none; }
}
.solution-open {
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: center;
flex: none;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--surface-2);
font: inherit;
font-size: 0.9rem;
color: var(--ink);
cursor: pointer;
transition: background 0.35s ease, color 0.35s ease, transform 0.5s var(--ease);
}
.solution-open i { transition: transform 0.35s var(--ease); }
.solution-card:hover .solution-open { background: var(--teal-ink); color: #fff; }
.solution-card:hover .solution-open i { transform: translateX(2px); }
body.is-rtl .solution-card:hover .solution-open i { transform: translateX(-2px); }
.solution-open:focus-visible { outline: 2px solid #1e63c7; outline-offset: 4px; }
html:not(.js) .solution-open { display: none; }
/* the clicked card is the morph source; its siblings step back while the stage is open */
.solution-card.is-source {
z-index: 4;
border-color: transparent;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--teal) 55%, transparent),
0 0 90px -10px color-mix(in srgb, var(--teal) 80%, transparent),
var(--shadow-md);
}
.solution-card.is-source > * { opacity: 0; transition: opacity 0.25s ease; }
.solution-grid.is-open .solution-card:not(.is-source) { opacity: 0.4; transition: opacity 0.9s ease, transform 0.9s var(--ease); }
.solution-grid.is-open .solution-card.is-source { opacity: 1; }
/* the stage's side column: the services mobilised, each with the part it plays
in the sector, then the contact card */
.stage-services-label {
margin: 0 0 12px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.stage-services-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stage-service {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, var(--line));
color: var(--ink);
text-decoration: none;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.5s var(--ease), box-shadow 0.5s ease;
}
.stage-service .service-icon {
flex: none;
width: 44px;
height: 44px;
font-size: 1.1rem;
background: color-mix(in srgb, var(--stage-accent) 14%, #fff);
color: color-mix(in srgb, var(--stage-accent) 72%, #000);
}
.stage-service-text { display: grid; gap: 3px; min-width: 0; }
.stage-service-text strong { font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
.stage-service-text span { font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.stage-service-arrow {
flex: none;
margin-inline-start: auto;
color: var(--muted);
transition: transform 0.35s var(--ease), color 0.3s ease;
}
.stage-service:hover {
background: #fff;
border-color: color-mix(in srgb, var(--stage-accent) 45%, transparent);
transform: translateY(-2px);
box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--stage-accent) 70%, transparent);
}
.stage-service:hover .stage-service-arrow { color: color-mix(in srgb, var(--stage-accent) 72%, #000); transform: translateX(4px); }
body.is-rtl .stage-service:hover .stage-service-arrow { transform: translateX(-4px); }
.stage-service:focus-visible { outline: 2px solid #1e63c7; outline-offset: 3px; }
body.is-rtl .stage-service-text strong,
body.is-rtl .stage-services-label { font-family: var(--font-ar); letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
.solution-grid.is-open .solution-card:not(.is-source) { opacity: 1; }
}
/* -------------------------------------------------------------------------
26. Cookie consent banner (base.html + static/js/consent.js), footer legal
links, the contact form notice and the privacy page (/privacy/)
------------------------------------------------------------------------- */
.consent {
position: fixed;
z-index: 95;
inset-inline-start: clamp(12px, 2vw, 24px);
bottom: clamp(12px, 2vw, 24px);
width: min(420px, calc(100vw - 2 * clamp(12px, 2vw, 24px)));
opacity: 0;
translate: 0 24px;
transition: opacity 0.6s var(--ease), translate 0.7s var(--ease);
}
.consent.is-open { opacity: 1; translate: 0 0; }
.consent-card {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 26px 26px 22px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--line);
box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.consent-card::before {
content: "";
position: absolute;
z-index: -1;
top: -90px;
inset-inline-end: -90px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(15, 122, 82, 0.22), transparent 65%);
pointer-events: none;
}
.consent .eyebrow { margin-bottom: 12px; }
.consent-title { font-size: 1.22rem; margin-bottom: 10px; }
.consent-text { font-size: 0.93rem; line-height: 1.6; margin-bottom: 16px; }
.consent-list { display: grid; gap: 8px; margin-bottom: 20px; }
.consent-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
font-weight: 500;
color: var(--ink);
}
.consent-list i { color: var(--teal-ink); font-size: 1rem; }
.consent-list em {
margin-inline-start: auto;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn { width: 100%; padding-inline: 16px; }
.consent-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-2);
transition: color 0.2s ease;
}
.consent-link:hover { color: var(--blue); }
.consent-link i { transition: transform 0.4s var(--ease); }
.consent-link:hover i { transform: translateX(4px); }
body.is-rtl .consent-link i { transform: scaleX(-1); }
body.is-rtl .consent-link:hover i { transform: scaleX(-1) translateX(4px); }
body.is-rtl .consent-title { line-height: 1.35; }
@media (max-width: 480px) {
.consent { inset-inline: 10px; bottom: 10px; width: auto; }
.consent-card { padding: 22px 20px 18px; border-radius: var(--radius-md); }
}
@media (prefers-reduced-motion: reduce) {
.consent { transition: none; }
}
/* footer: legal links sit between the copyright and the back-to-top button */
.footer-bottom { flex-wrap: wrap; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.footer-legal a,
.footer-legal-btn {
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
transition: color 0.25s ease;
}
.footer-legal a:hover,
.footer-legal-btn:hover { color: #fff; }
/* contact form: the one-line privacy notice under the submit button */
.form-privacy {
margin: 14px 0 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--muted);
}
.form-privacy a {
color: var(--ink);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(11, 29, 51, 0.3);
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.form-privacy a:hover { color: var(--blue); }
/* privacy page */
.legal-meta {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 22px 0 0;
padding: 10px 16px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.08em;
color: var(--muted);
}
.legal-meta i { color: var(--teal-ink); }
.legal-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 992px) {
.legal-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 80px; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 32px); }
}
.legal-toc h2 {
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.legal-toc ol { display: grid; counter-reset: toc; }
.legal-toc a {
display: flex;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
font-size: 0.92rem;
font-weight: 500;
color: var(--ink-2);
transition: color 0.2s ease, padding 0.35s var(--ease);
}
.legal-toc a::before {
counter-increment: toc;
content: counter(toc, decimal-leading-zero);
padding-top: 3px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--teal-ink);
}
.legal-toc a:hover { color: var(--ink); padding-inline-start: 6px; }
.legal-body { max-width: 780px; }
.legal-section {
padding: clamp(32px, 4vw, 48px) 0;
border-top: 1px solid var(--line);
scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal-section:first-child { padding-top: 0; border-top: 0; }
.legal-section h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 16px; }
.legal-section h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.legal-section p,
.legal-section li {
font-size: 1.03rem;
line-height: 1.7;
color: var(--ink-2);
}
.legal-section p { max-width: 66ch; }
.legal-section ul { display: grid; gap: 10px; margin: 0 0 1.2em; }
.legal-section ul li { position: relative; padding-inline-start: 22px; }
.legal-section ul li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.72em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
.legal-section p a {
color: var(--blue);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(11, 29, 51, 0.3);
text-underline-offset: 3px;
}
.legal-section p a:hover { text-decoration-color: currentColor; }
.legal-section strong { color: var(--ink); font-weight: 600; }
.legal-table-wrap {
overflow-x: auto;
margin: 8px 0 1.4em;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.legal-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.92rem; }
.legal-table th,
.legal-table td {
padding: 12px 16px;
text-align: start;
vertical-align: top;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
}
.legal-table th {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
background: var(--surface-2);
}
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table code { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink); white-space: nowrap; }
.legal-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.legal-tag-essential { background: var(--teal-soft); color: var(--teal-ink); }
.legal-tag-consent { background: #eef2ff; color: #3730a3; }
.legal-contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
body.is-rtl .legal-section h2 { line-height: 1.3; }
body.is-rtl .legal-toc a,
body.is-rtl .legal-section p,
body.is-rtl .legal-section li { line-height: 1.85; }
/* RTL: the mono labels of section 26 fall back to the Arabic face, no tracking
(JetBrains Mono has no Arabic glyphs and letter-spacing breaks the joined script) */
body.is-rtl .consent-list em,
body.is-rtl .legal-meta,
body.is-rtl .legal-toc h2,
body.is-rtl .legal-table th,
body.is-rtl .legal-tag { font-family: var(--font-ar); letter-spacing: 0; }
/* -------------------------------------------------------------------------
27. Corporate identity layer (NMD-Corporate-Design v1.0, 2026-10-31).
The tokens above now carry the brand values (navy #0b1d33 carries, green
#0f7a52 punctuates, bright green #2fb07c on navy); this section adds the
typography, the logo files and the green square on top of the existing
layout, motion and backgrounds.
------------------------------------------------------------------------- */
h1, h2, h3, .display, .h-display, .stat-num, .stage-title, .story-chip h3,
.consent-title, .cta-card h2 { font-family: var(--font-display); }
.display { font-weight: 700; letter-spacing: -0.025em; }
.h-display { font-weight: 700; letter-spacing: -0.02em; }
body.is-rtl h1, body.is-rtl h2, body.is-rtl h3, body.is-rtl .display, body.is-rtl .h-display,
body.is-rtl .stat-num, body.is-rtl .stage-title { font-family: var(--font-ar); letter-spacing: 0; }
/* labels in Inter 500, +8 % tracking; the eyebrow dot becomes the green square */
.eyebrow, .footer-col h3, .stage-services-label, .solution-services-label { font-family: var(--font-sans); letter-spacing: 0.08em; }
.eyebrow-dot { border-radius: 0; }
/* focus ring: blue, never the brand colours (02-couleurs.md) */
:focus-visible { outline-color: #1e63c7; }
.form-control:focus, .form-select:focus { border-color: #1e63c7; }
/* buttons: radius-md instead of pills (components/Button) */
.btn { border-radius: var(--radius-sm); }
/* the official logo files; the monogram alone where the full logo was hidden */
.navbar-brand .brand-logo { display: block; height: 28px; width: auto; }
.navbar-brand .brand-logo--mark { display: none; height: 24px; }
@media (max-width: 359.98px) {
.navbar-brand .brand-logo--full { display: none; }
.navbar-brand .brand-logo--mark { display: block; }
}
.footer-brand .navbar-brand .brand-logo { height: 32px; }
.footer-watermark {
position: absolute;
z-index: -1;
left: 50%;
bottom: -2%;
width: min(58vw, 680px);
height: auto;
transform: translateX(-50%);
opacity: 0.07;
pointer-events: none;
user-select: none;
}
/* hero brand card: the business-card verso of the charte (05-applications.md)
floating at the centre of the hero layers — navy, vertical white logo,
the claim with « Et vous ? » in bright green, site and city */
.hero-brandcard {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 310px;
aspect-ratio: 85 / 55;
padding: 18px 22px 16px;
border-radius: var(--radius-lg);
background: var(--dark);
color: #fff;
box-shadow: 0 40px 80px -36px rgba(11, 29, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
animation: float 9s ease-in-out infinite;
}
.hero-brandcard::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.brandcard-logo { height: 64px; width: auto; align-self: center; margin-top: 4px; }
.brandcard-claim {
margin: 0;
font-family: var(--font-display);
font-size: 0.98rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
}
.brandcard-claim em { display: block; font-style: normal; color: var(--teal-2); }
.brandcard-meta {
margin: 6px 0 0;
font-size: 0.68rem;
letter-spacing: 0.04em;
color: var(--on-dark-2);
}
body.is-rtl .brandcard-claim { font-family: var(--font-ar); letter-spacing: 0; }
@media (max-width: 639px) {
.hero-brandcard { width: 240px; padding: 14px 16px 12px; }
.brandcard-logo { height: 48px; }
.brandcard-claim { font-size: 0.82rem; }
.brandcard-meta { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-brandcard { animation: none; } }
/* the brand card is wider than the former core: the two middle layers move
outward so nothing covers the claim (parallax offsets stay within reach) */
.layer-2 { top: 10%; }
.layer-3 { bottom: 10%; }
.hero-brandcard { width: 296px; }
/* -------------------------------------------------------------------------
28. Ticklist: the self-checking project list beside the services headline
(partials/ticklist.html, sequenced by main.js). A white card in the hero
panel slot: the rows tick one after the other, a new task slides in
half-way and is ticked too, the delivered row appears, then the list
clears and starts again. The markup is the still frame for no-JS and
reduced motion.
------------------------------------------------------------------------- */
@media (min-width: 992px) {
.page-hero-grid--ticklist { grid-template-columns: minmax(0, 1fr) 320px; }
.hero-panel.ticklist { max-width: 320px; }
}
.ticklist {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 20px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.4); /* 40 %, the opacity shared by the three hero panels (sections 28, 29, 31): the hero shows through, the rows read well (was var(--surface)) */
color: var(--ink);
font-family: var(--font-sans);
text-align: start;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 30px 60px -32px rgba(11, 29, 51, 0.38),
0 12px 30px -18px rgba(11, 29, 51, 0.18);
}
.ticklist-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 18px 14px;
}
.ticklist-kicker {
margin: 0 0 4px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.ticklist-title {
margin: 0;
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
}
.ticklist-count {
flex: none;
display: inline-flex;
align-items: baseline;
gap: 1px;
margin-top: 2px;
padding: 4px 9px;
border-radius: 999px;
background: var(--surface-2);
font-family: var(--font-mono);
font-size: 0.7rem;
font-variant-numeric: tabular-nums;
color: var(--muted);
direction: ltr; /* « 5/7 » reads the same in Arabic */
unicode-bidi: isolate;
}
.ticklist-count b { font-weight: 600; color: var(--ink); }
.ticklist-bar { height: 3px; background: var(--surface-2); }
.ticklist-bar span {
display: block;
height: 100%;
background: var(--teal);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.7s var(--ease);
}
.ticklist-items { margin: 0; padding: 0; list-style: none; }
/* every row is a one-track grid so it can fold to nothing (0fr) and back */
.ticklist-item,
.ticklist-foot {
display: grid;
grid-template-rows: 1fr;
border-top: 1px solid var(--line);
transition: grid-template-rows 0.6s var(--ease), border-color 0.4s var(--ease);
}
.ticklist-item:first-child { border-top: 0; }
.ticklist-row {
display: flex;
align-items: center;
gap: 12px;
min-height: 0;
overflow: hidden;
padding: 11px 18px;
transition: padding 0.6s var(--ease), opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.is-collapsed { grid-template-rows: 0fr; border-top-color: transparent; }
.is-collapsed > .ticklist-row { padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(8px); }
.ticklist-box {
flex: none;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 6px;
border: 1.5px solid var(--line-2);
background: transparent;
transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ticklist-box svg {
width: 12px;
height: 12px;
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 22;
stroke-dashoffset: 22;
}
.ticklist-label {
flex: 0 1 auto;
min-width: 0;
font-size: 0.84rem;
font-weight: 500;
line-height: 1.3;
color: var(--ink);
/* the strike-through is a background line that grows from the start edge */
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 1.5px;
background-position: 0 56%;
transition: color 0.4s var(--ease), background-size 0.5s var(--ease) 0.05s;
}
.ticklist-tag {
flex: none;
margin-inline-start: auto;
padding: 3px 8px;
border-radius: 999px;
background: var(--teal-soft);
color: var(--teal-ink);
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
/* a ticked row: the box fills green and pops, the check draws, the label
dims and is struck through, the row flashes once */
.is-done .ticklist-box { background: var(--teal); border-color: var(--teal); animation: tick-pop 0.45s var(--ease-spring); }
.is-done .ticklist-box svg { stroke-dashoffset: 0; transition: stroke-dashoffset 0.35s var(--ease) 0.12s; }
.is-done .ticklist-label { color: var(--muted); background-size: 100% 1.5px; }
.is-done .ticklist-tag { background: var(--surface-2); color: var(--muted); }
.ticklist-item.is-done > .ticklist-row { animation: tick-row 1s var(--ease); }
@keyframes tick-pop {
0% { transform: scale(0.8); }
55% { transform: scale(1.18); }
100% { transform: scale(1); }
}
@keyframes tick-row {
from { background-color: var(--teal-soft); }
to { background-color: transparent; }
}
/* delivered: a green closing row with a pulsing dot */
.ticklist-foot > .ticklist-row {
gap: 8px;
padding: 12px 18px;
background: var(--teal-soft);
color: var(--teal-ink);
font-size: 0.8rem;
font-weight: 600;
}
.ticklist-foot i { font-size: 1rem; line-height: 1; }
.ticklist-foot-dot {
flex: none;
margin-inline-start: auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal-2);
animation: tick-pulse 1.6s ease-out infinite;
}
@keyframes tick-pulse {
0% { box-shadow: 0 0 0 0 rgba(47, 176, 124, 0.55); }
100% { box-shadow: 0 0 0 10px rgba(47, 176, 124, 0); }
}
/* the list fades out, is cleared without transitions (.no-anim), fades back in */
.ticklist-items,
.ticklist-foot { transition: opacity 0.35s var(--ease), grid-template-rows 0.6s var(--ease), border-color 0.4s var(--ease); }
.ticklist.is-resetting .ticklist-items,
.ticklist.is-resetting .ticklist-foot { opacity: 0; }
.ticklist.no-anim,
.ticklist.no-anim * { transition: none !important; animation: none !important; }
body.is-rtl .ticklist-bar span { transform-origin: 100% 50%; }
body.is-rtl .ticklist-label { background-position: 100% 56%; }
body.is-rtl .ticklist-title,
body.is-rtl .ticklist-label,
body.is-rtl .ticklist-kicker,
body.is-rtl .ticklist-tag,
body.is-rtl .ticklist-foot { font-family: var(--font-ar); letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
.ticklist-foot-dot, .is-done .ticklist-box, .ticklist-item.is-done > .ticklist-row { animation: none; }
}
/* -------------------------------------------------------------------------
28. Ribbon backdrop (templates/partials/hero_ribbon.html), shared by the
home page and the Solutions hub: column guides and a navy-grey ribbon
with a halftone dot screen and a green dotted crest, the node network of
main.js drawn over it, the live WebGL version in static/js/hero-ribbon.js.
Moved here from hero-home.css (2026-10-31) so /solutions/ carries the same
backdrop; the home-only sizing stays in hero-home.css.
------------------------------------------------------------------------- */
.hero-ribbon { z-index: -1; }
/* four hairlines: the container edges and its two thirds */
.ribbon-guides {
position: absolute;
inset: 0;
left: 50%;
translate: -50% 0;
border-inline: 1px solid rgba(11, 29, 51, 0.06);
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.ribbon-guides span {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(11, 29, 51, 0.05);
}
.ribbon-guides span:nth-child(1) { inset-inline-start: 33.333%; }
.ribbon-guides span:nth-child(2) { inset-inline-start: 66.666%; }
@media (max-width: 639px) { .ribbon-guides span { display: none; } }
.ribbon-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.ribbon-dots { opacity: 0.22; }
.ribbon-edge {
fill: none;
stroke: #0f7a52;
stroke-width: 3.2;
stroke-linecap: round;
stroke-dasharray: 0 2.4;
opacity: 0.85;
}
/* slow breathing of the ribbon and marching dots along its crest */
@media (prefers-reduced-motion: no-preference) {
.ribbon-drift {
transform-box: view-box;
transform-origin: 100% 0%;
animation: ribbon-drift 22s ease-in-out infinite alternate;
}
.ribbon-edge { animation: ribbon-march 6s linear infinite; }
}
@keyframes ribbon-drift {
from { transform: translate(0, 0) rotate(0deg) scale(1); }
to { transform: translate(-36px, 18px) rotate(-2.5deg) scale(1.04); }
}
@keyframes ribbon-march { to { stroke-dashoffset: -24; } }
/* the host melts into what follows */
.ribbon-fade {
position: absolute;
inset: auto 0 0;
height: 140px;
background: linear-gradient(180deg, rgba(247, 249, 250, 0), #f7f9fa);
}
/* the live shader (static/js/hero-ribbon.js) replaces the SVG once it runs */
.ribbon-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero-ribbon.is-live .ribbon-art { display: none; }
/* the node network over the ribbon */
.hero-ribbon .hero-canvas { opacity: 0.6; }
/* RTL: the ribbon comes in from the other corner */
body.is-rtl .ribbon-art,
body.is-rtl .ribbon-canvas { scale: -1 1; }
/* the Solutions hub on the ribbon (pages/hubs.py, backdrop "ribbon"): the hero
and the card grid share the home ground; the navy stars and links, green
where the pointer reaches in, as on the home hero (colours read by initNetwork) */
.page-hero--ribbon,
.hub-items--ribbon {
background: #f7f9fa;
--net-link: 11, 29, 51;
--net-pointer: 15, 122, 82;
--net-node: 11, 29, 51;
--net-spark: 15, 122, 82;
}
.hub-items--ribbon {
position: relative;
isolation: isolate;
overflow: clip;
color: var(--ink);
}
/* -------------------------------------------------------------------------
29. Hub hero visuals: animated panels in place of the framed stock clips
beside the hub headlines (partials/visual_radial.html on /solutions/,
partials/visual_aiflow.html on /artificial-intelligence/). A navy card
with a thin frame, white paper and chips, green only where work is done:
the beam, the stamps, the checks, the pulses (02-couleurs.md). The AI
panel turns the card white (see "the AI panel on the light hero" below)
so it sits in the hero's own palette instead of against it.
------------------------------------------------------------------------- */
.visual {
--sheet-w: 156px;
--sheet-h: 82px;
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
padding: 18px;
border-radius: var(--radius-lg);
background: var(--dark);
color: #fff;
font-family: var(--font-sans);
box-shadow:
0 0 0 1px rgba(11, 29, 51, 0.08),
0 30px 80px -30px rgba(15, 122, 82, 0.45),
0 20px 50px -30px rgba(11, 29, 51, 0.5);
overflow: hidden;
}
/* a faint white grid and the frame, as on the CTA card and the clips */
.visual::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 36px 36px;
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 85%);
mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 85%);
pointer-events: none;
}
.visual::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
pointer-events: none;
}
.visual > * { position: relative; z-index: 1; }
body.is-rtl .visual { font-family: var(--font-ar); letter-spacing: 0; }
.visual-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-dark-2);
}
body.is-rtl .visual-head { letter-spacing: 0; }
.visual-live {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal-2);
animation: visual-pulse 2.2s ease-out infinite;
}
.visual-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visual-state {
flex: none;
margin-inline-start: auto;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.58rem;
color: #fff;
}
.visual-foot {
display: flex;
align-items: baseline;
gap: 7px;
font-size: 0.74rem;
color: var(--on-dark-2);
}
@keyframes visual-pulse {
0% { box-shadow: 0 0 0 0 rgba(47, 176, 124, 0.55); }
70%, 100% { box-shadow: 0 0 0 9px rgba(47, 176, 124, 0); }
}
/* the panel beside the headline: floats like the clips did, keeps a slight tilt while it floats */
@media (min-width: 992px) {
.visual.hero-panel { max-width: 300px; rotate: -2.5deg; transition: rotate 0.7s var(--ease), box-shadow 0.7s var(--ease); }
.visual.hero-panel:hover { rotate: 0deg; }
.visual-aiflow.hero-panel, .visual-radial.hero-panel { max-width: 400px; rotate: -2deg; }
body.is-rtl .visual.hero-panel { rotate: 2.5deg; }
body.is-rtl .visual-aiflow.hero-panel, body.is-rtl .visual-radial.hero-panel { rotate: 2deg; }
body.is-rtl .visual.hero-panel:hover { rotate: 0deg; }
/* a wider media column for the task pipeline and the services dial */
.page-hero-grid--wide { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (min-width: 1200px) {
.page-hero-grid--wide { grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; }
}
/* ---- the dial (Solutions) --------------------------------------------------
The sectors and functions on a ring (--n nodes, --k the rank of one, the
track in one arc per group, --split the size of the first). The item at
hand sits at the top, under the pill: the wheel turns by --pos steps and
each node turns back by as much, so the icons stay upright. The item
expands there: its node grows green, the beam lights from the core, the
services it mobilises spring into the core and the foot. The core's rim
times the stop (.is-timing, --dwell set by main.js, initRadial). The
ring can be dragged round (.is-dragging: no easing on the turn); any
turn by hand pauses the dial (.is-paused): the core flashes the pause
sign (.is-flash), then the play badge waits for a click on the core,
the play / pause button (.is-auto: the dial turns by itself at all).
RTL turns the other way (--dir). Drawn for the light card of the ribbon hero
(section 31): white nodes, green where the item at hand works. */
.visual-radial {
--n: 7;
--split: 3;
--pos: 0;
--dir: 1;
--r: 116px; /* ring radius */
--node: 46px;
--core: 100px; /* core diameter */
--turn: 1.1s;
--step: calc(360deg / var(--n));
--arc-a: rgba(11, 29, 51, 0.34);
--arc-b: var(--line-2);
}
.visual-radial.is-second { --arc-a: var(--line-2); --arc-b: rgba(11, 29, 51, 0.34); }
body.is-rtl .visual-radial { --dir: -1; }
.rd-scene {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* the pill: the name of the item at hand and its card number, a tooltip over the top node */
.rd-tip {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 9px;
max-width: 100%;
height: 36px;
padding-inline: 16px 6px;
border-radius: 999px;
background: var(--teal);
color: #fff;
font-size: 0.84rem;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 12px 28px -10px rgba(15, 122, 82, 0.7), 0 0 0 5px rgba(15, 122, 82, 0.12);
}
.rd-tip::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 10px;
height: 10px;
translate: -50% 0;
rotate: 45deg;
border-radius: 2px;
background: var(--teal);
}
.rd-tip b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rd-tip-key {
flex: none;
display: grid;
place-items: center;
min-width: 26px;
height: 26px;
padding-inline: 5px;
border-radius: 8px;
background: #fff;
color: var(--teal-ink);
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 500;
}
body.is-rtl .rd-tip-key { font-family: var(--font-ar); }
.rd-tip.is-pop { animation: rd-pop 0.6s var(--ease-spring) 0.2s both; }
/* the ring: a square around the core, sized for the grown top node */
.rd-ring {
position: relative;
width: calc(2 * var(--r) + var(--node) * 1.3);
max-width: 100%;
aspect-ratio: 1;
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.visual-radial.is-dragging .rd-ring { cursor: grabbing; }
.rd-wheel {
position: absolute;
inset: 0;
rotate: calc(var(--pos) * var(--step) * var(--dir) * -1);
transition: rotate var(--turn) var(--ease);
}
/* the track: one arc per group, the group at hand in navy; mirrored in RTL */
.rd-track {
position: absolute;
left: 50%;
top: 50%;
width: calc(2 * var(--r) + 3px);
aspect-ratio: 1;
translate: -50% -50%;
scale: var(--dir) 1;
border-radius: 50%;
background: conic-gradient(from calc(var(--step) * -0.5),
transparent 0 3deg,
var(--arc-a) 0 calc(var(--split) * var(--step) - 3deg),
transparent 0 calc(var(--split) * var(--step) + 3deg),
var(--arc-b) 0 calc(var(--n) * var(--step) - 3deg),
transparent 0);
-webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
/* the beam: from the core's edge up to the top node, lit again at every stop */
.rd-beam {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 50%;
background: conic-gradient(from -21deg, transparent 0deg, rgba(15, 122, 82, 0.42) 6deg 36deg, transparent 42deg);
-webkit-mask-image: radial-gradient(circle, transparent calc(var(--core) / 2 + 2px), rgba(0, 0, 0, 0.3) calc(var(--core) / 2 + 4px), #000 calc(var(--r) - 8px), transparent calc(var(--r) + 2px));
mask-image: radial-gradient(circle, transparent calc(var(--core) / 2 + 2px), rgba(0, 0, 0, 0.3) calc(var(--core) / 2 + 4px), #000 calc(var(--r) - 8px), transparent calc(var(--r) + 2px));
}
.rd-beam.is-pop { animation: rd-beam 0.7s var(--ease) 0.3s both; }
/* the nodes, placed with sin/cos; each turns back by the wheel's turn */
.rd-node {
--a: calc(var(--k) * var(--step) * var(--dir));
position: absolute;
left: calc(50% + var(--r) * sin(var(--a)));
top: calc(50% - var(--r) * cos(var(--a)));
z-index: 2;
display: grid;
place-items: center;
width: var(--node);
height: var(--node);
translate: -50% -50%;
rotate: calc(var(--pos) * var(--step) * var(--dir));
border-radius: 13px;
background: var(--surface);
border: 1px solid var(--line-2);
color: var(--ink);
font-size: 1.15rem;
cursor: pointer;
box-shadow: 0 6px 16px -10px rgba(11, 29, 51, 0.35);
transition: rotate var(--turn) var(--ease), scale 0.5s var(--ease-spring), background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.rd-node:hover { border-color: var(--teal); color: var(--teal-ink); scale: 1.08; }
.rd-node.is-on {
background: var(--teal);
border-color: var(--teal);
color: #fff;
scale: 1.26;
box-shadow: 0 14px 28px -10px rgba(15, 122, 82, 0.7), 0 0 0 5px rgba(15, 122, 82, 0.14);
transition-delay: 0s, 0.35s, 0.35s, 0.35s, 0.35s, 0.35s; /* it grows once it reaches the top */
}
/* while the ring is dragged it follows the pointer: no easing on the turn */
.visual-radial.is-dragging .rd-wheel { transition: none; }
.visual-radial.is-dragging .rd-node,
.visual-radial.is-dragging .rd-node.is-on {
transition: scale 0.3s var(--ease-spring), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* the core: the services of the item at hand, the rim timing the stop */
.rd-core {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 5px;
width: var(--core);
height: var(--core);
padding-inline: 18px;
translate: -50% -50%;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 16px 36px -18px rgba(11, 29, 51, 0.45), 0 0 0 8px rgba(15, 122, 82, 0.06);
}
.rd-core::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid rgba(47, 176, 124, 0.5);
animation: rd-pulse 2.8s ease-out infinite;
pointer-events: none;
}
.rd-timer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
rotate: -90deg;
overflow: visible;
pointer-events: none;
}
body.is-rtl .rd-timer { scale: 1 -1; }
.rd-timer circle { fill: none; stroke-width: 3.5; }
.rd-timer-track { stroke: var(--line); }
.rd-timer-bar { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.rd-core.is-timing .rd-timer-bar { animation: rd-timer var(--dwell, 5200ms) linear both; }
.rd-timer-bar { transition: opacity 0.3s var(--ease); }
.visual-radial.is-paused .rd-timer-bar,
.visual-radial.is-paused .rd-core::before { opacity: 0; }
/* the core as the play / pause button: the sign shows on hover, the pause
sign flashes when the dial stops, the badge says it waits for a click */
.visual-radial.is-auto .rd-core { cursor: pointer; }
.rd-core-glyph {
position: absolute;
inset: 10px;
z-index: 2;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--teal);
color: #fff;
font-size: 2.1rem;
opacity: 0;
scale: 0.4;
rotate: -90deg;
box-shadow: 0 10px 24px -10px rgba(15, 122, 82, 0.7);
transition: opacity 0.3s var(--ease), scale 0.5s var(--ease-spring), rotate 0.5s var(--ease);
pointer-events: none;
}
.rd-core-play i { translate: 2px 0; } /* the triangle's optical centre (media signs are not mirrored in RTL) */
.rd-core.is-flash .rd-core-pause,
.visual-radial.is-dragging .rd-core-pause,
.visual-radial.is-auto:not(.is-paused) .rd-core:hover .rd-core-pause,
.visual-radial.is-paused .rd-core:not(.is-flash):hover .rd-core-play { opacity: 1; scale: 1; rotate: 0deg; }
.rd-core-badge {
position: absolute;
left: 50%;
bottom: -12px;
z-index: 3;
display: grid;
place-items: center;
width: 26px;
height: 26px;
translate: -50% 0;
border-radius: 50%;
background: var(--teal);
border: 2px solid var(--surface);
color: #fff;
font-size: 0.8rem;
opacity: 0;
scale: 0.4;
transition: opacity 0.3s var(--ease), scale 0.45s var(--ease-spring);
}
.rd-core-badge i { translate: 1px 0; }
.visual-radial.is-paused:not(.is-dragging) .rd-core:not(.is-flash) .rd-core-badge { opacity: 1; scale: 1; animation: rd-badge 2s ease-out infinite; }
.visual-radial.is-paused .rd-core:hover .rd-core-badge { opacity: 0; scale: 0.4; }
.rd-core-svc {
position: relative;
display: none;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--teal-soft);
color: var(--teal-ink);
font-size: 0.86rem;
}
.rd-core-svc.is-on { display: grid; animation: rd-spring 0.55s var(--ease-spring) both; animation-delay: calc(0.45s + var(--j, 0) * 0.12s); }
/* the foot: the item's lead, then the services it mobilises as chips */
.rd-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.rd-lead {
display: -webkit-box;
height: 2.9em;
margin: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.76rem;
line-height: 1.45;
color: var(--ink-2);
}
.rd-lead.is-pop { animation: rd-rise 0.5s var(--ease) 0.3s both; }
.rd-foot-label {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
body.is-rtl .rd-foot-label { letter-spacing: 0; }
.rd-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; height: 86px; overflow: hidden; }
.rd-chip {
display: none;
align-items: center;
gap: 6px;
max-width: 100%;
height: 24px;
padding-inline: 9px;
border-radius: 999px;
background: var(--teal-soft);
color: var(--teal-ink);
font-size: 0.68rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rd-chip i { flex: none; font-size: 0.75rem; }
.rd-chip.is-on { display: inline-flex; animation: rd-rise 0.45s var(--ease) both; animation-delay: calc(0.5s + var(--j, 0) * 0.1s); }
@keyframes rd-pop {
0% { scale: 0.86; }
60% { scale: 1.06; }
100% { scale: 1; }
}
@keyframes rd-beam {
from { opacity: 0; scale: 0.88; }
to { opacity: 1; scale: 1; }
}
@keyframes rd-spring {
from { opacity: 0; scale: 0.3; }
to { opacity: 1; scale: 1; }
}
@keyframes rd-rise {
from { opacity: 0; translate: 0 6px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes rd-pulse {
0% { opacity: 0.9; scale: 1; }
100% { opacity: 0; scale: 1.45; }
}
@keyframes rd-badge {
0% { box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.45); }
70%, 100% { box-shadow: 0 0 0 9px rgba(15, 122, 82, 0); }
}
@keyframes rd-timer {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
/* ---- AI workflow (Artificial intelligence) ----------------------------------
Three columns: input chips, the core, output chips, wired through two
vertical buses. main.js (initAiFlow) toggles the classes: .is-on on a row
runs the pulse down its wire and lights the chip, .is-on on a bus and
.is-busy / .is-done on the core light the middle, .is-done on an output
row gives it the green check. */
.visual-aiflow { min-height: 460px; }
.af-board {
display: grid;
grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
grid-template-rows: auto 1fr;
flex: 1;
min-height: 0;
}
.af-col-label {
margin: 0 0 10px;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
.af-col-label-core { text-align: center; }
.af-col-label-out { text-align: end; }
body.is-rtl .af-col-label { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.62rem; }
.af-rows {
display: grid;
grid-auto-rows: 1fr;
gap: 10px;
min-width: 0;
}
.af-row {
display: grid;
grid-template-columns: minmax(0, auto) minmax(14px, 1fr);
align-items: center;
min-width: 0;
}
.af-rows-out .af-row { grid-template-columns: minmax(14px, 1fr) minmax(0, auto); }
.af-chip {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 100%;
padding: 6px 9px 6px 6px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.66rem;
font-weight: 600;
line-height: 1.2;
color: var(--on-dark-2);
text-align: start;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, translate 0.5s var(--ease);
}
body.is-rtl .af-chip { padding: 6px 6px 6px 9px; }
/* two lines at most, so the longest labels still read whole */
.af-chip > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-chip i {
flex: none;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 0.78rem;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.af-row.is-on .af-chip {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(47, 176, 124, 0.6);
color: #fff;
box-shadow: 0 0 24px -6px rgba(47, 176, 124, 0.6);
translate: 2px 0;
}
body.is-rtl .af-row.is-on .af-chip { translate: -2px 0; }
.af-rows-out .af-row.is-on .af-chip { translate: -2px 0; }
body.is-rtl .af-rows-out .af-row.is-on .af-chip { translate: 2px 0; }
/* outputs wait with a hollow ring, then take the green check */
.af-chip-out { padding: 6px 6px 6px 9px; opacity: 0.6; }
body.is-rtl .af-chip-out { padding: 6px 9px 6px 6px; }
.af-chip-out i { order: 1; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); color: transparent; }
.af-row.is-done .af-chip-out { opacity: 1; color: #fff; border-color: rgba(47, 176, 124, 0.45); }
.af-row.is-done .af-chip-out i { background: var(--teal-2); border-color: var(--teal-2); color: #fff; animation: af-pop 0.55s var(--ease-spring); }
.af-wire {
position: relative;
height: 2px;
background: rgba(255, 255, 255, 0.12);
transition: background 0.4s ease;
}
.af-row.is-on .af-wire { background: rgba(47, 176, 124, 0.35); }
.af-dot {
position: absolute;
top: 50%;
left: 0;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--teal-2);
box-shadow: 0 0 12px 3px rgba(47, 176, 124, 0.55);
opacity: 0;
}
body.is-rtl .af-dot { left: auto; right: 0; }
.af-row.is-on .af-dot { animation: af-run 0.6s var(--ease-soft) forwards; }
body.is-rtl .af-row.is-on .af-dot { animation-name: af-run-rtl; }
/* the core and its buses */
.af-core-col {
position: relative;
display: grid;
place-items: center;
}
.af-bus {
position: absolute;
top: 17px;
bottom: 17px;
width: 2px;
background: rgba(255, 255, 255, 0.12);
transition: background 0.35s ease, box-shadow 0.35s ease;
}
.af-bus-in { inset-inline-start: 0; }
.af-bus-out { inset-inline-end: 0; }
.af-bus.is-on { background: var(--teal-2); box-shadow: 0 0 12px rgba(47, 176, 124, 0.6); }
.af-core {
position: relative;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.04), 0 18px 30px -16px rgba(0, 0, 0, 0.8);
transition: background 0.4s ease, box-shadow 0.5s ease, border-color 0.4s ease;
}
.af-core-ring {
position: absolute;
inset: -6px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 68%, var(--teal-2) 88%, transparent 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
opacity: 0.7;
animation: spin 7s linear infinite;
transition: opacity 0.4s ease;
}
.af-core-icon { font-size: 1.25rem; color: #fff; transition: transform 0.4s var(--ease-spring), color 0.3s ease; }
.af-core.is-busy { box-shadow: 0 0 0 7px rgba(47, 176, 124, 0.12), 0 0 40px -6px rgba(47, 176, 124, 0.7); border-color: rgba(47, 176, 124, 0.6); }
.af-core.is-busy .af-core-ring { opacity: 1; animation-duration: 1.1s; }
.af-core.is-busy .af-core-icon { animation: af-think 1.1s ease-in-out infinite; }
.af-core.is-done { background: var(--teal); border-color: var(--teal-2); box-shadow: 0 0 0 7px rgba(47, 176, 124, 0.18), 0 0 50px -4px rgba(47, 176, 124, 0.8); }
.af-core.is-done .af-core-icon { transform: scale(1.15); }
/* the foot: progress bar, the action under way, tasks done */
.af-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.af-bar {
display: block;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.af-bar span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--teal-2);
transition: width 0.6s var(--ease);
}
.af-foot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.72rem; }
.af-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-dark-2); }
.af-counter { flex: none; font-variant-numeric: tabular-nums; color: var(--on-dark-muted); }
.af-counter b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: #fff; }
body.is-rtl .af-counter b { font-family: var(--font-ar); }
/* ---- the AI panel on the light hero ---------------------------------------
/artificial-intelligence/ keeps the hero's own palette (02-couleurs.md):
a white card on the page background like the services ticklist, navy ink,
a navy core, and green only for the work done (pulses, checks, the bar).
Like the Solutions panel (section 31) the card itself is 40 % white so the
hero's clip and node network show through; chips and core stay solid. */
.visual-aiflow {
background: rgba(255, 255, 255, 0.4); /* 40 %, as .page-hero--ribbon .visual and the ticklist (was var(--surface)) */
color: var(--ink);
border: 1px solid var(--line);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 30px 60px -32px rgba(11, 29, 51, 0.38),
0 12px 30px -18px rgba(11, 29, 51, 0.18);
}
.visual-aiflow::before {
background-image:
linear-gradient(rgba(11, 29, 51, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 29, 51, 0.05) 1px, transparent 1px);
}
.visual-aiflow::after { border-color: transparent; box-shadow: none; }
.visual-aiflow .visual-head { color: var(--muted); }
.visual-aiflow .visual-live { background: var(--teal); animation-name: visual-pulse-teal; }
.visual-aiflow .visual-state { background: var(--bg); border-color: var(--line); color: var(--ink-2); }
.visual-aiflow .visual-foot { color: var(--muted); }
.visual-aiflow .af-col-label { color: var(--muted); }
.visual-aiflow .af-chip {
background: var(--bg);
border-color: var(--line);
color: var(--ink-2);
}
.visual-aiflow .af-chip i { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
/* the input at work: navy tile, a soft green ring, a navy shadow instead of a glow */
.visual-aiflow .af-row.is-on .af-chip {
background: var(--surface);
border-color: rgba(15, 122, 82, 0.45);
color: var(--ink);
box-shadow: 0 0 0 3px var(--teal-soft), 0 12px 24px -14px rgba(11, 29, 51, 0.35);
}
.visual-aiflow .af-row.is-on .af-chip i { background: var(--ink); box-shadow: none; color: #fff; }
.visual-aiflow .af-chip-out i { background: transparent; box-shadow: none; border-color: var(--line-2); color: transparent; }
.visual-aiflow .af-row.is-done .af-chip-out { background: var(--surface); border-color: rgba(15, 122, 82, 0.35); color: var(--ink); }
.visual-aiflow .af-row.is-done .af-chip-out i { background: var(--teal); border-color: var(--teal); color: #fff; }
.visual-aiflow .af-wire { background: var(--line-2); }
.visual-aiflow .af-row.is-on .af-wire { background: rgba(15, 122, 82, 0.35); }
.visual-aiflow .af-dot { background: var(--teal); box-shadow: 0 0 10px 2px rgba(15, 122, 82, 0.3); }
.visual-aiflow .af-bus { background: var(--line-2); }
.visual-aiflow .af-bus.is-on { background: var(--teal); box-shadow: 0 0 10px rgba(15, 122, 82, 0.3); }
.visual-aiflow .af-core {
background: var(--ink);
border-color: var(--ink);
box-shadow: 0 0 0 6px var(--bg), 0 14px 28px -14px rgba(11, 29, 51, 0.55);
}
.visual-aiflow .af-core-ring { background: conic-gradient(from 0deg, transparent 0 68%, var(--teal) 88%, transparent 100%); }
.visual-aiflow .af-core.is-busy { border-color: var(--teal); box-shadow: 0 0 0 6px var(--teal-soft), 0 14px 28px -14px rgba(11, 29, 51, 0.55); }
.visual-aiflow .af-core.is-done { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 6px var(--teal-soft), 0 14px 30px -12px rgba(15, 122, 82, 0.45); }
.visual-aiflow .af-bar { background: var(--surface-2); }
.visual-aiflow .af-bar span { background: var(--teal); }
.visual-aiflow .af-action { color: var(--ink-2); }
.visual-aiflow .af-counter { color: var(--muted); }
.visual-aiflow .af-counter b { color: var(--ink); }
@keyframes visual-pulse-teal {
0% { box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.4); }
70%, 100% { box-shadow: 0 0 0 9px rgba(15, 122, 82, 0); }
}
@keyframes af-run {
0% { opacity: 0; left: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; left: calc(100% - 8px); }
}
@keyframes af-run-rtl {
0% { opacity: 0; right: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; right: calc(100% - 8px); }
}
@keyframes af-pop {
0% { scale: 0.4; }
60% { scale: 1.25; }
100% { scale: 1; }
}
@keyframes af-think {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.88); }
}
/* -------------------------------------------------------------------------
30. Hub groups (pages/hubs.py, `groups`): the Solutions items read in two
groups, the industries then the business functions, under a small label in
the dropdown, in the hero's jump links and over each card grid.
------------------------------------------------------------------------- */
.nav-sub-group {
margin: 8px 8px 3px;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dd-muted, var(--muted));
}
/* stacked groups (narrow screens) keep some air between them; side by side (5c) their labels stay level */
@media (max-width: 959.98px) { .nav-sub-col + .nav-sub-col .nav-sub-group { margin-top: 12px; } }
body.is-rtl .nav-sub-group { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.72rem; }
.solution-jump-label {
flex-basis: 100%;
margin: 6px 0 0;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.solution-jump-label:first-child { margin-top: 0; }
body.is-rtl .solution-jump-label { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.78rem; }
/* the group heads of the page are the chapter side columns of section 21b (2026-11-03) */
/* -------------------------------------------------------------------------
31. Light hub visual: on the ribbon backdrop (/solutions/) the panel beside
the headline is a white card, like the ticklist of the services hero and
the AI board (section 29): white surface, hairline border, the
navy-tinted shadow of the charte's cards, navy ink; the green stays on
the live dot and on the lit parts of the dial (02-couleurs.md: white
carries, green marks).
------------------------------------------------------------------------- */
.page-hero--ribbon .visual {
background: rgba(255, 255, 255, 0.4); /* 40 %: the ribbon shows through, as the AI panel and the ticklist (was var(--surface)) */
color: var(--ink);
border: 1px solid var(--line);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 30px 60px -32px rgba(11, 29, 51, 0.38),
0 12px 30px -18px rgba(11, 29, 51, 0.18);
}
.page-hero--ribbon .visual::before {
background-image:
linear-gradient(rgba(11, 29, 51, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 29, 51, 0.05) 1px, transparent 1px);
}
.page-hero--ribbon .visual::after { border-color: transparent; box-shadow: none; }
.page-hero--ribbon .visual-head { color: var(--muted); }
.page-hero--ribbon .visual-state {
background: var(--surface-2);
border-color: transparent;
color: var(--ink-2);
}
.page-hero--ribbon .visual-foot { color: var(--muted); }
/* the services dial (section 29) is drawn for this light card directly */
/* -------------------------------------------------------------------------
32. No stock footage left on the hub stage, the services hero and the
about hero (2026-10-31). The hub stage (partials/hub_stage.html) sits on
the ribbon like the page behind it: the ribbon's own fade melts into the
window's ground and the accent tint is lighter, so the band shows through
behind the services column. The about hero reuses the home hero's centre
piece (hero-home.css, loaded by pages/about.html): the navy brand card
with the three values as chips around it, wired to the card by the node
network (main.js, initNetwork); only their places are set here.
------------------------------------------------------------------------- */
.hub-stage .stage-backdrop .ribbon-fade { background: linear-gradient(180deg, rgba(243, 245, 248, 0), var(--bg)); }
.hub-stage .stage-tint {
background:
radial-gradient(55% 60% at 82% 12%, color-mix(in srgb, var(--stage-accent) 8%, transparent), transparent 70%),
linear-gradient(105deg, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 34%, transparent) 55%, transparent 100%);
}
.hub-stage .stage-backdrop .hero-canvas { opacity: 0.45; }
/* the about visual: one chip at the top start, one at the end middle, one at
the bottom start, clear of the card; floating out of phase like the sector chips */
.hero-visual--about { margin-inline: auto; }
.layer-v1 { top: 6%; inset-inline-start: -6%; }
.layer-v2 { top: 50%; inset-inline-end: -12%; margin-top: -22px; }
.layer-v3 { bottom: 6%; inset-inline-start: 2%; }
.card-v2 { animation-delay: -2.5s; }
.card-v3 { animation-delay: -4s; }
/* -------------------------------------------------------------------------
33. Story plates: the schema of a service drawn on the navy plate of its
panel on /services/ (partials/story_schema.html, content in
services/schemas.py) where the stock clip used to play. Four facets as
tiles, arranged as a flow (a wire runs under them, a pulse along it), a
hub (the service icon at the centre, buses and wires out to the corners)
or a stack (layers, a beam sweeping them beside a monitor). The panel's
accent lights the facet at work; a faint grid and the ghost of the icon
drift with --drift (main.js) for the depth the clip gave. The plate of
the current panel runs (.is-current, main.js), one facet per quarter of
--T; the others rest. Without JavaScript or under reduced motion every
facet shows lit: the finished schema.
------------------------------------------------------------------------- */
.story-plate {
--T: 6.4s;
--lit: var(--accent, var(--teal-2));
--lit-soft: color-mix(in srgb, var(--lit) 55%, transparent);
--lit-glow: 0 0 34px -8px color-mix(in srgb, var(--lit) 70%, transparent);
--lit-fill: color-mix(in srgb, var(--lit) 9%, var(--dark-2));
}
.story-scene {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 22px 22px;
color: #fff;
font-family: var(--font-sans);
}
body.is-rtl .story-scene { font-family: var(--font-ar); }
/* the layers behind the board: the grid and the ghost, drifting against the rail */
.story-scene-grid {
position: absolute;
inset: -40px -140px;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 36px 36px;
-webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 80%);
mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 80%);
transform: translate3d(calc(var(--drift) * 1px), 0, 0);
will-change: transform;
pointer-events: none;
}
.story-scene-ghost {
position: absolute;
inset-inline-end: -2%;
bottom: -16%;
font-size: clamp(150px, 26vw, 300px);
line-height: 1;
color: #fff;
opacity: 0.05;
transform: translate3d(calc(var(--drift) * 0.45px), 0, 0);
will-change: transform;
pointer-events: none;
}
.story-scene-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-dark-2);
}
body.is-rtl .story-scene-head { letter-spacing: 0; }
.story-scene-square { flex: none; width: 8px; height: 8px; background: var(--teal-2); }
.story-scene-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-scene-kind {
flex: none;
margin-inline-start: auto;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.58rem;
color: #fff;
}
/* the board keeps clear of the caption chip along the bottom */
.story-scene-board {
position: relative;
z-index: 1;
flex: 1;
min-height: 0;
display: grid;
align-content: center;
margin-bottom: 64px;
}
.story-tiles { display: grid; margin: 0; padding: 0; list-style: none; }
.story-item { display: flex; align-items: center; min-width: 0; }
.story-tile {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
min-width: 0;
padding: 12px 14px;
border-radius: 14px;
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.story-tile-icon {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 1rem;
}
.story-tile-text { display: grid; gap: 2px; min-width: 0; }
.story-tile-text strong { font-size: 0.9rem; font-weight: 600; line-height: 1.25; color: #fff; }
.story-tile-text span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.78rem;
line-height: 1.4;
color: var(--on-dark-2);
}
.story-tile-num {
position: absolute;
top: 10px;
inset-inline-end: 12px;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.12em;
color: var(--on-dark-muted);
}
/* wires and the pulse that runs along them */
.story-wire { position: relative; flex: 1; height: 2px; background: rgba(255, 255, 255, 0.12); }
.story-wire-dot {
position: absolute;
top: 50%;
inset-inline-start: 0;
width: 10px;
height: 10px;
margin-top: -5px;
border-radius: 50%;
background: var(--lit);
box-shadow: 0 0 14px 3px color-mix(in srgb, var(--lit) 55%, transparent);
opacity: 0;
}
/* flow: four steps in a row, numbered, on one wire */
.story-flow { position: relative; }
.story-flow-wire { position: absolute; top: 50%; inset-inline: 8%; margin-top: -1px; }
.story-flow .story-tiles { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.story-flow .story-tile { flex-direction: column; gap: 14px; padding: 18px 16px; }
.story-flow .story-tile-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 1.1rem; }
/* hub: the service icon at the centre, two facets a side wired to the buses
standing --hub-in inside the middle column (the items reach over by as much) */
.story-hub { position: relative; --hub-mid: 176px; --hub-in: 40px; }
.story-hub .story-tiles {
grid-template-columns: minmax(0, 1fr) var(--hub-mid) minmax(0, 1fr);
row-gap: 22px;
align-items: center;
}
.story-hub .story-tile { max-width: 330px; }
.story-hub .story-item:nth-child(1) { grid-area: 1 / 1; }
.story-hub .story-item:nth-child(2) { grid-area: 2 / 1; }
.story-hub .story-item:nth-child(3) { grid-area: 1 / 3; }
.story-hub .story-item:nth-child(4) { grid-area: 2 / 3; }
.story-hub .story-item:nth-child(-n+2) { margin-inline-end: calc(-1 * var(--hub-in)); }
.story-hub .story-item:nth-child(n+3) { flex-direction: row-reverse; margin-inline-start: calc(-1 * var(--hub-in)); }
.story-hub-bus {
position: absolute;
top: 25%;
bottom: 25%;
width: 2px;
background: rgba(255, 255, 255, 0.12);
}
.story-hub-bus-a { inset-inline-start: calc(50% - var(--hub-mid) / 2 + var(--hub-in)); }
.story-hub-bus-b { inset-inline-end: calc(50% - var(--hub-mid) / 2 + var(--hub-in)); }
.story-hub-core {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
display: grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04), 0 18px 30px -16px rgba(0, 0, 0, 0.8);
font-size: 1.7rem;
color: #fff;
}
.story-hub-ring {
position: absolute;
inset: -7px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 68%, var(--lit) 88%, transparent 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
opacity: 0.7;
}
/* stack: the layers one above the other, a beam sweeping them beside the monitor */
.story-stack { display: grid; grid-template-columns: minmax(0, 1fr) 120px; column-gap: 24px; align-items: stretch; }
.story-stack .story-tiles { gap: 6px; align-content: center; }
.story-stack .story-tile { align-items: center; padding: 8px 12px; border-radius: 12px; }
.story-stack .story-tile-icon { width: 32px; height: 32px; font-size: 0.95rem; }
.story-stack .story-tile-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.story-stack .story-tile-text span { -webkit-line-clamp: 1; }
.story-tile-led {
flex: none;
margin-inline-start: auto;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.story-stack-monitor { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.story-stack-monitor-label {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-dark-muted);
}
body.is-rtl .story-stack-monitor-label { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.64rem; }
.story-stack-rail { position: relative; flex: 1; width: 2px; background: rgba(255, 255, 255, 0.12); }
.story-stack-beam {
position: absolute;
top: 0;
left: 50%;
width: 10px;
height: 10px;
margin-left: -5px;
border-radius: 50%;
background: var(--lit);
box-shadow: 0 0 14px 3px color-mix(in srgb, var(--lit) 55%, transparent);
opacity: 0;
}
/* every facet lit: the finished schema, the still frame without JavaScript
or under reduced motion */
html:not(.js) .story-tile { border-color: var(--lit-soft); background: var(--lit-fill); box-shadow: var(--lit-glow); }
html:not(.js) .story-tile-icon { background: var(--lit); }
html:not(.js) .story-tile-led { background: var(--lit); border-color: var(--lit); }
@media (prefers-reduced-motion: reduce) {
.story-tile { border-color: var(--lit-soft); background: var(--lit-fill); box-shadow: var(--lit-glow); }
.story-tile-icon { background: var(--lit); }
.story-tile-led { background: var(--lit); border-color: var(--lit); }
}
/* the current panel runs: one facet per quarter of the period, the pulses,
the beam and the core keeping time with it */
@media (prefers-reduced-motion: no-preference) {
.js .story-panel.is-current .story-tile,
.js .story-panel.is-current .story-tile-icon,
.js .story-panel.is-current .story-tile-led {
animation-duration: var(--T);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-delay: calc(var(--i) * var(--T) / 4);
}
.js .story-panel.is-current .story-tile { animation-name: story-lit; }
.js .story-panel.is-current .story-tile-icon { animation-name: story-lit-icon; }
.js .story-panel.is-current .story-tile-led { animation-name: story-lit-led; }
.js .story-panel.is-current .story-flow .story-wire-dot { animation: story-run var(--T) linear infinite; }
.js .story-panel.is-current .story-hub .story-wire-dot {
animation: story-pulse var(--T) linear infinite;
animation-delay: calc(var(--i) * var(--T) / 4);
}
.js .story-panel.is-current .story-hub .story-item:nth-child(n+3) .story-wire-dot { animation-name: story-pulse-back; }
.js .story-panel.is-current .story-hub-ring { animation: spin 7s linear infinite; }
.js .story-panel.is-current .story-hub-core { animation: story-core var(--T) linear infinite; }
.js .story-panel.is-current .story-stack-beam { animation: story-beam var(--T) linear infinite; }
}
@keyframes story-lit {
0%, 22% { border-color: var(--lit-soft); background-color: var(--lit-fill); box-shadow: var(--lit-glow); }
27%, 100% { border-color: rgba(255, 255, 255, 0.12); background-color: var(--dark-2); box-shadow: 0 0 34px -8px transparent; }
}
@keyframes story-lit-icon {
0%, 22% { background-color: var(--lit); }
27%, 100% { background-color: rgba(255, 255, 255, 0.1); }
}
@keyframes story-lit-led {
0%, 22% { background-color: var(--lit); border-color: var(--lit); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lit) 55%, transparent); }
27%, 100% { background-color: transparent; border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 10px 2px transparent; }
}
@keyframes story-run {
0% { inset-inline-start: 0; opacity: 0; }
2%, 97% { opacity: 1; }
100% { inset-inline-start: calc(100% - 10px); opacity: 0; }
}
@keyframes story-pulse {
0% { inset-inline-start: 0; opacity: 0; }
1%, 9% { opacity: 1; }
10%, 100% { inset-inline-start: calc(100% - 10px); opacity: 0; }
}
@keyframes story-pulse-back {
0% { inset-inline-start: calc(100% - 10px); opacity: 0; }
1%, 9% { opacity: 1; }
10%, 100% { inset-inline-start: 0; opacity: 0; }
}
@keyframes story-core {
0%, 20%, 25%, 45%, 50%, 70%, 75%, 95%, 100% { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04), 0 18px 30px -16px rgba(0, 0, 0, 0.8); }
10%, 35%, 60%, 85% { border-color: var(--lit-soft); box-shadow: 0 0 0 8px color-mix(in srgb, var(--lit) 14%, transparent), 0 0 44px -6px color-mix(in srgb, var(--lit) 75%, transparent); }
}
@keyframes story-beam {
0% { top: 0; opacity: 0; }
2%, 97% { opacity: 1; }
100% { top: calc(100% - 10px); opacity: 0; }
}
/* narrower desktops: the rail panels are 78vw, the plates 770-940px wide */
@media (min-width: 992px) and (max-width: 1199.98px) {
.story-scene { padding: 16px 18px 18px; gap: 12px; }
.story-tile-text strong { font-size: 0.84rem; }
.story-tile-text span { font-size: 0.74rem; }
.story-flow .story-tiles { gap: 16px; }
.story-hub { --hub-mid: 140px; --hub-in: 32px; }
.story-hub-core { width: 68px; height: 68px; font-size: 1.4rem; }
.story-stack { grid-template-columns: minmax(0, 1fr) 90px; column-gap: 16px; }
}
/* the deck cards of phones and tablets: smaller plates, tighter tiles */
@media (max-width: 991.98px) {
.story-scene { padding: 14px 16px 16px; gap: 10px; }
.story-scene-board { margin-bottom: 56px; }
.story-tile { gap: 10px; padding: 10px 12px; border-radius: 12px; }
.story-tile-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 0.9rem; }
.story-tile-text strong { font-size: 0.8rem; }
.story-tile-text span { font-size: 0.7rem; }
.story-flow-wire { display: none; }
.story-flow .story-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
.story-flow .story-tile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.story-flow .story-tile-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 0.9rem; }
.story-tile-num { display: none; }
.story-hub { --hub-mid: 96px; --hub-in: 24px; }
.story-hub .story-tiles { row-gap: 12px; }
.story-hub-core { width: 56px; height: 56px; font-size: 1.2rem; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04); }
.story-hub-ring { inset: -5px; }
.story-stack { grid-template-columns: minmax(0, 1fr) 64px; column-gap: 12px; }
.story-stack .story-tile { padding: 7px 10px; }
.story-stack .story-tile-icon { width: 28px; height: 28px; }
}
/* phones: a square plate, the facets as a plain two-by-two or four rows,
titles only; the hub loses its core, the stack its monitor */
@media (max-width: 639.98px) {
.story-plate { aspect-ratio: 1 / 1; }
.story-scene { padding: 12px; }
.story-scene-head { font-size: 0.6rem; }
.story-scene-kind { display: none; }
.story-scene-ghost { font-size: 160px; }
.story-tile-text span { display: none; }
.story-hub .story-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
.story-hub .story-item:nth-child(3) { grid-area: 1 / 2; }
.story-hub .story-item:nth-child(4) { grid-area: 2 / 2; }
.story-hub .story-item:nth-child(-n+2) { margin-inline-end: 0; }
.story-hub .story-item:nth-child(n+3) { flex-direction: row; margin-inline-start: 0; }
.story-hub .story-wire,
.story-hub-bus,
.story-hub-core { display: none; }
.story-stack { grid-template-columns: minmax(0, 1fr); }
.story-stack .story-tile-icon { width: 26px; height: 26px; }
.story-stack-monitor { display: none; }
}