/* Vitaminas no Prato — o que não pinta a primeira dobra. A dobra está inline no . */ .vnp-band { padding: var(--s5) 0; } .vnp-tint { background: #e3e8df; color: var(--ink); } .vnp-band h2 { margin: 0 0 var(--s2); font: 700 clamp(28px, 6.4vw, 44px)/1.1 var(--serif); letter-spacing: -.005em; max-width: 22em; } .vnp-band h3 { font: 700 22px/1.2 var(--serif); margin: 0 0 var(--s1); } .vnp-band p { margin: 0 0 var(--s2); max-width: 40em; } .vnp-intro { font-size: 18px; color: var(--mute); } .vnp-note { font-size: 16px; color: var(--mute); } .vnp-narrow { max-width: 820px; } [data-align="center"] { text-align: center; } [data-align="center"] h2, [data-align="center"] p { margin-left: auto; margin-right: auto; } /* Mecanismo: os cinco passos, numerados em CSS */ .vnp-steps { counter-reset: vnp-step; list-style: none; margin: var(--s4) 0 var(--s3); padding: 0; display: grid; gap: var(--s2); } .vnp-steps li { counter-increment: vnp-step; position: relative; padding: var(--s3) var(--s3) var(--s3) 76px; background: var(--sheet); color: var(--ink); border-radius: 14px; border: 1px solid rgba(23, 28, 21, .08); font-size: 16px; } .vnp-steps li::before { content: counter(vnp-step); position: absolute; left: var(--s3); top: 14px; font: 700 44px/1 var(--serif); color: var(--tomato); } .vnp-steps li::after { content: ""; position: absolute; left: 56px; top: var(--s3); bottom: var(--s3); width: 1px; background: var(--glow); } /* O que tem dentro: capa ao lado do índice */ .vnp-shelf-grid { display: grid; gap: var(--s4); align-items: start; } .vnp-book { margin: 0 auto; max-width: 260px; } .vnp-book img { border-radius: 4px 10px 10px 4px; box-shadow: -6px 0 0 #2d4520, 0 22px 40px rgba(23, 28, 21, .25); } .vnp-index { list-style: none; margin: var(--s3) 0 0; padding: 0; } .vnp-index li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid rgba(23, 28, 21, .14); font-size: 16px; } .vnp-index span { font: 700 26px/1.1 var(--serif); color: var(--stem); } /* Para quem é / não é: marcas desenhadas em CSS */ .vnp-ticks, .vnp-cross { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); } .vnp-ticks li, .vnp-cross li { position: relative; padding-left: 36px; font-size: 17px; } .vnp-ticks li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 16px; border: solid var(--stem); border-width: 0 3px 3px 0; transform: rotate(45deg); } .vnp-cross li::before, .vnp-cross li::after { content: ""; position: absolute; left: 2px; top: 13px; width: 18px; height: 3px; background: var(--tomato); transform: rotate(45deg); border-radius: 2px; } .vnp-cross li::after { transform: rotate(-45deg); } /* A amostra: a página do guia como folha de papel */ .vnp-split { display: grid; gap: var(--s4); align-items: center; } .vnp-leaf { margin: 0; background: var(--sheet); color: var(--ink); padding: var(--s4) var(--s3) var(--s3); border-radius: 6px; box-shadow: 0 1px 0 rgba(23, 28, 21, .06), 0 24px 48px rgba(23, 28, 21, .14); border-top: 6px solid var(--leaf); } .vnp-leaf-run { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--s1); } .vnp-leaf h3 { font-size: 34px; margin: 0 0 var(--s2); } .vnp-leaf-text { font-size: 15px; } .vnp-leaf figcaption { font-size: 13px; color: var(--mute); margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid rgba(23, 28, 21, .12); } .vnp-grid-c { width: 100%; border-collapse: collapse; margin: var(--s2) 0; font-size: 15px; } .vnp-grid-c caption { text-align: left; font-weight: 600; font-size: 14px; color: var(--stem); padding-bottom: var(--s1); } .vnp-grid-c th, .vnp-grid-c td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(23, 28, 21, .1); } .vnp-grid-c thead th { font-size: 13px; color: var(--mute); font-weight: 600; } .vnp-grid-c tbody th { font-weight: 600; } .vnp-grid-c td:last-child { font-weight: 600; color: var(--stem); } /* A dor: o número de mercado com fonte */ .vnp-stat { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; margin-top: var(--s4); padding-top: var(--s3); border-top: 2px solid var(--ink); } .vnp-stat strong { font: 700 72px/1 var(--serif); color: var(--tomato); } .vnp-stat span { font-size: 16px; } /* As fontes */ .vnp-refs { margin: var(--s4) 0 0; display: grid; gap: var(--s2); } .vnp-refs div { background: var(--sheet); color: var(--ink); border-radius: 14px; padding: var(--s3); border-left: 4px solid var(--leaf); } .vnp-refs dt { font: 700 22px/1.2 var(--serif); margin-bottom: 6px; } .vnp-refs dd { margin: 0; font-size: 16px; } /* Bônus */ .vnp-gifts { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); counter-reset: vnp-gift; } .vnp-gifts li { counter-increment: vnp-gift; position: relative; background: var(--sheet); color: var(--ink); border-radius: 14px; padding: var(--s3); border: 1px solid rgba(23, 28, 21, .08); } .vnp-gifts li::after { content: "Bônus " counter(vnp-gift); position: absolute; right: var(--s3); top: var(--s3); font: 700 16px/1 var(--serif); color: var(--tomato); } .vnp-gifts p { font-size: 16px; margin: 0; } .vnp-fmt { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--stem); background: #e3e8df; padding: 4px 10px; border-radius: 999px; margin-bottom: var(--s2); } /* A terça em barras: a trilha vai de 0 a 200%, a linha marca 100% */ .vnp-bars { margin: 0; background: var(--sheet); color: var(--ink); border-radius: 14px; padding: var(--s3); } .vnp-bars figcaption { font-size: 14px; color: var(--mute); margin-bottom: var(--s2); } .vnp-bars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .vnp-bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15px; } .vnp-bar-k { font-weight: 600; } .vnp-bar-v { color: var(--mute); text-align: right; } .vnp-bar-t { grid-column: 1 / -1; position: relative; height: 12px; border-radius: 6px; background: #e3e8df; } .vnp-bar-t::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); } .vnp-bar-t i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * .5%); border-radius: 6px; background: var(--leaf); } /* Preço: vidro sobre o prato */ .vnp-table-set { position: relative; overflow: hidden; background: #2d4520; } .vnp-table-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vnp-table-set .vnp-wrap { position: relative; } .vnp-ticket { max-width: 560px; margin: 0 auto; padding: var(--s4) var(--s3); border-radius: 22px; background: rgba(251, 251, 248, .8); color: var(--ink); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 24px 60px rgba(23, 28, 21, .3); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vnp-ticket { background: #fbfbf8; color: #171c15; } } .vnp-ticket h2 { font-size: clamp(26px, 5.6vw, 36px); } .vnp-cost { font: 700 84px/1 var(--serif); color: var(--ink); margin: var(--s2) auto var(--s1); } .vnp-cost span { font-size: 34px; vertical-align: .9em; margin-right: 4px; } .vnp-terms-line { font-size: 16px; color: var(--mute); } .vnp-ticket-list { list-style: none; margin: var(--s3) auto; padding: 0; text-align: left; max-width: 360px; display: grid; gap: 10px; } .vnp-ticket-list li { position: relative; padding-left: 30px; font-size: 16px; } .vnp-ticket-list li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 13px; border: solid var(--stem); border-width: 0 3px 3px 0; transform: rotate(45deg); } .vnp-buy-wide { width: 100%; } .vnp-trust { font-size: 15px; color: var(--mute); margin-top: var(--s2); } /* Garantia: selo desenhado em CSS */ .vnp-pledge { display: grid; gap: var(--s3); align-items: center; } .vnp-stamp { width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--stem); color: #fff; box-shadow: 0 0 0 6px #e3e8df, 0 0 0 8px var(--stem); } .vnp-stamp strong { font: 700 56px/.9 var(--serif); } .vnp-stamp span { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; } /* Fechamento no escuro */ .vnp-dusk { background: var(--ink); color: #eef1ec; } .vnp-dusk .vnp-intro { color: #d5dbd1; } .vnp-again { font: 700 24px/1.3 var(--serif); color: #eef1ec; } .vnp-buy-light { background: #eef1ec; color: #1f3314; box-shadow: none; } .vnp-buy-light:hover { background: #fff; color: #1f3314; } /* FAQ nativo */ .vnp-asks { margin-top: var(--s3); border-top: 1px solid rgba(23, 28, 21, .16); } .vnp-asks details { border-bottom: 1px solid rgba(23, 28, 21, .16); } .vnp-asks summary { cursor: pointer; list-style: none; position: relative; padding: 18px 40px 18px 0; font-weight: 600; font-size: 17px; min-height: 44px; } .vnp-asks summary::-webkit-details-marker { display: none; } .vnp-asks summary::after { content: ""; position: absolute; right: 8px; top: 24px; width: 10px; height: 10px; border: solid var(--stem); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; } .vnp-asks details[open] summary::after { transform: rotate(-135deg); top: 30px; } .vnp-asks details p { font-size: 16px; color: var(--mute); padding-bottom: var(--s2); } /* Rodapé */ .vnp-foot { background: var(--ink); color: #d5dbd1; padding: var(--s5) 0 calc(var(--s5) + 72px); font-size: 15px; } .vnp-foot-grid { display: grid; gap: var(--s3); } .vnp-foot p { margin: 0 auto; } .vnp-foot a { display: block; color: #eef1ec; text-decoration: none; padding: 6px 0; } .vnp-foot a:hover { text-decoration: underline; } .vnp-foot-name { font: 700 24px/1.2 var(--serif); color: #eef1ec; } .vnp-copy { margin-top: var(--s4); padding-top: var(--s2); font-size: 13px; } /* Revelação: só existe quando o script marcou o */ .vnp-live .vnp-rise { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .vnp-live .vnp-rise.vnp-in { opacity: 1; transform: none; } @media (max-width: 559px) { .vnp-grid-c thead { display: none; } .vnp-grid-c tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid rgba(23, 28, 21, .1); } .vnp-grid-c tbody th { grid-column: 1 / -1; padding: 0; border: 0; } .vnp-grid-c td { padding: 0; border: 0; font-size: 14px; } .vnp-grid-c td::before { content: attr(data-k); display: block; font-size: 12px; font-weight: 400; color: var(--mute); } .vnp-stat { grid-template-columns: 1fr; gap: var(--s1); } } @media (min-width: 769px) { .vnp-band { padding: var(--s6) 0; } .vnp-intro { font-size: 19px; } .vnp-steps { grid-template-columns: repeat(5, 1fr); } .vnp-steps li { padding: 76px var(--s3) var(--s3); } .vnp-steps li::after { left: var(--s3); right: var(--s3); top: 66px; bottom: auto; width: auto; height: 1px; } .vnp-shelf-grid { grid-template-columns: 300px 1fr; gap: var(--s5); } .vnp-book { max-width: none; transform: rotate(-2deg); } .vnp-split { grid-template-columns: 1fr 1.1fr; gap: var(--s5); } .vnp-leaf { transform: rotate(1deg); padding: var(--s4); } .vnp-refs { grid-template-columns: repeat(2, 1fr); } .vnp-gifts { grid-template-columns: repeat(2, 1fr); } .vnp-pledge { grid-template-columns: 160px 1fr; gap: var(--s4); } .vnp-stamp { width: 150px; height: 150px; } .vnp-ticket { padding: var(--s5) var(--s4); } .vnp-foot { padding-bottom: var(--s5); } .vnp-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .vnp-live .vnp-rise { opacity: 1; transform: none; } .vnp-book, .vnp-leaf { transform: none; } }