/* Palette, fonts, and spacing. Nothing outside this file may hardcode
colours or fonts — components below reference the custom properties in
:root. Current direction: Inter (body + headings) + the Seara palette
from 00-TA-artigos/esquema_cores.md (ocre/gold + clay tones), merged
into master 2026-08-25. See docs/DESIGN.md for the full rationale. */
/* Self-hosted Inter (static/fonts/inter-latin.woff2, path relative to this
file). Previously loaded from Google's CDN in base.html — moved
here so no visitor IP is sent to Google on every page load (Phase 9 /
docs/PHASE_LOG.md). One variable-font file covers weights 400–700 for
the Latin-1 range, which is all pt-PT text needs (à, ç, õ, etc. all fall
inside U+0000–00FF) — Google's own css2 API serves the same single file
for every weight in this range, confirmed by fetching it directly. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Colour palette — Seara esquema_cores.md (00-TA-artigos/esquema_cores.md):
Branco Argila / Argila / Ocre Dourado / Amarelo Torrado / Verde Sálvia
Escuro, direct where the palette gives a match; --color-primary-dark,
--color-bg-alt and --color-class-single are derived tints/shades (no
direct match in the 5 given colours) — tune by eye if needed. */
--color-bg: #FBF2EB; /* matches seara_hero.jpeg's background colour */
--color-bg-alt: #FBF2EB; /* matches --color-bg, so alternating sections/footer/hero letterbox are seamless everywhere */
--color-surface: #F8F4EE; /* derived: soft warm off-white toward Branco Argila, instead of stark #FFFFFF, for cards/header */
--color-border: #B78A3F; /* Amarelo Torrado */
--color-text: #33302A;
--color-text-muted: #6B6459;
--color-primary: #C28A36; /* Ocre Dourado */
--color-primary-dark: #9C6D26; /* derived: darker Ocre Dourado, for link/hover contrast */
--color-accent: #9E654F; /* Argila */
--color-on-primary: #FFFFFF;
--color-class-single: #E3E8DE; /* derived: pale tint of Verde Sálvia Escuro — one-off "aula única" background */
--color-error: #B3432E; /* form validation errors, error flash messages — semantic-only, unchanged */
/* Typography */
--font-body: 'Inter', Arial, sans-serif;
--font-heading: 'Inter', Arial, sans-serif;
/* Spacing scale */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-2xl: 6rem;
/* Shape */
--radius-sm: 8px;
--radius-md: 12px;
--shadow-sm: 0 1px 3px rgba(51, 48, 42, 0.1);
--shadow-md: 0 4px 16px rgba(51, 48, 42, 0.12);
/* Layout */
--container-max: 1120px;
}
/* Reset / base */
html {
/* Scales every rem-based font-size (and spacing, since --space-* is also
rem) down a little site-wide. The hero welcome message is the one
exception — see .hero__tagline, counter-scaled to stay its original
size. */
font-size: 95%;
/* Offset anchor jumps (e.g. /servicos/#yoga) so the target heading lands
below the sticky .site-header instead of tucked under it. */
scroll-padding-top: 4.5rem;
/* The site has one fixed light palette. Tell the browser so it won't
auto-invert the page when the phone is in dark mode (Chrome/Samsung
"force dark"). Also mirrored as a in base.html. */
color-scheme: only light;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.25;
margin: 0 0 var(--space-sm);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-sm); }
img { max-width: 100%; display: block; }
a {
color: var(--color-primary-dark);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
/* Layout helpers */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-sm);
}
.section {
padding-block: var(--space-lg);
}
.section--alt {
background: var(--color-bg-alt);
}
/* Buttons */
.btn {
display: inline-block;
font-family: var(--font-body);
font-size: 1rem;
font-weight: bold;
text-decoration: none;
padding: 0.65em 1.4em;
border-radius: var(--radius-sm);
border: 2px solid transparent;
cursor: pointer;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn--primary:hover {
background: var(--color-primary-dark);
}
.btn--accent {
background: var(--color-accent);
color: var(--color-on-primary);
}
.btn--outline {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
/* Tag badges */
.tag {
display: inline-block;
font-size: 0.8rem;
padding: 0.2em 0.7em;
border-radius: 999px;
background: var(--color-accent);
color: var(--color-on-primary);
margin: 0 var(--space-xs) var(--space-xs) 0;
}
/* Cards */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.card__image,
.image-placeholder {
aspect-ratio: 16 / 9;
background: var(--color-bg-alt);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 0.85rem;
object-fit: cover;
}
@media (min-width: 768px) {
.card__image,
.image-placeholder {
aspect-ratio: 4 / 3;
}
}
.card__body {
padding: var(--space-sm);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.card__body h3 {
margin-bottom: 0;
}
.card__body p {
margin-bottom: 0;
font-size: 0.95rem;
line-height: 1.4;
}
.card__meta {
font-size: 0.8rem;
line-height: 1.2;
color: var(--color-text-muted);
}
.card--clickable {
position: relative;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card--clickable:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card__stretched-link {
color: inherit;
text-decoration: none;
}
.card__stretched-link::after {
content: '';
position: absolute;
inset: 0;
}
/* Button variant of the stretched link (e.g. cards that open a JS modal
instead of navigating) — reset button chrome so it reads as plain text. */
button.card__stretched-link {
display: block;
width: 100%;
background: none;
border: 0;
padding: 0;
margin-bottom: 0;
font: inherit;
font-family: var(--font-heading);
text-align: left;
cursor: pointer;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 768px) {
.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.card-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Centers a trailing partial row (e.g. 2 cards left over in a 3-column grid)
instead of leaving them stuck against the left edge. */
.card-grid.card-grid--center-last {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card-grid.card-grid--center-last > .card {
flex: 0 1 100%;
}
@media (min-width: 768px) {
.card-grid.card-grid--center-last > .card { flex: 0 1 calc(50% - var(--space-md) / 2); }
}
@media (min-width: 1024px) {
.card-grid.card-grid--center-last > .card { flex: 0 1 calc(33.333% - (2 * var(--space-md) / 3)); }
}
/* Service list — the Serviços page activity rows (name + actions), one
category per . Stacked on mobile, two columns from tablet width up. */
.service-list {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
}
.service-list__row {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding-block: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.service-list__row:first-child {
border-top: 1px solid var(--color-border);
}
.service-list__name {
margin: 0;
font-size: 1.1rem;
}
.service-list__desc {
margin: var(--space-xs) 0 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--color-text-muted);
}
.service-list__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.service-list__actions .btn {
font-size: 0.9rem;
padding: 0.55em 1.2em;
}
@media (min-width: 768px) {
.service-list__row {
flex-direction: row;
align-items: center;
gap: var(--space-lg);
}
.service-list__info {
flex: 1;
}
.service-list__actions {
flex-shrink: 0;
flex-wrap: nowrap;
}
}
/* Saber Mais list — compact rows (icon, name + sentence, "Saber Mais"
button), grouped one per category. Icon + text on one line with the
button below on mobile; icon | text | button on one row from tablet up. */
.sm-list {
list-style: none;
margin: var(--space-md) 0 0;
padding: 0;
}
.sm-row {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon text"
"action action";
column-gap: var(--space-sm);
row-gap: var(--space-xs);
align-items: start;
padding-block: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.sm-row:first-child {
border-top: 1px solid var(--color-border);
}
.sm-row__icon {
grid-area: icon;
display: block;
width: 48px;
height: 48px;
object-fit: contain;
border-radius: var(--radius-sm);
}
.sm-row__icon--empty {
background: var(--color-bg-alt);
}
.sm-row__text {
grid-area: text;
}
.sm-row__text h3 {
margin: 0;
font-size: 1.1rem;
}
.sm-row__text p {
margin: var(--space-xs) 0 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--color-text-muted);
}
.sm-row__action {
grid-area: action;
justify-self: center; /* centred under icon+text on mobile; end on desktop */
font-size: 0.9rem;
padding: 0.55em 1.2em;
}
@media (min-width: 768px) {
.sm-row {
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon text action";
align-items: center;
column-gap: var(--space-md);
}
.sm-row__icon {
width: 56px;
height: 56px;
}
.sm-row__action {
justify-self: end;
}
}
/* Site header / nav */
.site-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--color-primary); /* Ocre Dourado */
border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-xs);
}
.site-header__logo {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: bold;
color: var(--color-text);
text-decoration: none;
}
.site-header__logo-icon {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
}
.nav {
display: none;
}
.nav__list {
list-style: none;
display: flex;
gap: var(--space-md);
margin: 0;
padding: 0;
}
.nav__list a {
text-decoration: none;
color: var(--color-text);
font-weight: bold;
}
.nav__list a:hover {
color: var(--color-primary-dark);
}
.nav-toggle {
position: relative;
border: none;
background: none;
cursor: pointer;
}
.nav-toggle summary {
list-style: none;
font-weight: bold;
padding: var(--space-xs);
cursor: pointer;
}
.nav-toggle summary::-webkit-details-marker { display: none; }
.nav-toggle .nav__list {
display: none;
}
.nav-toggle[open] .nav__list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
position: absolute;
top: 100%;
right: 0;
min-width: 12rem;
margin: 0;
padding: var(--space-sm);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
z-index: 20;
}
@media (min-width: 768px) {
.nav-toggle { display: none; }
.nav { display: block; }
}
/* Hero */
.hero {
background: var(--color-bg);
text-align: center;
padding-block: calc(var(--space-2xl) / 2) var(--space-xl);
}
.hero__image {
width: 100%;
height: auto;
max-height: 640px;
object-fit: contain;
background: var(--color-bg);
margin-bottom: var(--space-lg);
}
.hero__tagline {
/* 1.1rem, counter-scaled against html's 95% so the hero message keeps
its original size while every other text on the site shrinks. */
font-size: 1.158rem;
color: var(--color-text-muted);
max-width: 80ch;
margin-inline: auto;
}
/* Page intro text: a paragraph or two of body copy under a page's ,
before its main content starts. Fills the container width, same as a
category's intro_text paragraph on Serviços. */
.page-intro p {
color: var(--color-text-muted);
}
.page-intro p + p {
margin-top: var(--space-md);
}
/* Events carousel */
.events-carousel__track {
display: flex;
gap: var(--space-md);
overflow-x: auto;
scroll-snap-type: x proximity;
margin: 0;
padding-block: var(--space-xs);
padding-inline: 0;
list-style: none;
scrollbar-width: none;
}
.events-carousel__track::-webkit-scrollbar { display: none; }
.events-carousel__item {
scroll-snap-align: start;
flex: 0 0 85%;
}
@media (min-width: 768px) {
.events-carousel__item { flex-basis: 45%; }
}
@media (min-width: 1024px) {
.events-carousel__item { flex-basis: 30%; }
}
.events-carousel--static .events-carousel__track {
overflow-x: visible;
flex-wrap: wrap;
}
.events-carousel__scrollbar {
/* Mobile: no bar at all — the user just swipes the cards. */
display: none;
position: relative;
height: 0.5rem;
margin-top: var(--space-md);
background: color-mix(in srgb, var(--color-text) 12%, transparent);
border-radius: 999px;
cursor: pointer;
touch-action: none;
}
@media (min-width: 768px) {
.events-carousel__scrollbar { display: block; }
}
.events-carousel__scrollbar:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
.events-carousel__scrollbar-thumb {
position: absolute;
inset-block: 0;
left: 0;
width: 30%;
background: var(--color-primary);
border-radius: 999px;
}
/* Event modal */
dialog#event-modal {
border: none;
border-radius: var(--radius-md);
padding: 0;
max-width: 32rem;
width: 90vw;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-md);
}
dialog#event-modal::backdrop {
background: rgba(51, 48, 42, 0.5);
}
.event-modal__body {
padding: var(--space-md);
}
.event-modal__close {
float: right;
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
color: var(--color-text-muted);
}
/* Weekly schedule (Agenda) */
.schedule__nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.schedule__range {
margin: 0;
width: 20ch;
text-align: center;
font-family: var(--font-body);
font-size: 0.765rem;
white-space: nowrap;
}
@media (min-width: 768px) {
.schedule__range {
font-size: 0.9775rem;
}
}
.schedule__arrow {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
color: var(--color-text);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.schedule__arrow:hover:not(.schedule__arrow--disabled) {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-on-primary);
}
.schedule__arrow--disabled {
opacity: 0.35;
cursor: default;
}
/* Mobile: stacked day-by-day list */
.schedule__list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 768px) {
.schedule__list {
display: none;
}
}
.schedule__day-heading {
font-size: 1rem;
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-xs);
margin-bottom: var(--space-sm);
display: flex;
justify-content: space-between;
gap: var(--space-xs);
}
.schedule__day-heading span {
color: var(--color-text-muted);
font-weight: normal;
}
.schedule__empty {
color: var(--color-text-muted);
font-size: 0.9rem;
}
.schedule__item {
display: block;
width: 100%;
text-align: left;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.4rem 0.65rem;
margin-bottom: 0.4rem;
font-family: var(--font-body);
font-size: 0.9rem;
cursor: pointer;
}
.schedule__item--event {
border-color: var(--color-accent);
}
.schedule__item--cancelled {
opacity: 0.6;
}
.schedule__item--single {
background: var(--color-class-single);
}
.schedule__item p {
margin: 0;
}
.schedule__item-time {
font-weight: bold;
color: var(--color-primary-dark);
font-size: 0.8rem;
}
.schedule__item-title {
font-family: var(--font-heading);
font-size: 0.95rem;
}
.schedule__item-meta {
color: var(--color-text-muted);
font-size: 0.8rem;
}
.schedule__item-tag {
margin-top: var(--space-xs);
}
/* Desktop: full-week calendar. --calendar-hour-height must match
PX_PER_HOUR in schedule/calendar_layout.py, which computes every
top/height below. */
.schedule__calendar {
--calendar-hour-height: 38px;
display: none;
}
.schedule__note {
margin-top: var(--space-lg);
}
@media (min-width: 768px) {
.schedule__calendar {
display: block;
}
}
.schedule__calendar-legend {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-text-muted);
font-size: 0.85rem;
margin-bottom: var(--space-sm);
}
.schedule__legend-dot {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--color-primary);
}
.schedule__legend-dot--event {
background: var(--color-accent);
margin-left: var(--space-sm);
}
.schedule__calendar-header,
.schedule__calendar-body {
display: grid;
grid-template-columns: 3.5rem repeat(7, 1fr);
gap: 1px;
}
.schedule__calendar-day-header {
text-align: center;
font-size: 0.85rem;
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-border);
}
.schedule__calendar-day-header span {
display: block;
color: var(--color-text-muted);
font-weight: normal;
}
.schedule__calendar-times {
position: relative;
height: var(--calendar-height);
}
.schedule__calendar-hour {
position: absolute;
right: var(--space-xs);
transform: translateY(-0.55em);
font-size: 0.75rem;
color: var(--color-text-muted);
}
.schedule__calendar-days {
display: contents;
}
.schedule__calendar-day {
position: relative;
height: var(--calendar-height);
border-left: 1px solid var(--color-border);
/* Closes the grid at the last hour boundary, matching the thickness of
the line under the day-name header. */
border-bottom: 1px solid var(--color-border);
}
/* One real element per hour boundary (excluding the last, which the
border-bottom above already draws) instead of a repeating background
pattern — a background can bleed through a semi-transparent class card
sitting on top of it at certain zoom levels; a normal DOM sibling
painted before the cards in the same stacking context cannot. */
.schedule__calendar-gridline {
position: absolute;
left: 0;
right: 0;
border-top: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
pointer-events: none;
}
.schedule__calendar-item {
position: absolute;
left: 2px;
right: 2px;
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-primary);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
padding: 2px 6px;
font-size: 0.7rem;
line-height: 1.2;
text-align: left;
font-family: var(--font-body);
cursor: pointer;
}
.schedule__calendar-item--event {
border-color: var(--color-accent);
border-left-color: var(--color-accent);
}
.schedule__calendar-item--cancelled {
opacity: 0.55;
}
.schedule__calendar-item--single {
background: var(--color-class-single);
}
.schedule__calendar-item p {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.schedule__calendar-item-title {
font-weight: bold;
}
.schedule__calendar-item-meta {
color: var(--color-text-muted);
}
/* Stub ("coming soon") pages */
.stub-page {
text-align: center;
padding-block: var(--space-2xl);
color: var(--color-text-muted);
}
/* Footer */
.site-footer {
background: var(--color-primary); /* Ocre Dourado */
border-top: 1px solid var(--color-border);
padding-block: var(--space-lg);
margin-top: var(--space-xl);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--space-md);
}
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.site-footer__logo {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: bold;
color: var(--color-text);
text-decoration: none;
}
.site-footer__logo-icon {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
}
.site-footer__socials {
list-style: none;
display: flex;
gap: var(--space-xs);
padding: 0;
margin: 0;
}
.site-footer__socials a {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--color-text);
color: var(--color-text);
transition: background-color 0.15s ease, color 0.15s ease;
}
.site-footer__socials a:hover {
background: var(--color-text);
color: var(--color-primary);
}
.site-footer__heading {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.site-footer address {
font-style: normal;
color: var(--color-text);
}
.site-footer address a {
color: #F2EEE6; /* Branco Argila — the default link colour (dark gold) is too close to the gold footer bg to read well */
}
.site-footer__map iframe {
width: 100%;
height: 220px;
border: 0;
border-radius: var(--radius-sm);
}
.site-footer__links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__links li {
margin-bottom: var(--space-xs);
}
.site-footer__links a {
/* --color-text-muted (and --color-primary-dark) are both too low-contrast
against the gold footer bg to read reliably — same class of problem as
.site-footer address a below. --color-text is the only footer text
colour proven to contrast well here; sub-links are differentiated from
the bold heading above them by weight/size only, not colour. */
color: var(--color-text);
text-decoration: none;
font-size: 0.95rem;
}
.site-footer__links a:hover {
text-decoration: underline;
}
.site-footer__bottom {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: var(--space-xs);
margin-top: var(--space-lg);
padding-top: var(--space-sm);
border-top: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
font-size: 0.8rem;
text-align: center;
}
@media (min-width: 768px) {
.site-footer__bottom {
/* Empty/legal/copyright thirds so the legal links stay visually
centered on the bar regardless of the copyright text's width. */
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.site-footer__legal {
grid-column: 2;
}
.site-footer__copyright {
grid-column: 3;
justify-self: end;
}
}
.site-footer__legal {
margin: 0;
color: var(--color-text);
}
.site-footer__legal a,
.site-footer__legal-action {
color: var(--color-text);
text-decoration: underline;
}
.site-footer__legal-action {
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
}
.site-footer__legal-sep {
margin-inline: var(--space-xs);
}
.site-footer__copyright {
margin: 0;
color: var(--color-text);
}
/* Flash messages (django.contrib.messages) */
.messages {
list-style: none;
padding: 0;
margin: var(--space-sm) auto 0;
}
.messages__item {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
margin-bottom: var(--space-xs);
}
.messages__item--success {
background: var(--color-bg-alt);
border: 1px solid var(--color-primary);
color: var(--color-primary-dark);
}
.messages__item--error {
background: var(--color-bg-alt);
border: 1px solid var(--color-error);
color: var(--color-error);
}
/* Form fields — shared by every public form (contact now, booking/enrolment later) */
.form-field {
margin-bottom: var(--space-md);
}
.form-field label {
display: block;
font-weight: bold;
margin-bottom: var(--space-xs);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field select,
.form-field textarea {
width: 100%;
font: inherit;
padding: 0.6em 0.8em;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
}
.form-field textarea {
min-height: 8rem;
resize: vertical;
}
.form-field--error input[type="text"],
.form-field--error input[type="email"],
.form-field--error input[type="date"],
.form-field--error input[type="time"],
.form-field--error select,
.form-field--error textarea {
border-color: var(--color-error);
}
.form-field__error {
color: var(--color-error);
font-size: 0.85rem;
margin: var(--space-xs) 0 0;
}
.form-field__help {
color: var(--color-text-muted);
font-size: 0.85rem;
margin: var(--space-xs) 0 0;
}
/* Data e hora pretendidas: date + time stacked on mobile (default), side
by side from tablet width up. */
.datetime-fields input[type="date"],
.datetime-fields select {
margin-bottom: var(--space-sm);
}
@media (min-width: 768px) {
.datetime-fields {
display: flex;
gap: var(--space-sm);
}
.datetime-fields input[type="date"],
.datetime-fields select {
width: auto;
margin-bottom: 0;
}
.datetime-fields input[type="date"] {
flex: 1 1 auto;
}
.datetime-fields select {
flex: 0 0 auto;
}
}
.form-actions {
margin-top: var(--space-md);
}
/* Honeypot: hidden from sighted/pointer users and out of tab order, but
present in the DOM for bots that fill in every field blindly. */
.form-honeypot-wrap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Contact page */
.contact-layout {
display: grid;
gap: var(--space-lg);
margin-top: var(--space-md);
}
@media (min-width: 768px) {
.contact-layout {
grid-template-columns: 3fr 2fr;
}
}
.contact-info address {
font-style: normal;
color: var(--color-text-muted);
}
/* Map embed placeholder: shown instead of the Google Maps iframe until the
visitor accepts non-essential cookies (static/js/main.js:loadGatedEmbeds
swaps in the real iframe, matching this box's rounded corners/height). */
.map-embed-placeholder {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.map-embed-placeholder p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* Cookie consent banner */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
padding: var(--space-sm);
}
.cookie-banner__body {
max-width: var(--container-max);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.cookie-banner__body p {
margin: 0;
font-size: 0.9rem;
color: var(--color-text);
}
.cookie-banner__actions {
display: flex;
gap: var(--space-sm);
}
.cookie-banner__actions .btn {
flex: 1;
}
@media (min-width: 768px) {
.cookie-banner__body {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
}
.cookie-banner__actions {
flex-shrink: 0;
}
.cookie-banner__actions .btn {
flex: none;
}
}
/* Política de Cookies page: the "Gerir cookies" button has no bottom
margin by default (.btn), so the next heading sat right against it. */
.cookie-policy__manage-btn {
margin-bottom: var(--space-lg);
}