/* Home (/), v9 index.html. Scoped to .site[data-page="home"]. */
/* What v9's home page changed against v3 (index-final-d.html), which site.css already carries.
v9's index.html loads genero-v4, wwa-editorial, final, portfolio-d and lux-v5: the first four
differ from v3 only by final.css's "REVISI TAXONOMY v4" block, and lux-v5 is new. Both are
ported here, scoped to this page; what lux-v5 does to sub-pages, the footer or the chat
launcher is not, because those are the shared layer's (and the launcher stays as it is). */
.site[data-page="home"] {
/* lux-v5's easing: a long, soft settle instead of site.css's quicker curve. */
--lx-ease: cubic-bezier(.16, 1, .3, 1);
}
/* ---- Hero --------------------------------------------------------------------------------- */
/* The headline is the brand name alone now (Excel Home row 6), so it is set larger, and the claim
under it (row 7, "Option 1") carries the page's keyword phrase in Inria Serif Italic, yellow —
the treatment the headline's keyword had in v3. */
.site[data-page="home"] .hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
.site[data-page="home"] .hero .hero-claim { margin-top: 14px; max-width: 720px; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.5; }
.site[data-page="home"] .hero .hero-claim em { font-family: var(--font-display); font-style: italic; color: var(--yellow); }
/* ---- Why Partner with Genero? --------------------------------------------------------------- */
/* The fourth panel lists the five capabilities under its figure (Excel Home row 22). The list is
the panel's rich-text body, so it is styled by position rather than by a class the editor's
sanitiser would not keep: yellow dots, the panel's white type, close lines. */
.site[data-page="home"] .quad .stat-card ul { position: relative; z-index: 1; margin: 16px 0 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.94); }
.site[data-page="home"] .quad .stat-card li { position: relative; margin-top: 5px; padding-left: 14px; }
.site[data-page="home"] .quad .stat-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
/* ---- Our Solutions as a flow (Pillars "flow") ----------------------------------------------- */
/* Five columns read as one process: a yellow GenArrow sits in the gap after each photograph,
centred on it, with a ring of the band's Soft Light Blue so it reads as lying on the gap rather
than on either picture. The arrow is inside the photograph's box (.sol-media) and pushed half a
gap past its right edge, so the gap is a variable both sides agree on. No round button under a
column any more (v9 feedback #10): the component no longer renders one. */
.site[data-page="home"] .sol-flow { --sol-gap: 44px; gap: var(--sol-gap); }
.site[data-page="home"] .sol-flow .sol-media { position: relative; display: block; margin-bottom: 18px; }
.site[data-page="home"] .sol-flow .sol-media .sol-ph { margin-bottom: 0; }
.site[data-page="home"] .sol-flow .sol-body { display: flex; flex-direction: column; flex: 1; }
.site[data-page="home"] .sol-flow .sol-link {
position: absolute; z-index: 2; top: 50%; left: calc(100% + var(--sol-gap) / 2); transform: translate(-50%, -50%);
width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); color: var(--teal-deep);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 6px var(--ice);
}
.site[data-page="home"] .sol-flow .sol-link .ga-icon { width: 18px; }
/* Tablet and phone: the flow turns vertical — a thumbnail beside the copy, one column under the
next — and the arrow drops into the gap below the thumbnail, pointing down. The column becomes
the arrow's positioning box here, because the gap is now under the whole column. */
@media (max-width: 1180px) {
.site[data-page="home"] .sol-flow { grid-template-columns: 1fr; --sol-gap: 40px; }
.site[data-page="home"] .sol-flow .sol-item { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 0 28px; align-items: start; }
.site[data-page="home"] .sol-flow .sol-media { position: static; margin-bottom: 0; }
.site[data-page="home"] .sol-flow .sol-link { top: calc(100% + var(--sol-gap) / 2); left: 100px; }
.site[data-page="home"] .sol-flow .sol-link .ga-icon { transform: rotate(180deg); }
}
@media (max-width: 520px) {
.site[data-page="home"] .sol-flow .sol-item { grid-template-columns: 104px 1fr; gap: 0 18px; }
.site[data-page="home"] .sol-flow .sol-link { left: 52px; }
.site[data-page="home"] .sol-flow .sol-item p { margin-bottom: 12px; }
}
/* ---- lux-v5: reading sizes ------------------------------------------------------------------ */
/* Card and column copy never below 15px, and the bands' supporting lines and the news excerpts
the same, with a slightly tighter leading than v3's. */
.site[data-page="home"] .sol-item p,
.site[data-page="home"] .cert-desc { font-size: max(15px, .9rem); line-height: 1.7; }
.site[data-page="home"] .sec-sub,
.site[data-page="home"] .excerpt { font-size: max(15px, .95rem); line-height: 1.7; }
/* Fewer boxes: the category under a news card is a plain word in the ink colour, not a teal tag. */
.site[data-page="home"] .card-f .chip { background: none; border: 0; border-radius: 0; padding: 0; font-size: .95rem; font-weight: 500; color: var(--ink); }
/* ---- lux-v5: motion ------------------------------------------------------------------------- */
/* A longer, softer rise for every band, and the grids' children following one after another
rather than the grid arriving as a single block. */
.site[data-page="home"] .reveal { transform: translateY(28px); transition: opacity 1.1s var(--lx-ease), transform 1.1s var(--lx-ease); }
.site[data-page="home"] .reveal.in { transform: none; }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal > * { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--lx-ease), transform .9s var(--lx-ease); }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal.in > * { opacity: 1; transform: none; }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal.in > :nth-child(2) { transition-delay: .08s; }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal.in > :nth-child(3) { transition-delay: .16s; }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal.in > :nth-child(4) { transition-delay: .24s; }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal.in > :nth-child(5) { transition-delay: .32s; }
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal.in > :nth-child(n+6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
.site[data-page="home"] .reveal,
.site[data-page="home"] :is(.sol-grid, .cert-grid, .news-grid).reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* =============================================================================================
October 2026 design (mockup v10, css/home.css), client requests of 29–30 Oct 2026.
Mockup → here: .hero-in = .hero-fig-in; #solutions = the band holding .sol-flow (its id is the
anchor in front of it, not on it).
============================================================================================= */
/* ---- Hero: the owner's banner, the claim as the headline right of centre --------------------
Measured off the design PNG (1920 wide): the copy starts at x 65% and y 20% of the hero; Montserrat
SemiBold with the keyword phrase in Inria Serif Italic at 1.15em, about 10% under the design's size
at the client's request (2.3vw: about 44px at 1920, 33px at 1440). The line breaks are typed into
the title, so pre-line keeps them; the Indonesian title has none and wraps. Deliberately follows the
window's width, an exception to the wide-screen rule. */
.site[data-page="home"] .hero.hero-fig { min-height: clamp(560px, 62vw, 1184px); align-items: flex-start; }
.site[data-page="home"] .hero-fig .hero-bg img { object-position: center 40%; }
.site[data-page="home"] .hero-fig-in { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-end; padding: calc(78px + 5vw) 22px 80px; }
.site[data-page="home"] .hero.hero-fig h1.hero-claim {
margin: 0; max-width: none; white-space: pre-line;
font-family: var(--font-body); font-size: clamp(1.55rem, 2.3vw, 2.76rem); line-height: 1.29; font-weight: 600; letter-spacing: -.01em;
color: #fff; text-shadow: 0 2px 22px rgba(11, 76, 95, .38);
}
.site[data-page="home"] .hero.hero-fig h1.hero-claim em { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.15em; line-height: 1; color: #fff; }
@media (min-width: 901px) {
.site[data-page="home"] .hero-fig-in { position: absolute; inset: 0; padding: 0; display: block; }
.site[data-page="home"] .hero-fig-copy { position: absolute; left: 65%; top: 20%; right: 2%; }
}
/* No darkening on the left any more; the sky gets the design's faint white haze instead (measured off
the PNG: 12–30% lighter over the top 300px). */
.site[data-page="home"] .hero-fig .hero-bg::before { display: block; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.26) 8%, rgba(255,255,255,.14) 22%, rgba(255,255,255,0) 40%); }
/* Desktop: never taller than the window (decision of 29 Oct 2026), the design's 62vw / 1184px when it
fits. The photograph is cropped to the client's red box — x 101–1686, y 155–1171 of the 1920×1258
picture — scaled so the box fills the hero's height, at least as wide as the window and centred on
the box; the top of the GenArrow in it (y 301) is kept at least 16px under the header. */
@media (min-width: 901px) {
.site[data-page="home"] .hero.hero-fig { min-height: min(clamp(560px, 62vw, 1184px), 100vh); min-height: min(clamp(560px, 62vw, 1184px), 100svh); }
.site[data-page="home"] .hero-fig .hero-bg { --hh: min(clamp(560px, 62vw, 1184px), 100svh); --hw: max(100vw, calc(var(--hh) * 1.8898)); }
.site[data-page="home"] .hero-fig .hero-bg img {
position: absolute; width: var(--hw); height: auto; max-width: none; object-fit: fill;
left: clamp(calc(100% - var(--hw)), calc(50% - var(--hw) * .46536), 0px);
top: clamp(calc(var(--hh) - var(--hw) * .65521), max(calc(var(--hh) / 2 - var(--hw) * .34531), calc(78px + 16px - var(--hw) * .15677)), 0px);
}
}
/* Phones and tablets: the copy drops to the bottom of the hero, over the road, clear of the GenArrow
and the building, with a thin teal scrim under it; the five lines stay, sized so the longest fits. */
@media (max-width: 900px) {
.site[data-page="home"] .hero.hero-fig { align-items: flex-end; min-height: auto; }
.site[data-page="home"] .hero-fig-in { justify-content: flex-start; padding-top: calc(78px + 48px); padding-bottom: 40px; }
.site[data-page="home"] .hero.hero-fig h1.hero-claim { max-width: 520px; }
.site[data-page="home"] .hero-fig .hero-bg::after { background: linear-gradient(180deg, transparent 0, transparent 44%, rgba(11,76,95,.42) 62%, rgba(11,76,95,.55) 100%); }
}
@media (max-width: 560px) {
.site[data-page="home"] .hero.hero-fig { min-height: 520px; }
.site[data-page="home"] .hero.hero-fig h1.hero-claim { font-size: min(1.65rem, calc((100vw - 48px) / 11.6)); }
}
/* ---- The large 90° GenArrow beside a heading (sig-xl) ---------------------------------------- */
.site .ga-head { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.4vw, 28px); text-align: left; }
.site .ga-sig.ga-xl { --s: clamp(64px, 5.6vw, 108px); display: block; flex: none; width: var(--s); height: var(--s); margin: 0 calc(var(--s) * -.2); fill: #0B7A94; }
.site[data-page="home"] .quad-head .ga-head .sec-title { margin: 0; }
.site[data-page="home"] .quad-head .ga-head .sec-sub { margin: 8px 0 0; }
.site[data-page="home"] .sol-head .sec-title.ga-head { justify-content: flex-start; }
/* ---- Why Partner: teal first, the figure in Inria Serif Italic, two GenArrows per panel -------
Minimum height = the design's panel proportion (480×505); a panel still grows with its copy. */
.site[data-page="home"] .quad .pill-card.stat-card { min-height: 26.3vw; padding: clamp(28px, 2.9vw, 56px) clamp(24px, 2.5vw, 48px); justify-content: flex-start; }
.site[data-page="home"] .quad .stat-card:nth-child(2) { justify-content: flex-end; padding-bottom: clamp(36px, 4.4vw, 84px); }
.site[data-page="home"] .quad .stat-card:nth-child(4) { padding-left: 46%; }
.site[data-page="home"] .quad .stat-n { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: clamp(2.6rem, 5vw, 6rem); margin-bottom: .12em; }
.site[data-page="home"] .quad .pill-card.stat-card h3 { font-size: clamp(1.05rem, 1.65vw, 2rem); font-weight: 400; line-height: 1.2; max-width: 9em; }
.site .stat-ga { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site .stat-ga svg { position: absolute; height: auto; transform: translate(-50%, -50%) rotate(var(--r)); }
.site .stat-ga .gm-fill { left: var(--fx); top: var(--fy); width: var(--fw); }
.site .stat-ga .gm-line { left: var(--lx); top: var(--ly); width: var(--lw); fill: none; stroke: #fff; stroke-width: 4.5; stroke-opacity: .85; }
.site[data-page="home"] .quad .stat-card:nth-child(3) .gm-line { stroke-width: 2.6; }
.site .pill-card.teal .gm-fill { fill: #0B7A94; }
.site .pill-card.blue .gm-fill { fill: #03406E; }
@media (max-width: 1080px) { .site[data-page="home"] .quad .pill-card.stat-card { min-height: 52.6vw; } }
@media (max-width: 620px) { .site[data-page="home"] .quad .pill-card.stat-card { min-height: 78vw; } }
/* ---- Our Solutions: room below for the ecosystem's building, the columns above it ------------ */
@media (min-width: 901px) {
.site[data-page="home"] section.sec:has(.sol-flow) { padding-bottom: calc(var(--sec-y) + min(10vw, 190px)); }
.site[data-page="home"] .sol-flow { position: relative; z-index: 2; }
}
/* ---- Integrated Ecosystem: heading left, icons 2×2 right, the building rising behind --------- */
.site .eco-fig { position: relative; z-index: 1; overflow: visible; background: #fff; padding: clamp(40px, 3.4vw, 66px) 0 clamp(48px, 4vw, 80px); min-height: 34.6vw; }
.site .eco-fig-bg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; }
.site .eco-fig-bg img { display: block; width: 100%; height: auto; max-width: none; transform: scaleX(-1); }
.site .eco-fig-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.site .eco-fig-head { padding-top: clamp(16px, 1.6vw, 32px); }
@media (min-width: 901px) { .site .eco-fig-head { padding-top: 0; margin-top: calc(-1 * clamp(8px, 1vw, 20px)); } }
.site .eco-fig-sub, .site .eco-fig-head .sec-title { text-shadow: 0 0 3px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.85); }
.site .eco-fig-head .sec-title { text-align: left; justify-content: flex-start; max-width: 440px; margin: 0; }
.site .eco-fig-sub { margin: 14px 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); }
.site .eco4.eco-fig-grid { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 64px) 24px; }
.site .eco-fig .eco4-i .q-ic { width: clamp(84px, 9.3vw, 180px); height: clamp(84px, 9.3vw, 180px); margin-bottom: clamp(12px, 1.1vw, 20px); }
.site .eco-fig .eco4-i h4 { font-size: clamp(.95rem, 1.2vw, 1.45rem); font-weight: 600; line-height: 1.35; color: var(--teal); }
/* In the editor the building is offered as a small picture to click, since on the page it is a backdrop. */
.site .eco-fig-pick { width: 160px; margin-bottom: 16px; }
@media (max-width: 900px) {
.site .eco-fig { padding: 56px 0 88px; }
.site .eco-fig-in { grid-template-columns: 1fr; gap: 40px; }
.site .eco-fig-bg img { opacity: .55; }
}
@media (max-width: 560px) {
.site .eco4.eco-fig-grid { gap: 36px 16px; }
.site .eco-fig .eco4-i .q-ic { width: 84px; height: 84px; }
.site .eco-fig .eco4-i h4 { font-size: .9rem; }
}
/* ---- Credibility: the descriptions in Regular -------------------------------------------- */
.site[data-page="home"] .cert-grid .cert-desc { font-weight: 400; color: #3a3a3a; }