/* ============================================================ ALPHA STORE — DESIGN SYSTEM (Fase 0) Estilo premium "Apple-like": fundo escuro, tipografia grande, cantos arredondados, sombras suaves e azul elétrico da logo. >>> PARA TROCAR A COR DA MARCA: mude apenas --accent abaixo. Todo o site usa essa variável. Não precisa mexer em mais nada. ============================================================ */ /* Esconde qualquer elemento com a classe .hidden (usado pelas guardas de login) */ .hidden { display: none !important; } :root { /* ---------- CORES ---------- */ --bg: #0a0a0a; /* fundo escuro premium */ --bg-elev: #0f0f10; /* fundo levemente elevado */ --surface: #141414; /* cartões */ --surface-2: #1c1c1e; /* cartões em hover / inputs */ --text: #f5f5f7; /* texto principal */ --text-muted: #a1a1a6; /* texto secundário */ --text-dim: #6e6e73; /* texto terciário */ --accent: #0a84ff; /* <<< COR DA LOGO (azul Alpha Store) */ --accent-hover: #3b9dff; --accent-deep: #1d6fe8; /* azul mais profundo (gradientes) */ --accent-soft: rgba(10, 132, 255, .12); --accent-glow: rgba(10, 132, 255, .45); --success: #30d158; --warning: #ffd60a; --danger: #ff453a; --info: #64d2ff; --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16); /* ---------- FORMA ---------- */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow: 0 20px 60px rgba(0, 0, 0, .35); --shadow-sm: 0 4px 16px rgba(0, 0, 0, .28); --shadow-accent: 0 12px 40px rgba(10, 132, 255, .28); /* ---------- TIPOGRAFIA ---------- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; /* ---------- LAYOUT ---------- */ --max: 1200px; --header-h: 64px; --gap: 20px; /* ---------- MOVIMENTO ---------- */ --ease: cubic-bezier(.16, 1, .3, 1); /* easing suave estilo Apple */ --fast: .2s var(--ease); --slow: .6s var(--ease); } /* Tema claro opcional (adicione class="light" no ) */ html.light { --bg: #ffffff; --bg-elev: #f5f5f7; --surface: #ffffff; --surface-2: #f0f0f2; --text: #1d1d1f; --text-muted: #515154; --text-dim: #86868b; --border: rgba(0, 0, 0, .1); --border-strong: rgba(0, 0, 0, .18); --shadow: 0 20px 60px rgba(0, 0, 0, .12); } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: #fff; } /* Scrollbar discreta */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ============================================================ TIPOGRAFIA ============================================================ */ .display { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; } h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; } h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; letter-spacing: -.01em; } .lead { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-muted); } .muted { color: var(--text-muted); } .dim { color: var(--text-dim); } .small { font-size: .85rem; } .tiny { font-size: .75rem; } .eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } /* Texto com gradiente da marca (igual "STORE" da logo) */ .text-accent { color: var(--accent); } .text-gradient { background: linear-gradient(100deg, var(--text) 0%, var(--text) 35%, var(--accent) 65%, var(--accent-hover) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; } .section { padding: clamp(56px, 9vw, 120px) 0; } .section-head { max-width: 720px; margin-bottom: clamp(28px, 5vw, 56px); } .section-head h2 { margin: 10px 0 12px; } .stack { display: flex; flex-direction: column; gap: var(--gap); } .row { display: flex; align-items: center; gap: 12px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wrap { flex-wrap: wrap; } .center { text-align: center; } .spacer { flex: 1; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* ============================================================ BOTÕES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: transform var(--fast), background var(--fast), box-shadow var(--fast), border-color var(--fast), opacity var(--fast); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.98); } .btn:disabled { opacity: .45; pointer-events: none; } .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; box-shadow: var(--shadow-accent); } .btn-primary:hover { box-shadow: 0 16px 48px var(--accent-glow); } .btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface); border-color: var(--border-strong); } .btn-outline { border-color: var(--accent); color: var(--accent); background: transparent; } .btn-outline:hover { background: var(--accent-soft); } .btn-whatsapp { background: #25d366; color: #06301a; } .btn-whatsapp:hover { box-shadow: 0 14px 40px rgba(37, 211, 102, .35); } .btn-danger { background: var(--danger); color: #fff; } .btn-sm { padding: 9px 16px; font-size: .82rem; } .btn-lg { padding: 16px 34px; font-size: 1.02rem; } .btn-block { width: 100%; } /* Botão flutuante de WhatsApp (usado no site todo) */ .fab-whatsapp { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, .4); z-index: 90; transition: transform var(--fast); } .fab-whatsapp:hover { transform: scale(1.08); } /* ============================================================ CARTÕES / SUPERFÍCIES ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); transition: transform var(--slow), border-color var(--fast), box-shadow var(--slow); } .card-hover:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); } .glass { background: rgba(20, 20, 20, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--border); } /* Cartão de produto da vitrine */ .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--slow), box-shadow var(--slow), border-color var(--fast); } .product-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow); } .product-media { position: relative; aspect-ratio: 1 / 1; background: var(--bg-elev); overflow: hidden; } .product-media img, .product-media video { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); } .product-card:hover .product-media img { transform: scale(1.06); } .product-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product-name { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; } .product-price { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; } .product-resale { font-size: .78rem; color: var(--accent); font-weight: 600; } /* Etiquetas sobre a foto do produto (Destaque, Esgotado) */ .product-tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; } /* Produto ainda sem foto cadastrada */ .sem-foto { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; font-weight: 700; color: var(--text-dim); background: linear-gradient(135deg, var(--surface-2), var(--bg-elev)); } /* ============================================================ CHIPS (barra de filtro por categoria) ============================================================ */ .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; padding: 9px 17px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .85rem; font-weight: 600; white-space: nowrap; transition: background var(--fast), color var(--fast), border-color var(--fast); } .chip:hover { border-color: var(--border-strong); color: var(--text); } .chip.ativo { background: var(--accent); color: #fff; border-color: transparent; } /* Campo de busca da vitrine */ .busca { position: relative; flex: 1; min-width: 200px; } .busca .input { padding-left: 40px; } .busca::before { content: "⌕"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 1.1rem; pointer-events: none; } /* ============================================================ BADGES / PILLS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 600; letter-spacing: .02em; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .badge-success { background: rgba(48, 209, 88, .14); color: var(--success); border-color: transparent; } .badge-warning { background: rgba(255, 214, 10, .14); color: var(--warning); border-color: transparent; } .badge-danger { background: rgba(255, 69, 58, .14); color: var(--danger); border-color: transparent; } .badge-info { background: rgba(100, 210, 255, .14); color: var(--info); border-color: transparent; } /* ============================================================ FORMULÁRIOS ============================================================ */ .field { display: flex; flex-direction: column; gap: 7px; } .label { font-size: .82rem; font-weight: 600; color: var(--text-muted); } .input, .select, .textarea { width: 100%; padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); transition: border-color var(--fast), box-shadow var(--fast), background var(--fast); } .input::placeholder, .textarea::placeholder { color: var(--text-dim); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .textarea { min-height: 110px; resize: vertical; } .select { appearance: none; cursor: pointer; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .field-error { color: var(--danger); font-size: .78rem; } /* ============================================================ HEADER / NAV ============================================================ */ .header { position: sticky; top: 0; z-index: 80; /* Área segura do topo: quando o site vira app, o iPhone tem o relógio/notch em cima. Sem isso o menu fica embaixo da barra. */ padding-top: env(safe-area-inset-top, 0px); min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; background: rgba(10, 10, 10, .7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } /* Instalado como app: um respiro a mais e nada de seleção acidental */ @media (display-mode: standalone) { .header { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); } .nav a, .nav button { padding: 6px 0; } /* alvo de toque maior */ } /* Laterais e base seguras (iPhone com barra de gestos) */ .header .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .fab-whatsapp { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .header .container { display: flex; align-items: center; gap: 18px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; } .logo img { height: 26px; width: auto; display: block; } @media (max-width: 640px) { .logo img { height: 21px; } } .nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } .nav a { font-size: .9rem; color: var(--text-muted); transition: color var(--fast); } .nav a:hover, .nav a.active { color: var(--text); } /* Celular: menu enxuto, sem atropelar a logo */ @media (max-width: 700px) { .header .container { gap: 10px; } .nav { gap: 14px; } .nav a, .nav button { font-size: .8rem; } .nav .nav-esconde-celular { display: none; } /* "Revender" some no celular */ .nav-instalar span { display: none; } } .cart-btn { position: relative; } .cart-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700; } .footer { border-top: 1px solid var(--border); padding: 44px 0; color: var(--text-dim); font-size: .85rem; } /* ============================================================ TABELAS (admin/sócio) ============================================================ */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th, .table td { padding: 13px 16px; text-align: left; white-space: nowrap; } .table th { background: var(--surface-2); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .table tbody tr { border-top: 1px solid var(--border); transition: background var(--fast); } .table tbody tr:hover { background: var(--surface-2); } /* ============================================================ TOASTS ============================================================ */ .toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 200; width: min(420px, calc(100% - 32px)); } .toast { padding: 13px 18px; border-radius: var(--radius-sm); background: var(--surface-2); bo