.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
AUSTIN MARCENARIA · CSS COMPLETO
------------------------------------------------------------
Cole este arquivo INTEIRO em:
Elementor > menu hamburguer > Configurações do site >
CSS personalizado
Apague o que houver na caixa antes de colar.
Depois: Elementor > Ferramentas > Regenerar arquivos e dados.
============================================================ */
/* ############################################################
PARTE 1 · DESENHO DO SITE
############################################################ */
/* ============================================================
01 · TOKENS
============================================================ */
:root{
--au-branco:#FFFFFF;
--au-papel:#F0F0EF;
--au-tinta:#0C0C0C;
--au-grafite:#565656;
--au-cinza:#A6A6A6;
--au-linha:rgba(12,12,12,.13);
--au-linha-inv:rgba(255,255,255,.18);
/* Cabinet Grotesk nos títulos, Manrope no corpo, mono nos dados */
--au-display:"Cabinet Grotesk","Manrope","Helvetica Neue",Arial,sans-serif;
--au-corpo:"Manrope","Helvetica Neue",Arial,sans-serif;
--au-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
--au-pad:clamp(20px,5vw,88px);
--au-sec:clamp(100px,15vh,210px);
--au-ease:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
margin:0; background:var(--au-branco); color:var(--au-tinta);
font-family:var(--au-corpo); font-size:16px; line-height:1.6;
letter-spacing:-.011em; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.au-lock{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--au-tinta); color:var(--au-branco); }
:focus-visible{ outline:1px solid currentColor; outline-offset:6px; }
.au-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.au-pool,.au-dados{ display:none; }
.au-mono{ font-family:var(--au-mono); font-size:11px; font-weight:400; letter-spacing:.17em; text-transform:uppercase; line-height:1; }
.au-logo{ fill:currentColor; height:auto; }
/* ============================================================
02 · CURSOR
============================================================ */
.au-cursor{ position:fixed; top:0; left:0; z-index:900; pointer-events:none; mix-blend-mode:difference; }
.au-cursor-dot{ position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:#fff; }
.au-cursor-ring{
position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
border:1px solid rgba(255,255,255,.75); border-radius:50%;
display:grid; place-items:center;
transition:width .45s var(--au-ease), height .45s var(--au-ease), margin .45s var(--au-ease), background .45s var(--au-ease);
}
.au-cursor-label{
font-family:var(--au-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
color:#fff; opacity:0; transform:scale(.8); white-space:nowrap;
transition:opacity .35s var(--au-ease), transform .35s var(--au-ease);
}
.au-cursor.is-link .au-cursor-ring{ width:58px; height:58px; margin:-29px 0 0 -29px; background:rgba(255,255,255,.12); }
.au-cursor.is-big .au-cursor-ring{ width:104px; height:104px; margin:-52px 0 0 -52px; background:rgba(255,255,255,.14); }
.au-cursor.is-link .au-cursor-label,.au-cursor.is-big .au-cursor-label{ opacity:1; transform:scale(1); }
.au-cursor.is-link .au-cursor-dot,.au-cursor.is-big .au-cursor-dot{ opacity:0; }
.au-cursor.is-hidden{ opacity:0; }
@media (hover:none),(max-width:900px){ .au-cursor{ display:none; } }
/* ============================================================
03 · PROGRESSO E CABEÇALHO
============================================================ */
.au-progress{ position:fixed; top:0; left:0; z-index:210; width:100%; height:1px; background:var(--au-branco); transform:scaleX(0); transform-origin:left; }
.au-header{
position:fixed; top:0; left:0; right:0; z-index:200;
display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:20px var(--au-pad); color:var(--au-branco);
transition:color .55s var(--au-ease), transform .55s var(--au-ease);
}
.au-header.is-dark{ color:var(--au-tinta); }
.au-header.is-up{ transform:translateY(-105%); }
.au-header-logo{ width:clamp(96px,10.5vw,132px); }
.au-nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); }
/* Efeito de rolagem do menu.
A altura precisa acompanhar o tamanho da fonte, senão as maiúsculas
acentuadas da segunda cópia vazam por baixo da máscara. */
.au-roll{
position:relative; display:inline-block; overflow:hidden;
height:1.5em; line-height:1.5; vertical-align:bottom;
}
.au-roll-in{ display:block; transition:transform .55s var(--au-ease); }
.au-roll-in-b{ display:block; height:1.5em; line-height:1.5; }
.au-link:hover .au-roll-in{ transform:translateY(-100%); }
.au-cta{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border:1px solid currentColor; border-radius:999px; position:relative; overflow:hidden; }
.au-cta-bg{ position:absolute; inset:0; background:currentColor; transform:translateY(101%); transition:transform .55s var(--au-ease); }
.au-cta-tx{ position:relative; z-index:1; transition:color .45s var(--au-ease); }
.au-cta:hover .au-cta-bg{ transform:translateY(0); }
.au-cta:hover .au-cta-tx{ color:var(--au-tinta); }
.au-header.is-dark .au-cta:hover .au-cta-tx{ color:var(--au-branco); }
@media (max-width:900px){ .au-nav-hide{ display:none; } }
/* ============================================================
04 · ABERTURA
============================================================ */
.au-hero{ position:relative; height:100vh; height:100svh; overflow:hidden; background:#000; }
.au-hero-media{ position:absolute; inset:0; overflow:hidden; }
.au-hero-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); filter:grayscale(1) contrast(1.24) brightness(.44); }
.au-hero-veil{
position:absolute; inset:0;
background:
linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.88) 100%),
radial-gradient(130% 90% at 50% 40%,rgba(0,0,0,0) 18%,rgba(0,0,0,.58) 100%);
}
.au-hero-grao{
position:absolute; inset:0; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.au-hero-inner{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; justify-content:flex-end;
padding:0 var(--au-pad) clamp(34px,6vh,72px); color:var(--au-branco);
}
.au-hero-top{
position:absolute; top:0; left:var(--au-pad); right:var(--au-pad);
padding-top:clamp(96px,13vh,150px);
display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
color:rgba(255,255,255,.66);
}
.au-hero-titulo{
margin:0;
font-family:var(--au-display);
font-size:clamp(29px,5.2vw,86px); font-weight:800;
line-height:1.05; letter-spacing:-.018em; text-transform:uppercase;
word-spacing:.06em;
max-width:14ch;
}
.au-hero-base{
display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;
margin-top:clamp(26px,4.6vh,52px); padding-top:clamp(20px,3vh,32px);
border-top:1px solid rgba(255,255,255,.2);
}
.au-hero-meta{ display:flex; gap:clamp(20px,4vw,60px); flex-wrap:wrap; color:rgba(255,255,255,.7); }
.au-hero-side{ display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.66); }
.au-hero-tick{ display:block; width:1px; height:40px; background:rgba(255,255,255,.32); position:relative; overflow:hidden; }
.au-hero-tick::after{ content:""; position:absolute; left:0; top:-100%; width:1px; height:100%; background:#fff; animation:auTick 2.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes auTick{ 0%{ top:-100%; } 62%,100%{ top:100%; } }
/* ============================================================
05 · HISTÓRIA
============================================================ */
.au-sec-claro{ background:var(--au-branco); padding:var(--au-sec) var(--au-pad); position:relative; }
.au-eyebrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--au-cinza); margin-bottom:clamp(44px,8vh,104px); }
.au-eyebrow-line{ flex:1; min-width:30px; height:1px; background:var(--au-linha); }
.au-statement{
margin:0; max-width:19ch;
font-family:var(--au-display);
font-size:clamp(28px,5.4vw,80px); font-weight:800; line-height:1.1; letter-spacing:-.026em;
}
.au-statement-dim{ color:var(--au-cinza); }
.au-linha-mestra{ position:absolute; left:var(--au-pad); top:0; bottom:0; width:1px; background:var(--au-linha); transform:scaleY(0); transform-origin:top; }
.au-duas{ display:flex; gap:clamp(30px,5vw,90px); flex-wrap:wrap; margin-top:clamp(60px,10vh,130px); }
.au-col-texto{ flex:1 1 420px; }
.au-col-linha{ flex:1 1 320px; }
.au-p{ margin:0 0 20px; max-width:54ch; font-size:clamp(15px,1.05vw,17px); line-height:1.76; color:#2C2C2C; }
.au-p-fim{ margin-bottom:0; }
.au-marco{ display:flex; gap:22px; align-items:baseline; padding:22px 0; border-top:1px solid var(--au-linha); }
.au-marco-ano{ flex:0 0 70px; color:var(--au-tinta); font-weight:500; }
.au-marco-tx{ margin:0; font-size:14px; line-height:1.62; color:var(--au-grafite); }
.au-marco-fim{ border-bottom:1px solid var(--au-linha); }
/* ============================================================
06 · GRADE DE OBRAS
============================================================ */
.au-obras{ background:var(--au-branco); padding:var(--au-sec) var(--au-pad) clamp(60px,9vh,120px); }
.au-grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,34px); }
@media (max-width:1000px){ .au-grade{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .au-grade{ grid-template-columns:1fr; } }
.au-card{ display:block; position:relative; }
.au-card-fig{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--au-papel); }
.au-card-wrap{ position:absolute; inset:0; transition:inset .8s var(--au-ease); }
.au-card-img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(1) contrast(1.08); transform:scale(1.1);
transition:transform 1.1s var(--au-ease), filter .9s var(--au-ease);
}
/* [COR NO HOVER] apague este bloco para manter tudo em preto e branco */
.au-card:hover .au-card-img{ filter:grayscale(0) contrast(1); }
.au-card:hover .au-card-wrap{ inset:10px; }
.au-card:hover .au-card-img{ transform:scale(1); }
.au-card-mais{
position:absolute; right:14px; top:14px; z-index:3;
width:34px; height:34px; border-radius:50%;
border:1px solid rgba(255,255,255,.55); display:grid; place-items:center;
background:rgba(12,12,12,.28); opacity:0; transform:scale(.7) rotate(-45deg);
transition:opacity .55s var(--au-ease), transform .55s var(--au-ease);
}
.au-card-mais-h,.au-card-mais-v{ position:absolute; background:#fff; }
.au-card-mais-h{ width:11px; height:1px; }
.au-card-mais-v{ width:1px; height:11px; }
.au-card:hover .au-card-mais{ opacity:1; transform:scale(1) rotate(0deg); }
.au-card-tag{
position:absolute; left:0; right:0; bottom:0; z-index:3; padding:14px 16px;
display:flex; align-items:center; justify-content:space-between; gap:12px; color:#fff;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%);
opacity:0; transform:translateY(14px);
transition:opacity .6s var(--au-ease), transform .6s var(--au-ease);
}
.au-card:hover .au-card-tag{ opacity:1; transform:translateY(0); }
.au-card-pe{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-top:16px; border-top:1px solid var(--au-linha); margin-top:16px; }
.au-card-nome{ margin:0; font-family:var(--au-display); font-size:clamp(15px,1.2vw,19px); font-weight:700; line-height:1.12; letter-spacing:-.03em; text-transform:uppercase; }
.au-card-local{ margin:6px 0 0; color:var(--au-cinza); font-size:13px; }
.au-card-num{ color:var(--au-cinza); flex:0 0 auto; }
.au-obras-fim{
display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
margin-top:clamp(48px,8vh,96px); padding-top:clamp(28px,4vh,54px);
border-top:1px solid var(--au-linha); color:var(--au-cinza);
}
/* ============================================================
07 · PARCERIA
Mesma estrutura das outras seções: eyebrow, statement e
bloco de duas colunas. Só o fundo muda, para manter o ritmo.
============================================================ */
.au-sec-papel{ background:var(--au-papel); padding:var(--au-sec) var(--au-pad); position:relative; }
.au-parc-link{
display:inline-flex; align-items:center; justify-content:space-between;
gap:clamp(28px,4vw,70px); padding-bottom:14px;
position:relative; min-width:min(320px,84vw); color:var(--au-tinta);
}
.au-parc-link-linha{
position:absolute; left:0; right:0; bottom:0; height:1px;
background:var(--au-linha); transform-origin:right;
transition:background .6s var(--au-ease);
}
.au-parc-link:hover .au-parc-link-linha{ background:var(--au-tinta); }
.au-parc-link-seta{ transition:transform .55s var(--au-ease); }
.au-parc-link:hover .au-parc-link-seta{ transform:translateX(10px); }
.au-parc-nota{ margin:24px 0 0; color:var(--au-cinza); max-width:34ch; line-height:1.9; }
/* ============================================================
08 · POPUP DE OBRA
============================================================ */
.au-modal{ position:fixed; inset:0; z-index:800; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,44px); opacity:0; pointer-events:none; visibility:hidden; }
.au-modal.is-open{ opacity:1; pointer-events:auto; visibility:visible; }
.au-modal-fundo{ position:absolute; inset:0; background:rgba(0,0,0,.93); }
.au-modal-painel{ position:relative; z-index:2; width:min(1240px,100%); max-height:92vh; background:var(--au-tinta); color:var(--au-branco); display:flex; overflow:hidden; }
@media (max-width:900px){ .au-modal-painel{ flex-direction:column; max-height:94vh; overflow-y:auto; } }
.au-modal-info{ flex:0 0 clamp(240px,26%,340px); padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; gap:22px; border-right:1px solid var(--au-linha-inv); }
@media (max-width:900px){ .au-modal-info{ flex:none; border-right:0; border-bottom:1px solid var(--au-linha-inv); } }
.au-modal-nome{ margin:0; font-family:var(--au-display); font-size:clamp(19px,1.9vw,27px); font-weight:800; line-height:1.06; letter-spacing:-.036em; text-transform:uppercase; }
.au-modal-local{ margin:8px 0 0; color:var(--au-cinza); font-size:14px; }
.au-modal-texto{
margin:0; max-width:42ch;
font-size:14px; line-height:1.72;
color:rgba(255,255,255,.68);
}
.au-modal-ficha{ margin:0; padding:0; list-style:none; }
.au-modal-item{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--au-linha-inv); }
.au-modal-item-k{ color:rgba(255,255,255,.45); }
.au-modal-item-v{ text-align:right; color:rgba(255,255,255,.9); }
.au-modal-galeria{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.au-modal-palco{ position:relative; flex:1 1 auto; min-height:clamp(260px,52vh,600px); background:#000; overflow:hidden; }
.au-slide{ position:absolute; inset:0; opacity:0; }
.au-slide.is-on{ opacity:1; }
.au-slide-img{ width:100%; height:100%; object-fit:cover; }
.au-slide-video{ position:absolute; inset:0; display:grid; place-items:center; background:#000; }
.au-slide-video-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; filter:grayscale(1); }
.au-play{ position:relative; z-index:2; display:flex; align-items:center; gap:14px; padding:16px 26px; border:1px solid rgba(255,255,255,.5); border-radius:999px; color:#fff; background:rgba(0,0,0,.3); transition:background .5s var(--au-ease), border-color .5s var(--au-ease); }
.au-play:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.au-modal-barra{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(16px,2vw,26px); border-top:1px solid var(--au-linha-inv); }
.au-minis{ display:flex; gap:8px; overflow-x:auto; }
.au-mini{ flex:0 0 auto; width:58px; height:44px; overflow:hidden; opacity:.42; border:1px solid transparent; transition:opacity .4s var(--au-ease), border-color .4s var(--au-ease); }
.au-mini.is-on{ opacity:1; border-color:rgba(255,255,255,.75); }
.au-mini-img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.au-setas{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.au-seta{ width:38px; height:38px; border:1px solid var(--au-linha-inv); border-radius:50%; display:grid; place-items:center; color:#fff; transition:background .4s var(--au-ease), border-color .4s var(--au-ease); }
.au-seta:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }
.au-conta{ color:rgba(255,255,255,.5); flex:0 0 auto; }
.au-fechar{ position:absolute; top:14px; right:14px; z-index:5; width:42px; height:42px; border:1px solid var(--au-linha-inv); border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(12,12,12,.5); transition:background .4s var(--au-ease), transform .5s var(--au-ease); }
.au-fechar:hover{ background:rgba(255,255,255,.14); transform:rotate(90deg); }
/* ============================================================
09 · CONTATO
============================================================ */
.au-contato{ background:var(--au-tinta); color:var(--au-branco); padding:var(--au-sec) var(--au-pad); }
.au-contato .au-eyebrow{ color:rgba(255,255,255,.55); }
.au-contato .au-eyebrow-line{ background:var(--au-linha-inv); }
.au-contato-titulo{ margin:0 0 clamp(56px,9vh,116px); font-family:var(--au-display); font-size:clamp(29px,5.9vw,90px); font-weight:800; line-height:1.06; letter-spacing:-.024em; text-transform:uppercase; word-spacing:.05em; }
.au-contato-grid{ display:flex; gap:clamp(34px,6vw,100px); flex-wrap:wrap; }
.au-canais{ flex:1 1 380px; display:flex; flex-direction:column; }
.au-canal{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-top:1px solid var(--au-linha-inv); transition:padding-left .55s var(--au-ease); }
.au-canal-fim{ border-bottom:1px solid var(--au-linha-inv); }
.au-canal:hover{ padding-left:14px; }
.au-canal-nome{ font-size:clamp(17px,1.5vw,22px); font-weight:600; letter-spacing:-.025em; }
.au-canal-tag{ color:rgba(255,255,255,.5); }
.au-form{ flex:1 1 420px; }
.au-perfil{ display:flex; gap:10px; margin-bottom:36px; }
.au-perfil-btn{ padding:10px 18px; border:1px solid var(--au-linha-inv); border-radius:999px; transition:background .4s var(--au-ease), color .4s var(--au-ease), border-color .4s var(--au-ease); }
.au-perfil-btn.is-on{ background:var(--au-branco); color:var(--au-tinta); border-color:var(--au-branco); }
.au-campo{ position:relative; margin-bottom:26px; }
.au-input{ width:100%; padding:12px 0; border:0; border-radius:0; border-bottom:1px solid var(--au-linha-inv); background:transparent; color:var(--au-branco); font-family:var(--au-corpo); font-size:16px; resize:none; }
.au-input:focus{ outline:none; }
.au-label{ position:absolute; left:0; top:12px; pointer-events:none; color:rgba(255,255,255,.45); font-size:16px; transform-origin:left top; transition:transform .4s var(--au-ease), color .4s var(--au-ease); }
.au-input:focus + .au-label,.au-input.is-filled + .au-label{ transform:translateY(-22px) scale(.72); color:rgba(255,255,255,.6); }
.au-under{ position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--au-branco); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--au-ease); }
.au-input:focus ~ .au-under{ transform:scaleX(1); }
.au-enviar{ display:inline-flex; align-items:center; gap:14px; margin-top:8px; padding:16px 30px; border:1px solid var(--au-branco); border-radius:999px; position:relative; overflow:hidden; }
.au-enviar-bg{ position:absolute; inset:0; background:var(--au-branco); transform:translateY(101%); transition:transform .55s var(--au-ease); }
.au-enviar-tx{ position:relative; z-index:1; transition:color .45s var(--au-ease); }
.au-enviar:hover .au-enviar-bg{ transform:translateY(0); }
.au-enviar:hover .au-enviar-tx{ color:var(--au-tinta); }
.au-ok{ margin-top:20px; color:rgba(255,255,255,.55); opacity:0; transform:translateY(8px); transition:opacity .5s var(--au-ease), transform .5s var(--au-ease); }
.au-ok.is-on{ opacity:1; transform:translateY(0); }
.au-rodape{
background:var(--au-tinta); color:rgba(255,255,255,.45);
padding:clamp(50px,8vh,90px) var(--au-pad);
display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
border-top:1px solid var(--au-linha-inv);
}
.au-rodape-logo{ width:clamp(150px,20vw,250px); color:rgba(255,255,255,.7); }
.au-rodape-info{ display:flex; gap:clamp(20px,4vw,54px); flex-wrap:wrap; }
/* ============================================================
10 · ESTADOS DE ANIMAÇÃO
============================================================ */
/* A folga no topo evita que til e acento agudo sejam cortados
pela máscara, sem alterar a posição da linha. */
.au-linha-mask{ display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; }
.au-linha-in{ display:block; }
.au-anim .au-linha-in{ transform:translateY(105%); }
.au-anim .au-up{ opacity:0; transform:translateY(28px); }
.au-anim .au-card-fig{ clip-path:inset(0% 0% 100% 0%); }
.au-loader{ position:fixed; inset:0; z-index:950; background:var(--au-tinta); display:grid; place-items:center; }
.au-loader-logo{ width:min(250px,44vw); color:var(--au-branco); clip-path:inset(0 100% 0 0); }
.au-loader-rule{ width:0; height:1px; background:rgba(255,255,255,.3); margin:24px auto 0; }
@media (prefers-reduced-motion:reduce){
.au-anim .au-linha-in,.au-anim .au-up{ transform:none !important; opacity:1 !important; }
.au-anim .au-card-fig{ clip-path:none !important; }
.au-cursor{ display:none; }
*,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* ############################################################
PARTE 2 · COMPATIBILIDADE COM O ELEMENTOR
############################################################ */
/* ============================================================
AUSTIN · CSS DE COMPATIBILIDADE COM O ELEMENTOR
------------------------------------------------------------
Cole este bloco DEPOIS do austin-elementor.css, no mesmo
campo Configurações do site > CSS personalizado.
Ele resolve dois problemas estruturais:
1. O Elementor controla o layout dos Containers por variáveis
CSS (--display, --flex-direction, etc). Definir essas
variáveis nas nossas classes faz o layout obedecer sem
precisar configurar cada container no painel.
2. Classes aplicadas em widgets caem no invólucro, não no
elemento interno. As regras abaixo alcançam a ![]()
,
o título e o parágrafo de dentro.
============================================================ */
/* ============================================================
1 · DIREÇÃO DOS CONTAINERS
============================================================ */
.au-header{
--display:flex; --flex-direction:row;
--justify-content:space-between; --align-items:center;
--gap:24px;
}
.au-nav{
--display:flex; --flex-direction:row;
--align-items:center; --justify-content:flex-end;
--gap:28px;
}
.au-hero-inner{
--display:flex; --flex-direction:column;
--justify-content:flex-end;
}
.au-hero-top{
--display:flex; --flex-direction:row;
--justify-content:space-between; --flex-wrap:wrap; --gap:20px;
}
.au-hero-base{
--display:flex; --flex-direction:row;
--justify-content:space-between; --align-items:flex-end;
--flex-wrap:wrap; --gap:28px;
}
.au-hero-meta{
--display:flex; --flex-direction:row; --flex-wrap:wrap; --gap:36px;
}
.au-hero-side{
--display:flex; --flex-direction:row; --align-items:center; --gap:14px;
}
.au-eyebrow{
--display:flex; --flex-direction:row;
--align-items:center; --flex-wrap:wrap; --gap:14px;
}
.au-duas{
--display:flex; --flex-direction:row; --flex-wrap:wrap; --gap:60px;
}
.au-col-texto,
.au-col-linha{ --display:flex; --flex-direction:column; }
.au-marco{
--display:flex; --flex-direction:row; --align-items:baseline; --gap:22px;
}
.au-card{ --display:flex; --flex-direction:column; }
.au-card-pe{
--display:flex; --flex-direction:row;
--justify-content:space-between; --align-items:baseline; --gap:14px;
}
.au-card-tag{
--display:flex; --flex-direction:row;
--justify-content:space-between; --align-items:center; --gap:12px;
}
.au-d-ficha{ --display:flex; --flex-direction:column; }
.au-d-item{ --display:flex; --flex-direction:row; --gap:16px; }
.au-contato-grid{
--display:flex; --flex-direction:row; --flex-wrap:wrap; --gap:70px;
}
.au-canais{ --display:flex; --flex-direction:column; }
.au-canal{
--display:flex; --flex-direction:row;
--justify-content:space-between; --align-items:center; --gap:20px;
}
.au-rodape{
--display:flex; --flex-direction:row;
--justify-content:space-between; --align-items:flex-end;
--flex-wrap:wrap; --gap:30px;
}
.au-rodape-info{
--display:flex; --flex-direction:row; --flex-wrap:wrap; --gap:40px;
--align-items:center;
}
/* ============================================================
2 · GRADE DE OBRAS
O Elementor não aplica grid por variável de forma confiável.
Estas regras forçam, com peso suficiente para vencer.
============================================================ */
.au-grade,
.elementor .au-grade{
display:grid !important;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2vw,34px);
}
@media (max-width:1000px){
.au-grade,.elementor .au-grade{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
.au-grade,.elementor .au-grade{ grid-template-columns:1fr; }
}
/* Listing Grid do JetEngine dentro da grade */
.au-grade .jet-listing-grid__items{
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2vw,34px); margin:0;
}
.au-grade .jet-listing-grid__item{ width:100%; padding:0; }
@media (max-width:1000px){ .au-grade .jet-listing-grid__items{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .au-grade .jet-listing-grid__items{ grid-template-columns:1fr; } }
/* Loop Grid do Elementor dentro da grade */
.au-grade .elementor-loop-container{
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2vw,34px);
}
@media (max-width:1000px){ .au-grade .elementor-loop-container{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .au-grade .elementor-loop-container{ grid-template-columns:1fr; } }
/* ============================================================
3 · IMAGENS DENTRO DE WIDGETS
A classe cai no invólucro. Estas regras alcançam a ![]()
.
============================================================ */
.au-rodape-logo img,
.au-header-logo img,
.au-loader-logo img{
width:100%; height:auto; display:block;
}
.au-rodape-logo,
.au-header-logo,
.au-loader-logo{ line-height:0; }
/* Capa do card: precisa preencher o quadrado */
.au-card-img img{
width:100%; height:100%; object-fit:cover; display:block;
}
.au-card-img{
width:100%; height:100%;
}
/* Abertura, quando o vídeo ou a imagem vem por widget */
.au-hero-img img,
.au-hero-img video{
width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(1) contrast(1.24) brightness(.44);
}
/* Galeria oculta do popup: garante que fique escondida
mesmo com o widget de galeria do Elementor */
.au-dados,
.au-dados .elementor-widget-container{ display:none !important; }
/* ============================================================
4 · TÍTULOS E TEXTOS DENTRO DE WIDGETS
============================================================ */
.au-hero-titulo .elementor-heading-title,
.au-statement .elementor-heading-title,
.au-contato-titulo .elementor-heading-title,
.au-card-nome .elementor-heading-title{
font:inherit; color:inherit; letter-spacing:inherit;
line-height:inherit; text-transform:inherit; margin:0;
}
.au-p p,
.au-marco-tx p,
.au-parc-nota p,
.au-card-local p,
.au-modal-texto p{
margin:0 0 20px; font:inherit; color:inherit; line-height:inherit;
}
.au-p p:last-child,
.au-marco-tx p:last-child{ margin-bottom:0; }
/* ============================================================
5 · NEUTRALIZAÇÕES
Impede o Elementor de injetar espaçamento onde o nosso CSS
já controla.
============================================================ */
.au-header,.au-nav,.au-hero-inner,.au-hero-top,.au-hero-base,
.au-eyebrow,.au-duas,.au-marco,.au-card,.au-card-pe,.au-card-tag,
.au-canais,.au-canal,.au-rodape,.au-rodape-info,.au-grade{
--padding-top:0; --padding-right:0; --padding-bottom:0; --padding-left:0;
--margin-top:0; --margin-right:0; --margin-bottom:0; --margin-left:0;
}
/* As seções mantêm o padding do nosso CSS */
.au-hero,.au-sec-claro,.au-sec-papel,.au-obras,.au-contato{
--padding-top:0; --padding-right:0; --padding-bottom:0; --padding-left:0;
--width:100%; --content-width:100%;
}
/* O widget de imagem do Elementor adiciona margem inferior por padrão */
.au-rodape-logo,.au-header-logo,.au-card-img{ margin-bottom:0 !important; }
/* ============================================================
6 · LINKS
O tema e o kit do Elementor definem cor para a:hover e
a:visited com peso maior que a nossa regra base. Isso faz
os links ficarem azuis ou roxos. As regras abaixo forçam
a herança em todos os estados.
============================================================ */
.au-link,
.au-link:link,
.au-link:visited,
.au-link:hover,
.au-link:active,
.au-link:focus,
.au-card,
.au-card:visited,
.au-card:hover,
.au-canal,
.au-canal:visited,
.au-canal:hover,
.au-parc-link,
.au-parc-link:visited,
.au-parc-link:hover,
.au-header a,
.au-header a:visited,
.au-header a:hover,
.au-nav a,
.au-nav a:visited,
.au-nav a:hover,
.au-rodape a,
.au-rodape a:visited,
.au-rodape a:hover,
.au-obras-fim a,
.au-obras-fim a:visited,
.au-obras-fim a:hover,
.au-modal a,
.au-modal a:visited,
.au-modal a:hover{
color:inherit !important;
text-decoration:none !important;
border:0;
}
/* o sublinhado da parceria é um elemento próprio, não text-decoration */
.au-parc-link{ text-decoration:none !important; }
/* ============================================================
7 · LOGO DO CABEÇALHO QUE TROCA DE COR
O cabeçalho recebe a classe is-dark quando passa sobre uma
seção clara. Estas regras alternam entre as duas versões
do logo. O bloco do cabeçalho traz as duas imagens.
============================================================ */
.au-header .logo-preto{ display:none; }
.au-header.is-dark .logo-branco{ display:none; }
.au-header.is-dark .logo-preto{ display:block; }
/* ============================================================
8 · MENU DO CELULAR
Faz parte do próprio cabeçalho. Não use o widget Menu do
Elementor: ele fica fora do cabeçalho e não consegue nem
alinhar nem herdar a cor.
============================================================ */
.au-burger{
display:none; position:relative;
width:30px; height:18px; flex:0 0 auto;
padding:0; background:none; border:0; cursor:pointer;
color:inherit;
}
.au-burger span{
position:absolute; left:0; width:100%; height:1.5px;
background:currentColor;
transition:transform .5s var(--au-ease), opacity .35s var(--au-ease);
}
.au-burger-l1{ top:3px; }
.au-burger-l2{ bottom:3px; }
body.au-menu-aberto .au-burger-l1{ transform:translateY(6px) rotate(45deg); }
body.au-menu-aberto .au-burger-l2{ transform:translateY(-6px) rotate(-45deg); }
.au-menu{
position:fixed; inset:0; z-index:190;
background:var(--au-tinta); color:var(--au-branco);
display:flex; flex-direction:column; justify-content:center;
padding:0 var(--au-pad);
clip-path:inset(0 0 100% 0);
pointer-events:none;
transition:clip-path .75s var(--au-ease);
}
body.au-menu-aberto .au-menu{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.au-menu-lista{ display:flex; flex-direction:column; gap:6px; }
.au-menu-lista a{
font-family:var(--au-display);
font-size:clamp(27px,7.8vw,44px); font-weight:700;
line-height:1.18; letter-spacing:-.03em; text-transform:uppercase;
color:var(--au-branco);
}
.au-menu-pe{
position:absolute; left:var(--au-pad); right:var(--au-pad);
bottom:clamp(28px,6vh,60px);
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
color:rgba(255,255,255,.5);
}
/* enquanto o menu está aberto o cabeçalho fica sempre claro */
body.au-menu-aberto .au-header{ color:var(--au-branco); }
body.au-menu-aberto .au-header .logo-preto{ display:none; }
body.au-menu-aberto .au-header .logo-branco{ display:block; }
@media (max-width:900px){
.au-burger{ display:block; }
.au-header .au-cta{ display:none; }
.au-header-logo{ width:104px; height:auto; }
.au-nav{ gap:0; }
}
@media (min-width:901px){
.au-menu{ display:none; }
}
/* ============================================================
9 · LOGO VETORIAL DO CABEÇALHO
O logo agora é um SVG embutido que herda a cor do cabeçalho.
Não existem mais duas versões de imagem para alternar.
============================================================ */
.au-header-marca{ display:flex; align-items:center; flex:0 0 auto; }
.au-header-logo{
width:clamp(100px,10.5vw,132px);
height:auto;
fill:currentColor;
display:block;
}
@media (max-width:900px){
.au-header-logo{ width:104px; }
}
/* ============================================================
10 · COR DO CABEÇALHO NAS SEÇÕES CLARAS
Regras com peso máximo, para vencer qualquer estilo que o
tema ou o Elementor apliquem aos links do cabeçalho.
============================================================ */
body .au-header.is-dark,
body .au-header.is-dark a,
body .au-header.is-dark .au-nav,
body .au-header.is-dark .au-nav a,
body .au-header.is-dark .au-roll-in-b,
body .au-header.is-dark .au-cta,
body .au-header.is-dark .au-burger{
color:var(--au-tinta) !important;
}
body .au-header.is-dark .au-header-logo,
body .au-header.is-dark .au-header-logo g,
body .au-header.is-dark .au-header-logo path{
fill:var(--au-tinta) !important;
}
body .au-header.is-dark .au-burger span{
background:var(--au-tinta) !important;
}
/* com o menu do celular aberto, o cabeçalho volta a ser claro */
body.au-menu-aberto .au-header,
body.au-menu-aberto .au-header a,
body.au-menu-aberto .au-header .au-nav a,
body.au-menu-aberto .au-header .au-burger{
color:var(--au-branco) !important;
}
body.au-menu-aberto .au-header .au-header-logo,
body.au-menu-aberto .au-header .au-header-logo g,
body.au-menu-aberto .au-header .au-header-logo path{
fill:var(--au-branco) !important;
}
body.au-menu-aberto .au-header .au-burger span{
background:var(--au-branco) !important;
}
/* ============================================================
11 · FORMULÁRIO DO ELEMENTOR
O widget Formulário gera marcação própria. Estas regras dão
a ele a mesma aparência do restante do site.
Aplique a classe au-form no widget Formulário.
============================================================ */
.au-form .elementor-form{ width:100%; }
.au-form .elementor-field-group{
margin-bottom:26px; padding:0;
}
.au-form .elementor-field-label{
font-family:var(--au-mono); font-size:11px; letter-spacing:.17em;
text-transform:uppercase; color:rgba(255,255,255,.45);
margin-bottom:6px;
}
.au-form .elementor-field-textual,
.au-form input.elementor-field,
.au-form textarea.elementor-field,
.au-form select.elementor-field{
width:100%; padding:12px 0;
border:0 !important; border-bottom:1px solid rgba(255,255,255,.18) !important;
border-radius:0 !important; background:transparent !important;
color:var(--au-branco) !important;
font-family:var(--au-corpo) !important; font-size:16px !important;
box-shadow:none !important;
transition:border-color .5s var(--au-ease);
}
.au-form .elementor-field-textual:focus,
.au-form input.elementor-field:focus,
.au-form textarea.elementor-field:focus{
outline:none !important;
border-bottom-color:var(--au-branco) !important;
box-shadow:none !important;
}
.au-form .elementor-field-textual::placeholder,
.au-form input.elementor-field::placeholder,
.au-form textarea.elementor-field::placeholder{
color:rgba(255,255,255,.42); opacity:1;
}
.au-form textarea.elementor-field{ resize:none; min-height:70px; }
/* preenchimento automático do navegador */
.au-form input:-webkit-autofill,
.au-form input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--au-branco);
transition:background-color 9999s ease-out;
}
/* ------- seletor arquiteto / cliente, como botões ------- */
.au-form .elementor-field-subgroup{
display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;
}
.au-form .elementor-field-option{ position:relative; }
.au-form .elementor-field-option input[type="radio"],
.au-form .elementor-field-option input[type="checkbox"]{
position:absolute; inset:0; width:100%; height:100%;
opacity:0; margin:0; cursor:pointer; z-index:2;
}
.au-form .elementor-field-option label{
display:inline-flex; align-items:center;
padding:10px 18px; margin:0;
border:1px solid rgba(255,255,255,.18); border-radius:999px;
font-family:var(--au-mono); font-size:11px; letter-spacing:.17em;
text-transform:uppercase; color:var(--au-branco); cursor:pointer;
transition:background .4s var(--au-ease), color .4s var(--au-ease), border-color .4s var(--au-ease);
}
.au-form .elementor-field-option input:checked + label{
background:var(--au-branco); color:var(--au-tinta); border-color:var(--au-branco);
}
/* ------- botão ------- */
.au-form .elementor-button,
.au-form button[type="submit"]{
background:transparent !important;
border:1px solid var(--au-branco) !important; border-radius:999px !important;
color:var(--au-branco) !important;
padding:16px 30px !important;
font-family:var(--au-mono) !important; font-size:11px !important;
letter-spacing:.17em !important; text-transform:uppercase !important;
box-shadow:none !important;
transition:background .5s var(--au-ease), color .5s var(--au-ease);
}
.au-form .elementor-button:hover,
.au-form button[type="submit"]:hover{
background:var(--au-branco) !important; color:var(--au-tinta) !important;
}
/* ------- mensagens ------- */
.au-form .elementor-message{
font-family:var(--au-mono); font-size:11px; letter-spacing:.17em;
text-transform:uppercase; margin-top:18px;
}
.au-form .elementor-message-success{ color:rgba(255,255,255,.7); }
.au-form .elementor-message-danger{ color:#FFFFFF; }
/* ============================================================
12 · FOCO E SELEÇÃO
Sem isto, o navegador usa a cor de destaque do sistema
operacional, que pode ser rosa, azul ou qualquer outra
escolhida pelo usuário. Aparece ao clicar em links, botões
e nos seletores do formulário.
============================================================ */
html{
accent-color:var(--au-tinta);
-webkit-tap-highlight-color:transparent;
}
.au-contato,
.au-contato *,
.au-menu,
.au-menu *{
accent-color:var(--au-branco);
}
a,button,input,textarea,select,summary{
-webkit-tap-highlight-color:transparent;
}
/* o navegador só desenha o anel de foco na navegação por teclado */
a:focus,button:focus,input:focus,textarea:focus,select:focus{
outline:none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
outline:1px solid currentColor;
outline-offset:5px;
border-radius:2px;
}
.au-form .elementor-field-option input:focus-visible + label{
outline:1px solid var(--au-branco);
outline-offset:4px;
}
/* ============================================================
13 · FORMULÁRIO · REGRAS ANCORADAS NA SEÇÃO DE CONTATO
Funcionam mesmo que a classe au-form não esteja no widget.
Substituem o bloco 11.
============================================================ */
.au-contato .elementor-form,
.au-form .elementor-form{ width:100%; }
.au-contato .elementor-field-group,
.au-form .elementor-field-group{ margin-bottom:26px; padding:0; }
.au-contato .elementor-field-label,
.au-form .elementor-field-label{
font-family:var(--au-mono) !important; font-size:11px !important;
letter-spacing:.17em !important; text-transform:uppercase !important;
color:rgba(255,255,255,.45) !important; margin-bottom:8px !important;
}
/* campos de texto */
.au-contato .elementor-field-textual,
.au-contato input.elementor-field,
.au-contato textarea.elementor-field,
.au-contato select.elementor-field,
.au-form .elementor-field-textual{
width:100% !important;
padding:12px 0 !important;
border:0 !important;
border-bottom:1px solid rgba(255,255,255,.18) !important;
border-radius:0 !important;
background:transparent !important;
color:#FFFFFF !important;
font-family:"Manrope",sans-serif !important;
font-size:16px !important;
line-height:1.5 !important;
box-shadow:none !important;
min-height:0 !important;
transition:border-color .5s cubic-bezier(.19,1,.22,1);
}
.au-contato .elementor-field-textual:focus,
.au-contato input.elementor-field:focus,
.au-contato textarea.elementor-field:focus{
outline:none !important;
border-bottom-color:#FFFFFF !important;
box-shadow:none !important;
background:transparent !important;
}
.au-contato .elementor-field-textual::placeholder,
.au-contato input.elementor-field::placeholder,
.au-contato textarea.elementor-field::placeholder{
color:rgba(255,255,255,.42) !important; opacity:1 !important;
}
.au-contato textarea.elementor-field{ resize:none !important; min-height:74px !important; }
.au-contato input:-webkit-autofill,
.au-contato input:-webkit-autofill:hover,
.au-contato input:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
caret-color:#FFFFFF;
transition:background-color 9999s ease-out 0s;
}
/* ------- seletor arquiteto / cliente ------- */
.au-contato .elementor-field-subgroup{
display:flex !important; gap:10px !important; flex-wrap:wrap !important;
margin:4px 0 0 !important;
}
.au-contato .elementor-field-option{
position:relative; display:inline-flex; margin:0 !important;
}
/* o seletor nativo some por completo, inclusive a cor de destaque
do sistema operacional, que é a origem do rosa */
.au-contato .elementor-field-option input[type="radio"],
.au-contato .elementor-field-option input[type="checkbox"]{
-webkit-appearance:none !important;
appearance:none !important;
position:absolute !important; inset:0 !important;
width:100% !important; height:100% !important;
margin:0 !important; padding:0 !important;
border:0 !important; background:none !important;
opacity:0 !important;
cursor:pointer; z-index:2;
}
.au-contato .elementor-field-option label{
display:inline-flex !important; align-items:center !important;
padding:11px 20px !important; margin:0 !important;
border:1px solid rgba(255,255,255,.22) !important;
border-radius:999px !important;
background:transparent !important;
font-family:var(--au-mono) !important; font-size:11px !important;
letter-spacing:.17em !important; text-transform:uppercase !important;
color:#FFFFFF !important;
line-height:1 !important;
cursor:pointer;
transition:background .4s cubic-bezier(.19,1,.22,1), color .4s cubic-bezier(.19,1,.22,1), border-color .4s cubic-bezier(.19,1,.22,1);
}
.au-contato .elementor-field-option input:checked + label{
background:#FFFFFF !important;
color:#0C0C0C !important;
border-color:#FFFFFF !important;
}
.au-contato .elementor-field-option label:hover{
border-color:rgba(255,255,255,.6) !important;
}
/* ------- botão ------- */
.au-contato .elementor-button,
.au-contato button[type="submit"]{
background:transparent !important;
border:1px solid #FFFFFF !important;
border-radius:999px !important;
color:#FFFFFF !important;
padding:16px 30px !important;
font-family:var(--au-mono) !important; font-size:11px !important;
letter-spacing:.17em !important; text-transform:uppercase !important;
box-shadow:none !important; min-height:0 !important;
transition:background .5s cubic-bezier(.19,1,.22,1), color .5s cubic-bezier(.19,1,.22,1);
}
.au-contato .elementor-button:hover,
.au-contato button[type="submit"]:hover{
background:#FFFFFF !important; color:#0C0C0C !important;
}
.au-contato .elementor-button-content-wrapper,
.au-contato .elementor-button-text{ color:inherit !important; }
/* ------- mensagens ------- */
.au-contato .elementor-message{
font-family:var(--au-mono) !important; font-size:11px !important;
letter-spacing:.17em !important; text-transform:uppercase !important;
margin-top:18px !important; color:rgba(255,255,255,.7) !important;
}
/* ============================================================
14 · COR DE DESTAQUE DO SISTEMA
Sem isto, o navegador pinta seletores e anéis de foco com a
cor de realce escolhida no sistema operacional, que pode ser
rosa, azul ou qualquer outra.
============================================================ */
html,body,input,textarea,select,button{
accent-color:#0C0C0C;
-webkit-tap-highlight-color:transparent;
}
.au-contato input,
.au-contato textarea,
.au-contato select,
.au-contato button,
.au-menu a{
accent-color:#FFFFFF;
-webkit-tap-highlight-color:transparent;
}
a:focus,button:focus,input:focus,textarea:focus,select:focus{ outline:none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
outline:1px solid currentColor;
outline-offset:5px;
}
.au-contato .elementor-field-option input:focus-visible + label{
outline:1px solid #FFFFFF; outline-offset:4px;
}
/* ============================================================
15 · POPUP · COLUNA DE TEXTO
O popup passou a exibir apenas o nome da obra e o texto de
apresentação. O texto aceita parágrafos e negrito.
============================================================ */
.au-modal-info{
flex:0 0 clamp(280px,32%,400px);
padding:clamp(28px,3vw,48px);
display:flex; flex-direction:column; gap:20px;
border-right:1px solid var(--au-linha-inv);
overflow-y:auto;
}
@media (max-width:900px){
.au-modal-info{
flex:none; border-right:0;
border-bottom:1px solid var(--au-linha-inv);
overflow:visible;
}
}
.au-modal-nome{
margin:0;
font-family:var(--au-display);
font-size:clamp(19px,1.9vw,27px); font-weight:800;
line-height:1.08; letter-spacing:-.036em; text-transform:uppercase;
}
.au-modal-texto{
margin:0;
font-size:14px; line-height:1.75;
color:rgba(255,255,255,.66);
}
.au-modal-texto p{ margin:0 0 15px; }
.au-modal-texto p:last-child{ margin-bottom:0; }
.au-modal-texto strong,
.au-modal-texto b{ color:rgba(255,255,255,.92); font-weight:600; }
.au-modal-texto em{ font-style:italic; }
/* barra de rolagem discreta na coluna de texto */
.au-modal-info::-webkit-scrollbar{ width:3px; }
.au-modal-info::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); }
.au-modal-info::-webkit-scrollbar-track{ background:transparent; }
/* ============================================================
16 · TARJA DO CARD
Com um único rótulo, a tarja se alinha à direita.
============================================================ */
.au-card-tag{ justify-content:flex-end !important; }
/* ============================================================
17 · BARRA DE ROLAGEM DAS MINIATURAS
As miniaturas rolam na horizontal, e o navegador desenha uma
barra clara embaixo delas. Escondemos a barra sem tirar a
rolagem, e indicamos a continuação com um esmaecido na borda.
============================================================ */
.au-minis{
scrollbar-width:none;
-ms-overflow-style:none;
overscroll-behavior-x:contain;
padding-bottom:0;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
}
.au-minis::-webkit-scrollbar{ display:none; width:0; height:0; }
/* a coluna de texto do popup usa a mesma discrição */
.au-modal-info{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
/* miniaturas um pouco maiores e com respiro */
.au-mini{ width:64px; height:48px; }
.au-minis{ gap:10px; }
@media (max-width:700px){
.au-mini{ width:52px; height:40px; }
}
/* ============================================================
18 · FORMULÁRIO · SELETORES INDEPENDENTES DE POSIÇÃO
As regras anteriores partiam de .au-contato, que fica DENTRO
do widget HTML do bloco 05. O widget Formulário do Elementor
é irmão desse widget, não filho, então nada era aplicado.
Aqui miramos o próprio widget de formulário.
Substitui os blocos 11 e 13.
============================================================ */
.elementor-widget-form .elementor-form{ width:100%; }
.elementor-widget-form .elementor-field-group{
margin-bottom:26px !important; padding:0 !important;
}
.elementor-widget-form .elementor-field-label{
font-family:"JetBrains Mono",monospace !important;
font-size:11px !important; letter-spacing:.17em !important;
text-transform:uppercase !important;
color:rgba(255,255,255,.45) !important;
margin-bottom:8px !important; padding:0 !important;
}
/* ------- campos de texto ------- */
.elementor-widget-form .elementor-field-textual,
.elementor-widget-form input.elementor-field,
.elementor-widget-form textarea.elementor-field,
.elementor-widget-form select.elementor-field{
width:100% !important;
padding:12px 0 !important;
border:0 !important;
border-top:0 !important; border-right:0 !important; border-left:0 !important;
border-bottom:1px solid rgba(255,255,255,.18) !important;
border-radius:0 !important;
background:transparent !important; background-color:transparent !important;
color:#FFFFFF !important;
font-family:"Manrope",sans-serif !important;
font-size:16px !important; line-height:1.5 !important;
box-shadow:none !important;
min-height:0 !important; height:auto !important;
transition:border-color .5s cubic-bezier(.19,1,.22,1);
}
.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form input.elementor-field:focus,
.elementor-widget-form textarea.elementor-field:focus{
outline:none !important;
border-bottom-color:#FFFFFF !important;
box-shadow:none !important;
background:transparent !important;
}
.elementor-widget-form .elementor-field-textual::placeholder,
.elementor-widget-form input.elementor-field::placeholder,
.elementor-widget-form textarea.elementor-field::placeholder{
color:rgba(255,255,255,.42) !important; opacity:1 !important;
}
.elementor-widget-form textarea.elementor-field{
resize:none !important; min-height:74px !important;
}
.elementor-widget-form input:-webkit-autofill,
.elementor-widget-form input:-webkit-autofill:hover,
.elementor-widget-form input:-webkit-autofill:focus{
-webkit-text-fill-color:#FFFFFF !important;
caret-color:#FFFFFF;
box-shadow:0 0 0 1000px transparent inset !important;
transition:background-color 9999s ease-out 0s;
}
/* ------- seletor arquiteto / cliente ------- */
.elementor-widget-form .elementor-field-subgroup{
display:flex !important; flex-direction:row !important;
gap:10px !important; flex-wrap:wrap !important;
margin:4px 0 0 !important; padding:0 !important;
}
.elementor-widget-form .elementor-field-option{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
margin:0 !important; padding:0 !important;
width:auto !important;
}
/* o botão nativo some por completo e cobre o rótulo inteiro,
para o clique continuar funcionando */
.elementor-widget-form .elementor-field-option input[type="radio"],
.elementor-widget-form .elementor-field-option input[type="checkbox"]{
-webkit-appearance:none !important; appearance:none !important;
position:absolute !important; inset:0 !important;
width:100% !important; height:100% !important;
min-width:0 !important; min-height:0 !important;
margin:0 !important; padding:0 !important;
border:0 !important; border-radius:0 !important;
background:none !important; background-color:transparent !important;
box-shadow:none !important;
opacity:0 !important;
cursor:pointer; z-index:2;
}
.elementor-widget-form .elementor-field-option label{
display:inline-flex !important; align-items:center !important;
padding:11px 20px !important; margin:0 !important;
border:1px solid rgba(255,255,255,.22) !important;
border-radius:999px !important;
background:transparent !important;
font-family:"JetBrains Mono",monospace !important;
font-size:11px !important; letter-spacing:.17em !important;
text-transform:uppercase !important;
color:#FFFFFF !important; line-height:1 !important;
white-space:nowrap;
cursor:pointer;
transition:background .4s cubic-bezier(.19,1,.22,1), color .4s cubic-bezier(.19,1,.22,1), border-color .4s cubic-bezier(.19,1,.22,1);
}
.elementor-widget-form .elementor-field-option input:checked + label{
background:#FFFFFF !important;
color:#0C0C0C !important;
border-color:#FFFFFF !important;
}
.elementor-widget-form .elementor-field-option label:hover{
border-color:rgba(255,255,255,.6) !important;
}
/* ------- botão ------- */
.elementor-widget-form .elementor-button,
.elementor-widget-form button[type="submit"]{
background:transparent !important; background-color:transparent !important;
border:1px solid #FFFFFF !important; border-radius:999px !important;
color:#FFFFFF !important;
padding:16px 30px !important;
font-family:"JetBrains Mono",monospace !important;
font-size:11px !important; letter-spacing:.17em !important;
text-transform:uppercase !important;
box-shadow:none !important; min-height:0 !important;
transition:background .5s cubic-bezier(.19,1,.22,1), color .5s cubic-bezier(.19,1,.22,1);
}
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form button[type="submit"]:hover{
background:#FFFFFF !important; color:#0C0C0C !important;
}
.elementor-widget-form .elementor-button-content-wrapper,
.elementor-widget-form .elementor-button-text{ color:inherit !important; }
/* ------- mensagens ------- */
.elementor-widget-form .elementor-message{
font-family:"JetBrains Mono",monospace !important;
font-size:11px !important; letter-spacing:.17em !important;
text-transform:uppercase !important;
margin-top:18px !important; color:rgba(255,255,255,.7) !important;
}
/* ------- cor de destaque do sistema ------- */
.elementor-widget-form,
.elementor-widget-form input,
.elementor-widget-form textarea,
.elementor-widget-form select,
.elementor-widget-form button{
accent-color:#FFFFFF;
-webkit-tap-highlight-color:transparent;
}
/* ============================================================
19 · FORMULÁRIO · SELETORES PELO PRÓPRIO FORM
Última camada: mira a tag