:root {
/* Color — role-based (see .claude/skills/design/design-tokens.css) */
/* Cores da marca (Manual de Normas Gráficas v1.1). Use the role tokens
below in rules. Petróleo claro is only for dark sections: the dark group
("Polish 1: dark sections") sets it. Petróleo and Petróleo claro never
show together. */
--color-petroleo: #007398; /* 5.38:1 on white */
--color-petroleo-claro: #108cb9; /* 4.62:1 on Tinta, 4.53:1 on --dark-800 */
--color-tinta: #191817; /* 17.7:1 on white */
--color-primary: var(--color-petroleo);
--color-primary-hover: #005f7d; /* Petróleo, darker, same hue. White text 7.16:1 */
--color-accent: var(--color-petroleo);
--color-accent-text: var(--color-petroleo);
--color-ink: var(--color-tinta);
--color-slate: color-mix(in srgb, var(--color-tinta) 75%, var(--surface-1));
--color-muted: #6e6b68;
--surface-1: #fff;
--surface-2: #f6f7f9;
--border: #e9ecef;
--footer-bg: var(--color-tinta);
--dark-900: var(--color-tinta);
--dark-800: #1b1a19; /* one lighter Tinta step, same warm hue */
--accent-soft: color-mix(in srgb, var(--color-petroleo) 8%, var(--surface-1));
/* Back-compat aliases */
--bg-color: var(--surface-1);
--text-color: var(--color-ink);
/* Spacing — 8pt scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
/* Layout */
--radius: 16px;
--radius-sm: 12px;
--radius-pill: 9999px;
--radius-circle: 50%;
--radius-xs: 4px; /* focus outline corner */
--radius-cut: var(--radius) 0 var(--radius) var(--radius); /* every card: square top-right corner */
--section-pad: clamp(80px, 10vh, 120px);
--generalpah-h: var(--section-pad); /* back-compat alias */
/* Type */
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-heading: "Montserrat", sans-serif;
--weight-body: 400;
--weight-medium: 500;
--weight-heading: 600;
--weight-bold: 700;
/* Fluid scale. The large size is at 1200px. The small size is at 576px.
h1 stays 32px to 64px. h2 is 24px to 48px. The step is 8px at 576px
and 16px at 1200px. h3 to h6 are smaller by the same amount, so each
step stays below the step above. */
--text-h1: clamp(2rem, 0.154rem + 5.13vw, 4rem); /* 32 -> 64 */
--text-h2: clamp(1.5rem, 0.115rem + 3.85vw, 3rem); /* 24 -> 48 */
--text-h3: clamp(1.25rem, 0.096rem + 3.21vw, 2.5rem); /* 20 -> 40 */
--text-h4: clamp(1.125rem, 0.317rem + 2.24vw, 2rem); /* 18 -> 32 */
--text-h5: clamp(1rem, 0.308rem + 1.92vw, 1.75rem); /* 16 -> 28 */
--text-h6: clamp(0.875rem, 0.298rem + 1.6vw, 1.5rem); /* 14 -> 24 */
--text-body: 1rem;
--text-small: 0.875rem;
--text-caption: 0.6875rem;
/* Role sizes. Each one is a fixed step or a capped heading step. */
--text-hero-title: clamp(2rem, 4vw, 4rem); /* home hero H2 */
--text-page-title: min(var(--text-h1), 3.5rem); /* inner hero H1 */
--text-section-title: min(var(--text-h2), 2.5rem); /* section title H2 */
--text-menu-overlay: 1.75rem; /* mobile overlay links */
--text-list-title: 1.25rem; /* services accordion row title */
--text-card-title: 1.125rem; /* small card title (valores tile) */
--text-eyebrow: 0.75rem; /* eyebrow and uppercase label */
--tracking-tight: -0.02em;
--tracking-body: -0.01em;
--leading-heading: 1.1;
--leading-body: 1.45;
/* Effects */
--hairline: 1px solid rgba(0, 0, 0, 0.06);
--transition: 0.2s ease;
--shadow-lift: 0 12px 28px color-mix(in srgb, var(--dark-900) 10%, transparent); /* card hover lift */
/* Surface roles. These are the values on a light surface. The dark group
("Polish 1: dark sections") sets the values on dark. */
--on-surface-strong: var(--color-primary);
--on-surface-line: color-mix(in srgb, var(--color-primary) 35%, transparent);
--on-surface-wash: color-mix(in srgb, var(--color-primary) 5%, transparent);
--lead-color: var(--color-slate);
--eyebrow-color: var(--color-accent-text);
--btn-ring: color-mix(in srgb, var(--color-accent) 40%, transparent);
/* Icons. Use them as a mask with a colour-token background. */
--icon-check-circle: url("data:image/svg+xml;utf8,"); /* list bullet: a circle with a check cut out */
/* Motivo: the Símbolo geometry of template-parts/motivo.php, as a mask. */
--motivo: url("data:image/svg+xml;utf8,");
--arrow-16: url("data:image/svg+xml;utf8,");
}
html, body {
font-size: 1em;
margin: 0;
padding: 0;
background: var(--surface-1);
color: var(--color-ink);
font-family: var(--font-body);
overflow-x: hidden;
letter-spacing: var(--tracking-body);
line-height: var(--leading-body);
}
/* Brand link colour. Bootstrap 5.1.3 sets a { color: #0d6efd } and
a:hover { color: #0a58ca } as literal values. It has no --bs-link-color
variables (Bootstrap 5.3 adds them), so this element rule replaces the
Bootstrap blue. The accent is Petróleo on light surfaces and Petróleo
claro in the dark sections. Rules with a class set their own colour. */
a {
color: var(--color-accent);
}
a:hover {
color: var(--on-surface-strong);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
margin-bottom: 0.7em;
line-height: var(--leading-heading);
font-weight: var(--weight-heading) !important;
}
h1 {
font-size: var(--text-h1);
letter-spacing: var(--tracking-tight);
}
h2 {
font-size: var(--text-h2);
letter-spacing: var(--tracking-tight);
}
h3 {
font-size: var(--text-h3);
}
h4 {
font-size: var(--text-h4);
}
h5 {
font-size: var(--text-h5);
}
h6 {
font-size: var(--text-h6);
}
h1 {
margin-top: 0;
}
main {
position: relative;
z-index: 1;
}
section {
padding: var(--generalpah-h) 0;
}
/* Clears the fixed .nav (top:25px + ~70px tall) on first sections that have no
full-bleed hero image to absorb it. Matches section.page-projetos' 160px. */
.u-nav-offset,
.page-simple,
.page-formulario,
.error-404,
.single-bim-center,
.project-hero--no-image .project-info {
padding-top: max(var(--generalpah-h), 160px);
}
.nav {
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0.45)));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 100%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid rgba(255, 255, 255, 0.38);
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
background-clip: padding-box;
border-radius: var(--radius);
overflow: visible;
position: fixed;
top: 25px;
margin-top: 0;
left: 0;
right: 0;
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 20px;
font-size: 0.9375em;
font-weight: 500;
z-index: 9;
-webkit-transition: top 0.25s ease, border-radius 0.25s ease, max-width 0.25s ease;
transition: top 0.25s ease, border-radius 0.25s ease, max-width 0.25s ease;
}
.nav:before {
content: "";
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
pointer-events: none;
border-radius: calc(var(--radius) - 1px);
background: radial-gradient(120% 80% at 10% -20%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(120% 80% at 90% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
}
.nav-logo-img {
height: 30px;
position: relative;
z-index: 50;
}
.nav-logo-h1 {
overflow: hidden;
text-indent: -99999px;
position: absolute;
z-index: 50;
}
.nav #menuToggle {
display: none;
position: fixed;
top: 20px;
right: 20px;
z-index: 10;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nav #menuToggle a {
text-decoration: none;
color: #232323;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.nav #menuToggle a:hover {
color: var(--color-accent);
}
.nav #menuToggle input {
display: block;
width: 48px;
height: 48px;
position: absolute;
top: -12px;
left: -12px;
cursor: pointer;
opacity: 0;
z-index: 52;
-webkit-touch-callout: none;
}
.nav #menuToggle input:checked ~ span {
opacity: 1;
-webkit-transform: rotate(45deg) translate(-2px, -1px);
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
.nav #menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0.2, 0.2);
transform: rotate(0deg) scale(0.2, 0.2);
}
.nav #menuToggle input:checked ~ span:nth-last-child(2) {
-webkit-transform: rotate(-45deg) translate(0, -1px);
transform: rotate(-45deg) translate(0, -1px);
}
.nav #menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000;
border-radius: 3px;
z-index: 51;
-webkit-transform-origin: 4px 0px;
transform-origin: 4px 0px;
-webkit-transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.nav #menuToggle span:first-child {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.nav #menuToggle span:nth-last-child(2) {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.nav #menuToggle .over-menu {
border-radius: var(--radius);
background-color: rgb(255, 255, 255);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0.45)));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 100%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: clamp(260px, 80vw, 420px);
max-width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0;
padding: 60px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
z-index: 12;
overflow: hidden;
opacity: 0;
pointer-events: none;
-webkit-transform: translateX(110%);
transform: translateX(110%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-transition: opacity 0.35s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: opacity 0.35s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s ease;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.nav #menuToggle .over-menu ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
text-align: right;
}
.nav #menuToggle .over-menu ul li {
padding: 10px 0;
font-size: 1rem;
opacity: 0;
-webkit-transform: translateX(24px);
transform: translateX(24px);
-webkit-transition: opacity 0.35s ease, -webkit-transform 0.45s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: opacity 0.35s ease, -webkit-transform 0.45s cubic-bezier(0.77, 0.2, 0.05, 1);
transition: transform 0.45s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s ease;
transition: transform 0.45s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s ease, -webkit-transform 0.45s cubic-bezier(0.77, 0.2, 0.05, 1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.nav #menuToggle .over-menu ul li a {
text-decoration: none;
color: #000;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.nav #menuToggle .over-menu ul li a:hover {
color: var(--color-accent);
}
.nav #menuToggle .over-menu ul li.current-menu-item a, .nav #menuToggle .over-menu ul li.current-menu-ancestor a, .nav #menuToggle .over-menu ul li.current-menu-parent a, .nav #menuToggle .over-menu ul li.current_page_item a, .nav #menuToggle .over-menu ul li.current_page_parent a, .nav #menuToggle .over-menu ul li.current_page_ancestor a {
color: var(--color-accent);
}
.nav #menuToggle input:checked ~ .over-menu {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.nav #menuToggle input:checked ~ .over-menu ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(1) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(4) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(5) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(6) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(7) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(8) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(9) {
-webkit-transition-delay: 0.45s;
transition-delay: 0.45s;
}
.nav #menuToggle input:checked ~ .over-menu ul li:nth-child(10) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.nav:has(#menuToggle input:checked) {
top: 0;
left: 0;
right: 0;
max-width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nav .nav-menu-desktop {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.nav .nav-menu-desktop .menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
@supports not (gap: 1rem) {
.nav .nav-menu-desktop .menu > * + * {
margin-left: 1.5rem;
}
}
.nav .nav-menu-desktop .menu li {
list-style: none;
}
.nav .nav-menu-desktop .menu li a {
text-decoration: none;
color: #000;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.nav .nav-menu-desktop .menu li a:hover {
color: var(--color-accent);
}
.nav .nav-menu-desktop .menu li.current-menu-item a, .nav .nav-menu-desktop .menu li.current-menu-ancestor a, .nav .nav-menu-desktop .menu li.current-menu-parent a, .nav .nav-menu-desktop .menu li.current_page_item a, .nav .nav-menu-desktop .menu li.current_page_parent a, .nav .nav-menu-desktop .menu li.current_page_ancestor a {
color: var(--color-accent);
}
@media only screen and (max-width: 75em) {
.nav .nav-menu-desktop {
display: none !important;
}
.nav #menuToggle {
display: block;
}
}
@media only screen and (max-width: 48em) {
.nav {
left: 0;
right: 0;
}
.nav #menuToggle .over-menu {
width: 100%;
max-width: none;
border-radius: 0;
left: 0;
right: 0;
margin: 0;
}
}
.nav.nav--affixed {
top: 0;
left: 0;
right: 0;
max-width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
/* Before scroll: constrain the nav bar to Bootstrap .container width + padding
so the pill wraps tightly around the content.
After scroll (.nav--affixed) max-width: 100% makes it full-width. */
@media (min-width: 768px) {
.nav:not(.nav--affixed) { max-width: 760px; }
}
@media (min-width: 992px) {
.nav:not(.nav--affixed) { max-width: 1000px; }
}
@media (min-width: 1200px) {
.nav:not(.nav--affixed) { max-width: 1180px; }
}
@media (min-width: 1400px) {
.nav:not(.nav--affixed) { max-width: 1360px; }
}
.site-footer {
color: #e9ecef;
padding: 3rem 0 2rem;
}
.site-footer a {
color: #e9ecef;
text-decoration: none;
}
.site-footer a:hover {
color: #fff;
}
/* The footer shows the full Horizontal Invertida Logotipo (about 3.6:1), not
a square icon. A height of 48px gives a width of about 173px, so the
ENGENHARIA line stays readable. The narrowest footer column is 216px (lg),
so the logo fits at all breakpoints. max-width and object-fit keep the
ratio if a column is narrower. The manual minimum width is 36px. */
.site-footer .footer-logo img {
display: block;
width: auto;
max-width: 100%;
height: 48px;
object-fit: contain;
}
.site-footer .footer-logo-text {
font-weight: 700;
font-size: 1.1rem;
color: #fff;
}
.site-footer .footer-menu a {
color: rgba(255, 255, 255, 0.85);
}
.site-footer .footer-menu a:hover {
color: #fff;
}
.site-footer .footer-social .social-btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: #fff;
-webkit-transition: background 0.18s ease, -webkit-transform 0.06s ease;
transition: background 0.18s ease, -webkit-transform 0.06s ease;
transition: background 0.18s ease, transform 0.06s ease;
transition: background 0.18s ease, transform 0.06s ease, -webkit-transform 0.06s ease;
}
.site-footer .footer-social .social-btn:hover {
background: rgba(255, 255, 255, 0.18);
}
.site-footer .footer-social .social-btn:active {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.site-footer .footer-prr {
margin: 1rem 0 2rem;
padding: 1rem 1.25rem;
}
.site-footer .footer-prr__img {
display: inline-block;
max-height: 56px;
width: auto;
height: auto;
}
@media only screen and (max-width: 36em) {
.site-footer .footer-prr__img {
max-height: 10vw;
}
}
@media only screen and (max-width: 61.938em) {
.site-footer {
text-align: center;
}
.site-footer .footer-inner .row > div {
text-align: center;
}
.site-footer .footer-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-footer .footer-logo img {
margin: 0 auto;
}
.site-footer .footer-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
width: 100%;
}
.site-footer .footer-social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-footer .footer-prr {
margin-left: auto;
margin-right: auto;
}
.site-footer .footer-meta {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
}
/* ── Buttons: base = white/light (texto preto) ── */
.btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.5rem;
position: relative;
cursor: pointer !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
white-space: nowrap;
line-height: 1.15;
font-size: 0.9375rem;
font-weight: 400;
letter-spacing: 0.02em;
padding: 0.85rem 1.75rem;
border-radius: 9999px;
border: none;
color: var(--color-slate);
background: rgba(255, 255, 255, 0.92);
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-webkit-transition: background 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.1s ease;
transition: background 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.1s ease;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.1s ease;
}
.btn:hover {
background: #fff;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.btn:active {
-webkit-transform: translateY(0.5px);
transform: translateY(0.5px);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ── Buttons: primary variant (Petróleo fill, white text) ── */
.btn.blue, .btn-blue, .btn.btn-primary,
.btn.orange-17, .btn-orange-17 {
color: var(--surface-1);
background: var(--color-primary);
-webkit-box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent);
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.btn.blue:hover, .btn-blue:hover, .btn.btn-primary:hover,
.btn.orange-17:hover, .btn-orange-17:hover {
background: var(--color-primary-hover);
-webkit-box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
/* ── Legacy variant aliases → map to base (white) ── */
.btn.light,
.btn.white, .btn-white,
.btn.orange, .btn-orange,
.btn.clear, .btn-clear {
color: var(--color-slate);
background: rgba(255, 255, 255, 0.92);
}
/* ── Buttons: spacing & sizing ── */
.btn + .btn {
margin-left: 1rem;
}
.btn.btn-sm,
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.9375rem;
}
.pagination-neo {
gap: 0.5rem;
}
@supports not (gap: 1rem) {
.pagination-neo .page-item + .page-item {
margin-left: 0.5rem;
}
}
.pagination-neo .page-item {
margin: 0 0.125rem;
}
.pagination-neo .page-link,
.pagination-neo .page-link:visited,
.pagination-neo .page-link.current {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 2.5rem;
padding: 0.6rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 9999px;
text-decoration: none;
background: rgba(255, 255, 255, 0.45);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
color: var(--color-slate);
-webkit-transition: background 0.2s ease, border-color 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.1s ease;
transition: background 0.2s ease, border-color 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.1s ease;
transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.1s ease;
}
.pagination-neo .page-link:hover {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pagination-neo .page-link:active {
-webkit-transform: translateY(0.5px);
transform: translateY(0.5px);
}
.pagination-neo .page-link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.pagination-neo .page-item.active .page-link,
.pagination-neo .page-link.current {
color: var(--surface-1);
background: var(--color-primary);
border-color: var(--color-primary);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.feature-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
font-size: 2rem;
color: #fff;
border-radius: 0.75rem;
}
.glass-card {
max-width: 1200px;
padding: 3rem 2rem;
border-radius: var(--radius);
margin-top: 1rem;
margin-bottom: 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
color: #e9ecef;
}
.glass-card-sm {
padding: 0;
overflow: hidden;
}
.glass-card-sm .card-img-top {
display: block;
width: 100%;
height: 280px;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (max-width: 75em) {
.glass-card-sm .card-img-top {
height: 240px;
}
}
@media only screen and (max-width: 61.938em) {
.glass-card-sm .card-img-top {
height: 220px;
}
}
@media only screen and (max-width: 48em) {
.glass-card-sm .card-img-top {
height: 200px;
}
}
@media only screen and (max-width: 36em) {
.glass-card-sm .card-img-top {
height: 180px;
}
}
.glass-card-sm .card-body {
padding: 1.25rem;
}
.glass-card-sm h3 {
color: #fff;
}
.glass-card-sm .text-muted {
color: rgba(255, 255, 255, 0.78) !important;
}
.contact-link,
.contact-link:visited {
color: inherit;
text-decoration: none;
border-bottom: 0;
-webkit-transition: color 0.18s ease;
transition: color 0.18s ease;
}
.contact-link:hover,
.contact-link:focus-visible {
color: var(--color-accent);
outline: none;
}
.line {
height: 1px;
background-color: #E2E2E2;
width: 100%;
}
#ifc-toolbar.ifc-toolbar {
position: absolute;
right: 10px;
top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 2;
}
@supports not (gap: 1rem) {
#ifc-toolbar.ifc-toolbar > * + * {
margin-left: 6px;
}
}
#ifc-toolbar.ifc-toolbar {
gap: 6px;
}
#ifc-toolbar.ifc-toolbar button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.9);
color: #222;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
#ifc-toolbar.ifc-toolbar button:hover {
background: #fff;
}
.protected-full {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
min-height: 100vh;
min-height: 100dvh;
padding: 6vh 0;
}
.protected-full .protected-full-inner {
width: 100%;
}
.protected-full .post-password-form .card {
margin-left: auto;
margin-right: auto;
}
.protected-full .post-password-form .input-group .form-control {
height: 48px;
}
.protected-full .post-password-form .input-group .btn {
height: 48px;
}
.home-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
background-color: transparent;
overflow: hidden;
padding: 0;
--hero-dots-bottom: 10vh;
}
.home-hero__slider {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.home-hero__slider .slider-home {
height: 100%;
}
.home-hero__slider .slick-list, .home-hero__slider .slick-track {
height: 100%;
}
.home-hero__slider .slick-slide, .home-hero__slider .slick-slide > div {
height: 100%;
}
.home-hero__slider .home-hero-img {
height: 100%;
width: 100%;
}
.home-hero__overlay {
position: relative;
z-index: 1;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0.85) 999px);
}
.home-hero__overlay_cnt {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home-hero__overlay_cnt > .container {
position: absolute;
left: 0;
right: 0;
bottom: var(--hero-dots-bottom);
top: auto;
-webkit-transform: none;
transform: none;
}
.home-hero__layout {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 3rem;
}
@media (min-width: 992px) {
.home-hero__layout {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
margin-bottom: 4rem;
}
}
.home-hero__content {
max-width: 640px;
}
.home-hero__brand-inner {
width: 100%;
height: 100%;
margin-bottom: 80px;
margin-bottom: clamp(24px, 6vh, 80px);
}
.home-hero__brand-img {
display: block;
max-width: 240px;
max-width: clamp(140px, 14vw, 240px);
max-height: 18vh;
width: auto;
height: auto;
}
.home-hero__partners {
margin-top: 5vh;
}
.home-hero-txt {
position: relative;
z-index: 1;
text-align: left;
}
.home-hero-txt h2 {
font-weight: 600 !important;
font-size: 4rem;
font-size: clamp(2.5rem, 4vw, 4rem);
letter-spacing: -0.03em;
line-height: 1.0;
}
.home-hero .stacked-block__content + .stacked-block__actions {
margin-top: 64px;
margin-top: clamp(24px, 4vh, 64px);
}
.home-hero__overlay .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.home-hero__overlay .row > .col-12 {
width: 100%;
max-width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.home-hero__overlay .row > .col-12.col-lg-6 {
width: 100%;
max-width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
@media (min-width: 992px) {
.home-hero__overlay .row > .col-12.col-lg-6:last-child {
max-width: 50%;
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
}
.home-hero--65 {
min-height: 65vh;
min-height: 65dvh;
--hero-dots-bottom: 6vh;
}
.home-hero--65 .home-hero__overlay {
min-height: 65vh;
min-height: 65dvh;
}
.home-hero--65 .home-hero__slider, .home-hero--65 .home-hero-img, .home-hero--65 .home-hero-img-el, .home-hero--65 .slider-home, .home-hero--65 .slick-list, .home-hero--65 .slick-track {
height: 100%;
}
.sobre-hero .home-hero-img-el,
.services-hero .home-hero-img-el,
.bim-hero .home-hero-img-el {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
display: block;
}
.slider-home .home-hero-img {
overflow: hidden;
width: 100%;
height: 100%;
}
.slider-home .home-hero-img-el {
height: 100%;
width: 100%;
border-radius: 0;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover";
}
.home-hero__controls {
position: absolute;
left: 0;
right: 0;
bottom: var(--hero-dots-bottom);
z-index: 2;
}
.home-hero__controls > .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.home-hero__controls .slick-dots {
position: static;
bottom: auto;
width: auto;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@supports not (gap: 1rem) {
.home-hero__controls .slick-dots > li + li {
margin-left: 12px;
}
}
.home-hero__controls .slick-dots {
gap: 12px;
}
.home-hero__controls .slick-dots li button:before {
content: none;
}
.home-hero__controls .hero-dots {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
@supports not (gap: 1rem) {
.home-hero__controls .hero-dots > li + li {
margin-left: 12px;
}
}
.home-hero__controls .hero-dots {
gap: 12px;
}
.home-hero__controls .hero-dots li,
.home-hero__controls .slick-dots li {
margin: 0;
padding: 0;
}
.home-hero__controls .hero-dots button,
.home-hero__controls .slick-dots button {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.7);
background: transparent;
padding: 0;
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
}
.home-hero__controls .hero-dots .slick-active button,
.home-hero__controls .hero-dots li.slick-active button,
.home-hero__controls .slick-dots .slick-active button {
background: rgba(0, 0, 0, 0.85);
border-color: rgba(0, 0, 0, 0.85);
}
@media only screen and (max-width: 61.938em) {
.home-hero__controls {
bottom: calc(var(--hero-dots-bottom) / 2);
}
.home-hero__controls > .container {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.listpartners {
z-index: 1;
position: relative;
margin-top: 2rem;
}
.listpartners h3 {
font-size: 1em;
}
.listpartners-items-logo {
width: auto;
height: 100px;
display: block;
}
.home-work {
--stack-indent: 1.5rem;
}
section.page-projetos {
padding-top: max(var(--generalpah-h), 160px);
}
.home-work .work-card {
border-radius: var(--radius) 0 var(--radius) var(--radius);
overflow: hidden;
background-clip: padding-box;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-webkit-transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
}
.home-work .work-card:hover {
-webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.home-work .work-card-img {
overflow: hidden;
border-top-left-radius: var(--radius);
border-top-right-radius: 0;
height: 270px;
}
.home-work .work-card-img img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-top-left-radius: inherit;
border-top-right-radius: 0;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.28s ease;
transition: -webkit-transform 0.28s ease;
transition: transform 0.28s ease;
transition: transform 0.28s ease, -webkit-transform 0.28s ease;
}
.home-work .work-card .card-body {
padding: 2rem;
}
.home-work .work-card h3 {
font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
line-height: 1.3;
}
.home-work .work-card:hover .work-card-img img {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
.home-work .services-term-services {
margin-left: 0;
padding-left: 0;
--bullet-size: .85rem;
--bullet-gap: .35rem;
}
.home-work .services-term-services li {
position: relative;
margin: 0.25rem 0;
padding-left: 0;
}
.home-work .services-term-services li::before {
content: "";
position: absolute;
left: calc(-1 * (var(--bullet-size) + var(--bullet-gap)));
top: 0.35em;
width: var(--bullet-size);
height: var(--bullet-size);
background-color: var(--color-accent);
-webkit-mask: var(--icon-check-circle) no-repeat center / contain;
mask: var(--icon-check-circle) no-repeat center / contain;
}
.home-work .services-term-services a.service-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
.home-work .services-term-services a.service-link:hover {
border-bottom-color: rgba(0, 0, 0, 0.35);
}
.home-testemunhos {
background: #f6f7f9;
}
.home-testemunhos .testemunhos-slider {
padding-bottom: 1.25rem;
}
.home-testemunhos .testemunhos-slider .slick-list {
overflow: hidden;
}
.home-testemunhos .testemunhos-slider .slick-slide {
padding: 0 12px;
}
.home-testemunhos .testemunho-item {
max-width: 880px;
margin: 0 auto;
text-align: left;
}
.home-testemunhos .testemunho-text {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.home-testemunhos .testemunho-text p + p {
margin-top: 0.75rem;
}
.home-testemunhos .testemunho-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #999;
}
@supports not (gap: 1rem) {
.home-testemunhos .testemunho-meta > * + * {
margin-left: 0.5rem;
}
}
.home-testemunhos .testemunho-meta {
gap: 0.5rem;
}
.home-testemunhos .testemunho-card {
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius) 0 var(--radius) var(--radius);
padding: 2rem;
background: #fff;
height: 100%;
overflow: hidden;
background-clip: padding-box;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.home-testemunhos .testemunho-card:before {
content: "";
position: absolute;
top: 1rem;
left: 1rem;
width: 24px;
height: 24px;
opacity: 0.25;
background: no-repeat center/contain url("data:image/svg+xml;utf8,");
}
.home-testemunhos .testemunho-logo img {
display: block;
max-height: 36px;
width: auto;
-webkit-filter: grayscale(100%) opacity(0.8);
filter: grayscale(100%) opacity(0.8);
}
.home-testemunhos .slick-dots {
bottom: -24px;
}
.home-testemunhos .slick-dots li {
margin: 0 6px;
}
.home-testemunhos .slick-dots li button {
width: 18px;
height: 18px;
}
.home-testemunhos .slick-dots li button:before {
font-size: 12px;
color: rgba(0, 0, 0, 0.35);
opacity: 1;
}
.home-testemunhos .slick-dots li.slick-active button:before {
color: rgba(0, 0, 0, 0.8);
}
.home-testemunhos .slick-dots li button:focus-visible {
outline: 2px solid var(--color-accent);
border-radius: 999px;
}
@media (min-width: 992px) {
.home-testemunhos .testemunho-text {
min-height: 180px;
}
}
@media (min-width: 1200px) {
.home-testemunhos .testemunho-text {
min-height: 220px;
}
.home-testemunhos .slick-dots {
bottom: -32px;
}
}
.cta {
color: #e9ecef;
position: relative;
overflow: hidden;
}
.cta .cta-card {
max-width: 1200px;
padding: 3rem 2rem;
border-radius: var(--radius);
margin-top: 1rem;
margin-bottom: 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
}
.cta .cta-title {
color: #fff;
font-weight: 700;
}
.cta .cta-text {
color: rgba(255, 255, 255, 0.78);
}
.services-slider {
margin-top: var(--generalpah-h);
margin-left: 6vw;
margin-right: 6vw;
}
@media only screen and (max-width: 75em) {
.services-slider {
margin-left: 5vw;
margin-right: 5vw;
}
}
@media only screen and (max-width: 61.938em) {
.services-slider {
margin-left: 4vw;
margin-right: 4vw;
}
}
@media only screen and (max-width: 48em) {
.services-slider {
margin-left: 24px;
margin-right: 24px;
}
}
@media only screen and (max-width: 36em) {
.services-slider {
margin-left: 12px;
margin-right: 12px;
}
}
.services-slider .glass-card h3 {
color: #fff;
margin-bottom: 0.5rem;
}
.services-slider .glass-card .text-muted {
color: rgba(255, 255, 255, 0.78) !important;
}
.services-slider .glass-card {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0;
overflow: hidden;
}
.services-slider .glass-card .row {
margin: 0;
height: 100%;
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}
.services-slider .glass-card .row > [class^=col-], .services-slider .glass-card .row > [class*=" col-"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.services-slider .glass-card .col-12.col-lg-5 {
padding: 0;
height: 100%;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.services-slider .glass-card .col-12.col-lg-5 img {
display: block;
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
border-radius: 0;
}
.services-slider .glass-card .col-12.col-lg-7 {
padding: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.services-slider .glass-card .col-12.col-lg-7 .btn {
-ms-flex-item-align: start;
align-self: flex-start;
}
@media only screen and (max-width: 48em) {
.services-slider .glass-card .col-12.col-lg-7 {
padding: 1.25rem;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
height: auto;
}
}
@media only screen and (min-width: 64.063em) {
.services-slider .glass-card {
height: 70vh;
min-height: 70vh;
}
.services-slider .glass-card .col-12.col-lg-7 {
padding: 3rem;
}
}
.services-slider .services-slide {
padding: 0 2vw;
}
@media only screen and (max-width: 75em) {
.services-slider .services-slide {
padding: 0 1.5vw;
}
}
@media only screen and (max-width: 61.938em) {
.services-slider .services-slide {
padding: 0 1vw;
}
}
@media only screen and (max-width: 48em) {
.services-slider .services-slide {
padding: 0 12px;
}
}
@media only screen and (max-width: 36em) {
.services-slider .services-slide {
padding: 0 8px;
}
}
.services-slider .slick-list {
overflow: visible;
}
.services-slider .slick-dots {
bottom: -24px;
}
.services-slider .slick-dots li {
margin: 0 6px;
}
.services-slider .slick-dots li button {
width: 18px;
height: 18px;
}
.services-slider .slick-dots li button:before {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
opacity: 1;
}
.services-slider .slick-dots li.slick-active button:before {
color: rgba(255, 255, 255, 0.9);
}
.tax-categorias .services-slider .services-slide {
padding: 0 1.25vw;
}
.cta.cta--electric {
position: relative;
overflow: hidden;
background: transparent;
}
/* Shared dark section overlay + container z-index */
.home-servicos:before,
.bim-services:before,
.bg-blue-dark:before,
.cta:before {
content: "";
position: absolute;
top: 50%;
right: -5%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 45%;
height: 80%;
z-index: 0;
opacity: 0.04;
pointer-events: none;
/* The Motivo shape is the mask. The background gives its colour. */
background: var(--surface-1);
-webkit-mask: var(--motivo) no-repeat center / contain;
mask: var(--motivo) no-repeat center / contain;
}
@media only screen and (max-width: 61.938em) {
.home-servicos:before,
.bim-services:before,
.bg-blue-dark:before,
.cta:before {
top: auto;
bottom: 0;
right: 0;
-webkit-transform: none;
transform: none;
width: 70%;
height: 50%;
}
}
.home-servicos > .container,
.bim-services > .container,
.bg-blue-dark > .container,
.cta > .container {
position: relative;
z-index: 1;
}
.home-servicos {
--stack-indent: 1.5rem;
position: relative;
z-index: 0;
color: #e9ecef;
padding: 7rem 0;
}
.home-servicos h2 {
color: #fff;
}
.home-servicos .text-muted {
color: rgba(255, 255, 255, 0.7) !important;
}
.home-servicos .home-services-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 360px;
}
.home-servicos .home-services-image img {
border-radius: var(--radius);
width: 85%;
max-width: 520px;
}
@media only screen and (max-width: 61.938em) {
.home-servicos .home-services-image img {
width: 100%;
max-width: none;
}
}
.home-servicos #services-cats {
margin-top: 1rem;
}
.home-servicos .services-cat-item {
border-radius: 12px;
padding: 2rem;
margin-bottom: 0.35rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.home-servicos .services-cat-item .services-cat-title {
color: #fff;
margin-bottom: 0.5rem;
}
.home-servicos .services-cat-item .services-cat-btn {
color: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.75rem;
width: 100%;
text-align: left;
position: relative;
}
.home-servicos .services-cat-item .services-cat-btn::after {
content: "";
-webkit-box-flex: 0;
-ms-flex: 0 0 20px;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin-left: auto;
background: no-repeat center/18px 18px url("data:image/svg+xml;utf8,");
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.home-servicos .services-cat-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.home-servicos .services-cat-item.active {
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
}
.home-servicos .services-cat-item.active .services-cat-title {
color: #fff;
}
.home-servicos .services-cat-item.active .services-cat-btn::after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
@media only screen and (max-width: 61.938em) {
.home-servicos .services-cat-item:last-child {
margin-bottom: 2.5rem;
}
}
.home-servicos #services-cats .services-cat-item > .services-cat-title {
margin-bottom: 0.75rem !important;
display: block;
}
.home-servicos .services-detail {
margin-top: 0.5rem;
}
.home-servicos .services-detail .card {
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
color: #e9ecef;
}
.home-servicos #services-cats .services-detail .stacked-block__content {
margin-top: 1rem;
}
.home-servicos .services-term-services,
.single-projetos .services-term-services {
--bullet-size: .9rem;
margin-left: 0;
padding-left: 0;
list-style: none;
}
.home-servicos .services-term-services li,
.single-projetos .services-term-services li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0.6rem;
}
.home-servicos .services-term-services li {
margin: 0.35rem 0;
color: #e9ecef;
}
.home-servicos .services-term-services li::before,
.single-projetos .services-term-services li::before {
content: "";
-webkit-box-flex: 0;
-ms-flex: 0 0 var(--bullet-size);
flex: 0 0 var(--bullet-size);
width: var(--bullet-size);
height: var(--bullet-size);
margin-top: 0.35em;
background-color: var(--color-accent);
-webkit-mask: var(--icon-check-circle) no-repeat center / contain;
mask: var(--icon-check-circle) no-repeat center / contain;
}
.home-servicos .services-term-services a.service-link {
color: #fff;
text-decoration: none;
border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
padding-bottom: 0.1rem;
-webkit-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
.home-servicos .services-term-services a.service-link:hover {
border-bottom-color: rgba(255, 255, 255, 0.55);
}
.home-servicos > .container > .row + .row {
margin-top: 3rem;
}
.home-about {
background: #fff;
}
.home-about .container-fluid {
padding-left: 0;
padding-right: 0;
}
.home-about .row {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.home-about .home-about-img {
position: relative;
overflow: visible;
height: 100%;
}
.home-about .home-about-img img {
display: block;
border-radius: 12px;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home-about .home-about-txt {
padding-right: 6vw;
padding-left: 4vw;
}
@media only screen and (max-width: 75em) {
.home-about .home-about-txt {
padding-right: 5vw;
padding-left: 3vw;
}
}
@media only screen and (max-width: 61.938em) {
.home-about .home-about-txt {
padding-right: 4vw;
padding-left: 24px;
padding-top: 5vh;
}
}
@media only screen and (max-width: 48em) {
.home-about .home-about-txt {
padding-right: 24px;
padding-left: 16px;
}
}
@media only screen and (max-width: 36em) {
.home-about .home-about-txt {
padding-right: 12px;
padding-left: 12px;
}
}
.home-about .home-about-logo {
display: inline-block;
line-height: 0;
color: var(--color-muted);
}
.home-about .home-about-logo__svg {
display: block;
width: 40px;
width: clamp(28px, 3vw, 40px);
height: auto;
}
section.service-faqs .faq-list {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
section.service-faqs .faq-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
section.service-faqs .faq-item > summary {
list-style: none;
}
section.service-faqs .faq-item > summary::-webkit-details-marker {
display: none;
}
section.service-faqs .faq-q {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem 0;
cursor: pointer;
position: relative;
font-size: 1.25rem;
font-size: clamp(1.05rem, 1.2vw, 1.25rem);
}
@supports not (gap: 1rem) {
section.service-faqs .faq-q > * + * {
margin-left: 1rem;
}
}
section.service-faqs .faq-q {
gap: 1rem;
}
section.service-faqs .faq-q::after {
content: "";
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20px;
height: 20px;
background: no-repeat center/18px 18px url("data:image/svg+xml;utf8,");
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
section.service-faqs .faq-item[open] > .faq-q::after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
section.service-faqs .faq-a {
padding: 0 0 1rem;
}
section.service-faqs .faq-q:focus {
outline: none;
}
section.service-faqs .faq-q:focus-visible {
outline: 2px dashed rgba(0, 0, 0, 0.35);
outline-offset: 2px;
}
section.service-apply .service-apply__image img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
.stacked-block {
--stack-indent: 1.5rem;
}
.stacked-block__body {
--stack-line-h: initial !important;
position: relative;
padding-left: 0;
}
.stacked-block__body:before {
content: none;
}
.stacked-block--compact .stacked-block__body {
padding-left: 0;
}
.stacked-block__content {
color: inherit;
}
.stacked-block__actions {
margin-top: 1rem;
}
.single-projetos {
padding: 0 !important;
--stack-indent: 1.5rem;
}
.single-projetos .services-card {
border-radius: var(--radius);
background-color: rgba(255, 255, 255, 0.38);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), to(rgba(255, 255, 255, 0.3)));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 100%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.single-projetos .services-term-services li {
margin: 0.6rem 0;
}
.single-projetos .services-term-services a.service-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
.single-projetos .services-term-services a.service-link:hover {
border-bottom-color: rgba(0, 0, 0, 0.35);
}
.single-projetos-featured {
padding: 0;
}
.single-projetos-featured .single-featured-image {
position: relative;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.single-projetos-featured .single-featured-image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* The same background as "Mais projetos" (section.home-work), so the image,
the info card and the next section read as one surface.
--project-overlap is the distance that the info card moves up onto the
image from 1200px (see .project-hero .project-info). */
.project-hero {
position: relative;
padding: 0;
background: var(--surface-2);
}
@media (min-width: 1200px) {
.project-hero {
--project-overlap: calc(var(--space-20) + var(--space-6));
}
}
/* The image shows at its full height. A short image gets a minimum height,
cropped with object-fit, so that it shows below the nav bar. The nav bar
ends at 96px at each width (top: 25px plus its height).
- Below 1200px: 192px, so 96px of the image shows below the nav bar.
- From 1200px: the overlap plus 112px (216px), so the card starts 16px
below the nav bar. A 3:1 image is 393px high at 1200px, so it is not
cropped there. */
.project-hero .project-hero__img {
display: block;
width: 100%;
height: auto;
min-height: calc(var(--space-20) + var(--space-16) + var(--space-12));
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1200px) {
.project-hero .project-hero__img {
min-height: calc(var(--space-16) + var(--space-12) + var(--project-overlap));
}
}
.project-facts {
position: absolute;
left: 3vw;
bottom: 4vh;
z-index: 3;
width: 520px;
width: clamp(280px, 36vw, 520px);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius);
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.project-facts__inner {
padding: 1.5rem 1.75rem;
}
.project-facts__list {
margin: 0;
padding: 0;
}
.project-fact {
display: grid;
grid-template-columns: 1fr;
gap: 0.25rem;
padding: 0.35rem 0;
}
.project-fact dt {
font-weight: 500;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #999;
}
.project-fact dd {
margin: 0;
color: #555;
}
@media (min-width: 768px) {
.project-fact {
grid-template-columns: 180px 1fr;
}
}
.project-info-card,
.site-footer .footer-prr {
position: relative;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.48);
background-color: rgba(255, 255, 255, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0.45)));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 100%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
background-clip: padding-box;
overflow: hidden;
}
.project-info-card:before,
.site-footer .footer-prr:before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 100%;
pointer-events: none;
background: radial-gradient(120% 80% at 10% -20%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(120% 80% at 90% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
}
/* The card is its own stacking context, and its glass highlight (:before)
sits at the back of it. So the highlight paints on the card background but
below the text. The footer badge has no highlight (see .footer-prr::before). */
.project-info-card {
isolation: isolate;
padding: 1.75rem;
}
.project-info-card:before {
z-index: -1;
}
@media (min-width: 1200px) {
.project-info-card {
padding: 2.25rem 2.75rem;
}
}
.project-info-card .project-services-title {
font-weight: 800;
}
.project-info-card h1 {
font-size: var(--text-h4);
line-height: var(--leading-heading);
}
/* The breadcrumb in the card is one line at each width, so the title is
always at the same distance from the card top. The current item is the
Projeto title, which the h1 below repeats, so it is cut with an ellipsis. */
.project-info-card .breadcrumb__list {
flex-wrap: nowrap;
}
.project-info-card .breadcrumb__item {
flex-shrink: 0;
white-space: nowrap;
}
.project-info-card .breadcrumb__item[aria-current="page"] {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* The card follows the image in the normal flow, in the Bootstrap container.
- Below 1200px: the card is below the image, with a gap. It does not
cover the image.
- From 1200px: the card moves up by --project-overlap (104px). Then the
bottom edge of the image falls in the first line of the title: the
breadcrumb and that line are on the image, and the next title line, the
description, the facts and the Serviços are below it. The card border
and top padding (37px) and the breadcrumb (36px) end at 73px. The first
title line is 35px high. */
.project-hero .project-info {
margin-top: var(--space-6);
}
@media (min-width: 1200px) {
.project-hero .project-info {
margin-top: calc(-1 * var(--project-overlap));
}
}
/* With no featured image the card has nothing to overlap, so it does not
move up. It clears the nav bar with the standard nav offset (see
.u-nav-offset). */
.project-hero--no-image .project-info {
margin-top: 0;
}
.services-hero-card {
position: relative;
display: block;
width: 100%;
border-radius: var(--radius);
overflow: hidden;
background: #222 center/cover no-repeat;
background-image: var(--bg);
min-height: 360px;
}
@media (min-width: 992px) {
.services-hero-card {
min-height: max(70vh, 550px);
}
}
.services-hero-card__overlay {
position: absolute;
inset: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(25%, rgba(0, 0, 0, 0.2)), color-stop(65%, rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.85)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.6) 65%, rgba(0, 0, 0, 0.85) 100%);
}
.services-hero-card__content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2rem;
color: #fff;
}
@media only screen and (max-width: 36em) {
.services-hero-card__content {
padding: 1.5rem;
}
}
.services-hero-card h2 {
color: #fff;
font-weight: 700;
font-size: clamp(1.25rem, 2.5vw, 2rem);
line-height: 1.2;
}
.services-hero-card .text-muted {
color: rgba(255, 255, 255, 0.8) !important;
}
.services-hero {
min-height: 65vh;
min-height: 65dvh;
position: relative;
--hero-dots-bottom: 8vh;
overflow: visible;
}
.services-hero .home-hero__overlay {
min-height: 65vh;
min-height: 65dvh;
}
.services-hero .home-hero__overlay_cnt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding-top: 110px; /* clear fixed navbar (top:25px + ~70px height + buffer) */
}
.services-hero .home-hero__overlay_cnt > .container {
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
-webkit-transform: none;
transform: none;
width: 100%;
margin-bottom: var(--hero-dots-bottom);
}
.services-hero__title {
color: #fff;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.0;
margin: 0;
}
.services-hero .home-hero-txt {
z-index: 6;
color: #fff;
}
.services-hero .home-hero-txt h1.services-hero__title {
display: block;
color: #fff !important;
line-height: 1.1;
font-size: 54px;
font-size: 3.375rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media only screen and (max-width: 75em) {
.services-hero .home-hero-txt h1.services-hero__title {
font-size: 42px;
font-size: 2.625rem;
}
}
@media only screen and (max-width: 61.938em) {
.services-hero .home-hero-txt h1.services-hero__title {
font-size: 34px;
font-size: 2.125rem;
}
}
@media only screen and (max-width: 48em) {
.services-hero .home-hero-txt h1.services-hero__title {
font-size: 28px;
font-size: 1.75rem;
}
}
@media only screen and (max-width: 36em) {
.services-hero .home-hero-txt h1.services-hero__title {
font-size: 24px;
font-size: 1.5rem;
}
}
.services-hero .home-hero-img {
width: 100%;
height: 100%;
overflow: hidden;
}
.services-hero .home-hero__overlay_cnt > .container {
position: relative;
}
.services-hero__logo-peek {
position: absolute;
right: 0;
bottom: calc(-1 * (var(--hero-dots-bottom) + 25px));
width: 50px;
height: 50px;
color: rgba(255, 255, 255, 0.35);
z-index: 3;
pointer-events: none;
}
.services-hero__logo-peek svg {
display: block;
width: 100%;
height: 100%;
}
.services-slider-controls {
position: relative;
margin-top: 1rem;
}
.services-slider-controls .arrows {
pointer-events: auto;
}
.services-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.9);
position: relative;
cursor: pointer;
padding: 0;
}
.services-arrow:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 2px;
}
.services-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
border: solid rgba(13, 16, 19, 0.85);
border-width: 0 3px 3px 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.services-next::before {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.services-prev::before {
-webkit-transform: translate(-50%, -50%) rotate(135deg);
transform: translate(-50%, -50%) rotate(135deg);
}
.services-arrow:hover {
background: #fff;
}
.bim-benefits img.benefit-icon {
width: 48px;
height: 48px;
display: inline-block;
}
/* Bootstrap Icons (picked via the `icon_name` select) render as a font glyph,
so they take their size from font-size and colour from the accent token. */
.bim-benefits i.benefit-icon {
display: inline-block;
font-size: 48px;
line-height: 1;
color: var(--color-accent);
}
/* Benefits + Software share one card treatment: white, hairline, centered.
The card shell keeps no padding and no margin, so the .card-body rule below is
the only source of these cards' inner spacing.
Two rules set that spacing before. The shared .glass-card added 3rem 2rem, and
the card-body rule added 2rem more. The total was 80px above and below the text.
The shared .glass-card also added a 1rem margin above and below. The cards fill
the height of their row, so the margin made the row 2rem taller than the cards,
and each card kept that 2rem as empty space below its text.
The g-4 gutter on the row keeps the gap between the rows.
The shared .glass-card is not changed, so the other pages that use it keep their
spacing. The .bim-benefits class is on the BIM page (page-bim.php) and on the
contact page (page-contacto.php). Both grids get this treatment. */
.bim-benefits .glass-card,
.bim-software__cards .glass-card {
padding: 0;
margin: 0;
background: var(--surface-1);
border: var(--hairline);
-webkit-box-shadow: none;
box-shadow: none;
color: var(--color-ink);
-webkit-transition: var(--transition);
transition: var(--transition);
-webkit-transition-property: -webkit-transform, border-color, box-shadow;
transition-property: transform, border-color, box-shadow;
}
.bim-benefits .glass-card:hover,
.bim-software__cards .glass-card:hover {
border-color: var(--color-accent);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
-webkit-box-shadow: var(--shadow-lift);
box-shadow: var(--shadow-lift);
}
.bim-benefits .glass-card .card-body,
.bim-software__cards .glass-card .card-body {
padding: var(--space-8);
text-align: center;
}
.bim-benefits .glass-card h3,
.bim-software__cards .glass-card h3 {
color: var(--color-ink);
font-weight: var(--weight-bold);
font-size: 1.25rem;
margin-bottom: var(--space-2);
}
/* Icon-less cards (no icon/logo uploaded) get an accent dash so the title has
an anchor. :first-child means it auto-hides once an icon/logo is present. */
.bim-benefits .glass-card .card-body > h3:first-child::before,
.bim-software__cards .glass-card .card-body > h3:first-child::before {
content: "";
display: block;
width: 32px;
height: 3px;
margin: 0 auto var(--space-3);
background: var(--color-accent);
border-radius: var(--radius-pill);
}
.bim-benefits .glass-card .text-muted,
.bim-software__cards .glass-card .text-muted {
color: var(--color-muted) !important;
}
.bim-services {
position: relative;
z-index: 0;
color: #e9ecef;
padding: 12rem 0;
}
.bim-services h2 {
color: #fff;
}
.bim-services .text-muted {
color: rgba(255, 255, 255, 0.78) !important;
}
.bim-services .services-term-services {
margin-left: 0;
padding-left: 0;
}
.bim-services .services-term-services li {
position: relative;
padding-left: 1rem;
}
.bim-services .services-term-services li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 2px;
height: 1.2em;
background: rgba(255, 255, 255, 0.75);
border-radius: 2px;
}
section.home-work,
section.bim-projects {
background: var(--surface-2);
}
.single-bim-center .entry-content ul {
margin: 1.25rem 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.single-bim-center .entry-content ol {
margin: 1.25rem 0;
padding: 0;
list-style: decimal inside;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.single-bim-center .entry-content li {
padding: 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.single-bim-center .entry-content ul:not(.list-group) > li {
position: relative;
padding-left: 1.5rem;
}
.single-bim-center .entry-content ul:not(.list-group) > li::before {
content: "";
position: absolute;
left: 0;
top: 1.05rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
}
.single-bim-center .entry-content li ul, .single-bim-center .entry-content li ol {
border-top: 0;
margin-top: 0.5rem;
}
.single-bim-center .entry-content li li {
padding-top: 0.5rem;
}
.single-bim-center .entry-content ul:not(.list-group) li li::before {
opacity: 0.6;
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
.single-bim-center .bim-box {
position: relative;
margin-top: 2.5rem;
border-radius: var(--radius);
border: 1px solid rgba(0, 0, 0, 0.06);
background: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.single-bim-center .bim-box .card-body {
padding: 1.25rem 1.5rem !important;
}
.single-bim-center .bim-box h2 {
margin: 0 0 1rem;
font-size: 1.5rem;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}
.single-bim-center .bim-box .list-group {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.single-bim-center .bim-box .list-group-item {
border: 0;
background: transparent;
padding: 0.9rem 1rem;
}
.single-bim-center .bim-box .list-group-item + .list-group-item {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.single-bim-center .bim-box .list-group-item:nth-child(odd) {
background: #fff;
}
.single-bim-center .bim-box .list-group-item:nth-child(even) {
background: #f6f7f9;
}
.single-bim-center .bim-box .list-group-item small {
display: inline-block;
color: #555;
background: #f0f1f3;
border-radius: 9999px;
padding: 0.25rem 0.65rem;
line-height: 1.2;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.single-bim-center .bim-box .list-group-item .btn {
margin-left: 1rem;
}
/* Utility: dark (Tinta) background. The class name is old. The Tinta
gradient is in "Polish 1: dark sections". */
.bg-blue-dark {
position: relative;
z-index: 0;
color: color-mix(in srgb, var(--surface-1) 90%, transparent);
}
.bg-blue-dark h1, .bg-blue-dark h2, .bg-blue-dark h3, .bg-blue-dark h4, .bg-blue-dark h5, .bg-blue-dark h6 {
color: var(--surface-1);
}
.bg-blue-dark .text-muted {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Secondary on a dark section: white fill and Petróleo text, as the
primary on the CTA. */
.bg-blue-dark .btn.light {
background: var(--surface-1);
color: var(--color-primary);
}
.bg-blue-dark .btn.light:hover {
background: var(--accent-soft);
}
/* Modifier: Light Theme for BIM Services (single-servicos Onde se aplica) */
.bim-services.bim-services-light {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--accent-soft) 100%) !important;
color: var(--color-slate);
border-top: 1px solid rgba(0,0,0,0.05);
}
.bim-services.bim-services-light h2 {
color: var(--color-ink);
}
.bim-services.bim-services-light .text-muted {
color: var(--color-muted) !important;
}
.bim-services.bim-services-light::before {
opacity: 0.02;
}
/* ===== Metodologia / Fluxo — numbered stepper (01–05) ===== */
.bim-stepper {
padding: var(--section-pad) 0;
}
/* Vertical timeline: full-width rows (badge left, content right) connected by a
rail down the left edge. Gives each step the whole column instead of a fifth
of it, so steps read wide and roomy rather than as narrow vertical slivers. */
.bim-stepper__track {
list-style: none;
/* As wide as a step: the badge column plus the 62ch description. A wider track
leaves empty space on the right, and the steps then sit left of the centred heading. */
max-width: calc(2.9rem + var(--space-6) + 62ch);
margin: 0 auto;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
counter-reset: bim-step;
}
.bim-stepper__step {
position: relative;
padding: 0 0 var(--space-10) calc(2.9rem + var(--space-6));
text-align: left;
}
.bim-stepper__step:last-child {
padding-bottom: 0;
}
/* Continuous rail linking each badge down to the next */
.bim-stepper__step:not(:last-child)::after {
content: "";
position: absolute;
top: 2.9rem;
bottom: -0.4rem;
left: 1.45rem;
width: 2px;
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
background: var(--color-accent);
opacity: 0.25;
}
.bim-stepper__num {
position: absolute;
top: 0;
left: 0;
z-index: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 2.9rem;
height: 2.9rem;
border-radius: var(--radius-circle);
background: var(--color-accent);
font-weight: var(--weight-bold);
font-size: 1.05rem;
line-height: 1;
color: #fff;
}
.bim-stepper__title {
font-size: 1.25rem;
font-weight: var(--weight-bold);
color: var(--color-ink);
margin-bottom: 0.4rem;
padding-top: 0.5rem; /* vertically centre first line against the badge */
}
.bim-stepper__desc {
color: var(--color-muted);
margin-bottom: 0;
font-size: 1rem;
line-height: 1.65;
max-width: 62ch;
}
/* Optional image on the right of the steps. It has the cut corner and the
4:5 shape of the home "Sobre" photo. */
.bim-stepper__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
border-radius: var(--radius-cut);
object-fit: cover;
}
/* Under the steps on small screens, a lower shape keeps the image short. */
@media (max-width: 991.98px) {
.bim-stepper__img {
aspect-ratio: 4 / 3;
}
}
@media (max-width: 575.98px) {
.bim-stepper__step {
padding: 0 0 var(--space-8) calc(2.5rem + var(--space-4));
}
.bim-stepper__step:last-child {
padding-bottom: 0;
}
.bim-stepper__num {
width: 2.5rem;
height: 2.5rem;
font-size: 0.95rem;
}
.bim-stepper__step:not(:last-child)::after {
top: 2.5rem;
left: 1.25rem;
}
}
/* ===== Software + Níveis de Detalhe (LOD) ===== */
.bim-software {
padding: var(--section-pad) 0;
}
.bim-software__logo {
max-width: 140px;
max-height: 56px;
width: auto;
height: auto;
display: inline-block;
}
/* Bootstrap Icon picked via the `logo_name` select renders as a font glyph in
the accent colour, sized from font-size rather than the logo box above. */
i.bim-software__logo--icon {
max-width: none;
max-height: none;
font-size: 48px;
line-height: 1;
color: var(--color-accent);
}
/* Card treatment shared with .bim-benefits (see above) */
.bim-lod__intro {
color: var(--color-muted);
line-height: 1.6;
margin-bottom: 0;
}
.lod-cards {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 1.5rem;
}
.lod-cards__card {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0px;
min-width: 0;
position: relative;
padding: 1.75rem 1.5rem;
background: var(--surface-1);
border: var(--hairline);
border-radius: var(--radius);
}
.lod-cards__level {
display: inline-block;
font-weight: var(--weight-bold);
font-size: 1.25rem;
line-height: 1;
color: var(--color-accent);
margin-bottom: 0.75rem;
}
.lod-cards__desc {
color: var(--color-muted);
margin-bottom: 0;
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 991.98px) {
.lod-cards {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.lod-cards__card {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
}
/* ================= Visualização BIM (static text + image promo) ================= */
.bim-viz {
position: relative;
z-index: 0;
padding: var(--section-pad) 0;
color: rgba(255, 255, 255, 0.82);
}
.bim-viz__title {
font-weight: var(--weight-bold);
margin-bottom: 1.25rem;
color: #fff;
}
.bim-viz__body {
color: rgba(255, 255, 255, 0.78);
line-height: 1.7;
}
.bim-viz__img {
-webkit-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.bim-viz__body p:last-child {
margin-bottom: 0;
}
.bim-viz__media {
text-align: center;
}
.bim-viz__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 991.98px) {
.bim-viz__media {
margin-top: 1.5rem;
}
}
/* ===== BIM page — section rhythm (alternating surfaces separate the sections) ===== */
.bim-content, /* Vantagens / benefits */
.bim-software { /* Software + LOD */
background: var(--surface-2);
}
/* (intro, metodologia, FAQ stay on --surface-1; Visualização is the dark Tinta band;
Projetos stays on --surface-2 — see section.bim-projects above) */
/* The BIM section titles are set in "BIM section header" at the end of this file. */
.bim-lod__intro {
text-align: center;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.home-work .work-card-img img {
transition: none;
}
/* Show WOW elements at once, with no entrance animation. */
.wow,
.animated,
.fadeInUp,
.fadeInLeft,
.fadeInRight {
opacity: 1 !important;
transform: none !important;
animation: none !important;
visibility: visible !important;
}
}
/* ---- Motion: WOW timing ---- */
/* Default entrance duration. Templates do not set data-wow-duration. */
.wow {
animation-duration: 0.6s;
}
/* ---- Polish 1: buttons ---- */
/* Three roles. Primary is a Petróleo fill. Secondary is an outline. Tertiary
is a text link with an arrow. Surface tokens change on dark sections (see
"Polish 1: dark sections"), so one rule set works on white and on Tinta.
The tokens (--on-surface-*, --arrow-16) are in the main :root block. */
/* Primary: .btn.blue, .btn-blue, .btn.btn-primary, .btn.orange-17 and
.btn-orange-17 keep the Petróleo fill from the base rules. The arrow icons
inside a button move 3px on hover. */
.btn > svg {
transition: transform var(--transition);
}
.btn:hover > svg {
transform: translateX(3px);
}
/* Focus ring for every button role: a solid accent outline with a 2px gap,
so it does not merge with a Petróleo fill. The accent is Petróleo on light
surfaces (5.38:1 on white, 5.02:1 on --surface-2) and Petróleo claro in the
dark sections (4.62:1 on Tinta). */
.btn.blue:focus-visible, .btn-blue:focus-visible, .btn.btn-primary:focus-visible,
.btn.orange-17:focus-visible, .btn-orange-17:focus-visible,
.cta .btn.blue:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Secondary: .btn.light, .btn.white, .btn.orange, .btn.clear and their
dashed aliases. A white fill is not visible on white, so the fill is off
and a tinted border shows the shape. */
.btn.light,
.btn.white, .btn-white,
.btn.orange, .btn-orange,
.btn.clear, .btn-clear {
color: var(--on-surface-strong);
background: transparent;
border: 1px solid var(--on-surface-line);
box-shadow: none;
}
.btn.light:hover,
.btn.white:hover, .btn-white:hover,
.btn.orange:hover, .btn-orange:hover,
.btn.clear:hover, .btn-clear:hover {
background: var(--on-surface-wash);
border-color: var(--on-surface-strong);
box-shadow: none;
}
.btn.light:focus-visible,
.btn.white:focus-visible, .btn-white:focus-visible,
.btn.orange:focus-visible, .btn-orange:focus-visible,
.btn.clear:focus-visible, .btn-clear:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Inside a photo the white fill stays, because a transparent button has no
contrast there. */
.home-hero .btn.light,
.project-hero .btn.light {
background: var(--surface-1);
color: var(--color-primary);
}
.home-hero .btn.light:hover,
.project-hero .btn.light:hover {
background: var(--surface-1);
border-color: var(--color-primary);
}
/* Primary on a dark section: white fill and Petróleo text. It is the
brightest item in the block. */
.cta .btn.blue {
background: var(--surface-1);
color: var(--color-primary);
box-shadow: none;
}
.cta .btn.blue:hover {
background: var(--accent-soft);
box-shadow: none;
}
/* Tertiary: the action of a section header row, and "Ler mais" in the About
block. No box. The arrow comes from CSS, so the arrow icons that some
templates add inside the button are hidden to avoid a double arrow. */
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn,
.home-about .stacked-block__actions .btn {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--on-surface-strong);
font-weight: var(--weight-bold);
gap: var(--space-2);
}
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn:hover,
.home-about .stacked-block__actions .btn:hover {
background: none;
box-shadow: none;
color: var(--on-surface-strong);
}
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn:active,
.home-about .stacked-block__actions .btn:active {
transform: none;
box-shadow: none;
}
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn:focus-visible,
.home-about .stacked-block__actions .btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: var(--radius-sm);
box-shadow: none;
}
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn > svg,
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn > span[aria-hidden="true"],
.home-about .stacked-block__actions .btn > svg {
display: none;
}
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn::after,
.home-about .stacked-block__actions .btn::after {
content: "";
content: "" / "";
flex: 0 0 16px;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: var(--arrow-16) no-repeat center / contain;
mask: var(--arrow-16) no-repeat center / contain;
transition: transform var(--transition);
}
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child .btn:hover::after,
.home-about .stacked-block__actions .btn:hover::after {
transform: translateX(3px);
}
/* ---- Polish 1: dark sections ---- */
/* The dark-section token set. It is declared once, here, for every dark
block: the Tinta blocks below, the Serviço description (.bg-blue-dark), the
inner hero and the BIM Visualização band. The light values are in :root.
The accent tokens change to Petróleo claro here, so accents inside a dark
section show Petróleo claro and accents on a light surface show Petróleo.
--btn-ring is declared again so that it reads the dark accent.
Keep this list in step with the "Five dark blocks" background rule below.
This list also has .inner-hero.home-hero, which keeps its photo background. */
.home-servicos,
.bim-services:not(.bim-services-light),
.cta,
section.bg-blue-dark,
.inner-hero.home-hero,
.breadcrumb-bar--dark,
.page-template-page-bim .bim-viz {
--on-surface-strong: var(--surface-1);
--on-surface-line: color-mix(in srgb, var(--surface-1) 35%, transparent);
--on-surface-wash: color-mix(in srgb, var(--surface-1) 8%, transparent);
--lead-color: color-mix(in srgb, var(--surface-1) 72%, transparent);
--color-accent: var(--color-petroleo-claro);
--color-accent-text: var(--color-petroleo-claro);
--eyebrow-color: var(--color-petroleo-claro);
--btn-ring: color-mix(in srgb, var(--color-petroleo-claro) 40%, transparent);
}
/* Five dark blocks: home services (.home-servicos),
the Sobre valores block (.bim-services, not the light variant), the CTA, the
Serviço description (.bg-blue-dark) and the BIM Visualização band (.bim-viz).
The logo watermark comes from the shared :before rule, except on the
Serviço description (see "Polish 13"). The footer stays
--footer-bg. Keep this list in step with the dark-token list above.
section.bg-blue-dark (0,1,1) must beat section.home-work (0,1,1, earlier in
the file), because the Serviço description carries both classes. */
.home-servicos,
.bim-services:not(.bim-services-light),
.cta,
section.bg-blue-dark,
.page-template-page-bim .bim-viz {
color: var(--surface-1);
background: linear-gradient(180deg, var(--dark-900), var(--dark-800));
background:
radial-gradient(120% 140% at 80% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 55%),
linear-gradient(180deg, var(--dark-900), var(--dark-800));
}
/* The CTA card becomes a plain dark panel (--dark-800) with a top hairline, so the CTA and
the footer read as two blocks. */
.cta .cta-card {
background: var(--dark-800);
border: 0;
border-top: 1px solid color-mix(in srgb, var(--surface-1) 12%, transparent);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* ---- Polish 1: section header ---- */
/* Eyebrow, title, lead and action row. The template prints the eyebrow word
in a
before the title, through the shp-spike
text domain, so it can be translated. The inner hero eyebrow
(.inner-hero__eyebrow) uses the same rule.
Card titles carry .m-0 and are not section titles. Hero titles and the BIM
page section titles are not in this list. The light values of --lead-color
and --eyebrow-color are in the main :root block. */
:is(.home-about, .home-servicos, .home-work, .home-testemunhos, .cta, .bim-services, .service-faqs:not(.bim-faq), .service-nav, .page-template-page-bim :is(.bim-intro-section, .bim-content, .bim-stepper, .bim-software, .bim-viz, .bim-faq)) h2:not(.m-0) {
font-size: var(--text-section-title);
}
.section-eyebrow,
.inner-hero .inner-hero__eyebrow {
display: block;
margin: 0 0 var(--space-3);
padding-left: calc(24px + var(--space-2));
background: linear-gradient(var(--eyebrow-color), var(--eyebrow-color)) no-repeat left center / 24px 2px;
color: var(--eyebrow-color);
font-family: var(--font-body);
font-size: var(--text-eyebrow);
font-weight: var(--weight-heading);
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Lead: the first paragraph under a section title. */
:is(.home-about, .home-servicos, .home-work, .cta, .bim-services) .stacked-block > h2 + .stacked-block__body > .stacked-block__content > p:first-child {
max-width: 52ch;
color: var(--lead-color);
font-size: 1.125rem;
line-height: 1.6;
}
/* Action row: the action is centred on the title block. The bottom margin
of the title's last line would push the centre down, so on desktop it
moves to the row, which keeps the gap above the content the same. */
:is(.home-servicos, .home-work, .service-nav) > .container > .row:first-child {
align-items: center !important;
}
@media (min-width: 992px) {
:is(.home-servicos, .home-work, .service-nav):not(.single-servicos) > .container > .row:first-child > :first-child :is(h2, p):last-child {
margin-bottom: 0;
}
:is(.home-servicos, .home-work, .service-nav):not(.single-servicos) > .container > .row:first-child:has(> :first-child h2:last-child) {
padding-bottom: calc(var(--text-h2) * 0.7);
}
:is(.home-servicos, .home-work, .service-nav):not(.single-servicos) > .container > .row:first-child:has(> :first-child p:last-child) {
padding-bottom: var(--space-4);
}
}
/* Serviço description: the action sits on the first line of the text. */
.single-servicos > .container > .row:first-child {
align-items: first baseline !important;
}
/* ---- Polish 1: footer band ---- */
/* The PRR band is a hairline row. The funding logos sit on a small white
plate, because no light variant of the image is in the media library. The
plate is as wide as the image. The certification badge follows the logos.
The copyright and Privacidade go to the right. */
.site-footer {
background: var(--footer-bg);
/* The footer is Tinta, so its accent is Petróleo claro (4.62:1 on Tinta),
as in the dark sections. */
--color-accent: var(--color-petroleo-claro);
}
/* Focus ring on the footer links: the same 2px solid accent outline with a
2px gap as on .btn. */
.site-footer a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.site-footer .footer-prr {
width: fit-content;
margin: 0 auto;
padding: var(--space-2) 0;
border: 0;
border-radius: var(--radius-sm);
background: var(--surface-1);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-footer .footer-prr::before {
content: none;
}
.site-footer .footer-inner > .row:last-child {
--bs-gutter-x: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-6);
border-top: 1px solid color-mix(in srgb, var(--surface-1) 12%, transparent);
}
.site-footer .footer-meta,
.site-footer .footer-meta a {
color: color-mix(in srgb, var(--surface-1) 72%, transparent) !important;
}
@media (min-width: 768px) {
.site-footer .footer-inner > .row:last-child {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
}
/* The wrappers drop out of the layout, so the logos, the badge, the
copyright and Privacidade are items of one row. */
.site-footer .footer-inner > .row:last-child > .col-12,
.site-footer .footer-inner > .row:last-child .footer-meta {
display: contents;
}
.site-footer .footer-meta > div {
flex: 0 0 auto;
width: auto;
padding: 0;
margin: 0;
}
.site-footer .footer-prr {
margin: 0;
}
.site-footer .footer-prr__img {
max-height: 40px;
}
.site-footer .footer-meta > div:nth-child(2) {
order: 1;
}
.site-footer .footer-meta > div:nth-child(1) {
order: 2;
margin-left: auto;
}
.site-footer .footer-meta > div:nth-child(3) {
order: 3;
}
/* The badge has inline size limits from the template, so !important is
needed. */
.site-footer .footer-meta img {
max-width: 56px !important;
max-height: 56px !important;
}
}
/* ---- Polish 4: cut corner for every card ---- */
/* The cut corner is the signature of the site. The top-right corner is square.
The other three corners use --radius. One token, --radius-cut, holds the value.
The class .card-cut applies it to any new card. The list below applies it to
the cards that exist now.
The rule uses border-radius, not clip-path. A clip-path cuts off the box-shadow,
the hover lift shadow and the focus outline. Border-radius keeps all three, and
it clips the image inside the card with overflow: hidden.
A new card needs only .card-cut, or border-radius: var(--radius-cut).
--radius-cut and --shadow-lift are in the main :root block. */
.card-cut,
.work-card,
.testemunho-card,
.glass-card,
.glass-card-sm,
.cta .cta-card,
.services-hero-card,
.single-bim-center .bim-box,
.single-projetos .services-card,
.project-facts,
.project-info-card,
.lod-cards__card {
border-radius: var(--radius-cut);
}
/* ---- Polish 4: project card ---- */
/* The chip sits over the image. The meta row holds icon items. On hover the
card rises 3px with a soft shadow, and an arrow slides in next to the title. */
.home-work .work-card {
transition: transform var(--transition), box-shadow var(--transition);
}
.home-work .work-card:hover,
.home-work .work-card:focus-within {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.home-work .work-card:has(a:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.home-work .work-card-chip {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: var(--text-caption);
font-weight: var(--weight-heading);
letter-spacing: 0.06em;
line-height: 1.4;
text-transform: uppercase;
color: var(--color-primary);
background: color-mix(in srgb, var(--surface-1) 90%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
pointer-events: none;
}
.home-work .work-card-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.home-work .work-card-arrow {
flex: 0 0 auto;
color: var(--color-accent);
opacity: 0;
transform: translateX(-8px);
transition: opacity var(--transition), transform var(--transition);
}
.home-work .work-card:hover .work-card-arrow,
.home-work .work-card:focus-within .work-card-arrow {
opacity: 1;
transform: translateX(0);
}
.home-work .work-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-size: var(--text-small);
font-weight: var(--weight-medium);
color: var(--color-muted);
}
.home-work .work-card-meta__item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.home-work .work-card-meta__item svg {
flex: 0 0 12px;
width: 12px;
height: 12px;
color: var(--color-accent);
}
/* No lift and no slide for visitors who prefer reduced motion. The card and the
arrow still change state, but they do not move. */
@media (prefers-reduced-motion: reduce) {
.home-work .work-card:hover,
.home-work .work-card:focus-within {
transform: none;
}
.home-work .work-card-arrow {
transform: none;
transition: none;
}
}
/* ---- Polish 2: services accordion ---- */
/* Home services block. A row is a category. No index numbers show: the rows
have no counter and no number element. */
/* The tokens are set on the section, not on :root, so they read the dark
value of --on-surface-strong. */
.home-servicos {
--on-surface-hairline: color-mix(in srgb, var(--on-surface-strong) 16%, transparent);
--on-surface-open: color-mix(in srgb, var(--on-surface-strong) 6%, transparent);
}
.home-servicos #services-cats .services-cat-item {
position: relative;
margin-bottom: 0;
padding: var(--space-6);
border: 0;
border-top: 1px solid var(--on-surface-hairline);
border-radius: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.home-servicos #services-cats .services-cat-item:last-child {
border-bottom: 1px solid var(--on-surface-hairline);
}
/* The open row: 3px accent bar on the left and a 6% wash. */
.home-servicos #services-cats .services-cat-item.active {
background: var(--on-surface-open);
}
.home-servicos #services-cats .services-cat-item.active::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: var(--color-accent);
}
/* Category heading. The button inherits the heading font. */
.home-servicos #services-cats .services-cat-title,
.home-servicos #services-cats .services-cat-btn {
font-family: var(--font-heading);
font-size: var(--text-list-title);
font-weight: 600;
line-height: 1.3;
}
.home-servicos #services-cats .services-cat-btn:focus-visible {
outline: 2px solid var(--eyebrow-color);
outline-offset: 4px;
border-radius: var(--radius-xs);
}
/* ---- Polish 2: two-column arrow list ---- */
/* Reusable list. Add class .arrow-list to a ul, or add a selector to this
group. One column below 992px, two columns at 992px and above. Each item
has an accent arrow prefix. The arrow is a CSS mask with empty content, so
assistive technology does not read it. The bullet lists in the Serviço
description use the same rule (see "Polish 13"). */
.arrow-list,
.home-servicos .services-term-services,
section.single-servicos .stacked-block__content > ul {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2) var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
@media only screen and (min-width: 992px) {
.arrow-list,
.home-servicos .services-term-services,
section.single-servicos .stacked-block__content > ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.arrow-list > li,
.home-servicos .services-term-services li,
section.single-servicos .stacked-block__content > ul > li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0;
padding: 0;
}
.arrow-list > li::before,
.home-servicos .services-term-services li::before,
section.single-servicos .stacked-block__content > ul > li::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: var(--space-1);
background: var(--color-accent);
-webkit-mask: var(--arrow-16) no-repeat center / contain;
mask: var(--arrow-16) no-repeat center / contain;
}
/* Services links: no dashed underline. */
.home-servicos .services-term-services a.service-link {
border-bottom: 0;
padding-bottom: 0;
color: var(--on-surface-strong);
text-decoration: none;
transition: color var(--transition);
}
.home-servicos .services-term-services a.service-link:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.home-servicos .services-term-services a.service-link:focus-visible {
outline: 2px solid var(--eyebrow-color);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* A category page with a single "Ler mais" link is a div, not a list. */
.home-servicos .services-term-services--single {
display: block;
}
.home-servicos .services-term-services--single a.service-link::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: var(--space-2);
vertical-align: -2px;
background: var(--color-accent);
-webkit-mask: var(--arrow-16) no-repeat center / contain;
mask: var(--arrow-16) no-repeat center / contain;
}
/* ---- Polish 6: home About ---- */
/* Front page only. The Sobre page uses the same .home-about markup and stays as
it is. The block uses the width and the gutter of .container, so the image
starts at the same left edge as the other home sections. The image is
contained: 4:5, cut corner, cover crop. The fact chip is CSS content on the
image wrapper. It uses "/ ''" alternative text, so assistive technology skips
it. The plain first line is the fallback for old browsers. */
.page-template-page-frontpage .home-about .container-fluid {
--about-max: 100%;
width: 100%;
max-width: var(--about-max);
margin-right: auto;
margin-left: auto;
padding-right: var(--space-3);
padding-left: var(--space-3);
}
@media (min-width: 576px) {
.page-template-page-frontpage .home-about .container-fluid {
--about-max: 540px;
}
}
@media (min-width: 768px) {
.page-template-page-frontpage .home-about .container-fluid {
--about-max: 720px;
}
}
@media (min-width: 992px) {
.page-template-page-frontpage .home-about .container-fluid {
--about-max: 960px;
}
}
@media (min-width: 1200px) {
.page-template-page-frontpage .home-about .container-fluid {
--about-max: 1140px;
}
}
@media (min-width: 1400px) {
.page-template-page-frontpage .home-about .container-fluid {
--about-max: 1320px;
}
}
.page-template-page-frontpage .home-about .row {
align-items: center;
}
.page-template-page-frontpage .home-about .home-about-img {
position: relative;
height: auto;
max-width: 32rem;
}
.page-template-page-frontpage .home-about .home-about-img img {
aspect-ratio: 4 / 5;
height: auto;
border-radius: var(--radius-cut);
object-fit: cover;
}
.page-template-page-frontpage .home-about .home-about-img::after {
content: "2020 · Fundada em Baião";
content: "2020 · Fundada em Baião" / "";
position: absolute;
right: var(--space-4);
bottom: var(--space-6);
z-index: 2;
max-width: calc(100% - var(--space-8));
padding: var(--space-3) var(--space-4);
border: var(--hairline);
border-radius: var(--radius-sm);
background: var(--surface-1);
box-shadow: var(--shadow-lift);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--text-small);
font-weight: var(--weight-heading);
line-height: 1.2;
white-space: nowrap;
pointer-events: none;
}
.page-template-page-frontpage .home-about .home-about-txt {
padding-top: var(--space-8);
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
@media (min-width: 992px) {
.page-template-page-frontpage .home-about .home-about-txt {
padding-top: 0;
padding-left: var(--space-8);
}
}
/* ---- Polish 5: home hero ---- */
/* The home hero and the Modelação BIM hero (.bim-hero), which copies its
layout. The inner heroes (.home-hero--65, .services-hero) keep their own
rules. */
/* Logo mark. It stays on desktop, smaller, with a tighter gap below. */
.home-hero__brand-inner {
margin-bottom: var(--space-4);
}
.home-hero__brand-img {
max-width: 96px;
}
@media (min-width: 992px) {
.home-hero__brand-inner {
margin-bottom: var(--space-6);
}
.home-hero__brand-img {
max-width: 140px;
}
}
/* Title size. It is 32px at 400px and 40px at 992px. The BIM hero title is
the page H1, with the look of the home hero H2. */
.home-hero:not(.home-hero--65, .services-hero) .home-hero-txt h2,
.bim-hero .home-hero-txt h1 {
font-size: var(--text-hero-title);
}
.bim-hero .home-hero-txt h1 {
letter-spacing: -0.03em;
line-height: 1;
}
/* Small screens. The text block is in the flow, so a short screen makes the
hero taller and nothing is cut. The space at the top clears the nav. The
space at the bottom keeps the buttons above the progress bar. */
.home-hero:not(.home-hero--65, .services-hero) {
--hero-dots-bottom: var(--space-8);
}
.home-hero:not(.home-hero--65, .services-hero) .home-hero__overlay_cnt {
position: relative;
display: flex;
align-items: flex-end;
min-height: 100vh;
min-height: 100dvh;
}
.home-hero:not(.home-hero--65, .services-hero) .home-hero__overlay_cnt > .container {
position: static;
padding-top: calc(var(--space-20) + var(--space-8));
padding-bottom: var(--space-20);
}
/* Desktop. The text block starts at a fixed share of the hero. The offset
is the height of the logo mark (140px x 0.8), its gap and half of the two
title lines, so the title centre is at about 55% of the hero height. The
overlay starts later, so the photo shows on the right. */
@media (min-width: 992px) {
.home-hero:not(.home-hero--65, .services-hero) .home-hero__overlay_cnt {
position: absolute;
display: block;
min-height: 0;
}
.home-hero:not(.home-hero--65, .services-hero) .home-hero__overlay_cnt > .container {
position: absolute;
top: calc(55% - 194px);
bottom: auto;
padding-top: 0;
padding-bottom: 0;
}
/* The BIM hero has no logo mark. Its text block sits near the bottom of
the hero, where the white overlay is strongest, so the text stays
readable on a busy photo. */
.bim-hero.home-hero .home-hero__overlay_cnt > .container {
top: auto;
bottom: 14%;
}
.home-hero:not(.home-hero--65, .services-hero) .home-hero__overlay {
background: radial-gradient(
120% 120% at 100% 0%,
transparent 0,
transparent 30%,
color-mix(in srgb, var(--surface-1) 15%, transparent) 50%,
color-mix(in srgb, var(--surface-1) 45%, transparent) 62%,
color-mix(in srgb, var(--surface-1) 85%, transparent) 82%
);
}
}
/* The two buttons wrap together with the same gap. A wrapped second button
does not keep the side margin of the base rule. */
.home-hero:not(.home-hero--65, .services-hero) .stacked-block__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.home-hero:not(.home-hero--65, .services-hero) .stacked-block__actions .btn + .btn {
margin-left: 0;
}
/* Progress bar. Slick makes one dot for each slide. Each dot is a thin
segment. The current segment is accent. The button is 20px high so it is
easy to press, and the segment is drawn by the ::after rule. */
.home-hero .home-hero__controls > .container {
position: relative;
justify-content: flex-end;
}
.home-hero .home-hero__controls .slick-dots,
.home-hero .home-hero__controls .hero-dots {
gap: var(--space-3);
}
.home-hero .home-hero__controls .slick-dots li,
.home-hero .home-hero__controls .hero-dots li {
width: auto;
height: auto;
}
.home-hero .home-hero__controls .slick-dots button,
.home-hero .home-hero__controls .hero-dots button {
position: relative;
width: var(--space-8);
height: var(--space-5);
border: 0;
border-radius: 0;
background: transparent;
}
.home-hero .home-hero__controls .slick-dots button::after,
.home-hero .home-hero__controls .hero-dots button::after {
content: "";
position: absolute;
top: calc(50% - 1.5px);
right: 0;
left: 0;
height: 3px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-primary) 40%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface-1) 40%, transparent);
transition: background-color var(--transition);
}
.home-hero .home-hero__controls .slick-dots .slick-active button,
.home-hero .home-hero__controls .hero-dots .slick-active button {
background: transparent;
}
.home-hero .home-hero__controls .slick-dots .slick-active button::after,
.home-hero .home-hero__controls .hero-dots .slick-active button::after {
background: var(--color-accent);
}
.home-hero .home-hero__controls .slick-dots button:focus-visible,
.home-hero .home-hero__controls .hero-dots button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
@media (max-width: 991.98px) {
.home-hero .home-hero__controls > .container {
justify-content: flex-end;
}
}
/* Scroll hint. A 1px line at the bottom left. A short bright piece moves
down the line. The content is an empty string with an empty alternative
text, so assistive technology does not read it. */
.home-hero .home-hero__controls > .container::before {
content: "";
content: "" / "";
position: absolute;
bottom: 0;
left: var(--space-3);
width: 1px;
height: var(--space-12);
background:
linear-gradient(var(--color-primary), var(--color-primary)) no-repeat 0 -100% / 100% 40%,
color-mix(in srgb, var(--color-primary) 25%, transparent);
animation: home-hero-hint 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes home-hero-hint {
from {
background-position: 0 -100%, 0 0;
}
to {
background-position: 0 200%, 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.home-hero .home-hero__controls > .container::before {
animation: none;
background-position: 0 100%, 0 0;
}
}
/* ---- Inner hero and breadcrumb (item 9) ---- */
/* One hero for Sobre, Serviços, Serviço, Categoria, Contacto, Projeto and the
Modelação BIM page. Every one of these heroes carries .inner-hero. The front
page hero does not carry it, so none of these rules reach the front page.
The old white radial overlay is replaced by a Tinta gradient that is dark on
the text side and light on the photo side. The hero is 54vh high and grows
when its content is taller. The Tinta background shows when a page has no
photo. */
.inner-hero.home-hero {
display: flex;
flex-direction: column;
min-height: 54vh;
min-height: 54dvh;
background-color: var(--dark-900);
color: var(--surface-1);
}
.inner-hero .home-hero-img-el {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.inner-hero .home-hero__overlay {
display: flex;
flex: 1 1 auto;
min-height: 54vh;
min-height: 54dvh;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--dark-900) 92%, transparent) 0%,
color-mix(in srgb, var(--dark-900) 55%, transparent) 55%,
color-mix(in srgb, var(--dark-900) 25%, transparent) 100%
);
}
/* The text block is in the normal flow, so a long lead makes the hero taller
and never runs under the fixed navigation. */
.inner-hero .home-hero__overlay_cnt {
position: relative;
top: auto;
left: auto;
display: flex;
align-items: flex-end;
width: 100%;
height: auto;
padding-top: calc(var(--space-20) + var(--space-8));
padding-bottom: var(--space-12);
}
.inner-hero .home-hero__overlay_cnt > .container {
position: relative;
bottom: auto;
margin-bottom: 0;
}
/* The logo mark sits at the right edge of the container, level with the
bottom of the H1. The Serviços, Serviço and Categoria heroes print no lead,
so the bottom of the container is the bottom of the H1. */
.inner-hero .services-hero__logo-peek {
bottom: 0;
}
/* Below 992px the H1 column is full width. The space on the right (the 50px
logo mark and a gap) keeps a long title clear of the logo mark. */
@media (max-width: 991.98px) {
.inner-hero.services-hero .home-hero-txt {
padding-right: var(--space-16);
}
}
.inner-hero.home-hero .home-hero-txt h1 {
display: block;
margin: 0;
color: var(--surface-1) !important;
font-size: var(--text-page-title);
line-height: var(--leading-heading);
text-shadow: none;
}
/* Eyebrow: the topic word of the page. The template gives it to the shared
inner-hero part, which prints it in .inner-hero__eyebrow. The look is the
section eyebrow rule in "Polish 1: section header". */
/* Lead: the hero text the page already carries. */
.inner-hero .inner-hero__lead {
max-width: 52ch;
margin-top: var(--space-4);
color: var(--lead-color);
font-size: 1.125rem;
line-height: 1.6;
}
.inner-hero .inner-hero__lead > :last-child {
margin-bottom: 0;
}
/* Breadcrumb. On the Projetos listing, the BIM Center item and the Projeto it
sits above the H1. Under an inner hero it sits in .breadcrumb-bar at the top
of the next section. The separator is a
pseudo-element with an empty alternative text, so assistive technology
skips it. The current page is plain text with aria-current. */
.breadcrumb {
display: block;
margin: 0 0 var(--space-4);
padding: 0;
font-size: var(--text-small);
line-height: 1.4;
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumb__item {
color: var(--surface-1);
font-weight: var(--weight-medium);
}
.breadcrumb__item + .breadcrumb__item::before {
content: "/";
content: "/" / "";
margin-right: var(--space-2);
color: color-mix(in srgb, var(--surface-1) 50%, transparent);
font-weight: var(--weight-body);
}
.breadcrumb__link {
color: var(--lead-color);
font-weight: var(--weight-body);
text-decoration: none;
transition: color var(--transition);
}
.breadcrumb__link:hover {
color: var(--surface-1);
text-decoration: underline;
}
.breadcrumb__link:focus-visible {
outline: 2px solid var(--surface-1);
outline-offset: 4px;
border-radius: var(--radius-xs);
color: var(--surface-1);
}
/* The Projetos listing, the BIM Center item and the Projeto have no dark
hero. Their breadcrumb sits on a light surface above the H1, so it uses the
light-surface text colours. The breadcrumb bar under an inner hero uses
them too, except over a dark section (.breadcrumb-bar--dark). There it keeps
the default white text. */
.page-projetos .breadcrumb__item,
.single-bim-center .breadcrumb__item,
.single-projetos .breadcrumb__item,
.breadcrumb-bar:not(.breadcrumb-bar--dark) .breadcrumb__item {
color: var(--color-ink);
}
.page-projetos .breadcrumb__item + .breadcrumb__item::before,
.single-bim-center .breadcrumb__item + .breadcrumb__item::before,
.single-projetos .breadcrumb__item + .breadcrumb__item::before,
.breadcrumb-bar:not(.breadcrumb-bar--dark) .breadcrumb__item + .breadcrumb__item::before {
color: var(--color-muted);
}
.page-projetos .breadcrumb__link,
.single-bim-center .breadcrumb__link,
.single-projetos .breadcrumb__link,
.breadcrumb-bar:not(.breadcrumb-bar--dark) .breadcrumb__link {
color: var(--color-slate);
}
.page-projetos .breadcrumb__link:hover,
.single-bim-center .breadcrumb__link:hover,
.single-projetos .breadcrumb__link:hover,
.breadcrumb-bar:not(.breadcrumb-bar--dark) .breadcrumb__link:hover {
color: var(--color-primary);
}
.page-projetos .breadcrumb__link:focus-visible,
.single-bim-center .breadcrumb__link:focus-visible,
.single-projetos .breadcrumb__link:focus-visible,
.breadcrumb-bar:not(.breadcrumb-bar--dark) .breadcrumb__link:focus-visible {
outline-color: var(--color-accent);
color: var(--color-primary);
}
/* Breadcrumb bar under an inner hero. The bar has no height, so the next
section keeps its layout. The breadcrumb sits 10px below the top of that
section, in its top padding, and lines up with the content container. */
.breadcrumb-bar {
position: relative;
z-index: 2;
height: 0;
}
.breadcrumb-bar__inner {
position: absolute;
top: 10px;
right: 0;
left: 0;
}
.breadcrumb-bar .breadcrumb {
margin: 0;
}
/* On a BIM Center item the breadcrumb and the H1 sit above the password form,
so the form no longer fills and centres in the whole viewport. */
.single-bim-center .protected-full {
min-height: 0;
padding: var(--space-8) 0 var(--space-16);
}
@media (max-width: 991.98px) {
.inner-hero .home-hero__overlay {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--dark-900) 92%, transparent) 0%,
color-mix(in srgb, var(--dark-900) 65%, transparent) 100%
);
}
}
/* ---- Nav: Contacto pill and underline active state ---- */
/* The desktop menu is ul.menu inside .nav-menu-desktop. It shows above
1200px only. The mobile overlay menu has its own rules in Polish 16. */
/* Active item: ink text and a 2px accent underline, not bright blue. */
.nav .nav-menu-desktop .menu li.current-menu-item a,
.nav .nav-menu-desktop .menu li.current-menu-ancestor a,
.nav .nav-menu-desktop .menu li.current-menu-parent a,
.nav .nav-menu-desktop .menu li.current_page_item a,
.nav .nav-menu-desktop .menu li.current_page_parent a,
.nav .nav-menu-desktop .menu li.current_page_ancestor a {
color: var(--color-ink);
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
/* Keyboard focus: a clear ring on every desktop menu link. */
.nav .nav-menu-desktop .menu li a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
@media (min-width: 1200px) {
/* Last menu item: small primary pill. */
.nav .nav-menu-desktop .menu > li:last-child > a {
display: inline-block;
padding: var(--space-1) var(--space-5);
border-radius: var(--radius-pill);
background-color: var(--color-primary);
color: var(--surface-1);
text-decoration: none;
transition: background-color var(--transition), color var(--transition);
}
.nav .nav-menu-desktop .menu > li:last-child > a:hover {
background-color: var(--color-primary-hover);
color: var(--surface-1);
}
.nav .nav-menu-desktop .menu > li:last-child > a:focus-visible {
border-radius: var(--radius-pill);
outline-offset: 3px;
}
/* Contacto is the current page: the fill stays. A 2px accent ring inside
the pill shows the state. */
.nav .nav-menu-desktop .menu > li.current-menu-item:last-child > a,
.nav .nav-menu-desktop .menu > li.current_page_item:last-child > a {
color: var(--surface-1);
text-decoration: none;
box-shadow: inset 0 0 0 2px var(--color-accent);
}
}
/* ---- Item 14: Serviços and Categoria card slider ---- */
/* The Serviços listing (.page-servicos) and each Categoria (.tax-categorias)
use the same section after the inner hero: the lead (the page content or
the term description), the card slider, then the arrows below the cards.
The block sits on a light surface, so the dark inner hero and the dark CTA
are not next to it (owner decision, #68). The cards keep their markup. */
.services-listing {
position: relative;
padding: var(--section-pad) 0;
background: var(--surface-1);
}
.services-listing__lead {
max-width: 52ch;
margin-bottom: var(--space-16);
color: var(--lead-color);
font-size: 1.125rem;
line-height: 1.6;
}
.services-listing__lead > :last-child {
margin-bottom: 0;
}
.services-listing .services-slider {
margin-top: 0;
}
.services-listing .services-slider-controls {
margin: var(--space-8) 0 0;
}
@media (max-width: 767.98px) {
.services-listing__lead {
margin-bottom: var(--space-12);
font-size: 1rem;
}
.services-listing .services-slider-controls {
margin-top: var(--space-6);
}
}
/* On the light surface the arrows take the secondary button role: no fill,
a tinted ring and a Petróleo chevron. */
.services-listing .services-arrow {
width: var(--space-12);
height: var(--space-12);
background: transparent;
box-shadow: inset 0 0 0 1px var(--on-surface-line);
transition: background-color var(--transition), box-shadow var(--transition);
}
.services-listing .services-arrow::before {
border-color: var(--on-surface-strong);
}
.services-listing .services-arrow:hover {
background: var(--on-surface-wash);
box-shadow: inset 0 0 0 1px var(--on-surface-strong);
}
.services-listing .services-arrow:focus-visible {
outline: 2px solid var(--eyebrow-color);
outline-offset: 3px;
}
/* Cards: a fixed height at 992px and above. The photo is a cover
background, so it fills the card at any size. */
@media (min-width: 992px) {
.services-listing .services-hero-card {
height: 480px;
min-height: 0;
}
}
/* "Ver categoria": a white fill with Petróleo text. It is the secondary button
on a photo. The card is the link, so the hover and focus of the card
drive the button. */
.services-listing .services-hero-card .btn.blue {
background: var(--surface-1);
color: var(--color-primary);
box-shadow: none;
transition: background-color var(--transition);
}
.services-listing .services-hero-card:hover .btn.blue,
.services-listing .services-hero-card:focus-visible .btn.blue {
background: var(--accent-soft);
box-shadow: none;
}
.services-listing .services-hero-card:focus-visible {
outline: 2px solid var(--eyebrow-color);
outline-offset: 3px;
}
/* ---- Polish 16: mobile menu ---- */
/* The overlay shows below 1200px. Links and contacts start at the left.
The links stack from the top. The contact block sits at the bottom.
The slide-in transition and the link fade-in stay as they are. */
.nav #menuToggle .over-menu {
justify-content: flex-start;
align-items: stretch;
padding: var(--space-20) var(--space-6) var(--space-8);
overflow-y: auto;
}
.nav #menuToggle .over-menu ul {
align-items: stretch;
gap: var(--space-2);
text-align: left;
}
.nav #menuToggle .over-menu ul li {
padding: var(--space-2) 0;
font-family: var(--font-heading);
font-size: var(--text-menu-overlay);
font-weight: 600;
line-height: 1.2;
}
.nav #menuToggle .over-menu ul li a {
display: block;
color: var(--color-ink);
}
.nav #menuToggle .over-menu ul li a:hover {
color: var(--color-accent);
}
/* Active item: ink text and a 2px accent underline, the same as the
desktop nav. */
.nav #menuToggle .over-menu ul li.current-menu-item a,
.nav #menuToggle .over-menu ul li.current-menu-ancestor a,
.nav #menuToggle .over-menu ul li.current-menu-parent a,
.nav #menuToggle .over-menu ul li.current_page_item a,
.nav #menuToggle .over-menu ul li.current_page_parent a,
.nav #menuToggle .over-menu ul li.current_page_ancestor a {
color: var(--color-ink);
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.nav #menuToggle .over-menu ul li a:focus-visible,
.nav #menuToggle .over-menu .over-menu__link:focus-visible,
.nav #menuToggle .over-menu .social-btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.nav #menuToggle .over-menu .over-menu__contact {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: auto;
padding-top: var(--space-8);
}
.nav #menuToggle .over-menu .over-menu__links {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.nav #menuToggle .over-menu .over-menu__link {
color: var(--color-ink);
font-size: 1rem;
font-weight: 500;
overflow-wrap: anywhere;
}
.nav #menuToggle .over-menu .over-menu__social {
display: flex;
gap: var(--space-3);
}
.nav #menuToggle .over-menu .social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-circle);
background: var(--accent-soft);
color: var(--color-primary);
transition: background-color var(--transition);
}
.nav #menuToggle .over-menu .social-btn:hover {
background: color-mix(in srgb, var(--color-accent) 20%, transparent);
color: var(--color-primary);
}
/* The closed overlay is hidden, so its links leave the Tab order and the
accessibility tree (#54). When it closes, visibility changes only after
the 0.5s slide-out, so the slide stays visible. When it opens,
visibility changes at once. */
.nav #menuToggle .over-menu {
visibility: hidden;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s ease, visibility 0s linear 0.5s;
}
.nav #menuToggle input:checked ~ .over-menu {
visibility: visible;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.35s ease, visibility 0s linear 0s;
}
/* With reduced motion there is no slide-out, so the closed overlay is hidden
at once. Without this, the 0.5s delay keeps the hidden links in the Tab
order. */
@media (prefers-reduced-motion: reduce) {
.nav #menuToggle .over-menu {
transition-delay: 0s;
}
}
/* The toggle is a transparent checkbox over the bars. When it has keyboard
focus (also after Escape closes the overlay), the bars show a ring. */
.nav #menuToggle input:focus-visible ~ span {
box-shadow: 0 0 0 2px var(--color-accent);
}
/* ---- Polish 10: contact cards ---- */
/* Each card is one row: an icon tile and a text column. The row is
left-aligned. The card is as tall as its text, because the columns in the
template do not stretch. The cut corner comes from the shared .glass-card
rule in Polish 4. The scope is .contact-card-eq, so the BIM page cards that
share .bim-benefits keep their own look. */
.bim-benefits .contact-card-eq .card-body {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-6);
text-align: left;
}
.contact-card-eq .contact-card__icon {
display: inline-flex;
flex: 0 0 44px;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--color-primary);
}
.contact-card-eq .contact-card__content {
min-width: 0;
overflow-wrap: anywhere;
}
.bim-benefits .contact-card-eq h3 {
margin: 0 0 var(--space-1);
color: var(--color-muted);
font-family: var(--font-body);
font-size: var(--text-eyebrow);
font-weight: var(--weight-heading);
line-height: var(--leading-body);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.contact-card-eq li {
margin: 0;
}
.contact-card-eq li + li {
margin-top: var(--space-3);
}
.contact-card-eq .contact-link,
.contact-card-eq .entry-content,
.contact-card-eq .entry-content p {
margin: 0;
color: var(--color-ink);
font-size: 1rem;
font-weight: var(--weight-medium);
line-height: var(--leading-body);
}
.contact-card-eq li strong {
font-weight: var(--weight-heading);
}
.contact-card-eq .small,
.contact-card-eq .small.text-muted {
margin-top: 0 !important;
color: var(--color-muted) !important;
font-size: var(--text-small);
font-weight: var(--weight-body);
}
/* The empty-state line shows when a card has no value. */
.contact-card-eq p.text-muted {
margin: 0;
color: var(--color-muted) !important;
font-size: var(--text-small);
font-weight: var(--weight-body);
}
.contact-card-eq .contact-link:hover {
color: var(--color-primary);
}
.contact-card-eq .contact-link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ---- Polish 12: Sobre valores tiles ---- */
/* The block holds one list of names. The list becomes a grid of tiles.
The grid has 1 column below 768px, 2 columns from 768px and 4 columns from
1200px. It works for any number of tiles. A tile has a name and a short
accent rule above it. It has no number and no icon. The list bar of the
old layout is replaced by the rule. The template gives the list and the
items the utility classes .m-0 and .py-2. Those carry !important, so the
margin and padding of the grid need it too. */
.sobre-certificacoes .row > .col-lg-6:first-child {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
.sobre-certificacoes .stacked-block__content {
max-width: 52ch;
}
.sobre-certificacoes .services-term-services {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin: var(--space-10) 0 0 !important;
}
.bim-services.sobre-certificacoes .services-term-services > li {
position: relative;
width: auto;
max-width: none;
margin: 0 !important;
padding: var(--space-6) !important;
border: 1px solid color-mix(in srgb, var(--surface-1) 12%, transparent);
border-radius: var(--radius-cut);
background: var(--dark-800);
}
.bim-services.sobre-certificacoes .services-term-services > li::before {
content: "";
content: "" / "";
position: static;
display: block;
width: 24px;
height: 2px;
margin-bottom: var(--space-4);
border-radius: 0;
background: var(--color-accent);
}
.sobre-certificacoes .services-term-services h3 {
color: var(--surface-1);
font-family: var(--font-heading);
font-size: var(--text-card-title);
font-weight: var(--weight-heading);
line-height: 1.3;
}
@media only screen and (min-width: 768px) {
.sobre-certificacoes .services-term-services {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 1200px) {
.sobre-certificacoes .services-term-services {
grid-template-columns: repeat(4, 1fr);
}
}
/* ---- Polish 15: Projetos filter and count ---- */
/* The title and the filter tools share one header row. The tools sit at the
right of the title on the same text baseline. They wrap under the title on
small screens. The select keeps its native behaviour. Only the box is drawn
here: a pill with a chevron. The chevron is a mask on the ::after of
.project-filter__control. The mask gives the shape and the background colour
is the primary token, so no raw colour is in the URI. The ::after does not
take pointer events, so a click reaches the select. */
.page-projetos .project-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
}
.page-projetos .project-head__title {
margin: 0;
}
.project-head__tools {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-3) var(--space-6);
}
.project-filter {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2) var(--space-3);
margin: 0;
}
.project-filter__label {
margin: 0;
color: var(--color-muted);
font-size: 0.875rem;
font-weight: var(--weight-medium);
}
.project-filter__select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 160px;
padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
border: 1px solid var(--on-surface-line);
border-radius: var(--radius-pill);
background-color: var(--surface-1);
color: var(--color-primary);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: var(--weight-medium);
line-height: 1.5;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.project-filter__control {
position: relative;
display: inline-block;
}
.project-filter__control::after {
content: "";
position: absolute;
top: 50%;
right: var(--space-4);
width: 16px;
height: 16px;
margin-top: -8px;
background-color: var(--color-primary);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 16px 16px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 16px 16px no-repeat;
pointer-events: none;
}
.project-filter__select:hover {
border-color: var(--color-primary);
}
.project-filter__select:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-color: var(--color-accent);
box-shadow: 0 0 0 4px var(--btn-ring);
}
.project-filter__clear {
color: var(--color-accent);
font-size: 0.875rem;
text-decoration: underline;
}
.project-count {
margin: 0;
color: var(--color-slate);
font-size: 0.875rem;
font-weight: var(--weight-medium);
white-space: nowrap;
}
/* The card grid gap is 32px from 992px. The row keeps the Bootstrap g-4 gap
below that width. */
@media only screen and (min-width: 992px) {
.page-projetos .project-grid {
--bs-gutter-x: var(--space-8);
--bs-gutter-y: var(--space-8);
}
}
/* ---- BIM section header ---- */
/* The BIM page section titles use the section header of Polish 1: eyebrow,
40px title, lead. The titles are left-aligned and carry no rule under them.
The section classes join the lists in "Polish 1: section header", scoped to
the BIM page template, because .bim-content is also on the Contacto page.
The template prints the eyebrow word of each section: its topic.
The cards and the stepper keep their own rules. */
/* The intro is the centred text block of the Sobre "Objetivos" section. The
eyebrow line is a left background, so the eyebrow is an inline block: it
then centres with the text, and the line stays next to the word. */
.page-template-page-bim .bim-intro .section-eyebrow {
display: inline-block;
}
/* The Visualização block is a dark band. Its eyebrow and lead take the
dark-section token set (see "Polish 1: dark sections"). */
.page-template-page-bim .bim-viz__body > p:first-child {
max-width: 52ch;
color: var(--lead-color);
font-size: 1.125rem;
line-height: 1.6;
}
/* The stepper track was centred under a centred title. It now starts at the
container edge, under the left-aligned title. The steps are not changed. */
.page-template-page-bim .bim-stepper__track {
margin-left: 0;
}
/* ---- Polish 13: Serviço description and FAQ cards ---- */
/* The description is the lead: 18px, 1.6 line height, 64ch wide. The block
is dark (Tinta). The colour is --lead-color, set on .bg-blue-dark (72%
white). The rule needs !important, because .bg-blue-dark .text-muted has it.
The bullet lists join the two-column arrow list rule in "Polish 2: two-column
arrow list". Here they only get vertical space. */
/* The description block has no logo watermark. The shared dark-section
::before rule draws it on the other dark blocks. */
section.single-servicos.bg-blue-dark::before {
content: none;
}
section.single-servicos .stacked-block__content {
max-width: 64ch;
color: var(--lead-color) !important;
font-size: 1.125rem;
line-height: 1.6;
}
section.single-servicos .stacked-block__content > ul {
margin: var(--space-4) 0;
}
section.single-servicos .stacked-block__content > :last-child {
margin-bottom: 0;
}
/* Each FAQ item is one white card with the cut corner. The question is the
summary. The plus/minus mark is a CSS background with empty content, so
assistive technology does not read it. The answer opens inside the same card
below a hairline. The open card gets a light accent border. The BIM page FAQ
uses the same markup and takes the same rules. */
section.service-faqs .faq-list {
display: grid;
gap: var(--space-2);
border-top: 0;
}
section.service-faqs .faq-item {
padding: 0 var(--space-5);
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
border-radius: var(--radius-cut);
background: var(--surface-1);
transition: border-color var(--transition);
}
section.service-faqs .faq-item[open] {
border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}
section.service-faqs .faq-q {
margin: 0 calc(var(--space-2) * -1);
padding: var(--space-4) var(--space-2);
border-radius: var(--radius-sm);
font-weight: var(--weight-medium);
}
section.service-faqs .faq-q::after {
content: "";
content: "" / "";
flex: 0 0 16px;
width: 16px;
height: 16px;
background:
linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 2px no-repeat,
linear-gradient(var(--color-accent), var(--color-accent)) center / 2px 100% no-repeat;
transform: none;
transition: background-size var(--transition);
}
section.service-faqs .faq-item[open] > .faq-q::after {
background-size: 100% 2px, 2px 0;
transform: none;
}
section.service-faqs .faq-q:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
section.service-faqs .faq-a {
padding: var(--space-3) 0 var(--space-4);
border-top: var(--hairline);
}
section.service-faqs .faq-a > :last-child {
margin-bottom: 0;
}
/* ---- Aviso de Cookies ---- */
/* template-parts/cookie-notice.php. A white card at the bottom of the screen.
It does not block the page: no overlay, no focus trap. On a phone it fills
the width at the bottom. From 576px it floats with a gutter and has the cut
corner of every card. Aceitar tudo and Rejeitar tudo have the same size:
Aceitar tudo is the primary (Petróleo) button and Rejeitar tudo is the
secondary (outline) button. */
.cookie-notice {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 40;
display: grid;
gap: var(--space-3);
max-height: 100vh;
overflow-y: auto;
padding: var(--space-5) var(--space-4);
padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
border-top: var(--hairline);
border-radius: 0;
background: var(--surface-1);
box-shadow: var(--shadow-lift);
color: var(--color-ink);
font-size: var(--text-small);
}
.cookie-notice[hidden] {
display: none;
}
.cookie-notice:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.cookie-notice__title {
margin: 0;
color: var(--color-primary);
font-size: var(--text-card-title);
}
.cookie-notice__text p {
margin: 0 0 var(--space-2);
}
.cookie-notice__text > :last-child {
margin-bottom: 0;
}
.cookie-notice__text a {
text-decoration: underline;
}
.cookie-notice__text a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* The switches, one for each optional service (ADR-0009). Each row has the
service name and its description on the left and the switch on the right.
The switch is a checkbox with role="switch": the browser look is off, the
track is the checkbox and the knob is its ::before. Off: a Cinza track (it
is a control border, so it needs 3:1; it has 5.30:1 on white). On: a
Petróleo track, with the knob at the right. */
.cookie-notice__services {
display: grid;
gap: var(--space-3);
min-width: 0;
margin: 0;
padding: var(--space-3) 0 0;
border: 0;
border-top: var(--hairline);
}
.cookie-switch {
display: grid;
grid-template-columns: 1fr auto;
column-gap: var(--space-4);
align-items: center;
}
.cookie-switch__label {
grid-column: 1;
grid-row: 1;
margin: 0;
color: var(--color-ink);
font-weight: 600;
cursor: pointer;
}
.cookie-switch__description {
grid-column: 1;
grid-row: 2;
margin: 0;
color: var(--color-slate);
}
.cookie-switch__input {
-webkit-appearance: none;
appearance: none;
position: relative;
grid-column: 2;
grid-row: 1 / span 2;
width: calc(var(--space-10) + var(--space-1));
height: var(--space-6);
margin: 0;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: var(--color-muted);
cursor: pointer;
transition: background-color var(--transition);
}
.cookie-switch__input::before {
content: "";
position: absolute;
top: 50%;
left: var(--space-1);
width: var(--space-4);
height: var(--space-4);
border-radius: var(--radius-circle);
background: var(--surface-1);
transform: translateY(-50%);
transition: transform var(--transition);
}
.cookie-switch__input:checked {
background: var(--color-primary);
}
.cookie-switch__input:checked::before {
transform: translate(calc(var(--space-4) + var(--space-1)), -50%);
}
.cookie-switch__input:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Aceitar tudo and Rejeitar tudo share the first row, with the same size.
Guardar escolha fills the second row. */
.cookie-notice__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-top: var(--space-1);
}
.cookie-notice__actions .btn {
width: 100%;
white-space: normal;
}
.cookie-notice__actions .btn + .btn {
margin-left: 0;
}
.cookie-notice__actions .cookie-notice__button--save {
grid-column: 1 / -1;
}
@media (prefers-reduced-motion: reduce) {
.cookie-switch__input,
.cookie-switch__input::before {
transition: none;
}
}
/* In a forced-colours mode the system colours replace the fills. The track
keeps its border (transparent becomes visible), and the knob takes the
text colour, so the on and off positions stay visible. */
@media (forced-colors: active) {
.cookie-switch__input::before {
background: CanvasText;
}
.cookie-switch__input:checked::before {
background: Highlight;
}
}
@media (min-width: 576px) {
.cookie-notice {
right: auto;
bottom: var(--space-6);
left: var(--space-6);
width: calc(100% - var(--space-12));
max-width: 26rem;
max-height: calc(100vh - var(--space-12));
padding: var(--space-6);
border: var(--hairline);
border-radius: var(--radius-cut);
}
}
/* ---- Contacto map ---- */
/* page-contacto.php. The map fills the full width of the section, edge to
edge, with no container and no padding. The height follows the viewport
width between a minimum for phones and a maximum for wide screens. The map,
the iframe or the placeholder fills the frame. */
.contact-map {
padding: 0;
}
.contact-map__frame {
position: relative;
width: 100%;
height: clamp(20rem, 40vw, 36rem);
}
.contact-map__frame > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.contact-map__frame > iframe {
border: 0;
}
/* ---- Contacto map placeholder ---- */
/* page-contacto.php. It fills the map frame until the map loads (ADR-0007):
the address, the message of Geral → Cookies and the "Mostrar mapa" button.
js/googlemaps.js removes it when the map loads. A light raised surface with
a hairline, so it reads as the place of the map and not as a card. */
.map-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
border: var(--hairline);
background: var(--surface-2);
color: var(--color-slate);
text-align: center;
}
.map-placeholder__address {
margin: 0;
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--text-card-title);
font-weight: 600;
}
.map-placeholder__text {
max-width: 32rem;
margin: 0;
font-size: var(--text-small);
}
.map-placeholder__button {
margin-top: var(--space-2);
}
.map-placeholder__button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}