/* ---------------------------------------------------------------- Custom CSS Add all your Custom Styled CSS here for New Styles or Overwriting Default Theme Styles for Better Handling Updates -----------------------------------------------------------------*/ /* Header — degradê preto→transparente no topo (estilo Porsche). Só no estado transparente (sobre o hero); some quando o header vira sticky/sólido. Melhora a leitura do logo/menu claros antes do scroll. */ #header.transparent-header:not(.sticky-header) #header-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; z-index: 0; } /* Mantém logo e menu acima do degradê */ #header.transparent-header:not(.sticky-header) #header-wrap > .container { position: relative; z-index: 1; } /* Header no mobile (Canvas vira "not-dark"/branco): sem o degradê e com logo à esquerda + 2 CTAs empilhados à direita; hambúrguer mantido. */ @media (max-width: 991.98px) { /* 1) Remove o degradê preto->transparente (header é branco no mobile) */ #header.transparent-header:not(.sticky-header) #header-wrap::before { display: none; } /* 2) Logo à esquerda, restante empurrado à direita */ #header #logo { margin-right: auto; } /* CTAs empilhados (coluna), mesma largura, sem a margem lateral do tema */ #header .header-misc { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } #header .header-misc .button { margin: 0 !important; width: 100%; justify-content: center; } /* Hambúrguer mantido, à direita dos CTAs e centralizado na vertical */ #header .primary-menu-trigger { align-self: center; margin-left: 12px; } /* Respiro vertical para caber as 2 linhas de botão */ #header #header-wrap .header-row { padding-top: 10px; padding-bottom: 10px; } } /* ---------------------------------------------------------------- Preloader / loading page — aparece SÓ na chegada ao site (gate por referrer no ; navegação interna não mostra). O CSS crítico (fundo, overlay, logo, barra, fade, hr-no-preloader, reduced-motion) vive INLINE em src/layouts/Layout.astro, para ficar estilizado desde o 1º paint. Não duplicar aqui. -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- Tema global por scroll (estilo Porsche) — o fundo do BODY transiciona entre claro/escuro (gatilho por in-view via public/js/theme-scroll.js). As sections do trecho ficam transparentes e revelam esse fundo; o conteúdo vira junto com o tema. Reutilizável: data-theme nos marcadores + overrides "body.theme-* # ..." abaixo. -----------------------------------------------------------------*/ /* TUDO por classe (sem #id): - .theme-dark / .theme-light trocam os TOKENS (--theme-*) — classes reutilizáveis (o JS aplica no , mas valem em qualquer container p/ escopar tema). - .theme-section: opt-in que deixa a section transparente e liga a transição. - .theme-* utilitárias: o conteúdo consome os tokens. Princípio: toda cor que depende do tema é um token (par light/dark). */ /* Fallback (dark) p/ var() sempre resolver, mesmo sem classe de estado */ :root { --theme-bg: #111111; --theme-text: #ffffff; --theme-muted: #b9b2a8; --theme-faint: #9e9990; --theme-card: #1a1a1a; --theme-soft: rgba(184, 150, 90, 0.08); --theme-tint: #14181f; --theme-input-bg: rgba(255, 255, 255, 0.06); --theme-input-text: #ffffff; --theme-input-border: rgba(255, 255, 255, 0.2); --theme-input-placeholder: rgba(255, 255, 255, 0.5); --theme-border: rgba(255, 255, 255, 0.1); --theme-accent: #b8965a; } /* Estado do tema (classe reutilizável) */ .theme-dark { --theme-bg: #111111; --theme-text: #ffffff; --theme-muted: #b9b2a8; --theme-faint: #9e9990; --theme-card: #1a1a1a; --theme-soft: rgba(184, 150, 90, 0.08); --theme-tint: #14181f; --theme-input-bg: rgba(255, 255, 255, 0.06); --theme-input-text: #ffffff; --theme-input-border: rgba(255, 255, 255, 0.2); --theme-input-placeholder: rgba(255, 255, 255, 0.5); --theme-border: rgba(255, 255, 255, 0.1); --theme-accent: #b8965a; } .theme-light { --theme-bg: #ffffff; --theme-text: #1a1814; --theme-muted: #5a5248; --theme-faint: #7a7268; --theme-card: #ffffff; --theme-soft: #f5f0e8; --theme-tint: #edf2fa; --theme-input-bg: #ffffff; --theme-input-text: #1a1814; --theme-input-border: #1a1814; --theme-input-placeholder: #7a7268; --theme-border: rgba(26, 24, 20, 0.1); --theme-accent: #b8965a; } /* Fundo global da página */ body { background-color: var(--theme-bg); transition: background-color 1000ms ease; } /* Opt-in por section: transparente (revela o fundo global) + transição GERAL (na section e nos filhos). Section SEM esta classe não transiciona nem fica transparente. */ .theme-section { background: transparent !important; } .theme-section, .theme-section * { transition: color 1000ms ease, background-color 1000ms ease, border-color 1000ms ease, box-shadow 1000ms ease; } /* Utilitárias de conteúdo — consomem os tokens. !important p/ vencer cor inline e as regras por #id do tema Canvas (new-construction.css) sem reescrever aquele arquivo. */ .theme-text { color: var(--theme-text) !important; } .theme-muted { color: var(--theme-muted) !important; } .theme-faint { color: var(--theme-faint) !important; /* texto terciário: dark #9E9990 / light #7A7268 */ } .theme-accent { color: var(--theme-accent) !important; } .theme-surface { background-color: var(--theme-bg) !important; } .theme-card { background-color: var(--theme-card) !important; border: 1px solid var(--theme-border) !important; /* !important vence a transition por #id do tema Canvas (ex.: #residences .hr-res-card), garantindo o fade do fundo/borda; mantém o hover (transform/box-shadow) em 300ms. */ transition: background-color 1000ms ease, border-color 1000ms ease, box-shadow 300ms ease, transform 300ms ease !important; } .theme-soft { background-color: var(--theme-soft) !important; } .theme-tint { background-color: var(--theme-tint) !important; } /* Campos de formulário temáveis (claro = original; dark = bg translúcido + texto branco) */ .theme-input { background-color: var(--theme-input-bg) !important; color: var(--theme-input-text) !important; border-color: var(--theme-input-border) !important; } .theme-input::placeholder { color: var(--theme-input-placeholder) !important; } .theme-input:focus { border-color: var(--theme-accent) !important; /* mantém o foco dourado nos dois temas */ } .theme-border { border-color: var(--theme-border) !important; } @media (prefers-reduced-motion: reduce) { body, .theme-section, .theme-section * { transition: none; } /* !important para anular a transition !important do .theme-card */ .theme-card { transition: none !important; } } /* #wrapper e #content são opacos por padrão (var --cnvs-body-bg) — torná-los transparentes para o fundo global do body aparecer atrás das sections do trecho. As sections opacas fora do trecho continuam cobrindo o body normalmente. */ #wrapper, #content { background: transparent !important; } /* (As regras de tema por #id foram removidas — agora é tudo via classes: .theme-section + utilitárias .theme-* nas próprias sections/markup.) */ /* ---------------------------------------------------------------- Botão flutuante do WhatsApp (fixo, canto inferior esquerdo) -----------------------------------------------------------------*/ .hr-whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 15px; left: 15px; background-color: #25d366; color: #ffffff; border-radius: 50px; font-size: 30px; z-index: 100; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 200ms ease-out, background-color 200ms ease-out; } .hr-whatsapp-float:hover, .hr-whatsapp-float:focus-visible { color: #ffffff; background-color: #1ebe5b; transform: scale(1.06); } .hr-whatsapp-float:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .hr-whatsapp-float { transition: none; } .hr-whatsapp-float:hover, .hr-whatsapp-float:focus-visible, .hr-whatsapp-float:active { transform: none; } } /* ---------------------------------------------------------------- Instagram — grade dos embeds oficiais (entorno; o card é do IG). -----------------------------------------------------------------*/ #instagram .hr-ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; justify-items: center; align-items: start; max-width: 1140px; margin: 0 auto; } /* ---------------------------------------------------------------- Marcas — marquee de logos em 2 linhas contínuas, direções opostas. Recria o ".marquee-slide" do Crafto só com CSS (sem Swiper/plugin): deslize linear infinito (translateX até -50% de um track duplicado), fade nas bordas via mask (equivalente ao .feather-shadow) e pausa no hover. Logos em escala de cinza; ganham cor no hover. -----------------------------------------------------------------*/ #marcas .hr-marquee { display: flex; flex-direction: column; gap: 20px; } #marcas .hr-marquee-row { overflow: hidden; -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } #marcas .hr-marquee-track { display: flex; width: max-content; will-change: transform; animation: hr-marquee 48s linear infinite; } /* 2ª linha: sentido inverso e velocidade levemente diferente (organico) */ #marcas .hr-marquee-row-reverse .hr-marquee-track { animation-duration: 56s; animation-direction: reverse; } /* Pausa para o olho — e para o hover devolver a cor do logo */ #marcas .hr-marquee-row:hover .hr-marquee-track { animation-play-state: paused; } #marcas .hr-marquee-group { display: flex; } @keyframes hr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } #marcas .hr-marca-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; width: 238px; background-color: #ffffff; border: 1px solid rgba(26, 24, 20, 0.08); margin-right: -1px; /* colapsa as bordas vizinhas num fio único */ padding: 28px 24px; min-height: 120px; } #marcas .hr-marca-selo { font-family: "DM Sans", sans-serif; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #b8965a; } #marcas .hr-marca-logo { width: auto; height: auto; max-width: 100%; /* nunca estoura a célula do marquee */ object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 250ms ease-out, opacity 250ms ease-out; } #marcas .hr-marca-item:hover .hr-marca-logo { filter: grayscale(0); opacity: 1; } @media (max-width: 575px) { #marcas .hr-marca-item { width: 180px; padding: 22px 18px; min-height: 100px; } } /* Reduced motion: sem deslize — vira uma parede estática (esconde a cópia) */ @media (prefers-reduced-motion: reduce) { #marcas .hr-marca-logo { transition: none; } #marcas .hr-marquee-track { animation: none; width: auto; } #marcas .hr-marquee-group { flex-wrap: wrap; justify-content: center; } #marcas .hr-marquee-group[aria-hidden="true"] { display: none; } #marcas .hr-marquee-row { -webkit-mask-image: none; mask-image: none; } } /* ---------------------------------------------------------------- Heroes de páginas internas (sobre/contato) O tema só posiciona `#hero .hr-hero-content` (z-index:2). Em outros heroes (`#sobre-hero`, `#contato-hero`) o conteúdo ficava ATRÁS do gradiente (overlay z-index:1) e os botões inacessíveis. Generalizamos para qualquer hero que use `.hr-hero-content`. -----------------------------------------------------------------*/ .hr-hero-content { position: relative; z-index: 2; width: 100%; } /* Mobile: botões do hero empilhados e centralizados (igual ao #hero) */ @media (max-width: 767px) { .hr-hero-content .d-flex.gap-3 { flex-direction: column; gap: 12px !important; } .hr-hero-content .d-flex.gap-3 .button { text-align: center; } } /* ---------------------------------------------------------------- Contato — cards de loja (mapa + endereço) -----------------------------------------------------------------*/ #lojas .hr-store-card { display: flex; flex-direction: column; height: 100%; background-color: #ffffff; border: 1px solid rgba(26, 24, 20, 0.08); } #lojas .hr-store-map { position: relative; aspect-ratio: 4 / 3; background-color: #f0efec; } #lojas .hr-store-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); transition: filter 400ms ease; } #lojas .hr-store-card:hover .hr-store-map iframe { filter: grayscale(0) contrast(1); } #lojas .hr-store-body { display: flex; flex-direction: column; gap: 18px; padding: 28px 26px; flex: 1; } #lojas .hr-store-city { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: #1a1814; margin: 0; } #lojas .hr-store-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } #lojas .hr-store-list li { display: flex; align-items: flex-start; gap: 12px; font-family: "DM Sans", sans-serif; font-size: 0.9375rem; line-height: 1.6; color: #5a5248; } #lojas .hr-store-list li i { color: #b8965a; font-size: 0.95rem; margin-top: 3px; flex-shrink: 0; } #lojas .hr-store-list a { color: #5a5248; text-decoration: none; transition: color 200ms ease; } #lojas .hr-store-list a:hover { color: #b8965a; } #lojas .hr-store-body .hr-btn-outline-gold { align-self: flex-start; } @media (prefers-reduced-motion: reduce) { #lojas .hr-store-list a, #lojas .hr-store-map iframe { transition: none; } } /* ---------------------------------------------------------------- Botão de envio de formulário — generalizado. O CSS do demo só o define escopado a #register (new-construction.css); esta cópia por classe permite usar o em qualquer página/section. -----------------------------------------------------------------*/ .hr-submit-btn { width: 100%; display: block; background: linear-gradient(135deg, #c9a567 0%, #b8965a 50%, #9a7d45 100%); color: #ffffff; font-family: "DM Sans", sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border: none; padding: 20px 36px; cursor: pointer; transition: opacity 0.2s ease; border-radius: 0; } .hr-submit-btn:hover { opacity: 0.88; } /* ---------------------------------------------------------------- Card de imagem + título centralizado (grade de destaques na home). A imagem ocupa 100% da largura do CARD, com proporção fixa (--hr-card-ratio, padrão 1/1 quadrado) e corte central (object-fit: cover) — adapta-se a qualquer arquivo/tamanho. O CARD é menor que a coluna e fica centralizado (--hr-card-size, padrão 320px). Ajustes por card/section: style="--hr-card-size: 260px; --hr-card-ratio: 3/4;" -----------------------------------------------------------------*/ .hr-img-card { /* Coluna flex, não bloco: com `h-100` os cards ficam da mesma altura e o flex é o que permite empurrar o rodapé do card (a meta) para baixo com `margin-top:auto`. Sem altura definida, o comportamento é igual ao de um bloco — as outras seções que usam o card não mudam. */ display: flex; flex-direction: column; max-width: var(--hr-card-size, 320px); margin-left: auto; margin-right: auto; text-decoration: none; } .hr-img-card-media { position: relative; /* Sem isto a imagem seria espremida quando o card é esticado por `h-100`. */ flex: 0 0 auto; aspect-ratio: var(--hr-card-ratio, 1 / 1); overflow: hidden; background-color: #f0efec; /* fundo enquanto a imagem carrega */ } .hr-img-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); } .hr-img-card:hover .hr-img-card-media img { transform: scale(1.04); } .hr-img-card-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; text-align: center; margin: 18px 0 0; } @media (prefers-reduced-motion: reduce) { .hr-img-card-media img { transition: none; } .hr-img-card:hover .hr-img-card-media img { transform: none; } } /* ============================================================================ MANUAIS TÉCNICOS Páginas /manuais/**. O markdown do Astro sai sem classe nenhuma (h2/p/ul/table crus), então a tipografia do corpo vive em .hr-manual-prose. Sem isso o style.css do Canvas assume e o texto foge da direção do projeto. ========================================================================= */ /* Meta do card (páginas · tamanho) — complementa o .hr-img-card já existente. `margin-top:auto` cola a meta no rodapé do card: com `h-100` os cards ficam da mesma altura e as metas se alinham entre si, mesmo com títulos de 1 ou 2 linhas. Depende do .hr-img-card ser flex column (ver acima). */ .hr-img-card-meta { display: block; font-family: "DM Sans", sans-serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: #8a8078; margin-top: auto; margin-bottom: 6px; padding-top: 6px; } /* --- Trilha de navegação --- */ .hr-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0 0 28px; padding: 0; font-family: "DM Sans", sans-serif; font-size: 12px; letter-spacing: 0.06em; } .hr-breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: 0.45; } .hr-breadcrumb a { color: inherit; opacity: 0.65; text-decoration: none; transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1); } .hr-breadcrumb a:hover, .hr-breadcrumb a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .hr-breadcrumb [aria-current="page"] { opacity: 0.45; } /* --- Faixa de metadados do manual --- */ .hr-manual-meta { display: flex; flex-wrap: wrap; gap: 14px 40px; list-style: none; margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } .hr-manual-meta li { display: flex; flex-direction: column; gap: 4px; } .hr-manual-meta span { font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #b8965a; } .hr-manual-meta strong { font-family: "DM Sans", sans-serif; font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.88); } /* --- Corpo do manual --- */ .hr-manual-prose { font-family: "DM Sans", sans-serif; font-size: 1.0625rem; line-height: 1.8; color: #4a443c; max-width: 68ch; } .hr-manual-prose > * { margin-bottom: 1.4em; } .hr-manual-prose h2, .hr-manual-prose h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: #1a1814; /* o header do Canvas é sticky: sem isto a âncora do sumário some atrás dele */ scroll-margin-top: 110px; } .hr-manual-prose h2 { font-size: 34px; margin: 60px 0 0.7em; padding-top: 1.6em; border-top: 1px solid rgba(184, 150, 90, 0.24); } .hr-manual-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .hr-manual-prose h3 { font-size: 25px; margin: 1.8em 0 0.6em; } .hr-manual-prose strong { font-weight: 600; color: #1a1814; } .hr-manual-prose ul, .hr-manual-prose ol { padding-left: 1.3em; } .hr-manual-prose li { margin-bottom: 0.6em; } .hr-manual-prose li::marker { color: #b8965a; } .hr-manual-prose a { color: #1a1814; text-decoration: underline; text-decoration-color: rgba(184, 150, 90, 0.6); text-underline-offset: 3px; } .hr-manual-prose blockquote { margin-left: 0; padding-left: 24px; border-left: 2px solid #b8965a; font-style: normal; color: #5a5248; } /* Tabelas podem exceder a medida do texto e rolam sozinhas no mobile. */ .hr-manual-prose table { width: 100%; max-width: none; border-collapse: collapse; font-size: 0.9375rem; } .hr-manual-prose th, .hr-manual-prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(26, 24, 20, 0.1); } .hr-manual-prose th { font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b8965a; } /* --- Links do rodapé --- */ .hr-footer-links { display: flex; flex-direction: column; gap: 5px; font-weight: 800; align-items: start; margin-top: 4px; } .hr-footer-links a { font-family: "DM Sans", sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1); } .hr-footer-links a:hover, .hr-footer-links a:focus-visible { color: #b8965a; } @media (max-width: 991.98px) { .hr-manual-prose { font-size: 1rem; max-width: none; } .hr-manual-prose h2 { font-size: 28px; } .hr-manual-prose h3 { font-size: 22px; } .hr-manual-prose table { display: block; overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { .hr-breadcrumb a, .hr-footer-links a { transition: none; } }