Site polish: tighter modalidades spacing, less schedule redundancy, plan section styling

- Modalidades: reduce gap between cards
- Horário: drop the day-title above the grid in single-day mode (the active
  day-filter button already names it); restyle "Guardar horário" as a plain
  link and drop the "(JPG)" suffix
- Mensalidades: give "Escolhe o teu plano" the same dark hammered-metal
  background as the reviews/footer sections instead of the plain light one
This commit is contained in:
andre committed 2026-09-25 13:01:47 +01:00
1 parent 300655b92a
commit ff1d0fdc07
4 files changed
+32 -16

No files matched your search

+29 -13
View File
@@ -2368,11 +2368,11 @@ h3.contact-title {
flex: 0 0 auto; flex: 0 0 auto;
width: 180px; width: 180px;
min-height: 200px; min-height: 200px;
margin: 0 1rem 0 0; margin: 0 .5rem 0 0;
position: relative; position: relative;
} }
.mod-scroll .mod-card:first-child { margin-left: 1rem; } .mod-scroll .mod-card:first-child { margin-left: .5rem; }
.mod-card.has-info { cursor: pointer; outline: none; } .mod-card.has-info { cursor: pointer; outline: none; }
@@ -2609,32 +2609,32 @@ h3.contact-title {
} }
/* ── Horário "save as JPG" button + capture-clone export board ─────────────── */ /* ── Horário "save as JPG" link + capture-clone export board ────────────────
A plain underlined link rather than a button — secondary action, shouldn't
compete with the day-filter bar right below it. */
.schedule-dl-btn { .schedule-dl-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
border: none; border: none;
background: none;
cursor: pointer; cursor: pointer;
background: var(--fitme-accent); color: var(--fitme-accent-dark);
color: var(--fitme-dark);
font-weight: 700; font-weight: 700;
font-size: .85rem; font-size: .85rem;
letter-spacing: .3px; letter-spacing: .3px;
padding: 10px 18px; padding: 0;
border-radius: var(--fitme-radius); text-decoration: underline;
transition: background var(--fitme-transition), transform var(--fitme-transition); transition: color var(--fitme-transition);
} }
.schedule-dl-btn:hover { .schedule-dl-btn:hover {
background: var(--fitme-accent-dark); color: var(--fitme-accent);
transform: translateY(-1px);
} }
.schedule-dl-btn:disabled { .schedule-dl-btn:disabled {
opacity: .6; opacity: .6;
cursor: default; cursor: default;
transform: none;
} }
/* Applied (via html2canvas onclone) to the schedule clone inside the capture /* Applied (via html2canvas onclone) to the schedule clone inside the capture
@@ -2792,6 +2792,14 @@ h3.contact-title {
display: none !important; display: none !important;
} }
/* Single-day mode: the active day-filter button already names the day being
shown — drop the redundant title above the grid. Kept for the 3-day desktop
view (.is-3day), where the header also distinguishes three different days
and the side ones stay clickable. */
.schedule:not(.schedule-export):not(.is-3day) .schedule_dayhead {
display: none !important;
}
.schedule-scroll-hint { .schedule-scroll-hint {
display: none !important; display: none !important;
} }
@@ -3575,11 +3583,19 @@ h3.contact-title {
/* ══════════════════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════════════════
Mensalidades — cartões de preço Mensalidades — cartões de preço
══════════════════════════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════════════════════════ */
/* Same matte-black metal texture as the reviews section / footer, instead of
the plain light surface — the two dark bands now bookend the page. */
.pricing-section { .pricing-section {
padding: 90px 0 70px; padding: 90px 0 70px;
background: var(--fitme-surface); background-color: #141517;
background-image: var(--metal-layers);
background-size: var(--metal-sizes);
color: var(--fitme-ash);
} }
.pricing-section .section-title h2 { color: #fff; }
.pricing-section .section-subtitle { color: var(--fitme-ash); }
.pricing-grid { .pricing-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
+1 -1
View File
@@ -200,7 +200,7 @@ document.addEventListener('DOMContentLoaded', function () {
// ── Arrow buttons ───────────────────────────────────────────────────── // ── Arrow buttons ─────────────────────────────────────────────────────
function step(dir) { function step(dir) {
var card = scroller.querySelector('.mod-card'); var card = scroller.querySelector('.mod-card');
var by = card ? (card.offsetWidth + 16) * Math.max(1, Math.floor(scroller.clientWidth / (card.offsetWidth + 16)) - 1) : 400; var by = card ? (card.offsetWidth + 8) * Math.max(1, Math.floor(scroller.clientWidth / (card.offsetWidth + 8)) - 1) : 400;
touched(); touched();
if (dir < 0 && scroller.scrollLeft - by < 0) { scroller.scrollLeft += loopWidth(); } if (dir < 0 && scroller.scrollLeft - by < 0) { scroller.scrollLeft += loopWidth(); }
scroller.scrollBy({ left: dir * by, behavior: reduced.matches ? 'auto' : 'smooth' }); scroller.scrollBy({ left: dir * by, behavior: reduced.matches ? 'auto' : 'smooth' });
+1 -1
View File
@@ -37,7 +37,7 @@ foreach ($rows as $d) { $grid[$d['dia_semana']][$d['hora_inicio']][] = $d; }
</div> </div>
<div class="text-center mb-2"> <div class="text-center mb-2">
<button type="button" class="schedule-dl-btn" id="scheduleDownloadCf"> <button type="button" class="schedule-dl-btn" id="scheduleDownloadCf">
<i class="fas fa-download" aria-hidden="true"></i> Guardar horário (JPG) <i class="fas fa-download" aria-hidden="true"></i> Guardar horário
</button> </button>
</div> </div>
</div> </div>
+1 -1
View File
@@ -264,7 +264,7 @@ if (!in_array($default_day, $week_values, true)) { $default_day = $week_values[0
</div> </div>
<div class="text-center mb-2"> <div class="text-center mb-2">
<button type="button" class="schedule-dl-btn" id="scheduleDownload"> <button type="button" class="schedule-dl-btn" id="scheduleDownload">
<i class="fas fa-download" aria-hidden="true"></i> Guardar horário (JPG) <i class="fas fa-download" aria-hidden="true"></i> Guardar horário
</button> </button>
</div> </div>
</div> </div>