/* ========================================================================== UNITY BARBEARIA — base.css Tokens de design (tema claro/escuro), reset e componentes compartilhados Paleta: preto, cinza e branco — minimalista, conforme a marca. ========================================================================== */ /* ---------- Tema escuro (padrão) ---------- */ :root, :root[data-theme="dark"] { --bg: #101010; --bg-2: #171717; --surface: #1d1d1d; --surface-2: #262626; --ink: #f2f2ef; /* texto principal */ --ink-2: #c2c2bd; /* texto secundário */ --muted: #8c8c87; /* texto de apoio */ --faint: #4c4c48; /* desabilitado */ --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.22); --stripe: rgba(255, 255, 255, 0.13); --chart-bar: #b08600; /* dourado — validado sobre --surface escuro */ --chart-bar-ink: #101010; /* texto legível sobre o dourado */ --ok: #7da05e; --danger: #c0564a; --shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --grain-opacity: 0.05; } /* ---------- Tema claro ---------- */ :root[data-theme="light"] { --bg: #f7f7f5; --bg-2: #efefec; --surface: #ffffff; --surface-2: #f3f3f0; --ink: #161616; --ink-2: #454542; --muted: #75756f; --faint: #c9c9c4; --line: rgba(20, 20, 20, 0.1); --line-strong: rgba(20, 20, 20, 0.26); --stripe: rgba(20, 20, 20, 0.14); --chart-bar: #9c7a00; /* dourado — validado sobre --surface claro */ --chart-bar-ink: #ffffff; /* texto legível sobre o dourado */ --ok: #5c8442; --danger: #b04437; --shadow: 0 12px 36px rgba(20, 20, 20, 0.12); --grain-opacity: 0.035; } :root { /* Tipografia */ --font-display: "Alfa Slab One", "Rockwell", "Georgia", serif; --font-label: "Oswald", "Arial Narrow", sans-serif; --font-body: "Archivo", "Helvetica Neue", sans-serif; /* Ritmo */ --radius: 10px; --radius-sm: 6px; --pad: clamp(1rem, 4vw, 2rem); --section: clamp(4rem, 10vw, 7.5rem); /* Altura do cabeçalho sticky e do botão flutuante do WhatsApp. Os dois flutuam por cima do conteúdo, então toda rolagem precisa descontá-los para não entregar o alvo cortado. O JS remede --header-h no load e a cada resize (o logo e o menu mudam de altura entre breakpoints); os valores abaixo são só o palpite inicial, válido até o primeiro frame. */ --header-h: 74px; --fab-h: 56px; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Remove o realce cinza/retangular que o navegador mobile pisca ao tocar em botões e links — em elementos estilizados (e girados, como o botão de tema) ele aparecia como um "losango" por uma fração de segundo. */ * { -webkit-tap-highlight-color: transparent; } /* O atributo hidden sempre vence qualquer display definido em classe (sem isto, .login-screen { display:grid } manteria a tela visível) */ [hidden] { display: none !important; } /* scroll-padding reserva, dentro da própria viewport de rolagem, o espaço coberto pelo cabeçalho e pelo botão do WhatsApp. Vale para TUDO que rola até um alvo — links de âncora do menu e scrollIntoView() do wizard —, então nenhum título nasce mais escondido atrás do header. */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 0.75rem); scroll-padding-bottom: calc(var(--fab-h) + 1.5rem); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Troca de tema instantânea. As cores de tudo saem dos mesmos tokens, então trocar o tema disparava de uma vez as transições de hover espalhadas pelo site (`all 0.2s`, `background 0.25s`...). Cada elemento chegava na cor nova num instante diferente — 219ms o botão, 252ms o cabeçalho, 269ms o body — e esse escalonamento é que dava a sensação de atraso. theme.js pendura esta classe no só durante a troca. Não afeta `animation`, então as faixas do poste continuam girando. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4, p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--ink-2); } ::selection { background: var(--ink); color: var(--bg); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* Grão de impressão sobre toda a página */ body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } /* ---------- Logo por tema ---------- */ :root[data-theme="dark"] .only-light { display: none; } :root[data-theme="light"] .only-dark { display: none; } .logo { display: inline-flex; align-items: center; } .logo-img { height: 46px; width: auto; } /* ---------- Botão de tema ---------- */ .theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-2); transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } /* só gira onde há mouse de verdade — no toque, o :hover fica "preso" e a rotação faz o realce de toque aparecer torto (losango) no celular */ @media (hover: hover) and (pointer: fine) { .theme-toggle:hover { color: var(--ink); border-color: var(--ink); transform: rotate(15deg); } } .theme-toggle svg { width: 17px; height: 17px; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="light"] .icon-sun { display: none; } /* ---------- Tipos utilitários ---------- */ .display { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; } .eyebrow { font-family: var(--font-label); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .label { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } /* ---------- Container ---------- */ .container { width: min(1120px, 100% - 2 * var(--pad)); margin-inline: auto; } /* ---------- Listra do poste de barbeiro (versão monocromática) ---------- */ .pole-stripe { height: 10px; background: repeating-linear-gradient( -45deg, var(--stripe) 0 12px, transparent 12px 24px ); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ---------- Variante viva: o poste girando ---------- Azul, branco e vermelho do poste clássico, em movimento. Hoje aplicada nas duas faixas da home; fica como modificador para dar ou tirar de uma delas sem mexer no CSS — é só a classe no HTML. A ilusão de giro vem de deslocar a faixa na horizontal por exatamente um período do padrão — aí o quadro final é idêntico ao inicial e o loop não tem emenda. Com listras de 12px medidas perpendicularmente e a sequência azul/branco/vermelho/branco, o período perpendicular é 48px; inclinado a -45°, o período na horizontal é 48 × √2 ≈ 67.88px. Anda para a DIREITA, ao contrário do letreiro (.marquee-track), que corre para a esquerda. O movimento fica num ::before em vez do background da faixa: translate é composto na GPU, enquanto animar background-position repinta a cada quadro. */ .pole-stripe--spin { --pole-period: 67.88px; --pole-blue: #0a2bd4; --pole-red: #fe0000; --pole-white: #ffffff; position: relative; overflow: hidden; background: none; /* quem pinta agora é o ::before */ } .pole-stripe--spin::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; /* um período a mais de largura: enquanto desliza, a sobra cobre a ponta que ficaria vazia no fim do percurso */ width: calc(100% + var(--pole-period)); background: repeating-linear-gradient( -45deg, var(--pole-blue) 0 12px, var(--pole-white) 12px 24px, var(--pole-red) 24px 36px, var(--pole-white) 36px 48px ); animation: pole-slide 2.4s linear infinite; will-change: transform; } @keyframes pole-slide { from { transform: translateX(calc(-1 * var(--pole-period))); } to { transform: translateX(0); } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.8rem; font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; border-radius: var(--radius-sm); border: 1px solid transparent; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--ink); color: var(--bg); } .btn-solid:hover { opacity: 0.85; color: var(--bg); } .btn-ghost { border-color: var(--line-strong); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-danger { border-color: transparent; color: var(--danger); } .btn-danger:hover { border-color: var(--danger); } .btn-ok { border-color: var(--ok); color: var(--ok); } .btn-ok:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.72rem; } .btn[disabled] { opacity: 0.35; cursor: not-allowed; } /* ---------- Campos de formulário ---------- */ .field { display: grid; gap: 0.45rem; } .field label { font-family: var(--font-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); } .field input, .field select, .field textarea { width: 100%; padding: 0.85rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.2s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); } .field input::placeholder { color: var(--muted); } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888884' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; } .field .hint { font-size: 0.82rem; color: var(--muted); } /* ---------- Cartão / moldura ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .frame-double { position: relative; border: 1px solid var(--line-strong); } .frame-double::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; } /* ---------- Chips de estado ---------- */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 99px; font-family: var(--font-label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); color: var(--ink-2); } .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip-agendado { color: var(--ink); border-color: var(--line-strong); } .chip-concluido { color: var(--ok); border-color: currentColor; } .chip-cancelado { color: var(--muted); } .chip-sinal-pago { color: var(--ok); border-color: currentColor; } .chip-sinal-pendente { color: var(--muted); border-style: dashed; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); z-index: 1000; max-width: min(420px, calc(100vw - 2rem)); padding: 0.9rem 1.3rem; background: var(--surface-2); border: 1px solid var(--line-strong); border-left: 4px solid var(--ink); border-radius: var(--radius-sm); font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.05em; box-shadow: var(--shadow); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .toast.show { transform: translate(-50%, 0); } .toast.toast-error { border-left-color: var(--danger); } .toast.toast-ok { border-left-color: var(--ok); } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .modal-overlay.open { display: flex; } .modal { width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.6rem; animation: modal-in 0.25s ease; } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } .modal h3 { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; margin-bottom: 1.2rem; } /* ---------- Acessibilidade ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }