/* ============================================================ Atelier Lumé — folha de estilo compartilhada (MPA) Tokens + utilitários custom usados em todas as páginas. Tailwind (CDN) cuida do resto; aqui mora só o que é "marca". ============================================================ */ :root{ --ivory:#F7F2EC; --shell:#EFE5DA; --nude:#E3CDBE; --rose:#C99B8C; --rosedk:#A9786A; --clay:#7C5A4E; --espresso:#33231D; --gold:#B08D57; /* tons "tinta" acessiveis: mesma familia terracota, escurecidos o suficiente para passar WCAG AA em texto pequeno sobre os fundos claros (ivory/shell/nude). Usados so onde ha TEXTO de conteudo; os titulos display grandes seguem com --rosedk (passam em 3:1). */ --ink-accent:#8E5847; /* kicker, anotacao, links de acento pequenos */ --ink-num:#9A5E48; /* algarismos editoriais (.num) como conteudo */ /* clay escurecido 1 grau: o --clay (#7C5A4E) passa AA sobre ivory, mas sobre shell/nude (fundos mais escuros) o contraste cai. Onde houver TEXTO DE CONTEUDO sobre shell/nude usamos --clay-deep p/ manter AA (form labels, textos das secoes em bg-shell/bg-nude). */ --clay-deep:#6A4A3F; /* tipografia: display upright (Frank Ruhl Libre) dá voz própria à marca; o acento italico/manuscrito (Cormorant) preserva a assinatura aprovada */ --font-display:"Frank Ruhl Libre", Georgia, serif; --font-accent:"Cormorant Garamond", Georgia, serif; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* rede de seguranca contra overflow horizontal no mobile (a causa tambem e tratada) */ html,body{ overflow-x:hidden; } body{ background:var(--ivory); color:var(--espresso); -webkit-font-smoothing:antialiased; } /* o display upright passa a ser Frank Ruhl Libre; o texto italico do display cai no acento (Cormorant) — onde mora a personalidade manuscrita da marca */ .font-display{ font-family:var(--font-display) !important; } .font-display .italic, .font-display.italic, .italic.font-display{ font-family:var(--font-accent); font-weight:500; } /* kicker / filete -------------------------------------------------- */ .kicker{ font-family:"Jost",sans-serif; font-weight:400; letter-spacing:.42em; text-transform:uppercase; font-size:.66rem; color:var(--ink-accent); /* AA em texto pequeno sobre fundo claro */ } .rule-gold{ height:1px; background:linear-gradient(90deg,var(--gold),rgba(176,141,87,0)); } .rule-gold-c{ height:1px; background:linear-gradient(90deg,rgba(176,141,87,0),var(--gold),rgba(176,141,87,0)); } /* numero grande / algarismos editoriais (acento italico da marca) -- */ .num{ font-family:var(--font-accent); font-style:italic; } /* algarismos como CONTEUDO (passos, marcadores de lista, fichas): o rose claro nao passa AA; usamos a tinta-num (mesma familia, mais escura). Os algarismos grandes "M/C/R/A" usam text-rosedk e sao grandes (3:1 ok) — esta regra cobre o uso rose, que falhava. */ .num.text-rose, .num.text-rose\/80{ color:var(--ink-num) !important; } /* links de acento PEQUENOS (rosedk) viram tinta acessivel; os titulos display em italico continuam /
com --rosedk (grandes). --- */ a.text-rosedk, p.text-rosedk{ color:var(--ink-accent); } /* TEXTO DE LEITURA com opacidade reduzida nao passava AA. Onde o clay transparente carrega conteudo real (fichas tecnicas, endereco do rodape, legendas, "(opcional)"), fixamos o clay solido — que passa AA sobre ivory/shell. So afeta texto-conteudo (a marca d'agua segue intacta). */ .text-clay\/80, .text-clay\/70, .text-clay\/60, .text-clay\/50{ color:var(--clay) !important; /* vence a utilitaria injetada pelo CDN */ } /* CONTRASTE sobre fundos quentes (shell/nude): o --clay perde contraste quando o fundo escurece de ivory p/ shell/nude. Em qualquer secao com esses fundos, o texto-conteudo clay (e suas variantes opacas, ja solidificadas acima) cai p/ --clay-deep, mantendo AA. So texto de conteudo — kicker/anotacao tem token proprio; titulos display sao grandes. A marca d'agua (rules, gradientes) nao usa text-clay. */ .bg-shell .text-clay, .bg-shell .text-clay\/80, .bg-shell .text-clay\/70, .bg-shell .text-clay\/60, .bg-shell .text-clay\/50, [class*="bg-nude"] .text-clay, [class*="bg-nude"] .text-clay\/80, [class*="bg-nude"] .text-clay\/70, [class*="bg-nude"] .text-clay\/60, [class*="bg-nude"] .text-clay\/50{ color:var(--clay-deep) !important; } /* form labels e legendas vivem em card bg-ivory, mas o cliente pediu o grau extra de tinta nos labels do form — aplicamos --clay-deep neles tambem (sao texto pequeno, .text-sm). */ #formAval label > span:first-child{ color:var(--clay-deep) !important; } #formAval label .text-clay\/50{ color:var(--clay-deep) !important; } /* ============================================================ TELA GRANDE — trilho fluido + full-bleed + grids que crescem Em 1920/2560 o layout precisa parecer COMPOSTO, nao um bloco estreito boiando no vazio. Referencia: casa-vereda/vetrano. ============================================================ */ /* trilho de conteudo fluido e generoso: cresce com a viewport ate um teto largo, com respiro lateral em clamp. Substitui o max-w-6xl fixo que travava ~1152px. Mantem leitura confortavel via trilhos internos nos blocos de texto puro. */ .shell-wide{ width:100%; max-width:min(92vw, 1600px); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 6rem); } /* secoes de imagem/cor que ocupam a viewport inteira (100vw), com o texto correndo num trilho interno (.shell-wide). O full-bleed quebra a sensacao de "bloco centrado" nas telas largas. */ .full-bleed{ width:100vw; margin-inline:calc(50% - 50vw); } /* grids editoriais ganham coluna no 2xl (>=1536px): equipe 2->4, procedimentos/passos respiram. Definido junto ao HTML via utilitarias Tailwind 2xl: — aqui so o caderno-grafismo, que e CSS proprio. */ /* o grafismo "ficha-assinatura" do hero escala p/ preencher a coluna em telas largas (antes travado em max-[340px], deixando a coluna direita vazia em >=1536px). */ .ficha-hero{ max-width:340px; } @media (min-width:1280px){ .ficha-hero{ max-width:400px; } } @media (min-width:1536px){ .ficha-hero{ max-width:480px; } } @media (min-width:1920px){ .ficha-hero{ max-width:540px; } } /* hero textura suave ----------------------------------------------- */ .hero-veil{ background: radial-gradient(120% 90% at 85% 10%, rgba(201,155,140,.30), transparent 60%), radial-gradient(90% 80% at 10% 95%, rgba(227,205,190,.55), transparent 55%), linear-gradient(180deg,#F7F2EC 0%,#EFE5DA 100%); } /* scrim REAL sobre foto (cor de base evita flash branco no load) --- */ .photo-scrim{ position:relative; background:var(--nude); } .photo-scrim img{ background:var(--shell); } .photo-scrim::after{ content:""; position:absolute; inset:0; /* scrim reforcado: o conteudo (kicker/titulo) fica na metade inferior (items-end), entao adensamos o escuro de baixo p/ garantir AA mesmo sobre trechos claros da foto */ background:linear-gradient(180deg, rgba(33,20,15,.32) 0%, rgba(33,20,15,.62) 55%, rgba(33,20,15,.88) 100%); } /* kicker sobre foto: usa um tom mais claro que o nude p/ leitura segura sobre o scrim (o nude puro era o ponto fraco apontado no QA) */ .photo-scrim .kicker{ color:#F3E7DC; } /* sombra sutil garante o kicker/titulo legiveis mesmo sobre trechos claros da foto (independe do brilho do pixel) — reforco do scrim */ .photo-scrim .kicker{ text-shadow:0 1px 6px rgba(20,12,8,.65); } .photo-scrim h1, .photo-scrim h2{ text-shadow:0 1px 10px rgba(20,12,8,.35); } /* ---- DETALHE-ASSINATURA: "Caderno da pele" ----------------------- Papel pautado bege com anotação manuscrita. Aparece como moldura de cuidado: cada protocolo / etapa é uma "ficha" do caderno da cliente. É o grafismo único da marca. ----- */ .caderno{ position:relative; background: linear-gradient(transparent 0 calc(2rem - 1px), rgba(124,90,78,.10) calc(2rem - 1px) 2rem); background-size:100% 2rem; } .caderno::before{ content:""; position:absolute; top:0; bottom:0; left:2.25rem; width:1px; background:rgba(169,120,106,.45); } .anotacao{ font-family:var(--font-accent); font-style:italic; color:var(--ink-accent); } /* reveal (fail-safe: so esconde quando o JS confirma que vai revelar) - .js-reveal e adicionada pelo script; sem JS / sem observer, tudo permanece visivel — conteudo nunca fica preso invisivel. */ .js-reveal .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .js-reveal .reveal{ opacity:1 !important; transform:none !important; transition:none; } html{ scroll-behavior:auto; } } /* campos de formulario: >=16px evita zoom automatico do iOS no foco - e transicao suave de borda (feedback) */ input, select, textarea{ font-size:16px; transition:border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus{ box-shadow:0 0 0 3px rgba(169,120,106,.14); } /* foco visivel acessivel ------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--rosedk); outline-offset:3px; border-radius:2px; } /* sublinhado de link ----------------------------------------------- */ .link-underline{ position:relative; } .link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:var(--rosedk); transition:width .35s ease; } .link-underline:hover::after{ width:100%; } /* item ativo do nav ------------------------------------------------ */ .nav-active{ color:var(--espresso); } .nav-active::after{ width:100%; } /* alvos de toque dos links de navegacao do RODAPE: >=44px de altura efetiva no mobile (a11y). No desktop voltam ao inline natural. ---- */ @media (max-width:639px){ footer nav a{ display:inline-flex; align-items:center; min-height:44px; padding-block:.35rem; } } /* whatsapp float --------------------------------------------------- */ /* respeita safe-area do iOS e nao cobre conteudo/CTA no rodape mobile */ .wa-fab{ right:calc(1rem + env(safe-area-inset-right)); bottom:calc(1rem + env(safe-area-inset-bottom)); box-shadow:0 8px 22px -8px rgba(33,35,32,.5), 0 0 0 0 rgba(37,211,102,.5); animation:wa 2.8s ease-out infinite; transition:transform .18s ease, box-shadow .18s ease; } @media (min-width:640px){ .wa-fab{ right:1.25rem; bottom:1.25rem; } } /* FAB x CTA/rodape no mobile: garante folga para o FAB (56px + sombra + safe-area) nunca encostar/cobrir o botao final w-full nem os links do rodape. So no mobile; no desktop o FAB e menor estorvo. ------- */ @media (max-width:639px){ /* reserva uma faixa livre no fim de cada pagina (rodape e a ultima secao), empurrando o conteudo acima do FAB quando em repouso. !important vence o padding utilitario do Tailwind CDN. */ footer{ padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)) !important; } /* o botao final w-full e CTAs primarias ficam com respiro extra abaixo, fora da zona do FAB (canto inferior direito) */ .cta-clear-fab{ padding-bottom:6rem !important; } } .wa-fab:hover{ transform:translateY(-2px) scale(1.04); } .wa-fab:active{ transform:scale(.94); } @keyframes wa{ 0%{ box-shadow:0 8px 22px -8px rgba(33,35,32,.5), 0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 8px 22px -8px rgba(33,35,32,.5), 0 0 0 14px rgba(37,211,102,0);} 100%{ box-shadow:0 8px 22px -8px rgba(33,35,32,.5), 0 0 0 0 rgba(37,211,102,0);} } @media (prefers-reduced-motion: reduce){ .wa-fab{ animation:none; } } /* logo: traço do monograma ----------------------------------------- */ .logo-mark{ display:inline-block; vertical-align:middle; transition:transform .3s cubic-bezier(.2,.7,.2,1); } a:hover > .logo-mark{ transform:rotate(-6deg); } /* ============================================================ POLISH MOBILE + MICRO-ANIMACOES (com proposito) ============================================================ */ /* header sticky que compacta e ganha sombra ao rolar (estado) ------ !important vence as utilitarias injetadas pelo Tailwind CDN. */ .site-header{ transition:box-shadow .25s ease, background-color .25s ease; } .site-header.is-scrolled{ box-shadow:0 1px 0 rgba(124,90,78,.12), 0 10px 30px -22px rgba(33,35,32,.45) !important; } /* sutil compactacao do header ao rolar via padding (a altura h-16 do Tailwind manda no