fix(contraste+fontes): verde de texto legível em fundo claro e Roboto auto-hospedado

Contraste (auditoria 4.8, WCAG AA):
- Novo token --fitme-accent-ink #667000 (≈5.1:1 sobre #F7F8FA), aplicado aos 7
  usos de texto que estavam em --fitme-accent-dark (#A6B600 ≈2.1:1 em fundo claro).
  O --fitme-accent-dark mantém-se para fundos de botões em hover/active (onde tem
  texto escuro por cima — escurecê-lo quebraria esses estados).
- .section-eyebrow passa a usar o ink green nas secções claras (oferta, galeria,
  modalidades, horário, workhours); as secções escuras mantêm o verde vivo.

Fontes (CSS "Google Fonts ainda carregado do CDN"):
- Roboto (variável, latin, 43 KB woff2) em site/assets/fonts/roboto/.
- @font-face 100-900 em style.css; removidos os <link> para fonts.googleapis.com
  em include.php e gym_chooser.php. Ficam apenas os pedidos à API do Places
  (legítimos, server-side).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Fable 5 committed 2026-09-25 23:22:06 +01:00
1 parent 8a0c2272a4
commit c5c4a818f2
4 files changed
+34 -12

No files matched your search

+30 -7
View File
@@ -6,6 +6,15 @@
(#F7F8FA) for light/secondary. Treat the green as a spotlight (~10%).
========================================================================== */
/* Roboto, self-hosted (variable font, latin subset) — no Google Fonts request. */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/roboto/roboto-latin.woff2') format('woff2');
}
/* ── Design Tokens ─────────────────────────────────────────────────────────────
Brand palette — "Neon Moss" on a Void-Black → Charcoal-Slate dark ramp, with
an Ash-Silver / Arctic-White light toolkit. Darks carry a cool, greenish-
@@ -15,6 +24,10 @@
--fitme-accent: #C2D500;
--fitme-accent-rgb: 194, 213, 0;
--fitme-accent-dark: #A6B600;
/* Text-on-light variant: #C2D500/#A6B600 are only ~1.6–2.1:1 on white/surface
(WCAG AA needs 4.5:1), so text uses this darker olive. Bright accent stays
for dark sections and button backgrounds. */
--fitme-accent-ink: #667000;
/* deeper moss for hover / active */
/* The Anchor — Void Black, and a cool ramp lifting toward Charcoal Slate. */
@@ -2263,6 +2276,16 @@ h3.contact-title {
display: block;
}
/* Eyebrow on light sections: the neon accent is ~1.6:1 there (WCAG AA needs
4.5:1), so those use the ink green; dark sections keep the bright accent. */
.feature-section .section-eyebrow,
.gallery-section .section-eyebrow,
.service-section .section-eyebrow,
.schedule-section .section-eyebrow,
.workhours-section .section-eyebrow {
color: var(--fitme-accent-ink);
}
.section-title.deco h2 {
position: relative;
display: inline-block;
@@ -2356,7 +2379,7 @@ h3.contact-title {
.mod-card.has-info { cursor: pointer; outline: none; }
.mod-card.has-info:hover h3 { color: var(--fitme-accent-dark); }
.mod-card.has-info:hover h3 { color: var(--fitme-accent-ink); }
.mod-card.has-info:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .35);
@@ -2490,7 +2513,7 @@ h3.contact-title {
.md-card h3 {
font-size: 1.15rem;
margin: 0 .5rem;
color: var(--fitme-accent-dark);
color: var(--fitme-accent-ink);
}
.md-body {
@@ -2603,7 +2626,7 @@ h3.contact-title {
border: none;
background: none;
cursor: pointer;
color: var(--fitme-accent-dark);
color: var(--fitme-accent-ink);
font-weight: 700;
font-size: .85rem;
letter-spacing: .3px;
@@ -2967,7 +2990,7 @@ h3.contact-title {
}
.trial-form .consent-check a:hover {
color: var(--fitme-accent-dark);
color: var(--fitme-accent-ink);
}
.trial-form .site-btn {
@@ -3247,7 +3270,7 @@ h3.contact-title {
cursor: pointer;
}
.event-consent input { margin-top: 3px; flex: 0 0 auto; }
.event-consent a { color: var(--fitme-accent-dark); text-decoration: underline; }
.event-consent a { color: var(--fitme-accent-ink); text-decoration: underline; }
@media (max-width: 575px) {
.event-form-grid { grid-template-columns: 1fr; }
}
@@ -3458,7 +3481,7 @@ h3.contact-title {
display: block;
font-size: .82rem;
font-weight: 700;
color: var(--fitme-accent-dark);
color: var(--fitme-accent-ink);
margin-bottom: .6rem;
}
@@ -3795,7 +3818,7 @@ h3.contact-title {
.price-card.is-featured .pc-features li { color: #fff; }
.pc-features i {
color: var(--fitme-accent-dark);
color: var(--fitme-accent-ink);
margin-top: 3px;
font-size: .8rem;
}
Binary file not shown.
+2 -1
View File
@@ -13,9 +13,10 @@ $brand = 'FitMe';
<meta name="description" content="<?= htmlspecialchars($brand) ?>: <?= htmlspecialchars(implode(', ', array_map(fn($g) => $g['name'] . ($g['locality'] !== '' ? ' (' . $g['locality'] . ')' : ''), $gyms))) ?>.">
<link rel="canonical" href="<?= htmlspecialchars(base_url()) ?>">
<?php if (seo_noindex()): ?><meta name="robots" content="noindex, nofollow"><?php endif; ?>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="<?= base_url('site/assets/img/logos/logo_black.svg') ?>">
<style>
@font-face { font-family:'Roboto'; font-style:normal; font-weight:100 900; font-display:swap;
src:url('<?= base_url('site/assets/fonts/roboto/roboto-latin.woff2') ?>') format('woff2'); }
:root { --accent:#C2D500; --dark:#0B0B0D; --dark2:#16181A; --ash:#B8B9BE; }
* { box-sizing: border-box; }
body { margin:0; min-height:100svh; font-family:Roboto,system-ui,sans-serif; color:#fff;
+2 -4
View File
@@ -47,17 +47,15 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
<?php endif; ?>
<!-- Preconnect to external origins -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="https://forms.zohopublic.eu">
<?php if (($current_uri_2 ?? '') === ''): ?>
<!-- Homepage hero is the LCP image — start fetching it before the CSS/JS -->
<link rel="preload" as="image" fetchpriority="high" href="<?= htmlspecialchars(base_url(($gym_meta['hero_image'] ?? '') !== '' ? $gym_meta['hero_image'] : 'site/assets/img/home.jpg')) ?>">
<?php endif; ?>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap" rel="stylesheet">
<!-- Fonts (Roboto self-hosted — see @font-face in style.css) -->
<!-- Vendor: Bootstrap 4.3.1 -->
<!-- Vendor: Bootstrap 5.3.3 -->
<?= link_tag('assets/vendor/bootstrap5/css/bootstrap.min.css') ?>
<!-- Vendor: Font Awesome 5 -->