responsivo: corrige navbar e layout mobile

- menu hambúrguer no mobile (links ficavam inacessíveis em <=900px)
- grids de colunas fixas que estouravam a largura (compliance, fases,
  svc-meta, timeline, severity-card, manifesto do Sobre, post-row do blog)
- breakpoint <=560px: escala de títulos, padding e rodapé empilhado
- oculta tooltip do chip em Produtos (overflow horizontal fantasma)
- cache-busting por hash nos CSS (?v=) e fim da cadeia de @import

Author: fguisso

i18n/en.toml

@@ -4,6 +4,9 @@
 [nav_talk]
 other = "Talk to us"
 
+[nav_menu]
+other = "Menu"
+
 # Hero
 [hero_eyebrow]
 other = "Application Security Labs"

i18n/pt.toml

@@ -4,6 +4,9 @@
 [nav_talk]
 other = "Falar com a gente"
 
+[nav_menu]
+other = "Menu"
+
 # Hero
 [hero_eyebrow]
 other = "Application Security Labs"

layouts/partials/head.html

@@ -11,6 +11,9 @@
   {{ partial "jsonld.html" . }}
   <script async defer src="https://tc.guisso.dev/tracker.js" data-website-id="cmq7cuek2000b11qcmjx5zh3u"></script>
   <link rel="icon" href="/assets/flag-color.png">
-  <link rel="stylesheet" href="/css/site.css">
+  {{/* CSS carregado em ordem de dependência; ?v=<hash> força refresh quando o arquivo muda (anti-cache). */}}
+  {{ range slice "css/colors_and_type.css" "css/ef-components.css" "css/site.css" }}
+    <link rel="stylesheet" href="/{{ . }}?v={{ substr (readFile (printf "static/%s" .) | sha256) 0 10 }}">
+  {{ end }}
   <link href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet">
 </head>

layouts/partials/nav.html

@@ -1,18 +1,39 @@
-<header class="eks-nav">
+<header class="eks-nav" id="eks-nav">
   <div class="page eks-nav-inner">
     <a href="{{ site.Home.RelPermalink }}" class="eks-brand"><img src="/assets/flag-color.png" width="22" height="22" alt="eflag" style="display:block"> eflag</a>
-    <nav class="eks-nav-links">
-      {{ $current := .RelPermalink }}
-      {{ range .Site.Menus.main }}
-        <a href="{{ .URL }}" class="eks-nav-link{{ if hasPrefix $current .URL }} active{{ end }}">{{ .Name }}</a>
-      {{ end }}
-    </nav>
-    <div class="eks-nav-right">
-      {{/* Alterna para a tradução da página atual; cai na home do outro idioma se não houver. */}}
-      {{ range .Translations }}
-        <a href="{{ .RelPermalink }}" class="eks-nav-lang" lang="{{ .Language.LanguageCode }}" data-tianji-event="nav-lang-switch" data-tianji-event-to="{{ .Language.Lang }}">{{ .Language.Lang | upper }}</a>
-      {{ end }}
-      <a href="mailto:{{ .Site.Params.email }}" class="ef-btn ef-btn-primary ef-btn-sm" data-tianji-event="nav-contact">{{ i18n "nav_talk" }}</a>
+    <button class="eks-nav-toggle" type="button" aria-label="{{ i18n "nav_menu" | default "Menu" }}" aria-expanded="false" aria-controls="eks-nav-collapse">
+      <span></span><span></span><span></span>
+    </button>
+    <div class="eks-nav-collapse" id="eks-nav-collapse">
+      <nav class="eks-nav-links">
+        {{ $current := .RelPermalink }}
+        {{ range .Site.Menus.main }}
+          <a href="{{ .URL }}" class="eks-nav-link{{ if hasPrefix $current .URL }} active{{ end }}">{{ .Name }}</a>
+        {{ end }}
+      </nav>
+      <div class="eks-nav-right">
+        {{/* Alterna para a tradução da página atual; cai na home do outro idioma se não houver. */}}
+        {{ range .Translations }}
+          <a href="{{ .RelPermalink }}" class="eks-nav-lang" lang="{{ .Language.LanguageCode }}" data-tianji-event="nav-lang-switch" data-tianji-event-to="{{ .Language.Lang }}">{{ .Language.Lang | upper }}</a>
+        {{ end }}
+        <a href="mailto:{{ .Site.Params.email }}" class="ef-btn ef-btn-primary ef-btn-sm" data-tianji-event="nav-contact">{{ i18n "nav_talk" }}</a>
+      </div>
     </div>
   </div>
 </header>
