feat(site): per-gym SEO texts, event gym selector, hero/navbar polish

- Generated SEO titles/descriptions per gym; gym seo fields override each on its own - Keywords, author, og:site_name, favicon and JSON-LD logo follow the gym - CrossFit page 404s before output for gyms without a box - Events: «Mostrar em» gym selector; event page uses its gym's brand - Hero event button text colour from the event colour (--ev-on) - Navbar bottom line stops at the other-gym head (--switch-w) - Diagonal hero blur mask; remove the trial link
2026-10-26 12:15:37 +00:00
1 parent 785d1f6ceb
commit 725f5b9c26
@@ -600,7 +600,7 @@ section[id] {
  content: '';
  position: absolute;
  left: 0;
-  right: 0;
+  right: var(--switch-w, 0px);   /* ends where the other-gym head starts (navbar.php JS) */
  bottom: -1px;
  height: 2px;
  pointer-events: none;
@@ -894,7 +894,15 @@ section[id] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 36%, #000 50%, rgba(0, 0, 0, .55) 64%, transparent 82%);
  mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 36%, #000 50%, rgba(0, 0, 0, .55) 64%, transparent 82%);
 }
+/* The blur fades in diagonally: lightest at the top left, full at the bottom
+   right (second mask layer, intersected with the band above). */
 .hero-section .container::before {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 36%, #000 50%, rgba(0, 0, 0, .55) 64%, transparent 82%),
+                      linear-gradient(135deg, rgba(0, 0, 0, .15) 15%, #000 75%);
+  mask-image: linear-gradient(to bottom, transparent 18%, rgba(0, 0, 0, .55) 36%, #000 50%, rgba(0, 0, 0, .55) 64%, transparent 82%),
+              linear-gradient(135deg, rgba(0, 0, 0, .15) 15%, #000 75%);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  opacity: .8;
@@ -962,31 +970,12 @@ section[id] {

 .hero-cta-row {
  display: flex;
-  flex-direction: column;   /* the button, then the trial link as plain text under it */
+  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 2.5rem;
 }

-/* "Marca uma aula experimental": text only, under the main button. */
-.hero-text-link {
-  background: none;
-  border: 0;
-  padding: 4px 8px;
-  color: #fff;
-  font: inherit;
-  font-weight: 300;
-  letter-spacing: .02em;
-  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
-  cursor: pointer;
-  transition: color .3s ease;
-}
-.hero-text-link:hover,
-.hero-text-link:focus-visible {
-  color: var(--fitme-accent);
-  text-decoration: none;
-}
-
 .hero-cta-row .site-btn {
  margin-top: 0;
 }
@@ -3541,7 +3530,7 @@ h3.contact-title {
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
-  color: var(--fitme-on-accent);   /* white on the red gym, dark on lime */
+  color: var(--ev-on, var(--fitme-on-accent));   /* set from the event colour (index.php) */
  background: var(--ev-accent);
 }
 .hero-event-go i { transition: transform var(--fitme-transition); }
@@ -12,9 +12,13 @@ if (($_GET['gym'] ?? '') === '') {
    exit;
 }

+// Only gyms with a CrossFit box have this page: a real 404 status, so decide before any output.
+require_once __DIR__ . '/../config/db.php';
+require_once __DIR__ . '/../config/functions.php';
+$cf_gym = site_gym($pdo);
+if ($cf_gym && empty($cf_gym['has_crossfit'])) { require __DIR__ . '/404.php'; exit; }
+
 require __DIR__ . '/_open.php';
-// Only gyms with a CrossFit box have this page.
-if (empty($gym['has_crossfit'])) { ob_get_level() && ob_end_clean(); require __DIR__ . '/404.php'; exit; }

 $data = [
    'title'              => 'CrossFit',
@@ -105,8 +105,12 @@ $seo_desc  = $event['summary'] !== ''
    : trim(mb_substr(strip_tags((string) ($event['subtitle'] ?: $event['description'])), 0, 200));

 $current_uri_2 = 'evento';
+// An event tied to one gym (Eventos → «Mostrar em») renders in that gym's brand.
+$ev_gym = !empty($event['gym_id']) ? db_gyms_get($pdo, (int) $event['gym_id']) : null;
+if ($ev_gym && empty($_GET['gym'])) $_GET['gym'] = $ev_gym['slug'];
+$ev_gym = $ev_gym ?? site_gym($pdo) ?? gym_fallback();
 $GLOBALS['_page_meta_override'] = [
-    ($event['title'] !== '' ? $event['title'] : 'Evento') . ' | FitMe 3070',
+    ($event['title'] !== '' ? $event['title'] : 'Evento') . ' | ' . $ev_gym['name'],
    $seo_desc,
 ];
 $GLOBALS['_canonical_override'] = $event_url;
@@ -114,7 +118,7 @@ $GLOBALS['_og_type_override']   = 'article';
 if ($hero_url !== '') $GLOBALS['_og_image_override'] = $hero_url;

 // Event structured data (schema.org/Event) for rich link previews / search.
-$info = site_info($pdo);
+$info = site_info($pdo, (int) $ev_gym['id']);
 $ld_event = [
    '@context'    => 'https://schema.org',
    '@type'       => 'Event',
@@ -130,11 +134,11 @@ if (!empty($event['event_ends_at']))   $ld_event['endDate']   = str_replace(' ',
 $ld_event['location'] = $event['location'] !== ''
    ? ['@type' => 'Place', 'name' => $event['location']]
    : ['@type' => 'Place',
-       'name'    => ($info['name'] ?? '') !== '' ? $info['name'] : 'FitMe 3070',
+       'name'    => ($info['name'] ?? '') !== '' ? $info['name'] : $ev_gym['name'],
       'address' => $info['adress'] ?? ''];
 $ld_event['organizer'] = [
    '@type' => 'Organization',
-    'name'  => ($info['name'] ?? '') !== '' ? $info['name'] : 'FitMe 3070',
+    'name'  => ($info['name'] ?? '') !== '' ? $info['name'] : $ev_gym['name'],
    'url'   => base_url(),
 ];
 $GLOBALS['_jsonld_extra'] = $ld_event;
@@ -2,27 +2,37 @@
 // Per-page metadata, keyed by $current_uri_2. The canonical URL comes from
 // base_url(), which matches the https + non-www redirect in .htaccess.
 $page = $current_uri_2 ?? '';
-$page_meta = [
-    '' => ['FitMe 3070 — Ginásio & CrossFit em Mira',
-           'Ginásio em Mira (Lagoa) com musculação, CrossFit, aulas de grupo, personal trainers, nutrição e fisioterapia. Inscreve-te já no FitMe 3070!'],
-    'crossfit' => ['CrossFit 3070 — Box de CrossFit em Mira | FitMe 3070',
-           'Box de CrossFit em Mira (Lagoa). Aulas para todos os níveis com treinadores certificados. Marca a tua aula experimental no CrossFit 3070!'],
-    'privacidade' => ['Política de Privacidade | FitMe 3070',
-           'Política de privacidade do FitMe 3070 — como recolhemos, usamos e protegemos os teus dados pessoais.'],
-    'termos' => ['Termos e Condições | FitMe 3070',
-           'Termos e condições de utilização do website do FitMe 3070.'],
-];
-// The gym's homepage uses the gym's own SEO title/description when set
-// (Gestão → Ginásios); a new gym without them gets a generic one from its name
-// and locality rather than the 3070 texts above.
+// Titles ~50-60 characters, descriptions ~140-160 (what Google shows).
 $gym_meta = current_gym();
-if ($page === '' && ($gym_meta['seo_title'] ?? '') !== '') {
-    $page_meta[''] = [$gym_meta['seo_title'], ($gym_meta['seo_description'] ?? '') !== '' ? $gym_meta['seo_description'] : $page_meta[''][1]];
-} elseif ($page === '' && (int) $gym_meta['id'] !== 1) {
-    $loc = ($gym_meta['locality'] ?? '') !== '' ? ' em ' . $gym_meta['locality'] : '';
-    $page_meta[''] = [$gym_meta['name'] . ' — Ginásio' . $loc,
-                      ($gym_meta['seo_description'] ?? '') !== '' ? $gym_meta['seo_description'] : 'Ginásio ' . $gym_meta['name'] . $loc . ': treino, aulas de grupo e acompanhamento.'];
+$gym_name = ($gym_meta['name'] ?? '') !== '' ? $gym_meta['name'] : 'FitMe 3070';
+$is_main  = (int) ($gym_meta['id'] ?? 1) === 1;
+$loc      = ($gym_meta['locality'] ?? '') !== '' ? $gym_meta['locality'] : 'Mira';
+$loc_in   = (preg_match('/^(zona|rua|avenida|praia|vila)/iu', $loc) ? 'na ' : 'em ') . $loc;   // «na Zona Industrial de Mira»
+$page_meta = [
+    '' => $is_main
+        ? ['FitMe 3070 — Ginásio e CrossFit em Mira',
+           'Ginásio em Mira (Lagoa) com musculação, CrossFit, aulas de grupo, personal trainers, nutrição e fisioterapia. Vê horários e mensalidades e inscreve-te!']
+        // Other gyms without their own texts get them from name and locality, never the 3070 ones.
+        : [$gym_name . ' — Ginásio ' . $loc_in,
+           $gym_name . ', ginásio ' . $loc_in . ': musculação, cardio e treino funcional com acompanhamento. Vê horários e mensalidades e inscreve-te já!'],
+    'crossfit' => $is_main
+        ? ['CrossFit 3070 — Box de CrossFit em Mira | FitMe 3070',
+           'Box de CrossFit em Mira (Lagoa) com treinadores certificados e aulas para todos os níveis, do primeiro treino à competição. Vê o horário e treina connosco!']
+        : ['CrossFit — Box ' . $loc_in . ' | ' . $gym_name,
+           'Box de CrossFit do ' . $gym_name . ' ' . $loc_in . ': aulas para todos os níveis com treinadores certificados. Vê o horário e treina connosco!'],
+    'privacidade' => ['Política de Privacidade | ' . $gym_name,
+           'Política de privacidade do ' . $gym_name . ': que dados pessoais recolhemos, para quê, durante quanto tempo e como exerces os teus direitos (RGPD).'],
+    'termos' => ['Termos e Condições | ' . $gym_name,
+           'Termos e condições de utilização do site do ' . $gym_name . ': pedidos de inscrição, preços, horários, eventos e limites de responsabilidade.'],
+];
+// The gym's own SEO title/description (Gestão → Ginásios) win on its homepage, each on its own.
+if ($page === '') {
+    if (($gym_meta['seo_title'] ?? '') !== '')       $page_meta[''][0] = $gym_meta['seo_title'];
+    if (($gym_meta['seo_description'] ?? '') !== '') $page_meta[''][1] = $gym_meta['seo_description'];
 }
+// Favicon: the gym's own logo when it is an SVG.
+$gym_logo_rel = gym_logo($gym_meta);
+$favicon_rel  = str_ends_with(strtolower($gym_logo_rel), '.svg') ? $gym_logo_rel : 'site/assets/img/logos/logo_black.svg';
 // A dynamic page (e.g. an event landing page) can set its own title/description
 // and canonical via these globals before requiring _open.php.
 [$page_title, $page_desc] = $GLOBALS['_page_meta_override'] ?? $page_meta[$page] ?? $page_meta[''];
@@ -37,8 +47,8 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="<?= htmlspecialchars($page_desc) ?>">
-<meta name="keywords" content="fitness, ginásio, exercício, personal trainer, crossfit, box, aveiro, mira">
-<meta name="author" content="FitMe 3070">
+<meta name="keywords" content="<?= htmlspecialchars('ginásio, fitness, musculação, personal trainer, ' . (!empty($gym_meta['has_crossfit']) ? 'crossfit, box, ' : '') . mb_strtolower($loc) . ', ' . $gym_name) ?>">
+<meta name="author" content="<?= htmlspecialchars($gym_name) ?>">
 <meta name="theme-color" content="<?= htmlspecialchars(($gym_meta['brand_color'] ?? '') !== '' ? $gym_meta['brand_color'] : '#C2D500') ?>">
 <title><?= htmlspecialchars($page_title) ?></title>
 <link rel="canonical" href="<?= htmlspecialchars($canonical) ?>">
@@ -68,13 +78,13 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
 <?= link_tag('site/assets/css/style.css') ?>

 <!-- Favicon -->
-<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="<?= htmlspecialchars(base_url($favicon_rel)) ?>">
 <link rel="apple-touch-icon" sizes="180x180" href="<?= base_url('site/assets/img/logos/apple-touch-icon.png') ?>">

 <!-- Open Graph / link previews -->
 <meta property="og:url" content="<?= htmlspecialchars($canonical) ?>">
 <meta property="og:type" content="<?= htmlspecialchars($GLOBALS['_og_type_override'] ?? 'website') ?>">
-<meta property="og:site_name" content="FitMe 3070">
+<meta property="og:site_name" content="<?= htmlspecialchars($gym_name) ?>">
 <meta property="og:locale" content="pt_PT">
 <meta property="og:title" content="<?= htmlspecialchars($page_title) ?>">
 <meta property="og:description" content="<?= htmlspecialchars($page_desc) ?>">
@@ -109,8 +109,15 @@ $center_logo = !empty($nav_center_logo);
    /* ── Mobile menu fills the screen below the bar (style.css --nav-h) ──── */
    var hdr = document.querySelector('.header-section');
    if (hdr) {
-        var setNavH = function() { hdr.style.setProperty('--nav-h', hdr.offsetHeight + 'px'); };
+        // Desktop: the bottom sweep line stops at the other-gym head (style.css --switch-w).
+        var sw = hdr.querySelector('.gym-switch');
+        var setNavH = function() {
+            hdr.style.setProperty('--nav-h', hdr.offsetHeight + 'px');
+            var w = (sw && window.innerWidth >= 992) ? hdr.getBoundingClientRect().right - sw.getBoundingClientRect().left + 5 : 0;
+            hdr.style.setProperty('--switch-w', Math.max(0, w) + 'px');
+        };
        window.addEventListener('resize', setNavH, { passive: true });
+        window.addEventListener('load', setNavH);
        setNavH();
    }

@@ -8,7 +8,7 @@ $ld = [
    'name'     => $ld_gym['name'] !== '' ? $ld_gym['name'] : (($info['name'] ?? '') !== '' ? $info['name'] : 'FitMe 3070'),
    'url'      => gym_url($ld_gym),
    'image'    => base_url(img_compat_rel(($ld_gym['hero_image'] ?? '') !== '' ? $ld_gym['hero_image'] : 'site/assets/img/home.jpg')),
-    'logo'     => base_url('site/assets/img/logos/logo_black.svg'),
+    'logo'     => base_url(img_compat_rel(gym_logo($ld_gym) ?: 'site/assets/img/logos/logo_black.svg')),
 ];
 if (!empty($info['phone'])) $ld['telephone'] = site_tel($info['phone']);
 if (!empty($info['email'])) $ld['email']     = $info['email'];
@@ -61,10 +61,12 @@ $hero_img    = $gym['hero_image'] !== '' ? $gym['hero_image'] : 'site/assets/img
            <div class="hero-events">
                <?php foreach ($events as $ev):
                    $ac     = $ev['cor'] !== '' ? $ev['cor'] : '#C2D500';
+                    // Button text follows the event's colour, not the page gym's (red event on lime 3070).
+                    $ev_on  = str_contains(gym_brand_vars(['brand_color' => $ac]), 'on-accent:#FFFFFF') ? '#FFFFFF' : '#0B0B0D';
                    $ev_img = $ev['hero_image'] !== '' ? base_url('uploads/events/' . rawurlencode($ev['hero_image'])) : '';
                ?>
                <a class="hero-event<?= $ev_img ? ' has-img' : '' ?>" href="<?= base_url('evento/' . rawurlencode($ev['slug'])) ?>"
-                   style="--ev-accent:<?= htmlspecialchars($ac, ENT_QUOTES) ?><?= $ev_img ? ';--ev-img:url(\'' . htmlspecialchars($ev_img, ENT_QUOTES) . '\')' : '' ?>">
+                   style="--ev-accent:<?= htmlspecialchars($ac, ENT_QUOTES) ?>;--ev-on:<?= $ev_on ?><?= $ev_img ? ';--ev-img:url(\'' . htmlspecialchars($ev_img, ENT_QUOTES) . '\')' : '' ?>">
                    <span class="hero-event-badge"><span class="event-live-dot"></span><i class="fas fa-bolt"></i> Evento</span>
                    <span class="hero-event-text">
                        <strong class="hero-event-title"><?= htmlspecialchars($ev['title']) ?></strong>
@@ -78,7 +80,6 @@ $hero_img    = $gym['hero_image'] !== '' ? $gym['hero_image'] : 'site/assets/img
            <h1><?= htmlspecialchars($gym['hero_title'] !== '' ? $gym['hero_title'] : $gym['name']) ?><?php if ($gym['hero_subtitle'] !== ''): ?><br><span><?= htmlspecialchars($gym['hero_subtitle']) ?></span><?php endif; ?></h1>
            <div class="hero-cta-row">
                <a href="?assunto=insc#contactos" class="site-btn">Inscreve-te Já!</a>
-                <button type="button" class="hero-text-link" data-bs-toggle="modal" data-bs-target="#trialModal">Marca uma aula experimental</button>
            </div>
        </div>
    </div>