/* ========================================================================= MAIS SALÃO — folha de estilo única. Mesma marca, duas peles. A pele vem do salão e entra como atributo: vinho · rosé · champanhe · nude marinho · gelo · platina · névoa Só os tokens abaixo mudam entre uma e outra. Todo o resto do arquivo é igual para as duas — é o que garante que a marca continua a mesma. ========================================================================= */ :root, [data-tema="feminino"] { --marca: #3D0F2E; /* vinho — barras, botões, estado ativo */ --marca-escuro: #250A1C; /* pressionado */ --marca-media: #6B1B4D; /* gradiente e hover */ --acento: #E9A9B5; /* rosé — horário livre, detalhe */ --destaque: #EBC9A0; /* champanhe — confirmado, pago */ --marca-claro: #F9E9ED; /* fundo de chip ativo e card em destaque */ --marca-suave: #F3D9E0; --marca-borda: #EBC8D2; --fundo: #FBF1EC; /* nude — fundo de leitura */ --card: #FFFFFF; --texto: #1C0714; /* tinta */ --suave: #7A5C6B; --apagado: #A98D99; --borda: #EFE0DA; --mecha-1: #E9A9B5; /* mecha sobre fundo escuro */ --mecha-2: #EBC9A0; --mecha-esc-1: #C97B96; /* mecha sobre fundo claro */ --mecha-esc-2: #6B1B4D; --splash-1: #4A1237; --splash-2: #1C0714; } [data-tema="masculino"] { --marca: #123554; /* marinho */ --marca-escuro: #0A1E33; --marca-media: #1D5C8C; /* azul aço */ --acento: #79B9E6; /* gelo */ --destaque: #C6D6E0; /* platina */ --marca-claro: #E8F1F9; --marca-suave: #D5E7F5; --marca-borda: #BCD8ED; --fundo: #F1F5F9; /* névoa */ --card: #FFFFFF; --texto: #061424; --suave: #5C7183; --apagado: #8FA3B3; --borda: #DFE7EE; --mecha-1: #79B9E6; --mecha-2: #C6D6E0; --mecha-esc-1: #1D5C8C; --mecha-esc-2: #123554; --splash-1: #1A456B; --splash-2: #061424; } :root { --ok: #15803D; --ok-claro: #ECFDF5; --alerta: #B45309; --alerta-claro: #FFFBEB; --erro: #B91C1C; --erro-claro: #FEF2F2; --serif: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif; --sans: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif; --raio: 12px; --raio-g: 16px; --sombra: 0 1px 2px rgba(28, 7, 20, .05), 0 10px 30px rgba(28, 7, 20, .07); --sombra-sutil: 0 1px 2px rgba(28, 7, 20, .05); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); font-weight: 400; background: var(--fundo); color: var(--texto); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* A serifa aparece pouco e sempre grande — regra do manual da marca. */ h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: .01em; } h1 { font-size: clamp(1.55rem, 5vw, 2.1rem); line-height: 1.18; margin: 0 0 .5rem; } h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.22; margin: 0 0 .5rem; } h3, h4 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; margin: 0 0 .4rem; line-height: 1.3; } p { margin: 0 0 .75rem; } a { color: var(--marca-media); text-decoration: none; } a:hover { text-decoration: underline; } small { font-size: .82rem; } /* Etiqueta em maiúsculas espaçadas — assinatura tipográfica da marca */ .eyebrow, .titulo-secao, .metrica-rotulo { font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--suave); margin: 0 0 .55rem; } /* ------------------------------------------------------------------ marca */ .simbolo { width: 26px; height: 26px; flex: none; display: block; } /* Ícones de linha, no mesmo traço do símbolo. Herdam a cor do texto. */ .ico { display: inline-block; vertical-align: -.22em; flex: none; } .ico-so { display: inline-flex; } /* Monograma do salão: as iniciais no lugar de emoji */ .monograma { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--marca-claro); color: var(--marca); border-radius: 12px; font-family: var(--serif); font-size: .95rem; letter-spacing: .02em; line-height: 1; } .monograma-g { width: 54px; height: 54px; font-size: 1.3rem; border-radius: 15px; } .marca-logo { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; } .marca-logo:hover { text-decoration: none; } .marca-nome { font-family: var(--serif); font-size: 1.02rem; letter-spacing: .1em; line-height: 1; white-space: nowrap; } .marca-nome b { font-weight: 700; } .marca-nome span { font-weight: 400; color: var(--acento); margin-left: .18em; } .tagline { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--destaque); margin: .5rem 0 0; } /* ----------------------------------------------------------------- layout */ .envolucro { max-width: 960px; margin: 0 auto; padding: 0 1rem; } .estreito { max-width: 440px; } .medio { max-width: 700px; } .secao { padding: 1.25rem 0; } .pilha { display: flex; flex-direction: column; gap: .7rem; } .pilha-g { display: flex; flex-direction: column; gap: 1.3rem; } .linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .linha-entre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .espaco { flex: 1; } .centro { text-align: center; } .grade { display: grid; gap: .75rem; } .grade-2, .grade-3 { grid-template-columns: 1fr; } .grade-auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @media (min-width: 700px) { .grade-2 { grid-template-columns: 1fr 1fr; } .grade-3 { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------------------- topo */ .topo { position: sticky; top: 0; z-index: 40; background: var(--marca); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); } .topo a, .topo .marca-logo { color: #fff; } .topo-conteudo { max-width: 960px; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; gap: .7rem; } .topo .simbolo { color: #fff; width: 24px; height: 24px; } .topo .monograma { background: rgba(255, 255, 255, .14); color: #fff; } .topo-sub { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); font-weight: 400; } .topo .btn-2 { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .22); } .topo .btn-2:hover { background: rgba(255, 255, 255, .22); } .topo .abas { padding-bottom: .1rem; } .topo .chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82); } .topo .chip:hover { background: rgba(255, 255, 255, .18); color: #fff; } .topo .chip.ativo { background: #fff; border-color: #fff; color: var(--marca); } /* ----------------------------------------------------------------- cartão */ .card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 1rem; box-shadow: var(--sombra-sutil); } .card-limpo { background: var(--card); border-radius: var(--raio-g); padding: 1rem; } .card-destaque { border-color: var(--marca-borda); background: var(--marca-claro); } .card + .card { margin-top: .7rem; } /* ----------------------------------------------------------------- botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .78rem 1.15rem; border: 1px solid transparent; border-radius: var(--raio); background: linear-gradient(100deg, var(--marca-media), var(--marca)); color: #fff; font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; text-decoration: none; text-align: center; transition: filter .15s, background .15s, border-color .15s; min-height: 46px; } .btn:hover { filter: brightness(1.12); text-decoration: none; } .btn:active { filter: brightness(.94); } .btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } .btn-bloco { width: 100%; } .btn-2 { background: var(--card); color: var(--texto); border-color: var(--borda); } .btn-2:hover { border-color: var(--marca-borda); background: var(--marca-claro); filter: none; } .btn-fantasma { background: none; color: var(--marca-media); } .btn-fantasma:hover { background: var(--marca-claro); filter: none; } .btn-ok { background: var(--ok); } .btn-erro { background: var(--erro); } .btn-zap { background: #22A45D; } .btn-pequeno { padding: .48rem .8rem; min-height: 38px; font-size: .86rem; border-radius: 10px; } /* CTA principal do fluxo: maiúsculas espaçadas, como no manual */ .btn-cta { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 500; } /* ----------------------------------------------------------------- campos */ .campo { display: block; margin-bottom: .85rem; } .campo > span { display: block; font-size: .8rem; font-weight: 500; color: var(--texto); margin-bottom: .35rem; } .campo .dica { font-weight: 400; color: var(--suave); font-size: .78rem; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="search"], input[type="datetime-local"], select, textarea { width: 100%; padding: .72rem .85rem; border: 1px solid var(--borda); border-radius: var(--raio); font: inherit; font-size: 16px; /* 16px evita o zoom automático do iPhone */ background: var(--card); color: var(--texto); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca-media); box-shadow: 0 0 0 3px var(--marca-suave); } textarea { min-height: 84px; resize: vertical; font-family: inherit; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; } .campo-linha { display: flex; gap: .6rem; } .campo-linha > * { flex: 1; min-width: 0; } .campo-busca { position: relative; display: block; } .campo-busca-icone { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--suave); pointer-events: none; } .campo-busca input[type="search"] { padding-left: 2.5rem; } /* bolha de vidro que substitui a barra de busca quando ela some no scroll. "top" é definido por JS: o cabeçalho é sticky, então a bolha precisa acompanhar a altura real dele (nome do salão pode quebrar em 2 linhas). */ .lupa-flutuante { position: fixed; left: .9rem; z-index: 42; display: flex; align-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 6px 20px rgba(28, 7, 20, .18); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); transition: width .25s ease, border-radius .25s ease, background-color .2s ease; } .lupa-flutuante.expandida { width: min(82vw, 340px); border-radius: 999px; background: rgba(255, 255, 255, .88); } .lupa-flutuante-abrir { flex: none; width: 56px; height: 56px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--marca); cursor: pointer; } .lupa-flutuante.expandida .lupa-flutuante-abrir { display: none; } .lupa-flutuante input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 .4rem 0 .5rem; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px; color: var(--texto); display: none; } .lupa-flutuante input:focus { /* sem isso, o anel de foco global (retangular) sobra fora da pílula redonda */ box-shadow: none; border-color: transparent; } .lupa-flutuante.expandida input { display: block; } .lupa-flutuante-fechar { flex: none; width: 36px; height: 36px; margin-right: .3rem; border: 0; background: none; padding: 0; display: none; align-items: center; justify-content: center; color: var(--suave); cursor: pointer; } .lupa-flutuante.expandida .lupa-flutuante-fechar { display: flex; } .check { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .85rem; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; background: var(--card); } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marca); flex: none; } .check:hover { border-color: var(--marca-borda); } .check span { font-size: .9rem; } /* ------------------------------------------------------------------ chips */ .chips { display: flex; gap: .45rem; flex-wrap: wrap; } .chips-rolagem, .abas { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; -ms-overflow-style: none; } .chips-rolagem::-webkit-scrollbar, .abas::-webkit-scrollbar { display: none; } .chip { padding: .48rem .9rem; border-radius: 999px; border: 1px solid var(--borda); background: var(--card); font: inherit; font-size: .84rem; font-weight: 500; color: var(--suave); cursor: pointer; white-space: nowrap; } .chip:hover { border-color: var(--marca-borda); color: var(--texto); } .chip.ativo { background: var(--marca); border-color: var(--marca); color: #fff; } /* ------------------------------------------------------------------ selos */ .selo { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 500; letter-spacing: .04em; background: var(--marca-claro); color: var(--marca); border: 1px solid var(--marca-borda); white-space: nowrap; } .selo-ok { background: var(--ok-claro); color: var(--ok); border-color: #BBF7D0; } .selo-alerta { background: var(--alerta-claro); color: var(--alerta); border-color: #FDE68A; } .selo-erro { background: var(--erro-claro); color: var(--erro); border-color: #FECACA; } .selo-cinza { background: var(--fundo); color: var(--suave); border-color: var(--borda); } /* ------------------------------------------------------ item selecionável */ .opcao { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem; text-align: left; background: var(--card); border: 1.5px solid var(--borda); border-radius: var(--raio); cursor: pointer; font: inherit; color: var(--texto); transition: border-color .15s, background .15s; } .opcao:hover { border-color: var(--marca-borda); } .opcao.ativo { border-color: var(--marca); background: var(--marca-claro); } .opcao:disabled { cursor: default; opacity: .75; } .opcao-corpo { flex: 1; min-width: 0; } .opcao-nome { font-weight: 500; font-size: .96rem; display: block; } .opcao-info { font-size: .82rem; color: var(--suave); display: block; } .opcao-preco { text-align: right; font-weight: 600; white-space: nowrap; font-size: .95rem; } .opcao-marca { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--borda); display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 700; } .opcao.ativo .opcao-marca { background: var(--marca); border-color: var(--marca); } /* miniatura no card de serviço: proporção fixa para a lista não dançar enquanto as imagens carregam */ .opcao-foto { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; background: var(--marca-claro); } /* ------------------------------------------------------------- imagens */ /* Foto no lugar do monograma. Mesmas medidas: uma troca pela outra sem mexer no layout de nenhuma tela. */ .avatar-foto { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 12px; background: var(--marca-claro); display: block; } .avatar-foto.redondo, .monograma.redondo { border-radius: 50%; } .avatar-foto.pequena, .monograma.pequena { width: 34px; height: 34px; font-size: .8rem; } .avatar-foto.id-salao, .monograma.id-salao { width: 40px; height: 40px; } /* Faixa do topo da loja. Só aparece se a dona subiu capa. */ .capa-loja { height: clamp(90px, 22vw, 170px); background: var(--marca-claro) center/cover no-repeat; } .img-campo { display: flex; gap: .8rem; align-items: flex-start; } .img-campo.larga .img-preview { width: 132px; height: 84px; } .img-preview { width: 84px; height: 84px; flex: none; border-radius: var(--raio); overflow: hidden; background: var(--marca-claro); border: 1.5px solid var(--borda); display: grid; place-items: center; } .img-campo.redondo .img-preview { border-radius: 50%; } .img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .img-vazia { color: var(--marca-borda); } .img-acoes { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .img-acoes small { flex-basis: 100%; line-height: 1.35; } .img-acoes label { cursor: pointer; } .img-barra { flex-basis: 100%; height: 4px; border-radius: 2px; background: var(--borda); overflow: hidden; } .img-barra span { display: block; height: 100%; width: 0; background: var(--marca); transition: width .15s; } .img-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; } .img-item { margin: 0; position: relative; } .img-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--raio); border: 1.5px solid var(--borda); background: var(--marca-claro); } .img-item.fixada img { border-color: var(--marca); } .img-item figcaption { display: flex; gap: .3rem; align-items: center; justify-content: space-between; margin-top: .25rem; font-size: .74rem; } .img-item-acoes { position: absolute; top: .3rem; right: .3rem; display: flex; gap: .25rem; } .btn-icone-mini { width: 26px; height: 26px; display: grid; place-items: center; border: none; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, .88); color: var(--suave); backdrop-filter: blur(2px); } .btn-icone-mini:hover { color: var(--texto); } .btn-icone-mini.ativo { background: var(--marca); color: #fff; } /* Quanto do disco de fotos o salão já usou */ .disco { margin-top: .9rem; } .disco-barra { height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; margin: .3rem 0; } .disco-barra span { display: block; height: 100%; background: var(--marca); } .atencao { color: var(--alerta); } /* --------------------------------------------------------------- horários */ .horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; } .hora { padding: .68rem .4rem; border-radius: var(--raio); text-align: center; border: 1.5px solid var(--marca-borda); background: var(--card); font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; color: var(--texto); } .hora:hover { border-color: var(--marca); background: var(--marca-claro); } .hora.ativo { background: var(--marca); border-color: var(--marca); color: #fff; } .hora small { display: block; font-weight: 400; font-size: .66rem; opacity: .72; } .dias { display: flex; gap: .45rem; overflow-x: auto; padding: .2rem 0 .5rem; scrollbar-width: none; } .dias::-webkit-scrollbar { display: none; } .dia { flex: none; width: 62px; padding: .55rem .2rem; border-radius: var(--raio-g); border: 1.5px solid var(--borda); background: var(--card); text-align: center; cursor: pointer; font: inherit; color: var(--texto); } .dia:hover { border-color: var(--marca-borda); } .dia.ativo { background: var(--marca); border-color: var(--marca); color: #fff; } .dia.cheio { opacity: .38; } .dia-semana { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; opacity: .75; } .dia-numero { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; } .dia-mes { font-size: .62rem; opacity: .7; letter-spacing: .08em; } /* ------------------------------------------------------------ agendamento */ .agenda-item { background: var(--card); border: 1px solid var(--borda); border-left: 4px solid var(--marca); border-radius: var(--raio-g); padding: .85rem .9rem; } .agenda-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .agenda-horario { font-family: var(--serif); font-size: 1.24rem; white-space: nowrap; } .agenda-horario small { font-family: var(--sans); font-size: .76rem; color: var(--suave); } .agenda-nome { font-weight: 600; font-size: 1rem; margin-top: .15rem; } .agenda-servicos { font-size: .92rem; } .agenda-meta { display: flex; flex-wrap: wrap; gap: .1rem .75rem; font-size: .8rem; color: var(--suave); margin-top: .2rem; } .agenda-obs { font-size: .84rem; background: var(--marca-claro); border-radius: 10px; padding: .4rem .55rem; margin-top: .45rem; } .agenda-acoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; } .agenda-acoes .btn { flex: 1 1 auto; } .agenda-acoes .btn-icone { flex: 0 0 auto; min-width: 46px; } .cancelado { opacity: .6; } .cancelado .agenda-nome { text-decoration: line-through; } /* enquanto o servidor responde: o cartão apaga um pouco, o resto da tela fica */ .agenda-item.salvando { opacity: .55; transition: opacity .1s; } /* ------------------------------------------------------------- calendário */ .cal-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; } .cal-mes { font-family: var(--serif); font-size: 1.15rem; text-transform: capitalize; } .cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; } .cal-semana span { text-align: center; font-size: .62rem; font-weight: 500; color: var(--suave); text-transform: uppercase; letter-spacing: .14em; padding-bottom: .25rem; } .cal-dia { aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); color: var(--texto); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .cal-dia:hover { border-color: var(--marca); } .cal-dia.fora { border: 0; background: none; cursor: default; } .cal-dia.fechado { background: var(--fundo); color: var(--apagado); } .cal-dia.bloqueado { background: var(--erro-claro); color: var(--erro); border-color: #FECACA; } .cal-dia.passado { opacity: .5; } .cal-dia.hoje { border-color: var(--marca); border-width: 2px; } .cal-dia.ativo { background: var(--marca); border-color: var(--marca); color: #fff; } .cal-num { font-size: .95rem; font-weight: 500; line-height: 1; } .cal-tag { font-size: .62rem; font-weight: 600; line-height: 1; padding: .14rem .32rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca); } .cal-tag.alerta { background: #FDE68A; color: var(--alerta); } .cal-dia.ativo .cal-tag { background: rgba(255, 255, 255, .3); color: #fff; } .cal-legenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .7rem; color: var(--suave); margin-top: .8rem; } .cal-legenda span { display: inline-flex; align-items: center; gap: .3rem; } .cal-amostra { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--borda); display: inline-block; } /* ----------------------------------------------------------------- avisos */ .aviso { padding: .8rem .95rem; border-radius: var(--raio); background: var(--marca-claro); border: 1px solid var(--marca-borda); font-size: .89rem; color: var(--marca); } .aviso-ok { background: var(--ok-claro); border-color: #BBF7D0; color: var(--ok); } .aviso-alerta { background: var(--alerta-claro); border-color: #FDE68A; color: var(--alerta); } .aviso-erro { background: var(--erro-claro); border-color: #FECACA; color: var(--erro); } .vazio { text-align: center; padding: 2rem 1rem; color: var(--suave); } .vazio .ico { color: var(--marca-borda); margin-bottom: .6rem; } /* linha de dado com ícone: 📱 (32) 9... vira ícone + texto alinhados */ .dado { display: inline-flex; align-items: center; gap: .3rem; } /* ----------------------------------------------------------------- painel */ .metricas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } @media (min-width: 700px) { .metricas { grid-template-columns: repeat(4, 1fr); } } .metrica { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: .85rem; } .metrica-valor { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; color: var(--marca); } .metrica-rotulo { margin: .2rem 0 0; } .tabela { width: 100%; border-collapse: collapse; font-size: .89rem; } .tabela th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--suave); font-weight: 500; padding: .5rem .6rem; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela td { padding: .62rem .6rem; border-bottom: 1px solid var(--borda); } .tabela tr:last-child td { border-bottom: 0; } .rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* barra fixa embaixo: o polegar alcança */ .barra-baixo { position: sticky; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--borda); padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); margin: 1rem -1rem 0; } .nav-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; background: var(--marca); padding-bottom: env(safe-area-inset-bottom); } .nav-baixo button { flex: 1; padding: .55rem .2rem; background: none; border: 0; font: inherit; font-size: .64rem; font-weight: 400; letter-spacing: .08em; color: rgba(255, 255, 255, .6); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .18rem; } .nav-baixo button .icone { font-size: 1.2rem; line-height: 1; } .nav-baixo button.ativo { color: #fff; } .com-nav { padding-bottom: 5rem; } @media (min-width: 760px) { .nav-baixo { display: none; } .com-nav { padding-bottom: 1rem; } } /* ------------------------------------------------------------------ modal */ .modal-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(28, 7, 20, .5); display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 700px) { .modal-fundo { align-items: center; padding: 1rem; } } .modal { background: var(--card); width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; padding: 1.15rem; max-height: 92vh; overflow-y: auto; padding-bottom: calc(1.15rem + env(safe-area-inset-bottom)); } @media (min-width: 700px) { .modal { border-radius: 20px; } } .modal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; } .modal-topo h2 { margin: 0; font-size: 1.2rem; } .fechar { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--suave); cursor: pointer; padding: .1rem .4rem; } /* ------------------------------------------------------------------ sino */ .btn-sino { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; padding: 0; } .btn-sino:hover { background: rgba(255, 255, 255, .24); } .btn-sino.tem-aviso .ico { animation: balanca 1.4s ease-in-out 2; transform-origin: 50% 15%; } @keyframes balanca { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(11deg); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } } .sino-conta { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--acento); color: var(--marca-escuro); font-size: .66rem; font-weight: 600; line-height: 18px; text-align: center; border: 2px solid var(--marca); } .sino-conta.urgente { background: #DC2626; color: #fff; } .aviso-item { border: 1.5px solid var(--borda); border-radius: var(--raio); background: var(--card); overflow: hidden; } .aviso-item.novo { border-color: var(--marca-borda); background: var(--marca-claro); } .aviso-item.decidir { border-color: #FDE68A; background: var(--alerta-claro); } .aviso-linha { display: flex; align-items: flex-start; } .aviso-corpo { display: block; flex: 1; min-width: 0; text-align: left; padding: .7rem .8rem; background: none; border: 0; font: inherit; color: var(--texto); cursor: pointer; } .aviso-corpo:hover { background: rgba(0, 0, 0, .03); } /* "já vi este": tira da conta sem abrir a agenda */ .aviso-visto { flex: none; margin: .55rem .55rem 0 0; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; background: var(--card); border: 1.5px solid var(--marca-borda); border-radius: 50%; color: var(--marca-media); padding: 0; } .aviso-visto:hover { background: var(--marca); border-color: var(--marca); color: #fff; } .aviso-visto:disabled { opacity: .5; cursor: default; } .aviso-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .aviso-titulo { font-weight: 600; font-size: .93rem; } .aviso-item.novo .aviso-titulo::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); margin-right: .4rem; vertical-align: middle; } .aviso-quando { display: block; font-size: .88rem; margin-top: .1rem; } .aviso-motivo { display: block; font-size: .84rem; font-style: italic; margin-top: .25rem; } .aviso-item.visto .aviso-titulo { font-weight: 500; color: var(--suave); } .aviso-acoes { display: flex; gap: .4rem; padding: 0 .8rem .7rem; } .aviso-acoes .btn { flex: 1; } /* pedido de cancelamento dentro do cartão da agenda */ .pedido-cancelamento { background: var(--alerta-claro); border: 1px solid #FDE68A; border-radius: 10px; padding: .55rem .65rem; margin: .5rem 0; color: var(--alerta); } .pedido-cancelamento .agenda-acoes { margin-top: .5rem; } /* cartão aberto a partir de um aviso do sino */ .agenda-item.destacado { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); animation: pisca 1.1s ease-out 2; } @keyframes pisca { 0%, 100% { box-shadow: 0 0 0 3px var(--marca-suave); } 50% { box-shadow: 0 0 0 7px var(--marca-claro); } } /* ------------------------------------------------------- modo de seleção */ /* Barra que aparece ao marcar itens de uma lista. Fica logo acima do menu de baixo: a altura dele vem medida pelo JS em --altura-nav. */ .barra-selecao { position: fixed; left: 0; right: 0; z-index: 44; bottom: var(--altura-nav, 3.5rem); display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-top: 1px solid var(--borda); box-shadow: 0 -6px 20px rgba(28, 7, 20, .08); animation: sobe .18s ease-out; } .barra-selecao .btn { display: inline-flex; align-items: center; gap: .35rem; } .com-nav.com-selecao { padding-bottom: 9rem; } /* ------------------------------------------------- régua do dia (encaixe) */ /* A agenda do dia dentro do modal: o que está ocupado, os buracos, e em qual buraco o serviço cabe. A altura de cada faixa acompanha a duração (--peso em minutos), então um atendimento de 2h ocupa mais espaço que um de 20 min. */ .regua-caixa { position: relative; } .regua-caixa.atualizando { opacity: .5; pointer-events: none; } .regua-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; } .regua-quem { font-weight: 600; font-size: .92rem; text-transform: capitalize; } .regua-aviso { margin-bottom: .5rem; } .regua-vazio { border: 1px dashed var(--borda); border-radius: var(--raio); padding: 1.1rem; text-align: center; color: var(--suave); font-size: .86rem; } .regua { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--card); overflow: hidden auto; max-height: 46vh; } .regua-rodape { margin-top: .35rem; } .regua-faixa { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .6rem; border-bottom: 1px solid var(--borda); min-height: clamp(2.3rem, calc(var(--peso, 30) * .05rem), 7rem); } .regua-faixa:last-child { border-bottom: 0; } .regua-hora { flex: none; width: 3.1rem; font-size: .8rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; } .regua-hora small { display: block; font-weight: 400; color: var(--apagado); } .regua-corpo { flex: 1; min-width: 0; } .regua-nome { font-weight: 600; font-size: .92rem; } .regua-faixa.passou { opacity: .55; } .regua-faixa.ocupado { background: var(--marca-claro); } .regua-faixa.ocupado .regua-hora { color: var(--marca); } /* tem gente, mas ainda cabe outra: atendimento em paralelo */ .regua-faixa.parcial { background: linear-gradient(90deg, var(--marca-claro) 0 3px, var(--card) 3px); } .regua-faixa.parcial .regua-hora { color: var(--marca); } .regua-vaga { color: var(--ok); font-weight: 500; } .regua-faixa.bloqueio { background: repeating-linear-gradient(135deg, var(--fundo), var(--fundo) 7px, transparent 7px, transparent 14px); color: var(--suave); } .regua-faixa.fora { background: var(--fundo); color: var(--apagado); } .regua-faixa.cabe { background: var(--card); } .regua-faixa.nao-cabe { background: var(--alerta-claro); } .regua-porque { color: var(--alerta); margin-top: .1rem; line-height: 1.4; } .horarios-regua { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); margin-top: .45rem; } .horarios-regua .hora { padding: .38rem .3rem; font-size: .84rem; } .horarios-regua .hora small { font-size: .62rem; } .horarios-regua .hora.passou { opacity: .5; } .regua-conferencia:empty { display: none; } .regua-conferencia { margin: 0 0 .85rem; padding: .5rem .65rem; border-radius: 10px; background: var(--fundo); color: var(--suave); line-height: 1.4; } .regua-conferencia.ok { background: var(--ok-claro); color: var(--ok); } .regua-conferencia.ruim { background: var(--erro-claro); color: var(--erro); } /* ------------------------------------------------------------------ toast */ .avisos-flutuantes { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; gap: .5rem; width: calc(100% - 2rem); max-width: 420px; } .toast { padding: .8rem 1rem; border-radius: var(--raio); font-size: .9rem; background: var(--marca-escuro); color: #fff; box-shadow: var(--sombra); animation: sobe .2s ease-out; } .toast.erro { background: var(--erro); } .toast.ok { background: var(--ok); } @keyframes sobe { from { opacity: 0; transform: translateY(8px); } } /* ------------------------------------------------------------------ passos */ .passos { display: flex; gap: .3rem; margin-bottom: 1rem; } .passo { flex: 1; height: 3px; border-radius: 99px; background: var(--marca-suave); } .passo.feito { background: var(--marca); } .carregando { text-align: center; padding: 2rem; color: var(--suave); } .girando { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--marca-suave); border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* ------------------------------------------------- abertura / capa escura */ .capa { background: linear-gradient(160deg, var(--splash-1), var(--splash-2)); color: #fff; border-radius: var(--raio-g); padding: 2.2rem 1.2rem; text-align: center; position: relative; overflow: hidden; } .capa .simbolo { width: 64px; height: 64px; margin: 0 auto 1.1rem; color: #fff; } .capa .marca-nome { font-size: clamp(1.5rem, 7vw, 2.2rem); letter-spacing: .12em; } .capa .marca-nome b { color: #fff; } .capa h1 { color: #fff; } .capa p { color: rgba(255, 255, 255, .72); } .capa .btn-2 { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); } /* ---------------------------------------------------------------- auxiliares */ .oculto { display: none !important; } .suave { color: var(--suave); } .pequeno { font-size: .84rem; } .negrito { font-weight: 600; } .quebra { word-break: break-word; overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------ mensalidade */ /* A cobrança não tem e-mail nem WhatsApp: ela só existe dentro do painel. Por isso a faixa nasce no topo de toda seção e rola junto com o conteúdo — nada de position:fixed, senão ela briga com o topo sticky e com a barra de baixo, que já disputam as duas pontas da tela. */ .faixa-licenca { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .8rem; padding: .7rem .9rem; margin: 0 0 .9rem; border: 1px solid var(--borda); border-left: 4px solid var(--alerta); border-radius: var(--raio); background: var(--alerta-claro); font-size: .89rem; line-height: 1.4; } /* filho direto: o ícone de dentro do botão continua com a cor do botão */ .faixa-licenca > .ico { flex: none; color: var(--alerta); } .faixa-licenca-texto { flex: 1 1 15rem; min-width: 0; } .faixa-licenca-titulo { display: block; font-weight: 600; } .faixa-licenca-detalhe { display: block; color: var(--suave); font-size: .84rem; } .faixa-licenca .btn { flex: 0 0 auto; margin-left: auto; } /* onde não sobra largura, o botão desce e ocupa a linha inteira */ @media (max-width: 480px) { .faixa-licenca .btn { flex: 1 1 100%; margin-left: 0; } } /* atrasada: mesma faixa, tom de erro */ .faixa-licenca.urgente { border-left-color: var(--erro); background: var(--erro-claro); } .faixa-licenca.urgente > .ico { color: var(--erro); } /* período de teste e recado sem urgência */ .faixa-licenca.neutra { border-left-color: var(--marca); background: var(--marca-claro); } .faixa-licenca.neutra > .ico { color: var(--marca); } /* pagamento reconhecido agora */ .faixa-licenca.ok { border-left-color: var(--ok); background: var(--ok-claro); } .faixa-licenca.ok > .ico { color: var(--ok); } /* ------------------------------------------------------------------- Pix */ /* O QR precisa de fundo claro fixo mesmo na pele masculina: leitor de banco erra o contraste. --card é branco nas duas peles. */ .licenca-qr { text-align: center; } .licenca-qr img { display: block; width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; padding: .6rem; background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-g); } /* copia-e-cola: cabe em 6 linhas e rola o resto, senão o código empurra o botão de copiar para fora da tela do celular */ .licenca-copia, .licenca-qr code, .licenca-qr textarea { display: block; width: 100%; max-height: 6.5rem; overflow: auto; margin: .7rem 0 0; padding: .6rem .7rem; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .76rem; line-height: 1.45; color: var(--suave); text-align: left; word-break: break-all; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; resize: none; } /* --------------------------------------------- painel bloqueado da dona */ /* Ela entrou, mas o painel inteiro é 403 até pagar. Só esta tela aparece. */ .licenca-bloqueio { max-width: 30rem; min-height: 100vh; margin: 0 auto; padding: 2.6rem 1.15rem calc(2.6rem + env(safe-area-inset-bottom)); text-align: center; } .licenca-bloqueio .simbolo { width: 48px; height: 48px; margin: 0 auto 1.1rem; color: var(--marca); } .licenca-bloqueio h1 { margin-bottom: .6rem; } .licenca-bloqueio > p { color: var(--suave); margin-bottom: 1.4rem; } .licenca-bloqueio .card { text-align: left; } .licenca-bloqueio .card + .btn { margin-top: 1rem; } /* ------------------------------------------------- lista do master */ .licenca-linha { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; padding: .75rem .1rem; border-bottom: 1px solid var(--borda); } .licenca-linha:last-child { border-bottom: 0; } .licenca-linha-nome { flex: 1 1 12rem; min-width: 0; font-weight: 600; font-size: .95rem; } .licenca-linha-nome small { display: block; font-weight: 400; color: var(--suave); } .licenca-linha .selo { flex: none; } .licenca-linha-valor { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } /* valor combinado com o salão, fora do padrão do sistema */ .licenca-linha-valor.personalizado { color: var(--marca-media); } .licenca-linha-vence { font-size: .82rem; color: var(--suave); white-space: nowrap; } .licenca-linha-acoes { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; } @media (max-width: 560px) { .licenca-linha { flex-direction: column; align-items: flex-start; gap: .3rem; } .licenca-linha-acoes { width: 100%; margin: .25rem 0 0; } .licenca-linha-acoes .btn { flex: 1 1 auto; } } /* Rodapé com os links legais, em todas as páginas do site. */ .rodape-legal { margin-top: 3rem; padding: 1.4rem 1.2rem 2rem; border-top: 1px solid var(--borda); text-align: center; font-size: .85rem; color: var(--suave); } .rodape-legal a { color: inherit; text-decoration: underline; text-underline-offset: .2em; } .rodape-legal span { margin: 0 .45rem; opacity: .5; } /* Aceite dos Termos no cadastro. Caixa de toque grande: em celular, checkbox * pequeno com texto ao lado é o campo que mais gera cadastro abandonado. */ .campo-aceite { display: flex; gap: .7rem; align-items: flex-start; margin: 1.1rem 0 .2rem; padding: .85rem 1rem; border: 1px solid var(--borda); border-radius: .7rem; background: var(--fundo); cursor: pointer; line-height: 1.5; } .campo-aceite input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: var(--marca); } .campo-aceite a { color: var(--marca); text-decoration: underline; } /* Ação secundária discreta (ex.: "pedir remoção dos meus dados"): precisa * existir e ser encontrável, sem competir com o botão que a cliente veio usar. */ .btn-texto { display: block; padding: 0; border: 0; background: none; color: var(--suave); font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .btn-texto:hover { color: var(--marca); } /* Aviso de privacidade no formulário de agendamento. */ .aviso-privacidade { margin: .2rem 0 .9rem; line-height: 1.5; } .aviso-privacidade a { color: var(--marca); text-decoration: underline; }