/* About (/about), v9 about.html. Scoped to .site[data-page="about"].
v9's About loads the home page's stack (genero-v4, wwa-editorial, final, portfolio-d), then
about-d.css, lux-v5, v7, v8 and v9 — but not the sub-pages' style.css, so v8's and v9's
"body.subpage" rules never reach it. What is here is about-d's v4 additions and the v7/v8/v9 rules
that name About's own sections: Who We Are (.ab-wwa), Industry Focus (.ab-if), Our Milestone
(#our-milestone, here .ab-ms) and the credibility band (#cred-title). site.css's About block is
v3's and is refined here rather than rewritten; the banner, the previous / next pair and the
footer are the shared sub-page layer.
The tokens are mapped as site.css maps them: the mockup's --pgrey is #545454 (--ink-soft), its
serif is --font-display, and v8's Proof Blue is --blue. */
/* ---- The banner ------------------------------------------------------------------------------
site.css still draws About's cover as v3 did: a navy wash, the line under the title in white
upright type, the page in the trail in yellow, 280px on a phone. v9's is the sub-pages' banner
with About's one GenArrow — the flat scrim over the text column (F26), the standfirst in Inria
Serif Italic, Genero Yellow (.ab-hero-sub), the page in the trail white, 360px on a phone (F29). */
.site[data-page="about"] .ab-hero .subhero-bg::after {
background:
linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.06) 100%),
linear-gradient(90deg, rgba(10,137,170,.75) 0%, rgba(10,137,170,.75) 55%, rgba(10,137,170,.3) 80%, rgba(10,137,170,.1) 100%);
}
.site[data-page="about"] .ab-hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.site[data-page="about"] .ab-hero p { margin: 14px 0 0; max-width: 600px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.5; color: var(--yellow); text-shadow: 0 1px 12px rgba(0,0,0,.24); }
/* Labels in capitals are never under 12px (v8 F27). */
.site[data-page="about"] .ab-hero .breadcrumb { font-size: max(12px, .75rem); }
.site[data-page="about"] .ab-hero .breadcrumb [aria-current] { color: #fff; }
@media (max-width: 720px) { .site[data-page="about"] .ab-hero { min-height: 360px; } }
@media (max-width: 600px) { .site[data-page="about"] .ab-hero p { font-size: 1.1rem; } }
/* ---- Who We Are, compact (v7 #1, v9 #5–#7) ---------------------------------------------------
The copy on the left — the heading with its GenArrow inline and the yellow rule beside it on one
line, then the lead and the paragraph after it — and the two photographs on the right, side by
side over a plane of Soft Light Blue, the second set lower. Padded tight so the 340px banner and
this band (≤ 560px) fill a 1440×900 screen without scrolling. H2 in Montserrat Light with its
keyword in the display face (v8 F05); the body Light, the lead Regular (F07). */
.site[data-page="about"] .ab-wwa { background: #fff; padding: 52px 0 56px; }
.site[data-page="about"] .ab-wwa-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: center; }
.site[data-page="about"] .ab-wwa-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.site[data-page="about"] .ab-wwa-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.site[data-page="about"] .ab-wwa-head h2 { margin: 0; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.12; font-weight: 300; letter-spacing: -.02em; color: var(--ink-soft); }
.site[data-page="about"] .ab-wwa-head h2 em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--teal); }
/* On the heading's first line, in front of the words (v9 #7), at 300 degrees from site.css. */
.site[data-page="about"] .ab-wwa-head h2 .ga-sig { display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin: 0 12px 6px 0; fill: var(--teal); }
.site[data-page="about"] .ab-wwa-rule { display: block; width: 56px; height: 3px; margin-bottom: 12px; background: var(--yellow); }
.site[data-page="about"] .ab-wwa-body { display: flex; flex-direction: column; gap: 14px; }
.site[data-page="about"] .ab-wwa-body p { margin: 0; font-size: 15px; line-height: 1.75; font-weight: 300; color: var(--ink-soft); }
/* The first paragraph is the lead: the editor writes two paragraphs, the layout picks the first. */
.site[data-page="about"] .ab-wwa-body p:first-child { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; font-weight: 400; }
.site[data-page="about"] .ab-wwa-media { position: relative; margin: 0; padding: 0 0 28px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: end; }
.site[data-page="about"] .ab-wwa-plane { position: absolute; right: 0; bottom: 0; z-index: 0; width: 70%; height: 70%; background: var(--ice); }
.site[data-page="about"] .ab-wwa-ph { position: relative; z-index: 1; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.site[data-page="about"] .ab-wwa-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.site[data-page="about"] .ab-wwa-ph.a img { object-position: 50% 45%; }
.site[data-page="about"] .ab-wwa-ph.b { margin: 0 0 -28px; }
@media (max-width: 1100px) { .site[data-page="about"] .ab-wwa-row { column-gap: 40px; } }
@media (max-width: 900px) {
.site[data-page="about"] .ab-wwa { padding: var(--sec-y-m) 0; }
.site[data-page="about"] .ab-wwa-row { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.site[data-page="about"] .ab-wwa-media { max-width: 520px; }
}
/* A short laptop screen (1366×768, 1280×800): still the first screen, on tighter type. */
@media (min-width: 901px) and (max-height: 800px) {
.site[data-page="about"] .ab-wwa { padding: 30px 0 36px; }
.site[data-page="about"] .ab-wwa-copy { gap: 16px; }
.site[data-page="about"] .ab-wwa-head h2 { font-size: clamp(1.8rem, 2.5vw, 2.2rem); }
.site[data-page="about"] .ab-wwa-body { gap: 10px; }
.site[data-page="about"] .ab-wwa-body p { font-size: 14.5px; line-height: 1.65; }
.site[data-page="about"] .ab-wwa-body p:first-child { font-size: 1.05rem; line-height: 1.55; }
.site[data-page="about"] .ab-wwa-ph { aspect-ratio: 4 / 5; }
}
/* ---- Industry Focus (about-d v4, v8) ---------------------------------------------------------
The editorial head over the five industries on Soft Light Blue: each a white card under a
Genero Yellow rule, the illustration over its colour shape (the pattern of the old .ind2-card),
the name in Inria Serif Italic (v8 F06) — at every width, since v8's size outranks about-d's
phone step. */
.site[data-page="about"] .ab-if-head { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.site[data-page="about"] .ab-if-title { margin: 0; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.16; font-weight: 300; letter-spacing: -.02em; color: var(--ink-soft); }
.site[data-page="about"] .ab-if-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--teal); }
.site[data-page="about"] .ab-if-lead p { margin: 0; font-size: 1rem; line-height: 1.85; font-weight: 400; color: var(--ink-soft); }
.site[data-page="about"] .ab-if-list { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.site[data-page="about"] .ab-if-item { margin: 0; padding: 28px 18px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-top: 3px solid var(--yellow); }
.site[data-page="about"] .ab-if-ph { position: relative; display: block; width: 100%; max-width: 150px; aspect-ratio: 1 / 1.05; margin: 0 auto 16px; }
.site[data-page="about"] .ab-if-ph .ph-accent { position: absolute; top: 6%; left: -16%; z-index: 1; width: 100%; height: 100%; opacity: .92; }
.site[data-page="about"] .ab-if-ph .ph-main { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.site[data-page="about"] .ab-if-item:hover .ph-main { transform: translateY(-4px); }
.site[data-page="about"] .ab-if-item h3 { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1.3; letter-spacing: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .site[data-page="about"] .ab-if-ph .ph-main { transition: none; } }
@media (max-width: 1080px) { .site[data-page="about"] .ab-if-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .site[data-page="about"] .ab-if-list { margin-top: 40px; } }
@media (max-width: 600px) {
.site[data-page="about"] .ab-if-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.site[data-page="about"] .ab-if-item { padding: 22px 12px 20px; }
.site[data-page="about"] .ab-if-ph { max-width: 120px; }
}
/* ---- Section labels' GenArrow (v8 F11) -------------------------------------------------------
A forward mark in the content turns the guideline's way, 60 degrees (Opportunity &
Acceleration), where site.css draws Industry Focus's at 90 and Milestone's at 300. */
.site[data-page="about"] .ab-if .wwa-ed-eyebrow .ga-icon,
.site[data-page="about"] .ab-ms .wwa-ed-eyebrow .ga-icon { transform: rotate(60deg); }
/* ---- Our Milestone (about-d v4, v8, v9 #9) ---------------------------------------------------
On white now, with the faint mark under the head gone: the label's GenArrow is the section's one.
The heading Light with its keyword in the display face; each year's period in spaced capitals,
Proof Blue at 12px (F26, F27), over its heading in Inria Serif Italic (F06); an unlit node is
white rather than Soft Light Blue, to sit on the white band. */
.site[data-page="about"] .ab-ms h2 { font-weight: 300; letter-spacing: -.02em; color: var(--ink-soft); }
.site[data-page="about"] .ab-ms .ms-b { padding-top: calc(var(--ys) / 2 - .6rem); }
.site[data-page="about"] .ab-ms .ms-tag { margin: 0 0 6px; font-size: max(12px, .75rem); font-weight: 600; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: var(--blue); }
.site[data-page="about"] .ab-ms .ms-b h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.3; letter-spacing: 0; color: var(--ink-soft); }
.site[data-page="about"] .ab-ms.is-js .ms-item::before { background: #fff; }
.site[data-page="about"] .ab-ms.is-js .ms-item.on::before { background: var(--yellow); }
/* ---- Credibility and Regulatory Assurance (v8 F05, F13; about-d .ab-certs) ----------------------
The band's heading Light with the section's GenArrow in front of it, 240 degrees, in Genero
Yellow. The cards are the home page's, set straight under the band (v9 has no intro line between
them), the code in Proof Grey and allowed to break — "ISO/IEC 17025:2017" is long — and the line
under it at 15px (lux-v5). */
.site[data-page="about"] .band h2 { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-weight: 300; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.02em; color: #fff; }
.site[data-page="about"] .band h2 .ga-sig { display: inline-block; flex: none; width: 22px; height: 22px; margin: 0; fill: var(--yellow); }
.site[data-page="about"] .cert-grid { margin-top: 0; }
.site[data-page="about"] .cert-code { overflow-wrap: anywhere; color: var(--ink-soft); }
.site[data-page="about"] .cert-desc { font-size: max(15px, .9rem); line-height: 1.7; }
/* ---- In the editor -----------------------------------------------------------------------------
EditableItem's wrapper takes each row's place in a grid or list, so the row fills it again. */
.site[data-page="about"].cms-canvas .ab-wwa-media > .cms-item { position: relative; z-index: 1; }
.site[data-page="about"].cms-canvas .ab-if-list > .cms-item { display: flex; }
.site[data-page="about"].cms-canvas .ab-if-list > .cms-item > .ab-if-item { flex: 1; }
.site[data-page="about"].cms-canvas .ab-if-ph .cms-item,
.site[data-page="about"].cms-canvas .ab-if-ph .cms-image { position: absolute; inset: 0; }
/* =============================================================================================
October 2026 design ("Inside Genero", mockup v10 css/page-about.css). The banner is subpage.css's.
============================================================================================= */
/* ---- Who We Are: the copy on the left, the owner's one photograph on the right ---------------
Design (1920): copy x 76–1045, photograph x 1164–1796 (632×522), its right edge 48px inside the
content, standing right under the banner. Its yellow GenArrow and white line are in the picture. */
.site[data-page="about"] .ab-wwa { padding: clamp(28px, 2.2vw, 40px) 0 clamp(48px, 4.2vw, 80px); }
.site[data-page="about"] .ab-wwa-row.ab-wwa-compact:has(.ab-wwa-one) {
grid-template-columns: minmax(0, 970fr) minmax(0, 632fr); column-gap: clamp(40px, 6.2vw, 119px); padding-right: clamp(0px, 2.6vw, 48px); align-items: center;
}
.site[data-page="about"] .ab-wwa-media.ab-wwa-one { display: block; margin: 0; padding: 0; aspect-ratio: 1200 / 997; overflow: hidden; }
.site[data-page="about"] .ab-wwa-one img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---- Industry Focus: the owner's icons (a teal ">" GenArrow and the photograph, one picture) ---
About 146×210 at 1920; one transparent PNG per industry, so no colour shape behind it. */
.site[data-page="about"] .ab-if-ph { max-width: none; width: clamp(84px, 7.6vw, 146px); aspect-ratio: 158 / 227; margin: 0 auto 22px; }
.site[data-page="about"] .ab-if-ph .ph-main { object-fit: contain; }
@media (max-width: 900px) {
.site[data-page="about"] .ab-wwa-row.ab-wwa-compact:has(.ab-wwa-one) { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
.site[data-page="about"] .ab-wwa-media.ab-wwa-one { max-width: 560px; width: 100%; }
}
@media (max-width: 560px) {
.site[data-page="about"] .ab-if-ph { width: 96px; }
}