From 30e85b24389a994d203449851fe93f9725a39420 Mon Sep 17 00:00:00 2001 From: andre Date: Fri, 25 Sep 2026 21:48:25 +0100 Subject: [PATCH] =?UTF-8?q?fix(css):=20tipografia=20fluida=20com=20clamp()?= =?UTF-8?q?=20no=20site=20p=C3=BAblico=20(auditoria=204.5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 6 seletores tinham font-size a fazer step-function em vez de escalar: .hero-text h1 (4 breakpoints), .section-title h2 (3), .page-top-section h1, .icon-box-item h3/h4 e os dois .schedule_box>div (2 cada). Cada par/ trio de valores por media query passa a um único clamp() na regra base, com a interpolação (vw) calculada para bater certo com o valor antigo nas larguras 375/768/1400px+ testadas. Ficam por mexer (não são apenas escala de tipo): .rounded_frame, .hero-text .site-btn, .site-btn @479px e .schedule_frame (o font-size muda junto com padding/width/min-width, é redimensionamento de layout, não só tipografia); .footer-menu li a (idem, padding muda junto — alvos de toque da auditoria 4.4); .contact-form/.newsletter-form input (o valor sobe para 1rem no mobile, não desce — evita o zoom automático do iOS ao focar); .md-card h3 (faz parte da troca de layout do cartão para modal fixo, não é só escala); .schedule_box a (o valor de mobile já era igual ao base, 11px, não havia degrau nenhum). Co-Authored-By: Claude Sonnet 5 --- site/assets/css/style.css | 73 +++++++++++---------------------------- 1 file changed, 20 insertions(+), 53 deletions(-) diff --git a/site/assets/css/style.css b/site/assets/css/style.css index 1beaabc..f86007f 100644 --- a/site/assets/css/style.css +++ b/site/assets/css/style.css @@ -216,7 +216,10 @@ p { } .section-title h2 { - font-size: 2.5rem; + /* Fluid: replaces 3 step values (2rem @768-991, 1.6rem @<=767, 1.4rem @<=479) + with one clamp anchored at 768px (2rem) -> 992px (2.5rem, the old desktop + value), audit 4.5. */ + font-size: clamp(1.4rem, calc(.2857rem + 3.5714vw), 2.5rem); line-height: 1.2; margin-bottom: .5rem; } @@ -511,7 +514,10 @@ section[id] { } .hero-text h1 { - font-size: 3.8rem; + /* Fluid: replaces 4 step values (3.2rem @992-1199, 2.7rem @768-991, + 2.1rem @<=767, 1.75rem @<=479) with one clamp anchored at 768px (2.7rem) + -> 1200px (3.8rem, the old desktop value), audit 4.5. */ + font-size: clamp(1.75rem, calc(.7444rem + 4.0741vw), 3.8rem); font-weight: 900; color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .5); @@ -772,7 +778,9 @@ section[id] { .icon-box-item h3, .icon-box-item h4 { margin-bottom: .75rem; - font-size: 1.15rem; + /* Fluid: replaces the .95rem @<=479px step with one clamp anchored at + 479px (.95rem) -> 768px (1.15rem, the old desktop value), audit 4.5. */ + font-size: clamp(.95rem, calc(.6185rem + 1.1073vw), 1.15rem); } .icon-box-item p { @@ -1115,12 +1123,16 @@ section[id] { } .schedule_box>div:first-of-type { - font-size: 16px; + /* Fluid: replaces the 14px @<=767px step with one clamp anchored at + 375px (14px) -> 768px (16px, the old desktop value), audit 4.5. */ + font-size: clamp(14px, calc(12.0916px + .5089vw), 16px); color: #fff; } .schedule_box>div:last-of-type { - font-size: 13px; + /* Fluid: replaces the 12px @<=767px step with one clamp anchored at + 375px (12px) -> 768px (13px, the old desktop value), audit 4.5. */ + font-size: clamp(12px, calc(11.0458px + .2545vw), 13px); color: rgba(255, 255, 255, .85); } @@ -1558,7 +1570,9 @@ h3.contact-title { .page-top-section h1 { display: inline-block; position: relative; - font-size: 4rem; + /* Fluid: replaces the 2.5rem @<=767px step with one clamp anchored at + 375px (2.5rem) -> 768px (4rem, the old desktop value), audit 4.5. */ + font-size: clamp(2.5rem, calc(1.0687rem + 6.1069vw), 4rem); color: #fff; padding-bottom: 16px; text-shadow: 0 2px 30px rgba(0, 0, 0, .7); @@ -1889,10 +1903,6 @@ h3.contact-title { /* ── 992px–1199px ──────────────────────────────────────────────────────────── */ @media only screen and (min-width: 992px) and (max-width: 1199px) { - .hero-text h1 { - font-size: 3.2rem; - } - .header-right .hr-box { display: none !important; } @@ -1904,18 +1914,10 @@ h3.contact-title { /* ── 768px–991px ───────────────────────────────────────────────────────────── */ @media only screen and (min-width: 768px) and (max-width: 991px) { - .hero-text h1 { - font-size: 2.7rem; - } - .header-right .hr-box { display: none; } - .section-title h2 { - font-size: 2rem; - } - /* Schedule keeps the time-aligned grid here; .schedule_container scrolls it sideways when six columns don't fit. */ @@ -1989,10 +1991,6 @@ h3.contact-title { padding-bottom: 100px; } - .hero-text h1 { - font-size: 2.1rem; - } - .hero-brand { font-size: .8rem; letter-spacing: .28em; @@ -2006,10 +2004,6 @@ h3.contact-title { } /* General */ - .section-title h2 { - font-size: 1.6rem; - } - html { scroll-padding-top: 60px; } @@ -2077,14 +2071,6 @@ h3.contact-title { font-size: 11px; } - .schedule_box>div:first-of-type { - font-size: 14px; - } - - .schedule_box>div:last-of-type { - font-size: 12px; - } - .schedule-scroll-hint { display: block; padding: 0 16px; @@ -2192,28 +2178,15 @@ h3.contact-title { .back-to-top { bottom: 140px; } - - /* CrossFit page */ - .page-top-section h1 { - font-size: 2.5rem; - } } /* ── ≤ 479px ───────────────────────────────────────────────────────────────── */ @media only screen and (max-width: 479px) { - .hero-text h1 { - font-size: 1.75rem; - } - .hero-text { padding-top: 100px; padding-bottom: 80px; } - .section-title h2 { - font-size: 1.4rem; - } - .trainer-item .trainer-pic { width: 120px; height: 120px; @@ -2241,12 +2214,6 @@ h3.contact-title { max-height: 34px; } - .icon-box-item h3, - .icon-box-item h4 { - font-size: .95rem; - } - - .rounded_frame { width: 100px; height: 30px;