From d8b59b03f2aff4584aeb3fe2d050f9c56fc9fded Mon Sep 17 00:00:00 2001
From: Evandro Fonseca Junior <evandrodevbr@users.noreply.github.com>
Date: Sun, 4 Oct 2026 23:26:39 -0300
Subject: [PATCH] feat(design): container e tipografia fluidos, cabecalho de
 secao em duas colunas e grade de projetos automatica

- tokens --shell, --fs-section-title e --fs-lead: iguais ao desenho atual ate ~1440px e crescem em telas grandes
- .ds-section-header vira container; acima de 880px o titulo fica a esquerda e a descricao a direita (aninhamento nativo + container query)
- .ds-grid-fluid: 2 colunas em notebook e 3 em tela grande, sem breakpoint (usada em Projects)
- Hero acompanha a largura util em telas grandes

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/components/Hero.tsx     |  2 +-
 app/components/Projects.tsx |  2 +-
 app/globals.css             | 50 +++++++++++++++++++++++++++++++++++--
 3 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 32cbed0..ebe092a 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -35,7 +35,7 @@ export default function Hero() {
           duration: shouldReduceMotion ? 0 : 0.45,
           ease: "easeOut",
         }}
-        className="mx-auto grid w-full max-w-[1400px] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
+        className="mx-auto grid w-full max-w-[max(1400px,var(--shell))] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
       >
         <div className="min-w-0">
           <p className="mb-sp-5 text-[14px] leading-[1.5] text-[rgba(244,242,237,.72)]">
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index a41d635..81a3781 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -35,7 +35,7 @@ export default function Projects({
       dark
       disableChildrenAnimation
     >
-      <div className="ds-grid-2">
+      <div className="ds-grid-fluid">
         {projects.map((project) => {
           const caseStudy = caseStudies.find(
             (entry) => entry.id === project.id,
diff --git a/app/globals.css b/app/globals.css
index d8ed4a0..fe70236 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -48,6 +48,10 @@
   --r-lg: 16px;
   --r-full: 999px;
   --site-header-height: 60px;
+  /* Escala fluida: igual ao desenho original até ~1440px e cresce nas telas grandes. */
+  --shell: clamp(1240px, 76vw, 1760px);
+  --fs-section-title: min(max(clamp(24px, 4vw, 44px), 3.05vw), 68px);
+  --fs-lead: min(max(15px, 1.05vw), 19px);
   --font-display: var(--font-space-grotesk), sans-serif;
   --font-hero: var(--font-monument-extended), sans-serif;
   --font-mono: var(--font-geist-mono), monospace;
@@ -248,7 +252,7 @@ textarea {
 .ds-section-shell,
 .ds-loading,
 .ds-error {
-  width: min(1240px, 100%);
+  width: min(var(--shell), 100%);
   margin: 0 auto;
 }
 
@@ -258,10 +262,45 @@ textarea {
   align-items: flex-start;
   gap: var(--sp-6);
   margin-bottom: var(--sp-10);
+  /* o cabeçalho mede a si mesmo: a mesma regra serve para qualquer largura de tela */
+  container-type: inline-size;
 }
 
 .ds-section-meta {
+  flex: 1 1 auto;
+  min-width: 0;
   max-width: 760px;
+
+  /* Largo: título à esquerda, descrição à direita, alinhados pela base (some a faixa vazia ao lado do título). */
+  @container (min-width: 880px) {
+    max-width: none;
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+    grid-template-areas:
+      "eyebrow eyebrow"
+      "title lead"
+      "line line";
+    column-gap: var(--sp-10);
+    align-items: end;
+
+    > .ds-eyebrow {
+      grid-area: eyebrow;
+    }
+
+    > .ds-section-title {
+      grid-area: title;
+    }
+
+    > .ds-section-description {
+      grid-area: lead;
+      max-width: 62ch;
+      font-size: var(--fs-lead);
+    }
+
+    > .ds-draw-line {
+      grid-area: line;
+    }
+  }
 }
 
 .ds-eyebrow,
@@ -278,7 +317,7 @@ textarea {
 
 .ds-section-title {
   font-family: var(--font-display);
-  font-size: clamp(24px, 4vw, 44px);
+  font-size: var(--fs-section-title);
   line-height: 1.02;
   font-weight: 800;
   letter-spacing: -0.035em;
@@ -301,6 +340,13 @@ textarea {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+/* Colunas automáticas: sem breakpoint. Cabem 2 até ~1360px de largura útil e 3 acima disso. */
+.ds-grid-fluid {
+  display: grid;
+  gap: var(--sp-6);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
+}
+
 .ds-grid-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }