:root { --nav-h: 68px; } /* Promote to a stacking context so the fixed .gk-nav (and its auth dropdown) paint above ANY descendant that creates a mid-page stacking context — mix-blend-mode, filter, transform, will-change, contain, opacity<1 in some browsers. Without this, Chromium bug 753075 lets an isolated mid-page context paint over a fixed root- level positioned element, and the auth dropdown disappears under a hero with `mix-blend-mode: luminosity`. Architect verdict 2026-05-07-recurring-bug-sphaigne-index-html-has-2289f9 (also hit on elen 2026-05-05-migrate-beta-elen-gateka-fr-canonical). */ body { isolation: isolate; } /* Override _beta_banner.html's defensive rule that forces every header (.header / .gk-nav / .topbar / etc.) to position:static on beta. That defensive rule was meant for legacy product headers that didn't know how to clear the banner; the canonical .gk-nav IS banner-aware (banner is fixed at top:0, .gk-nav fixed below it via top: var(--gk-beta-banner-h)). Without this re-fixing, the auth dropdown opens at document position and gets covered by any hero/section that follows in flow — same root cause as 2026-05-07-recurring-bug-sphaigne-index-html-has-2289f9. */ body.gk-env-beta .gk-nav { position: fixed !important; top: var(--gk-beta-banner-h, 36px) !important; } .gk-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100; display:flex;align-items:center;justify-content:space-between;padding:0 24px; background:var(--overlay-bg,rgba(255,255,255,.92));backdrop-filter:blur(18px); border-bottom:1px solid var(--border,rgba(0,0,0,.08))} .gk-nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--text);text-decoration:none} .gk-nav-center{display:flex;align-items:stretch;gap:2px;height:100%} /* Right cluster — every button (lang / theme / connect / crank / signed-in auth trigger) shares the same .gk-nav-btn baseline now, so the cluster just lays them out with a tight gap. The auth trigger's filled-pill carve-out was retired 2026-05-04 (ADR 0018 addendum #4). */ .gk-nav-actions{display:flex;align-items:center;gap:0;height:100%} /* Hamburger toggle — hidden by default, only surfaces on phones via the ≤460px media query below. Pure CSS via the sibling :checked selector; no JS needed. Threshold lowered from 640 → 520 → 460 (2026-05-09): the full nav (brand + 2-item center + 4-icon right) genuinely fits down to ~450px, so collapsing into a burger any earlier wastes space and forces an extra tap on tablets / large phones in landscape / portrait phones at 480-520px. */ .gk-nav-burger-btn { display: none; } /* Le Monde-style stacked button: icon on top, tiny label below. Applies uniformly to every link in the center cluster AND every action button on the right (lang, theme, pinned features…). */ .gk-nav-link, .gk-nav-btn { position: relative; /* anchor the ::before hover/active pill */ display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; /* min-height = 36px = touch-target floor. Center buttons with icon+label stacked render at ~39px; right-cluster icon-only buttons hit exactly 36px. The visible hover/active background is decoupled from this via ::before below — rendered at a fixed 36px regardless of button height — so the painted rectangle is uniform across both clusters (ADR 0018 navigation contract, addendum 2026-05-04 #3). */ min-width: 44px; min-height: 36px; padding: 4px 6px; background: transparent; border: none; cursor: pointer; color: var(--text2, #64748b); text-decoration: none; font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .2px; line-height: 1.1; border-radius: var(--radius-sm, 8px); transition: color .15s; } /* Background pill — fixed 36px tall, centered vertically inside the button regardless of the button's actual content height. Drives hover (transient) and is-active (persistent) painting. Sits behind the icon/label via z-index so transparent gear strokes don't smear. */ .gk-nav-link::before, .gk-nav-btn::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 36px; transform: translateY(-50%); border-radius: var(--radius-sm, 8px); background: transparent; transition: background .15s; z-index: 0; } .gk-nav-link > *, .gk-nav-btn > * { position: relative; z-index: 1; } /* ── Wide viewports (≥900px) — center cluster goes row-style ── When there's room, the center cluster's icon + label sit side-by-side with a readable label (14px, was 10px stacked) — the "Produits | Utilisateurs" pattern from the desktop mock. Right cluster stays icon-only (column / centered) since those buttons carry no visible label by design (lang's "EN" hint is absolute and hugs the bottom). 2026-05-09 user feedback "when enough space, display icons and text close to each other using large text sizes". */ @media (min-width: 900px) { .gk-nav-link { flex-direction: row; gap: 8px; padding: 6px 12px; font-size: 14px; font-weight: 600; min-height: 44px; } .gk-nav-link i { font-size: 16px; } .gk-nav-link .tr, .gk-nav-link.gk-nav-feat-header > span { font-size: 14px; } } /* Hover (transient), focus-visible (keyboard navigation, same paint as hover so Tab users see the same affordance), and active (persistent) all paint the same pseudo-pill — sticky-hover idiom (= "you are here"). Active additionally tints the text/icon with --accent. Selector list covers both clusters: .gk-nav-link (center) AND .gk-nav-btn (right — including the features crank when on /features). */ .gk-nav-link:hover::before, .gk-nav-btn:hover::before, .gk-nav-link:focus-visible::before, .gk-nav-btn:focus-visible::before, .gk-nav-link.is-active::before, .gk-nav-link[aria-current="page"]::before, .gk-nav-btn.is-active::before, .gk-nav-btn[aria-current="page"]::before { background: var(--surface-hover, rgba(0,0,0,.05)); } .gk-nav-link:hover, .gk-nav-btn:hover { color: var(--text, #1a1a2e); text-decoration: none; /* see `:hover` UA-underline note */ } /* Suppress focus rings on nav buttons. The pill (hover/active) IS the affordance — adding a separate outline on top renders a second rectangle outside the pill and looks like "double bg". Keyboard a11y is preserved by the pill itself: the focused button gets the same surface-hover tint via :hover-equivalent state in all modern browsers; users who Tab through see the pill move. */ .gk-nav-link:focus, .gk-nav-btn:focus, .gk-nav-link:focus-visible, .gk-nav-btn:focus-visible { outline: none; } .gk-nav-link i, .gk-nav-btn i { font-size: 16px; line-height: 1; margin: 0 !important; /* override any inline margin-right shipped from older markup */ } /* Anon connect CTA — ADR 0018 Addendum #7 (supersedes #6). Three- state ladder for every right-cluster sibling: rest: transparent pseudo-pill (geometry only, ink-color icon) hover: --surface-hover fill (Addendum #3) active/CTA: full --accent fill, on-accent ink Anon connect is permanently in the active/CTA state — it's the row's primary action. The full fill makes it the unmissable hot spot, identical visual weight to FR/EN's active pill. */ .gk-nav-btn--cta-anon { color: #fff; } .gk-nav-btn--cta-anon::before { background: var(--accent, #e07a5f); opacity: 1; } .gk-nav-btn--cta-anon:hover { color: #fff; } .gk-nav-btn--cta-anon:hover::before { background: var(--accent-hover, var(--accent, #c96a50)); } /* Features crank — gear rotates continuously while hovered, returns to 0deg smoothly on hover-out. Scoped via .fa-gear so the lang globe / theme moon / connect door icons in the same cluster don't pick up the animation. */ .gk-nav-btn .fa-gear { transition: transform .35s ease; } .gk-nav-btn:hover .fa-gear { animation: gk-crank-spin 2s linear infinite; } @keyframes gk-crank-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Lang "next-locale" hint — absolute-positioned so the icon stays at the button's centroid instead of being pushed up by the label beneath it. Keeps icon Y-baseline identical across lang/theme/ connect even though only lang carries a hint. Pointer-events:none so the hint never steals click focus from the button. */ .gk-nav-btn--has-hint { position: relative; } .gk-lang-hint { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: .4px; line-height: 1; color: var(--text3, #94a3b8); pointer-events: none; } /* Active state — accent ink on text + icon, complementing the persistent pill painted by ::before above. `i` is targeted explicitly because FontAwesome icons usually inherit `color` but some products override it on `i`. Both clusters covered. */ .gk-nav-link.is-active, .gk-nav-link[aria-current="page"], .gk-nav-link.is-active i, .gk-nav-link[aria-current="page"] i, .gk-nav-btn.is-active, .gk-nav-btn[aria-current="page"], .gk-nav-btn.is-active i, .gk-nav-btn[aria-current="page"] i { color: var(--accent, #3b82f6); } /* Lang switch — show the that matches . */ .tr > [data-lang] { display: none; } html[lang="fr"] .tr > [data-lang="fr"], html[lang="en"] .tr > [data-lang="en"] { display: inline; } /* Fallback when no lang set — default to French. */ html:not([lang="fr"]):not([lang="en"]) .tr > [data-lang="fr"] { display: inline; } /* Per-feature header shortcut — feat-color ink on text + icon only. The pill background is the SAME shared --surface-hover that every other nav-link gets (via the base .gk-nav-link::before rule above). One pill style for every center button kills the cascade-conflict that produced the "double bg" complaint. */ .gk-nav-feat-header { color: var(--feat-color, var(--text2, #64748b)); } .gk-nav-feat-header:hover { color: var(--feat-color, var(--text)); } .gk-nav-feat-header i { color: var(--feat-color, inherit); } /* Selected pinned shortcut — feat-color ink on text + icon. Pill comes from the base .is-active rule (--surface-hover); per-feat differentiation is the text/icon colour, not the pill tint. */ .gk-nav-feat-header.is-active, .gk-nav-feat-header.is-active i { color: var(--feat-color, var(--accent, #3b82f6)); } /* Features entry — accent-coloured. */ .gk-nav-link--features { color: var(--accent, #3b82f6); } .gk-nav-link--features:hover { color: var(--accent-hover, var(--accent, #3b82f6)); } .gk-nav-link--features i { color: var(--accent, #3b82f6); } /* Long nav labels — let them render fully at desktop widths (Guillaume's "as long as you show text, don't ellipsis it" rule). Truncation only kicks in if a label is genuinely too wide to coexist; we cap at 140px to keep one runaway label from squeezing every sibling. The narrow- viewport @media block below tightens this further. */ .gk-nav-link > span, .gk-nav-btn > span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Right cluster — these are pure icon buttons (gear / globe / moon / avatar). Tighten their footprint so the center cluster has room to breathe its full text labels. */ .gk-nav-actions .gk-nav-btn { min-width: 32px; padding: 4px 4px; } /* ── Tablets ── Slim down padding only. Both nav_pages links AND per-product feature chips share the same .gk-nav-link rules now — they shrink together; neither loses its label. Right cluster stays at gap:0 (default) and gets tighter per-button padding so the icons sit shoulder-to-shoulder without any visual breathing room — these are pure icons, no label, no need for breathing room beyond the 36px touch-target floor. */ @media (max-width: 900px) { .gk-nav-link, .gk-nav-btn { min-width: 48px; padding: 4px 6px; } .gk-nav-actions .gk-nav-btn { min-width: 30px; padding: 4px 0; } } /* ── Phones ── Tighten the bar and the auth pill, but keep icons + labels for every action button. Right-cluster buttons drop their min-width to 26 and shave padding to 0 so the icons physically touch each other. The center cluster collapses into a hamburger dropdown — too many feature chips would overflow at this width. Threshold lowered from 640 → 520 → 460 so only genuine portrait phones see the burger (2026-05-09 user feedback "present the hamburger a bit later"). */ @media (max-width: 460px) { :root { --nav-h: 60px; } .gk-nav { padding: 0 12px; gap: 4px; } /* Brand stays at full size — SVG + "Gateka" gradient text both readable. The earlier `display:none` on the gradient span hid the wordmark on phones, which the user explicitly rejected 2026-05-09 ("stop compressing logo"). */ .gk-nav-brand { flex-shrink: 0; } .gk-nav-link, .gk-nav-btn { min-width: 44px; padding: 3px 5px; font-size: 9.5px; } .gk-nav-link i, .gk-nav-btn i { font-size: 14px; } /* Right cluster: 10px gap between buttons so they read as four distinct icons. NO margin-left:auto — let the parent's `justify-content: space-between` (line 23) distribute the three flex children (brand / burger / actions) evenly: brand at the left edge, burger CENTRALIZED in the middle, actions at the right edge (2026-05-09 user feedback "burger should be centralized"). flex-shrink:0 keeps each button at its 36px floor. */ .gk-nav-actions { gap: 10px; flex-shrink: 0; } .gk-nav-actions .gk-nav-btn { min-width: 36px; padding: 3px 4px; flex-shrink: 0; } /* Auth pill: keep avatar + logout, drop firstname + role text. */ .gk-auth--out .gk-auth-text { display: none; } .gk-auth--out .gk-auth-main { padding: 0; } .gk-auth-av { width: 28px; height: 28px; font-size: 12px; } .gk-auth-out { width: 26px; height: 26px; font-size: 13px; } /* Hamburger surfaces; center cluster collapses unless the burger is checked. When checked, .gk-nav-center becomes a vertical dropdown below the nav, with each item rendered as a full-width row. */ .gk-nav-burger-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: pointer; color: var(--text2, #64748b); font-size: 18px; border-radius: var(--radius-sm, 8px); /* Opaque background so the button reads as a solid surface above the translucent .gk-nav blur — page content scrolling beneath doesn't show through. Matches the dropdown panel's surface (--bg2 → --gk-bg-surface, light/dark-aware). */ background: var(--bg2, #fff); /* Centralized in the slack between brand and the right cluster via the parent's `justify-content: space-between` (line 23) + `margin: 0 auto`. The auto margins claim equal share of the remaining width, so the burger sits at the visual midpoint between brand-end and actions-start regardless of brand width (2026-05-09 user feedback "hamburger should be centralized"). Note: this is the gap-midpoint, not the viewport-50% midpoint — the latter would overlap the right cluster on a 390px phone once the "Gateka" wordmark is kept visible. */ margin: 0 auto; } .gk-nav-burger-btn:hover { background: var(--surface-hover, rgba(0,0,0,.05)); } .gk-nav-center { display: none; } .gk-nav-burger-toggle:checked ~ .gk-nav-center { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; /* Opaque background — content underneath must NOT show through. --bg2 → --gk-bg-surface ( #ffffff light / #1a1e27 dark ) per _theme.html, so dark-mode users get an opaque dark panel too. */ background: var(--bg2, #fff); border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; gap: 4px; align-items: stretch; height: auto; z-index: 99; } .gk-nav-burger-toggle:checked ~ .gk-nav-center .gk-nav-link { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 18px; min-height: 56px; width: 100%; font-size: 16px; font-weight: 500; } /* Bigger icons in the burger dropdown — products like Gateka with only 2 nav items leave lots of vertical space; phones don't have hover affordance, so the icon needs to read as a tappable primary action, not a tiny hint (2026-05-09 user feedback). */ .gk-nav-burger-toggle:checked ~ .gk-nav-center .gk-nav-link i { font-size: 22px; min-width: 32px; text-align: center; } } /* ── Very small phones ── extra-tight tracking. Feature chips finally hide here because there's truly no room left after the brand SVG + auth pill + lang/theme. Same rule for nav_pages would over-collapse primary navigation, so feat-header is the only one that bows out. */ @media (max-width: 380px) { .gk-nav { padding: 0 8px; } /* Brand stays at native size — user pref. */ .gk-nav-link, .gk-nav-btn { min-width: 40px; padding: 3px 4px; } /* Right cluster: still keep 32px (down from the 36px phone default) on the smallest phones to fit comfortably, but never collapse to the previous 24px which read as "icons missing" (2026-05-09). */ .gk-nav-actions .gk-nav-btn { min-width: 32px; padding: 3px 2px; } .gk-nav-feat-header { display: none; } } /* ── Center-cluster spacious mode (architect 2026-05-06 / ADR 0018 amendment) ── Below 1280px the .gk-nav-link items in .gk-nav-center stack the icon above the label (default flex-direction: column from the base rule). At ≥1280px we have room to lay icon + label SIDE-BY-SIDE — bigger touch target, no vertical stacking, more readable. The right-cluster (lang/theme/auth) keeps its compact icon-only shape regardless of viewport, since those don't carry labels. Pure CSS — feedback_single_source_render: layout decisions belong server-side or in CSS, never JS. */ @media (min-width: 1280px) { /* Wider gap between center buttons — the default gap: 2px makes Services/Expertise/Ressources feel cramped when there's plenty of horizontal room. */ .gk-nav-center { gap: 18px; } .gk-nav-center .gk-nav-link { flex-direction: row; gap: 8px; padding: 6px 12px; min-height: 40px; font-size: 14px; } .gk-nav-center .gk-nav-link i { font-size: 16px; } /* Lift the 80px max-width cap inherited from .gk-nav-link > span — in spacious mode there's room for full labels ("Ressources", "Expertise"…) without truncation. The cap still applies to the right cluster (.gk-nav-btn > span) where it remains useful. */ .gk-nav-center .gk-nav-link > span, .gk-nav-center .gk-nav-link > span.tr { max-width: none; overflow: visible; } } /* Even more spacious at very wide viewports (≥1600px) — extra breathing room between center buttons. The cluster sits in a wide bar with the brand left and right cluster tight on the right; bumping the inter- button gap soaks up the empty middle without making any single button look stretched. */ @media (min-width: 1600px) { .gk-nav-center { gap: 28px; } }