/* ═══════════════════════════════════════════════════════════════════ DETOX CRIATIVO — especifico deste site Carrega depois de base.css. So o que nao existe no sistema. ESTE E O UNICO SITE DO LOTE COM COR ALEM DO OURO (excecao autorizada no DESIGN_SYSTEM, secao 2). A base continua preta e a tipografia continua Cormorant + Montserrat. O que muda e o ACENTO, que passa a ser multicolor — tirado das proprias imagens do produto. O ouro NAO sai de cena: continua no nav, no botao principal, no selo de garantia, nos italicos dos titulos e no footer. O colorido e convidado; o ouro e dono da casa. Regra pratica: cor em filete, em numero, em glow e em borda. NUNCA como fundo de bloco inteiro, NUNCA em texto corrido. ═══════════════════════════════════════════════════════════════════ */ :root{ /* ── paleta extra, amostrada das imagens deste produto ──────────── c1 magenta ....... tinta-magenta.webp (a bisnaga de tinta rosa-magenta que a Lari esprime; amostras #BF3F4A / #D82652) c2 violeta ....... lari-cavalete-cores.webp + bloqueio-criativo.webp (o respingo violeta do splash; amostra #857CE8) c3 azul .......... olhar-criativo.webp (o ceu do quiz "criativo") e o azul do splash de explosao-de-cores (#6DA7F7) c4 verde ......... folha-verde.webp (a folha grande; #6C7226) e o verde da capa do curso (#4ABF3F) c5 coral ......... olhar-criativo.webp (o campo florido rosado/salmao, #E8857C) puxado para o lado tangerina */ --c1: #D62B6B; --c1a: rgba(214, 43,107,.22); --c1w: rgba(214, 43,107,.09); --c2: #8A78EB; --c2a: rgba(138,120,235,.22); --c2w: rgba(138,120,235,.09); --c3: #4E9FE0; --c3a: rgba( 78,159,224,.22); --c3w: rgba( 78,159,224,.09); --c4: #56B46A; --c4a: rgba( 86,180,106,.22); --c4w: rgba( 86,180,106,.09); --c5: #E8764E; --c5a: rgba(232,118, 78,.22); --c5w: rgba(232,118, 78,.09); /* o filete-assinatura do site: um arco de espectro continuo (magenta 338° → violeta 248° → azul 206° → verde 133° → coral 22°) */ --spectrum: linear-gradient(90deg, var(--c1) 0%, var(--c2) 26%, var(--c3) 48%, var(--c4) 72%, var(--c5) 100%); } /* barra de progresso: e um filete de 2px, o lugar mais barato e mais elegante pra anunciar que este site tem cor */ .scroll-progress span{ background:var(--spectrum) } /* ── FILETE DE SECAO ─────────────────────────────────────────────── Substitui o "traco decorativo" que o original fazia com imagem. 1px desaparecia em tela nao-retina; 2px ainda e filete e ja registra como escolha. Acima disso o espectro vira faixa colorida e o preto perde o comando. */ .rule{ display:block; width:112px; height:2px; margin-top:26px; background:var(--spectrum); } .rule--center{ margin-inline:auto } /* ── HERO ────────────────────────────────────────────────────────── A foto e vertical (1414x2000) num hero deitado: o cover amplia muito e sobra altura. 62% no eixo X joga a silhueta pra coluna livre da direita (o texto ocupa a esquerda) e 38% no Y mantem cabeca + topo do cavalete. */ .hero__media img{ object-position:62% 38%; filter:saturate(.92) contrast(1.06) brightness(1.02) } @media (max-width:980px){ /* sem coluna livre: a silhueta volta pro centro */ .hero__media img{ object-position:52% 34% } } /* o H1 deste site tem linhas longas ("Potencialize sua arte"): na coluna .78fr do sistema elas quebravam em duas. A silhueta comeca em ~70% da largura, entao da pra abrir a coluna de texto ate ali sem cobrir ninguem. */ @media (min-width:981px){ .hero__grid{ grid-template-columns:minmax(0,1.28fr) 1fr } .hero__title{ font-size:clamp(38px,4.25vw,61px) } } /* a palavra-chave do H1 e o unico texto do site que recebe o espectro. Cormorant italico 300 em corpo grande aguenta o gradiente sem sumir; em corpo pequeno nao aguentaria — por isso so aqui. */ .hero__title em{ background:linear-gradient(96deg, var(--c1) 4%, var(--c2) 34%, var(--c3) 58%, var(--c4) 82%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* preto puro atras do gradiente engole o traco fino da serifada: uma sombra levissima devolve o desenho da letra */ @supports (-webkit-background-clip:text){ .hero__title em{ filter:drop-shadow(0 1px 12px rgba(0,0,0,.55)) } } /* faixa de numeros do hero: 4 valores, 4 cores, na ordem do espectro */ .hero__stats--tint .stat:nth-child(1) b{ color:var(--c2) } .hero__stats--tint .stat:nth-child(2) b{ color:var(--c3) } .hero__stats--tint .stat:nth-child(3) b{ color:var(--c4) } .hero__stats--tint .stat:nth-child(4) b{ color:var(--c5) } /* "4K", "PDF" e "∞" nao sao numeros longos como "90+": corpo um pouco menor evita que "PDF" encoste na borda da celula em 1024px */ .hero__stats--tint .stat b{ font-size:clamp(28px,3.2vw,42px) } /* ── PAR DE IMAGENS EMPILHADAS (secao "criatividade") ─────────────── */ .stack{ display:grid; gap:clamp(14px,1.6vw,22px) } .stack__img{ position:relative; overflow:hidden; border-radius:3px; background:var(--ink-3); } .stack__img img{ width:100%; display:block; /* a foto da explosao de cores tem fundo branco estourado: sem baixar o brilho ela vira um bloco de luz no meio de uma pagina preta */ filter:saturate(.92) contrast(1.05) brightness(.9); transition:transform 1.2s var(--ease), filter .8s var(--ease); } .stack__img:hover img{ transform:scale(1.03); filter:saturate(1.05) contrast(1.02) brightness(.98) } /* filete de cor no topo da imagem, no lugar da moldura dourada: e o mesmo gesto do sistema, so trocando a cor do fio */ .stack__img::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:2; background:linear-gradient(90deg, var(--c), transparent 78%); } .stack__img::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line-soft); } .stack__img--c1{ --c:var(--c1) } .stack__img--c3{ --c:var(--c3) } /* a primeira e quadrada (1080x1080) e a segunda deitada (1280x853): sem altura fixa a coluna acompanha e nada estica */ /* ── GALERIA: aqui a cor da foto E o argumento ───────────────────── O sistema dessatura pra .55 porque nos outros sites a foto colorida briga com o preto/ouro. Neste site o produto e sobre desbloquear cor: dessaturar seria contar a piada errada. Sobe pra .82 em repouso. */ .gallery--color .gal img{ filter:saturate(.82) contrast(1.04) brightness(.96) } .gallery--color .gal:hover img{ filter:saturate(1.06) contrast(1.03) brightness(1) } .gallery--pad{ margin-top:clamp(28px,3.4vw,48px) } /* ── CARDS COLORIDOS (objetivos e bonus) ────────────────────────── O que muda por card: numero, fio do topo, glow do cursor e borda no hover. O fundo continua praticamente preto — a cor entra como luz, nao como tinta. */ .card--c1{ --c:var(--c1); --ca:var(--c1a); --cw:var(--c1w) } .card--c2{ --c:var(--c2); --ca:var(--c2a); --cw:var(--c2w) } .card--c3{ --c:var(--c3); --ca:var(--c3a); --cw:var(--c3w) } .card--c4{ --c:var(--c4); --ca:var(--c4a); --cw:var(--c4w) } .card--c5{ --c:var(--c5); --ca:var(--c5a); --cw:var(--c5w) } .card[class*="card--c"]{ background:linear-gradient(170deg, var(--cw), rgba(255,255,255,0) 58%); } .card[class*="card--c"]::before{ content:''; position:absolute; left:0; top:0; width:56px; height:2px; background:var(--c); transition:width .6s var(--ease); } .card[class*="card--c"]:hover::before{ width:100% } .card[class*="card--c"]::after{ background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), var(--ca), transparent 62%); } .card[class*="card--c"]:hover{ border-color:var(--ca) } .card[class*="card--c"] .card__num{ color:var(--c); font-family:var(--body); font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; } /* ── BONUS: imagem + 3 cards em coluna ────────────────────────────── */ .bonus__img{ position:relative; overflow:hidden; border-radius:3px; background:var(--ink-3); aspect-ratio:4/5; } .bonus__img img{ width:100%; height:112%; object-fit:cover; object-position:50% 42%; filter:saturate(1) contrast(1.04); } .bonus__img::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line-soft); } .bonus-list{ display:flex; flex-direction:column; gap:clamp(14px,1.4vw,20px) } .bonus-list .card{ padding:clamp(24px,2.2vw,32px) } .bonus-list .card h3{ font-size:clamp(24px,2.2vw,30px) } /* ── DEPOIMENTOS: 4 cards, 2 colunas, com avatar ────────────────── Os 4 depoimentos vinham como imagem 1080x1920 com o texto dentro. Virou HTML de verdade (legivel, indexavel, nitido em qualquer tela) e o avatar foi recortado do proprio circulo daquelas imagens — 240px de origem para 52px na tela, sobra densidade. */ .testis--4{ grid-template-columns:repeat(2,1fr) } .testi{ position:relative } .testi::before{ content:''; position:absolute; left:0; top:0; width:44px; height:2px; background:var(--c, var(--gold)); transition:width .6s var(--ease); } .testi:hover::before{ width:100% } .testi--c1{ --c:var(--c1) } .testi--c2{ --c:var(--c2) } .testi--c3{ --c:var(--c3) } .testi--c4{ --c:var(--c4) } .testi figcaption{ display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; } .testi figcaption img{ grid-row:1 / span 2; width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--line); filter:saturate(.92) contrast(1.03); } .testi figcaption span{ margin-top:2px } /* ── CTA no fim de secao ──────────────────────────────────────────── */ .cta-line{ margin-top:clamp(40px,5vw,64px); text-align:center } /* botao dourado dentro de coluna de texto: o sistema so da margem no --ghost, e aqui o gold colava no ultimo paragrafo */ .col > .btn--gold{ margin-top:34px } /* ── FAIXA DO CUPOM ─────────────────────────────────────────────── No original isso era uma secao inteira gritando em vermelho e verde sobre fundo cinza. Aqui e uma caixa central com fio de espectro em cima e embaixo — o desconto continua sendo a coisa mais visivel da secao, sem virar outdoor. */ .discount{ max-width:800px; margin:0 auto clamp(28px,3.4vw,44px); padding:clamp(26px,3vw,38px) clamp(20px,3vw,40px); text-align:center; border-radius:4px; background: linear-gradient(180deg, rgba(244,241,234,.028), rgba(5,5,5,.4)), var(--ink); box-shadow:inset 0 0 0 1px var(--line-soft); position:relative; overflow:hidden; } .discount::before, .discount::after{ content:''; position:absolute; left:0; right:0; height:2px; background:var(--spectrum); } .discount::before{ top:0 } .discount::after{ bottom:0; opacity:.4 } .discount__lead{ font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); } .discount__off{ font-family:var(--display); font-weight:300; font-size:clamp(28px,3.6vw,46px); line-height:1.15; margin-top:10px; color:var(--paper); } .discount__off em{ font-style:italic; background:linear-gradient(92deg, var(--c1), var(--c2) 46%, var(--c3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .discount .coupon{ margin-top:20px } /* ── OFERTA ─────────────────────────────────────────────────────── A caixa de oferta fica DOURADA de proposito: e o bloco de dinheiro e confianca, e a assinatura da marca vale mais ali do que o colorido. A cor entra so no fio de 1px do topo. */ .offer__box{ position:relative; overflow:hidden } .offer__box::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--spectrum); } .offer__cover{ width:clamp(140px,15vw,186px); margin:0 auto 30px; border-radius:3px; overflow:hidden; box-shadow:0 24px 56px -30px rgba(0,0,0,.95), inset 0 0 0 1px var(--line); } .offer__cover img{ width:100%; display:block; filter:saturate(.95) contrast(1.03) } /* 6 itens em 2 colunas fecham a grade exatamente (3 linhas) */ .offer__list li{ padding-left:26px } .price__val{ font-size:clamp(48px,6.6vw,82px); /* "12x R$ 15,46" ocupa a linha toda */ /* o Cormorant usa numeral old-style por padrao: em "15,46" o 1 fica da altura de um "I" minusculo e o preco chega a ler como "I5,46". Em preco isso e inaceitavel — aqui, e so aqui, pede-se numeral de caixa alta. O "7" do selo de garantia continua old-style, como no sistema. */ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; } /* mesmo motivo do .price__val: o "12x" e display e vinha com 1 baixinho e 2 descendo abaixo da linha de base */ .price__times{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1 } /* .price__from deixou de ser a primeira linha do bloco: agora fecha o preco, logo abaixo do a vista, porque e sobre o a vista que incide o desconto. Menor que no sistema (era 17-22px, que competia com a parcela), mas ainda legivel — o riscado vermelho segura o contraste. */ .price__from{ margin-top:6px; font-size:clamp(13.5px,1.1vw,15px); color:var(--muted); letter-spacing:0; } .price__from s{ font-size:1.35em; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; } /* ── FORMAS DE PAGAMENTO ─────────────────────────────────────────── */ .pay{ margin-top:26px } .pay img{ max-width:300px; margin-inline:auto; opacity:.65; filter:grayscale(1) brightness(1.7); transition:opacity .5s var(--ease), filter .5s var(--ease); } .pay:hover img{ opacity:.9; filter:grayscale(.3) brightness(1.4) } /* ── PRINTS DE CONVERSA ────────────────────────────────────────── Os 3 prints tem proporcoes diferentes (1046x1600, 1080x879, 1080x1529) e todos vem do WhatsApp em TEMA ESCURO. O .print do sistema e um cartao BRANCO — com print escuro dentro, virava uma moldura branca em volta de um retangulo preto. Aqui o cartao vira escuro (mesmo tratamento do .print--quote do sistema): a sobra de espaco se funde ao cartao e as bolhas brancas da conversa e que saltam. 3/4 aperta menos o print deitado do meio. */ .prints .print{ aspect-ratio:3/4; background:linear-gradient(165deg,#171512,#0D0C0A); box-shadow:0 24px 56px -32px rgba(0,0,0,.95), inset 0 0 0 1px var(--line); } .prints .print img{ filter:saturate(.94) contrast(1.02) } /* ── FECHO ──────────────────────────────────────────────────────── O halo do CTA final ganha um sopro de cor por cima do dourado — dourado embaixo (marca), cor em cima (produto). */ .final{ background: radial-gradient(560px 300px at 50% 118%, var(--c2a), transparent 70%), radial-gradient(700px 380px at 50% 120%, rgba(201,168,76,.16), transparent 70%), var(--ink-2); } /* ═══ RESPONSIVO ═══════════════════════════════════════════════ */ @media (max-width:980px){ .testis--4{ grid-template-columns:1fr } /* o sistema cai pra 2 colunas em <=980px, e as duas galerias deste site tem 3 fotos: a terceira ficava sozinha, com uma celula orfa do lado. Entre 620 e 980 ainda cabem 3 colunas (celula de ~200px), e a grade fecha sozinha — sem esticar nenhuma foto pra largura dupla. */ .gallery--color{ grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(120px,20vw,200px); } /* a imagem do bonus vem depois dos cards em coluna unica? nao: mantem a ordem do HTML (imagem primeiro) e limita a altura pra nao virar uma parede vertical antes do conteudo */ .bonus__img{ aspect-ratio:3/4; max-height:64vh } .bonus__img img{ height:100% } .hero__stats--tint .stat b{ font-size:clamp(26px,7vw,36px) } } @media (max-width:430px){ /* "Potencialize sua arte" em 38px mede ~335px: exatamente a largura util de um iPhone SE/Galaxy de 360px. Cede 3px de corpo e a linha respira em vez de encostar na borda. */ .hero__title{ font-size:34.5px } } @media (max-width:620px){ /* celular: 3 colunas viram selo de correio. Volta pra 2 e a terceira foto ocupa a linha inteira. As duas galerias tem, como ultimo item, a foto de origem mais larga (1068px e 913px) — em <=620px a linha cheia tem no maximo ~560px, entao nada e ampliado. */ .gallery--color{ grid-template-columns:repeat(2,1fr); grid-auto-rows:42vw } .gallery--color .gal:last-child{ grid-column:span 2 } .rule{ width:80px; margin-top:22px } .discount__off{ font-size:26px } /* "12x R$ 15,46" em 3 pedacos na mesma linha aperta em 360px */ .price__val{ font-size:44px } .prints .print{ aspect-ratio:3/4 } } /* ── HERO: foto de fundo + veu + anel girando ────────────────────── O cliente reprovou a versao em duas colunas ("nao seja so uma foto na direita e texto na esquerda") e pediu a foto como BACKGROUND com overlay por cima das frases, e "algo giratorio, cores explodindo", como na vinheta do curso. A foto (Higgsfield + Soul da Lari) e um vortice de tinta girando em torno dela sobre preto absoluto — sem pincel, como ele pediu. Por ser preta nas bordas, ela casa com o `--ink` do site sem emenda visivel, e o veu pode ser leve no centro (a cor E o argumento aqui). Por cima, dois aneis de matiz girando em sentidos opostos, bem lentos: prolongam em movimento o giro que a foto congelou. Sao decorativos, entram como `aria-hidden` e param em prefers-reduced-motion. */ .hero{ min-height:100svh; background:var(--ink); } .hero__media img{ object-position:50% 44%; filter:saturate(1.06) contrast(1.04) brightness(1.04); } /* veu concentrado na coluna esquerda (texto) e nas bordas de cima e baixo; o centro-direita fica quase limpo pro vortice aparecer inteiro */ .hero__scrim{ background: linear-gradient(96deg, rgba(4,4,4,.93) 0%, rgba(4,4,4,.86) 24%, rgba(4,4,4,.58) 40%, rgba(4,4,4,.22) 52%, rgba(4,4,4,.06) 64%), linear-gradient(180deg, rgba(4,4,4,.82) 0%, rgba(4,4,4,.08) 22%, rgba(4,4,4,.1) 56%, rgba(4,4,4,.8) 88%, var(--ink) 100%); } .hero__spin{ position:absolute; z-index:1; pointer-events:none; top:50%; left:66%; width:min(78vh,760px); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:conic-gradient(from 0deg, var(--c1), var(--c2) 18%, var(--c3) 36%, var(--c4) 54%, var(--c5) 72%, var(--c1) 100%); /* recorta so um anel fino e desfoca: o resultado le como rastro de luz, nao como um disco colorido em cima da foto */ -webkit-mask:radial-gradient(circle at 50% 50%, transparent 58%, #000 66%, #000 72%, transparent 80%); mask:radial-gradient(circle at 50% 50%, transparent 58%, #000 66%, #000 72%, transparent 80%); filter:blur(16px); opacity:.4; animation:heroSpin 46s linear infinite; } .hero__spin--rev{ width:min(58vh,560px); opacity:.3; filter:blur(11px); animation-duration:34s; animation-direction:reverse; } @keyframes heroSpin{ to{ rotate:360deg } } @media (max-width:980px){ /* sem coluna livre: a figura vai pro alto do quadro e o veu fecha vertical, senao o titulo cai em cima da tinta clara */ .hero__media img{ object-position:50% 34%; filter:saturate(.98) contrast(1.03) brightness(.82) } .hero__scrim{ background:linear-gradient(180deg, rgba(4,4,4,.9) 0%, rgba(4,4,4,.5) 24%, rgba(4,4,4,.72) 56%, rgba(4,4,4,.95) 86%, var(--ink) 100%); } .hero__spin{ left:50%; top:38%; width:min(62vh,460px) } .hero__spin--rev{ width:min(46vh,340px) } } @media (prefers-reduced-motion:reduce){ .hero__spin{ animation:none } } /* ── FOTO DOS BONUS ──────────────────────────────────────────────── A imagem e vertical (1536x2048) e mostra a Lari em repouso ao lado da monstera. Em coluna alta ela respira; o filete colorido no topo amarra com os tres cartoes de bonus ao lado. */ .bonus__img img{ aspect-ratio:3/4; object-fit:cover; object-position:50% 42% } /* ── LETRA MIUDA DO CUPOM ─────────────────────────────────────────── O cliente confirmou (04/08/2026): os 50% do VIRADADECHAVE incidem sobre o preco CHEIO de R$ 299,00 — nao e desconto sobre o desconto. A copy anterior ("aplique o cupom e ganhe 50%") somada ao "de R$299 por R$149,50" ali embaixo prometia dois descontos que nao existem. Esta linha fecha a conta de forma explicita. */ .discount__fine{ max-width:46ch; margin:16px auto 0; font-size:13px; line-height:1.55; color:var(--paper-dim); } .discount__fine b{ color:var(--gold-lt); font-weight:600 } /* ── 4o ITEM DA FAIXA: ICONE EM VEZ DE SIGLA ──────────────────────── O cliente trocou "PDF / certificado de conclusao" por um simbolo de renovacao + "sua arte renovada" (docx de revisao, 04/08/2026). Os tres primeiros itens sao glifo (4K / 7 / infinito) em Cormorant; aqui entra um SVG de traco, que precisa da mesma presenca optica que uma letra. */ .stat--ico b{ display:flex; align-items:center; justify-content:center } .stat--ico b svg{ width:clamp(32px,3.4vw,44px); height:clamp(32px,3.4vw,44px); color:var(--c5); /* o coral, mesma cor que o PDF tinha */ } /* ── COLUNA DE TEXTO MAIS LONGA ───────────────────────────────────── A copy nova tem 5 paragrafos em vez de 2. Em grid de 2 colunas com `align-items:center` a coluna do texto ficava muito mais alta que a das imagens e abria vazio dos dois lados; alinhar pelo topo resolve, e o espaco entre paragrafos aperta um pouco para o bloco nao esticar. */ #criatividade .grid-2{ align-items:start } #criatividade .lead{ margin-top:16px } #criatividade .lead:first-of-type{ margin-top:24px } @media (max-width:980px){ /* no mobile a coluna das imagens vem depois do texto */ #criatividade .stack{ order:2 } } /* A copy nova (5 paragrafos) deixou a coluna de texto ~300px mais alta que a das duas imagens, e sobrava um bloco preto embaixo da segunda — exatamente o "espaco preto sobrando" que o cliente reprova. As imagens passam a dividir a altura da linha entre si em vez de ter altura propria. */ @media (min-width:981px){ #criatividade .stack{ height:100%; display:flex; flex-direction:column } #criatividade .stack__img{ flex:1; min-height:0 } #criatividade .stack__img img{ width:100%; height:100%; object-fit:cover } }