/* ========================================================= GR7 Festas — protótipo de loja atacadista ========================================================= */ /* Fontes carregadas via no de cada página (mais rápido e confiável que @import — o navegador descobre a fonte antes de baixar este CSS). */ /* ---------- Tokens ---------- */ :root { --color-primary: #27348B; --color-primary-dark: #1A2461; --color-primary-light: #5B6DAD; --color-secondary: #E30613; --color-secondary-dark: #A80410; --color-gold: #F59E0B; --color-whatsapp: #25D366; --color-whatsapp-dark: #075E54; --color-bg: #FCFCFE; --color-bg-soft: #F3F5FA; --color-bg-cream: #FFF8EE; --color-text: #1A1F2E; --color-text-muted: #6B7280; --color-border: #E1E5F0; --color-danger: #DC2626; --color-success: #16A34A; --font-display: 'Fredoka', 'Poppins', sans-serif; --font-body: 'Poppins', system-ui, sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(20, 24, 40, .05), 0 1px 3px rgba(30, 41, 89, .06); --shadow-sm: 0 2px 8px rgba(30, 41, 89, .10); --shadow-md: 0 8px 24px rgba(30, 41, 89, .16); --shadow-lg: 0 16px 40px rgba(30, 41, 89, .20); --shadow-gold: 0 8px 20px rgba(245, 158, 11, .25); --dur-fast: 150ms; --dur-base: 250ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --container-w: 1200px; --header-h: 80px; --header-nav-row-h: 56px; --topbar-h: 46px; --z-header: 100; --z-topbar: 101; --z-overlay: 900; --z-cart: 950; --z-lightbox: 980; --z-toast: 1000; --z-confetti: 1050; --z-popup: 1100; } /* ---------- Reset ---------- */ * , *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; overflow-x: hidden; } body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } svg { width: 1em; height: 1em; flex-shrink: 0; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-top: calc(var(--header-h) + var(--header-nav-row-h) + var(--topbar-h)); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; } /* Alvo de âncora (ex: #como-funciona) não deve ficar escondido atrás do header fixo */ [id] { scroll-margin-top: calc(var(--header-h) + var(--header-nav-row-h) + var(--topbar-h)); } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } button, a, input, textarea, select { touch-action: manipulation; } .skip-link { position: absolute; top: -60px; left: 12px; z-index: 2000; background: var(--color-primary); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: 12px; outline-color: #fff; } .no-scroll { overflow: hidden; } .muted { color: var(--color-text-muted); font-size: .85em; } .container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 20px; } .section { padding: 26px 0; } .section--soft { background: var(--color-bg-soft); } .section--cream { background: var(--color-bg-cream); } .catalog-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #EDF3FD 40%, #F1ECFA 75%, #FCF1F6 100%); } .catalog-hero__decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .catalog-hero > .container { position: relative; z-index: 1; } /* Balões 3D flutuantes - mesma base (.hero__balloon / .hero__balloon-inner) do hero da Home, só com posições próprias pro tamanho menor desta seção. Concentrados na faixa aberta acima da busca/filtros (0-33% da altura) - posicionados mais abaixo (como numa 1ª versão) ficavam atrás dos chips de categoria, quase invisíveis. Animação também mais rápida que a da Home (3.4s em vez de 5.8s) só aqui, via override de animation-duration. */ .catalog-hero__balloon--1 { top: -14px; left: 1%; width: 56px; } .catalog-hero__balloon--2 { top: 13%; left: 11%; width: 40px; } .catalog-hero__balloon--3 { top: 6%; right: 4%; width: 36px; } .catalog-hero__balloon--4 { top: -10px; right: 16%; width: 34px; } .catalog-hero__balloon--5 { top: 16%; left: 23%; width: 30px; } .catalog-hero__balloon--6 { top: 9%; right: 26%; width: 28px; } .catalog-hero__balloon--1 .hero__balloon-inner { animation-duration: 3.4s; animation-delay: .2s; } .catalog-hero__balloon--2 .hero__balloon-inner { animation-duration: 3.4s; animation-delay: .9s; } .catalog-hero__balloon--3 .hero__balloon-inner { animation-duration: 3.4s; animation-delay: 1.5s; } .catalog-hero__balloon--4 .hero__balloon-inner { animation-duration: 3.4s; animation-delay: .6s; } .catalog-hero__balloon--5 .hero__balloon-inner { animation-duration: 3.4s; animation-delay: 2s; } .catalog-hero__balloon--6 .hero__balloon-inner { animation-duration: 3.4s; animation-delay: 2.7s; } .section__head { text-align: center; max-width: 640px; margin: 0 auto 22px; } .section__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; } .section__title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 10px; } .section__subtitle { color: var(--color-text-muted); font-size: 1.05rem; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal--visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Entrada escalonada de cards (grades de categoria/produto) ---------- */ .stagger-item { opacity: 0; animation: staggerIn 420ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes staggerIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .stagger-item { opacity: 1; animation: none; } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: 1rem; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); min-height: 44px; } .btn svg { width: 20px; height: 20px; } .btn:hover { box-shadow: var(--shadow-lg); } .btn:active { filter: brightness(.94); } .btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); } .btn--primary:hover { background: var(--color-primary-dark); } .btn--secondary { background: #fff; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn--secondary:hover { background: var(--color-bg-soft); } .btn--whatsapp { background: var(--color-whatsapp); color: var(--color-text); box-shadow: 0 8px 20px rgba(37, 211, 102, .3); } .btn--whatsapp:hover { background: var(--color-whatsapp-dark); color: #fff; } .btn--block { width: 100%; } .btn:disabled, .btn:disabled:hover { opacity: .6; cursor: not-allowed; box-shadow: none; filter: none; } .cart-checkout-actions { display: flex; gap: 10px; } .cart-checkout-actions__btn { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: .86rem; white-space: normal; text-align: center; line-height: 1.2; } .cart-checkout-actions__btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--sm { padding: 10px 18px; font-size: .9rem; min-height: 38px; } .btn--add { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-width: 0; color: #fff; font-size: .78rem; font-weight: 600; border-radius: 8px; padding: 8px 4px; margin-top: 6px; min-height: 36px; transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); overflow: hidden; } .btn--add svg { width: 14px; height: 14px; flex-shrink: 0; } .btn--add:hover { box-shadow: var(--shadow-sm); } .btn--add:active { filter: brightness(.94); } .btn--add-fechada { background: var(--color-primary); } .btn--add-fechada:hover { background: var(--color-primary-dark); } .btn--add-aberta { background: var(--color-secondary); } .btn--add-aberta:hover { background: var(--color-secondary-dark); } .btn--added { background: var(--color-success) !important; gap: 4px; font-size: .72rem; letter-spacing: -.01em; } .btn--added svg { width: 13px; height: 13px; } .btn--ghost-danger { color: var(--color-danger); background: transparent; padding: 8px 14px; font-size: .85rem; font-weight: 600; } .btn--ghost-danger:hover { text-decoration: underline; } /* ---------- Badges / selos ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600; } .badge svg { width: 13px; height: 13px; } .badge--new { background: #EEF2FF; color: #4F46E5; } .badge--promo { background: #FEF2F2; color: var(--color-danger); } .badge--vendido { background: #ECFDF5; color: var(--color-success); } .badge--infantil { background: #FFF1F2; color: #BE123C; } .badge--adulto { background: #E0F2FE; color: #075985; } .pill-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; max-width: 900px; margin-left: auto; margin-right: auto; } .pill { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: #fff; border: 1px solid var(--color-border); padding: 26px 16px; border-radius: 20px; font-size: .92rem; font-weight: 600; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .pill:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .pill__icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; } .pill__icon svg { width: 26px; height: 26px; } .pill__icon--red { background: var(--color-secondary); } .pill__icon--purple { background: #7C3AED; } .pill__icon--blue { background: var(--color-primary); } .pill__icon--green { background: var(--color-whatsapp); } /* ========================================================= BENEFÍCIOS ========================================================= */ .section.benefits-bar { padding-bottom: 8px; } .facts-card { display: flex; align-items: stretch; border-radius: 28px; margin-bottom: 20px; box-shadow: var(--shadow-md); overflow: hidden; } .facts-card__item { flex: 1; display: flex; align-items: flex-start; gap: 14px; padding: 26px 20px; min-width: 0; } .facts-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; } .facts-card__icon svg { width: 24px; height: 24px; } .facts-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .facts-card__text strong { font-size: 1rem; line-height: 1.3; } .facts-card__text span { font-size: .84rem; line-height: 1.4; } .facts-card__text small { font-size: .74rem; margin-top: 4px; } .facts-card--light { background: #fff; border: 1px solid var(--color-border); } .facts-card--light .facts-card__item { border-right: 1px solid var(--color-border); } .facts-card--light .facts-card__item:last-child { border-right: none; } .facts-card--light .facts-card__text span { color: var(--color-text-muted); } .facts-card--light .facts-card__text small { color: var(--color-text-muted); } .facts-card__icon--red { background: color-mix(in srgb, var(--color-secondary) 14%, white); color: var(--color-secondary); } .facts-card__icon--purple { background: color-mix(in srgb, #7C3AED 14%, white); color: #7C3AED; } .facts-card__icon--orange { background: color-mix(in srgb, var(--color-gold) 20%, white); color: #B45309; } .facts-card__icon--blue { background: color-mix(in srgb, var(--color-primary) 12%, white); color: var(--color-primary); } .facts-card__icon--green { background: color-mix(in srgb, var(--color-success) 15%, white); color: var(--color-success); } .facts-card__title--red { color: var(--color-secondary); } .facts-card__title--purple { color: #7C3AED; } .facts-card__title--orange { color: #B45309; } .facts-card__title--blue { color: var(--color-primary); } .facts-card__title--green { color: var(--color-success); } .varejo-btn-group { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .varejo-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; min-height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .varejo-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .varejo-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .varejo-btn img { display: block; height: 20px; width: auto; } .varejo-btn--tiktok, .varejo-btn--shopee { background: #fff; } .varejo-btn--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0 5%, #FDF497 6% 12%, #FD5949 38%, #D6249F 62%, #285AEB 100%); color: #fff; border-color: transparent; font-weight: 700; } @media (max-width: 900px) { .facts-card { flex-direction: column; border-radius: 20px; } .facts-card--light .facts-card__item { border-right: none; border-bottom: 1px solid var(--color-border); } .facts-card__item:last-child { border-bottom: none; } } /* ========================================================= SEJA NOSSO REPRESENTANTE ========================================================= */ .rep-section { position: relative; overflow: hidden; padding-bottom: 56px; background: linear-gradient(180deg, #fff 0%, #EDF3FD 45%, #F1ECFA 100%); } .rep-section__decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .rep-section > .container { position: relative; z-index: 1; } .rep-intro { text-align: center; max-width: 640px; margin: 0 auto 28px; } .rep-intro .section__eyebrow { margin-bottom: 6px; } .rep-title { font-size: clamp(1.8rem, 4.2vw, 2.5rem); margin-bottom: 8px; letter-spacing: -.01em; } .rep-subtitle { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.6; } .rep-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; } @media (max-width: 860px) { .rep-layout { grid-template-columns: 1fr; } } .rep-advantages { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-xs); } .rep-advantages__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; } .rep-advantages__list { display: flex; flex-direction: column; gap: 16px; } .rep-advantages__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; } .rep-advantages__icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-primary) 12%, white); color: var(--color-primary); } .rep-advantages__icon svg { width: 19px; height: 19px; } .rep-advantages__list li:nth-child(2n) .rep-advantages__icon { background: color-mix(in srgb, var(--color-secondary) 12%, white); color: var(--color-secondary); } .rep-form-card { background: linear-gradient(180deg, #fff 0%, #FAFBFF 100%); border: 1.5px solid color-mix(in srgb, var(--color-primary) 18%, white); border-radius: var(--radius-lg); padding: 36px 34px; box-shadow: 0 24px 60px rgba(39, 52, 139, .16), 0 8px 20px rgba(227, 6, 19, .08); } .rep-form-card__title { font-size: 1.4rem; margin-bottom: 6px; } .rep-form-card__subtitle { color: var(--color-text-muted); font-size: .92rem; margin-bottom: 22px; } .rep-form { margin-top: 0; } .rep-form .field input, .rep-form .field textarea, .rep-form .field select { background: var(--color-bg-soft); border: 1.5px solid var(--color-border); padding: 12px 14px; font-size: .95rem; border-radius: var(--radius-md); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .rep-form .field input:focus, .rep-form .field textarea:focus, .rep-form .field select:focus { background: #fff; border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent); } .rep-form .btn { margin-top: 16px; padding: 19px 30px; font-size: 1.1rem; box-shadow: 0 14px 32px rgba(37, 211, 102, .38); } .rep-form .btn:hover { transform: translateY(-2px); } @media (max-width: 480px) { .rep-form-card { padding: 24px 20px; } .rep-advantages { padding: 22px 20px; } } /* ========================================================= HEADER ========================================================= */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); height: var(--topbar-h); background: linear-gradient(90deg, #27348B 0%, #7C3AED 55%, #EC4899 100%); color: #fff; font-size: .92rem; font-weight: 600; overflow: hidden; } /* Ticker: duas cópias idênticas ("seq") lado a lado; anima -50% do trilho inteiro, ou seja, exatamente a largura de UMA cópia (conteúdo + padding-right) — por isso o loop não dá salto nem deixa buraco, seja qual for o tamanho do conteúdo. */ .topbar__track { display: flex; align-items: center; height: 100%; width: max-content; animation: topbar-scroll 28s linear infinite; } .topbar:hover .topbar__track, .topbar:focus-within .topbar__track { animation-play-state: paused; } .topbar__seq { display: flex; align-items: center; flex-shrink: 0; gap: 22px; padding-right: 22px; } .topbar__item { display: inline-flex; align-items: center; gap: 7px; color: #fff; white-space: nowrap; } .topbar__item svg { width: 19px; height: 19px; flex-shrink: 0; } .topbar__item--link:hover { text-decoration: underline; } .topbar__sep { opacity: .5; } @keyframes topbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .site-header { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: box-shadow var(--dur-base), border-color var(--dur-base); } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, #27348B, #7C3AED, #EC4899); } .site-header--scrolled { box-shadow: 0 4px 20px rgba(33, 26, 51, .08); border-color: var(--color-border); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; max-width: 1320px; } .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-mark { height: 72px; width: auto; flex-shrink: 0; line-height: 0; } .logo-mark svg, .logo-mark img { height: 100%; width: auto; display: block; } .logo__sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; color: var(--color-text-muted); letter-spacing: .04em; text-transform: uppercase; } @media (max-width: 480px) { .logo-mark { height: 46px; } } .site-header__nav-row { height: var(--header-nav-row-h); border-top: 1px solid var(--color-border); background: rgba(255, 255, 255, .6); } .site-header__nav-row .container { height: 100%; } .site-nav { display: flex; align-items: center; justify-content: center; gap: 18px; height: 100%; } .site-nav a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; position: relative; padding: 8px 1px; white-space: nowrap; transition: color var(--dur-fast); } .site-nav a svg { width: 18px; height: 18px; flex-shrink: 0; } .site-nav a::after { content: ""; position: absolute; left: 1px; right: 100%; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #27348B, #7C3AED, #EC4899); transition: right var(--dur-base) var(--ease-out); } .site-nav a:hover { color: var(--color-primary); } .site-nav a:hover::after { right: 1px; } .site-nav a.site-nav__link--highlight { background: var(--color-secondary); color: #fff; padding: 9px 18px; border-radius: var(--radius-pill); transition: background var(--dur-fast), transform var(--dur-fast); } .site-nav a.site-nav__link--highlight::after { display: none; } .site-nav a.site-nav__link--highlight:hover { background: var(--color-secondary-dark); color: #fff; transform: translateY(-1px); } /* Indicador discreto de página atual - nunca no Catálogo (site-nav__link--highlight já tem destaque vermelho fixo). Reaproveita o mesmo ::after da barrinha de hover (só "revela" ela sempre, em vermelho sólido, em vez de só ao passar o mouse) pra não competir com outro botão vermelho no menu - texto fica azul, a linha fica vermelha. js/main.js's marcarLinkAtual() controla a classe. */ .site-nav a:not(.site-nav__link--highlight):hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-radius: var(--radius-sm); } .site-nav a.nav-link--current { color: var(--color-primary); font-weight: 700; } .site-nav a.nav-link--current::after { right: 1px; background: var(--color-secondary); } .header-search { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; max-width: 480px; background: linear-gradient(90deg, color-mix(in srgb, #27348B 7%, white), color-mix(in srgb, #7C3AED 7%, white)); border: 1.5px solid color-mix(in srgb, var(--color-primary) 30%, white); border-radius: var(--radius-pill); padding: 6px 20px 6px 6px; box-shadow: 0 6px 18px rgba(39,52,139,.14); transition: box-shadow var(--dur-fast), border-color var(--dur-fast); } .header-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent), 0 6px 18px rgba(39,52,139,.14); } .header-search__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), #7C3AED); color: #fff; } .header-search__icon svg { width: 16px; height: 16px; } .header-search input { border: none; background: none; outline: none; font-size: 1rem; width: 100%; min-width: 0; color: var(--color-text); font-weight: 500; } .header-search input::placeholder { color: var(--color-text-muted); } .header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-social { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; font-size: .72rem; font-weight: 600; color: var(--color-text); text-align: center; } .header-social__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-soft); color: var(--color-primary); transition: background var(--dur-fast), filter var(--dur-fast); } .header-social__icon svg { width: 20px; height: 20px; } .header-social:hover .header-social__icon { background: #E3E7F5; } .header-social[data-social="instagram"] .header-social__icon { background: radial-gradient(circle at 30% 107%, #FDF497 0 5%, #FDF497 6% 12%, #FD5949 38%, #D6249F 62%, #285AEB 100%); color: #fff; } .header-social[data-social="instagram"]:hover .header-social__icon { filter: brightness(1.06); } .header-social--wa .header-social__icon { background: color-mix(in srgb, var(--color-whatsapp) 14%, white); color: var(--color-whatsapp-dark); } .header-social--wa:hover .header-social__icon { background: color-mix(in srgb, var(--color-whatsapp) 26%, white); } .header-social--wa .header-social__label { color: var(--color-whatsapp-dark); } .header-social__label small { display: block; font-size: .9em; font-weight: 600; } .cart-btn-header { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--color-border); padding: 8px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); color: var(--color-text); transition: box-shadow var(--dur-fast), border-color var(--dur-fast); } .cart-btn-header:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary-light); } .cart-btn-header svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; } .cart-btn-header__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; font-size: .8rem; font-weight: 700; white-space: nowrap; } .cart-btn-header__meta { font-weight: 600; color: var(--color-text-muted); font-size: .72rem; } .cart-btn-header__total { color: var(--color-secondary); font-size: .8rem; font-weight: 700; } .cart-btn-header .cart-count--empty { opacity: 1; transform: none; } @media (max-width: 1180px) { .cart-btn-header__text { display: none; } .cart-btn-header { padding: 11px; border-radius: 50%; } } .icon-btn-round { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-bg-soft); color: var(--color-primary); transition: background var(--dur-fast), filter var(--dur-fast); } .icon-btn-round:hover { background: #E3E7F5; } .icon-btn-round:active { filter: brightness(.95); } .icon-btn-round svg { width: 22px; height: 22px; } .icon-btn-round--bump svg { animation: bump .35s ease-out; } .icon-btn-round[data-social="instagram"] { background: radial-gradient(circle at 30% 107%, #FDF497 0 5%, #FDF497 6% 12%, #FD5949 38%, #D6249F 62%, #285AEB 100%); color: #fff; } .icon-btn-round[data-social="instagram"]:hover { filter: brightness(1.06); } .icon-btn-round--wa { background: color-mix(in srgb, var(--color-whatsapp) 14%, white); color: var(--color-whatsapp-dark); } .icon-btn-round--wa:hover { background: color-mix(in srgb, var(--color-whatsapp) 26%, white); } @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } } .cart-count { position: absolute; top: -4px; right: -4px; background: var(--color-secondary); color: #fff; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; } .cart-count--empty { opacity: .0; transform: scale(.6); } .cart-count--inline { position: static; display: inline; background: none; color: var(--color-primary); font-size: inherit; font-weight: 700; min-width: 0; height: auto; padding: 0; border: none; } .js-menu-toggle { display: none; } @media (max-width: 1180px) { .topbar { display: none; } .site-header { top: 0; } body { padding-top: var(--header-h); } [id] { scroll-margin-top: var(--header-h); } /* Não usar display:none aqui: .site-nav mora dentro dessa linha e precisa "escapar" via position:fixed pra virar a gaveta lateral no mobile — um ancestral com display:none esconderia a gaveta inteira junto. */ .site-header__nav-row { height: 0; border: none; } .header-search { display: none; } .header-social__label { display: none; } .header-social__icon { width: 44px; height: 44px; } .header-social__icon svg { width: 22px; height: 22px; } .header__actions { gap: 8px; } .site-nav { position: fixed; inset: var(--header-h) 0 0 auto; width: min(78vw, 320px); background: #fff; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); box-shadow: -12px 0 30px rgba(33,26,51,.12); height: calc(100vh - var(--header-h)); overflow-y: auto; justify-content: flex-start; } .site-nav--open { transform: translateX(0); } .site-nav a { width: 100%; padding: 12px 8px; border-bottom: 1px solid var(--color-border); } .site-nav a::after { display: none; } .site-nav a.site-nav__link--highlight { border-radius: var(--radius-md); } .js-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-bg-soft); color: var(--color-primary); } .js-menu-toggle svg { width: 22px; height: 22px; } } /* ========================================================= HERO ========================================================= */ .hero { position: relative; overflow: hidden; background-color: #F6F2FC; background-image: url('../img/hero-bg.webp'); background-size: cover; background-position: right center; background-repeat: no-repeat; padding: 26px 0 20px; } .hero__decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } /* Camada decorativa "de marca": bem discreta, só pra dar clima de festa no fundo */ .brand-decor__balloon { position: absolute; opacity: .12; filter: blur(1px); color: var(--color-primary); } .brand-decor__balloon svg { width: 100%; height: 100%; display: block; } .brand-decor__confetti { position: absolute; width: 9px; height: 9px; border-radius: 3px; opacity: .28; } .brand-decor__star { position: absolute; opacity: .2; color: var(--color-gold); } .brand-decor__star svg { width: 100%; height: 100%; } /* Wrapper externo: só cuida de posição/tamanho e do deslocamento por JS (parallax de rolagem + fuga do mouse), sem conflitar com a animação de flutuar. */ .hero__balloon { position: absolute; will-change: transform; } .hero__balloon--1 { top: 0%; left: 36%; width: 46px; } .hero__balloon--3 { top: 39%; left: 49%; width: 44px; } .hero__balloon--4 { top: 50%; left: 1%; width: 50px; } .hero__balloon--5 { top: 5%; left: 65%; width: 52px; } .hero__balloon--6 { top: 44%; left: 79%; width: 48px; } /* Elemento interno: balanço contínuo, hover e clique-para-estourar */ .hero__balloon-inner { display: block; width: 100%; opacity: .95; animation: float 5.8s cubic-bezier(.45,.05,.55,.95) infinite; pointer-events: auto; cursor: pointer; transition: opacity .25s ease, filter .3s ease; filter: drop-shadow(0 14px 18px rgba(26,31,46,.16)); } .hero__balloon--1 .hero__balloon-inner { animation-delay: 0s; } .hero__balloon--3 .hero__balloon-inner { animation-delay: .6s; } .hero__balloon--4 .hero__balloon-inner { animation-delay: 1.8s; } .hero__balloon--5 .hero__balloon-inner { animation-delay: 2.4s; } .hero__balloon--6 .hero__balloon-inner { animation-delay: .9s; } .hero__balloon-inner:hover { filter: brightness(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.24)); } .hero__balloon-inner--popped { animation: balloonPop .32s ease-out forwards; } .hero__balloon-inner svg { width: 100%; height: 100%; display: block; } .hero__balloon-inner img { width: 100%; height: auto; display: block; } .hero__confetti { position: absolute; width: 10px; height: 10px; border-radius: 3px; opacity: .8; animation: drift 8s linear infinite; } .hero__content { position: relative; z-index: 1; max-width: 540px; text-align: left; } .hero__badge-row { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 16px; } .hero__badge-line { flex: 1; max-width: 110px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border)); } .hero__badge-row .hero__badge-line:last-child { background: linear-gradient(90deg, var(--color-border), transparent); } .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-border); padding: 7px 16px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600; color: var(--color-primary); box-shadow: var(--shadow-md); } .hero__badge svg { width: 16px; height: 16px; flex-shrink: 0; } .hero__title { font-size: clamp(1.8rem, 4.6vw, 2.8rem); margin-bottom: 12px; letter-spacing: -.015em; font-weight: 700; } .hero__title span { position: relative; white-space: nowrap; background: linear-gradient(90deg, var(--color-secondary), #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__subtitle { font-size: clamp(.98rem, 1.8vw, 1.12rem); color: var(--color-primary); font-weight: 500; margin-bottom: 22px; line-height: 1.5; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-bottom: 24px; } .hero__actions .btn { padding: 13px 26px; font-size: .96rem; box-shadow: 0 12px 28px rgba(30,41,89,.22); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast); } .hero__actions .btn:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(30,41,89,.3); } .hero__actions .btn:active { transform: translateY(-1px); } .hero__actions .btn--secondary:hover { box-shadow: 0 18px 38px rgba(30,41,89,.16); } /* Faixa de público-alvo */ .audience-banner { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 65%, #0E1240 100%); color: #fff; border-radius: 22px; padding: 18px 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 16px 36px rgba(20,26,66,.28); max-width: 540px; margin: 0 0 8px; } .audience-banner::before { content: ""; position: absolute; top: -60%; right: -8%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 72%); pointer-events: none; } .audience-banner svg { width: 26px; height: 26px; flex-shrink: 0; } .audience-banner p { font-weight: 600; font-size: .92rem; flex: 1; min-width: 240px; position: relative; z-index: 1; } .audience-banner strong { font-family: var(--font-display); display: block; font-size: 1rem; margin-bottom: 2px; } .audience-banner .btn { position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .audience-banner .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(-7deg); } 25% { transform: translate(4px, -8px) rotate(-2deg); } 50% { transform: translate(-3px, -15px) rotate(5deg); } 75% { transform: translate(-6px, -7px) rotate(0deg); } } @keyframes drift { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: .8; } 100% { transform: translateY(420px) rotate(220deg); opacity: 0; } } @keyframes balloonPop { 0% { transform: scale(1) rotate(0deg); opacity: .9; } 35% { transform: scale(.86) rotate(-4deg); opacity: 1; } 70% { transform: scale(1.35) rotate(8deg); opacity: .9; } 100% { transform: scale(0) rotate(25deg); opacity: 0; } } /* ========================================================= CARROSSEL DE FOTOS (Home) ========================================================= */ .carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-bg-soft); } .carousel__track { display: flex; transition: transform 850ms cubic-bezier(.22, .72, .2, 1); will-change: transform; } .carousel__slide { position: relative; flex: 0 0 100%; height: 220px; overflow: hidden; } .carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .carousel__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 16px; z-index: 3; background: linear-gradient(0deg, rgba(20,15,33,.82), rgba(20,15,33,.15) 70%, transparent); color: #fff; } .carousel__caption h2 { font-size: 1.05rem; margin-bottom: 2px; color: inherit; } .carousel__caption p { font-size: .82rem; opacity: .92; max-width: 420px; } .carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--color-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .carousel__arrow svg { width: 20px; height: 20px; } .carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .carousel__arrow--prev { left: 12px; } .carousel__arrow--next { right: 12px; } .carousel__arrow--prev svg { transform: rotate(180deg); } .carousel__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; } .carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background var(--dur-fast), width var(--dur-fast); } .carousel__dot--active { background: #fff; width: 22px; border-radius: 4px; } @media (min-width: 640px) { .carousel__slide { height: 300px; } .carousel__caption { padding: 26px 32px 22px; } .carousel__caption h2 { font-size: 1.4rem; } .carousel__caption p { font-size: .95rem; } } @media (min-width: 1024px) { .carousel__slide { height: 400px; } } /* Transição do carrossel roda sempre, mesmo com "reduzir movimento" ligado no sistema - mesma decisão já tomada pro autoplay (js/carousel.js) e pra faixa do topo, pra não desligar sozinho um recurso comercial sem o cliente notar. */ /* ---------- Banners do carrossel (conteúdo editável pelo admin) ---------- */ .banner-slide__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .banner-slide__confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; } .banner-slide__confete-piece { position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: .85; } .banner-slide__logo { position: absolute; top: 16px; left: 16px; z-index: 5; background: rgba(20,15,33,.55); padding: 6px 10px; border-radius: var(--radius-sm); } .banner-slide__logo img { height: 22px; width: auto; display: block; } .banner-slide__selos { position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .badge--overlay { background: rgba(255,255,255,.92); color: var(--color-text); box-shadow: var(--shadow-sm); } .banner-slide__texto-wrap { color: var(--banner-cor-texto, #fff); } .banner-slide__texto-wrap h2, .banner-slide__texto-wrap p { color: inherit; } .banner-slide__texto-wrap p { max-width: none; } .banner-slide__texto-wrap--esquerda { margin-right: auto; } .banner-slide__texto-wrap--centro { margin-left: auto; margin-right: auto; } .banner-slide__texto-wrap--direita { margin-left: auto; } .banner-slide__eyebrow { display: block; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-gold); margin-bottom: 4px; } .banner-slide__pequeno { font-size: .72rem; opacity: .8; margin-top: 4px; max-width: none; } .banner-slide__ribbon { background: var(--color-secondary); color: #fff; font-weight: 700; text-align: center; padding: 8px 20px; margin: 10px -20px -16px; } .banner-slide__botoes { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .banner-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; text-decoration: none; border-style: solid; border-width: 2px; pointer-events: auto; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast), box-shadow var(--dur-fast); } .banner-btn:hover { box-shadow: var(--shadow-md); } .banner-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .banner-btn--p { padding: 8px 16px; font-size: .82rem; } .banner-btn--m { padding: 12px 22px; font-size: .92rem; } .banner-btn--g { padding: 16px 30px; font-size: 1.02rem; } .banner-btn--radius-sm { border-radius: var(--radius-sm); } .banner-btn--radius-md { border-radius: var(--radius-md); } .banner-btn--radius-lg { border-radius: var(--radius-lg); } .banner-btn--radius-pill { border-radius: var(--radius-pill); } .banner-btn[data-anchor="superior-esquerdo"] { top: 20px; left: 20px; } .banner-btn[data-anchor="superior-centro"] { top: 20px; left: 50%; transform: translateX(-50%); } .banner-btn[data-anchor="superior-direito"] { top: 20px; right: 20px; } .banner-btn[data-anchor="centro-esquerdo"] { top: 50%; left: 20px; transform: translateY(-50%); } .banner-btn[data-anchor="centro"] { top: 50%; left: 50%; transform: translate(-50%, -50%); } .banner-btn[data-anchor="centro-direito"] { top: 50%; right: 20px; transform: translateY(-50%); } .banner-btn[data-anchor="inferior-esquerdo"] { bottom: 46px; left: 20px; } .banner-btn[data-anchor="inferior-centro"] { bottom: 46px; left: 50%; transform: translateX(-50%); } .banner-btn[data-anchor="inferior-direito"] { bottom: 46px; right: 20px; } .banner-btn[data-anchor="superior-esquerdo"]:hover, .banner-btn[data-anchor="superior-direito"]:hover, .banner-btn[data-anchor="inferior-esquerdo"]:hover, .banner-btn[data-anchor="inferior-direito"]:hover { transform: translateY(-2px); } .banner-btn[data-anchor="superior-centro"]:hover, .banner-btn[data-anchor="inferior-centro"]:hover { transform: translateX(-50%) translateY(-2px); } .banner-btn[data-anchor="centro-esquerdo"]:hover, .banner-btn[data-anchor="centro-direito"]:hover { transform: translateY(-50%) translateY(-2px); } .banner-btn[data-anchor="centro"]:hover { transform: translate(-50%, -50%) translateY(-2px); } /* ========================================================= CATEGORIAS ========================================================= */ .category-carousel { display: flex; align-items: center; gap: 10px; } .category-carousel__track { flex: 1; min-width: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px 10px; } .category-carousel__track::-webkit-scrollbar { display: none; } .category-carousel__arrow { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); } .category-carousel__arrow svg { width: 18px; height: 18px; } .category-carousel__arrow--prev svg { transform: rotate(180deg); } .category-carousel__arrow:hover { box-shadow: var(--shadow-md); transform: scale(1.06); } .category-carousel__arrow:disabled { opacity: .35; box-shadow: none; transform: none; cursor: default; } .category-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; } .category-carousel__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); transition: background var(--dur-fast), width var(--dur-fast); } .category-carousel__dot--active { background: var(--color-primary); width: 20px; border-radius: 4px; } .category-card { scroll-snap-align: start; flex: 0 0 auto; width: 138px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 2px 14px rgba(33, 26, 51, .05); transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-out); } .category-card:hover { box-shadow: 0 14px 30px rgba(33, 26, 51, .14); border-color: color-mix(in srgb, var(--cat-color) 35%, white); transform: translateY(-3px); } .category-card:active { filter: brightness(.97); transition-duration: var(--dur-fast); } .category-card__icon { width: 58px; height: 58px; border-radius: 50%; color: var(--cat-text, var(--cat-color)); background: color-mix(in srgb, var(--cat-color) 16%, white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); } .category-card:hover .category-card__icon { transform: scale(1.1) rotate(-4deg); } .category-card__icon svg { width: 30px; height: 30px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.18)); } .category-card__icon--art { background: none; box-shadow: 0 6px 16px rgba(33,26,51,.14); overflow: hidden; } .category-card:hover .category-card__icon--art { transform: scale(1.08) rotate(0deg); } .category-card__icon--art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .category-card__name { font-size: .86rem; font-weight: 700; line-height: 1.25; } .category-card__count { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cat-color) 14%, white); color: var(--cat-text, var(--cat-color)); } .category-card--all { background: var(--color-bg-soft); border-style: dashed; justify-content: center; } .category-card--all .category-card__icon--all { background: #fff; box-shadow: var(--shadow-xs); color: var(--color-primary); } .category-card--all .category-card__icon--all svg { width: 26px; height: 26px; filter: none; } .category-card--all .category-card__count { background: none; padding: 0; } .category-card--all .category-card__count svg { width: 14px; height: 14px; } /* ========================================================= IMPORTADORAS REPRESENTADAS ========================================================= */ .importadoras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } .importadora-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .importadora-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--color-primary) 30%, white); } .importadora-card__logo { width: 120px; height: 120px; border-radius: var(--radius-sm); margin-bottom: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; } .importadora-card:nth-child(4n+1) .importadora-card__logo { background: color-mix(in srgb, var(--color-primary) 14%, white); color: var(--color-primary); } .importadora-card:nth-child(4n+2) .importadora-card__logo { background: color-mix(in srgb, var(--color-secondary) 14%, white); color: var(--color-secondary); } .importadora-card:nth-child(4n+3) .importadora-card__logo { background: color-mix(in srgb, var(--color-gold) 20%, white); color: #B45309; } .importadora-card:nth-child(4n+4) .importadora-card__logo { background: color-mix(in srgb, var(--color-primary-light) 22%, white); color: var(--color-primary-dark); } .importadora-card__logo--img, .importadora-card:nth-child(4n+1) .importadora-card__logo--img, .importadora-card:nth-child(4n+2) .importadora-card__logo--img, .importadora-card:nth-child(4n+3) .importadora-card__logo--img, .importadora-card:nth-child(4n+4) .importadora-card__logo--img { background: #fff; border: 1px solid var(--color-border); padding: 14px; } .importadora-card__logo--img img { width: 100%; height: 100%; object-fit: contain; } .importadora-card__nome { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; } .importadora-card__categorias { font-size: .76rem; font-weight: 600; color: var(--color-primary); margin-bottom: 4px; } .importadora-card__qtd { font-size: .76rem; color: var(--color-text-muted); margin-bottom: 10px; } .importadora-card__desc { font-size: .85rem; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 20px; flex-grow: 1; } .importadora-card__btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast); } .importadora-card:hover .importadora-card__btn { background: var(--color-primary-dark); box-shadow: var(--shadow-md); transform: scale(1.05); } /* ========================================================= PRODUTOS ========================================================= */ .product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } .product-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .product-card:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--cat-color) 35%, white); } .product-card__icon { transition: transform var(--dur-base) var(--ease-out); } .product-card:hover .product-card__icon { transform: scale(1.06); } .product-card__media { position: relative; text-align: center; overflow: hidden; border-top: 5px solid var(--cat-text, var(--cat-color)); } .product-card__media--icon { padding: 30px 20px; background: linear-gradient(160deg, var(--cat-text, var(--cat-color)), color-mix(in srgb, var(--cat-text, var(--cat-color)) 82%, black)); } .product-card__media--photo { aspect-ratio: 1 / 1; } .product-card__icon { width: 84px; height: 84px; margin: 0 auto; color: var(--cat-text, var(--cat-color)); } .product-card__media--icon .product-card__icon { color: #fff; } .product-card__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .product-card__media--photo .product-card__icon { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; } .product-card__media--photo .product-card__icon img { border-radius: 0; object-fit: cover; } .product-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .product-card__age-marker { position: absolute; z-index: 3; top: 18px; left: 0; min-width: 92px; padding: 8px 12px 8px 10px; border-radius: 0 6px 6px 0; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; letter-spacing: 0; text-align: center; box-shadow: 0 5px 14px rgba(15, 23, 42, .2); } .product-card__age-marker--infantil { background: #E30613; } .product-card__age-marker--adulto { background: #27348B; } .product-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .product-card__media, .product-card__cat, .product-card__name, .product-card__reference, .product-card__hint { cursor: pointer; } .product-card__cat { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 600; } .product-card__name { font-size: 1.05rem; font-weight: 600; font-family: var(--font-body); margin-bottom: 2px; } .product-card__reference { display: inline-flex; align-items: flex-start; gap: 5px; align-self: flex-start; width: fit-content; max-width: 100%; margin: 6px 0 8px; padding: 5px 9px; background: #27348b; color: #fff; border-radius: 6px; font-size: .72rem; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; } .product-card__reference span { flex-shrink: 0; } .product-card__reference strong { color: #fff; font-weight: 700; min-width: 0; } .product-card__note { font-size: .76rem; color: #4B5563; font-style: normal; margin: 4px 0 6px; line-height: 1.45; } .product-card__note p { margin: 0 0 4px; } .product-card__note strong { color: #1F2937; font-weight: 700; } .product-card__note--clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .product-card__note--expanded { display: block; overflow: visible; } .product-card__more { align-self: flex-start; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: .74rem; font-weight: 700; padding: 0 0 7px; cursor: pointer; } .description-review__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; } .description-review__toolbar > div { display: flex; gap: 8px; flex-wrap: wrap; } .description-review__list { display: grid; gap: 8px; max-height: 680px; overflow: auto; } .description-review__item { border: 1px solid #D8DEEA; border-radius: 6px; background: #fff; } .description-review__item summary { padding: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .description-review__item summary span { margin-left: auto; color: var(--color-text-muted); font-size: .78rem; } .description-review__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 12px; } .description-review__compare > div { padding: 12px; background: #F7F8FC; border-radius: 6px; } .description-review__compare h4, .description-review__removed h4 { margin: 0 0 8px; } .description-review__compare p { margin: 0 0 5px; font-size: .82rem; line-height: 1.5; } .description-review__removed { margin: 0 12px 12px; padding: 12px; background: #FFF7ED; border-radius: 6px; } .description-review__removed p { display: grid; gap: 3px; margin: 0 0 8px; font-size: .8rem; } .description-review__removed span { color: #9A3412; } .description-review__item-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; } @media (max-width: 760px) { .description-review__compare { grid-template-columns: 1fr; } .description-review__toolbar { align-items: flex-start; flex-direction: column; } } .product-card__hint { display: flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--color-primary); margin-bottom: 12px; } .product-card__hint svg { width: 13px; height: 13px; flex-shrink: 0; } .product-card__options { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: auto; } .product-card__options--single { grid-template-columns: minmax(0,1fr); } .variacoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .variacao-field { display: flex; flex-direction: column; gap: 4px; } .variacao-field__label { font-size: .74rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; } .variacao-select { width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: .88rem; font-family: inherit; background: #fff; color: var(--color-text); transition: border-color var(--dur-fast); } .variacao-select:focus { border-color: var(--color-primary); outline: none; } .variacao-select:invalid { color: var(--color-text-muted); } .variacao-field--erro .variacao-select { border-color: var(--color-danger); background: #FEF2F2; } .variacao-field__erro { color: var(--color-danger); font-size: .76rem; font-weight: 600; } .variacao-field__erro:not([hidden]) { display: block; margin-top: 2px; } .variacao-field--shake { animation: variacao-shake .4s ease-in-out; } @keyframes variacao-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .variacao-field--shake { animation: none; } } .buy-option { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 8px; display: flex; flex-direction: column; background: var(--color-bg-soft); } .buy-option__head { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--color-primary); line-height: 1.2; } .buy-option__head svg { width: 14px; height: 14px; flex-shrink: 0; } .buy-option__meta { font-size: .68rem; color: var(--color-text-muted); margin: 3px 0 6px; line-height: 1.25; min-height: 2.5em; } .buy-option__price { font-weight: 700; font-size: .96rem; margin-bottom: 8px; line-height: 1.2; min-height: 2.4em; display: flex; flex-direction: column; justify-content: flex-end; } .price-old { text-decoration: line-through; color: var(--color-text-muted); font-size: .78em; font-weight: 500; margin-right: 4px; display: block; } .price-now--promo { color: var(--color-danger); } .price-per-unit { display: block; font-size: .7em; font-weight: 500; color: var(--color-text-muted); margin-top: 2px; } .buy-option__unavailable { font-size: .82rem; color: var(--color-text-muted); font-style: italic; padding: 6px 0; } .product-item-note { margin: 3px 0 7px; } .product-item-note__toggle { padding: 3px 0; color: var(--color-primary); font-size: .7rem; font-weight: 700; text-align: left; line-height: 1.35; } .product-item-note__toggle:hover { text-decoration: underline; } .product-item-note__editor { margin-top: 5px; padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; } .product-item-note__editor label { display: block; margin-bottom: 4px; font-size: .68rem; font-weight: 700; } .product-item-note__editor textarea { width: 100%; min-height: 48px; resize: vertical; padding: 7px 8px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: .75rem; line-height: 1.35; } .product-item-note__editor textarea:focus { border-color: var(--color-primary); outline: none; } .product-item-note__counter { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .64rem; text-align: right; } .qty-stepper { display: flex; align-items: center; justify-content: space-between; min-width: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px; margin-bottom: 4px; } .qty-btn { width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background var(--dur-fast); flex-shrink: 0; } .qty-btn:hover { background: var(--color-bg-soft); } .qty-btn svg { width: 14px; height: 14px; } .qty-input { flex: 1; width: 32px; min-width: 0; text-align: center; border: none; background: transparent; font-weight: 600; font-size: .85rem; -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-stepper--sm .qty-btn { width: 26px; height: 26px; } .qty-stepper--sm { padding: 3px; } .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--color-text-muted); } .empty-state__icon { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--color-primary-light); } .empty-state h3 { color: var(--color-text); margin-bottom: 6px; } /* Filtros / busca da página de produtos */ .catalog-toolbar { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 18px; min-width: 0; } .search-box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); padding: 16px 24px; box-shadow: var(--shadow-md); min-height: 56px; width: 100%; max-width: 520px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .search-box:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-lg); } .search-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent), var(--shadow-lg); } .search-box__icon { display: flex; flex-shrink: 0; } .search-box svg { width: 22px; height: 22px; color: var(--color-primary); flex-shrink: 0; } .search-box input { border: none; outline: none; width: 100%; background: transparent; font-size: 1rem; font-family: inherit; color: var(--color-text); font-weight: 500; } .search-box input::placeholder { color: var(--color-text-muted); } .filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-width: 0; width: 100%; } .filter-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--chip-color, var(--color-border)); background: #fff; color: var(--chip-text, var(--color-primary)); font-size: .88rem; font-weight: 700; transition: background var(--dur-fast), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast); } .filter-chip__icon { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .filter-chip svg { width: 18px; height: 18px; flex-shrink: 0; } .filter-chip:hover { background: color-mix(in srgb, var(--chip-color, var(--color-primary)) 10%, white); box-shadow: var(--shadow-xs); } .filter-chip--active { background: var(--chip-text, var(--color-primary)); color: #fff; border-color: var(--chip-text, var(--color-primary)); box-shadow: var(--shadow-sm); } .results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .result-count { color: var(--color-text-muted); font-size: .88rem; margin-bottom: 0; } .sort-control { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--color-text-muted); } .sort-control__label { white-space: nowrap; } .sort-control select { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 30px 7px 12px; font-size: .85rem; font-family: inherit; font-weight: 600; background: #fff; color: var(--color-text); transition: border-color var(--dur-fast); } .sort-control select:focus { border-color: var(--color-primary); outline: none; } /* ========================================================= COMO FUNCIONA ========================================================= */ .steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } .step { text-align: center; padding: 32px 22px 26px; position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .step:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--step-color) 35%, white); } .step__icon-wrap { position: relative; width: 74px; height: 74px; margin: 0 auto 18px; } .step__icon { width: 74px; height: 74px; border-radius: 50%; background: color-mix(in srgb, var(--step-color) 15%, white); color: var(--step-color); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-out); } .step:hover .step__icon { transform: scale(1.08) rotate(-4deg); } .step__icon svg { width: 36px; height: 36px; } .step--whatsapp .step__icon { background: none; } .step--whatsapp .step__icon svg { width: 74px; height: 74px; } .step__number { position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--step-color); color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: .85rem; box-shadow: var(--shadow-sm); } .step__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 7px; } .step__text { color: var(--color-text-muted); font-size: .88rem; line-height: 1.5; } /* ========================================================= SOBRE ========================================================= */ .about-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } .about-text p { color: var(--color-text-muted); margin-bottom: 16px; font-size: 1.02rem; } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; } .stat { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 10px; text-align: center; box-shadow: var(--shadow-sm); } .stat__num { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-primary); display: block; } .stat__label { font-size: .78rem; color: var(--color-text-muted); } .about-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .about-media img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; } .location-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; } .location-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; justify-content: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); } .location-address { display: flex; align-items: flex-start; gap: 10px; font-size: 1.02rem; line-height: 1.5; } .location-address svg { width: 22px; height: 22px; color: var(--color-secondary); flex-shrink: 0; margin-top: 2px; } .location-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 280px; } .location-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; } @media (min-width: 768px) { .location-grid { grid-template-columns: .8fr 1.2fr; } } /* Widget do Google Reviews (Elfsight) - só compacta o espaço ao redor (o widget em si já é um carrossel horizontal de uma linha só, então limitar a altura dele criava uma barra de rolagem vertical estranha cortando os cartões no meio - por isso não mexemos na altura aqui). Especificidade proposital: `.section` tem uma regra em @media (min-width: 1024px) que venceria por ordem no arquivo. */ [data-block="avaliacoes"] .section__head { margin-bottom: 20px; } .section[data-block="avaliacoes"] { background: linear-gradient(135deg, color-mix(in srgb, #27348B 7%, #fff) 0%, color-mix(in srgb, #7C3AED 8%, #fff) 55%, color-mix(in srgb, #EC4899 10%, #fff) 100%); } .avaliacoes-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(90deg, #27348B, #7C3AED, #EC4899); padding: 7px 18px; border-radius: var(--radius-pill); margin-bottom: 14px; } .avaliacoes-badge .section__eyebrow { color: #fff; margin-bottom: 0; } [data-block="avaliacoes"] .section__title { background: linear-gradient(90deg, #27348B, #7C3AED, #EC4899); -webkit-background-clip: text; background-clip: text; color: transparent; } .avaliacoes-google-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--color-primary); font-weight: 700; font-size: .85rem; padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 16px; box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, #7C3AED 25%, white); } .avaliacoes-google-badge svg { width: 16px; height: 16px; color: var(--color-gold); } /* ========================================================= CTA COMERCIAL ========================================================= */ .cta-card { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .cta-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); } .cta-card__title { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 8px 0 10px; } .cta-card__desc { color: var(--color-text-muted); margin-bottom: 18px; } .cta-card__checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .cta-card__checklist li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; } .cta-card__checklist svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; } .cta-card__media { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); } .cta-card__media img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; } .cta-card__badge { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); background: #fff; color: var(--color-primary); font-weight: 700; font-size: .78rem; padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); } /* ========================================================= FOOTER ========================================================= */ .site-footer { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(39, 52, 139, .08) 0%, rgba(255, 255, 255, .94) 36%, rgba(227, 6, 19, .08) 100%), #fff; color: var(--color-text); padding: 56px 0 24px; margin-top: 40px; border-top: 1px solid color-mix(in srgb, var(--color-primary) 16%, white); } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--color-primary), #7C3AED, #EC4899, var(--color-secondary), var(--color-gold)); } .site-footer .container { position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px; background: rgba(255, 255, 255, .9); border: 1px solid color-mix(in srgb, var(--color-primary) 14%, white); border-radius: 28px; padding: 32px; box-shadow: 0 22px 55px rgba(39, 52, 139, .12); } .footer-col h4 { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--color-primary-dark); font-size: 1rem; margin-bottom: 14px; } .footer-col:nth-child(2) h4 { color: #7C3AED; } .footer-col:nth-child(3) h4 { color: var(--color-secondary); } .footer-col:nth-child(4) h4 { color: var(--color-whatsapp-dark); } .footer-col h4::after { content: ""; display: block; width: 46px; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, currentColor, var(--color-gold)); margin-top: 8px; box-shadow: 0 5px 14px color-mix(in srgb, currentColor 24%, transparent); } .footer-col p, .footer-col a { color: #4F5A7A; font-size: .9rem; line-height: 1.9; } .footer-col a:hover { color: var(--color-secondary); } .footer-col ul li { margin-bottom: 4px; } .footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; background: #fff; border: 1px solid color-mix(in srgb, var(--color-primary) 16%, white); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-sm); } .footer-logo .logo-mark { height: 58px; } .footer-logo .logo-mark img { filter: none !important; } .footer-social { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .footer-social .icon-btn-round { width: 40px; height: 40px; } .footer-social .icon-btn-round svg { width: 20px; height: 20px; } .footer-social .icon-btn-round--brand { width: auto; min-width: 112px; padding: 0 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--color-primary) 14%, white); border-radius: var(--radius-pill); } .footer-social .icon-btn-round--brand img { display: block; max-width: 96px; max-height: 24px; width: auto; height: auto; object-fit: contain; } .footer-social .icon-btn-round--wa { border: 1px solid color-mix(in srgb, var(--color-whatsapp) 28%, white); } .footer-bottom { border-top: 1px solid color-mix(in srgb, var(--color-primary) 14%, white); padding-top: 18px; text-align: center; font-size: .8rem; color: #6B7280; } /* ========================================================= BOTÃO FLUTUANTE WHATSAPP ========================================================= */ .wa-fab { position: fixed; bottom: 22px; right: 22px; z-index: 500; width: 60px; height: 60px; border-radius: 50%; background: var(--color-whatsapp); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.45); animation: pulse-wa 2.6s ease-in-out infinite; } .wa-fab svg { width: 34px; height: 34px; } .wa-fab:hover { filter: brightness(1.08); } @keyframes pulse-wa { 0%, 100% { box-shadow: 0 10px 26px rgba(37,211,102,.45); } 50% { box-shadow: 0 10px 34px rgba(37,211,102,.7); } } @media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } } .back-to-top { position: fixed; right: 22px; bottom: 100px; z-index: 480; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(227, 6, 19, .3), 0 6px 16px rgba(39, 52, 139, .28); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85); transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base), transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--dur-fast), filter var(--dur-fast); } .back-to-top--visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .back-to-top:hover { transform: scale(1.1); filter: brightness(1.08); box-shadow: 0 14px 34px rgba(227, 6, 19, .4), 0 8px 20px rgba(39, 52, 139, .34); } .back-to-top svg { width: 23px; height: 23px; } @media (max-width: 480px) { .back-to-top { width: 46px; height: 46px; right: 16px; bottom: 92px; } } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity var(--dur-fast); } } .cart-fab { position: fixed; bottom: 22px; left: 22px; z-index: 500; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(30,41,89,.45); } .cart-fab:hover { filter: brightness(1.1); } .cart-fab:active { filter: brightness(.92); } .cart-fab svg { width: 30px; height: 30px; color: #fff; } .cart-fab .cart-count { position: absolute; top: -2px; right: -2px; border: 2px solid #fff; background: var(--color-secondary); font-size: .74rem; min-width: 20px; height: 20px; } @media (max-width: 480px) { .cart-fab { width: 54px; height: 54px; bottom: 16px; left: 16px; } .cart-fab svg { width: 26px; height: 26px; } } /* ========================================================= CARRINHO (sidebar) ========================================================= */ .cart-overlay { position: fixed; inset: 0; background: rgba(33, 26, 51, .5); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur-base); } .cart-overlay--visible { opacity: 1; visibility: visible; } .cart-sidebar { position: fixed; top: 0; right: 0; height: 100%; width: min(500px, 100vw); background: #fff; z-index: var(--z-cart); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); box-shadow: -20px 0 50px rgba(33,26,51,.2); } .cart-sidebar--open { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--color-border); } .cart-header h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; } .cart-header h2 svg { width: 22px; height: 22px; color: var(--color-primary); } .cart-body { flex: 1; overflow-y: auto; padding: 18px 20px; background: var(--color-bg-soft); } .cart-empty { text-align: center; padding: 50px 10px; color: var(--color-text-muted); } .cart-empty svg { width: 60px; height: 60px; color: var(--color-primary-light); margin-bottom: 14px; } .cart-empty .btn { margin-top: 16px; } /* Cards premium por item. O carrinho lateral nunca passa de 500px de largura (mesmo em desktop), então o layout é sempre empilhado (mídia+info em cima, controles embaixo) - não depende do tamanho da janela. */ #cart-items { display: flex; flex-direction: column; gap: 14px; } .cart-item { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 16px; padding: 14px; border: 1px solid var(--color-border); border-left: 4px solid var(--cat-color, var(--color-primary)); box-shadow: 0 2px 10px rgba(33, 26, 51, .06); transition: box-shadow var(--dur-base) var(--ease-out); } .cart-item:hover { box-shadow: 0 8px 24px rgba(33, 26, 51, .14); } .cart-item__top { display: flex; gap: 12px; align-items: flex-start; } .cart-item__media { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--color-bg-soft); } .cart-item__photo { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-item__media--icon { display: flex; align-items: center; justify-content: center; } .cart-item__icon { width: 32px; height: 32px; color: #fff; } .cart-item__cat-badge { position: absolute; bottom: -3px; right: -3px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .cart-item__cat-badge svg { width: 12px; height: 12px; } .cart-item__info { min-width: 0; flex: 1; padding-top: 2px; } .cart-item__name { font-weight: 700; font-size: .98rem; margin-bottom: 4px; overflow-wrap: break-word; } .cart-item__variacoes { font-size: .78rem; color: var(--color-primary); font-weight: 600; margin-bottom: 3px; } .cart-item__meta { font-size: .78rem; color: var(--color-text-muted); margin-bottom: 2px; line-height: 1.4; } .cart-item__code { font-size: .76rem; color: var(--color-text-muted); margin-bottom: 6px; } .cart-item__unit { font-size: .8rem; color: var(--color-text-muted); } .cart-item__note { padding: 9px 10px; border-radius: 8px; background: var(--color-bg-soft); } .cart-item__note p { margin: 0; font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; } .cart-item__note-empty { color: var(--color-text-muted); } .cart-item__note-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; } .cart-item__note-actions button { color: var(--color-primary); font-size: .72rem; font-weight: 700; } .cart-item__note-actions button:hover { text-decoration: underline; } .cart-item__note-editor { margin-top: 8px; } .cart-item__note-editor label { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 700; } .cart-item__note-editor textarea { width: 100%; min-height: 58px; resize: vertical; padding: 8px 9px; border: 1px solid var(--color-border); border-radius: 7px; background: #fff; font: inherit; font-size: .8rem; } .cart-item__note-editor textarea:focus { border-color: var(--color-primary); outline: none; } .cart-item__note-editor > div { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 5px; } .cart-item__note-editor [data-cart-note-counter] { margin-right: auto; color: var(--color-text-muted); font-size: .68rem; } .cart-item__note-editor button { color: var(--color-primary); font-size: .72rem; font-weight: 700; } .cart-item__actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding-top: 12px; border-top: 1px dashed var(--color-border); } .cart-item__actions .qty-stepper { margin-bottom: 0; flex-shrink: 0; } .qty-stepper-group { display: flex; flex-direction: column; gap: 4px; align-items: center; flex-shrink: 0; } .qty-stepper__label { font-size: .68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; } .cart-item__subtotal { font-weight: 800; font-size: 1.05rem; white-space: nowrap; } .cart-item__remove { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-danger) 12%, white); color: var(--color-danger); transition: background var(--dur-fast) ease; } .cart-item__remove:hover { background: color-mix(in srgb, var(--color-danger) 24%, white); } .cart-item__remove svg { width: 15px; height: 15px; } .cart-item .qty-btn { background: #fff; box-shadow: 0 1px 3px rgba(33,26,51,.12); } .cart-item .qty-btn:hover { background: var(--color-primary); color: #fff; } .cart-form { border-top: 1px solid var(--color-border); padding: 18px 20px; } .cart-form h3 { font-size: .95rem; margin-bottom: 12px; } .field { margin-bottom: 12px; } .field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; } .field .required { color: var(--color-danger); } .field input, .field textarea, .field select { width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: .92rem; background: #fff; transition: border-color var(--dur-fast); min-height: 44px; } .field textarea { min-height: 70px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .field-hint { font-size: .78rem; color: var(--color-text-muted); margin: -6px 0 12px; line-height: 1.4; } .field input[type="file"] { min-height: auto; padding: 10px; cursor: pointer; background: #fff; } .field input[type="file"]::file-selector-button { border: none; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; padding: 8px 14px; margin-right: 12px; cursor: pointer; } .image-upload-preview { position: relative; width: 148px; aspect-ratio: 1; margin: 10px 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); overflow: hidden; box-shadow: var(--shadow-xs); } .image-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-upload-preview .icon-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); } .nota-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1.5px solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-bg-soft); } .nota-toolbar__btn { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--color-text); font-size: .82rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); } .nota-toolbar__btn:hover { background: #fff; border-color: var(--color-border); } .nota-toolbar__btn--italic { font-style: italic; } .nota-toolbar__btn--underline { text-decoration: underline; } .nota-toolbar__sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 2px; flex-shrink: 0; } .nota-toolbar__swatch { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: .7rem; font-weight: 700; color: var(--color-text); pointer-events: none; } .nota-toolbar__swatch--highlight { background: #FFF176; } #nota-cor-swatch { border-bottom: 3px solid #27348B; } .nota-toolbar__btn--color input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none; min-height: auto; } .nota-editor { min-height: 64px; max-height: 260px; overflow-y: auto; width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: inherit; font-size: .92rem; line-height: 1.5; color: var(--color-text); background: #fff; } .nota-editor:focus { outline: none; border-color: var(--color-primary); } .nota-editor:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); } .field--error input, .field--error textarea { border-color: var(--color-danger); } .field__error-msg { display: none; color: var(--color-danger); font-size: .76rem; margin-top: 4px; } .field--error .field__error-msg { display: block; } .cart-footer { padding: 18px 20px 22px; border-top: 1px solid var(--color-border); background: #fff; } .cart-totals { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; margin-bottom: 10px; color: var(--color-text-muted); } .cart-totals--final { padding-top: 12px; margin: 0 0 16px; border-top: 1px dashed var(--color-border); } .cart-totals--final span:first-child { font-size: .92rem; font-weight: 600; color: var(--color-text); } #cart-total { font-size: 1.4rem; font-weight: 800; color: var(--color-primary); } .cart-footer-links { text-align: center; margin-top: 8px; } /* ========================================================= MODAL DE PRODUTO ========================================================= */ .product-modal { position: fixed; inset: 0; z-index: var(--z-cart); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); } .product-modal--open { opacity: 1; visibility: visible; pointer-events: auto; } .product-modal__panel { background: #fff; border-radius: var(--radius-lg); width: min(1180px, calc(100vw - 40px)); max-width: 1180px; max-height: calc(100vh - 32px); position: relative; box-shadow: var(--shadow-lg); transform: scale(.96) translateY(8px); transition: transform var(--dur-base) var(--ease-out); display: flex; flex-direction: column; } .product-modal--open .product-modal__panel { transform: scale(1) translateY(0); } .product-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; background: #fff; box-shadow: var(--shadow-md); width: 38px; height: 38px; } .product-modal__close svg { width: 18px; height: 18px; } .product-modal__scroll { overflow-y: auto; padding: 28px; } .product-modal__layout { display: grid; grid-template-columns: minmax(0, 45fr) minmax(360px, 55fr); gap: 32px; align-items: start; } .product-modal__gallery { min-width: 0; } .product-modal__stage { position: relative; } .product-modal__main { width: 100%; aspect-ratio: 1 / 1; max-height: 520px; border-radius: var(--radius-md); overflow: hidden; margin: 0 auto 12px; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; } .product-modal__main img { width: 100%; height: 100%; max-height: 520px; object-fit: contain !important; cursor: zoom-in; } .product-modal__main--icon { padding: 30px; } .product-modal__main--icon .product-modal__main-icon { width: 100%; height: 100%; color: #fff; } .product-modal__nav { position: absolute; top: 50%; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--color-primary); box-shadow: var(--shadow-md); font-size: 1.7rem; line-height: 1; transform: translateY(-50%); } .product-modal__nav--prev { left: 10px; } .product-modal__nav--next { right: 10px; } .product-modal__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; } .product-modal__thumb { width: 58px; height: 58px; border-radius: 8px; overflow: hidden; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color var(--dur-fast); } .product-modal__thumb:hover { border-color: var(--color-border); } .product-modal__thumb--active { border-color: var(--color-primary); } .product-modal__thumb img { width: 100%; height: 100%; object-fit: cover; } .product-modal__thumb svg { width: 60%; height: 60%; color: #fff; } .product-modal__info { position: sticky; top: 0; min-width: 0; padding-right: 6px; } .product-modal__cat { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; } .product-modal__title { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-bottom: 10px; padding-right: 38px; } .product-modal__reference { display: inline-flex; align-items: flex-start; gap: 5px; width: fit-content; max-width: 100%; padding: 6px 10px; border-radius: 6px; background: #27348b; color: #fff; font-size: .76rem; line-height: 1.3; font-weight: 700; margin-bottom: 10px; overflow-wrap: anywhere; } .product-modal__reference span { flex-shrink: 0; } .product-modal__reference strong { color: #fff; min-width: 0; } .product-modal__reference[hidden] { display: none; } .product-modal__pedido-minimo { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; } .product-modal__pedido-minimo svg { width: 16px; height: 16px; flex-shrink: 0; } .product-modal__nota { font-size: .86rem; color: var(--color-text-muted); margin-bottom: 14px; line-height: 1.5; } .product-modal__nota p { margin-bottom: 7px; } .product-modal__info .product-card__options { margin-top: 14px; margin-bottom: 14px; } .product-modal__share { color: var(--color-primary); font-size: .78rem; font-weight: 700; } .product-modal__share:hover { text-decoration: underline; } @media (max-width: 860px) { .product-modal__layout { grid-template-columns: 1fr; gap: 20px; } .product-modal__info { position: static; padding-right: 0; } .product-modal__main { max-width: 520px; max-height: 420px; } .product-modal__main img { max-height: 420px; } } @media (max-width: 640px) { .product-modal { padding: 0; align-items: flex-end; } .product-modal__panel { width: 100%; max-width: 100%; max-height: 96vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .product-modal__scroll { padding: 18px 16px 24px; } .product-modal__main { max-height: 380px; } .product-modal__main img { max-height: 380px; } .product-modal__close { position: absolute; top: 10px; right: 10px; } .product-modal--open .product-modal__panel { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .product-modal, .product-modal__panel { transition: none; } } /* ========================================================= LIGHTBOX DE IMAGEM (zoom + navegação da galeria) ========================================================= */ .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(12, 9, 22, .93); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); } .lightbox--open { opacity: 1; visibility: visible; pointer-events: auto; } .lightbox__stage { position: relative; width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 76px 96px; scrollbar-width: none; } .lightbox__stage::-webkit-scrollbar { display: none; } .lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; touch-action: none; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .lightbox__img--zoomed { max-width: none; max-height: none; width: 190%; cursor: grab; } .lightbox__img--dragging { cursor: grabbing; } .lightbox__close, .lightbox__nav { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; z-index: 2; transition: background var(--dur-fast); } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.26); } .lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; } .lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; } .lightbox__nav { top: 50%; margin-top: -24px; width: 48px; height: 48px; } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } .lightbox__nav--prev svg { transform: rotate(180deg); } .lightbox__counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.16); padding: 5px 14px; border-radius: var(--radius-pill); letter-spacing: .02em; } @media (max-width: 640px) { .lightbox__stage { padding: 64px 20px; } .lightbox__nav { width: 40px; height: 40px; margin-top: -20px; } .lightbox__nav--prev { left: 6px; } .lightbox__nav--next { right: 6px; } .lightbox__close { top: 10px; right: 10px; } } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } } /* ========================================================= TOAST ========================================================= */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--color-text); color: #fff; padding: 13px 22px; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: var(--z-toast); opacity: 0; visibility: hidden; transition: all var(--dur-base) var(--ease-out); } .toast--visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* ========================================================= CONFETE (micro-interação leve) ========================================================= */ .confetti-piece { position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; z-index: var(--z-confetti); animation: confettiBurst .8s ease-out forwards; } @keyframes confettiBurst { 0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; } } /* ========================================================= ADMIN ========================================================= */ .admin-shell { min-height: 100vh; background: var(--color-bg-soft); } .admin-topbar { background: #12173D; color: #fff; padding: 16px 0; } .admin-topbar .container { display: flex; align-items: center; justify-content: space-between; } .admin-topbar .logo-mark { height: 34px; } .admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .admin-login-card { background: #fff; border-radius: var(--radius-lg); padding: 36px 30px; max-width: 380px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; } .admin-login-card .logo { justify-content: center; margin-bottom: 18px; } .admin-login-card h1 { font-size: 1.2rem; margin-bottom: 6px; } .admin-login-card p { color: var(--color-text-muted); font-size: .88rem; margin-bottom: 20px; } .admin-login-error { color: var(--color-danger); font-size: .82rem; margin-top: 10px; } .admin-note { background: #FFF7ED; border: 1px solid #FDE7C7; color: #92400E; border-radius: var(--radius-sm); padding: 12px 14px; font-size: .8rem; margin-bottom: 20px; } .admin-toolbar-search { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .admin-toolbar-sticky { position: sticky; top: 0; z-index: 2; background: var(--color-bg-soft); display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 0; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); } .admin-toolbar-sticky h2 { font-size: 1.1rem; flex-shrink: 0; } .admin-toolbar-sticky .admin-toolbar-search { margin-bottom: 0; flex: 1; min-width: 260px; } .admin-toolbar-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } /* ---------- Modal genérico (hoje usado só no cadastro de produto) ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(18, 23, 61, .55); z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .modal-overlay[hidden] { display: none; } .modal-dialog { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; max-height: calc(100vh - 48px); overflow-y: auto; margin: auto; } .modal-dialog--product { max-width: 1180px; } .modal-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: #fff; z-index: 1; } .modal-dialog__head h2 { font-size: 1.15rem; } .modal-dialog__split { display: grid; grid-template-columns: 1.4fr 1fr; align-items: start; } .modal-dialog__form-col { padding: 24px; border-right: 1px solid var(--color-border); } .modal-dialog__form-col .admin-form { margin: 0; } .modal-dialog__preview-col { padding: 24px; background: var(--color-bg-soft); } .modal-dialog__preview-col h3 { font-size: .95rem; margin-bottom: 4px; } .product-preview-frame { margin-top: 14px; max-width: 320px; } .product-preview-frame .stagger-item { opacity: 1; animation: none; } .modal-dialog--confirm { max-width: 440px; z-index: 1; position: relative; } .modal-dialog--confirm .modal-dialog__body { padding: 20px 24px 24px; } .modal-dialog--confirm .modal-dialog__body p { color: var(--color-text-muted); line-height: 1.5; margin-bottom: 18px; } .modal-overlay--confirm { z-index: var(--z-confetti); } @media (max-width: 900px) { .modal-dialog__split { grid-template-columns: 1fr; } .modal-dialog__form-col { border-right: none; border-bottom: 1px solid var(--color-border); } .product-preview-frame { max-width: 100%; } } .variacao-row { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; } .variacao-row__head { display: flex; gap: 10px; align-items: flex-start; } .variacao-row__head .field { flex: 1; margin-bottom: 10px; } .variacao-row__head .icon-btn { flex-shrink: 0; margin-top: 22px; } .admin-panel { padding: 30px 0 60px; } .admin-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 24px; margin-bottom: 26px; box-shadow: var(--shadow-sm); } .admin-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .admin-card__head h2 { font-size: 1.1rem; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 720px; } .admin-table th { text-align: left; padding: 10px 12px; color: var(--color-text-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--color-border); } .admin-table td { padding: 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .admin-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; } .admin-thumb--icon { display: flex; align-items: center; justify-content: center; color: #fff; } .admin-thumb--icon svg { width: 24px; height: 24px; } .admin-td-id { font-weight: 600; color: var(--color-primary); } .admin-td-actions { display: flex; gap: 6px; opacity: 0; transition: opacity var(--dur-fast); } .admin-table tbody tr:hover .admin-td-actions, .admin-table tbody tr:focus-within .admin-td-actions { opacity: 1; } @media (hover: none) { .admin-td-actions { opacity: 1; } } .icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-bg-soft); color: var(--color-primary); } .icon-btn:hover { background: #E3E7F5; } .icon-btn svg { width: 15px; height: 15px; } .icon-btn--danger { color: var(--color-danger); } .icon-btn--danger:hover { background: #FEF2F2; } .switch { width: 42px; height: 24px; border-radius: 999px; background: #D1D5DB; padding: 3px; display: inline-flex; transition: background var(--dur-fast); } .switch__knob { width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--dur-fast); box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch--on { background: var(--color-success); } .switch--on .switch__knob { transform: translateX(18px); } .admin-form { display: grid; grid-template-columns: 1fr; gap: 14px; } .admin-form .field-row { grid-template-columns: 1fr 1fr; } .admin-form-checks { display: flex; gap: 20px; flex-wrap: wrap; } .check-field { display: flex; align-items: center; gap: 8px; font-size: .88rem; } .check-field input { width: 18px; height: 18px; min-height: auto; } .admin-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; } /* ---------- Shell do painel (sidebar + telas) ---------- */ .admin-layout { display: flex; align-items: flex-start; min-height: calc(100vh - 68px); } .admin-sidebar { flex-shrink: 0; width: 220px; background: #fff; border-right: 1px solid var(--color-border); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; } .admin-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; color: var(--color-text); transition: background var(--dur-fast), color var(--dur-fast); } .admin-sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; } .admin-sidebar__link:hover { background: var(--color-bg-soft); } .admin-sidebar__link--active { background: color-mix(in srgb, var(--color-primary) 10%, white); color: var(--color-primary); } .admin-main { flex: 1; min-width: 0; } .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .dash-stat { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-xs); } .dash-stat__num { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-primary); display: block; line-height: 1.2; } .dash-stat__label { font-size: .78rem; color: var(--color-text-muted); } .dash-columns { display: grid; grid-template-columns: 1fr; gap: 20px; } .dash-columns h3 { font-size: .92rem; margin-bottom: 8px; } .dash-list { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; } .dash-list li { border-bottom: 1px solid var(--color-border); padding-bottom: 6px; } .admin-sidebar__group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); padding: 14px 14px 4px; } .admin-sidebar__group:first-child { padding-top: 4px; } .admin-block-list { display: flex; flex-direction: column; gap: 8px; } .admin-block-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-soft); } .admin-block-row__label { flex: 1; font-weight: 600; font-size: .9rem; } /* ---------- Editor de Banner ---------- */ .banner-btn-row { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 14px; } .banner-btn-row__head { display: flex; gap: 10px; align-items: flex-start; } .banner-btn-row__head .field { flex: 1; margin-bottom: 10px; } .banner-btn-row__head .icon-btn { flex-shrink: 0; margin-top: 22px; } .admin-form .banner-btn-row__cores { grid-template-columns: repeat(3, 1fr); } .admin-form .banner-btn-row__margens { grid-template-columns: repeat(4, 1fr); } .banner-btn-row__position-wrap { margin-top: 4px; } .position-grid { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 4px; padding: 8px; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: max-content; margin-top: 6px; } .position-grid__cell { width: 28px; height: 28px; padding: 0; border-radius: 6px; background: #fff; border: 1.5px solid var(--color-border); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); } .position-grid__cell::after { content: ""; display: block; width: 6px; height: 6px; margin: auto; border-radius: 50%; background: var(--color-text-muted); opacity: .35; } .position-grid__cell:hover { border-color: var(--color-primary); } .position-grid__cell--active { background: var(--color-primary); border-color: var(--color-primary); } .position-grid__cell--active::after { background: #fff; opacity: 1; } /* Largura igual à área de conteúdo real do site público (--container-w menos o padding de 20px de cada lado do .container), pra pré-visualização bater com o carrossel de verdade em vez de usar uma caixa mais estreita/proporção diferente. */ .banner-preview { max-width: calc(var(--container-w) - 40px); margin: 0 auto; } .field input[type="range"] { -webkit-appearance: none; appearance: none; border: none; background: transparent; padding: 0; min-height: 28px; height: 28px; } .field input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); } .field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 3px solid #fff; box-shadow: var(--shadow-sm); margin-top: -6px; cursor: pointer; } .field input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); } .field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; border: none; } .field input[type="range"]:focus { outline: none; } .field input[type="color"] { padding: 4px; min-height: 40px; width: 56px; cursor: pointer; } @media (max-width: 640px) { .admin-form .banner-btn-row__cores, .admin-form .banner-btn-row__margens { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .admin-layout { flex-direction: column; min-height: 0; } .admin-sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--color-border); position: static; gap: 6px; } .admin-sidebar__link { white-space: nowrap; } .admin-sidebar__group { display: none; } } @media (min-width: 640px) { .dash-columns { grid-template-columns: 1fr 1fr; } } /* ========================================================= RESPONSIVO ========================================================= */ @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .hero__actions .btn { min-width: 220px; } } @media (min-width: 1024px) { .container { padding: 0 32px; } .section { padding: 28px 0; } .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-grid { grid-template-columns: 1.1fr .9fr; } .cta-card { grid-template-columns: 1.15fr .85fr; padding: 44px 44px; gap: 40px; } .footer-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 480px) { .about-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .cart-sidebar { width: 100vw; } .product-card__body { padding: 16px 14px 18px; } .product-card__options { gap: 6px; } .buy-option { padding: 9px 6px; } } /* ---------- Acessibilidade, páginas legais e ferramentas profissionais ---------- */ .skip-link{position:fixed;left:16px;top:8px;z-index:10000;padding:10px 16px;background:#111936;color:#fff;border-radius:6px;transform:translateY(-160%);transition:transform .2s} .skip-link:focus{transform:translateY(0)} .footer-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:10px} .footer-legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px} .legal-page{padding-top:0;background:#f7f8fc;color:#171b2f} .legal-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e2e5f0} .legal-header .container{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px} .legal-header img{display:block;height:auto} .legal-content{max-width:860px;padding-top:64px;padding-bottom:72px} .legal-eyebrow{color:#e30621;font-weight:800;text-transform:uppercase;font-size:.78rem} .legal-content h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.08;margin:8px 0 18px;color:#27348b} .legal-lead{font-size:1.15rem;line-height:1.75;color:#4b526b;max-width:720px;margin-bottom:44px} .legal-content section{padding:28px 0;border-top:1px solid #dfe3ee} .legal-content section h2{font-size:1.18rem;margin:0 0 10px;color:#111936} .legal-content section p,.legal-contact p{line-height:1.75;color:#4b526b;margin:0} .legal-contact{margin-top:32px;padding:24px;border-left:4px solid #e30621;background:#fff;box-shadow:0 8px 24px rgba(24,30,70,.07)} .legal-footer{background:#111936;color:#fff;padding:28px 0} .legal-footer .container{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px} .legal-footer a{color:#fff} .admin-form-actions--start{justify-content:flex-start} .admin-status-pill{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:6px;background:#eef6ff;color:#173c73;font-size:.82rem;font-weight:700} .catalog-health-list{list-style:none;padding:0;margin:0;display:grid;gap:10px} .catalog-health-list li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:#f7f8fc;border:1px solid #e1e4ef;border-radius:6px} .catalog-health-list li span{font-size:.82rem;color:#626980;line-height:1.45} .catalog-health-list > li { padding: 0; overflow: hidden; } .catalog-health-details summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; cursor: pointer; list-style: none; } .catalog-health-details summary::-webkit-details-marker { display: none; } .catalog-health-details summary:hover { background: #f0f3fa; } .catalog-health-details summary span { display: grid; gap: 3px; } .catalog-health-details summary small { color: #6a7185; font-size: .72rem; font-weight: 500; } .catalog-health-details summary b { color: #27348b; font-size: 1.2rem; transition: transform .18s; } .catalog-health-details[open] summary b { transform: rotate(180deg); } .catalog-health-products { max-height: 360px; overflow-y: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px 14px 14px; border-top: 1px solid #e1e4ef; background: #fff; } .catalog-health-product { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #e1e4ef; border-radius: 6px; color: #27348b; } .catalog-health-product:hover { border-color: #27348b; background: #f4f6ff; } .catalog-health-product strong { font-size: .78rem; line-height: 1.35; } .catalog-health-product span { font-size: .68rem !important; } .catalog-health-empty { padding: 14px !important; } @media(max-width:640px){.catalog-health-products{grid-template-columns:1fr}.catalog-health-details summary{min-height:64px}} .product-related{margin-top:28px;padding-top:22px;border-top:1px solid #e1e4ef}.product-related h3{font-size:1.05rem;margin:0 0 12px;color:#111936} .product-related>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .product-related .product-related__card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:11px;min-height:108px;padding:9px;border:1px solid #d9ddec;border-radius:6px;background:#fff;color:#111936;text-align:left;font:inherit;cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s} .product-related .product-related__card:hover,.product-related .product-related__card:focus-visible{border-color:#27348b;background:#fff;box-shadow:0 8px 20px rgba(39,52,139,.12);transform:translateY(-2px)} .product-related__media{display:flex;width:88px;height:88px;align-items:center;justify-content:center;overflow:hidden;border-radius:5px;background:#f6f7fb} .product-related__media img{width:100%;height:100%;object-fit:cover} .product-related__placeholder{font-weight:800;color:#27348b} .product-related__content{display:flex;min-width:0;flex-direction:column;align-items:flex-start;padding:2px 0} .product-related__category{margin-bottom:3px;color:#68708a;font-size:.62rem;font-weight:800;text-transform:uppercase} .product-related__name{display:-webkit-box;overflow:hidden;color:#111936;font-size:.78rem;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2} .product-related__price{margin-top:auto;color:#e30613;font-size:.88rem;font-weight:800} .recent-products{margin-top:56px;padding-top:32px;border-top:1px solid #e1e4ef}.recent-products h2{font-size:1.45rem;color:#27348b;margin:0 0 20px} .product-availability{display:inline-flex;margin:7px 0 0;padding:5px 8px;border-radius:5px;font-size:.72rem;font-weight:800;text-transform:uppercase}.product-availability--sob-encomenda{background:#fff4d9;color:#775100}.product-availability--indisponivel{background:#ffe6ea;color:#9f1730} @media(max-width:640px){.legal-content{padding-top:40px}.legal-header .container{min-height:68px}.legal-header img{width:92px}.legal-header .btn{font-size:.75rem;padding:8px 10px}.admin-card__head{align-items:flex-start}.admin-status-pill{white-space:normal}} @media(max-width:900px){.product-related>div{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.product-related>div{display:flex;overflow-x:auto;padding-bottom:6px}.product-related .product-related__card{grid-template-columns:76px minmax(0,1fr);min-width:260px;min-height:96px}.product-related__media{width:76px;height:76px}} /* ========================================================= ADMIN V2 - interface de trabalho ========================================================= */ .admin-shell { --admin-sidebar-w: 252px; --admin-topbar-h: 64px; --admin-bg: #f4f6f9; --admin-surface: #fff; --admin-ink: #172033; --admin-muted: #667085; --admin-border: #dfe3ea; --admin-accent: #27348b; background: var(--admin-bg); color: var(--admin-ink); font-family: 'Poppins', system-ui, sans-serif; } .order-history-card { margin-top: 10px; border: 1px solid #dde1ee; border-radius: 7px; background: #fff; overflow: hidden; } .order-history-card summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; } .order-history-card summary > span { display: flex; flex-direction: column; gap: 3px; } .order-history-card summary small { color: #68708a; font-weight: 500; } .order-history-card summary b { color: #27348b; white-space: nowrap; } .order-history-card__body { padding: 16px; border-top: 1px solid #e1e4ef; background: #f8f9fc; } .order-customer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; margin-bottom: 14px; font-size: .82rem; } .order-items { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } .order-items li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 10px; border-radius: 5px; background: #fff; font-size: .82rem; } .order-items li div { display: flex; flex-direction: column; gap: 2px; } .order-items small { color: #68708a; } @media (max-width: 640px) { .order-customer { grid-template-columns: 1fr; } .order-items li { flex-direction: column; gap: 5px; } } .admin-shell h1,.admin-shell h2,.admin-shell h3,.admin-shell h4 { font-family: 'Poppins', system-ui, sans-serif; letter-spacing: 0; } .admin-topbar { height: var(--admin-topbar-h); padding: 0; background: #151a35; position: sticky; top: 0; z-index: 210; } .admin-topbar__inner { height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 14px; } .admin-topbar .logo { min-width: calc(var(--admin-sidebar-w) - 42px); gap: 10px; } .admin-topbar .logo-mark { width: 82px; height: 32px; } .admin-brand-label { color: #cbd0e5; font-size: .72rem; font-weight: 600; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.22); } .admin-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .admin-topbar__site-link,.admin-user-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: #fff; background: transparent; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; } .admin-topbar__site-link:hover,.admin-user-button:hover { background: rgba(255,255,255,.1); } .admin-topbar__site-link svg,.admin-user-button svg,.admin-menu-toggle svg { width: 17px; height: 17px; } .admin-menu-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; } .admin-layout { min-height: calc(100vh - var(--admin-topbar-h)); align-items: stretch; } .admin-sidebar { width: var(--admin-sidebar-w); height: calc(100vh - var(--admin-topbar-h)); position: sticky; top: var(--admin-topbar-h); overflow-y: auto; padding: 18px 14px 24px; gap: 0; border-color: var(--admin-border); background: #fff; z-index: 200; } .admin-sidebar__search { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 15px; border: 1px solid var(--admin-border); border-radius: 6px; background: #f8f9fb; color: var(--admin-muted); } .admin-sidebar__search svg { width: 16px; height: 16px; flex: 0 0 auto; } .admin-sidebar__search input { border: 0; background: transparent; min-height: 0; width: 100%; padding: 0; font-size: .8rem; outline: 0; } .admin-nav-group { display: flex; flex-direction: column; margin-bottom: 12px; } .admin-nav-group--system { padding-top: 10px; border-top: 1px solid #eceef3; } .admin-sidebar__group { padding: 7px 10px 5px; color: #8a91a3; font-size: .65rem; letter-spacing: .07em; } .admin-sidebar__link { min-height: 42px; padding: 9px 10px; border-radius: 6px; color: #424a5e; font-size: .82rem; font-weight: 500; } .admin-sidebar__link svg { width: 17px; height: 17px; color: #737b90; } .admin-sidebar__link:hover { background: #f1f3f7; color: var(--admin-ink); } .admin-sidebar__link--active { background: #eef0fb; color: var(--admin-accent); box-shadow: inset 3px 0 var(--admin-accent); } .admin-sidebar__link--active svg { color: var(--admin-accent); } .admin-sidebar__link--legacy { color: #747b8b; } .admin-nav-badge { margin-left: auto; min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #e30621; color: #fff; font-size: .67rem; font-weight: 700; padding: 0 6px; } .admin-main { background: var(--admin-bg); } .admin-page-header { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px clamp(20px,3vw,38px); background: #fff; border-bottom: 1px solid var(--admin-border); } .admin-breadcrumb { margin: 0 0 4px; color: var(--admin-accent); font-size: .7rem; font-weight: 700; text-transform: uppercase; } .admin-page-header h1 { margin: 0; font-size: 1.55rem; color: var(--admin-ink); } .admin-page-header p:last-child { margin: 5px 0 0; color: var(--admin-muted); font-size: .84rem; } .admin-page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .admin-panel.container { max-width: 1440px; padding: 24px clamp(20px,3vw,38px) 60px; } .admin-card { border-color: var(--admin-border); border-radius: 7px; padding: 20px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.035); } .admin-card__head { margin-bottom: 16px; } .admin-card__head h2 { font-size: 1rem; color: var(--admin-ink); } .admin-note { border-radius: 6px; } .admin-table-wrap { border: 1px solid var(--admin-border); border-radius: 7px; background: #fff; } .admin-table th { padding: 12px 14px; background: #f8f9fb; color: #697085; font-size: .68rem; letter-spacing: .04em; border-bottom: 1px solid var(--admin-border); } .admin-table td { padding: 12px 14px; } .admin-table tbody tr { transition: background .15s; } .admin-table tbody tr:hover { background: #f8f9fc; } .admin-table-link { color: var(--admin-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .admin-list-search { margin-left: auto; width: min(280px,100%); } .admin-list-search input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--admin-border); border-radius: 6px; background: #f8f9fb; font: inherit; font-size: .78rem; } .admin-td-actions { opacity: 1; justify-content: flex-end; } .admin-thumb { width: 68px; height: 68px; border-radius: 6px; cursor: zoom-in; border: 1px solid var(--admin-border); background: #fff; } .icon-btn { width: 40px; height: 40px; border-radius: 6px; } .icon-btn svg { width: 17px; height: 17px; } .admin-form input,.admin-form select,.admin-form textarea { border-color: #cfd4de; border-radius: 6px; } .admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(39,52,139,.1); } .admin-form-actions { position: sticky; bottom: 0; z-index: 4; padding: 14px 0 2px; background: linear-gradient(to bottom,rgba(255,255,255,0),#fff 16px); } .dash-grid { grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px; } .dash-stat { border-radius: 7px; box-shadow: none; padding: 18px; } .dash-stat:hover { border-color: #b9c1d1; background: #fbfcff; } .dash-stat--alert { border-left: 3px solid #e30621; } .dash-stat__num { font-family: 'Poppins',system-ui,sans-serif; font-size: 1.65rem; font-weight: 700; color: var(--admin-ink); } .dash-stat__label { font-size: .76rem; } .dash-stat__link { display: block; margin-top: 12px; color: var(--admin-accent); font-size: .7rem; font-weight: 700; } .admin-maintenance-intro { padding: 18px 20px; margin-bottom: 18px; border: 1px solid #d7dfef; border-left: 4px solid var(--admin-accent); border-radius: 6px; background: #f7f9fd; } .admin-maintenance-intro h2 { margin: 0 0 4px; font-size: 1rem; } .admin-maintenance-intro p { margin: 0; color: var(--admin-muted); font-size: .84rem; } .admin-editor-card { scroll-margin-top: calc(var(--admin-topbar-h) + 18px); } .admin-editor-card--collapsed { padding-bottom: 4px; } .admin-editor-card--collapsed > :not(.admin-card__head) { display: none !important; } .admin-editor-card--collapsed > .admin-card__head { margin-bottom: 0; } .admin-editor-toggle { margin-left: auto; } .admin-form-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--admin-border); background: #f8f9fb; overflow-x: auto; } .admin-form-tab { min-height: 48px; padding: 0 12px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--admin-muted); font: inherit; font-size: .78rem; font-weight: 600; } .admin-form-tab:hover { color: var(--admin-ink); } .admin-form-tab--active { color: var(--admin-accent); border-color: var(--admin-accent); } .admin-form-panel { display: grid; grid-template-columns: 1fr; gap: 14px; } .admin-form-panel[hidden] { display: none; } .admin-subsection { margin: 0 !important; padding: 16px 0 !important; border-width: 1px 0 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .admin-subsection > .admin-card__head { margin: 0; min-height: 38px; } .admin-subsection > .admin-card__head h3 { font-size: .88rem !important; color: var(--admin-ink); } .admin-subsection-toggle { width: 40px; height: 40px; display: grid; place-items: center; margin-left: auto; border-radius: 6px; color: var(--admin-accent); } .admin-subsection-toggle span:first-child { font-size: 1.2rem; transition: transform .15s; } .admin-subsection--collapsed > .admin-card__head .admin-subsection-toggle span:first-child { transform: rotate(-90deg); } .admin-subsection--collapsed > :not(.admin-card__head) { display: none !important; } .admin-media-picker { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border: 1px dashed #bdc4d2; border-radius: 6px; background: #f8f9fb; } .admin-media-picker__status { color: var(--admin-muted); font-size: .72rem; line-height: 1.35; } .admin-media-picker__preview { width: 64px; height: 52px; padding: 0; border: 1px solid var(--admin-border); border-radius: 5px; overflow: hidden; background: #fff; cursor: zoom-in; } .admin-media-picker__preview img { width: 100%; height: 100%; object-fit: cover; } .admin-media-picker--loading { opacity: .7; pointer-events: none; } .admin-media-picker__url { font-size: .74rem; color: var(--admin-muted); } #product-form .admin-card { margin: 4px 0; padding: 18px 0; border-width: 1px 0 0; border-radius: 0; background: transparent !important; box-shadow: none; } #product-form .admin-form-actions { margin-top: 16px; border-top: 1px solid var(--admin-border); } #admin-maintenance-tools .admin-card,#admin-maintenance-tools .admin-note { max-width: 980px; } .admin-maintenance-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .admin-maintenance-buttons .btn { border-color: #d6a9ae; color: #8f1f2d; } .admin-image-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 30px; background: rgba(10,14,28,.84); } .admin-image-lightbox[hidden] { display: none; } .admin-image-lightbox img { max-width: min(100%,1100px); max-height: calc(100vh - 100px); object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 20px 70px rgba(0,0,0,.4); } .admin-image-lightbox button { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #111; font-size: 1.4rem; } .admin-sidebar-backdrop { display: none; } @media (max-width: 1050px) { .dash-grid { grid-template-columns: repeat(2,minmax(150px,1fr)); } } @media (max-width: 860px) { .admin-topbar__inner { padding: 0 12px; } .admin-menu-toggle { display: inline-flex; } .admin-topbar .logo { min-width: 0; } .admin-brand-label { display: none; } .admin-layout { flex-direction: row; } .admin-sidebar { position: fixed; left: 0; top: var(--admin-topbar-h); width: min(310px,88vw); height: calc(100vh - var(--admin-topbar-h)); flex-direction: column; overflow-y: auto; border-right: 1px solid var(--admin-border); border-bottom: 0; transform: translateX(-102%); transition: transform .2s ease; } .admin-sidebar--open { transform: translateX(0); } .admin-sidebar__group { display: block; } .admin-sidebar__link { white-space: normal; } .admin-sidebar-backdrop { display: block; position: fixed; inset: var(--admin-topbar-h) 0 0; z-index: 190; background: rgba(12,18,36,.42); } .admin-sidebar-backdrop[hidden] { display: none; } .admin-main { width: 100%; } .admin-page-header { min-height: 0; padding: 20px; align-items: flex-start; } .admin-page-header h1 { font-size: 1.3rem; } .admin-page-header p:last-child { max-width: 540px; } .admin-panel.container { padding: 18px 16px 50px; } } @media (max-width: 640px) { .admin-topbar__site-link span:last-child,.admin-user-button span:last-child { display: none; } .admin-topbar__site-link,.admin-user-button { width: 42px; justify-content: center; padding: 0; } .admin-page-header { display: block; } .admin-page-actions { justify-content: flex-start; margin-top: 16px; } .admin-page-actions .btn { flex: 1; } .dash-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .dash-stat { padding: 14px; } .admin-card { padding: 16px; } .admin-form .field-row { grid-template-columns: 1fr; } .admin-thumb { width: 58px; height: 58px; } .admin-media-picker { grid-template-columns: 1fr auto; } .admin-media-picker__status { grid-column: 1 / -1; } } /* ========================================================= POPUP PROMOCIONAL — modal de captação/aviso, editável pelo admin. renderPopup() em site-popup.js é a única fonte de HTML deste bloco, reaproveitada pelo popup real (popup-trigger.js) e pela prévia do admin (.popup-preview-frame, no fim deste bloco). ========================================================= */ .popup-promo-overlay { position: fixed; inset: 0; background: rgba(18, 23, 61, .55); z-index: var(--z-popup); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .popup-promo { position: relative; background: var(--popup-cor-fundo, #fff); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; margin: auto; overflow: hidden; display: flex; max-height: calc(100vh - 40px); } .popup-promo--pequena { max-width: 360px; } .popup-promo--media { max-width: 480px; } .popup-promo--grande { max-width: 720px; } .popup-promo--escuro { --popup-cor-fundo: #1A1F2E; --popup-cor-titulo: #fff; --popup-cor-texto: #C7CBDA; } .popup-promo--com-imagem { max-width: 760px; } .popup-promo--com-imagem.popup-promo--pequena { max-width: 560px; } .popup-promo--com-imagem.popup-promo--grande { max-width: 900px; } .popup-promo__fundo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .popup-promo--imagem-fundo .popup-promo__corpo { position: relative; z-index: 1; } .popup-promo--imagem-fundo .popup-promo__titulo, .popup-promo--imagem-fundo .popup-promo__subtitulo, .popup-promo--imagem-fundo .popup-promo__texto, .popup-promo--imagem-fundo .popup-promo__pequeno { color: #fff; } .popup-promo__fechar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .08); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast); } .popup-promo--imagem-fundo .popup-promo__fechar, .popup-promo--escuro .popup-promo__fechar { background: rgba(255, 255, 255, .18); color: #fff; } .popup-promo__fechar:hover { background: rgba(0, 0, 0, .16); } .popup-promo__fechar svg { width: 18px; height: 18px; } .popup-promo__media { flex: 0 0 42%; align-self: stretch; } .popup-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .popup-promo__corpo { flex: 1 1 auto; padding: 36px 32px; overflow-y: auto; color: var(--popup-cor-texto, var(--color-text)); } .popup-promo__logo { margin-bottom: 16px; } .popup-promo__logo svg, .popup-promo__logo img { height: 32px; width: auto; } .popup-promo__titulo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--popup-cor-titulo, var(--color-primary)); margin: 0 0 8px; } .popup-promo__subtitulo { font-size: 1.02rem; font-weight: 600; margin: 0 0 10px; } .popup-promo__texto { font-size: .94rem; line-height: 1.6; margin: 0 0 18px; } .popup-promo__pequeno { font-size: .76rem; color: var(--color-text-muted); margin: 10px 0 0; } .popup-promo__form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; } .popup-promo__form .field { margin: 0; } .popup-promo__consentimento { align-items: flex-start; font-size: .78rem; line-height: 1.5; } .popup-promo__consentimento a { color: inherit; text-decoration: underline; } .popup-promo__consentimento--erro { color: var(--color-danger); } .popup-promo__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .popup-promo__btn { flex: 1 1 auto; justify-content: center; text-align: center; } .popup-promo--escuro .popup-promo__btn.btn--secondary, .popup-promo--imagem-fundo .popup-promo__btn.btn--secondary { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .4); } .popup-promo .btn--primary.popup-promo__btn { background: var(--popup-cor-botao, var(--color-primary)); border-color: var(--popup-cor-botao, var(--color-primary)); } .popup-promo__sucesso { text-align: center; padding: 20px 0; } .popup-promo__sucesso h2 { font-family: var(--font-display); color: var(--color-primary); margin: 0 0 8px; } @media (max-width: 640px) { .popup-promo-overlay { padding: 0; align-items: flex-end; } .popup-promo, .popup-promo--pequena, .popup-promo--media, .popup-promo--grande, .popup-promo--com-imagem, .popup-promo--com-imagem.popup-promo--pequena, .popup-promo--com-imagem.popup-promo--grande { max-width: 100%; width: 100%; margin: 0 8px 8px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 88vh; } .popup-promo--com-imagem { flex-direction: column; } .popup-promo--com-imagem .popup-promo__media { flex: 0 0 140px; } .popup-promo__corpo { padding: 26px 20px; } } /* Prévia do admin: mesmo renderPopup(), só troca o overlay fixo por um card embutido na tela — nada no site-popup.js precisa saber que é uma prévia. */ .popup-preview-frame { position: relative; min-height: 280px; background: var(--color-bg-soft); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .popup-preview-frame .popup-promo-overlay { position: static; inset: auto; background: none; padding: 0; overflow: visible; z-index: auto; width: 100%; } .popup-preview-frame .popup-promo { max-height: none; }