:root { /* Paleta "café/dourado premium" — espelha o tema custom do Linktree (@promoonze): fundo quase preto de tom quente, texto off-white, destaque em dourado/cobre. O verde do WhatsApp é a única exceção de cor deliberada, para reconhecimento imediato da ação. */ --landing-bg: #1A1410; --landing-bg-alt: #211A14; --landing-surface: #241D17; --landing-surface-hover: #2C241C; --landing-border: #3A2E22; --landing-chrome-bg: rgba(26, 20, 16, 0.92); --landing-chrome-bg-strong: rgba(26, 20, 16, 0.95); --landing-heading: #F5EFE6; --landing-text: #C9BFB2; --landing-text-muted: #8A7F72; --landing-accent: #C9975B; --landing-accent-hover: #E0B378; --landing-accent-ink: #241A0E; --landing-secondary-accent: #B08D4F; --landing-accent-soft: rgba(201, 151, 91, 0.12); --landing-accent-soft-border: rgba(201, 151, 91, 0.35); --landing-whatsapp: #25D366; --landing-whatsapp-hover: #22bd5a; --landing-radius: 1rem; --landing-radius-pill: 999px; --landing-radius-button: 0.75rem; --landing-shadow-header: 0 2px 16px rgba(0, 0, 0, 0.35); --landing-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.35); --landing-shadow-glow-accent: 0 10px 28px rgba(201, 151, 91, 0.28); --landing-shadow-glow-whatsapp: 0 10px 28px rgba(37, 211, 102, 0.28); --landing-container-width: 1120px; --landing-narrow-width: 640px; /* Altura do header fixo — usada também no padding-top do body para que o header não cubra o topo do hero. */ --landing-header-height: 3.5rem; --landing-z-header: 90; --landing-z-sticky: 100; --landing-z-toast: 200; --landing-heading-font: 'Space Grotesk', sans-serif; } /* Tema "Pescaria": paleta verde-petróleo/turquesa por cima dos mesmos tokens do tema padrão, ativada pela classe landing-theme-pescaria no (ver landing_add_visual_theme_body_class() em inc/helpers.php). */ body.landing-theme-pescaria { --landing-bg: #0D1F1E; --landing-bg-alt: #112928; --landing-surface: #15302E; --landing-surface-hover: #1B3A37; --landing-border: #234745; --landing-heading: #EAF6F4; --landing-text: #B9D6D2; --landing-text-muted: #7FA39E; --landing-accent: #2FB6A3; --landing-accent-hover: #3FCFB9; --landing-secondary-accent: #E3A857; --landing-accent-soft: rgba(47, 182, 163, 0.14); --landing-accent-soft-border: rgba(47, 182, 163, 0.4); --landing-chrome-bg: rgba(13, 31, 30, 0.92); --landing-chrome-bg-strong: rgba(13, 31, 30, 0.95); --landing-heading-font: 'Bitter', serif; } /* Padrão decorativo de ondas no rodapé do hero, só no tema Pescaria — SVG embutido como data URI, sem depender de nenhum arquivo de imagem. */ body.landing-theme-pescaria .landing-hero { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12c10-12 20-12 30 0s20 12 30 0 20-12 30 0 20 12 30 0' stroke='%232FB6A3' stroke-width='2' fill='none' opacity='0.35'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: bottom; background-size: 120px 24px; } /* Tema "Mercado & Atacado": paleta "Verde Feira" — verde-escuro profundo com destaque amarelo-mostarda (preço) e laranja queimado (secundário), mesmo mecanismo do tema Pescaria (classe no , mesmos tokens). */ body.landing-theme-mercado { --landing-bg: #14210F; --landing-bg-alt: #1B2C14; --landing-surface: #21351A; --landing-surface-hover: #2A4020; --landing-border: #3C5A2E; --landing-heading: #F5F3E7; --landing-text: #C9D6B8; --landing-text-muted: #8FA37A; --landing-accent: #E8A93A; --landing-accent-hover: #F2BE5C; --landing-secondary-accent: #C25B2C; --landing-accent-soft: rgba(232, 169, 58, 0.14); --landing-accent-soft-border: rgba(232, 169, 58, 0.4); --landing-chrome-bg: rgba(20, 33, 15, 0.92); --landing-chrome-bg-strong: rgba(20, 33, 15, 0.95); --landing-heading-font: 'Poppins', sans-serif; } /* Padrão decorativo de "borda de cupom" (zigue-zague, como a serrilha de uma etiqueta de oferta) no rodapé do hero, só no tema Mercado & Atacado — mesma técnica do tema Pescaria (SVG embutido, sem arquivo de imagem). */ body.landing-theme-mercado .landing-hero { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6l5-6 5 6 5-6 5 6 5-6 5 6 5-6 5 6' stroke='%23E8A93A' stroke-width='2' fill='none' opacity='0.35'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: bottom; background-size: 40px 12px; } /* Tema "Casa & Decoração": paleta "Ameixa Elegante" — roxo-ameixa profundo com destaque dourado-rosado e malva secundário, mesmo mecanismo dos outros temas (classe no , mesmos tokens). */ body.landing-theme-casa { --landing-bg: #1F1220; --landing-bg-alt: #281A2A; --landing-surface: #302136; --landing-surface-hover: #3A2941; --landing-border: #4A3550; --landing-heading: #F5EDE8; --landing-text: #D6C3D1; --landing-text-muted: #9B7F97; --landing-accent: #D9A05B; --landing-accent-hover: #E8B87A; --landing-secondary-accent: #8C5B7A; --landing-accent-soft: rgba(217, 160, 91, 0.14); --landing-accent-soft-border: rgba(217, 160, 91, 0.4); --landing-chrome-bg: rgba(31, 18, 32, 0.92); --landing-chrome-bg-strong: rgba(31, 18, 32, 0.95); --landing-heading-font: 'Fraunces', serif; } /* Padrão decorativo de borda ondulada (tipo acabamento de tecido/cerâmica — arcos em vez de zigue-zague ou onda), só no tema Casa & Decoração — mesma técnica dos outros temas (SVG embutido, sem arquivo de imagem). */ body.landing-theme-casa .landing-hero { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 0a6 6 0 0 0 12 0 6 6 0 0 0 12 0' stroke='%23D9A05B' stroke-width='2' fill='none' opacity='0.35'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: bottom; background-size: 24px 12px; } * { box-sizing: border-box; } body { background: var(--landing-bg); color: var(--landing-text); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.55; margin: 0; padding-top: var(--landing-header-height); --landing-card-bg: var(--landing-surface); --landing-card-border: var(--landing-border); } /* Admin logado vendo o front-end: a admin bar do WP fica fixa no topo por cima do nosso header fixo, então o conteúdo precisa de um respiro maior no topo. "admin-bar" é a classe que o WordPress sempre adiciona ao body nesse caso — mais robusto do que travar numa combinação específica de classes de página (home, blog, etc.). */ body.admin-bar { padding-top: 44px; } h1, h2, h3 { font-family: var(--landing-heading-font); color: var(--landing-heading); line-height: 1.15; margin: 0 0 0.75rem; } p { margin: 0 0 1rem; } a { color: var(--landing-accent); } a:hover { color: var(--landing-accent-hover); } img { max-width: 100%; } /* Contêiner largo (grades de ofertas, header, footer) e contêiner estreito e centralizado (texto de hero / CTA final), como na referência. */ .landing-container { max-width: var(--landing-container-width); margin: 0 auto; padding: 0 1.25rem; } .landing-narrow { max-width: var(--landing-narrow-width); margin: 0 auto; text-align: center; padding: 0 1.25rem; } /* ===== Header ===== */ .landing-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--landing-z-header); min-height: var(--landing-header-height); background: var(--landing-chrome-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--landing-border); box-shadow: var(--landing-shadow-header); } .landing-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--landing-container-width); min-height: var(--landing-header-height); margin: 0 auto; padding: 0 1.25rem; } .landing-header__brand { font-family: var(--landing-heading-font); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--landing-heading); text-decoration: none; } /* ===== Botão WhatsApp ===== */ .landing-whatsapp-button { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--landing-whatsapp); color: #fff; text-decoration: none; padding: 0.85rem 2.75rem; border-radius: var(--landing-radius-button); font-weight: 600; font-size: 0.98rem; box-shadow: var(--landing-shadow-glow-whatsapp); transition: background-color 0.15s ease, transform 0.15s ease; } .landing-whatsapp-button:hover { background: var(--landing-whatsapp-hover); color: #fff; transform: translateY(-1px); } .landing-whatsapp-button--full { padding-left: 22px; padding-right: 22px; } .landing-whatsapp-button__icon { flex-shrink: 0; } .landing-whatsapp-button--compact { padding: 0.55rem 1.15rem; font-size: 0.9rem; box-shadow: none; } .landing-whatsapp-button--compact .landing-whatsapp-button__icon { width: 16px; height: 16px; } .landing-whatsapp-label--mobile { display: none; } @media (max-width: 640px) { .landing-whatsapp-label--desktop { display: none; } .landing-whatsapp-label--mobile { display: inline; } } /* ===== Hero ===== */ .landing-hero { padding: 20px 1.25rem 2.75rem; } .landing-hero__inner { max-width: var(--landing-narrow-width); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .landing-hero__badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--landing-accent-soft); border: 1px solid var(--landing-accent-soft-border); color: var(--landing-accent); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 0.9rem; border-radius: var(--landing-radius-pill); margin-bottom: 1.25rem; } .landing-hero__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.85rem; } .landing-hero__subtitle { color: var(--landing-text); font-size: 0.95rem; max-width: 30rem; margin: 0 auto 1.35rem; } /* Trecho marcado com *asteriscos* no título/subtítulo do hero (Customizer), ex: "das *melhores lojas*" — mesmo destaque em qualquer um dos dois. */ .landing-hero__accent { color: var(--landing-accent); font-weight: 700; } /* ===== Prova social (avatares + depoimento) ===== */ .landing-social-proof { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.75rem; text-align: center; } .landing-social-proof__count { color: var(--landing-accent); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 0.5rem; } .landing-social-proof__avatars { display: flex; align-items: center; } .landing-social-proof__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--landing-bg); object-fit: cover; margin-left: -0.6rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .landing-social-proof__avatar:first-child { margin-left: 0; } .landing-social-proof__avatar--more { display: inline-flex; align-items: center; justify-content: center; background: var(--landing-accent); color: var(--landing-accent-ink); font-size: 0.65rem; font-weight: 700; } .landing-social-proof__testimonial { max-width: 22rem; } .landing-social-proof__quote { color: var(--landing-text); font-size: 0.85rem; font-style: italic; line-height: 1.5; margin: 0 0 0.35rem; } .landing-social-proof__stars { color: var(--landing-accent); font-size: 0.9rem; letter-spacing: 0.15em; } .landing-hero__live { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--landing-surface); border: 1px solid var(--landing-border); color: var(--landing-text); font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.9rem 0.4rem 0.7rem; border-radius: var(--landing-radius-pill); margin-bottom: 1.75rem; } .landing-hero__live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--landing-whatsapp); box-shadow: 0 0 0 rgba(37, 211, 102, 0.55); animation: landing-pulse-dot 1.8s infinite; } @keyframes landing-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* ===== Destaques / Listagem (seções largas) ===== */ .landing-listagem, .landing-destaques { padding: 2.5rem 1.25rem; } .landing-destaques { padding-top: 20px; padding-bottom: 20px; background: var(--landing-bg-alt); border-top: 1px solid var(--landing-border); border-bottom: 1px solid var(--landing-border); } .landing-destaques__title, .landing-listagem__title { max-width: var(--landing-container-width); margin: 0 auto 1.5rem; text-align: center; } .landing-listagem__grid, .landing-destaques__grid { max-width: var(--landing-container-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; } .landing-listagem__controls { display: flex; flex-direction: column; gap: 0.75rem; max-width: var(--landing-container-width); margin: 0 auto 2rem; } .landing-listagem__search { width: 100%; padding: 0.75rem 1.1rem; border: 1px solid var(--landing-border); border-radius: var(--landing-radius-pill); background: var(--landing-surface); color: var(--landing-heading); font: inherit; } .landing-listagem__search::placeholder { color: var(--landing-text-muted); } .landing-listagem__search:focus { outline: none; border-color: var(--landing-accent); } /* Chips de loja: rolagem horizontal no mobile, sem quebrar linha. */ .landing-listagem__stores { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; } .landing-chip { flex: 0 0 auto; padding: 0.45rem 1rem; border: 1px solid var(--landing-border); border-radius: var(--landing-radius-pill); background: var(--landing-surface); color: var(--landing-text); font: inherit; font-size: 0.88rem; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, background-color 0.15s ease; } .landing-chip:hover { border-color: var(--landing-accent); color: var(--landing-heading); } .landing-chip--active { background: var(--landing-accent); border-color: var(--landing-accent); color: var(--landing-accent-ink); font-weight: 600; } .landing-listagem__status, .landing-listagem__empty { max-width: var(--landing-container-width); margin: 1.5rem auto 0; text-align: center; color: var(--landing-text-muted); font-size: 0.9rem; } /* ===== Card de oferta ===== */ .landing-card { /* Âncora do .landing-card__discount, que é absolute — sem isso o badge de desconto se posicionava em relação à página inteira. */ position: relative; display: flex; flex-direction: column; /* O card é item da grade E container flex ao mesmo tempo — sem essa altura explícita, o "stretch" padrão do grid nem sempre propaga corretamente para o flex interno, e os footers dos cards de uma mesma linha ficam desalinhados quando os títulos têm tamanhos diferentes. */ height: 100%; background: var(--landing-card-bg); border: 1px solid var(--landing-card-border); border-radius: var(--landing-radius); overflow: hidden; cursor: pointer; box-shadow: var(--landing-shadow-card); transition: transform 0.15s ease, border-color 0.15s ease; } .landing-card:hover { transform: translateY(-2px); border-color: var(--landing-accent); } /* Altura fixa (não aspect-ratio) para que a imagem tenha exatamente o mesmo tamanho em todos os cards, independente das proporções da foto original. */ .landing-card__image-link { position: relative; display: block; flex-shrink: 0; width: 100%; height: 210px; background: var(--landing-bg-alt); } .landing-card__image { display: block; width: 100%; height: 100%; object-fit: cover; } /* Corpo do card em coluna, esticado até a altura da linha da grade (o grid já estica os itens por padrão) — isso é o que permite o preço ficar sempre na mesma altura entre cards, mesmo com títulos de tamanhos diferentes: título/cupom no topo, preço empurrado para o rodapé via margin-top:auto. */ .landing-card__body { display: flex; flex-direction: column; flex: 1; /* Sem isso, o min-height:auto implícito de itens flex pode impedir o body de encolher/crescer corretamente dentro do card esticado pela grade, quebrando o margin-top:auto do rodapé. */ min-height: 0; padding: 1.15rem 1.3rem 1.4rem; } .landing-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .landing-card__store { color: var(--store-color, var(--landing-secondary-accent)); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .landing-card__time { color: var(--landing-text-muted); font-size: 0.78rem; } .landing-card__discount { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--landing-secondary-accent); color: var(--landing-accent-ink); padding: 0.2rem 0.55rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 700; } .landing-card__title { color: var(--landing-heading); font-family: var(--landing-heading-font); font-size: 0.98rem; font-weight: 600; line-height: 1.35; margin: 0 0 0.65rem; } /* Agrupa cupom + preço para que os dois sejam travados juntos no rodapé do card (via margin-top:auto no wrapper) — sem isso, era o preço sozinho que ficava ancorado embaixo e o cupom "flutuava" logo após o título, deixando um vão enorme e inconsistente entre os dois conforme o tamanho do título. */ .landing-card__footer { display: flex; flex-direction: column; margin-top: auto; padding-top: 20px; } .landing-card__coupon { display: inline-flex; align-self: flex-start; align-items: center; flex-wrap: wrap; gap: 0.35rem; background: var(--landing-accent-soft); border: 1px dashed var(--landing-accent-soft-border); color: var(--landing-accent); padding: 0.4rem 0.75rem; border-radius: 0.6rem; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; margin-bottom: 0.5rem; } .landing-card__price { margin: 0; color: var(--landing-heading); font-size: 0.85rem; } .landing-card__price-original { color: var(--landing-heading); font-weight: 500; text-decoration: line-through; } .landing-card__price-current { color: var(--landing-heading); font-family: var(--landing-heading-font); font-size: 1.2rem; font-weight: 700; } .landing-card__coupon code { background: none; color: inherit; font-weight: 700; } /* ===== CTA final ===== */ .landing-cta-final { background: var(--landing-bg-alt); border-top: 1px solid var(--landing-border); padding: 3.5rem 1.25rem; } .landing-cta-final__inner { max-width: var(--landing-narrow-width); margin: 0 auto; text-align: center; } .landing-cta-final__inner h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .landing-cta-final__inner p { color: var(--landing-text); margin-bottom: 1.75rem; } /* ===== Toast de cópia de cupom ===== */ .landing-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: var(--landing-z-toast); max-width: calc(100vw - 2rem); padding: 0.7rem 1.2rem; background: var(--landing-surface); border: 1px solid var(--landing-border); border-radius: var(--landing-radius-pill); color: var(--landing-heading); font-size: 0.9rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } /* ===== Rodapé ===== */ .landing-footer { border-top: 1px solid var(--landing-border); padding: 3.5rem 1.25rem 2rem; } .landing-footer__grid { max-width: var(--landing-container-width); margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; text-align: left; } .landing-footer__brand { font-family: var(--landing-heading-font); font-weight: 700; font-size: 1.15rem; color: var(--landing-heading); margin: 0 0 0.6rem; } .landing-footer__description { color: var(--landing-text-muted); font-size: 0.85rem; line-height: 1.5; margin: 0; max-width: 22rem; } .landing-footer__col-title { color: var(--landing-accent); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.9rem; } .landing-footer__links { display: flex; flex-direction: column; gap: 0.6rem; } .landing-footer__links a { color: var(--landing-text); font-size: 0.88rem; text-decoration: none; } .landing-footer__links a:hover { color: var(--landing-accent); } .landing-footer__bottom { max-width: var(--landing-container-width); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--landing-border); text-align: center; } .landing-footer__disclosure { color: var(--landing-text-muted); font-size: 0.82rem; margin: 0 0 0.5rem; } .landing-footer__disclosure a { color: var(--landing-text-muted); text-decoration: underline; } .landing-footer__disclosure a:hover { color: var(--landing-accent); } .landing-footer__copyright { color: var(--landing-text-muted); font-size: 0.78rem; margin: 0; } @media (max-width: 768px) { .landing-footer__grid { grid-template-columns: repeat(2, 1fr); } .landing-footer__col--brand { grid-column: 1 / -1; } } /* ===== Barra fixa mobile ===== */ .landing-mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--landing-chrome-bg-strong); backdrop-filter: blur(8px); border-top: 1px solid var(--landing-border); z-index: var(--landing-z-sticky); } .landing-mobile-sticky .landing-whatsapp-button { width: 100%; justify-content: center; } @media (max-width: 640px) { .landing-mobile-sticky { display: block; } /* Espaço para a barra fixa não cobrir o fim do rodapé. */ body { padding-bottom: 5.5rem; } .landing-hero { padding: 3rem 1.25rem 2.5rem; } } /* Páginas simples (Privacidade / Termos). */ .landing-legal-page { max-width: var(--landing-narrow-width); margin: 0 auto; padding: 3rem 1.25rem 4rem; } .landing-legal-page p { color: var(--landing-text); }