/* ============================================================ SANTIAGO BARBEARIA — design system Tokens + reset + componentes base usados em todo o sistema. ============================================================ */ :root { /* superfícies */ --preto: #0A0A0A; --grafite-1: #121212; --grafite-2: #1A1A1A; --grafite-3: #242424; /* identidade */ --dourado: #C9A84C; --dourado-claro: #E8C96B; --dourado-escuro: #8B6914; --linha: rgba(201, 168, 76, 0.14); --linha-forte: rgba(201, 168, 76, 0.35); /* texto */ --creme: #F5F0E8; --creme-70: rgba(245, 240, 232, 0.7); --creme-45: rgba(245, 240, 232, 0.45); --creme-25: rgba(245, 240, 232, 0.25); --linha-neutra: rgba(245, 240, 232, 0.1); /* feedback (dessaturados para não brigar com o dourado) */ --ok: #6F8F5A; --atencao: #C98A3D; --erro: #B3544E; --info: #5B7C99; /* tipografia */ --f-titulo: 'Fraunces', Georgia, serif; --f-texto: 'Inter', system-ui, -apple-system, sans-serif; /* escala de espaçamento (base 4px) */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --raio: 2px; --transicao: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); --sombra: 0 18px 50px var(--sombra-cor); /* ---- tokens de tema (o painel usa ESTES; o site público usa os de cima) ---- Aqui valem os valores do tema escuro, iguais aos de sempre: sem o atributo data-tema no nada muda em lugar nenhum. Regra que não pode ser quebrada: --preto e --dourado NÃO viram tokens de tema. Os dois são tinta sobre ouro (ex.: .btn é texto --preto sobre fundo --dourado); trocá-los no claro deixaria o rótulo do botão ilegível. */ --fundo: var(--preto); --superficie: var(--grafite-1); --superficie-alta: var(--grafite-2); --superficie-baixa: var(--grafite-3); --superficie-nav: linear-gradient(180deg, #111110, #0C0C0B); --superficie-vidro: rgba(10, 10, 10, 0.82); --texto: var(--creme); --texto-medio: rgba(245, 240, 232, 0.7); --texto-suave: rgba(245, 240, 232, 0.45); --texto-fraco: rgba(245, 240, 232, 0.25); --ouro-texto: var(--dourado); /* todo texto dourado */ --ouro-linha: var(--dourado); /* contorno */ --ouro-hover: var(--dourado-claro); --borda: var(--linha); --borda-forte: var(--linha-forte); --borda-neutra: rgba(245, 240, 232, 0.1); --borda-campo: rgba(245, 240, 232, 0.1); --tint-hover: rgba(201, 168, 76, 0.05); --tint-selecao: rgba(201, 168, 76, 0.08); --tint-ativo: rgba(201, 168, 76, 0.12); --foco-halo: rgba(201, 168, 76, 0.12); --ok-texto: #8FAE7C; --atencao-texto: #D9A45F; --erro-texto: #C87670; --scrim: rgba(10, 10, 10, 0.88); --hachura: rgba(0, 0, 0, 0.35); --sombra-cor: rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ---------- tema claro (só o painel; o site público nunca recebe o atributo) ---------- Papel creme e ouro velho, não branco de escritório: continua sendo a Santiago. Os tons de ouro escurecem porque #C9A84C sobre papel dá 2:1 e some. */ :root[data-tema="claro"] { --fundo: #F4F1E9; --superficie: #FCFAF6; --superficie-alta: #FFFFFF; --superficie-baixa: #E7E1D3; --superficie-nav: linear-gradient(180deg, #FFFFFF, #F8F5EE); --superficie-vidro: rgba(252, 250, 246, 0.86); --texto: #1B1712; --texto-medio: rgba(27, 23, 18, 0.78); --texto-suave: rgba(27, 23, 18, 0.64); --texto-fraco: rgba(27, 23, 18, 0.42); --ouro-texto: #7A5C11; --ouro-linha: #8B6914; --ouro-hover: #B08F30; --borda: rgba(139, 105, 20, 0.24); --borda-forte: rgba(139, 105, 20, 0.48); --borda-neutra: rgba(27, 23, 18, 0.16); --borda-campo: rgba(27, 23, 18, 0.5); --tint-hover: rgba(139, 105, 20, 0.07); --tint-selecao: rgba(139, 105, 20, 0.11); --tint-ativo: rgba(139, 105, 20, 0.15); --foco-halo: rgba(139, 105, 20, 0.22); --ok-texto: #4A6338; --atencao-texto: #85551A; --erro-texto: #8C3A34; --scrim: rgba(10, 10, 10, 0.45); --hachura: rgba(27, 23, 18, 0.12); --sombra-cor: rgba(27, 23, 18, 0.16); color-scheme: light; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--fundo); color: var(--texto); font-family: var(--f-texto); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--dourado); color: var(--preto); } :focus-visible { outline: 1px solid var(--ouro-linha); outline-offset: 2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--fundo); } ::-webkit-scrollbar-thumb { background: var(--grafite-3); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #333; } /* ---------- tipografia ---------- */ .titulo { font-family: var(--f-titulo); font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; } .etiqueta { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-suave); } .etiqueta--ouro { color: var(--ouro-texto); } .preco { font-family: var(--f-titulo); color: var(--ouro-texto); font-weight: 400; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); } /* ---------- divisor fino ---------- */ .divisor { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--dourado), transparent); border: none; } /* cantos ornamentais em L (usar com moderação: 2-3 por página) */ .cantos { position: relative; } .cantos::before, .cantos::after { content: ''; position: absolute; width: 22px; height: 22px; border: 1px solid var(--linha-forte); pointer-events: none; } .cantos::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .cantos::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0.8rem 1.7rem; background: var(--dourado); color: var(--preto); border: 1px solid var(--dourado); border-radius: var(--raio); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--transicao), color var(--transicao), border-color var(--transicao), box-shadow var(--transicao), opacity var(--transicao); white-space: nowrap; } .btn:hover { background: var(--dourado-claro); border-color: var(--dourado-claro); } .btn--linha { background: transparent; color: var(--ouro-texto); } .btn--linha:hover { background: var(--dourado); color: var(--preto); border-color: var(--dourado); } .btn--fantasma { background: transparent; color: var(--texto-medio); border-color: var(--borda-neutra); } .btn--fantasma:hover { background: transparent; color: var(--texto); border-color: var(--texto-suave); } .btn--perigo { background: transparent; color: var(--erro); border-color: rgba(179, 84, 78, 0.45); } .btn--perigo:hover { background: var(--erro); color: var(--texto); border-color: var(--erro); } .btn--mini { padding: 0.45rem 0.9rem; font-size: 0.63rem; } .btn--largo { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* ---------- formulários ---------- */ .rotulo { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--s2); } .campo { width: 100%; background: var(--superficie); border: 1px solid var(--borda-campo); border-radius: var(--raio); color: var(--texto); font-size: 0.9rem; padding: 0.7rem 0.9rem; transition: border-color var(--transicao), box-shadow var(--transicao); } .campo::placeholder { color: var(--texto-fraco); } .campo:focus { outline: none; border-color: var(--ouro-linha); box-shadow: 0 0 0 3px var(--foco-halo); } select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--creme-45) 50%), linear-gradient(135deg, var(--creme-45) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; } textarea.campo { resize: vertical; min-height: 90px; } .grupo-campo { margin-bottom: var(--s4); } .dica { font-size: 0.72rem; color: var(--texto-suave); margin-top: var(--s1); } .erro-campo { font-size: 0.74rem; color: var(--erro); margin-top: var(--s1); } /* ---------- cartões ---------- */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .cartao--hover:hover { border-color: var(--borda-forte); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(201, 168, 76, 0.06); } .cartao--selecionado { border-color: var(--ouro-linha); background: var(--tint-selecao); box-shadow: 0 0 0 1px var(--ouro-linha), 0 12px 32px var(--tint-ativo); } /* ---------- selos de status ---------- */ .selo { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: var(--raio); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid; white-space: nowrap; } .selo--ouro { color: var(--ouro-texto); border-color: rgba(201, 168, 76, 0.4); background: rgba(201, 168, 76, 0.07); } .selo--ok { color: var(--ok-texto); border-color: rgba(111, 143, 90, 0.45); background: rgba(111, 143, 90, 0.08); } .selo--atencao { color: var(--atencao-texto); border-color: rgba(201, 138, 61, 0.45); background: rgba(201, 138, 61, 0.08); } .selo--erro { color: var(--erro-texto); border-color: rgba(179, 84, 78, 0.45); background: rgba(179, 84, 78, 0.08); } .selo--neutro { color: var(--texto-suave); border-color: var(--borda-neutra); background: rgba(245, 240, 232, 0.03); } .selo--info { color: #7FA3C4; border-color: rgba(91, 124, 153, 0.5); background: rgba(91, 124, 153, 0.1); } /* ---------- tabela ---------- */ .tabela-envolto { overflow-x: auto; } .tabela { width: 100%; border-collapse: collapse; } .tabela th { text-align: left; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-suave); padding: 0.8rem 1rem; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela td { padding: 0.85rem 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--borda-neutra); vertical-align: middle; } .tabela tbody tr { transition: background var(--transicao); } .tabela tbody tr:hover { background: rgba(201, 168, 76, 0.025); } /* ---------- abas ---------- */ .abas { display: flex; gap: var(--s5); border-bottom: 1px solid var(--borda); } .aba { background: none; border: none; border-bottom: 1px solid transparent; margin-bottom: -1px; padding: 0.7rem 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-suave); transition: color var(--transicao), border-color var(--transicao); } .aba:hover { color: var(--texto-medio); } .aba.ativa { color: var(--ouro-texto); border-bottom-color: var(--ouro-linha); } /* ---------- modal ---------- */ .modal { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: var(--s6) var(--s4); z-index: 90; overflow-y: auto; } .modal.aberto { display: flex; } .modal-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); width: 100%; max-width: 540px; padding: var(--s6); margin: auto 0; animation: modal-sobe 0.3s ease; } .modal-caixa--larga { max-width: 720px; } @keyframes modal-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); } .modal-fechar { background: none; border: none; color: var(--texto-suave); font-size: 1.1rem; line-height: 1; padding: var(--s1); transition: color var(--transicao); } .modal-fechar:hover { color: var(--texto); } /* ---------- toasts ---------- */ .toasts { position: fixed; bottom: var(--s5); right: var(--s5); display: flex; flex-direction: column; gap: var(--s3); z-index: 120; max-width: min(380px, calc(100vw - 2rem)); } .toast { background: var(--superficie-alta); border: 1px solid var(--borda); border-left: 2px solid var(--dourado); border-radius: var(--raio); padding: var(--s4) var(--s5); box-shadow: var(--sombra); font-size: 0.84rem; color: var(--texto-medio); animation: toast-entra 0.35s ease; } .toast strong { color: var(--texto); font-weight: 500; } .toast--ok { border-left-color: var(--ok); } .toast--erro { border-left-color: var(--erro); } .toast--atencao { border-left-color: var(--atencao); } .toast-acoes { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; } @keyframes toast-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } /* ---------- skeleton / vazio ---------- */ .skeleton { background: linear-gradient(100deg, var(--grafite-2) 40%, var(--grafite-3) 50%, var(--grafite-2) 60%); background-size: 200% 100%; animation: brilho 1.4s infinite linear; border-radius: var(--raio); min-height: 1rem; } @keyframes brilho { from { background-position: 130% 0; } to { background-position: -30% 0; } } .vazio { text-align: center; color: var(--texto-suave); font-size: 0.85rem; padding: var(--s7) var(--s4); } .vazio .titulo { font-size: 1.05rem; color: var(--texto-medio); margin-bottom: var(--s2); } .erro-carga { text-align: center; padding: var(--s7) var(--s4); color: var(--texto-suave); font-size: 0.85rem; } .erro-carga .btn { margin-top: var(--s4); } /* ---------- avatar/monograma ---------- */ .monograma { display: flex; align-items: center; justify-content: center; background: var(--tint-selecao); border: 1px solid var(--borda); color: var(--ouro-texto); font-family: var(--f-titulo); border-radius: 50%; overflow: hidden; flex-shrink: 0; } .monograma img { width: 100%; height: 100%; object-fit: cover; } /* ---------- utilidades ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .texto-suave { color: var(--texto-suave); } .texto-medio { color: var(--texto-medio); } .ouro { color: var(--dourado); } /* ---------- recortador de foto ---------- */ /* Fica aqui (e não em admin.css) porque todas as páginas linkam tokens.css: as outras telas de foto ligam o recortador sem tocar no HTML delas. */ .recorte { /* Ilha sempre escura, nos dois temas: o véu preto é o que faz o recorte saltar, e a foto precisa ser julgada contra fundo neutro. Os tokens são redeclarados aqui dentro (herdam para os filhos) porque no tema claro o texto viraria escuro sobre este fundo escuro e sumiria. */ --texto: #F5F0E8; --texto-medio: rgba(245, 240, 232, 0.7); --texto-suave: rgba(245, 240, 232, 0.45); --texto-fraco: rgba(245, 240, 232, 0.25); --ouro-texto: #C9A84C; --borda-neutra: rgba(245, 240, 232, 0.1); --superficie-baixa: #242424; color: var(--texto); position: fixed; inset: 0; z-index: 100; /* acima do .modal (90), abaixo dos toasts (120) */ display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, 0.94); backdrop-filter: blur(4px); } .recorte-topo { flex-shrink: 0; text-align: center; } .recorte-topo .titulo { font-size: 1.3rem; } .recorte-dica { color: var(--texto-suave); font-size: 0.82rem; margin-top: var(--s2); max-width: 30rem; margin-inline: auto; } .recorte-palco { flex: 1; position: relative; overflow: hidden; min-height: 180px; touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; cursor: grab; } .recorte-palco.arrastando { cursor: grabbing; } .recorte-palco:focus-visible { outline: 1px solid var(--dourado); outline-offset: -2px; } .recorte-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; /* o reset global é img { max-width: 100% } — sem anular aqui a foto é espremida e a prévia passa a MENTIR sobre o que vai ser cortado */ max-width: none; -webkit-user-drag: none; } .recorte-quadro { position: absolute; pointer-events: none; border: 1px solid var(--dourado); /* véu por fora do quadro: o resto da foto continua visível para a pessoa se localizar enquanto arrasta */ box-shadow: 0 0 0 9999px rgba(10, 10, 10, 0.74); } .recorte-quadro--redondo { border-radius: 50%; } .recorte-controles { flex-shrink: 0; text-align: center; } .recorte-zoom { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; } .recorte-passo { width: 48px; height: 48px; flex-shrink: 0; background: none; border: 1px solid var(--borda-campo); border-radius: var(--raio); color: var(--texto-medio); font-size: 1.2rem; line-height: 1; } .recorte-passo:hover { border-color: var(--dourado); color: var(--dourado); } .recorte-faixa { flex: 1; min-width: 0; appearance: none; background: none; height: 28px; } .recorte-faixa::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--grafite-3); } .recorte-faixa::-moz-range-track { height: 4px; border-radius: 2px; background: var(--grafite-3); } .recorte-faixa::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--dourado); border: none; } .recorte-faixa::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--dourado); border: none; } .recorte-faixa:focus-visible { outline: 1px solid var(--dourado); outline-offset: 4px; } .recorte-aviso { color: var(--atencao); font-size: 0.76rem; margin-bottom: var(--s2); } .recorte-acoes { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .recorte-acoes .btn { min-height: 52px; } @media (min-width: 700px) { .recorte { padding: var(--s6); } .recorte-acoes { grid-template-columns: auto auto; justify-content: flex-end; } .recorte-acoes .btn { min-width: 170px; } .recorte-zoom { max-width: 460px; margin-inline: auto; } }