+<script>
+(function () {
+  var nav = document.getElementById('eks-nav');
+  if (!nav) return;
+  var btn = nav.querySelector('.eks-nav-toggle');
+  if (!btn) return;
+  function close() { nav.classList.remove('open'); btn.setAttribute('aria-expanded', 'false'); }
+  btn.addEventListener('click', function () {
+    var open = nav.classList.toggle('open');
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
+  nav.querySelectorAll('.eks-nav-collapse a').forEach(function (a) {
+    a.addEventListener('click', close);
+  });
+})();
+</script>

layouts/sobre/list.html

@@ -9,7 +9,7 @@ <h1>{{ i18n "sobre_h1" }}</h1>
   </section>
 
   <section class="eks-section">
-    <div class="page" style="display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start">
+    <div class="page eks-split">
       <div>
         <div class="eks-section-num">01</div>
         <div class="eks-section-kicker" style="margin-top:8px">{{ i18n "sobre_manifesto_kicker" }}</div>

static/css/ef-components.css

@@ -1,8 +1,6 @@
 /* ef-components.css, shared component styles for preview cards & UI kits
    Updated to Cold Lab (v4): 4–8px radii, cyan focus ring, brand chips, code blocks. */
 
-@import url('./colors_and_type.css');
-
 /* ========== BUTTONS ========== */
 .ef-btn {
   font-family: var(--font);

static/css/site.css

@@ -3,8 +3,6 @@
    Imports the design system foundation and component primitives.
    ============================================================ */
 
-@import url('./ef-components.css');
-
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
 body { background: var(--bg); color: var(--fg1); font-family: var(--font); }
@@ -40,6 +38,17 @@ a { color: inherit; }
 .eks-nav-lang:hover { color: var(--fg1); border-color: var(--fg3); }
 .eks-locale { font-family: var(--mono); font-size: 11px; color: var(--fg3); letter-spacing: .04em; cursor: pointer; }
 .eks-locale.active { color: var(--fg1); font-weight: 700; }
+/* display:contents keeps links + right as direct flex children of the bar on desktop */
+.eks-nav-collapse { display: contents; }
+.eks-nav-toggle {
+  display: none; flex-direction: column; justify-content: center; gap: 5px;
+  width: 40px; height: 40px; margin-left: auto; padding: 0;
+  background: none; border: none; cursor: pointer;
+}
+.eks-nav-toggle span { display: block; width: 22px; height: 2px; margin: 0 auto; background: var(--fg1); border-radius: 2px; transition: transform var(--t-fast), opacity var(--t-fast); }
+.eks-nav.open .eks-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.eks-nav.open .eks-nav-toggle span:nth-child(2) { opacity: 0; }
+.eks-nav.open .eks-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 
 /* ── HERO ──────────────────────────────────────── */
 .eks-hero {
@@ -378,6 +387,7 @@ body[data-density="compact"] .eks-post-main p { font-size: 13px; margin-bottom:
 .eks-related-meta { font-family: var(--mono); font-size: 10px; color: var(--fg4); letter-spacing: .04em; margin-top: auto; }
 
 /* ── SOBRE (About page) ───────────────────────── */
+.eks-split { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }
 .eks-sobre-hero { background-image: var(--pat-dots); background-size: var(--pat-dots-size); border-bottom: 1px solid var(--border); padding: 96px 0 88px; }
 .eks-sobre-hero h1 { font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--fg1); margin: 0 0 24px; max-width: 820px; }
 .eks-sobre-hero p { font-size: 19px; color: var(--fg2); max-width: 640px; line-height: 1.6; margin: 0; }
@@ -627,7 +637,20 @@ body[data-density="compact"] .eks-post-main p { font-size: 13px; margin-bottom:
   .eks-metrics-grid { grid-template-columns: repeat(2, 1fr); }
   .eks-news-grid { grid-template-columns: 1fr; }
   .eks-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
-  .eks-nav-links { display: none; }
+  /* Mobile nav: hamburger reveals a full-width dropdown panel */
+  .eks-nav-toggle { display: flex; }
+  .eks-nav-collapse {
+    display: none;
+    position: absolute; top: 100%; left: 0; right: 0;
+    flex-direction: column; align-items: stretch; gap: 0;
+    background: var(--surface); border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow-md); padding: 8px 0 16px;
+  }
+  .eks-nav.open .eks-nav-collapse { display: flex; }
+  .eks-nav-links { flex-direction: column; gap: 0; padding: 0 32px; }
+  .eks-nav-link { font-size: 15px; padding: 13px 0; border-bottom: 1px solid var(--border); }
+  .eks-nav-right { margin-left: 0; padding: 16px 32px 0; gap: 12px; flex-wrap: wrap; }
+  .eks-nav-right .ef-btn { flex: 1; justify-content: center; }
   .eks-problem-grid { grid-template-columns: 1fr; }
   .eks-loop { grid-template-columns: 1fr; }
   .eks-emerge { grid-template-columns: 1fr; }
@@ -637,9 +660,12 @@ body[data-density="compact"] .eks-post-main p { font-size: 13px; margin-bottom:
   .eks-team-grid { grid-template-columns: repeat(2, 1fr); }
   .eks-principles { grid-template-columns: 1fr; }
   .eks-svc-layout { grid-template-columns: 1fr; }
+  .eks-split { grid-template-columns: 1fr; gap: 24px; }
   .eks-svc-toc { position: static; }
   .eks-related-grid { grid-template-columns: 1fr; }
-  .eks-post-row { grid-template-columns: 80px 1fr; }
+  .eks-post-row { grid-template-columns: 64px 1fr; gap: 20px; }
+  .eks-post-main { min-width: 0; }
+  .eks-post-tags { flex-wrap: wrap; }
   .eks-post-aside { display: none; }
   .eks-advisory-row { grid-template-columns: 80px 1fr; gap: 12px; }
   .eks-advisory-row .eks-advisory-sev, .eks-advisory-row .eks-advisory-cve { display: none; }
@@ -650,6 +676,37 @@ body[data-density="compact"] .eks-post-main p { font-size: 13px; margin-bottom:
   .prd-section-grid { grid-template-columns: 1fr; gap: 32px; }
   .prd-aside { position: static; flex-direction: row; align-items: center; gap: 16px; }
   .prd-section-icon { width: 64px; height: 64px; }
+  /* Hover tooltip can't trigger on touch and its 280px box overflows the viewport */
+  .prd-tag { cursor: default; }
+  .prd-tag::after { display: none; }
   .prd-name { font-size: 30px; }
   .prd-features { grid-template-columns: 1fr; }
+  /* Fixed-column grids that would otherwise overflow narrow screens */
+  .eks-compl-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 22px; }
+  .eks-compl-deadline { text-align: left; }
+  .eks-phase { grid-template-columns: 1fr; gap: 6px; padding: 18px 22px; }
+  .eks-phase-dur { text-align: left; }
+  .eks-timeline-row { grid-template-columns: 1fr; gap: 8px; }
+  .eks-svc-meta { grid-template-columns: repeat(2, 1fr); }
+  .eks-post-body .severity-card { grid-template-columns: 1fr; }
+}
+
+/* ── PHONES ──────────────────────────────────── */
+@media (max-width: 560px) {
+  .page, .page-wide, .page-narrow { padding-left: 20px; padding-right: 20px; }
+  .eks-hero { padding: 56px 0 64px; }
+  .eks-hero-h { font-size: 34px; }
+  .eks-hero-meta { grid-template-columns: 1fr 1fr; gap: 20px; }
+  .eks-section { padding: 56px 0; }
+  .eks-dark, .eks-cta { padding: 64px 0; }
+  .eks-section-title { font-size: 28px; }
+  .eks-blog-hero h1 { font-size: 34px; }
+  .eks-sobre-hero h1, .eks-svc-hero h1 { font-size: 30px; }
+  .eks-post-h1 { font-size: 27px; }
+  .eks-post-body h2 { font-size: 24px; }
+  .eks-cta-h { font-size: 26px; }
+  .eks-cta-actions { width: 100%; }
+  .eks-cta-actions .ef-btn { flex: 1; justify-content: center; }
+  .eks-metric-val { font-size: 36px; }
+  .eks-foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
 }