/* ARTEN — extras da LP de produção (fora do espelho do sistema): variantes de hero pra exploração, botão de som, ajustes. */ /* B · coreografado: sem trilho — o hero é uma tela, a entrada é o espetáculo */ html[data-hero="coreo"] .hero__trilho { height: 100svh; } html[data-hero="coreo"] .hero__progresso { display: none; } /* ---- Hero, layout Becky: subtitle no alto, título gigante no centro, micro-copys laterais, CTA na base ---- */ .hero__sub { position: absolute; left: 50%; top: calc(var(--space-16) + var(--space-6)); transform: translateX(-50%); width: min(52ch, calc(100% - var(--gutter) * 2)); text-align: center; color: var(--text-muted-inverse); font-size: var(--text-caption); } .hero__titulo { text-indent: var(--tracking-wordmark); /* compensa o tracking: sem isto o wordmark fica ~23px à esquerda do centro no teto de 13rem */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); margin: 0; font-size: clamp(3.5rem, 14vw, 13rem); line-height: 1; color: var(--paper); white-space: nowrap; } .hero__lado { position: absolute; bottom: clamp(6rem, 16vh, 11rem); max-width: 20ch; margin: 0; color: var(--text-inverse); } .hero__lado--esq { left: var(--gutter); color: var(--text-muted-inverse); white-space: nowrap; } .hero__lado--dir { right: var(--gutter); text-align: right; font-family: var(--font-display); font-size: var(--text-title); line-height: var(--leading-title); } .hero__lado--dir em { font-style: italic; } .hero__base { position: absolute; left: 50%; bottom: clamp(6rem, 16vh, 11rem); transform: translateX(-50%); } @media (max-width: 767.98px) { .hero__lado--esq { display: none; } .hero__lado--dir { right: auto; left: var(--gutter); text-align: left; bottom: clamp(9rem, 24vh, 13rem); } .hero__base { left: var(--gutter); transform: none; } } /* sem-motion / contido: o hero vira layout em fluxo */ html.sem-motion .hero__sub, html.sem-motion .hero__titulo, html.sem-motion .hero__lado, html.sem-motion .hero__base { position: static; transform: none; width: auto; max-width: none; margin: var(--space-4) var(--gutter) 0; text-align: left; white-space: normal; } html.sem-motion .hero__titulo { font-size: var(--text-display); } html.sem-motion .hero__palco { padding-bottom: var(--space-12); } .hero__rodape { justify-content: center; } /* ---- Preloader com cortina (Becky: clip-path nas metades + linha central; lá rosa 20px, aqui o filete camelo) ---- */ .carregando { background: transparent; } .carregando__metade { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--ink); } .carregando__metade--esq { left: 0; clip-path: inset(0); } .carregando__metade--dir { right: 0; clip-path: inset(0); } .carregando__linha { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--rule-camelo); margin-left: calc(var(--rule-camelo) / -2); background: var(--camelo); transform-origin: center; } .carregando__letras { position: relative; display: flex; gap: var(--tracking-wordmark); } /* (tiragem removida — 3D + fotos das mesmas peças era redundância) */ /* C · contido: reaproveita o layout sem-motion do sistema (classe no ) */ /* split do coreografado */ .split-char { display: inline-block; } /* Voltar pro gate */ .nav__interno { display: flex; align-items: baseline; justify-content: space-between; } .nav__voltar { order: 2; color: var(--text-muted-inverse); text-decoration: none; transition: color var(--duration-hover) var(--ease-editorial); } .nav__voltar:hover { color: var(--paper); opacity: 1; } .nav.is-escuro .nav__voltar { color: var(--text-muted); } .nav.is-escuro .nav__voltar:hover { color: var(--text); } /* Véu reforçado no topo: a janela clara da foto engolia o wordmark e o subtitle */ .hero__véu { background: linear-gradient(to top, color-mix(in srgb, var(--ink) 80%, transparent) 0%, color-mix(in srgb, var(--ink) 25%, transparent) 34%, transparent 62%), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 74%, transparent) 0%, color-mix(in srgb, var(--ink) 38%, transparent) 18%, transparent 36%); } /* O preloader real segura o overflow até o is-ready */ /* Grain — dia feio na tela inteira (textura, não efeito) */ body::after { content: ''; position: fixed; inset: -50%; z-index: 350; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .045; mix-blend-mode: overlay; } /* ---- Modelos — três lado a lado (grade editorial, hover acende) ---- */ .modelos { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--section-y); } .modelos__cabeca { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; margin-bottom: var(--space-16); } .modelos .numero { color: var(--text-muted-inverse); } .modelos__titulo { font-size: var(--text-display); line-height: var(--leading-display); } .modelos__titulo em { font-style: italic; } .modelos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); } .modelo { display: flex; flex-direction: column; } .modelo:nth-child(2) { margin-top: var(--space-16); } /* degrau editorial */ .modelo__midia { aspect-ratio: 3 / 4; overflow: hidden; position: relative; } .modelo__midia image-slot { display: block; width: 100%; height: 100%; transition: transform var(--duration-reveal) var(--ease-tecido); } .modelo__hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity var(--duration-hover) var(--ease-tecido), transform var(--duration-reveal) var(--ease-tecido); pointer-events: none; } .modelo:hover .modelo__hover { opacity: 1; transform: scale(1); } .modelo:hover .modelo__midia image-slot { transform: scale(1.03); } .modelo__pe { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding-top: var(--space-4); margin-top: var(--space-4); border-top: var(--hairline) solid #ffffff1f; } .modelo__indice { color: var(--text-muted-inverse); } .modelo__nome { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-title); line-height: 1.1; letter-spacing: var(--tracking-display); margin: 0; color: color-mix(in srgb, var(--paper) 78%, transparent); transition: color var(--duration-hover) var(--ease-editorial); } .modelo:hover .modelo__nome { color: var(--paper); font-style: italic; } .modelo__copy { color: var(--text-muted-inverse); max-width: 26ch; margin: 0; font-size: var(--text-caption); } @media (max-width: 899.98px) { .modelos__lista { grid-template-columns: 1fr; gap: var(--space-12); } .modelo:nth-child(2) { margin-top: 0; } } /* ---- A Peça no escuro — mesma linguagem do hero ---- */ .peca { background: var(--surface-inverse); color: var(--text-inverse); } .peca .numero, .peca__sub, .peca__cor-nome, .swatches__nota, .peca .peca__dica { color: var(--text-muted-inverse); } .peca__titulo em { color: var(--text-inverse); } .peca__palco { background: transparent; } .peca .swatch.is-ativo { box-shadow: inset 0 0 0 1px #ffffff22, 0 0 0 1px var(--ink), 0 0 0 2px var(--paper); } .peca .swatch--trancada::after { background: linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--paper) calc(50% - 0.75px), var(--paper) calc(50% + 0.75px), transparent calc(50% + 0.75px)); opacity: .7; } /* Dica do provador 3D */ .hero__3d { position: absolute; inset: 0; } .hero__3d canvas { display: block; width: 100%; height: 100%; } .hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transition: opacity 400ms var(--ease-editorial); } html.sem-motion .hero__3d { position: relative; inset: auto; height: min(58svh, 520px); } html.sem-motion .hero__3d canvas { display: none; } html.sem-motion .hero__fallback { position: relative; } .peca__dica { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); color: var(--text-muted); pointer-events: none; } .peca__palco.sem-webgl .peca__dica { display: none; } @media (prefers-reduced-motion: reduce) { } /* ---- Cenas (ex-Quem usa) — mosaico Brunello com as imagens de campanha ---- */ .usa { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--section-y); } .usa__cabeca { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; margin-bottom: var(--space-16); } .usa .numero { color: var(--text-muted-inverse); } .usa__titulo { font-size: var(--text-display); line-height: var(--leading-display); } .usa__titulo em { font-style: italic; } .usa__sub { color: var(--text-muted-inverse); max-width: 34ch; } .usa__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr 1fr; gap: var(--space-2); /* gap mínimo, como na Brunello */ } .usa__item { position: relative; } .usa__item img, .usa__item image-slot { display: block; width: 100%; height: 100%; object-fit: cover; } .usa__item--a { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; } .usa__item--b { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 5; } .usa__item--c { grid-column: 2; grid-row: 1 / 3; } .usa__legenda { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1; color: var(--paper); text-shadow: 0 1px 8px #000000a6; } @media (max-width: 899.98px) { /* mosaico de celular, não pilha: o café abre inteiro (quase quadrado, mesa + rua no quadro) e as duas retrato dividem a linha de baixo. A seção inteira cabe em ~1,5 telas em vez de 3. */ .usa__grade { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .usa__item--a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 5 / 4; } .usa__item--b, .usa__item--c { grid-row: auto; aspect-ratio: 3 / 4; } .usa__item--b { grid-column: 1; } .usa__item--c { grid-column: 2; } } /* ---- Manifesto — a seção só de escrita ---- */ .manifesto { position: relative; overflow: hidden; background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--section-y); min-height: 78svh; display: flex; align-items: center; } .manifesto__interno { position: relative; display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; padding-left: var(--space-8); } .manifesto__filete { position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: var(--rule-camelo); background: var(--camelo); transform: scaleY(0); transform-origin: top; } html.sem-motion .manifesto__filete { transform: none; } /* o ruído das decisões — dissolve conforme o manifesto afirma */ .manifesto__ruido { position: absolute; inset: 0; pointer-events: none; } .manifesto__ruido span { position: absolute; font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.5rem); color: color-mix(in srgb, var(--paper) 64%, transparent); white-space: nowrap; will-change: opacity, filter, transform; } html.sem-motion .manifesto__ruido { display: none; } .manifesto .numero { color: var(--text-muted-inverse); margin-bottom: var(--space-6); } .manifesto__linha { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); max-width: 22ch; margin: 0; color: color-mix(in srgb, var(--paper) 72%, transparent); } .manifesto__linha em { font-style: italic; } .manifesto__linha--enfase { color: var(--paper); } /* ---- Rotina (Quem usa, slots) — reusa o mosaico .usa__grade ---- */ .rotina { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--section-y); } /* ---- Passos — sem carrinho, sem conta ---- */ .passos { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--section-y); } .passos__interno { display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start; } .passos .numero { color: var(--text-muted-inverse); } .passos__titulo { font-size: var(--text-display); line-height: var(--leading-display); } .passos__titulo em { font-style: italic; } .passos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); width: 100%; } .passos__item { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--rule-camelo) solid var(--accent); } .passos__indice { color: var(--text-muted-inverse); } .passos__texto { font-family: var(--font-display); font-size: var(--text-title); line-height: var(--leading-title); margin: 0; color: var(--paper); } @media (max-width: 767.98px) { .passos__lista { grid-template-columns: 1fr; } } /* ==================================================================== D · 01 · A Malha — mecânica dos dois movimentos. Valores medidos nos originais (fmrg.studio, centremarsea.com) e a fórmula ficam documentados em REFERENCIAS-SECAO-02.md; aqui só o CSS que a mecânica precisa pra existir. Regra desta casa, aprendida na marra: NADA aqui nasce invisível esperando animação. O repouso da palavra é blur(3px)/opacity(.1) — fantasma, não ausente — e mesmo assim js/malha.js tem rede de segurança de 3s pro caso do scroll nunca acontecer. As fotos do movimento 2 são comuns, sempre visíveis: a imantação só ACRESCENTA um translate por cima, nunca decide se elas aparecem. ==================================================================== */ /* Movimento 1 — sticky + blur por palavra (fmrg.studio, item 1a). Altura do trilho: 100svh pro palco fixo, +800px que é a fullRevealDistance medida no original (distância de scroll em que a frase termina de focar), +40svh de folga pra frase focada respirar antes de soltar o sticky — os 100svh e os 40svh são decisão de integração nossa, não vieram medidos do fmrg.studio. */ .malha__trilho { position: relative; /* +70svh: os 60svh da inundação de cor (serotoninn §1.4) + 10svh de hold colorido antes de soltar — os 40svh antigos eram scroll morto */ height: calc(100svh + 800px + 70svh); } /* Celular: a prisão de ~2300px lia como página travada ("só rola quando eu saio"). Metade da janela de foco, um terço de inundação — a frase foca em ~2 gestos de polegar e solta. js/malha.js espelha os números. */ @media (max-width: 809.98px) { /* 600+45: o 400+30 da primeira tentativa passava rápido demais — quem rolava com vontade nem registrava a seção. */ .malha__trilho { height: calc(100svh + 600px + 45svh); } } .malha__preso { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; padding-inline: var(--gutter); } /* Repouso: blur(3px)/opacity(.1) — os valores medidos, não opacity 0. js/malha.js escreve o resto por scroll; esta transição só suaviza o degrau entre frames de scroll, não conduz o reveal. */ .malha__palavra { filter: blur(3px); opacity: 0.1; /* .2s deixava o foco em degraus visíveis entre frames de scroll — .45s funde os degraus num movimento contínuo */ transition: filter .45s ease-out, opacity .45s ease-out; } /* Movimento 2 — paralaxe + imantação (centremarsea.com, item 2b), escritas em `translate`, não em `transform`: é propriedade CSS própria, não briga com nenhum transform que já exista no elemento (mesmo raciocínio do .hero__quadro img, ver acima). */ .malha__peca-foto img { translate: 0 0; will-change: translate; scale: 1.08; /* folga: sem ela a imantação expõe a borda da foto */ } @media (hover: none) { .malha__peca-foto img { scale: 1; } /* sem cursor, sem imantação: sem folga precisa */ } /* ---- prefers-reduced-motion: sem sticky, sem blur, sem imantação ---- O reset global do base.css zera duração, mas não desfaz position: sticky nem o filter/opacity que o JS escreveria — por isso js/malha.js nem chega a rodar com o motion reduzido (early return), e este bloco garante que a frase e as fotos já nascem no estado final, em fluxo normal. */ @media (prefers-reduced-motion: reduce) { .malha__trilho { height: auto; } .malha__preso { position: static; height: auto; padding-block: var(--space-16); } .malha__palavra { filter: none; opacity: 1; } .malha__peca-foto img { translate: 0 0; scale: 1; } }