/* Fontes hospedadas aqui: nada e buscado no Google em tempo de execucao. Pacifico assina a marca; Caveat faz o recado escrito a mao sobre a foto. */ @font-face { font-family: "Pacifico"; src: url("/assets/fontes/pacifico.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Caveat"; src: url("/assets/fontes/caveat.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ===================================================================== DESIGN SYSTEM — tokens centralizados --------------------------------------------------------------------- Fonte unica de cor, espaco, raio, sombra e tipografia da loja publica. Nenhum seletor deve escrever um valor literal: se um numero novo for preciso, ele nasce aqui. Multi-restaurante: os valores abaixo sao o PADRAO. Em tempo de execucao, aplicarIdentidade() sobrescreve --brand-* com o que vier de /api/website (branding.primaryColor / secondaryColor / accentColor), entao o mesmo CSS serve qualquer restaurante. Paleta padrao — Brasileirissimo, Bar e Petiscaria: brasilidade sem virar propaganda de Copa. O verde e institucional e profundo, o dourado e a acao, o creme e o cardapio, e o quase-preto esverdeado sustenta o cabecalho. ===================================================================== */ :root { /* ---- marca ---- */ --brand-primary: #063F2D; /* verde profundo, institucional */ --brand-primary-strong: #07543A; /* hover / estados ativos */ --brand-secondary: #101511; /* quase preto esverdeado */ --brand-secondary-soft: #07140F; /* areas premium, rodape */ --brand-accent: #F2B632; /* dourado: destaque e acao */ --brand-accent-strong: #FFC83D; /* dourado claro, hover */ /* ---- superficies ---- */ --surface: #FFFFFF; /* cards */ --surface-elevated: #FFFDF8; /* resumo do carrinho, realce */ --surface-sunken: #F7F3EA; /* creme: fundo do cardapio */ --surface-dark: #101511; /* cabecalho e hero */ /* ---- texto ---- */ --text-primary: #14180F; --text-secondary: #5F655A; --text-muted: #8A8F84; --text-on-dark: #F4F1E8; --text-on-dark-soft: #C9CFC4; --text-on-accent: #17130A; /* ---- traco ---- */ --border: #E6E0D2; --border-strong: #D3CAB5; --border-dark: #17543E; /* ---- semantica ---- */ --success: #1B7A52; --warning: #B07D12; --danger: #B33B35; --info: #1F5E86; /* azul brasileiro, so em detalhe */ /* ---- espaco (escala de 4) ---- */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ---- raio ---- */ /* Escala de arredondamento mais generosa: o Diego pediu icones e botoes "meio arredondados". Mexer no token propaga para tudo de uma vez, em vez de caçar border-radius espalhado. */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; /* ---- sombra ---- */ --shadow-sm: 0 2px 8px rgba(20, 24, 15, .05); --shadow-md: 0 10px 26px rgba(20, 24, 15, .07); --shadow-lg: 0 20px 50px rgba(20, 24, 15, .12); --shadow-dark: 0 20px 48px rgba(0, 0, 0, .34); /* ---- tipografia ---- */ --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-marca: "Pacifico", Georgia, cursive; /* logotipo e hero */ --font-mao: "Caveat", "Segoe Script", cursive; /* recado sobre a foto */ --font-display: var(--font-marca); --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --weight-normal: 400; --weight-medium: 600; --weight-bold: 750; --weight-black: 850; /* ---- medidas de layout ---- */ --container: 1320px; /* cabe inteiro em 1366 com folga */ --container-gutter: 24px; --header-h: 76px; /* usado no sticky e no carrinho */ --rail-h: 62px; /* trilha de categorias */ --cart-w: 352px; /* ---- movimento ---- */ --ease: cubic-bezier(.2, .7, .3, 1); --fast: .16s var(--ease); } /* Uma janela baixa (1366x768 e o alvo) precisa de um cabecalho menor, senao o cardapio comeca depois da dobra. */ @media (max-height: 800px) { :root { --header-h: 62px; --rail-h: 56px; } } /* --------------------------------------------------------------- CELULAR O /goal pede tipografia maior e cabecalho baixo: no celular o texto nao pode encolher para "caber tudo". A escala sobe um degrau e o cabecalho fica em 60px. --------------------------------------------------------------- */ @media (max-width: 900px) { :root { --container-gutter: 16px; --header-h: 60px; --rail-h: 56px; --text-xs: 12px; --text-sm: 14px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 22px; --text-3xl: 26px; /* Recuos do aparelho (notch e barra inferior do iPhone). */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); /* Altura minima de alvo tocavel. */ --toque: 44px; } } /* ===================================================================== COMPATIBILIDADE — PAINEL E APP DO ENTREGADOR --------------------------------------------------------------------- Estes dois carregam ESTE arquivo, e eu o reescrevi inteiro para a loja. As variaveis que eles usavam e que nao foram recriadas viraram indefinidas: --font-family caiu, e o navegador voltou para a serifada padrao (Times) nas duas telas. Os valores abaixo sao os originais. A loja redefine o que precisa no proprio loja.css, que e carregado depois. ===================================================================== */ :root { /* Tipografia. Sem fonte externa: a pilha do sistema resolve e nao depende de baixar nada. */ --font-family: var(--font-body); --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace; /* Superficies do painel (tema claro). O app do entregador tem a propria paleta escura em --driver-*, definida no driver.css. */ --bg: #F8F9FA; --surface-secondary: #F1F3F5; --surface-tertiary: #E9ECEF; --text-on-primary: #FFFFFF; /* Estados da marca usados em hover e fundo suave. */ --brand-primary-hover: #07543A; --brand-primary-soft: rgba(6, 63, 45, .08); /* Alertas com fundo e contorno proprios. */ --danger-bg: #FEE2E2; --danger-border: #FCA5A5; --radius-full: 9999px; --shadow-float: 0 20px 35px -4px rgba(0, 0, 0, .15), 0 8px 10px -6px rgba(0, 0, 0, .05); --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1); --transition-normal: 250ms cubic-bezier(.4, 0, .2, 1); }