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:
1 parent
8a0c2272a4
commit
c5c4a818f2
4 files changed
+34
-12
No files matched your search
@@ -6,6 +6,15 @@
|
|||||||
(#F7F8FA) for light/secondary. Treat the green as a spotlight (~10%).
|
(#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 ─────────────────────────────────────────────────────────────
|
/* ── Design Tokens ─────────────────────────────────────────────────────────────
|
||||||
Brand palette — "Neon Moss" on a Void-Black → Charcoal-Slate dark ramp, with
|
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-
|
an Ash-Silver / Arctic-White light toolkit. Darks carry a cool, greenish-
|
||||||
@@ -15,6 +24,10 @@
|
|||||||
--fitme-accent: #C2D500;
|
--fitme-accent: #C2D500;
|
||||||
--fitme-accent-rgb: 194, 213, 0;
|
--fitme-accent-rgb: 194, 213, 0;
|
||||||
--fitme-accent-dark: #A6B600;
|
--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 */
|
/* deeper moss for hover / active */
|
||||||
|
|
||||||
/* The Anchor — Void Black, and a cool ramp lifting toward Charcoal Slate. */
|
/* The Anchor — Void Black, and a cool ramp lifting toward Charcoal Slate. */
|
||||||
@@ -2263,6 +2276,16 @@ h3.contact-title {
|
|||||||
display: block;
|
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 {
|
.section-title.deco h2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -2356,7 +2379,7 @@ h3.contact-title {
|
|||||||
|
|
||||||
.mod-card.has-info { cursor: pointer; outline: none; }
|
.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 {
|
.mod-card.has-info:focus-visible {
|
||||||
box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .35);
|
box-shadow: 0 0 0 3px rgba(var(--fitme-accent-rgb), .35);
|
||||||
@@ -2490,7 +2513,7 @@ h3.contact-title {
|
|||||||
.md-card h3 {
|
.md-card h3 {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
margin: 0 .5rem;
|
margin: 0 .5rem;
|
||||||
color: var(--fitme-accent-dark);
|
color: var(--fitme-accent-ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-body {
|
.md-body {
|
||||||
@@ -2603,7 +2626,7 @@ h3.contact-title {
|
|||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--fitme-accent-dark);
|
color: var(--fitme-accent-ink);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: .85rem;
|
font-size: .85rem;
|
||||||
letter-spacing: .3px;
|
letter-spacing: .3px;
|
||||||
@@ -2967,7 +2990,7 @@ h3.contact-title {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.trial-form .consent-check a:hover {
|
.trial-form .consent-check a:hover {
|
||||||
color: var(--fitme-accent-dark);
|
color: var(--fitme-accent-ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.trial-form .site-btn {
|
.trial-form .site-btn {
|
||||||
@@ -3247,7 +3270,7 @@ h3.contact-title {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.event-consent input { margin-top: 3px; flex: 0 0 auto; }
|
.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) {
|
@media (max-width: 575px) {
|
||||||
.event-form-grid { grid-template-columns: 1fr; }
|
.event-form-grid { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
@@ -3458,7 +3481,7 @@ h3.contact-title {
|
|||||||
display: block;
|
display: block;
|
||||||
font-size: .82rem;
|
font-size: .82rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--fitme-accent-dark);
|
color: var(--fitme-accent-ink);
|
||||||
margin-bottom: .6rem;
|
margin-bottom: .6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3795,7 +3818,7 @@ h3.contact-title {
|
|||||||
.price-card.is-featured .pc-features li { color: #fff; }
|
.price-card.is-featured .pc-features li { color: #fff; }
|
||||||
|
|
||||||
.pc-features i {
|
.pc-features i {
|
||||||
color: var(--fitme-accent-dark);
|
color: var(--fitme-accent-ink);
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
@@ -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))) ?>.">
|
<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()) ?>">
|
<link rel="canonical" href="<?= htmlspecialchars(base_url()) ?>">
|
||||||
<?php if (seo_noindex()): ?><meta name="robots" content="noindex, nofollow"><?php endif; ?>
|
<?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') ?>">
|
<link rel="icon" type="image/svg+xml" href="<?= base_url('site/assets/img/logos/logo_black.svg') ?>">
|
||||||
<style>
|
<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; }
|
:root { --accent:#C2D500; --dark:#0B0B0D; --dark2:#16181A; --ash:#B8B9BE; }
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
body { margin:0; min-height:100svh; font-family:Roboto,system-ui,sans-serif; color:#fff;
|
body { margin:0; min-height:100svh; font-family:Roboto,system-ui,sans-serif; color:#fff;
|
||||||
|
|||||||
@@ -47,17 +47,15 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- Preconnect to external origins -->
|
<!-- Preconnect to external origins -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
||||||
<link rel="dns-prefetch" href="https://forms.zohopublic.eu">
|
<link rel="dns-prefetch" href="https://forms.zohopublic.eu">
|
||||||
<?php if (($current_uri_2 ?? '') === ''): ?>
|
<?php if (($current_uri_2 ?? '') === ''): ?>
|
||||||
<!-- Homepage hero is the LCP image — start fetching it before the CSS/JS -->
|
<!-- 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')) ?>">
|
<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; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts (Roboto self-hosted — see @font-face in style.css) -->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- Vendor: Bootstrap 4.3.1 -->
|
<!-- Vendor: Bootstrap 5.3.3 -->
|
||||||
<?= link_tag('assets/vendor/bootstrap5/css/bootstrap.min.css') ?>
|
<?= link_tag('assets/vendor/bootstrap5/css/bootstrap.min.css') ?>
|
||||||
|
|
||||||
<!-- Vendor: Font Awesome 5 -->
|
<!-- Vendor: Font Awesome 5 -->
|
||||||
|
|||||||
Reference in new issue
Block a user