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:
1 parent
300655b92a
commit
ff1d0fdc07
4 files changed
+32
-16
No files matched your search
+29
-13
@@ -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;
|
||||||
|
|||||||
@@ -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' });
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in new issue
Block a user