/* ============================================================================================= heuristica.pt — supplemental styles. The site's own Bridge stylesheets are present and do the design. This file covers only what this restore added: the rebuilt hero carousel and the authored pages' blocks. ============================================================================================= */ :root { --heu-brand: #FFA000; --heu-brand-dark: #EE7E00; --heu-link: #A85800; --heu-cream: #F9E7CC; --heu-ink: #33322F; --heu-body: #5F5C57; --heu-line: #E7E4DE; } /* ---------- the logo, which Bridge hides in CSS and reveals from JavaScript ----------------- */ /* stylesheet.min.css ships `.q_logo a{display:block;visibility:hidden}` and default.min.js makes it visible once it has measured the image and sized the header. In a static restore that reveal never completes, so every one of the 76 pages renders with an empty gap where the logo should be — the most visible defect on the site, and one no link check, byte count or style gate can see: the file is present, correctly referenced, and loads. This restores the end state the theme's own script would have produced, and leaves Bridge's own responsive rules to decide WHICH logo variant (normal / light / dark / sticky / mobile) is shown at each width. */ /* Bridge's script also sets the anchor's height to the header's and lets the image fill it; with only `visibility` restored the logo sat on the header's bottom edge and spilled into the hero. Centring it in the wrapper reproduces the intended result at any header height. */ .q_logo a { visibility: visible !important; } .logo_wrapper { display: flex !important; align-items: center; width: auto !important; } .q_logo { display: flex; align-items: center; height: 100%; } .q_logo a { display: flex !important; align-items: center; height: 100% !important; width: auto !important; } .q_logo img { height: auto !important; width: auto !important; max-height: 74%; } @media (max-width: 1000px) { .q_logo img { max-height: 42px; } } /* NOTE — do not take Bridge's closed dropdown panels out of layout. They are `visibility:hidden; opacity:0` but still laid out, which makes any nav measurement read 27 links over 15 rows instead of the real 8 links over 1 row, and it keeps 17 invisible links in the tab order. Setting `display:none` on the closed state was tried and reverted: the theme's own script measures and positions the wide "Serviços" panel at load, so with the panel display:none it computed a 38px-tall box hanging 129px past the right edge of the viewport. The mechanism belongs to the theme; the measurement artefact is recorded in the delivery note instead. */ /* ---------- burger tap target --------------------------------------------------------------- */ /* Bridge renders the burger as a bare 19px icon. It works, but 19px is well under the ~44px a thumb needs, and it is the only navigation on a phone. Padding it out changes nothing visually and makes it reliably tappable. */ .mobile_menu_button span { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* ---------- rebuilt hero carousel ---------------------------------------------------------- */ /* Every slide is absolutely positioned, so the section needs its own stage height: with the first slide in flow the hero collapsed to the height of one line of text (284px) and cropped its own headline. */ .heu-hero { position: relative; overflow: hidden; background: #2F2E2B; min-height: clamp(340px, 38vw, 560px); } .heu-hero__track { position: absolute; inset: 0; } .heu-hero__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .6s ease; padding: 40px 70px; text-align: center; background-size: cover; background-position: center; } .heu-hero__slide.is-active { opacity: 1; z-index: 2; } .heu-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 100%); } .heu-hero__slide > * { position: relative; z-index: 2; } .heu-hero__inner { max-width: 980px; margin: 0 auto; } .heu-hero .heu-hero__title, .heu-hero .heu-hero__lead { color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.42); margin: 0 0 14px; font-family: 'Poppins', 'Raleway', sans-serif; } .heu-hero .heu-hero__title { font-weight: 800; font-size: clamp(2rem, 5.2vw, 4rem); line-height: 1.06; } .heu-hero .heu-hero__lead { font-weight: 300; font-size: clamp(1.05rem, 2.6vw, 2.1rem); line-height: 1.25; } .heu-hero .heu-hero__cta { display: inline-block; margin-top: 10px; padding: 13px 34px; border: 2px solid #fff; border-radius: 34px; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .6px; background: rgba(255,255,255,.08); } .heu-hero .heu-hero__cta:hover { background: #fff; color: var(--heu-link); } .heu-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--heu-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; line-height: 1; transition: background .16s, transform .16s; } .heu-hero__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); } .heu-hero__nav--prev { left: 18px; } .heu-hero__nav--next { right: 18px; } .heu-hero__dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; justify-content: center; gap: 9px; } .heu-hero__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer; } .heu-hero__dot.is-active { background: #fff; } @media (max-width: 700px) { /* At 390px the arrows sat at 50% height — exactly across the slide's own subtitle. Drop them to the bottom corners, beside the dots, where they cross nothing. */ .heu-hero__slide { padding: 26px 16px 72px; min-height: 320px; } .heu-hero__nav { width: 38px; height: 38px; font-size: 16px; top: auto; bottom: 14px; transform: none; } .heu-hero__nav:hover { transform: none; } .heu-hero__nav--prev { left: 12px; } .heu-hero__nav--next { right: 12px; } .heu-hero__dots { bottom: 26px; } } /* ---------- authored pages ----------------------------------------------------------------- */ .heu-pagehead { background: linear-gradient(120deg, var(--heu-cream) 0%, #FDF4E4 55%, #FFF9F0 100%); border-bottom: 1px solid var(--heu-line); padding: 44px 0 40px; } .heu-pagehead h1 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--heu-ink); } .heu-crumbs { font-size: 13px; color: #6B6459; margin: 0 0 8px; } .heu-crumbs a { color: #8C4A00; text-decoration: underline; text-underline-offset: 2px; } .heu-crumbs span { color: #7C756A; margin: 0 6px; } .heu-postdate { margin: 8px 0 0; font-size: 13.5px; color: #7C756A; } .heu-authored { max-width: 860px; margin: 0 auto; padding: 40px 0 10px; } .heu-authored h1 { display: none; } .heu-authored h2 { margin-top: 2rem; } .heu-authored ul { margin: 0 0 1.4rem; padding-left: 1.15rem; } .heu-authored li { margin-bottom: .5rem; } .heu-authored li::marker { color: var(--heu-brand); } .heu-kicker { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--heu-link); margin: 0 0 6px; } .heu-lead { font-size: 1.1rem; line-height: 1.7; color: var(--heu-ink); } .separator.small { display: block; width: 60px; height: 3px; background: var(--heu-brand); border: 0; border-radius: 2px; margin: 16px 0 24px; } .heu-grid { display: grid; gap: 22px; margin: 26px 0 8px; } .heu-grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .heu-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--heu-line); border-radius: 12px; padding: 24px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; } .heu-card:hover { box-shadow: 0 6px 26px rgba(51,50,47,.10); transform: translateY(-3px); border-color: #E2D7C2; } .heu-card h3 { margin: 0; font-size: 1.12rem; } .heu-card h3 a { color: var(--heu-ink); } .heu-card:hover h3 a { color: var(--heu-link); } .heu-card p { margin: 0; font-size: 14.6px; color: var(--heu-body); } .heu-card__more { margin-top: auto; padding-top: 10px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .heu-card__more a { color: var(--heu-link); } .heu-cta { margin: 40px 0 0; padding: 30px 32px; border-radius: 14px; background: linear-gradient(120deg, var(--heu-cream), #FFF6E8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .heu-cta h3 { margin: 0 0 4px; color: var(--heu-ink); } .heu-cta p { margin: 0; color: var(--heu-body); } .heu-cta .qbutton + .qbutton { margin-left: 10px; } @media (max-width: 640px) { .heu-cta { flex-direction: column; align-items: flex-start; } .heu-cta .qbutton + .qbutton { margin: 8px 0 0; } } .heu-authored .blog_holder article { border: 1px solid var(--heu-line); border-radius: 10px; padding: 24px 26px; margin-bottom: 22px; background: #fff; } .heu-authored .blog_holder article h2 { margin-top: 0; font-size: 1.3rem; } .heu-authored .blog_holder article h2 a { color: var(--heu-ink); } .heu-authored .blog_holder article h2 a:hover { color: var(--heu-link); } .heu-authored .post_info { font-size: 12.5px; color: #8A837A; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .heu-authored .post_more { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--heu-link); } /* contact surfaces */ .heu-formnote { background: var(--heu-cream); border-left: 4px solid var(--heu-brand); padding: 14px 18px; border-radius: 4px; margin: 0 0 22px; font-size: 14.5px; color: var(--heu-ink); } .heu-formnote a { font-weight: 700; color: var(--heu-link); } .heu-mapwrap { margin: 26px 0 10px; } /* The map. It was an openstreetmap.org/export/embed.html IFRAME until 2026-08-18 - a live third-party request on a page whose own /politica-de-cookies/ described it as such - and is now a picture this site hosts. Same box: 380px tall (420px under 700px, see below), full column width. object-fit:cover crops the one centred image to the desktop and phone shapes alike, so the Centro stays on the middle pixel and nothing under the map moves. */ a.heu-map { width: 100%; height: 380px; border: 1px solid var(--heu-line); border-radius: 12px; display: block; overflow: hidden; } a.heu-map img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .heu-note { font-size: 14px; color: #8A837A; } .heu-hours { margin: 26px 0; } .heu-hours table { max-width: 460px; width: 100%; border-collapse: collapse; } .heu-hours th, .heu-hours td { border: 1px solid var(--heu-line); padding: 9px 12px; text-align: left; } .heu-hours th { width: 60%; font-weight: 600; background: #FBF8F3; } @media (max-width: 700px) { a.heu-map { height: 300px; } } /* the two legal pages are reachable from the copyright bar of every page; the bar is dark, so the links inherit its colour and only gain an underline. */ .footer_bottom .heu-legal { margin: 4px 0 0; font-size: 13px; line-height: 1.6; } .footer_bottom .heu-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .footer_bottom .heu-legal a:hover { color: var(--heu-brand); } .footer_bottom .heu-legal span { opacity: .5; padding: 0 4px; } /* ---------- corrections from the independent visual review ---------------------------------- */ /* The authored pages centred their 860px column inside the theme's container while the H1 in the beige band above sits at the container's left edge — a visible 120px step on exactly the pages we wrote. Align the column left; the max-width still keeps the measure readable. */ .heu-authored { margin-left: 0; margin-right: auto; } /* Bridge lays its text-editor lists out with the marker inside the box, so a wrapped item's continuation line starts left of its own bullet (visible on /protocolos/, whose partner list wraps in a two-column layout). Hanging indent is what a list is supposed to do. */ .elementor-text-editor ul, .elementor-text-editor ol { list-style-position: outside; padding-left: 1.3em; margin-left: 0; } .elementor-text-editor ul li, .elementor-text-editor ol li { padding-left: 0; } /* On blog posts the beige band now carries only the breadcrumb, because the template prints the title and date again a few pixels below it. 44px of padding around one 13px line looked like a mistake. */ .heu-pagehead--crumbs { padding: 15px 0 13px; } .heu-pagehead--crumbs .heu-crumbs { margin: 0; } /* At 390px the OSM embed was short enough that the attribution strip wrapped to three lines and covered the bottom of the map. Height alone did not clear it: the strip wraps on WIDTH, and the embed was only 280px wide because the theme's container_inner (45px) and Elementor's widget-wrap (10px) each take a gutter. Let the map alone step outside both gutters to a 16px inset of the viewport — measured from the viewport, so it does not depend on either gutter staying the size it is today. */ @media (max-width: 700px) { a.heu-map { height: 420px; } .heu-mapwrap { width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); } a.heu-map { border-radius: 8px; } } /* The band above painted as two cream stripes with a white block punched through the middle on all 71 interior pages: Bridge's stylesheet gives `.container` an opaque white background, and the band's own child .container covered the gradient everywhere except the band's top and bottom padding. The band owns its background; its layout wrappers must not paint one. */ .heu-pagehead .container, .heu-pagehead .container_inner { background: transparent; } /* Elementor centres the ⊘ check icon against the WHOLE list item, so on a phone — where five of the twelve items in "Em que áreas … pode ajudar?" wrap — the icon sat beside the item's second line and the first line hung unmarked. Align the icon to the top of the item and give it the text's own line box, so its glyph centres on the FIRST line at any width. */ /* Linked items nest the icon inside an that is itself a centring flex row, so both boxes have to be re-aligned — /programa-be-better/ is the page that proves it. */ .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a { align-items: flex-start; } .elementor-icon-list-item .elementor-icon-list-icon { align-self: flex-start; } .elementor-icon-list-item .elementor-icon-list-icon i { line-height: inherit; } .elementor-icon-list-icon + .elementor-icon-list-text { align-self: flex-start; } /* The homepage teaser cards sit inside an Elementor text-editor, whose own

rules would otherwise fight the card's. */ .elementor-text-editor .heu-grid { margin: 26px 0 6px; } .elementor-text-editor .heu-card p { margin: 0; } /* The hypnotherapy lead photo sits in an Elementor image widget whose theme rule leaves the at an arbitrary intrinsic width; in a 50% column that rendered a 165px thumbnail beside a full-height paragraph. Make the lead photo fill its column. */ .elementor-image.heu-leadmedia { margin: 0 0 26px; } .elementor-image.heu-leadmedia img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 330px; object-fit: cover; object-position: center 42%; display: block; border-radius: 8px; } @media (max-width: 700px) { .elementor-image.heu-leadmedia img { max-height: 210px; } } /* The restored COMUNICAR+ photo is the only tile in the /outros-servicos/ grid whose source is a 300x300 crop, so it rendered inset and narrower than its eight neighbours. Make it sit on the same left edge and fill the same column width. */ .elementor-element-250e492 .elementor-image { text-align: left; } .elementor-element-250e492 .elementor-image img { width: 100%; height: auto; display: block; } /* ---------- round-4 corrections -------------------------------------------------------------- */ /* Every post card on /blogue/ and on the three month archives was 54px wider than the column that holds it: Bridge sizes `.blog_holder article` at width:100% under its global content-box sizing, so the card's own 26px side padding and 1px border were ADDED to the column width (at 390 the column is 300px and the card measured 354px). The right border, the rounded right corner and the right padding all fell outside the phone viewport and the excerpt ran into the screen edge. No gate could see it: html/body clip the excess, so documentElement.scrollWidth stayed at exactly 390 and the overflow check passed. Make the card measure its declared width including its own padding — the theme's own blog templates rely on border-box for the same reason. */ .heu-authored .blog_holder article { box-sizing: border-box; } /* The authored pages had no vertical rhythm: Bridge's reset zeroes every margin (`stylesheet.min: …,p,…{margin:0}`) and the theme restores paragraph spacing only for its own post body, `.single-post .blog_single p{margin-bottom:22px}`. Our column never matched that, so `.heu-authored p` computed 0/0 and legal paragraphs on /politica-de-cookies/ ran together, while `.heu-authored h3` computed margin-top 0 and every section heading sat glued to the paragraph above it. Only h2 had been given a top margin (2rem, above). Reuse the site's OWN two numbers — 22px between paragraphs, 2rem above a section heading — so the authored pages read like the theme-rendered posts beside them. */ .heu-authored p { margin-bottom: 22px; } .heu-authored h3 { margin-top: 2rem; } /* …but the composed blocks inside that same column set their own spacing and must keep it: the kicker sits tight above its rule, card and CTA bodies are laid out by flex, and the listing cards place their excerpt and "Ler mais" line themselves. Margin-TOP is never touched here, because `.heu-card__more` uses `margin-top:auto` to stay on the card's bottom edge. */ .heu-authored .heu-kicker { margin-bottom: 6px; } .heu-authored .heu-card p, .heu-authored .heu-cta p, .heu-authored .blog_holder p { margin-bottom: 0; } .heu-authored .heu-card h3, .heu-authored .heu-cta h3 { margin-top: 0; } /* ---------- round-5 corrections --------------------------------------------------------------- */ /* The footer scroll control is now a