/* Os três templates do site público — docs/05-site-publico.md §1. * * Um conjunto de templates, N temas por CSS variables: o HTML é o mesmo * para todas as barbearias, o que muda é a paleta e a classe do . * Gerar CSS por tenant seria um build por cliente e um jeito novo de * quebrar a cada deploy. * * As variáveis --brand* vêm inline do context processor (a cor que o dono * escolheu). O que este arquivo faz é decidir como cada template usa essa * cor: o clássico a espalha no fundo, o moderno a reserva para os botões. */ /* --------------------------------------------------------- 1. clássico * Escuro e quente, o visual padrão do produto. A cor primária do dono * tinge o fundo do topo; o destaque manda nos botões. */ body.theme-classico { --bg: #0c0b0a; --bg-2: #131211; --bg-3: #1a1817; --line: #2a2724; --line-soft: #201e1c; --fg: #f5f1ea; --fg-muted: #a39c92; --fg-dim: #6f6862; } /* ---------------------------------------------------------- 2. moderno * Claro, muito branco, sem serifa. É o que a barbearia "de shopping" * pede — e o que fotografa melhor no print do Instagram. */ body.theme-moderno { --bg: #ffffff; --bg-2: #f6f6f4; --bg-3: #eeeeea; --line: #e2e2dd; --line-soft: #ededea; --fg: #14130f; --fg-muted: #5f5c55; --fg-dim: #8b8880; } body.theme-moderno .site-header { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); } /* No claro, o cinza de borda some sobre branco: o card precisa de sombra * em vez de contorno, senão a página vira um bloco só. */ body.theme-moderno .card, body.theme-moderno .cta-box { box-shadow: 0 1px 2px rgba(20, 19, 15, 0.06), 0 8px 24px rgba(20, 19, 15, 0.05); } /* ------------------------------------------------------------- 3. dark * Preto real, contraste alto, sem o marrom do clássico. Para quem quer * "barbearia moderna de rua" e acha o clássico datado. */ body.theme-dark { --bg: #000000; --bg-2: #0a0a0a; --bg-3: #141414; --line: #262626; --line-soft: #1a1a1a; --fg: #fafafa; --fg-muted: #a1a1a1; --fg-dim: #6b6b6b; } /* ------------------------------------------------- aplicação da marca * Vale para os três: a cor escolhida pelo dono manda nos elementos de * ação, e --brand-fg (calculado por luminância) garante que o texto por * cima dela continue legível. */ body[class*="theme-"] { --gold: var(--brand-accent); --gold-soft: var(--brand-accent); --radius: var(--brand-radius); --serif: var(--brand-font), "Iowan Old Style", Georgia, serif; } body[class*="theme-"] .btn-primary { background: var(--brand-accent); color: var(--brand-accent-fg); border-color: var(--brand-accent); } body[class*="theme-"] .btn-primary:hover { filter: brightness(1.08); } /* ---------------------------------------------------------- identidade */ .site-logo-img { height: 34px; width: auto; max-width: 180px; object-fit: contain; display: block; } /* Capa: a foto da barbearia atrás do nome. O gradiente existe para o * texto sobreviver a QUALQUER foto que o dono suba — inclusive uma foto * clara e estourada, que é o caso comum. */ .hero-cover { position: relative; background-size: cover; background-position: center; isolation: isolate; } .hero-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 62%, transparent) 0%, color-mix(in srgb, var(--brand) 88%, transparent) 100% ); } .hero-cover h1, .hero-cover .hero-sub, .hero-cover .eyebrow { color: var(--brand-fg); } /* Sem capa o hero ainda usa a cor primária — a página nunca fica um * retângulo branco com um nome no meio. */ .hero-solid { background: var(--brand); } .hero-solid h1, .hero-solid .hero-sub, .hero-solid .eyebrow { color: var(--brand-fg); } .pro-photo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; object-fit: cover; display: block; } .social-row { display: flex; gap: 14px; justify-content: center; margin-top: 14px; } .social-row a { color: var(--fg-muted); font-size: 14px; } .social-row a:hover { color: var(--gold); }