/* Esperanza Tattoo — estilo da home. Editar aqui muda o site inteiro. */ :root{ --ink:#010101; --ink-2:#170f08; --ink-3:#22160a; --paper:#fff6b2; --paper-dim:#c9bb8a; --gold:#b88518; --gold-2:#d9a52f; --brown:#473118; --rule: rgba(184,133,24,0.32); --measure: 66ch; --maxw: 1180px; --shadow: 0 30px 60px -30px rgba(0,0,0,0.8); } body{ background:var(--ink); color:var(--paper); font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; background-image: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(184,133,24,0.14), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(71,49,24,0.35), transparent 55%); } body img{ max-width:100%; display:block; } body a{ color:inherit; } /* ---- compatibilidade Elementor ---- */ .elementor-section.esp-flat > .elementor-container{ max-width:100%; } .esp-flat .elementor-widget-wrap{ padding:0 !important; } .esp-sec > .elementor-container{ padding-block:clamp(56px,9vw,104px); } .esp-wrap > .elementor-container{ max-width:var(--maxw); padding-inline:clamp(20px,4vw,48px); } .esp-page-heading .elementor-heading-title{ margin:0; } .elementor-widget-text-editor p{ margin:0 0 12px; } .elementor-widget-text-editor p:last-child{ margin-bottom:0; } .eyebrow{ font-family: system-ui,-apple-system,"Segoe UI",sans-serif; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; } .display{ font-family:"Arial Narrow","Franklin Gothic Medium",Arial,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; } .esp-h2 .elementor-heading-title{ font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.15; margin:8px 0 10px; text-wrap:balance; } .esp-h3 .elementor-heading-title{ font-family:"Arial Narrow",Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:1.4rem; } .esp-center .elementor-heading-title{ text-align:center; } .esp-lead p{ color:var(--paper-dim); max-width:60ch; } .dim{ color:var(--paper-dim); } .head{ display:flex; flex-direction:column; gap:6px; } .head.center{ align-items:center; text-align:center; } .btn{ display:inline-flex; align-items:center; gap:8px; font-family:system-ui,sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:14px 26px; border-radius:2px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition: transform .15s ease, background .15s ease, color .15s ease; } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background:var(--gold); color:var(--ink); box-shadow: var(--shadow); } .btn-primary:hover{ background:var(--gold-2); } .btn-ghost{ border-color:var(--rule); color:var(--paper); } .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); } .esp-btn-ghost .elementor-button{ background:transparent; border:1px solid var(--rule); color:var(--paper); border-radius:2px; font-family:system-ui,sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:14px 26px; } .esp-btn-ghost .elementor-button:hover{ border-color:var(--gold); color:var(--gold); } .esp-btn-dark .elementor-button{ background:var(--ink); color:var(--paper); border-radius:2px; font-family:system-ui,sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:16px 30px; } .esp-btn-dark .elementor-button:hover{ background:var(--ink-2); } /* ---- header ---- */ .esp-header{ position:sticky; top:0; z-index:40; background:rgba(1,1,1,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); } .esp-header .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px clamp(20px,4vw,48px); max-width:var(--maxw); margin:0 auto; gap:20px; } .esp-header .logo{ display:flex; align-items:center; gap:10px; } .esp-header .logo img{ height:48px; width:auto; } .esp-header nav.links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-family:system-ui,sans-serif; font-size:0.74rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--paper-dim); } .esp-header nav.links a{ text-decoration:none; } .esp-header nav.links a:hover{ color:var(--gold); } .esp-header .nav-actions{ display:flex; align-items:center; gap:14px; } .esp-header .nav-cta{ display:none; } @media(min-width:860px){ .esp-header .nav-cta{ display:inline-flex; } } @media(max-width:1020px){ .esp-header nav.links{ display:none; } } @media(max-width:859px){ .esp-header .nav{ justify-content:center; } .esp-header .nav-actions{ display:none; } } /* ---- hero ---- */ .hero{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; align-items:stretch; min-height:640px; border-bottom:1px solid var(--rule); overflow:hidden; } @media(max-width:860px){ .hero{ grid-template-columns:1fr; min-height:auto; } } @media(min-width:861px){ .hero{ max-width:var(--maxw); margin:28px auto 0; border:1px solid var(--rule); border-radius:4px; } } .hero-copy{ display:flex; flex-direction:column; justify-content:center; gap:26px; padding:clamp(48px,7vw,84px) clamp(20px,5vw,64px); } .hero h1{ font-size:clamp(2.5rem,5.6vw,4.4rem); line-height:0.98; margin:0; text-wrap:balance; } .hero h1 em{ font-style:normal; color:var(--gold); } .hero-sub{ max-width:46ch; color:var(--paper-dim); font-size:1.05rem; line-height:1.7; margin:0; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .hero-stats{ display:flex; gap:32px; margin-top:8px; font-family:system-ui,sans-serif; } .hero-stats div strong{ display:block; font-size:1.5rem; font-family:"Arial Narrow",sans-serif; color:var(--gold); } .hero-stats div span{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); } .hero-media{ position:relative; min-height:340px; } .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; } .hero-media::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 0%, rgba(1,1,1,0.35) 22%, rgba(1,1,1,0) 55%); } @media(max-width:860px){ .hero-media{ min-height:320px; order:-1; padding:22px 22px 0; } .hero-media::before{ background:linear-gradient(180deg, rgba(1,1,1,0) 45%, var(--ink) 96%); } .hero-media img{ border-radius:4px; } } .hero-media-caption{ position:absolute; left:20px; bottom:18px; font-family:system-ui,sans-serif; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-dim); background:rgba(1,1,1,0.55); padding:6px 10px; border:1px solid var(--rule); } /* ---- grades de colunas ---- */ .esp-grid2 > .elementor-container, .esp-grid3 > .elementor-container, .esp-grid4 > .elementor-container{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); } .esp-grid2 > .elementor-container{ grid-template-columns:repeat(2,1fr); } .esp-grid3 > .elementor-container{ grid-template-columns:repeat(3,1fr); } .esp-grid4 > .elementor-container{ grid-template-columns:repeat(4,1fr); } .esp-grid2 > .elementor-container > .elementor-column, .esp-grid3 > .elementor-container > .elementor-column, .esp-grid4 > .elementor-container > .elementor-column{ width:100% !important; background:var(--ink-2); } @media(max-width:900px){ .esp-grid4 > .elementor-container{ grid-template-columns:repeat(2,1fr); } } @media(max-width:820px){ .esp-grid3 > .elementor-container{ grid-template-columns:1fr; } } @media(max-width:760px){ .esp-grid2 > .elementor-container{ grid-template-columns:1fr; } } @media(max-width:520px){ .esp-grid4 > .elementor-container{ grid-template-columns:1fr; } } /* ---- pilares ---- */ .esp-pillars > .elementor-container{ margin-block:0; } .esp-pillar{ position:relative; min-height:300px; background-blend-mode:normal; } .esp-pillar::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,1,1,0.25), var(--ink) 88%); z-index:1; } .esp-pillar > .elementor-widget-wrap{ position:relative; z-index:2; justify-content:flex-end; align-content:flex-end; padding:0 !important; } .pillar-body{ padding:26px; display:flex; flex-direction:column; gap:8px; } .pillar-num{ font-family:system-ui,sans-serif; font-size:0.7rem; color:var(--gold); letter-spacing:0.14em; } .pillar-body h3{ font-size:1.5rem; margin:0; } .pillar-body p{ color:var(--paper-dim); font-size:0.92rem; max-width:32ch; margin:0; } /* ---- portfolio ---- */ .esp-portfolio .tabs{ display:flex; gap:8px; flex-wrap:wrap; font-family:system-ui,sans-serif; margin-top:18px; } .esp-portfolio .tabs label{ padding:8px 16px; border:1px solid var(--rule); border-radius:2px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; color:var(--paper-dim); user-select:none; } .esp-portfolio .vh{ position:absolute; opacity:0; pointer-events:none; } .esp-portfolio #f-all:checked ~ .tabs label[for="f-all"], .esp-portfolio #f-tat:checked ~ .tabs label[for="f-tat"], .esp-portfolio #f-mur:checked ~ .tabs label[for="f-mur"], .esp-portfolio #f-tel:checked ~ .tabs label[for="f-tel"], .esp-portfolio #f-graf:checked ~ .tabs label[for="f-graf"]{ background:var(--gold); color:var(--ink); border-color:var(--gold); } .esp-portfolio .grid{ margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; grid-auto-flow:dense; } @media(max-width:980px){ .esp-portfolio .grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .esp-portfolio .grid{ grid-template-columns:1fr; } } .esp-portfolio .card{ position:relative; overflow:hidden; border-radius:2px; background:var(--ink-2); border:1px solid var(--rule); margin:0; } .esp-portfolio .card.tall{ grid-row:span 2; } .esp-portfolio .card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform .5s ease; } .esp-portfolio .card.tall img{ aspect-ratio:1/2; } .esp-portfolio .card:hover img{ transform:scale(1.06); } .esp-portfolio .card figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px; background:linear-gradient(0deg, rgba(1,1,1,0.92), rgba(1,1,1,0)); font-family:system-ui,sans-serif; } .esp-portfolio .card figcaption .tag{ font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); } .esp-portfolio .card figcaption .title{ font-family:Georgia,serif; font-size:0.92rem; color:var(--paper); margin-top:2px; } .esp-portfolio #f-tat:checked ~ .grid .card:not([data-cat="tat"]), .esp-portfolio #f-mur:checked ~ .grid .card:not([data-cat="mur"]), .esp-portfolio #f-tel:checked ~ .grid .card:not([data-cat="tel"]), .esp-portfolio #f-graf:checked ~ .grid .card:not([data-cat="graf"]){ display:none; } /* ---- manifesto ---- */ .esp-manifesto > .elementor-container{ padding-block:clamp(64px,10vw,110px); padding-inline:clamp(20px,4vw,48px); text-align:center; } .esp-manifesto{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:linear-gradient(180deg, var(--ink-2), var(--ink)); } .esp-manifesto blockquote{ max-width:820px; margin:0 auto; font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.4; font-style:italic; border:0; padding:0; } .esp-manifesto blockquote em{ font-style:normal; color:var(--gold); } .esp-manifesto .rose{ font-size:1.4rem; color:var(--gold); margin-bottom:22px; } /* ---- servicos ---- */ .esp-services > .elementor-container{ margin-block:0; } .esp-service > .elementor-widget-wrap{ padding:clamp(28px,4vw,44px) !important; align-content:flex-start; gap:16px; } .esp-service .list{ display:flex; flex-direction:column; gap:10px; font-size:0.92rem; color:var(--paper-dim); } .esp-service .list div{ display:flex; gap:10px; align-items:baseline; } .esp-service .list b{ color:var(--gold); font-family:system-ui,sans-serif; font-size:0.7rem; flex:none; } .esp-service .elementor-widget{ width:100%; } /* ---- sobre ---- */ .esp-about > .elementor-container{ align-items:center; gap:clamp(30px,5vw,64px); } .about-badge{ aspect-ratio:1/1; border:1px solid var(--rule); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:radial-gradient(circle at 50% 35%, var(--ink-3), var(--ink-2)); text-align:center; padding:40px; } .about-badge img{ max-width:78%; } .about-badge .sub{ font-family:system-ui,sans-serif; font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--paper-dim); } .about-credits{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; } .about-credits div strong{ display:block; font-family:"Arial Narrow",sans-serif; font-size:1.5rem; color:var(--gold); } .about-credits div span{ font-family:system-ui,sans-serif; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); } /* ---- processo ---- */ .esp-process > .elementor-container{ margin-block:0; } .esp-step > .elementor-widget-wrap{ padding:26px !important; } .esp-step .n{ display:block; font-family:"Arial Narrow",sans-serif; font-size:2rem; color:var(--gold); font-weight:800; } .esp-step h4{ font-size:1.05rem; margin:10px 0 0; } .esp-step p{ color:var(--paper-dim); font-size:0.88rem; margin:10px 0 0; } /* ---- depoimentos ---- */ .sample-tag{ display:inline-block; font-family:system-ui,sans-serif; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); background:var(--gold); padding:4px 10px; border-radius:2px; margin:8px 0 6px; align-self:flex-start; } .esp-testimonials > .elementor-container{ margin-block:0; } .esp-tcard > .elementor-widget-wrap{ padding:28px !important; } .esp-tcard .quote{ font-style:italic; color:var(--paper); font-size:1rem; } .esp-tcard .who{ font-family:system-ui,sans-serif; font-size:0.72rem; letter-spacing:0.05em; color:var(--paper-dim); text-transform:uppercase; margin-top:16px; } /* ---- faq ---- */ .esp-faq-sec .faq{ max-width:820px; margin:28px auto 0; display:flex; flex-direction:column; } .faq-item{ border-bottom:1px solid var(--rule); padding:22px 0; } .faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:1.05rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; font-family:system-ui,sans-serif; color:var(--gold); font-size:1.3rem; flex:none; } .faq-item[open] summary::after{ content:"–"; } .faq-item .a{ color:var(--paper-dim); margin-top:12px; max-width:var(--measure); font-size:0.96rem; } /* ---- cta ---- */ .esp-cta{ background:linear-gradient(120deg, var(--brown) 0%, var(--gold) 75%, var(--gold-2) 130%); color:var(--ink); } .esp-cta > .elementor-container{ max-width:var(--maxw); padding:clamp(40px,6vw,60px) clamp(20px,4vw,48px); align-items:center; } .esp-cta h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); margin:6px 0 0; } .esp-cta .eyebrow{ color:var(--ink); opacity:0.75; } .esp-cta-right > .elementor-widget-wrap{ justify-content:flex-end; } @media(max-width:760px){ .esp-cta-right > .elementor-widget-wrap{ justify-content:flex-start; } } /* ---- footer ---- */ .esp-footer{ background:var(--ink-2); border-top:1px solid var(--rule); } .esp-footer .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px); } .esp-footer .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-block:56px 30px; } @media(max-width:760px){ .esp-footer .foot-grid{ grid-template-columns:1fr 1fr; } } .esp-footer h5{ font-family:system-ui,sans-serif; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; } .esp-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.9rem; color:var(--paper-dim); } .esp-footer ul a{ text-decoration:none; } .esp-footer ul a:hover{ color:var(--gold); } .esp-footer .logo img{ height:32px; width:auto; } .foot-note{ color:var(--paper-dim); font-size:0.9rem; max-width:34ch; margin:0; } .foot-placeholder{ color:var(--paper-dim); font-style:italic; font-size:0.82rem; } .foot-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:20px; border-top:1px solid var(--rule); font-family:system-ui,sans-serif; font-size:0.72rem; color:var(--paper-dim); } /* ================================================================ Sobrescreve o tema Astra e o Kit do Elementor. Sem isso o fundo volta a branco e os titulos ficam azul-escuro. ================================================================ */ html body{ background-color:var(--ink) !important; color:var(--paper) !important; } html body.ast-separate-container #content, html body .site-content, html body .ast-container{ background:transparent !important; } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6{ color:var(--paper); } html body .elementor-heading-title{ color:var(--paper); } html body .esp-h3 .elementor-heading-title{ color:var(--paper); } html body .hero h1 em{ color:var(--gold); } html body .eyebrow{ color:var(--gold); } html body .pillar-num{ color:var(--gold); } html body .esp-step .n{ color:var(--gold); } html body .esp-footer h5{ color:var(--gold); } html body .hero-stats div strong, html body .about-credits div strong{ color:var(--gold); } html body p{ color:inherit; } html body .esp-lead p, html body .dim, html body .hero-sub, html body .foot-note, html body .esp-step p, html body .pillar-body p{ color:var(--paper-dim); } html body a{ color:inherit; text-decoration:none; } html body .esp-footer ul a:hover, html body .esp-header nav.links a:hover{ color:var(--gold); } /* faixa dourada do final: tudo escuro em cima do dourado */ html body .esp-cta, html body .esp-cta h2, html body .esp-cta .eyebrow, html body .esp-cta .elementor-heading-title{ color:var(--ink) !important; } /* o Elementor injeta margens proprias nos widgets */ html body .elementor-widget:not(:last-child){ margin-bottom:0; } html body .esp-flat .elementor-element{ margin:0; } /* o Astra estiliza .elementor-widget-heading .elementor-heading-title, que tem especificidade maior que os seletores acima */ html body .elementor-widget-heading .elementor-heading-title{ color:var(--paper) !important; } html body .esp-cta .elementor-widget-heading .elementor-heading-title{ color:var(--ink) !important; } html body .elementor-widget-text-editor{ color:var(--paper); } html body .elementor-widget-text-editor .dim, html body .esp-lead .elementor-widget-container p{ color:var(--paper-dim); } html body .esp-tcard .quote{ color:var(--paper); } html body .esp-tcard .who{ color:var(--paper-dim); } html body .esp-btn-ghost .elementor-button{ background-color:transparent !important; color:var(--paper) !important; } html body .esp-btn-ghost .elementor-button:hover{ color:var(--gold) !important; } html body .esp-btn-dark .elementor-button{ background-color:var(--ink) !important; color:var(--paper) !important; } /* titulo de secao colado na grade que vem logo abaixo */ html body .esp-sec-head > .elementor-container{ padding-bottom:26px; } /* as fotos dos pilares sao claras demais: escurece pro texto aparecer */ html body .esp-pillar::after{ background:linear-gradient(180deg, rgba(1,1,1,0.62) 0%, rgba(1,1,1,0.70) 45%, rgba(1,1,1,0.94) 100%); } html body .esp-pillar:hover::after{ background:linear-gradient(180deg, rgba(1,1,1,0.48) 0%, rgba(1,1,1,0.60) 45%, rgba(1,1,1,0.90) 100%); } html body .pillar-body h3{ text-shadow:0 2px 12px rgba(0,0,0,0.8); } /* CORRECAO: o Elementor aplica o fundo da coluna em .elementor-widget-wrap (.elementor-element-populated), que fica DENTRO da coluna. Um ::after na coluna fica embaixo da foto. O escurecimento tem que ir no proprio wrap. */ html body .esp-pillar::after{ display:none; } html body .esp-pillar > .elementor-widget-wrap{ position:relative; } html body .esp-pillar > .elementor-widget-wrap::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(1,1,1,0.58) 0%, rgba(1,1,1,0.66) 40%, rgba(1,1,1,0.93) 100%); transition:background .25s ease; } html body .esp-pillar:hover > .elementor-widget-wrap::before{ background:linear-gradient(180deg, rgba(1,1,1,0.42) 0%, rgba(1,1,1,0.54) 40%, rgba(1,1,1,0.88) 100%); } html body .esp-pillar .elementor-widget{ position:relative; z-index:2; } /* ================================================================ Correcoes da auditoria de interface - 06/10/2026 Medido no navegador, nao no olho. ================================================================ */ /* [1] Faixa dourada do final. O gradiente comecava no marrom #473118 e o texto escuro dava 1,71:1 - reprova WCAG (precisa 4,5:1 no rotulo pequeno). Comecando no dourado, o pior caso passa a 6,4:1. */ html body .esp-cta{ background:linear-gradient(120deg, #b88518 0%, #c99a28 45%, #d9a52f 78%, #e8bb52 100%); } /* [2] Filtro do portfolio. Os radios tem opacity:0, entao o contorno de foco do teclado era pintado num elemento invisivel: quem navega por Tab chegava no filtro sem nenhuma pista. Marca o rotulo correspondente. */ html body .esp-portfolio #f-all:focus-visible ~ .tabs label[for="f-all"], html body .esp-portfolio #f-tat:focus-visible ~ .tabs label[for="f-tat"], html body .esp-portfolio #f-mur:focus-visible ~ .tabs label[for="f-mur"], html body .esp-portfolio #f-tel:focus-visible ~ .tabs label[for="f-tel"], html body .esp-portfolio #f-graf:focus-visible ~ .tabs label[for="f-graf"]{ outline:3px solid var(--gold-2); outline-offset:3px; background:rgba(184,133,24,0.18); color:var(--paper); } /* [3] Numero do pilar ("01 - Pele") em dourado por cima da foto dava 2,78:1. Uma tarja escura propria garante o contraste sem escurecer a foto toda: passa a 4,7:1. */ html body .pillar-num{ display:inline-block; align-self:flex-start; background:rgba(1,1,1,0.72); padding:3px 9px; border-radius:2px; } /* [4] Movimento. Os hovers (translateY nos botoes, scale nas fotos) rodavam mesmo com "reduzir movimento" ligado no sistema operacional. */ @media (prefers-reduced-motion: reduce){ html body .btn, html body .btn:hover, html body .esp-portfolio .card img, html body .esp-portfolio .card:hover img, html body .esp-pillar > .elementor-widget-wrap::before, html body .elementor-button{ transition:none !important; transform:none !important; } } /* [5] Rotulos abaixo do piso de tamanho (tipografia: raramente abaixo de 12px). As tags do portfolio estavam em 9,6px e o menu em 10,8px. */ html body .esp-portfolio .card figcaption .tag{ font-size:0.74rem; } html body .esp-header nav.links{ font-size:0.78rem; } html body .eyebrow{ font-size:0.78rem; } html body .hero-media-caption{ font-size:0.72rem; } html body .foot-bottom{ font-size:0.76rem; } /* [6] Link de pular para o conteudo: primeiro item focavel da pagina. */ html body .esp-skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:var(--ink); padding:12px 20px; border-radius:2px; font-family:system-ui,sans-serif; font-weight:700; font-size:0.85rem; text-decoration:none; } html body .esp-skip:focus{ left:12px; top:12px; } /* [5b] O Astra define a raiz em ~14,6px, entao os rem do bloco acima renderizaram menores que o pretendido (tag saiu 10,8px em vez de 11,8). Fixando em px para nao depender da raiz do tema. */ html body .esp-portfolio .card figcaption .tag{ font-size:12px; letter-spacing:0.12em; } html body .esp-header nav.links{ font-size:12px; } html body .eyebrow{ font-size:12px; } html body .hero-media-caption{ font-size:11.5px; } html body .foot-bottom{ font-size:12px; } html body .hero-stats div span, html body .about-credits div span, html body .esp-service .list b{ font-size:11.5px; } html body .pillar-num{ font-size:11.5px; } /* ================================================================ PAGINA 404 - 06/10/2026 O Astra entrega uma tela branca sem nada da marca. Como esta folha agora carrega em TODAS as paginas, basta vestir o que ele ja monta. ================================================================ */ html body.error404{ background:var(--ink) !important; } html body.error404 #content, html body.error404 .site-content, html body.error404 .ast-container, html body.error404 .content-area{ background:transparent !important; } html body .error-404.not-found{ max-width:var(--maxw); margin:0 auto; padding:clamp(64px,12vw,140px) clamp(20px,4vw,48px); text-align:center; } html body .ast-404-layout-1{ display:flex; flex-direction:column; align-items:center; gap:18px; } html body .error-404 .page-title{ font-family:"Arial Narrow","Franklin Gothic Medium",Arial,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; font-size:clamp(2rem,5vw,3.4rem); line-height:1.02; color:var(--paper) !important; margin:0; } html body .error-404 .page-content p{ color:var(--paper-dim); max-width:46ch; margin:0 auto; } /* numero 404 grande em dourado, antes do titulo */ html body .ast-404-layout-1::before{ content:"404"; font-family:"Arial Narrow",Arial,sans-serif; font-weight:800; font-size:clamp(4rem,14vw,8rem); line-height:0.9; color:var(--gold); opacity:0.5; letter-spacing:0.02em; } /* botao de volta pra home */ html body .ast-404-layout-1::after{ content:""; display:block; height:1px; width:200px; background:linear-gradient(90deg,transparent,var(--rule),transparent); margin-top:10px; } html body .esp-404-voltar{ display:inline-flex; align-items:center; gap:8px; font-family:system-ui,sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:14px 26px; border-radius:2px; text-decoration:none; background:var(--gold); color:var(--ink); box-shadow:var(--shadow); margin-top:8px; } html body .esp-404-voltar:hover{ background:var(--gold-2); } /* campo de busca do Astra vestido */ html body .error-404 .search-form{ display:flex; gap:8px; justify-content:center; margin-top:8px; } html body .error-404 .search-field{ background:var(--ink-2); border:1px solid var(--rule); color:var(--paper); padding:12px 16px; border-radius:2px; font-size:16px; min-width:min(320px,70vw); } html body .error-404 .search-field::placeholder{ color:var(--paper-dim); } html body .error-404 .search-field:focus-visible{ outline:3px solid var(--gold-2); outline-offset:2px; } html body .error-404 .search-submit{ background:var(--gold); color:var(--ink); border:0; border-radius:2px; padding:12px 18px; cursor:pointer; font-weight:700; } /* O Astra pinta a propria section.error-404 de branco (cartao do ast-separate-container). Sem isso o 404 fica creme sobre branco. */ html body .error-404.not-found, html body.error404 .ast-separate-container .ast-article-single, html body.error404 .site-content > .ast-container{ background:transparent !important; box-shadow:none !important; border:0 !important; } html body.error404 .site-content{ padding-block:0 !important; } /* O Astra ganhava no fundo do campo e sobrava texto creme sobre branco (1,1:1). */ html body .error-404 .search-field, html body .error-404 input[type="search"]{ background-color:var(--ink-2) !important; border:1px solid var(--rule) !important; color:var(--paper) !important; border-radius:2px !important; } html body .error-404 .search-field::placeholder{ color:var(--paper-dim) !important; opacity:1; } html body .error-404 .search-submit, html body .error-404 .ast-search-submit{ background-color:var(--gold) !important; color:var(--ink) !important; border-radius:2px !important; } /* O link de pular estava saindo dourado sobre dourado (1,46:1): alguma regra de link do tema ganhava da minha. Justo o elemento que existe para quem navega por teclado. */ html body a.esp-skip, html body a.esp-skip:link, html body a.esp-skip:visited, html body a.esp-skip:focus, html body a.esp-skip:hover{ color:var(--ink) !important; background-color:var(--gold) !important; text-decoration:none !important; } /* ---- correcoes da auditoria mobile, 06/10 ---- */ /* O botao de voltar da 404 e um , e a regra de cor de link do tema ganhava da minha: saia dourado sobre dourado (1,46:1). */ html body a.esp-404-voltar, html body a.esp-404-voltar:link, html body a.esp-404-voltar:visited, html body a.esp-404-voltar:hover, html body a.esp-404-voltar:focus{ color:var(--ink) !important; text-decoration:none !important; } /* O Astra imprime DOIS submits no formulario de busca: um