/* ============================================================ Link2shop v2, Design Tokens 8 paletas curadas baseadas no handoff do Claude Design. Cada paleta tem escala 50→600 (brand) + cream + peach + CTA contrastante. Switch via classe no : html.palette-laranja, html.palette-verde, etc. ============================================================ */ :root { --l2s-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Neutros warm (compartilhados em todas as paletas) */ --l2s-ink: #1A1410; --l2s-slate-700: #3B3128; --l2s-slate-500: #6E5F52; --l2s-slate-400: #9C8B7C; --l2s-slate-300: #C9BBAE; --l2s-slate-200: #E8DDD0; --l2s-slate-100: #F4ECE0; /* Acentos quentes (ousados, compartilhados) */ --l2s-coral: #FF7A6B; --l2s-amber: #F8C44A; --l2s-rose: #F8A3B0; --l2s-mint: #8DD3B8; --l2s-lavender: #B6A6E9; /* Sombras */ --l2s-shadow-sm: 0 1px 2px rgba(60, 30, 10, 0.06); --l2s-shadow-md: 0 6px 24px -8px rgba(80, 40, 10, 0.12), 0 2px 6px rgba(80, 40, 10, 0.05); --l2s-shadow-lg: 0 24px 48px -16px rgba(80, 40, 10, 0.18), 0 4px 12px rgba(80, 40, 10, 0.06); /* Radius */ --l2s-r-sm: 10px; --l2s-r-md: 16px; --l2s-r-lg: 22px; --l2s-r-xl: 28px; --l2s-r-2xl: 36px; /* ============================================================ EDGE LAYOUT v2.0 (2026-06-20, calderon) Sistema NEUTRO estilo iFood: preto/cinza/branco. A identidade da loja vem da LOGO, não da cor. O verde fica reservado pro CTA (Comprar) e pros descontos/ativo. A "cor da marca" (--l2s-brand-*) virou uma rampa neutra de cinzas, então qualquer brand_color que a loja tenha renderiza neutro. ============================================================ */ --l2s-brand-600: #17131F; /* ink forte, texto/acento/seleção */ --l2s-brand-500: #2A2533; /* acento ativo */ --l2s-brand-400: #6B6675; /* cinza médio */ --l2s-brand-300: #9A95A3; /* cinza */ --l2s-brand-200: #D9D7DD; /* borda/cinza claro */ --l2s-brand-100: #EFEEF1; /* fill bem claro / linha */ --l2s-brand-50: #F7F7F8; /* fundo suave */ --l2s-cream: #FFFFFF; /* fundo branco limpo */ --l2s-peach: #EFEEF1; --l2s-shadow-brand: 0 12px 32px -10px rgba(23, 19, 31, 0.18); /* CTA e desconto/ativo continuam VERDE (meio de pagamento / vender) */ --l2s-cta: #1F8A56; --l2s-cta-top: #2EAA6E; --l2s-shadow-cta: 0 12px 32px -10px rgba(46, 170, 110, 0.40); } /* Todas as paletas antigas colapsam no sistema neutro Edge. Mantidas só pra não quebrar o JS que adiciona html.palette-X. */ html.palette-laranja, html.palette-coral, html.palette-rosa, html.palette-roxo, html.palette-verde, html.palette-azul, html.palette-preto, html.palette-terracota { --l2s-brand-600: #17131F; --l2s-brand-500: #2A2533; --l2s-brand-400: #6B6675; --l2s-brand-300: #9A95A3; --l2s-brand-200: #D9D7DD; --l2s-brand-100: #EFEEF1; --l2s-brand-50: #F7F7F8; --l2s-cream: #FFFFFF; --l2s-peach: #EFEEF1; --l2s-shadow-brand: 0 12px 32px -10px rgba(23, 19, 31, 0.18); --l2s-cta: #1F8A56; --l2s-cta-top: #2EAA6E; --l2s-shadow-cta: 0 12px 32px -10px rgba(46, 170, 110, 0.40); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--l2s-font); color: var(--l2s-ink); background: var(--l2s-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Botão CTA (cor contrastante da paleta) */ .l2s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border: none; border-radius: 999px; background: linear-gradient(180deg, var(--l2s-cta-top) 0%, var(--l2s-cta) 100%); color: white; font-family: var(--l2s-font); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; cursor: pointer; box-shadow: var(--l2s-shadow-cta); transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; } .l2s-btn:hover { transform: translateY(-1px); filter: brightness(1.03); } .l2s-btn:active { transform: translateY(0); filter: brightness(0.97); } .l2s-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .l2s-btn-ghost { background: white; color: var(--l2s-ink); box-shadow: var(--l2s-shadow-sm); border: 1px solid var(--l2s-slate-200); } /* iOS Safari, prevenir zoom automático ao focar input. Quando font-size < 16px, iOS faz zoom. Forçando 16px global em telas pequenas. */ @media (max-width: 600px) { input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; } } /* Input */ .l2s-input { width: 100%; height: 52px; padding: 0 18px; border-radius: var(--l2s-r-md); border: 1.5px solid var(--l2s-slate-200); background: white; font-family: var(--l2s-font); font-size: 16px; color: var(--l2s-ink); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .l2s-input::placeholder { color: var(--l2s-slate-400); } .l2s-input:focus { border-color: var(--l2s-brand-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--l2s-brand-500) 15%, transparent); } /* Eyebrow */ .l2s-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l2s-slate-500); } /* Scroll fino */ .l2s-scroll::-webkit-scrollbar { width: 0; height: 0; } .l2s-scroll { scrollbar-width: none; } /* Animações */ @keyframes l2s-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes l2s-slide-up { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes l2s-slide-down { 0% { transform: translateX(-50%) translateY(-12px); opacity: 0; } 100% { transform: translateX(-50%) translateY(0); opacity: 1; } } @keyframes l2s-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Toast */ .l2s-toast { position: fixed; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 9999; padding: 12px 18px; background: var(--l2s-ink); color: white; border-radius: 999px; font-weight: 600; font-size: 13px; box-shadow: var(--l2s-shadow-lg); animation: l2s-slide-down 220ms ease both; max-width: calc(100vw - 44px); } .l2s-toast.success { background: var(--l2s-cta); } .l2s-toast.error { background: var(--l2s-coral); } /* ============================================================ Typography v2, mais leve (padrão iFood-like) Cravado pelo calderon em 2026-05-08, baseado em UX research: pesos 800 em todo lugar gritam "varejo descontão". Aqui usamos 700 em títulos, 600 em seções, 400 em corpo, e mantém 800 SÓ onde queremos peso (preços e CTAs). ============================================================ */ /* Body / paragraph default mais leve */ body, p { font-weight: 400; } /* Headings, todos 700 (era 800) */ h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; } /* Seções de página com pesos suavizados */ .vit-head .nm-row { font-weight: 700; } .ord-card .nm { font-weight: 600; } .account-head .nm { font-weight: 700; } .checkout-summary .nm { font-weight: 600; } .score-card .num { font-weight: 700; } /* Tab bar ativo, peso médio (era 700) */ .tab-bar button.active .lbl { font-weight: 600; } /* Manter peso em preços e elementos de venda (são pontos focais) */ .l2s-price, .ord-card .pr, .checkout-summary .pr, .score-card .delta, .vit-head .preco, [data-emphasis="price"] { font-weight: 800; } /* CTA principais permanecem com peso de comando */ .l2s-btn { font-weight: 700; } /* Eyebrows e badges mantêm 700 caps (categoria de label) */ .l2s-eyebrow, .l2s-badge { font-weight: 700; letter-spacing: 0.1em; }