/* ========================================================================= EDIFÍCIO TEBAS — Hotsite Identidade "Terra": pedra, barro, memória. Centro Histórico de São Paulo. Paleta e tipografia extraídas da identidade visual do empreendimento. ========================================================================= */ /* ---------- Fontes da identidade ---------- */ /* Avant Garde (destaques) — arquivos locais em public/fonts. Disponível em Book (400) e Demi (600). Pesos 300/500/700 mapeiam p/ o mais próximo. */ @font-face { font-family: "Avant Garde"; src: url("../../public/fonts/avantgarde-bk-bt-2/AVGARDN_2.TTF") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Avant Garde"; src: url("../../public/fonts/avantgarde-bk-bt-2/AVGARDD_2.TTF") format("truetype"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Avant Garde"; src: url("../../public/fonts/avantgarde-bk-bt-2/AVGARDDO_2.TTF") format("truetype"); font-weight: 600 700; font-style: italic; font-display: swap; } /* Elza (subtítulos e textos) é carregada via Typekit no — família "elza". */ /* ---------- Tokens ---------- */ :root { /* Paleta Terra (HEX exatos da identidade) */ --brown: #391D1A; /* terra escura / tinta quente */ --brown-deep: #2A1512; /* variação mais profunda p/ fundos */ --oxblood: #773332; /* barro / terracota — accent primário */ --oxblood-hi: #914240; /* hover */ --bone: #E3E2D0; /* papel / osso */ --bone-soft: #EDECDE; /* papel mais claro */ --blue: #93BFC0; /* água / Chafariz — accent secundário */ --olive: #79785C; /* pedra esverdeada */ --sage: #A4A289; /* pedra clara */ /* Papéis semânticos */ --bg: var(--bone); --ink: var(--brown); --muted: #5c4a44; /* texto secundário sobre osso (contraste AA) */ --accent: var(--oxblood); /* Tipografia — fontes reais da identidade */ --font-display: "Avant Garde", "Century Gothic", "Trebuchet MS", sans-serif; /* destaques */ --font-text: "elza", system-ui, "Segoe UI", sans-serif; /* subtítulos e textos */ /* Ritmo */ --maxw: 1280px; --gutter: clamp(1.25rem, 5vw, 5rem); --section-y: clamp(5rem, 12vw, 11rem); /* z-index scale */ --z-nav: 60; --z-progress: 70; --z-overlay: 40; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; font-weight: 400; letter-spacing: 0.005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } .sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } a { color: inherit; text-decoration: none; } ::selection { background: var(--oxblood); color: var(--bone); } /* Foco visível e acessível */ :focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 2px; } .on-dark :focus-visible { outline-color: var(--blue); } /* ---------- Tipografia utilitária ---------- */ .display { font-family: var(--font-display); font-weight: 700; line-height: 0.92; letter-spacing: -0.02em; text-wrap: balance; } .eyebrow { font-family: var(--font-text); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; } .lead { font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem); line-height: 1.5; font-weight: 300; } h2.section-title { font-family: var(--font-display); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; font-size: clamp(2.4rem, 1.4rem + 5vw, 6rem); margin: 0; } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } section[id], [id="book"] { scroll-margin-top: 84px; } .on-dark { background: var(--brown); color: var(--bone); } .on-dark .muted, .on-dark .lead { color: #cfceba; } .on-oxblood { background: var(--oxblood); color: var(--bone); } /* ---------- Botões / CTA ---------- */ .btn { --bg-btn: var(--oxblood); --fg-btn: var(--bone); display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-text); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.95em 1.6em; background: var(--bg-btn); color: var(--fg-btn); border: 1px solid var(--bg-btn); border-radius: 2px; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; will-change: transform; } .btn svg { width: 1.15em; height: 1.15em; flex: none; } .btn:hover { background: var(--oxblood-hi); } .btn--ghost { --bg-btn: transparent; --fg-btn: var(--ink); border-color: currentColor; } .btn--ghost:hover { background: var(--ink); color: var(--bone); } .on-dark .btn--ghost { --fg-btn: var(--bone); } .on-dark .btn--ghost:hover { background: var(--bone); color: var(--brown); } .btn--bone { --bg-btn: var(--bone); --fg-btn: var(--brown); border-color: var(--bone); } .btn--bone:hover { background: #fff; } .btn--lg { font-size: 1.05rem; padding: 1.1em 2em; } .link-underline { position: relative; font-weight: 600; letter-spacing: 0.02em; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left bottom; transition: background-size .3s ease; } .link-underline:hover { background-size: 100% 1.5px; } /* ============================ NAV ============================ */ .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--oxblood); z-index: var(--z-progress); transition: width .1s linear; } .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.9rem, 2vw, 1.5rem) var(--gutter); color: var(--bone); transition: background-color .4s ease, padding .4s ease, color .4s ease, box-shadow .4s ease; } .nav--solid { background: color-mix(in srgb, var(--brown) 92%, transparent); backdrop-filter: blur(10px); padding-block: 0.7rem; box-shadow: 0 1px 0 rgba(227,226,208,.12); } .nav__logo { display: block; color: currentColor; } .nav__logo svg { height: 26px; width: auto; fill: currentColor; display: block; } .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); } .nav__links a.navlink { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: .85; transition: opacity .2s ease; } .nav__links a.navlink:hover { opacity: 1; } .nav__cta { padding: 0.7em 1.15em; font-size: 0.85rem; } .nav__right { display: flex; align-items: center; gap: 0.6rem; } .nav__burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer; background: transparent; border: 0; color: currentColor; flex-direction: column; gap: 5px; } .nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Painel do menu mobile */ .mobile-menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; padding: clamp(2rem, 12vh, 6rem) var(--gutter) 3rem; background: color-mix(in srgb, var(--brown) 97%, transparent); backdrop-filter: blur(14px); color: var(--bone); } .mobile-menu[hidden] { display: none; } .mobile-menu__nav { display: flex; flex-direction: column; gap: 0.1rem; } .mobile-menu__nav a { font-family: var(--font-text); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--bone); text-decoration: none; padding: 0.95rem 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 16%, transparent); transition: color .2s ease, padding-left .2s ease; } .mobile-menu__nav a:hover, .mobile-menu__nav a:focus-visible { color: var(--blue); padding-left: 0.3rem; } .mobile-menu__cta { align-self: flex-start; } @media (max-width: 900px) { .nav__links .navlink { display: none; } .nav__burger { display: inline-flex; } } @media (max-width: 560px) { .nav__cta .cta-full { display: none; } } /* ============================ HERO ============================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--brown-deep); color: var(--bone); overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: -12% 0 -6% 0; z-index: -3; background-size: cover; background-position: center 30%; will-change: transform; } .hero__scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(42,21,18,.55) 0%, rgba(42,21,18,.15) 32%, rgba(42,21,18,.72) 78%, rgba(42,21,18,.95) 100%), radial-gradient(120% 90% at 12% 100%, rgba(119,51,50,.55) 0%, rgba(119,51,50,0) 55%); } .hero__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem); } .hero__eyebrow { color: var(--blue); margin-bottom: 1.4rem; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.8rem; } .hero__badge { display: inline-block; white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; padding: 0.4em 0.8em; border: 1px solid var(--blue); color: var(--blue); border-radius: 100px; } .hero__wordmark { display: block; width: min(92%, 940px); margin: 0 0 1.6rem -0.06em; } .hero__wordmark svg { width: 100%; height: auto; fill: var(--bone); } /* Telas baixas (ex.: MacBook Air): o conteúdo é ancorado embaixo, então o wordmark também é limitado pela ALTURA da viewport — assim encolhe em telas curtas e o topo (selo + endereço) nunca fica escondido atrás da nav. (razão do logotipo ≈ 464.61/239.83 → largura 82vh ⇒ altura ~42vh.) */ @media (min-width: 641px) { .hero { padding-top: clamp(78px, 11vh, 108px); } .hero__wordmark { width: min(92%, 940px, 82vh); } } .hero__tagline { max-width: 40ch; font-size: clamp(1.25rem, 1rem + 1.4vw, 2.05rem); font-weight: 300; line-height: 1.32; color: #ece9d6; margin: 0 0 2.2rem; } .hero__tagline b { font-weight: 600; color: var(--bone); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: center; } .hero__stones { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: #cfceba; } .hero__scroll .line { width: 1px; height: 42px; background: linear-gradient(var(--blue), transparent); animation: drip 2.2s ease-in-out infinite; } @media (max-width: 640px){ /* conteúdo flui a partir do topo (com folga p/ a nav) e nunca some atrás dela; o hero cresce se o conteúdo passar da altura da tela, sem cortar nada. */ /* altura orientada ao conteúdo: sem sobra de imagem abaixo dos botões */ .hero { align-items: flex-start; min-height: auto; height: auto; } .hero__inner { padding-top: calc(26px + 2 * clamp(0.9rem, 2vw, 1.5rem) + 1.4rem); padding-bottom: clamp(1.8rem, 6vh, 2.8rem); } /* badge na primeira linha, endereço embaixo */ .hero__eyebrow { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .hero__actions { width: 100%; } .hero__actions .btn { width: 100%; justify-content: center; } } @keyframes drip { 0%,100%{ transform: scaleY(.4); opacity:.4; transform-origin: top; } 50%{ transform: scaleY(1); opacity:1; transform-origin: top; } } /* Grafismo "pedra" recolorável via mask */ .pedra { position: absolute; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; will-change: translate; opacity: .9; } /* ========================================================================= CAMPO DE PEDRAS — aplicação das texturas conforme a identidade. Pedras grandes, sobrepostas e sangrando pelas bordas, deixando "rios" de espaço negativo. Cor via --stone; recorte no container da seção. ========================================================================= */ .has-stones { position: relative; overflow: hidden; isolation: isolate; } .has-stones > *:not(.stonefield) { position: relative; z-index: 2; } .stonefield { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .stonefield .pedra { aspect-ratio: 665 / 900; background: var(--stone, var(--olive)); opacity: var(--stone-opacity, 1); } /* atribui as 6 texturas (pedra-01..06) ciclicamente por posição */ .stonefield .pedra:nth-child(6n+1){ -webkit-mask-image:url('../../public/images/grafismos/pedra-01.png'); mask-image:url('../../public/images/grafismos/pedra-01.png'); } .stonefield .pedra:nth-child(6n+2){ -webkit-mask-image:url('../../public/images/grafismos/pedra-02.png'); mask-image:url('../../public/images/grafismos/pedra-02.png'); } .stonefield .pedra:nth-child(6n+3){ -webkit-mask-image:url('../../public/images/grafismos/pedra-03.png'); mask-image:url('../../public/images/grafismos/pedra-03.png'); } .stonefield .pedra:nth-child(6n+4){ -webkit-mask-image:url('../../public/images/grafismos/pedra-04.png'); mask-image:url('../../public/images/grafismos/pedra-04.png'); } .stonefield .pedra:nth-child(6n+5){ -webkit-mask-image:url('../../public/images/grafismos/pedra-05.png'); mask-image:url('../../public/images/grafismos/pedra-05.png'); } .stonefield .pedra:nth-child(6n+6){ -webkit-mask-image:url('../../public/images/grafismos/pedra-06.png'); mask-image:url('../../public/images/grafismos/pedra-06.png'); } /* ---- SCATTER: 4 pedras GRANDES ancoradas nos cantos, sangrando forte. As partes visíveis não se tocam — cruz de espaço negativo p/ o texto. ---- */ .stonefield--scatter .pedra:nth-child(1){ width: clamp(260px,34vw,560px); top:-16%; left:-11%; rotate:-6deg; } .stonefield--scatter .pedra:nth-child(2){ width: clamp(280px,37vw,600px); top:-19%; right:-10%; rotate:7deg; } .stonefield--scatter .pedra:nth-child(3){ width: clamp(240px,33vw,540px); bottom:-46%; left:-9%; rotate:6deg; } .stonefield--scatter .pedra:nth-child(4){ width: clamp(260px,35vw,570px); bottom:-48%; right:-10%; rotate:-7deg; } /* ---- SINGLE: uma pedra GRANDE única atrás de toda a seção (Rota 02) ---- */ .stonefield--single { display: grid; place-items: center; } .stonefield--single .pedra { position: relative; width: clamp(340px,46vw,760px); rotate:-5deg; } /* ---- CORNERS: pedras GRANDES entrando por cantos opostos (CTA) ---- */ .stonefield--corners .pedra:nth-child(1){ width: clamp(280px,40vw,640px); top:-14%; left:-11%; rotate:-9deg; } .stonefield--corners .pedra:nth-child(2){ width: clamp(250px,34vw,540px); bottom:-18%; right:-10%; rotate:8deg; } /* ---- CLUSTER: pedra GRANDE dominante + apoio, num canto (Rota 04) ---- */ .stonefield--cluster .pedra:nth-child(1){ width: clamp(300px,40vw,620px); top:-16%; right:-8%; rotate:9deg; } .stonefield--cluster .pedra:nth-child(2){ width: clamp(200px,26vw,400px); top:46%; right:-4%; rotate:-8deg; } @media (max-width: 720px){ /* no mobile mantém só 2 pedras grandes (topo) p/ não sufocar o texto */ .stonefield--scatter .pedra:nth-child(3), .stonefield--scatter .pedra:nth-child(4){ display:none; } .stonefield--cluster .pedra:nth-child(2){ display:none; } } /* ============================ MANIFESTO ============================ */ .manifesto { position: relative; overflow: hidden; text-align: center; } .manifesto .wrap { position: relative; z-index: 2; } .manifesto__statement { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1rem + 6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; margin: 0 auto; text-wrap: balance; } .manifesto__statement b { font-weight: 700; color: inherit; } .manifesto__pedra-bg { position: absolute; inset: 0; z-index: 0; opacity: .1; pointer-events: none; } /* ============================ HISTÓRIA ============================ */ .rota-label { display: inline-flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1.4rem; } .rota-label .num { font-family: var(--font-display); font-weight: 700; color: var(--oxblood); font-size: 0.95rem; letter-spacing: 0.05em; } .rota-label .rule { width: 2.4rem; height: 2px; background: var(--oxblood); transform: translateY(-4px); } .on-dark .rota-label .num, .on-dark .rota-label .rule { color: var(--blue); background: var(--blue); } .on-dark .rota-label .num { background: none; } .story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .story-copy p + p { margin-top: 1.15rem; } .story-copy .muted { color: var(--muted); } .on-dark .story-copy .muted { color: #cfceba; } .pull-quote { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0; color: var(--bone); } .pull-quote b { font-weight: 700; color: var(--blue); } .pull-quote cite { display: block; margin-top: 1.4rem; font-family: var(--font-text); font-style: normal; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #b7b6a2; } .story-figure { position: relative; } .story-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; } .figframe { position: relative; overflow: hidden; } .figcaption { margin-top: 0.8rem; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); } .on-dark .figcaption { color: #b7b6a2; } @media (max-width: 820px){ .story-grid{ grid-template-columns: 1fr; gap: 2.5rem; } } /* ============================ EDIFÍCIO / NÚMEROS ============================ */ .years { display: flex; align-items: center; justify-content: center; gap: clamp(1rem,4vw,3rem); font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(3rem, 1rem + 12vw, 11rem); line-height: 1; color: var(--ink); } .years .arrow { color: var(--oxblood); font-size: .5em; } .years-poster { padding-block: clamp(1.5rem, 5vw, 4rem); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,3vw,2rem); margin-top: clamp(2.5rem,6vw,4.5rem); } .stat { border-top: 2px solid var(--oxblood); padding-top: 1rem; } .stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem,1rem+4vw,4rem); line-height: 1; letter-spacing: -0.02em; } .stat .lbl { margin-top: .5rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } @media (max-width: 720px){ .stats{ grid-template-columns: repeat(2,1fr); } } /* ============================ UNIDADES ============================ */ .units { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(3rem,7vw,5rem); } .unit { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; } .unit:nth-child(even) .unit__media { order: 2; } .unit__media { background: var(--bone-soft); border: 1px solid rgba(57,29,26,.12); border-radius: 2px; padding: clamp(1rem,3vw,2.5rem); } .on-dark .unit__media { background: #2f1714; border-color: rgba(227,226,208,.14); } .unit__media img { width: 100%; height: auto; mix-blend-mode: multiply; } .on-dark .unit__media img { mix-blend-mode: normal; } .unit__area { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem,1rem+6vw,5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--oxblood); } .on-dark .unit__area { color: var(--blue); } .unit__area sup { font-size: 0.32em; font-weight: 600; vertical-align: super; margin-left: .2em; letter-spacing: .05em; } .unit__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0.6rem 0 0.4rem; letter-spacing: -0.01em; } .unit__desc { color: var(--muted); max-width: 42ch; } .on-dark .unit__desc { color: #cfceba; } @media (max-width: 780px){ .unit{ grid-template-columns: 1fr; gap: 1.5rem; } .unit:nth-child(even) .unit__media{ order: 0; } } /* ============================ ACORDEÃO DE UNIDADES (expanding panels) ============================ */ .accordion { display: flex; gap: clamp(8px, 1vw, 14px); height: clamp(440px, 62vh, 640px); margin-top: clamp(2rem, 5vw, 3.5rem); } .acc-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 3px; cursor: pointer; isolation: isolate; transition: flex-grow .6s cubic-bezier(.2,.7,.2,1); outline-offset: 3px; } /* repouso: 3 painéis iguais, só com títulos. Ao interagir, tudo comprime… */ .accordion:hover .acc-panel, .accordion:focus-within .acc-panel { flex-grow: .7; } /* …e o painel ativo expande */ .accordion .acc-panel:hover, .accordion .acc-panel:focus-within { flex-grow: 3; } .acc-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .acc-panel:hover .acc-img, .acc-panel:focus-within .acc-img { transform: scale(1.06); } .acc-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,21,18,.05) 0%, rgba(42,21,18,.15) 42%, rgba(42,21,18,.85) 100%); } .acc-body { position: absolute; inset: auto 0 0 0; padding: clamp(1.2rem,2.2vw,2rem); color: var(--bone); } .acc-area { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,3.4vw,3.2rem); line-height: .9; letter-spacing: -0.02em; white-space: nowrap; } .acc-area sup { font-size: .3em; font-weight: 600; margin-left: .15em; vertical-align: super; } .acc-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem,1.5vw,1.5rem); margin: .4rem 0 0; letter-spacing: -0.01em; } .acc-more { max-width: 44ch; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px); transition: opacity .5s ease, max-height .6s ease, transform .5s ease, margin .5s ease; } .acc-panel:hover .acc-more, .acc-panel:focus-within .acc-more { opacity: 1; max-height: 18rem; transform: none; margin-top: .9rem; } /* quando o acordeão está sendo interagido, some o texto dos painéis não-ativos */ .accordion:hover .acc-panel:not(:hover):not(:focus-within) .acc-more, .accordion:focus-within .acc-panel:not(:hover):not(:focus-within) .acc-more { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(8px); } .acc-more p { margin: 0 0 1rem; color: #f0eede; font-size: .98rem; line-height: 1.5; } @media (max-width: 780px) { /* no mobile: 3 cards abertos em sequência, altura acompanha o conteúdo */ .accordion { flex-direction: column; height: auto; } .acc-panel { flex: none; height: auto; min-height: 340px; display: flex; align-items: flex-end; } .accordion:hover .acc-panel, .accordion:focus-within .acc-panel, .accordion .acc-panel:hover, .accordion .acc-panel:focus-within { flex-grow: 0; } .acc-panel::after { background: linear-gradient(180deg, rgba(42,21,18,.2), rgba(42,21,18,.55) 45%, rgba(42,21,18,.9)); } .acc-body { position: relative; z-index: 1; } .acc-more { opacity: 1 !important; max-height: none !important; transform: none !important; margin-top: .9rem !important; } } @media (prefers-reduced-motion: reduce) { .acc-panel, .acc-bg, .acc-more { transition: none; } } /* ============================ EXPERIÊNCIA (galeria) ============================ */ .exp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: end; margin-bottom: clamp(2.5rem,5vw,4rem); } @media (max-width: 780px){ .exp-intro{ grid-template-columns: 1fr; } } .gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.8rem, 1.4vw, 1.3rem); } .gallery figure { position: relative; overflow: hidden; border-radius: 2px; margin: 0; } .gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .gallery figure:hover img { transform: scale(1.05); } .gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.2rem 1rem; color: var(--bone); font-weight: 600; letter-spacing: 0.02em; background: linear-gradient(transparent, rgba(42,21,18,.82)); font-size: .95rem; } /* linha 1: 2 imagens (paisagem, mesma proporção); linha 2: 3 imagens (retrato) */ .g-a, .g-b { grid-column: span 3; aspect-ratio: 3/2; } .g-c, .g-d, .g-e { grid-column: span 2; aspect-ratio: 3/4; } @media (max-width: 640px){ .g-a, .g-b { grid-column: span 6; aspect-ratio: 3/2; } .g-c, .g-d, .g-e { grid-column: span 6; aspect-ratio: 16/10; } } /* ============================ LOCALIZAÇÃO ============================ */ /* mapa de fundo, dessaturado, com overlay da cor da seção (terracota) por cima */ #localizacao { overflow: hidden; isolation: isolate; } #localizacao::before { /* camada do mapa */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('../../public/images/tebas/web/maps.webp') center / cover no-repeat; filter: grayscale(1) contrast(1.05); opacity: .28; } #localizacao::after { /* overlay da cor de fundo p/ garantir legibilidade */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--oxblood) 78%, transparent) 0%, color-mix(in srgb, var(--oxblood) 44%, transparent) 52%, color-mix(in srgb, var(--oxblood) 66%, transparent) 100%); } #localizacao > .wrap { position: relative; z-index: 1; } .loc-address { margin-bottom: clamp(2.4rem, 5vw, 3.5rem); } .loc-address .lead { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); } /* cabeçalho de cada coluna — alinha o topo das duas listas lado a lado */ .loc-colhead { font-family: var(--font-text); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #e8d0cc; margin: 0 0 .2rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(227,226,208,.28); } .loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; } @media (max-width: 820px){ .loc-grid{ grid-template-columns: 1fr; } } .transit { list-style: none; margin: 0; padding: 0; } .transit li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(227,226,208,.18); } .transit li .place { font-weight: 500; } .transit li .time { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--blue); letter-spacing: -0.01em; white-space: nowrap; } .transit li .time small { font-size: .55em; font-weight: 600; letter-spacing: .06em; color: #cfceba; margin-left: .2em; } .neighbors { margin-top: 0; } .neighbors .n { padding: 1rem 0; border-bottom: 1px solid rgba(227,226,208,.18); } .neighbors .n b { font-weight: 600; } .neighbors .n span { display: block; color: #b7b6a2; font-size: .9rem; margin-top: .15rem; } .addr-card { align-self: stretch; } /* ============================ FICHA TÉCNICA ============================ */ .credits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: clamp(2rem,5vw,3.5rem); border-top: 1px solid rgba(57,29,26,.16); } .on-dark .credits { border-color: rgba(227,226,208,.18); } .credit { padding: 1.3rem 0; border-bottom: 1px solid rgba(57,29,26,.16); display: flex; flex-direction: column; gap: .25rem; } .credit:nth-child(odd){ padding-right: 2rem; } .credit:nth-child(even){ padding-left: 2rem; border-left: 1px solid rgba(57,29,26,.16); } .on-dark .credit { border-color: rgba(227,226,208,.18); } .credit .role { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .on-dark .credit .role { color: #b7b6a2; } .credit .who { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; } @media (max-width: 640px){ .credits{ grid-template-columns: 1fr; } .credit:nth-child(even){ padding-left: 0; border-left: none; } .credit:nth-child(odd){ padding-right: 0; } } /* ---- Grid "quem faz": cards com foto (P&B) + cargo + nome ---- */ .team { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 1.8vw, 1.6rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (max-width: 1024px){ .team { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px){ /* uma por linha; crop mais baixo (4:3) p/ não virar coluna de retratos altos */ .team { grid-template-columns: 1fr; gap: 1.6rem; } .team .tcard__ph { aspect-ratio: 4 / 3; } } .tcard { margin: 0; } .tcard__ph { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 1 / 1; background: var(--bone-soft); } .tcard__ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%) contrast(1.02); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; } .tcard__ph::after { /* leve véu terra que aparece no hover */ content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--oxblood); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s ease; } .tcard:hover .tcard__ph img { transform: scale(1.06); filter: grayscale(45%) contrast(1.03); } .tcard:hover .tcard__ph::after { opacity: .16; } .tcard figcaption { display: flex; flex-direction: column; gap: .2rem; padding-top: .9rem; } .tcard .role { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .tcard .who { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.15; } /* linha extra: quem não tem foto (Somauma, Ramos de Azevedo) */ .team-extra { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(57,29,26,.16); display: flex; flex-wrap: wrap; gap: .4rem 2.5rem; font-size: .92rem; color: var(--muted); } .team-extra span b { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1rem; } .team-extra span { display: inline-flex; flex-direction: column; gap: .1rem; } .team-extra .role { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } @media (prefers-reduced-motion: reduce){ .tcard__ph img { transition: none; } .tcard:hover .tcard__ph img { transform: none; } } /* ============================ CTA CLÍMAX ============================ */ .cta-final { position: relative; overflow: hidden; text-align: center; } .cta-final .wrap { position: relative; z-index: 2; } .cta-final__title { font-size: clamp(2.4rem, 1rem + 7vw, 6.5rem); margin: 0 0 1rem; } .cta-final__sub { max-width: 46ch; margin: 0 auto 2.6rem; color: #f0eede; font-weight: 300; font-size: clamp(1.1rem,1rem+.6vw,1.4rem); } .cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2.5vw,1.8rem); text-align: left; max-width: 940px; margin: 0 auto; } @media (max-width: 720px){ .cta-cards{ grid-template-columns: 1fr; } } .cta-card { background: color-mix(in srgb, var(--bone) 10%, transparent); border: 1px solid rgba(227,226,208,.28); border-radius: 3px; padding: clamp(1.5rem,3vw,2.4rem); display: flex; flex-direction: column; gap: 1rem; transition: background-color .3s ease, transform .3s ease, border-color .3s ease; } .cta-card:hover { background: color-mix(in srgb, var(--bone) 16%, transparent); border-color: rgba(227,226,208,.5); } .cta-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0; letter-spacing: -0.01em; } .cta-card p { margin: 0; color: #f0eede; font-size: .98rem; flex: 1; } .cta-form { display: flex; flex-direction: column; gap: .7rem; } .cta-form .row { display: flex; gap: .6rem; } .cta-form input { width: 100%; font-family: var(--font-text); font-size: 0.98rem; padding: 0.85em 1em; border-radius: 2px; border: 1px solid rgba(227,226,208,.4); background: rgba(42,21,18,.35); color: var(--bone); } .cta-form input::placeholder { color: #c9c7b3; } .cta-form input:focus-visible { outline-color: var(--blue); border-color: var(--blue); } .form-note { font-size: .74rem; color: #d6d4c2; letter-spacing: .01em; } .form-ok { font-size: .9rem; color: var(--blue); font-weight: 600; } .wa-strip { margin-top: clamp(2rem,4vw,3rem); display: inline-flex; align-items: center; gap: .8rem; font-size: .95rem; color: #f0eede; } /* ============================ FOOTER ============================ */ .footer { background: var(--brown-deep); color: var(--bone); padding-block: clamp(3.5rem,7vw,6rem) 2.5rem; } .footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; } @media (max-width: 780px){ .footer__top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .footer__top{ grid-template-columns: 1fr; } } .footer h4 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #b7b6a2; margin: 0 0 1rem; font-weight: 600; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer a.navlink { opacity: .9; } .footer__brand .by { color: #b7b6a2; font-size: .9rem; margin-top: 1rem; max-width: 34ch; } .footer__brand .by b { color: var(--bone); font-weight: 600; } /* Logo da Somauma recolorida em osso via mask (o SVG é preto) */ .somauma-brand { display: block; margin-top: 1.6rem; width: 121px; aspect-ratio: 1617.89 / 206.58; background: var(--bone); -webkit-mask: url('../../public/images/somauma_logo_black.svg') no-repeat left center / contain; mask: url('../../public/images/somauma_logo_black.svg') no-repeat left center / contain; opacity: .85; transition: opacity .2s ease; } .somauma-brand:hover { opacity: 1; } .footer__bottom { margin-top: clamp(2.5rem,5vw,4rem); padding-top: 1.5rem; border-top: 1px solid rgba(227,226,208,.14); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .8rem; color: #b7b6a2; } .footer__logo svg { height: 30px; fill: var(--bone); } /* ---------- Reveal (scroll) ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .pedra, .hero__bg { translate: none !important; } .hero__scroll .line { animation: none; } .gallery figure img { transition: none; } .lb-stage figure { transition: none !important; } } /* ============================ LIGHTBOX / GALERIA ============================ */ /* toda imagem de conteúdo é clicável */ .story-figure img, .acc-panel, .gallery figure img, .tcard__ph img { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(0.8rem, 3vw, 2.4rem); background: color-mix(in srgb, var(--brown-deep) 90%, #000); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox[hidden] { display: none; } .lightbox.is-in { animation: lbFade .25s ease; } @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } } .lb-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; pointer-events: none; } .lb-stage figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: min(1120px, 100%); max-height: 100%; pointer-events: auto; transition: opacity .22s ease; } .lb-stage.is-swapping figure { opacity: 0; } .lb-stage img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 30px 90px rgba(0,0,0,.55); background: var(--bone); cursor: pointer; } /* plantas são PNGs com fundo transparente — respeitamos a transparência (sem fundo chapado nem sombra), deixando-as "flutuar" sobre o lightbox. */ .lb-stage img.is-planta { background: transparent; box-shadow: none; } .lb-cap { color: var(--bone); font-size: .9rem; letter-spacing: .04em; text-align: center; max-width: 60ch; text-wrap: balance; } .lb-cap .lb-tag { display: inline-block; margin-right: .6rem; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); border: 1px solid var(--blue); border-radius: 100px; padding: .25em .7em; vertical-align: 1px; } /* botões */ .lb-btn { position: absolute; z-index: 2; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--bone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bone) 34%, transparent); color: var(--bone); transition: background-color .2s ease, border-color .2s ease; } .lb-btn:hover { background: color-mix(in srgb, var(--bone) 22%, transparent); border-color: var(--bone); } .lb-btn svg { width: 24px; height: 24px; } .lb-close { top: clamp(0.8rem, 3vw, 1.6rem); right: clamp(0.8rem, 3vw, 1.6rem); } .lb-close::before, .lb-close::after { content: ""; position: absolute; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .lb-close::before { transform: rotate(45deg); } .lb-close::after { transform: rotate(-45deg); } .lb-prev { left: clamp(0.6rem, 2.5vw, 1.6rem); top: 50%; transform: translateY(-50%); } .lb-next { right: clamp(0.6rem, 2.5vw, 1.6rem); top: 50%; transform: translateY(-50%); } .lb-prev svg { transform: scaleX(-1); } .lb-counter { position: absolute; bottom: clamp(0.9rem, 3vw, 1.8rem); left: 50%; transform: translateX(-50%); pointer-events: auto; font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: var(--bone); } .lb-counter b { color: var(--blue); } @media (max-width: 640px) { .lb-btn { width: 44px; height: 44px; } .lb-stage img { max-height: 66vh; } .lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; } .lb-stage figure { gap: .8rem; } }