/* restore extras — generated by restore_04_polish.py */
/* Consent overlays: the restore ships no analytics or third-party tracking at all, so there
is nothing to consent to. Their scripts are gone too, meaning the banner can never be
dismissed and would cover the top of every page. Removing the markup is unreliable when a
JS bundle re-renders it, so it is hidden here as well. */
.cookies-banner, .cookies-banner-content, .cookie-banner, .cookie-consent, .cookie-notice,
.cc-window, .cc-banner, #cookie-law-info-bar, #cookieChoiceInfo, .gdpr-banner,
#tarteaucitronRoot, .consent-overlay, .cookiebar {
display: none !important;
}
body.cookie-banner-open, body.has-cookie-banner, html.cookies-open {
overflow: auto !important;
}
/* Dead account/login modals left by the CMS (no backend on a static host) */
.modal-login, #loginModal, .login-modal { display: none !important; }
/* Carousel slots the platform's JS bundles would have filled at runtime: without a working
bundle they stay as elements with no src and render as broken-image icons. Nothing is
lost by hiding them — they never had content in the restore. */
img:not([src]), img[src=""], img[src="#"] { display: none !important; }
/* The client's backlink block must read as the page's own copy. Where a theme only colours
links inside specific containers, the anchor would otherwise look like plain text — inherit
the surrounding colour but keep an underline so it is still visibly a link. */
.content-wraparea a { color: inherit; text-decoration: underline; }
/* A few px of horizontal overflow on phones (an absolutely-positioned login list, a wide footer
logo) makes the whole page pannable sideways, which reads as broken.
NB: use `clip`, never `hidden`, and never on html together with height:100%. `overflow:hidden`
turns the element into a scroll container: on themes that set html{height:100%} it stops body's
overflow propagating to the viewport, the window stops scrolling entirely and every
scroll-driven behaviour (sticky nav, back-to-top, in-page anchors, PageDown/End) dies.
`clip` suppresses the sideways pan without creating a scroll container. */
body { overflow-x: clip; }
/* ---- end generated block; anything below is preserved across re-runs ---- */
/* ---- clinicajardinsparede.pt restore: styling for the rebuilt pieces ---- */
/* policy page: it was one -wall; give it the rhythm the rest of the site has */
.policy_body { margin-top: 10px; }
.policy_body h3 {
color: #53b2b4;
font-size: 20px;
font-weight: 600;
margin: 34px 0 12px;
}
.policy_body p {
margin: 0 0 14px;
line-height: 1.7;
}
.policy_body a { color: #53b2b4; }
/* onde_estamos: the self-hosted static OSM map replaces a fixed 350x350 Google iframe.
The carries width/height attributes (768x768) so the browser reserves the right box
before it loads - but without max-width those same attributes burst it out of its column. */
.mapa_osm img,
.mapa_osm iframe {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid #dfe6e9;
display: block;
}
.mapa_osm iframe { height: 340px; }
.mapa_osm a.static-map { display: block; }
.mapa_osm .mapa_link {
margin: 6px 0 0;
font-size: 13px;
}
.mapa_osm .mapa_link a { color: #53b2b4; }
/* booking form: the date field the site never had */
#form_marcacao .label_data {
display: block;
font-weight: 400;
font-size: 14px;
color: #7d8b91;
margin-bottom: 4px;
}
#form_marcacao input[type="date"] { cursor: pointer; }
#form_marcacao select:disabled {
opacity: .55;
cursor: not-allowed;
}
/* honest placeholders where the site published a specialty but no names */
.sem_horario, .sem_medicos {
font-size: 14px;
font-weight: 300;
color: #7d8b91;
margin: 8px 0 18px;
}
.sem_horario a, .sem_medicos a { color: #53b2b4; }
/* 404 */
.lista_404 { list-style: none; padding: 0; margin: 18px 0 26px; }
.lista_404 li { margin: 0 0 10px; font-size: 16px; }
.lista_404 a { color: #53b2b4; font-weight: 600; }
.contacto_404 a { color: #53b2b4; }
/* HOME HERO AT PHONE WIDTH. The banner keeps its full-bleed photo while the copy block stays
left-aligned, so below ~992px the sentence runs across the doctor's white coat and the grey
text loses its contrast ("...oferece-lhe os melhores serviços" was the unreadable part in the
390px screenshot). A soft light scrim behind the copy restores a readable ground without
touching the layout, the photo or the type. Internal banners are centred titles only and are
left alone.
The scrim is painted on the BANNER, not on .conteudo: .conteudo is absolutely positioned and
its measured height (150px) stops right where the CTA begins, so a background on it cut the
button off. The banner is already position:relative, so one pseudo-element covers the whole
slide and the copy simply sits above it. */
@media screen and (max-width: 992px) {
.banner:not(.internas)::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
/* The fade used to reach zero at 100%, but the copy block runs the FULL width of a
390px screen, so the last words of the first line ("...os melhores") sat where the
scrim was already down to ~0.3 and washed out against the white coat — the exact
phrase the round-4 review flagged and left open. The plateau now holds past the end
of the text and only the final 8% fades, so the photo still breathes at the edge. */
background: linear-gradient(90deg,
rgba(255, 255, 255, .88) 0%,
rgba(255, 255, 255, .82) 70%,
rgba(255, 255, 255, .80) 92%,
rgba(255, 255, 255, 0) 100%);
}
.banner:not(.internas) .conteudo {
z-index: 2;
}
.banner:not(.internas) .conteudo .descricao { color: #45545b; }
}
/* The banner title is a heading. Kill the UA's default margin, and keep line-height at the
div's own `normal` - an explicit 1.15 made the box 58px instead of 72px and pulled everything
below it up by 14px. Measured both ways: with these two lines the heading is pixel-identical to
the div it replaced (50.4px/800/864x72 at 1440).
Both tags are listed because on the 23 detail pages the band is an
: there the
belongs
to the speciality or the headline, which is what the page is actually about. Bootstrap gives h1
and h2 the same margins and .nome supplies everything else, so the two render identically. */
h1.nome,
h2.nome {
margin-top: 0;
line-height: normal;
}
/* The promoted subject heading on /servico/N/ and /noticia/N/. It was `
` and is now the page's
; these are exactly the declarations `.bloco h3` gave it, so the render does not move. */
.bloco h1.titulo_pagina {
font-size: 22px;
color: #53b2b4;
text-transform: uppercase;
margin: 20px 0 20px;
line-height: 1.1;
font-weight: 800;
font-family: 'Open Sans', sans-serif;
}
/* the search widget is gone; stop the menu reserving its slot */
.menu_holder .menu { margin-right: 0; }
/* Font Awesome carried exactly one glyph on this site after the dead icons were removed
(fa-caret-down / fa-caret-up, the accordion triggers). Two CSS triangles replace the whole
font: same markup, same class swap in main.js, 604KB less to download. */
.fa {
display: inline-block;
vertical-align: middle;
}
.fa-caret-down,
.fa-caret-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.fa-caret-down { border-top: 6px solid currentColor; margin-bottom: -1px; }
.fa-caret-up { border-bottom: 6px solid currentColor; margin-bottom: 3px; }
/* =============================================================================================
VISUAL FINISH PASS. Everything below fixes something that was VISIBLE on a screenshot and that
no automated gate could see, because the archive's own render shares the defect and style
parity only ever compares us to the archive. The site's own tokens are used throughout:
teal #53b2b4, deep teal #1A8787, ink #003b56, body grey #555, muted #7d8b91, square corners,
Open Sans at weights 300 / 400 / 600 / 800.
============================================================================================= */
/* --- SERVICE PAGES ---------------------------------------------------------------------------
All 21 /servico/N/ pages shipped a photo, a heading and ~400px of white: the CMS's two
`
` paragraphs were empty in the capture. The body is now filled from the
roster the site publishes on /corpo_clinico. Two structural things have to be undone for it to
read: the theme's global `.conteudo{height:150px}` (written for the news-card excerpt) would
clip the new copy, and the column needs its own rhythm. */
.svc_body {
height: auto !important;
padding-bottom: 4px;
}
.svc_body .svc_lead {
font-size: 16px;
font-weight: 300;
line-height: 1.7;
color: #555;
margin: 0 0 26px;
}
.svc_body .svc_lead strong { font-weight: 600; color: #003b56; }
.svc_body .svc_lead a { color: #53b2b4; }
/* The speciality's own paragraph (the CMS's empty `resumo` slot, now filled). It is the only
running copy on the page, so it gets the reading measure the rest of the site uses rather than
the lead's slightly larger size — the lead is a one-line label above it, not a summary. */
.svc_body .svc_lead { margin-bottom: 14px; }
.svc_body .svc_desc {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: #555;
max-width: 62em;
margin: 0 0 16px;
}
.svc_body .svc_desc:last-of-type { margin-bottom: 26px; }
.svc_body .svc_desc a { color: #53b2b4; }
/* `.bloco h4 {font-size:17px;color:#111}` in the theme outranks a bare class, so scope it */
.bloco .svc_h4,
.svc_h4 {
font-size: 14px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: #003b56;
margin: 0 0 14px;
}
.svc_equipa {
border-top: 2px solid #53b2b4;
padding-top: 18px;
margin: 0 0 26px;
}
.svc_medicos {
list-style: none;
margin: 0;
padding: 0;
}
.svc_medicos li {
padding: 0 0 14px;
margin: 0 0 14px;
border-bottom: 1px solid #e6eef0;
}
.svc_medicos li:last-child { border-bottom: 0; margin-bottom: 6px; }
.svc_nome {
display: block;
font-size: 16px;
font-weight: 600;
color: #003b56;
}
.svc_horas {
display: block;
font-size: 14px;
font-weight: 300;
line-height: 1.6;
color: #7d8b91;
margin-top: 3px;
}
.svc_nota {
font-size: 13px;
font-weight: 300;
color: #7d8b91;
margin: 0;
}
.svc_nota a { color: #53b2b4; }
.svc_cta { margin: 0; }
.svc_cta button {
color: #fff;
background: #53b2b4;
border: 0;
font-size: 13px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
padding: 14px 40px;
cursor: pointer;
}
.svc_cta button:hover { background: #1A8787; }
/* the sibling-service strip: a link list, never a bordered box with a link rattling in it */
.svc_outros {
border-top: 1px solid #e6eef0;
margin-top: 46px;
padding-top: 26px;
}
.svc_outros ul {
list-style: none;
margin: 0;
padding: 0;
columns: 3;
column-gap: 40px;
}
.svc_outros li { break-inside: avoid; margin: 0 0 9px; }
.svc_outros a {
font-size: 14px;
font-weight: 300;
color: #555;
}
.svc_outros a:hover { color: #53b2b4; text-decoration: none; }
@media screen and (max-width: 992px) {
.svc_outros ul { columns: 2; column-gap: 24px; }
.svc_outros { margin-top: 30px; }
}
@media screen and (max-width: 560px) {
.svc_outros ul { columns: 1; }
}
.noticia .col-md-4 img { display: block; width: 100%; }
/* Where the speciality has a long roster the copy column runs 600px past the photo and the left
third of the page was 600px of nothing. The clinic's own NAP (published on /onde_estamos) sits
under the photo and balances the spread; on a phone it stacks after the photo, before the copy. */
.svc_contacto {
border-top: 2px solid #53b2b4;
margin: 26px 0 0;
padding-top: 16px;
}
.svc_contacto p {
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: #7d8b91;
margin: 0 0 12px;
}
.svc_contacto p:last-child { margin-bottom: 0; }
.svc_contacto a { color: #53b2b4; }
.svc_contacto .svc_morada { color: #555; }
/* On a phone the two columns stack in DOM order, which put the address block between the photo
and the heading it belongs under. Re-order so the page reads photo -> speciality -> contacts.
`display:contents` drops the column's own 15px gutter, so it is restored on the two children. */
@media screen and (max-width: 992px) {
.noticia { display: flex; flex-direction: column; }
.noticia > .col-md-4 { display: contents; }
.noticia > .col-md-4 > img { order: 1; padding: 0 15px; }
.noticia > .col-md-8 { order: 2; padding-top: 22px; }
.noticia > .col-md-4 > .svc_contacto { order: 3; margin: 8px 15px 0; }
}
/* --- HOME: SERVICE TILES ---------------------------------------------------------------------
`.servico{min-height:380px}` is sized for the 540px-wide desktop tile. On a phone the tile is
~355px wide, so the photo plus its caption comes to ~300px and the rule leaves ~80px of dead
white under every card - four visible holes down the homepage. The desktop value is untouched. */
@media screen and (max-width: 992px) {
.holder_servicos .servico { min-height: 0; margin: 0 0 34px; }
}
/* the caption is the tile's link (it now has an href); make the whole tile respond */
.holder_servicos .servico a { display: block; }
.holder_servicos .servico a:hover h3 { color: #1A8787; text-decoration: none; }
.holder_servicos .servico h3 { margin: 14px 0 0; }
/* --- NEWS ------------------------------------------------------------------------------------
`.conteudo{height:150px}` is a global in the theme, so the two-line excerpt on /noticias
reserved 150px and left a gap before the SABER MAIS button that read as a missing paragraph.
Give the excerpt its natural height and equalise the cards from the card, not the text. */
.single_noticia .conteudo { height: auto; min-height: 0; }
/* the two cards are floated columns of different natural height, so `margin-top:auto` on the
button had nothing to push against and the two SABER MAIS buttons sat 20px apart. Stretch the
row and the cards become equal-height siblings. */
.holder_noticia > .row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.single_noticia {
display: flex;
flex-direction: column;
align-items: flex-start;
float: none;
margin: 25px 0 35px;
}
.single_noticia .conteudo h3 {
font-size: 19px;
color: #53b2b4;
margin: 0 0 10px;
line-height: 1.35;
}
.single_noticia .conteudo .resumo {
font-size: 15px;
font-weight: 300;
line-height: 1.6;
color: #7d8b91;
/* the theme's `.bloco button{margin-top:25px}` already supplies the gap to the CTA */
margin: 0;
}
.single_noticia > a { margin-top: auto; }
/* --- FOOTER ----------------------------------------------------------------------------------
Three things were visible in the teal band. */
/* 1. "leia mais" was `color:#000` - solid black on #53b2b4. It read as a smudge, not a link. */
.footer .holder_noticias_footer .conteudo a {
color: #fff;
text-decoration: underline;
white-space: nowrap;
}
.footer .holder_noticias_footer .conteudo a:hover { color: #003b56; }
/* 2. the consent rows: a bare checkbox with no gap to its label, and a wrapped second line that
started under the box instead of under the text, so "Privacidade." hung out on its own.
NOT flex: the label here is a bare text node plus an plus a full stop, which flex would
break into three separately-wrapping items. A hanging indent keeps it one paragraph. */
.footer #form_newsletter .input-group .input-group {
position: relative;
display: block;
padding-left: 24px;
margin-top: 10px;
font-size: 14px;
font-weight: 300;
line-height: 1.45;
color: #fff;
}
.footer #form_newsletter .input-group .input-group input[type="checkbox"] {
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
margin: 0;
padding: 0;
border-radius: 0;
accent-color: #1A8787;
}
.footer #form_newsletter .input-group .input-group a {
font-size: 14px;
text-decoration: underline;
}
/* the theme centres the whole footer below 992px. A full-width consent row then parks its
absolutely-positioned checkbox at the far left while the label sits in the middle of the
column - two things that clearly belong together, 40px apart. Shrink-wrap the row instead. */
@media screen and (max-width: 992px) {
.footer #form_newsletter .input-group .input-group {
display: inline-block;
width: auto;
text-align: left;
}
}
/* 3. the ENVIAR button is absolutely positioned over the right end of a 20px-radius pill, so the
pill's white corner showed around the button's square left edge, and a long address ran
underneath the button. Round the button's own left side to nothing and reserve the width. */
.footer #form_newsletter > .input-group { position: relative; }
.footer #form_newsletter input[type="email"] { padding-right: 84px; }
.footer #form_newsletter button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 8px 18px;
letter-spacing: .04em;
cursor: pointer;
}
.footer #form_newsletter button:hover { background: #0f6d6d; }
/* the copyright bar declared `border-top:1px solid #53b2b4` on a #53b2b4 ground - an invisible
rule, so the line floated in empty teal. Use a translucent white so the band reads as designed. */
.lower_footer { border-top: 1px solid rgba(255, 255, 255, .35); }
/* only real links get the underline - the agency credit is an with no href by the outbound
policy, and underlining it makes dead text look clickable */
.lower_footer a[href] { text-decoration: underline; }
/* and close the ~90px hole the theme's trailing