/* ════════════════════════════════════════════════════════════════════════════ MERCADÃO DOS ÓCULOS — CAJATI/SP · CSS diferido (seções abaixo da dobra) Servido com ?v= para furar o cache immutable da borda (playbook §29). ════════════════════════════════════════════════════════════════════════════ */ /* ── casca de seção ────────────────────────────────────────────────────────── */ .sec { padding-block: var(--sec-y); position: relative; } .sec--creme { background: var(--creme); } .sec--creme2 { background: var(--creme-2); } .esc { background: var(--esc); color: var(--txt-esc); } .esc h2, .esc h3 { color: var(--txt-esc); } /* ⚠️ `:where(.esc)` NÃO é preciosismo — é o que impede uma classe inteira de defeitos. Escrito como `.esc p`, este seletor tem especificidade (0,1,1) e VENCE a cor de qualquer componente de classe única (0,1,0) que caia dentro da seção. Foi assim que um selo âmbar saiu com texto branco por cima de âmbar (1,7:1) e um "a partir de" saiu cinza sobre âmbar (3,4:1) — os dois pegos pelo `npm run verifica`, nenhum visível numa leitura do CSS. Com `:where()` a especificidade cai para (0,0,1), o peso de um `p` solto, e qualquer componente com cor própria passa a vencer. O mesmo vale para `.cab`, `.cat` e `.sorteio` abaixo. */ :where(.esc) p { color: var(--txt-esc-dim); } .cab { max-width: 720px; margin-bottom: clamp(30px, 4.5vw, 54px); } .cab--centro { margin-inline: auto; text-align: center; } .cab h2, .lentes__grid h2, .rede__grid h2, .sorteio h2 { margin-bottom: 14px; } :where(.cab) p { font-size: var(--fs-lead); color: var(--tinta-2); } .olho { display: inline-block; margin-bottom: 14px; font-family: var(--ff-d); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vm); } .esc .olho { color: var(--ambar); } .link-vm { color: var(--vm); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .link-vm:hover { color: var(--vm-700); } .esc .link-vm { color: var(--ambar); } /* ── 01 · faixa de prova da REDE ────────────────────────────────────────────── ⚠️ Estes números são da REDE NACIONAL, publicados pela franqueadora no site oficial. NÃO são da loja de Cajati, que abre agora e não tem número nenhum. Por isso a faixa é rotulada "a rede em números" e traz a fonte embaixo — deixar um "+3 milhões de clientes" solto ao lado do nome da loja nova seria transferir para ela um histórico que não é dela. */ .prova { background: var(--esc); color: var(--txt-esc); padding-block: clamp(30px, 4vw, 46px); } .prova__olho { display: block; text-align: center; } .prova__grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); text-align: center; } .prova__item strong { display: block; font-family: var(--ff-d); font-weight: 800; font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1; color: var(--ambar); font-variant-numeric: tabular-nums; } .prova__item span { display: block; margin-top: 7px; font-size: 0.8125rem; line-height: 1.35; color: var(--txt-esc-dim); } .prova__fonte { margin-top: 22px; text-align: center; font-size: 0.8125rem; color: var(--txt-esc-dim); } .prova__fonte a { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; } .prova__fonte a, .hero__micro a, .vigencia a { padding-block: 12px; margin-block: -12px; display: inline-block; } @media (min-width: 760px) { .prova__grid { grid-template-columns: repeat(4, 1fr); } } /* ── 02 · ofertas de inauguração ────────────────────────────────────────────── A peça mais importante da página. Cada card carrega a CONDIÇÃO da oferta no próprio corpo, não em asterisco de rodapé: a promoção da armação de R$ 1,00 só vale comprando a lente, e isso está dito pelo próprio cliente na legenda. Esconder a condição é o que gera reclamação no balcão no dia da abertura. */ .ofertas { display: grid; gap: 18px; } @media (min-width: 800px) { .ofertas { grid-template-columns: repeat(2, 1fr); } } .oferta { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sh); transition: transform 220ms var(--e), box-shadow 220ms var(--e), border-color 220ms var(--e); } /* ⚠️ `.oferta:hover` (0,2,0) vencia `.oferta--destaque` (0,1,0) e apagava a moldura vermelha justo quando a pessoa aponta para a oferta âncora. O hover do destacado ESCURECE, respeitando a regra da rampa (só desce). */ .oferta:not(.oferta--destaque):hover { border-color: var(--vm-linha); } .oferta--destaque:hover { border-color: var(--vm-700); } .oferta:hover { transform: translateY(-4px); box-shadow: var(--sh-forte); } /* o card de destaque ganha a borda vermelha e o selo "a mais procurada" */ .oferta--destaque { border: 2px solid var(--vm); } .oferta__flag { position: absolute; top: -13px; left: clamp(24px, 3vw, 34px); padding: 5px 14px; border-radius: var(--r-pill); background: var(--vm); color: #fff; font-family: var(--ff-d); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .oferta__ic { width: 52px; height: 52px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--vm-fraco); color: var(--vm); flex: none; } .oferta__ic svg { width: 28px; height: 28px; } .oferta h3 { margin: 0; } .oferta__preco { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-family: var(--ff-d); line-height: 1; } .oferta__preco strong { font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--vm); letter-spacing: -0.03em; } .oferta__preco span { font-size: 0.9375rem; font-weight: 700; color: var(--tinta-3); } /* ⚠️ ERA `.oferta > p` (0,1,1) e atropelava .oferta__preco e .oferta__cond, que são classes de componente (0,1,0): a condição da oferta saía com 15,4px em vez dos 14px declarados, e as três herdavam o `flex: 1` que era só para o parágrafo descritivo empurrar o botão para baixo. Aqui `:where()` não bastava — o `flex` continuaria vazando. Quem estica ganhou classe própria. */ .oferta__texto { color: var(--tinta-2); font-size: 0.9625rem; flex: 1; } /* a condição da oferta, sempre visível */ .oferta__cond { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-sm); background: var(--creme-2); border-left: 3px solid var(--ambar-esc); font-size: 0.875rem; line-height: 1.5; color: var(--tinta-2); } .oferta__cond svg { width: 18px; height: 18px; flex: none; color: var(--ambar-tinta); margin-top: 2px; } .oferta .btn { margin-top: 2px; } /* aviso de vigência da promoção — fora dos cards, uma vez só */ .vigencia { margin-top: 26px; padding: 18px 22px; border-radius: var(--r); background: var(--vm-fraco); border: 1px dashed var(--vm-linha); text-align: center; font-size: 0.9375rem; color: var(--tinta-2); } .vigencia strong { color: var(--vm); font-weight: 700; } /* o bloco que entra quando as ofertas vencem */ .vigencia--fim { display: grid; gap: 16px; justify-items: center; } .vigencia--fim p { max-width: 56ch; } /* ── 03 · o que você encontra (categorias) ────────────────────────────────── */ .cats { display: grid; gap: 18px; } @media (min-width: 640px) { .cats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .cats { grid-template-columns: repeat(4, 1fr); } } .cat { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--borda); transition: transform 220ms var(--e), border-color 220ms var(--e), box-shadow 220ms var(--e); } .cat:hover { transform: translateY(-4px); border-color: var(--vm-linha); box-shadow: var(--sh); } .cat__ic { width: 54px; height: 54px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--vm-fraco); color: var(--vm); } .cat__ic svg { width: 30px; height: 30px; } .cat h3 { margin: 0; } :where(.cat) p { color: var(--tinta-3); font-size: 0.9375rem; flex: 1; } /* o "a partir de" dentro do card: pílula menor e alinhada à esquerda, para não virar um bloco de duas linhas que empurra o texto para baixo */ /* `flex: none` porque o selo é um

e herdava o `flex: 1` da regra dos parágrafos do card: ele esticava para absorver a sobra vertical, e como cada card tem uma sobra diferente as pílulas de preço da mesma fileira saíam com 24px e 49px de altura. */ .cat .selo { align-self: flex-start; flex: none; padding: 5px 12px; font-size: 0.75rem; } /* banner de produto que abre a seção — foto real de armação do acervo da loja */ .produtos__banner { max-width: 960px; margin: 0 auto clamp(30px, 4vw, 48px); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); } .produtos__banner img { width: 100%; } /* ⚠️ display BLOCK, não flex. Com inline-flex a seta virava um item próprio: sem wrap ela era empurrada para a ponta direita do card (vão de até 186px); com wrap, caía numa TERCEIRA linha sozinha. Em fluxo normal ela simplesmente segue a última palavra, em qualquer quebra. O padding-block de 10px substitui o min-height de 44px (24,8 de linha + 20 = 44,8), então o alvo de toque continua passando no npm run verifica. */ .cat__cta { display: block; margin-top: auto; padding-block: 10px; font-family: var(--ff-d); font-weight: 700; font-size: 0.9375rem; color: var(--vm); text-decoration: none; } .cat__cta svg { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-left: 6px; transition: transform 160ms var(--e); } .cat:hover .cat__cta svg { transform: translateX(4px); } /* ── 04 · formatos de armação ───────────────────────────────────────────────── Os SETE formatos com que a própria rede organiza o catálogo. Cada tile é um link de WhatsApp com o formato já escrito na mensagem: quem chega pelo Instagram escolhe por semelhança visual e trava na hora de escrever a primeira frase — aqui a frase já vai pronta, e o texto que chega no aparelho diz de onde veio o lead, sem backend nenhum. */ .formatos { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 560px) { .formatos { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .formatos { grid-template-columns: repeat(4, 1fr); } } /* 8 tiles em 3 colunas fecham 3+3+2 e deixam a célula da direita vazia — o único tile colorido, que é o CTA de escape, parava no meio da última fileira. Cobre o iPad em retrato e toda a faixa de 560 a 899px. */ @media (min-width: 560px) and (max-width: 899.98px) { .formato--todos { grid-column: span 2; } } .formato { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 128px; padding: 20px 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--borda); text-decoration: none; text-align: center; transition: transform 200ms var(--e), border-color 200ms var(--e), background-color 200ms var(--e), box-shadow 200ms var(--e); } /* 104px, não 76: a 76 as lentes de cada armação ficavam com ~13px de largura e Aviador, Redondo e Quadrado viravam o mesmo borrão. Se dois formatos não são distinguíveis, o bloco inteiro perde a função — ele existe para a pessoa escolher POR SEMELHANÇA VISUAL. */ .formato svg { width: 104px; height: auto; color: var(--tinta); transition: color 200ms var(--e); } @media (max-width: 559.98px) { .formato svg { width: 92px; } } .formato span { font-family: var(--ff-d); font-weight: 700; font-size: 0.875rem; } .formato small { font-size: 0.75rem; color: var(--tinta-3); } .formato:hover, .formato:focus-visible { transform: translateY(-4px); border-color: var(--vm); background: var(--vm-fraco); box-shadow: var(--sh); } .formato:hover svg, .formato:focus-visible svg { color: var(--vm); } /* o último tile é o "todos os modelos", em vermelho cheio */ .formato--todos { background: var(--vm); border-color: var(--vm); color: #fff; } .formato--todos small { color: rgba(255, 255, 255, 0.86); } /* O ícone deste tile vem do conjunto quadrado (24×24), não do conjunto largo dos formatos (48×22). Nos 76px dos outros ele fica visivelmente mais pesado — 46px iguala o peso ótico. */ .formato--todos svg { width: 46px; color: #fff; } .formato--todos:hover, .formato--todos:focus-visible { background: var(--vm-700); border-color: var(--vm-700); } .formato--todos:hover svg, .formato--todos:focus-visible svg { color: #fff; } /* ── 05 · lentes / tecnologia ─────────────────────────────────────────────── */ .lentes__grid { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; } @media (min-width: 920px) { .lentes__grid { grid-template-columns: 1fr 1fr; } } .lentes__foto { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-forte); } .lentes__foto img { width: 100%; } .checks { list-style: none; padding: 0; display: grid; gap: 16px; margin-block: 24px; } .checks li { display: flex; gap: 13px; align-items: flex-start; } .checks > li > svg { width: 22px; height: 22px; flex: none; color: var(--vm); margin-top: 3px; } .esc .checks > li > svg { color: var(--ambar); } .checks li > span { display: grid; gap: 3px; } .checks strong { font-family: var(--ff-d); font-weight: 700; font-size: 1rem; } .checks li > span > span { font-size: 0.9375rem; line-height: 1.55; color: var(--tinta-3); } .esc .checks li > span > span { color: var(--txt-esc-dim); } /* ── 06 · sorteio de inauguração ──────────────────────────────────────────── */ .sorteio { display: grid; gap: clamp(24px, 3.5vw, 40px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r); background: linear-gradient(150deg, var(--vm), var(--vm-800)); color: #fff; box-shadow: var(--sh-forte); } @media (min-width: 860px) { .sorteio { grid-template-columns: 1.15fr 1fr; } } .sorteio h2 { color: #fff; margin-bottom: 12px; } :where(.sorteio) p { color: rgba(255, 255, 255, 0.9); } .sorteio__data { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 7px 15px; border-radius: var(--r-pill); background: var(--ambar); color: var(--on-ambar); font-family: var(--ff-d); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; } .sorteio__data svg { width: 16px; height: 16px; } .sorteio__fonte { margin-top: 16px; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); font-style: italic; } .sorteio__regras { list-style: none; padding: 0; display: grid; gap: 10px; margin-block: 14px 18px; } .sorteio__regras li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.92); } .sorteio__regras svg { width: 19px; height: 19px; flex: none; color: var(--ambar); margin-top: 3px; } .sorteio__cx { padding: 22px; border-radius: var(--r); background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.16); } .sorteio__cx h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; } .sorteio__parceiros { display: flex; flex-wrap: wrap; gap: 8px; } .sorteio__parceiros a { /* 44px, não 38: é alvo de toque, e o `npm run verifica` reprova abaixo disso */ display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: background-color 160ms var(--e); } .sorteio__parceiros a:hover { background: rgba(255, 255, 255, 0.26); } .sorteio .btn { margin-top: 18px; } /* ── 07 · a rede / a loja ─────────────────────────────────────────────────── */ .rede__grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; } @media (min-width: 900px) { .rede__grid { grid-template-columns: 5fr 6fr; } } .rede__foto { position: relative; isolation: isolate; } .rede__foto img { width: 100%; border-radius: var(--r); box-shadow: var(--sh-forte); } /* Legenda da imagem, ABAIXO dela e não sobreposta: a peça de campanha já traz o logo e o slogan queimados no canto, e qualquer selo pousado em cima cobria justamente isso. (Havia aqui um selo "+700" âmbar que, além de tapar o logo, herdava a cor pálida de `.esc p` e saía ilegível sobre o âmbar.) */ .rede__legenda { margin-top: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--txt-esc-dim); font-style: italic; } .citacao { border-left: 3px solid var(--vm); padding-left: 20px; margin-block: 22px; font-family: var(--ff-d); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.4; color: var(--tinta); } .esc .citacao { border-left-color: var(--ambar); color: var(--txt-esc); } .citacao cite { display: block; margin-top: 10px; font-family: var(--ff); font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); } .esc .citacao cite { color: var(--txt-esc-dim); } /* ── 08 · FAQ ─────────────────────────────────────────────────────────────── */ .faq { max-width: 840px; margin-inline: auto; } .faq details { background: #fff; border: 1px solid var(--borda); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; transition: border-color 180ms var(--e); } .faq details[open] { border-color: var(--vm-linha); box-shadow: var(--sh); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; min-height: 56px; cursor: pointer; list-style: none; font-family: var(--ff-d); font-weight: 700; font-size: 1.0625rem; } .faq summary::-webkit-details-marker { display: none; } /* oito perguntas brancas empilhadas e nenhuma reação ao ponteiro: quem usa mouse não sabia qual linha ia abrir antes de clicar */ .faq summary:hover { background: var(--vm-fraco); } .faq__mais { position: relative; width: 18px; height: 18px; flex: none; } .faq__mais::before, .faq__mais::after { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: var(--vm); transition: transform 180ms var(--e); } .faq__mais::after { transform: rotate(90deg); } .faq details[open] .faq__mais::after { transform: rotate(0); } /* `overflow-wrap: anywhere` é rede de segurança: qualquer URL ou palavra longa que entre numa resposta quebra em vez de esticar a página. */ .faq__resp { padding: 0 22px 22px; color: var(--tinta-2); font-size: 0.9625rem; overflow-wrap: anywhere; } .faq__resp a { color: var(--vm); text-decoration: underline; text-underline-offset: 3px; } .faq__fecho { text-align: center; margin-top: 28px; } /* ── 09 · contato ─────────────────────────────────────────────────────────── */ .contato__grid { display: grid; gap: clamp(26px, 4vw, 46px); } @media (min-width: 900px) { .contato__grid { grid-template-columns: 6fr 5fr; align-items: start; } } .dados { list-style: none; padding: 0; display: grid; gap: 20px; } .dados li { display: flex; gap: 14px; align-items: flex-start; } /* ⚠️ `min-width: 0` no filho flexível. Sem isto o item flex assume `min-width: auto` = a largura do conteúdo mais largo, e o endereço empurrava a coluna inteira para 335px dentro de um container de 284 — a página rolava na horizontal a 320px. É a causa nº 1 de overflow em layout flex. */ .dados li > span { min-width: 0; } .dados p, .dados a { overflow-wrap: anywhere; } .dados__ic { width: 46px; height: 46px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--vm-fraco); color: var(--vm); } .esc .dados__ic { background: rgba(246, 181, 62, 0.14); color: var(--ambar); } .dados__ic svg { width: 22px; height: 22px; } .dados strong { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 3px; } .esc .dados strong { color: var(--txt-esc-dim); } .dados a, .dados p { font-size: 1.0625rem; text-decoration: none; } .dados a:hover { color: var(--vm); } .esc .dados a:hover { color: var(--ambar); } /* o link do mapa já é âmbar em repouso (via .esc .link-vm), então o hover âmbar não mudava nada — e é o botão que leva ao endereço, o dado mais procurado da página. Especificidade (0,4,0) para vencer a regra acima. */ .esc .dados__link.link-vm:hover { color: #fff; } .dados__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } /* régua pontilhada ligando o dia e o horário — a linha de tabela de preço do mercado, reaproveitada como sistema */ .dados__horario { display: grid; gap: 5px; font-size: 1rem; } .dados__horario span { display: flex; align-items: baseline; gap: 8px; max-width: 340px; color: var(--tinta-3); } .esc .dados__horario span { color: var(--txt-esc-dim); } .dados__horario span::before { content: ''; order: 1; flex: 1; border-bottom: 1px dotted var(--borda-forte); transform: translateY(-4px); } .esc .dados__horario span::before { border-bottom-color: rgba(255, 255, 255, 0.22); } .dados__horario b { order: 2; color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; } .esc .dados__horario b { color: var(--txt-esc); } .dados__aviso { display: block; margin-top: 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-3); } .esc .dados__aviso { color: var(--txt-esc-dim); } .cta-box { background: linear-gradient(155deg, var(--vm), var(--vm-800)); color: #fff; border-radius: var(--r); padding: clamp(26px, 4vw, 38px); box-shadow: var(--sh-forte); } .cta-box h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 12px; color: #fff; } .cta-box p { margin-bottom: 20px; font-size: 0.9625rem; color: rgba(255, 255, 255, 0.92); } .cta-box .btn { width: 100%; margin-bottom: 10px; } .cta-box .btn--linha { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .cta-box .btn--linha:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; } .cta-box small { display: block; margin-top: 14px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); } /* ⚠️ O componente de mapa embutido foi REMOVIDO daqui. Ele era CSS morto (nenhuma página usava) e, pior, uma armadilha: a próxima pessoa com o endereço confirmado colaria um