/* ========================================= Letra da Carla — style.css Identidade própria: aquarela delicada, fundo claro. Terracota (marca/CTA) + verde sálvia + rosa empoeirado + dourado leve — paleta inspirada no feed real do Instagram (@letradacarla). Assinatura visual: bordas orgânicas (border-radius assimétrico), traço de aquarela como elemento decorativo, tipografia serif com itálico. Nunca reaproveitar o dark + Barlow Condensed usado nos outros clientes (Alemão Rodas, Schuster, Vitor) — esse cliente pede leveza, não peso. ========================================= */ :root { --bg: #faf5ec; --bg-1: #f6efe2; --bg-2: #f0e6d4; --panel: #fffdf9; --panel-2: #fbf5ea; --line: rgba(70, 48, 34, 0.10); --line-strong: rgba(70, 48, 34, 0.18); --terracotta: #c2795f; --terracotta-light: #d99b83; --terracotta-glow: rgba(194, 121, 95, 0.30); /* Versões escurecidas, exclusivas pra texto pequeno: a cor da marca não alcança o contraste mínimo em 13px sobre creme. Medido, não estimado. */ --terracotta-deep: #a05b40; --gold-deep: #a8873f; --sage: #8a9a72; --sage-light: #a8b791; --sage-glow: rgba(138, 154, 114, 0.28); --rose: #dba9a0; --rose-light: #e9c4bd; --gold: #c3a25e; --gold-light: #d6bb80; --blue: #9dbccb; --text: #3c2e26; --text-dim: #7c6a5c; --text-faint: #a4917f; --radius: 20px; --radius-sm: 12px; --ease: cubic-bezier(.16, .84, .44, 1); --ease-soft: cubic-bezier(.22, 1, .36, 1); --font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-head: "Fraunces", Georgia, serif; } /* ---- Reset ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* O `hidden` do HTML vale display:none pela folha do navegador, que perde pra qualquer `display` declarado numa regra de CSS. Fixar aqui evita que um elemento escondido continue ocupando espaço ou interceptando cliques. */ [hidden] { display: none !important; } html { scroll-behavior: auto; background: var(--bg); } /* O creme fica só no `html` de propósito. Fundo no `body` também pintaria por cima de qualquer camada decorativa em z-index negativo — o fundo do body entra depois dos descendentes negativos na ordem de pintura, e a decoração de ateliê lá embaixo sumiria. Com o creme no canvas do `html`, as camadas pintam acima dele e abaixo do conteúdo, que é onde precisam ficar. */ body { font-family: var(--font); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Sem deslocar nada: só serve pra ancorar as camadas decorativas na altura real da página em vez de na viewport. */ main { position: relative; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; letter-spacing: 0.002em; line-height: 1.18; } em { font-style: italic; color: var(--terracotta); font-weight: 400; } .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } ::selection { background: var(--terracotta); color: #fff; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================= PRELOADER ========================================= */ #preloader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; } /* Visita já em andamento — atualizar a página, ou voltar pra home vindo do catálogo. O atributo é posto por um script no , antes da primeira pintura, então a abertura não chega nem a ser desenhada. */ html[data-abertura="vista"] #preloader { display: none; } #preloader-particles { position: absolute; inset: 0; width: 100%; height: 100%; } .preloader-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px; text-align: center; } .preloader-mark { font-size: 26px; color: var(--gold); margin-bottom: 4px; opacity: 0; filter: blur(6px); } .preloader-logo-main { font-family: var(--font-head); font-size: clamp(28px, 5.4vw, 42px); font-weight: 500; letter-spacing: 0.01em; opacity: 0; filter: blur(6px); color: var(--text); } .preloader-logo-main em { color: var(--terracotta); font-style: italic; } .preloader-logo-sub { font-family: var(--font); font-size: clamp(11px, 1.5vw, 13px); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); opacity: 0; transform: translateY(8px); } body.no-scroll { overflow: hidden; height: 100vh; } /* ========================================= BUTTONS ========================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease); } .btn-sm { padding: 10px 20px; font-size: 12.5px; } .btn-lg { padding: 18px 34px; font-size: 15.5px; } .btn-primary { position: relative; background: var(--terracotta); color: #fff; box-shadow: 0 8px 26px -8px var(--terracotta-glow); } .btn-primary::after { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: inherit; background: radial-gradient(circle, rgba(194, 121, 95, 0.55) 0%, rgba(194, 121, 95, 0.24) 48%, transparent 72%); filter: blur(5px); opacity: 0.7; animation: btn-glow-pulse 2.6s ease-in-out infinite; pointer-events: none; } .btn-primary:hover { background: var(--terracotta-light); transform: translateY(-2px); box-shadow: 0 12px 34px -6px var(--terracotta-glow); } @keyframes btn-glow-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 0.85; transform: scale(1.18); } } .btn-outline { border: 1px solid var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.4); } .btn-outline:hover { border-color: var(--terracotta); transform: translateY(-2px); background: #fff; } /* ========================================= HEADER / NAV ========================================= */ #header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 0; transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); border-bottom: 1px solid transparent; } #header.scrolled { padding: 14px 0; background: rgba(250, 245, 236, 0.88); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-logo-text { font-family: var(--font-head); font-size: 21px; font-weight: 500; color: var(--text); } .nav-logo-text em { color: var(--terracotta); } .nav-links { display: flex; align-items: center; gap: 30px; position: relative; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--text-dim); transition: color 0.3s var(--ease); position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-indicator { position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; border-radius: 2px; background: var(--terracotta); opacity: 0; transition: opacity 0.35s var(--ease-soft); pointer-events: none; will-change: transform, width; } .nav-indicator.visible { opacity: 1; } /* fallback quando não há GSAP (ou reduce-motion): desliza via CSS */ .nav-indicator.tween-css { transition: transform 0.5s var(--ease-soft), width 0.5s var(--ease-soft), opacity 0.35s var(--ease-soft); } .nav-cta { display: flex; align-items: center; gap: 16px; } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 900; background: rgba(250, 245, 236, 0.98); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: var(--font-head); font-size: 28px; font-weight: 500; color: var(--text); } /* ========================================= HERO ========================================= */ #hero { position: relative; min-height: 100vh; display: flex; overflow: hidden; padding-top: 116px; padding-bottom: 40px; } .hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 90% 70% at 78% 15%, #f3e9d8 0%, var(--bg) 55%); } .hero-photo { position: absolute; inset: 0; background-image: url('fotos/hero-casal.jpg'); background-size: cover; background-position: center 20%; transform: translateX(20%); } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 245, 236, 0.92) 0%, rgba(250, 245, 236, 0.5) 100px, transparent 170px), linear-gradient(0deg, var(--bg) 0%, transparent 22%), linear-gradient(100deg, var(--bg) 0%, rgba(250, 245, 236, 0.97) 26%, rgba(250, 245, 236, 0.75) 36%, rgba(250, 245, 236, 0.35) 46%, rgba(250, 245, 236, 0.1) 60%, rgba(250, 245, 236, 0.03) 100%); } .hero-mesh { position: absolute; inset: 0; background: radial-gradient(circle at 12% 85%, rgba(138, 154, 114, 0.14), transparent 45%), radial-gradient(circle at 88% 20%, rgba(219, 169, 160, 0.20), transparent 50%); } .hero-bloom { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; } .hero-bloom-1 { width: 420px; height: 420px; top: -8%; right: 4%; background: rgba(195, 162, 94, 0.22); } .hero-bloom-2 { width: 360px; height: 360px; bottom: -10%; left: -6%; background: rgba(157, 188, 203, 0.20); } .hero-pin { width: 100%; } .hero-container { position: relative; z-index: 2; width: 100%; height: 100%; max-width: 1620px; } #header .container { max-width: 1620px; } .hero-inner { display: flex; align-items: center; min-height: calc(100vh - 220px); } .hero-content { max-width: 620px; } /* Selo do topo: círculo terracota com a estrela, o nome em serifa e um traço fino que passa por baixo do nome e sobe em curva no fim, como uma pincelada que termina de leve. O traço começa depois do círculo, não embaixo dele. */ .hero-kicker { --selo: clamp(27px, 2.6vw, 34px); position: relative; display: inline-flex; align-items: center; gap: 10px; padding-right: clamp(23px, 2.7vw, 34px); margin-bottom: 28px; opacity: 0; transform: translateY(16px); } .hero-kicker::after { content: ''; position: absolute; left: calc(var(--selo) + 6px); right: 0; bottom: 0; height: clamp(10px, 1.15vw, 13px); border-bottom: 1px solid var(--terracotta); border-right: 1px solid var(--terracotta); border-bottom-right-radius: clamp(10px, 1.15vw, 13px); opacity: 0.85; pointer-events: none; } .kicker-selo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--selo); height: var(--selo); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #d99a80 0%, #c47a5f 55%, #b0664b 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 4px 10px -3px rgba(150, 80, 55, 0.45); } .kicker-selo svg { width: 44%; height: 44%; fill: #fff; } .kicker-texto { font-family: var(--font-head); font-size: clamp(13px, 1.35vw, 15px); font-weight: 400; letter-spacing: 0.02em; line-height: 1; color: var(--terracotta); padding-bottom: 2px; } .hero-h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 500; line-height: 1.16; margin-bottom: 26px; } .hero-h1 .split-line { display: block; padding-top: 0.14em; } .hero-h1 em { font-style: italic; color: var(--terracotta); } .hero-sub { font-family: var(--font); font-size: clamp(16px, 1.6vw, 18.5px); font-weight: 400; color: var(--text-dim); max-width: 480px; margin-bottom: 36px; opacity: 0; transform: translateY(16px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; opacity: 0; transform: translateY(16px); } .hero-stats { display: flex; flex-wrap: wrap; gap: 34px; opacity: 0; transform: translateY(16px); } /* Visita já em andamento (voltou do catálogo): o hero nasce montado. Esses elementos começam invisíveis porque o JS os traz à tela um a um, entrada que antes acontecia escondida atrás da tela de abertura. Sem a abertura, a visitante ficava vendo a página se montar do zero de novo a cada volta — que é o que parecia um defeito. Aqui, e não só no JS, pra não haver nem um quadro de hero vazio antes de o script rodar. */ html[data-abertura="vista"] .hero-reveal { opacity: 1; transform: none; } .hero-stat { display: flex; flex-direction: column; gap: 4px; } .hero-stat-icon { display: none; } .hero-stat-text { display: contents; } .hero-stat-value { font-family: var(--font-head); font-size: 28px; font-weight: 500; color: var(--text); } .hero-stat-label { font-size: 12.5px; font-weight: 500; color: var(--text-faint); letter-spacing: 0.02em; } .hero-mobile-photo { display: none; } /* ========================================= SECTION HEADER (compartilhado) ========================================= */ section { position: relative; padding: 118px 0; } /* Compactação proporcional à falta de conteúdo, não corte parelho. Medido antes: o CTA tinha 48% de fundo vazio, "como funciona" 36%, depoimentos 31% e diferenciais 30% — enquanto portfólio (19%) e sobre (22%) já estavam bem preenchidos. Apertar todos por igual espremeria justamente os que não precisavam. Aqui cada um cede na medida do ar que tinha. */ #diferenciais { padding: 88px 0; } #depoimentos { padding: 82px 0; } #como-funciona { padding: 77px 0; } .section-header { max-width: 640px; margin-bottom: 54px; } /* Largura acompanhando o título maior: em 680px a segunda linha de "Conversas de verdade, de quem já tem um mural em casa" quebrava em três, desmanchando o corte de linha escrito no HTML. */ .section-header.center { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; } /* Cabeçalho mais perto do conteúdo nas seções que foram compactadas, senão o respiro que saiu das bordas volta pelo meio. */ #diferenciais .section-header, #depoimentos .section-header, #como-funciona .section-header { margin-bottom: 40px; } /* Terracota escurecida só pra texto pequeno: na cor da marca (#c2795f) o rótulo de 13px dava 3.12:1 sobre o creme, abaixo do mínimo legível de 4.5:1 — era literalmente bege sobre bege. Aqui sobe pra 4.76:1 e continua terracota. A cor original segue mandando nos títulos e botões, onde o tamanho grande já garante a leitura. */ .section-label { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 18px; } .section-label.center-label { justify-content: center; } .label-mark { color: var(--gold-deep); font-size: 13px; } /* Título maior: a razão título/corpo estava em 2.42x e layout editorial pede a partir de 2.5x. Aqui chega a 2.8x sem empurrar a página pra baixo, porque a compactação das seções devolve o espaço com juros. */ .section-title { font-size: clamp(30px, 4.3vw, 46px); font-weight: 500; margin-bottom: 20px; line-height: 1.12; } .section-title em { font-style: italic; color: var(--terracotta); } .section-sub { font-family: var(--font); font-size: 16.5px; font-weight: 400; color: var(--text-dim); } .inline-link { color: var(--terracotta); font-weight: 500; border-bottom: 1px solid var(--terracotta-light); } .inline-link:hover { color: var(--terracotta-light); } /* ========================================= DIFERENCIAIS ========================================= */ .diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Profundidade em três camadas em vez de uma sombra só: um fio de luz no topo (o branco por dentro da borda), um contorno curto e rente, e uma sombra larga e muito aberta. É o que separa card "premium" de retângulo com box-shadow. A mancha de aquarela no canto vem por trás do conteúdo, num pseudo-elemento, e some no hover pra não brigar com a leitura. */ .diff-card { position: relative; padding: 34px 28px; border-radius: 22px; background: var(--panel); border: 1px solid rgba(180, 138, 96, 0.55); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 36px rgba(195, 152, 94, 0.16), 0 18px 40px -20px rgba(70, 48, 34, 0.28); transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .diff-card:hover { border-color: rgba(194, 121, 95, 0.7); transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 46px rgba(195, 152, 94, 0.24), 0 24px 48px -22px rgba(70, 48, 34, 0.32); } /* Pincelada de canto: recorte da mesma arte usada no fundo da seção (diferenciais-dupla.webp), um pedaço diferente por card via background-position — sem gerar imagem nova por cor. Bem sutil por padrão (opacity baixa), pra não brigar com o texto. */ .diff-card::after { content: ''; position: absolute; right: -20px; bottom: -18px; width: 120px; height: 80px; background: url('fotos/pinceladas/diferenciais-dupla.webp') no-repeat; background-size: 480px auto; opacity: 0.55; pointer-events: none; z-index: 0; transition: opacity 0.4s var(--ease); } .diff-card > * { position: relative; z-index: 1; } .diff-card:hover::after { opacity: 0.8; } @media (max-width: 860px) { .diff-card::after { display: none; } } .diff-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(194, 121, 95, 0.14); color: var(--terracotta); font-size: 18px; margin-bottom: 20px; box-shadow: 0 6px 16px -8px rgba(194, 121, 95, 0.35); } .diff-card--rose::after { background-position: 0 -40px; } .diff-card--terracotta::after { background-position: -120px -80px; } .diff-card--gold::after { background-position: 0 -120px; } /* Esse recorte é dourado no original — a arte não tem trecho verde. Vira sage com hue-rotate, em vez de pedir/gerar um asset novo só pra isso. */ .diff-card--sage::after { background-position: -80px -120px; filter: hue-rotate(70deg) saturate(0.7) brightness(0.95); } .diff-card h3 { font-family: var(--font-head); font-weight: 500; font-size: 19px; margin-bottom: 10px; } .diff-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; } /* ========================================= PORTFÓLIO — categorias (placeholder até fotos reais) ========================================= */ /* Flex em vez de grade fixa: a Carla controla quantos álbuns existem, e com `repeat(4, 1fr)` uma quantidade que não fecha a linha (5, 6, 9...) deixava buraco na direita. Centralizado, a última linha se resolve sozinha. */ .portfolio-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .portfolio-card { position: relative; flex: 0 1 calc((100% - 66px) / 4); border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); /* Com foto o card é um pra página da categoria; sem foto é um
placeholder. `font`/`text-align` mantêm o card igual se voltar a ser um