From 461bea46cc4d1ba93fa10ee71fbfdb60f61d3b13 Mon Sep 17 00:00:00 2001
From: Javier Blanco <javierblancodetorres@gmail.com>
Date: Fri, 1 May 2026 09:49:10 +0700
Subject: [PATCH] Constrain layout for ultra-wide screens

Add --sf-max-w (1280px) and --sf-pad (40px) tokens. Full-bleed sections
(topbar, footer) use max() padding to keep backgrounds edge-to-edge while
centering content. Content sections (hero, pillars, coming, cta, page)
use max-width + margin-inline: auto. Mobile/tablet breakpoints unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 css/style.css | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 80a867e..ff10faf 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,6 +11,8 @@
   --sf-ink:       #0E0B0E;
   --sf-ink-2:     #15101A;
   --sf-paper:     #F7EFE3;
+  --sf-max-w:     1280px;
+  --sf-pad:       40px;
 }
 
 /* ── Reset ── */
@@ -61,7 +63,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  padding: 18px 40px;
+  padding: 18px max(var(--sf-pad), calc((100% - var(--sf-max-w)) / 2));
   border-bottom: 1px solid rgba(255,246,232,0.06);
   position: sticky;
   top: 0;
@@ -221,7 +223,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
 /* ── Hero ── */
 .sfB-hero {
-  padding: 48px 40px 30px;
+  padding: 48px var(--sf-pad) 30px;
+  max-width: var(--sf-max-w);
+  margin-inline: auto;
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 40px;
@@ -471,7 +475,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
 /* ── Pillars trio ── */
 .sfB-pillars {
-  padding: 60px 40px 30px;
+  padding: 60px var(--sf-pad) 30px;
+  max-width: var(--sf-max-w);
+  margin-inline: auto;
 }
 .sfB-pillars .head {
   display: flex;
@@ -552,7 +558,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
 /* ── Schedule teaser ── */
 .sfB-coming {
-  padding: 30px 40px 60px;
+  padding: 30px var(--sf-pad) 60px;
+  max-width: var(--sf-max-w);
+  margin-inline: auto;
 }
 .sfB-coming .head {
   display: flex;
@@ -646,7 +654,8 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 /* ── CTA block ── */
 .sfB-cta {
   position: relative;
-  margin: 0 40px 50px;
+  max-width: calc(var(--sf-max-w) - 2 * var(--sf-pad));
+  margin: 0 auto 50px;
   padding: 40px;
   border-radius: 28px;
   background:
@@ -713,7 +722,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
 /* ── Footer ── */
 .sfB-foot {
-  padding: 28px 40px;
+  padding: 28px max(var(--sf-pad), calc((100% - var(--sf-max-w)) / 2));
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -732,7 +741,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
 /* ── Page head (inner pages) ── */
 .sfB-page {
-  padding: 28px 40px 40px;
+  padding: 28px var(--sf-pad) 40px;
+  max-width: var(--sf-max-w);
+  margin-inline: auto;
 }
 .sfB-page-head {
   margin-top: 28px;
@@ -1265,6 +1276,8 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
 /* ── Responsive: tablet ── */
 @media (max-width: 960px) {
+  :root { --sf-pad: 20px; }
+
   .sfB-topbar {
     grid-template-columns: 1fr auto;
     padding: 14px 20px;
@@ -1294,7 +1307,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
   .sfB-coming .head h2 { font-size: 38px; }
   .sfB-coming-row { grid-template-columns: 1fr 1fr; }
 
-  .sfB-cta { margin: 0 20px 36px; padding: 28px; grid-template-columns: 1fr; }
+  .sfB-cta { max-width: none; margin: 0 20px 36px; padding: 28px; grid-template-columns: 1fr; }
   .sfB-cta .quote { font-size: 26px; }
 
   .sfB-foot { padding: 20px; flex-direction: column; text-align: center; font-size: 10px; }