/* ========================================================================== landing.css — sistema visual das landings de infoproduto Usado por /kit-introducao-alimentar/, /kit-sono-infantil/ e /manual-das-birras/. Construção: papel creme com grid pontilhado, tipos Fraunces (display) + Inter (texto), bordas 2px de ink e sombras duras deslocadas — recorte de adesivo, não cartão com sombra difusa. Cada página aplica um tema no (.theme-ia / .theme-sono / .theme-birras) que troca apenas o acento. Tudo o mais é compartilhado. Token de cor — a distinção importa para contraste: --accent preenchimento e display ≥24px (basta 3:1) --accent-ink texto abaixo de 24px (precisa de 4.5:1 sobre papel/creme) ========================================================================== */ :root { --paper: #f6ead7; --cream: #fff8eb; --ink: #17130e; --ink-70: rgba(23, 19, 14, 0.75); --ink-55: rgba(23, 19, 14, 0.6); --gold: #f0b33c; --gold-deep: #9a7b22; --shadow-hard: 8px 8px 0 var(--accent); --shadow-soft: 5px 5px 0 var(--accent); --display: 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; } /* ── Temas ───────────────────────────────────────────────────────────────── */ /* Introdução alimentar: tomate e folha — comida, cozinha, horta. */ .theme-ia { --accent: #df412d; --accent-ink: #b8321f; --accent-2: #276243; --accent-2-br: #5aa86f; --check: #5aa86f; } /* Sono: lilás — a cor histórica da página. --gold vira uma faixa lilás clara para que ticker, tag e faixas de CTA não puxem dourado. */ .theme-sono { --accent: #6045be; --accent-ink: #4d35a6; --accent-2: #6045be; --accent-2-br: #7660c7; --gold: #b9a5ea; --gold-deep: #5a43b0; --check: #6045be; } /* Birras: laranja — a cor histórica da página. --gold vira um pêssego alaranjado para as superfícies decorativas, sem dourado. O azul e o coral seguem só na neuro-list (codificam córtex e amígdala do vídeo), definidos na própria página. */ .theme-birras { --accent: #ea580c; --accent-ink: #b0380a; /* 5.17:1 no papel — c2410c ficava em 4.36 aqui */ --accent-2: #b0380a; --accent-2-br: #ea580c; --gold: #f4a866; --gold-deep: #b0380a; --check: #b0380a; } /* BLW: verde-água — corte, textura, alimento. Distinto do tomate da Introdução Alimentar (mesma categoria, produto diferente). */ .theme-blw { --accent: #0f766e; --accent-ink: #0b5852; --accent-2: #b45309; --accent-2-br: #d97706; --gold: #99f0e6; --gold-deep: #0b5852; --check: #0f766e; } /* ── Base ────────────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); background-image: radial-gradient(rgba(23, 19, 14, 0.06) 1px, transparent 1px); background-size: 22px 22px; color: var(--ink); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; } .wrap { max-width: 1020px; margin: 0 auto; padding-left: 22px; padding-right: 22px; } .wrap-narrow { max-width: 780px; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } .skip { position: fixed; z-index: 100; top: 10px; left: 50%; transform: translate(-50%, -160%); background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none; transition: transform .2s; } .skip:focus { transform: translate(-50%, 0); } /* ── Tipografia ──────────────────────────────────────────────────────────── */ h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: .95; letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 22px; } h1 .hl { color: var(--accent); font-style: italic; font-weight: 600; } h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 16px; } h3 { font-size: 17.5px; font-weight: 800; margin-bottom: 8px; } .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; } .sub { max-width: 620px; font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ink-70); } .section-sub { max-width: 560px; color: var(--ink-70); margin-bottom: 40px; } /* ── Nav pill ────────────────────────────────────────────────────────────── */ nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 14px; background: rgba(255, 248, 235, 0.88); backdrop-filter: blur(8px); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 10px 8px 18px; box-shadow: 4px 4px 0 var(--accent); white-space: nowrap; } nav .brand { font-family: var(--display); font-weight: 900; font-size: 15px; text-decoration: none; color: var(--ink); } nav .brand span { color: var(--accent); } nav a.navcta { background: var(--ink); color: var(--cream); text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--ink); transition: background .15s; } nav a.navcta:hover { background: var(--accent); } /* ── Botões ──────────────────────────────────────────────────────────────── */ .btn { display: inline-block; text-decoration: none; cursor: pointer; font-family: var(--sans); font-weight: 800; font-size: 16px; background: var(--ink); color: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 17px 38px; box-shadow: 7px 7px 0 var(--accent); transition: transform .12s, box-shadow .12s, background .15s; } .btn:hover { background: var(--accent); } .btn:active { transform: translate(5px, 5px); box-shadow: 2px 2px 0 var(--accent); } .btn.gold { box-shadow: 7px 7px 0 var(--gold); } .btn.gold:hover { background: var(--accent-2); } .btn-note { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-55); } .pill { display: inline-block; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; box-shadow: 3px 3px 0 var(--accent); margin-bottom: 26px; } .pill em { font-style: normal; color: var(--accent-ink); } /* ── Hero ────────────────────────────────────────────────────────────────── */ header.hero { padding: 118px 0 64px; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } /* Coluna estreita: o clamp global levaria a headline a 5 linhas. */ .hero-grid h1 { font-size: clamp(2.35rem, 4.3vw, 3.9rem); } .hero-grid .sub { margin-bottom: 30px; } /* Peça de assinatura do hero: recorte com borda de ink e sombra dura. Só filhos diretos — assinaturas que trazem a própria moldura (o mostrador do sono, o planner da IA) ficam de fora e não herdam uma segunda borda. */ .hero-art { justify-self: center; width: 100%; max-width: 420px; } .hero-art > img, .hero-art > svg { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-hard); background: var(--cream); } .value-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } /* Sem flex aqui de propósito: emoji e texto são um único nó de texto, e o flex colapsaria o espaço entre eles. */ .value { display: inline-block; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; box-shadow: 3px 3px 0 var(--accent); } /* ── Ticker ──────────────────────────────────────────────────────────────── */ .ticker { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--gold); overflow: hidden; padding: 10px 0; } .ticker-track { display: flex; gap: 44px; width: max-content; animation: mq 26s linear infinite; font-weight: 800; font-size: 14px; letter-spacing: .03em; } @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Seções ──────────────────────────────────────────────────────────────── */ section { padding: 72px 0; } /* Cabeçalho de seção em duas colunas: título à esquerda, intro à direita. */ .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr); gap: 48px; align-items: end; margin-bottom: 40px; } .section-head h2 { margin-bottom: 0; } .section-head .section-sub { margin-bottom: 0; } @media (max-width: 860px) { .section-head { grid-template-columns: 1fr; gap: 14px; } } .card { background: var(--cream); border: 2px solid var(--ink); border-radius: 18px; padding: 28px 24px; box-shadow: var(--shadow-hard); } .card .num { font-family: var(--display); font-weight: 900; font-size: 40px; color: var(--accent); line-height: 1; margin-bottom: 12px; } .card .kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; } .card p { font-size: 14.5px; color: var(--ink-70); } .card ul { list-style: none; margin-top: 12px; font-size: 14px; color: var(--ink-70); } .card li { padding: 4px 0 4px 24px; position: relative; } .card li::before { content: '✓'; position: absolute; left: 0; color: var(--check); font-weight: 800; } .card.no li::before { content: '✕'; color: var(--accent); } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; } .duas .card h3 { font-size: 16px; } /* Card de guia — variação compacta do .card, usada nas grades de 7–8 itens. */ .guide { padding: 24px 20px; box-shadow: var(--shadow-soft); } .guide h3 { font-size: 16px; line-height: 1.2; margin-top: 14px; } .guide p { font-size: 13.5px; line-height: 1.5; } .guide .num { font-size: 30px; margin-bottom: 0; } .guide.bonus { background: var(--gold); } .guide.bonus .num { color: var(--ink); } .bonus-tag { display: inline-block; margin: 12px 0 2px; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 11px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* ── Dor / agitação ──────────────────────────────────────────────────────── */ .dor { background: var(--cream); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .dor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; } .dor-item { background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 24px 22px; box-shadow: 6px 6px 0 var(--accent); } .dor-item strong { display: block; font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1.12; } .dor-item p { margin-top: 9px; font-size: 14.5px; color: var(--ink-70); } /* ── Faixa de CTA no meio do conteúdo ────────────────────────────────────── */ .content-cta { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 30px; background: var(--gold); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-hard); } .content-cta strong { display: block; font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.15; } .content-cta p { max-width: 560px; margin-top: 4px; font-size: 14px; color: var(--ink-70); } .content-cta .btn { flex-shrink: 0; } /* ── Cards de conteúdo do Guia BLW ──────────────────────────────────────── */ .blw-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .blw-content-card { display: flex; flex-direction: column; min-height: 410px; background: var(--cream); border: 2px solid var(--ink); border-radius: 20px; padding: 28px 24px 24px; box-shadow: var(--shadow-hard); } .blw-content-card:nth-child(2) { box-shadow: 8px 8px 0 var(--gold); } .blw-card-label { align-self: flex-start; margin-bottom: 18px; padding: 5px 10px; background: var(--ink); color: var(--cream); border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .blw-content-card h3 { max-width: 250px; margin-bottom: 10px; font-family: var(--display); font-size: 28px; line-height: 1.02; } .blw-content-card > p { font-size: 14px; line-height: 1.55; color: var(--ink-70); } .blw-cut-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: auto; padding-top: 24px; } .blw-cut-demo > div { display: flex; flex-direction: column; align-items: center; text-align: center; } .blw-cut-demo strong { font-size: 11px; color: var(--accent-ink); } .blw-cut-demo small { max-width: 92px; font-size: 10px; line-height: 1.3; color: var(--ink-55); } .blw-cut-stick { display: block; width: 36px; height: 88px; margin: 11px 0; background: #e58c25; border: 2px solid var(--ink); border-radius: 16px 16px 12px 12px; transform: rotate(5deg); } .blw-cut-dice { display: grid; grid-template-columns: repeat(2, 26px); gap: 5px; margin: 23px 0 17px; } .blw-cut-dice i { display: block; width: 26px; height: 26px; background: #e58c25; border: 2px solid var(--ink); border-radius: 7px; } .blw-cut-arrow { font-family: var(--display); font-size: 30px; color: var(--accent-ink); } .blw-food-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 24px; } .blw-food-groups span { display: flex; min-height: 62px; align-items: center; justify-content: center; padding: 10px 8px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; font-size: 11.5px; font-weight: 800; text-align: center; } .blw-food-groups span:nth-child(2), .blw-food-groups span:nth-child(3) { background: rgba(153, 240, 230, .28); } .blw-food-steps { list-style: none; margin-top: auto; padding-top: 24px; } .blw-food-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(23, 19, 14, .28); } .blw-food-steps li:last-child { border-bottom: 0; } .blw-food-steps li > span { display: grid; place-items: center; width: 36px; height: 36px; background: var(--gold); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--display); font-size: 14px; font-weight: 900; } .blw-food-steps strong { display: block; font-size: 12.5px; } .blw-food-steps small { display: block; color: var(--ink-55); font-size: 10.5px; } /* ── Seção invertida (autoridade) ────────────────────────────────────────── */ .dark { background: var(--ink); color: var(--cream); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .dark .eyebrow { color: var(--gold); } .dark h2 { color: var(--cream); } .dark .section-sub { color: rgba(255, 248, 235, 0.75); } .doc-box { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; } .doc-foto { width: 130px; height: 130px; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; background: #2a251d; } .doc-box p { max-width: 560px; font-size: 15.5px; line-height: 1.75; color: rgba(255, 248, 235, 0.85); } .doc-cred { margin-top: 10px; font-size: 13px; color: var(--gold); font-weight: 700; letter-spacing: .05em; } /* ── Depoimentos ─────────────────────────────────────────────────────────── */ .depo-rating { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 11px 20px; box-shadow: 4px 4px 0 var(--accent); } .depo-nota { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; } .depo-stars { color: var(--gold-deep); font-size: 15px; letter-spacing: 2px; } .depo-rating-txt { font-size: 13px; color: var(--ink-70); } .depo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .depo-card { display: flex; flex-direction: column; background: var(--cream); border: 2px solid var(--ink); border-radius: 18px; padding: 26px 24px; box-shadow: var(--shadow-hard); } .depo-card blockquote { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); } .depo-card figcaption { margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 800; } .depo-card figcaption span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-55); } /* ── Preço ───────────────────────────────────────────────────────────────── */ .preco-card { max-width: 460px; margin: 0 auto; text-align: center; background: var(--cream); border: 2px solid var(--ink); border-radius: 22px; padding: 42px 36px; box-shadow: 14px 14px 0 var(--accent); } .preco-card .tag { display: inline-block; background: var(--gold); border: 2px solid var(--ink); border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; margin-bottom: 18px; } .preco-de { font-size: 14px; color: var(--ink-55); } .preco { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1; margin: 6px 0 4px; } .preco small { font-size: 22px; vertical-align: super; } .preco-x { font-size: 13.5px; color: var(--ink-70); } .preco-ancora { font-size: 12.5px; color: var(--gold-deep); margin: 10px 0 24px; } .preco-card ul { list-style: none; text-align: left; margin: 0 auto 26px; max-width: 320px; font-size: 14px; } .preco-card li { padding: 5px 0 5px 26px; position: relative; } .preco-card li::before { content: '✓'; position: absolute; left: 0; color: var(--check); font-weight: 800; } .preco-card .btn { width: 100%; } .garantia { margin-top: 18px; font-size: 13px; color: var(--ink-70); line-height: 1.6; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ details { background: var(--cream); border: 2px solid var(--ink); border-radius: 14px; margin-bottom: 14px; box-shadow: var(--shadow-soft); overflow: hidden; } summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 15.5px; padding: 18px 22px; display: flex; justify-content: space-between; gap: 14px; } summary::-webkit-details-marker { display: none; } summary::after { content: '+'; font-family: var(--display); font-size: 22px; color: var(--accent-ink); } details[open] summary::after { content: '–'; } details p { padding: 0 22px 18px; font-size: 14.5px; color: var(--ink-70); } /* ── CTA final, fontes, rodapé ───────────────────────────────────────────── */ .final { text-align: center; } .final .section-sub { margin-left: auto; margin-right: auto; } .fontes { border-top: 2px solid var(--ink); background: var(--cream); padding: 34px 0; } .fontes p { font-size: 12.5px; color: var(--ink-70); max-width: 720px; } footer { background: var(--ink); color: rgba(255, 248, 235, 0.7); text-align: center; padding: 26px 20px; font-size: 12px; line-height: 1.8; } footer strong { color: var(--gold); } footer a { color: rgba(255, 248, 235, 0.7); } /* ── Reveal ──────────────────────────────────────────────────────────────── */ /* Nunca aplicar .reveal ao elemento de LCP: a opacidade zero adia a pintura e anula o preload/fetchpriority do hero. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ── Responsivo ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; } .hero-grid .sub { margin-left: auto; margin-right: auto; } .value-row { justify-content: center; } .hero-art { max-width: 360px; } .grid4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .grid3 { grid-template-columns: 1fr; } .depo-grid { grid-template-columns: 1fr; } .blw-card-grid { grid-template-columns: 1fr; } .blw-content-card { min-height: 0; } } @media (max-width: 760px) { .dor-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .duas { grid-template-columns: 1fr; } } @media (max-width: 600px) { header.hero { padding-top: 104px; } section { padding: 56px 0; } .grid4 { grid-template-columns: 1fr; } .btn { display: block; text-align: center; } .content-cta { display: block; } .content-cta .btn { margin-top: 20px; } .blw-content-card { padding: 25px 22px 22px; box-shadow: 6px 6px 0 var(--accent); } .blw-content-card:nth-child(2) { box-shadow: 6px 6px 0 var(--gold); } .blw-content-card h3 { font-size: 26px; } .ticker-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; gap: 18px; padding: 0 20px; } .preco-card { padding: 34px 24px; box-shadow: 8px 8px 0 var(--accent); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } }