obrigaria a mexer na moldura dos outros dezesseis modelos, e este arquétipo não vale uma regressão nos outros quinze. */ .arq-painel { --moldura: rgba(255, 255, 255, 0.08); --sombra: 0 8px 30px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); --raio: 16px; --raio-p: 10px; background: var(--fundo); font-size: .875rem; line-height: 1.5; } .arq-painel .topo { margin: 12px 12px 0; border: 1px solid var(--moldura); border-bottom: none; border-radius: 22px 22px 0 0; background: rgba(17, 12, 9, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .arq-painel main { margin: 0 12px; background: var(--fundo-2); border-inline: 1px solid var(--moldura); } .arq-painel .rodape { margin: 0 12px 12px; background: rgba(17, 12, 9, 0.95); border: 1px solid var(--moldura); border-radius: 0 0 22px 22px; padding-top: 2.2rem; } .arq-painel .contato { background: var(--fundo-2); } /* Navegação em pílula */ .arq-painel .topo-int { min-height: 60px; gap: .75rem; } .arq-painel .nav { margin-left: 1.2rem; margin-right: auto; gap: .35rem; font-size: .86rem; } .arq-painel .nav a { padding: .45rem 1rem; border-radius: var(--raio-pill); font-weight: 600; color: rgba(255,255,255,0.75); transition: all .2s ease; text-decoration: none; } .arq-painel .nav a:hover { background: rgba(255,255,255,0.08); color: #fff; } .arq-painel .nav a[aria-current='page'] { background: rgba(184, 116, 72, 0.25); color: #fff; border: 1px solid rgba(184, 116, 72, 0.4); box-shadow: 0 2px 10px rgba(184, 116, 72, 0.25); } .arq-painel .marca-nome { display: flex; align-items: center; gap: .7rem; font-size: 1rem; letter-spacing: -.01em; color: #fff; text-decoration: none; } .arq-painel .marca-selo { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #b87448, #8f5228); box-shadow: 0 2px 12px rgba(184, 116, 72, 0.45); border: 1px solid rgba(255,255,255,0.18); } .arq-painel .marca-slogan { text-transform: uppercase; letter-spacing: .14em; font-size: .56rem; font-weight: 700; margin-top: 1px; color: var(--realce); } .arq-painel .topo-busca { display: flex; align-items: center; gap: .45rem; flex: 0 1 230px; padding: .38rem .75rem; border: 1px solid var(--moldura); border-radius: var(--raio-pill); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); transition: all .2s ease; } .arq-painel .topo-busca input { border: none; background: none; outline: none; width: 100%; font-size: .8rem; color: #fff; } .arq-painel .topo-busca:focus-within { border-color: var(--marca); background: rgba(255,255,255,0.08); box-shadow: 0 0 12px rgba(184, 116, 72, 0.25); } .arq-painel .topo-acoes { gap: .65rem; } .arq-painel .idiomas { border-radius: var(--raio-pill); background: rgba(255,255,255,0.06); border: 1px solid var(--moldura); padding: 2px; } .arq-painel .idiomas a { border-radius: var(--raio-pill); font-size: .68rem; padding: .28rem .55rem; color: rgba(255,255,255,0.65); text-decoration: none; } .arq-painel .idiomas a.ativo { background: var(--marca); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .arq-painel .botao { border-radius: var(--raio-pill); font-weight: 650; } .arq-painel .botao-p { padding: .55rem 1.25rem; font-size: .84rem; } .arq-painel .botao-cheio { background: linear-gradient(135deg, #b87448, #8f5228); color: #fff; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 16px rgba(184, 116, 72, 0.4); } .arq-painel .botao-cheio:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(184, 116, 72, 0.6); background: linear-gradient(135deg, #c78356, #9e5d32); } /* Cartões: Dark Glassmorphism com borda fina e reflexo sutil */ .arq-painel .cartao { background: rgba(26, 19, 15, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--raio); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } .arq-painel a.cartao:hover { transform: translateY(-3px); border-color: rgba(214, 178, 102, 0.4); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 16px rgba(184, 116, 72, 0.2); } .arq-painel .secao { padding: clamp(1.6rem, 3vw, 2.6rem) 0; } .arq-painel h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); letter-spacing: -.02em; line-height: 1.1; font-family: var(--fonte-titulo); } .arq-painel h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.02em; font-family: var(--fonte-titulo); } .arq-painel h3 { font-size: 1.05rem; font-family: var(--fonte-titulo); letter-spacing: -.01em; } .arq-painel .cabeca { margin-bottom: 1.2rem; } .arq-painel .cabeca .linha { font-size: .92rem; color: rgba(255,255,255,0.7); } .arq-painel .chip { border-radius: var(--raio-pill); font-size: .64rem; padding: .32rem .62rem; } .arq-painel .caixa { width: min(1320px, 100% - 2rem); } /* ---------- Capa do Painel: The Groomsman Collective (Imersiva com foto) ---------- */ .hero-painel { position: relative; min-height: 560px; padding: 4.8rem 0 3.6rem; display: flex; flex-direction: column; justify-content: center; border-radius: 20px 20px 0 0; overflow: hidden; background: #110c09; } .hero-painel-bg { position: absolute; inset: 0; background-size: cover; background-position: center right; z-index: 1; opacity: 0.96; transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); } .hero-painel:hover .hero-painel-bg { transform: scale(1.02); } .hero-painel-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to right, rgba(17, 12, 9, 0.97) 0%, rgba(17, 12, 9, 0.90) 44%, rgba(17, 12, 9, 0.48) 75%, rgba(17, 12, 9, 0.18) 100% ); } .hero-painel .painel-cabeca { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; } .painel-titulo { flex: 1 1 32rem; max-width: 44rem; } .painel-titulo h1 { font-family: var(--fonte-titulo); font-size: clamp(2.6rem, 5.2vw, 4.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #ffffff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85); margin-bottom: 1rem; } .painel-titulo .estado { font-size: 1.12rem; color: rgba(255, 255, 255, 0.84); line-height: 1.55; margin-bottom: 2rem; max-width: 34rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } /* Badge Hexagonal The Groomsman Collective */ .groomsman-badge { display: inline-flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; padding: 0.45rem 1.25rem 0.45rem 0.65rem; background: rgba(22, 16, 12, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(214, 178, 102, 0.35); border-radius: 9999px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(184, 116, 72, 0.15); } .groomsman-hexagon { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); } .groomsman-badge-txt { display: flex; flex-direction: column; line-height: 1.05; } .groomsman-badge-txt .badge-mini { font-size: 0.58rem; font-weight: 700; color: var(--realce); letter-spacing: 0.14em; } .groomsman-badge-txt .badge-main { font-size: 0.92rem; font-weight: 800; color: #ffffff; letter-spacing: 0.16em; margin: 2px 0 1px; } .groomsman-badge-txt .badge-sub { font-size: 0.54rem; font-weight: 600; color: var(--marca); letter-spacing: 0.22em; } /* Botões do Hero: Pill Primário com Efeito Shiny e Contorno */ .hero-painel-botoes { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .hero-btn-pill.shiny-cta { --shiny-cta-bg: #854923; --shiny-cta-bg-subtle: #b87448; --shiny-cta-fg: #ffffff; --shiny-cta-highlight: #f0a87b; --shiny-cta-highlight-subtle: #d6b266; padding: 0.9rem 2.3rem !important; font-size: 1rem !important; font-weight: 700 !important; border-radius: 9999px !important; color: #ffffff !important; box-shadow: 0 8px 25px -4px rgba(184, 116, 72, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .hero-btn-pill.shiny-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -4px rgba(184, 116, 72, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.45) !important; } .hero-btn-pill-outline { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.9rem 2.3rem !important; font-size: 1rem !important; font-weight: 650 !important; border-radius: 9999px !important; background: rgba(18, 13, 10, 0.55) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; transition: all 0.25s ease !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; } .hero-btn-pill-outline:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.2) !important; } .equipe-fichas { display: flex; gap: .6rem; flex-wrap: wrap; position: relative; z-index: 3; } .ficha-pessoa { display: flex; align-items: center; gap: .45rem; padding: .38rem .75rem .38rem .45rem; background: rgba(28, 22, 18, 0.85); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--raio-pill); box-shadow: 0 4px 15px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } .fp-txt { display: grid; line-height: 1.2; } .fp-txt strong { font-size: .8rem; color: #fff; } .fp-txt span { font-size: .68rem; color: var(--realce); } .ficha-pessoa .avatar { width: 28px; height: 28px; font-size: .64rem; } /* Iniciais em disco: cliente e barbeiro de demonstração NÃO ganham rosto de banco de imagem. Foto de gente inventada num painel é a mentira mais fácil de acreditar da página inteira. */ .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: var(--sobre-marca-suave); object-fit: cover; background: linear-gradient(calc(145deg + var(--n, 0) * 32deg), var(--marca-suave), var(--realce-suave)); } .avatar-p { width: 26px; height: 26px; font-size: .62rem; } /* ---------------------------- fichas de número --------------------------- */ .indicadores { display: grid; gap: .6rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } .ind { padding: .7rem .8rem; display: grid; gap: .22rem; } .ind-ic { color: var(--tinta-3); } .ind-linha { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; } .ind-linha strong { font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .ind-rot { font-size: .74rem; color: var(--tinta-3); } /* Selo de estado. Seis tons, todos derivados do tema: o mesmo componente serve "em andamento" (apoio), "aguardando" (âmbar) e "vencido" (vermelho) sem que nenhum deles seja um hexadecimal escrito à mão. */ .selo { font-size: .66rem; font-weight: 700; padding: .2rem .5rem; border-radius: var(--raio-pill); white-space: nowrap; letter-spacing: .01em; } /* Texto no degrau FORTE, fundo no degrau comum a 14%: medido em 5,3–6,0 de contraste. Com o degrau comum nos dois lados dava 3,6–4,3, abaixo de AA — e um selo de 11px em negrito não se qualifica como "texto grande". */ .selo-marca { background: color-mix(in srgb, var(--marca) 14%, transparent); color: var(--marca-forte); } .selo-realce { background: color-mix(in srgb, var(--realce) 14%, transparent); color: var(--realce-forte); } .selo-aviso { background: color-mix(in srgb, var(--aviso) 14%, transparent); color: var(--aviso-forte); } .selo-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-forte); } .selo-alerta { background: color-mix(in srgb, var(--alerta) 14%, transparent); color: var(--alerta-forte); } .selo-neutro { background: var(--fundo-3); color: var(--tinta-2); } /* ------------------------------ grade de painéis ------------------------- */ .quadros { display: grid; gap: .7rem; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .q-largo { grid-column: span 2; } .q-alto { grid-row: span 2; } .quadro { padding: 0; display: flex; flex-direction: column; overflow: hidden; } .quadro-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .8rem .9rem .5rem; } .quadro-cab h3 { font-size: .92rem; } .quadro-sub { font-size: .72rem; color: var(--tinta-3); margin-top: .1rem; } .quadro-acao { font-size: .74rem; font-weight: 650; color: var(--marca); white-space: nowrap; } .quadro-acao:hover { text-decoration: underline; } .quadro-corpo { padding: 0 .9rem .8rem; flex: 1; } .segmentado { display: flex; gap: 2px; padding: 3px; background: var(--fundo-3); border-radius: var(--raio-pill); flex: none; } .seg { border: none; background: none; cursor: pointer; padding: .26rem .62rem; border-radius: var(--raio-pill); font-size: .72rem; font-weight: 600; color: var(--tinta-3); } .seg.ativo { background: var(--fundo); color: var(--tinta); box-shadow: var(--sombra); } /* --------------------------------- agenda -------------------------------- */ .agenda, .fila, .avisos { list-style: none; padding: 0; display: grid; gap: .1rem; } .agenda-linha { display: flex; align-items: center; gap: .6rem; padding: .38rem .45rem; border-radius: var(--raio-p); transition: background .15s ease; } .agenda-linha:hover { background: var(--fundo-2); } /* A linha de agora é a única com preenchimento e régua: num painel, "onde eu estou" precisa ser achado sem procurar. */ .agenda-linha.agora { background: var(--fundo-2); box-shadow: inset 2px 0 0 var(--realce); } .agenda-hora { font-size: .72rem; color: var(--tinta-3); width: 2.9rem; flex: none; } .agenda-txt { display: grid; line-height: 1.25; min-width: 0; flex: 1; } .agenda-txt strong { font-size: .82rem; } .agenda-txt span { font-size: .71rem; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agenda-quem { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--tinta-2); padding-left: .7rem; border-left: 1px solid var(--moldura); flex: none; } .vazio-filtro { font-size: .8rem; color: var(--tinta-3); padding: 1rem .5rem; } /* Quadrado arredondado na agenda, disco na fila e na equipe: é a distinção da referência entre "um item da lista" e "uma pessoa". */ .agenda-linha .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: .64rem; } /* ---------------------------------- fila --------------------------------- */ .fila li { display: flex; align-items: center; gap: .5rem; padding: .38rem .45rem; border-radius: var(--raio-p); } .fila li:hover { background: var(--fundo-2); } .fila-n { font-size: .72rem; color: var(--tinta-3); width: 1.1rem; flex: none; } .fila-txt { display: grid; line-height: 1.25; flex: 1; min-width: 0; } /* Uma linha por campo, cortando com reticências. Na coluna de 1/3 o nome "Marcos A." quebrava em duas linhas e a fila virava um bloco de texto — numa fila, o que importa é varrer a coluna de cima a baixo, e linha de altura irregular impede exatamente isso. */ .fila-txt strong, .fila-txt span, .aviso-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* O NOME do item pode ocupar duas linhas; o resto, não. Cortar nome com reticências ("Pomada mod…") é pior do que uma segunda linha: a fila precisa de altura regular para ser varrida, mas um painel de três itens não — e nome pela metade não identifica coisa nenhuma. */ .aviso-txt strong { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fila-txt strong { font-size: .82rem; } .fila-txt span { font-size: .71rem; color: var(--tinta-3); } /* A espera cede espaço ANTES do nome: saber que "Marcos A." está na fila vale mais do que saber que ele espera há 8 minutos, e era o nome que estava sendo cortado. `min-width: 0` é o que destrava o encolhimento de um item flex com texto. */ .fila-espera { font-size: .7rem; color: var(--tinta-3); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .fila-txt { flex: 3 1 0; } .fila li .avatar, .avisos li .avatar { width: 28px; height: 28px; font-size: .64rem; } /* ------------------------------ barra do mix ----------------------------- */ .mix-total { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .9rem; } .mix-total strong { font-family: var(--fonte-titulo); font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; } .mix-total span { font-size: .76rem; color: var(--tinta-3); } .barra { display: flex; gap: 2px; height: 11px; border-radius: var(--raio-pill); overflow: hidden; background: var(--fundo-3); } .barra-fatia { height: 100%; } .legenda { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .9rem; } .legenda li { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--tinta-2); } .legenda i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .legenda em { font-style: italic; font-weight: 700; color: var(--tinta); } /* -------------------------------- gráfico -------------------------------- */ .mov { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; } .mov-resumo { margin: 0; } .serie { margin: 0; } /* Classe, e não o atributo `hidden`: `display:flex` de uma classe vence a folha do navegador e o quadro sairia com as três séries empilhadas. */ .serie:not(.ativa) { display: none; } .grafico { width: 100%; height: auto; overflow: visible; } .g-regua { stroke: var(--moldura); stroke-width: 1; stroke-dasharray: 3 5; } .g-rot { fill: var(--tinta-3); font-size: 15px; font-family: var(--fonte-texto); } .g-rot-x { text-anchor: middle; } .g-area { fill: color-mix(in srgb, var(--realce) 17%, transparent); stroke: none; } .g-linha { fill: none; stroke: var(--realce); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .g-pico { fill: var(--fundo); stroke: var(--realce); stroke-width: 2.5; } /* ------------------------------ painel de avisos ------------------------- */ .avisos li { display: flex; align-items: center; gap: .5rem; padding: .38rem .45rem; border-radius: var(--raio-p); } .avisos li:hover { background: var(--fundo-2); } .aviso-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--fundo-3); color: var(--tinta-2); } .aviso-txt { display: grid; line-height: 1.3; flex: 1; min-width: 0; } .aviso-txt strong { font-size: .8rem; line-height: 1.2; } .aviso-txt span { font-size: .7rem; color: var(--tinta-3); line-height: 1.25; } .aviso-marca { font-size: .69rem; font-weight: 700; font-style: italic; white-space: nowrap; } .tom-alerta { color: var(--alerta-forte); } .tom-aviso { color: var(--aviso-forte); } .tom-ok { color: var(--ok-forte); } .tom-realce { color: var(--realce-forte); } .tom-marca { color: var(--marca-forte); } .tom-neutro { color: var(--tinta-2); } /* Ajustes refinados de Dark Luxury para arq-painel */ .arq-painel .indicadores { position: relative; z-index: 3; margin-top: 2rem; } .arq-painel .ind { background: rgba(24, 18, 14, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); padding: 0.85rem 1rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .arq-painel .ind:hover { transform: translateY(-3px); border-color: rgba(214, 178, 102, 0.35); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 14px rgba(184, 116, 72, 0.18); } .arq-painel .ind-ic { color: var(--realce); } .arq-painel .ind-linha strong { color: #ffffff; font-size: 1.65rem; } .arq-painel .ind-rot { color: rgba(255, 255, 255, 0.65); } .arq-painel .quadro { background: rgba(26, 19, 15, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } .arq-painel .quadro-cab { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .arq-painel .quadro-cab h3 { color: #ffffff; font-size: 1.05rem; font-family: var(--fonte-titulo); } .arq-painel .quadro-sub { color: rgba(255, 255, 255, 0.6); } .arq-painel .quadro-acao { color: var(--realce); text-decoration: none; transition: color 0.2s ease; } .arq-painel .quadro-acao:hover { color: #ffffff; text-shadow: 0 0 8px rgba(214, 178, 102, 0.6); } .arq-painel .segmentado { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.07); } .arq-painel .seg { color: rgba(255, 255, 255, 0.6); } .arq-painel .seg.ativo { background: linear-gradient(135deg, #b87448, #8f5228); color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .arq-painel .agenda-linha { border-radius: 10px; transition: background 0.15s ease; } .arq-painel .agenda-linha:hover { background: rgba(255, 255, 255, 0.05); } .arq-painel .agenda-linha.agora { background: rgba(184, 116, 72, 0.16); border: 1px solid rgba(184, 116, 72, 0.35); box-shadow: inset 3px 0 0 var(--realce), 0 2px 12px rgba(184, 116, 72, 0.15); } .arq-painel .agenda-hora { color: var(--realce); font-weight: 600; } .arq-painel .agenda-txt strong { color: #ffffff; } .arq-painel .agenda-txt span { color: rgba(255, 255, 255, 0.6); } .arq-painel .agenda-quem { border-left: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); } .arq-painel .fila li:hover { background: rgba(255, 255, 255, 0.05); } .arq-painel .fila-n { color: var(--realce); font-weight: 700; } .arq-painel .fila-txt strong { color: #ffffff; } .arq-painel .fila-txt span { color: rgba(255, 255, 255, 0.6); } .arq-painel .chamada { background: linear-gradient(135deg, #1c1511 0%, #2a1c14 100%); color: #ffffff; border-block: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .arq-painel .chamada h2 { font-family: var(--fonte-titulo); color: #ffffff; } .arq-painel .chamada .botao { border-radius: var(--raio-pill); } /* A referência é uma tela de 1024 com o painel largo em 2/3 e a coluna da direita em 1/3 — então a quebra para duas colunas só pode acontecer ABAIXO disso. Quebrando em 1100 o modelo aparecia empilhado justamente na largura em que ele foi desenhado, que é a largura de um notebook comum. */ @media (max-width: 950px) { .quadros { --cols: 2 !important; } .q-alto { grid-row: auto; } } @media (max-width: 700px) { .quadros { --cols: 1 !important; } .q-largo { grid-column: auto; } .arq-painel .topo, .arq-painel main, .arq-painel .rodape { margin-inline: 0; border-radius: 0; border-inline: none; } .arq-painel .topo-busca { display: none; } .arq-painel .nav { margin-left: 0; } /* ⚠️ Em `flex-direction: column` a base flexível passa a ser ALTURA: o `flex: 1 1 26rem` que segura o título ao lado das fichas no desktop abria 364px de vazio no celular. A base volta a ser automática aqui. */ .painel-cabeca { flex-direction: column; } .painel-titulo { flex: 0 0 auto; } .equipe-fichas { width: 100%; } .agenda-quem { display: none; } /* a linha já diz cliente, serviço e estado */ .agenda-hora { width: 2.7rem; } } /* cinema — a barbearia como FILME ------------------------------------------- Referência: white-desert.com. A tese da direção é que a página não descreve o lugar, ela te põe dentro dele: mídia sangrando na tela inteira, cromo reduzido a botões de contorno fino, uma palavra gigante condensada cortada pela borda, e — entre uma cena e outra — páginas brancas com uma frase enorme em serifa e muito silêncio em volta. O que muda aqui não é cor: é RITMO. Cena escura, respiro branco, cena escura. Os outros dezessete modelos entregam informação em blocos seguidos; este alterna cheio e vazio, e o vazio é metade do trabalho — encurtar os espaços "para caber mais" desmonta o modelo inteiro. */ .arq-cinema { --regua: color-mix(in srgb, var(--tinta) 12%, transparent); line-height: 1.5; } .arq-cinema .caixa { width: min(1360px, 100% - 3rem); } .arq-cinema h1, .arq-cinema h2 { font-weight: 400; letter-spacing: -.005em; } .arq-cinema h3 { font-family: var(--fonte-titulo); font-weight: 400; } /* Cromo: retângulo de contorno fino, nunca preenchido. Na referência todo botão é uma moldura translúcida — é o que deixa a mídia ser o assunto. */ /* A barra flutua POR CIMA da mídia, mas continua no fluxo: `position:absolute` fazia ela encavalar na faixa de demonstração (as duas em y=0), porque a posição estática de um elemento absoluto com `left` e `right` definidos não é confiável quando há outro elemento absoluto no meio. Margem negativa resolve sem depender disso — e a faixa, quando existe, empurra tudo naturalmente. */ .arq-cinema .topo { background: transparent; border-bottom: none; backdrop-filter: none; position: relative; z-index: 30; margin-bottom: -76px; } .arq-cinema .topo-int { min-height: 76px; } .arq-cinema .marca-nome { font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: .22em; font-size: .95rem; font-weight: 500; } .arq-cinema .marca-slogan { display: none; } /* a capa já diz do que se trata */ .arq-cinema .nav { gap: 0; } .arq-cinema .nav a { padding: .6rem 1.1rem; font-size: .8rem; border: 1px solid var(--moldura-cinema, currentColor); border-right-width: 0; } .arq-cinema .nav a:last-child { border-right-width: 1px; } .arq-cinema .botao { border-radius: 0; border-width: 1px; font-weight: 500; letter-spacing: .02em; text-transform: none; } .arq-cinema .idiomas { border-radius: 0; } /* Sobre mídia escura, o cromo inteiro fica branco e translúcido. */ .arq-cinema .hero-cinema ~ * { --sobre-midia: initial; } .cinema-claro .topo a, .cinema-claro .topo button { color: #fff; } .cinema-claro .nav a, .cinema-claro .idiomas { border-color: rgba(255,255,255,.45); } .cinema-claro .nav a:hover { background: rgba(255,255,255,.14); } .cinema-claro .idiomas a.ativo { background: #fff; color: var(--tinta); } .cinema-claro .botao-cheio { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.45); box-shadow: none; } .cinema-claro .botao-cheio:hover { background: #fff; color: var(--tinta); } /* ------------------------------- a capa ---------------------------------- */ .hero-cinema { position: relative; min-height: 100svh; padding: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; } .cena-midia { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--fundo-4); } .cena-midia img, .cena-midia video { width: 100%; height: 100%; object-fit: cover; } /* A deriva lenta é a "animação" da capa quando não há filme: 28s de escala e translação quase imperceptíveis. Não é enfeite — é o que diferencia uma foto parada de um plano de cinema. Some inteira em prefers-reduced-motion. */ .cena-midia img { animation: deriva 28s ease-in-out infinite alternate; transform-origin: 54% 46%; } @keyframes deriva { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); } } /* Véu: o texto branco precisa de piso de contraste sobre foto que não se controla. Dois gradientes em vez de um preto chapado — o chapado apaga a imagem, que é justamente o conteúdo. */ .hero-cinema::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,14,22,.46) 0%, rgba(10,14,22,.12) 34%, rgba(10,14,22,.30) 62%, rgba(10,14,22,.72) 100%); } .cinema-int { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1rem; flex-wrap: wrap; } .cinema-linha { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.05rem; line-height: 1.45; max-width: 22ch; text-wrap: balance; } .cinema-filme { display: inline-flex; align-items: center; gap: .9rem; padding: .85rem 1.3rem; border: 1px solid rgba(255,255,255,.45); font-size: .85rem; letter-spacing: .02em; } .cinema-filme:hover { background: rgba(255,255,255,.14); } .cinema-filme .ic { flex: none; } /* A palavra gigante, cortada pela borda de baixo. `clamp` com vw domina: ela tem de crescer com a tela, senão deixa de ser um plano e vira um título. */ .cinema-palavra { font-family: var(--fonte-display); text-transform: uppercase; font-weight: 500; font-size: clamp(3.5rem, 17.5vw, 17rem); line-height: .78; letter-spacing: -.015em; margin: 0 auto -.14em; width: min(1360px, 100% - 3rem); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: clip; } .hero-cinema .numeros { border-top-color: rgba(255,255,255,.3); } .hero-cinema .numeros dt { color: rgba(255,255,255,.72); } /* --------------------------- respiro editorial --------------------------- */ /* A página branca entre duas cenas. O tamanho do vazio é o desenho. */ .manifesto { padding: clamp(5rem, 15vh, 11rem) 0; } .manifesto-rot { display: flex; align-items: center; gap: .9rem; margin-bottom: 2.2rem; font-family: var(--fonte-titulo); font-style: italic; font-size: .95rem; color: var(--tinta-2); } /* A régua fininha que acompanha o rótulo — na referência é um traço desenhado à mão; aqui é uma linha com um laço, em SVG inline no gabarito. */ .manifesto-rot svg { flex: none; opacity: .55; } .manifesto p { font-family: var(--fonte-titulo); text-transform: uppercase; font-size: clamp(1.45rem, 3.5vw, 2.9rem); line-height: 1.16; letter-spacing: -.01em; color: var(--tinta); max-width: 20ch; font-weight: 400; margin-bottom: .6em; } .manifesto p:last-child { margin-bottom: 0; } @media (min-width: 900px) { .manifesto-int { display: grid; grid-template-columns: 3fr 9fr; gap: 0; } .manifesto p { max-width: 24ch; } } /* ------------------------------ cena com ficha --------------------------- */ /* Banda de mídia inteira com uma ficha encaixada por cima, deslocada. É o componente que a referência usa para cada acampamento — aqui, para cada serviço de assinatura. */ .cena { position: relative; min-height: clamp(26rem, 62vh, 40rem); display: grid; align-items: center; overflow: hidden; isolation: isolate; } .cena { background: var(--tinta); } .cena::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,14,22,.42), rgba(10,14,22,.06) 55%); } .cena-ficha { position: relative; width: min(46rem, 100%); margin-left: auto; margin-right: 0; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(6px); padding: 2.6rem clamp(1.4rem, 3vw, 3rem) 0; text-align: center; } .cena-ficha h3 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; } .cena-ficha p { margin: .9rem auto 0; max-width: 46ch; color: var(--tinta-2); font-size: .95rem; } .cena-arte { margin: 1.8rem calc(clamp(1.4rem, 3vw, 3rem) * -1) 0; position: relative; } /* Escurece só a faixa de baixo da foto, atrás da coda. Sombra de texto não basta: a coda caía sobre a parte clara da imagem e sumia — e ela é justamente o dado que decide a compra (duração e ferramenta). */ .cena-arte::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(10,14,22,.82)); pointer-events: none; } .cena-arte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* A coda técnica: o dado seco entre colchetes, na fonte de display. Na referência são as coordenadas do acampamento; aqui é duração e ferramenta — a informação que decide a compra, dita sem adjetivo. */ .cena-coda { position: absolute; left: 0; right: 0; bottom: 1.1rem; color: #fff; z-index: 1; font-family: var(--fonte-display); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(10,14,22,.6); } /* ------------------------ lista editorial de serviços -------------------- */ .arq-cinema .lista-itens li { padding: 1.5rem 0; border-color: var(--regua); align-items: baseline; } .arq-cinema .li-nome { font-family: var(--fonte-titulo); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; } .arq-cinema .li-resumo { font-size: .86rem; } .arq-cinema .li-pontos { border-bottom-style: solid; border-color: var(--regua); } .arq-cinema .preco { font-family: var(--fonte-display); font-weight: 400; letter-spacing: .04em; } .arq-cinema .cabeca { max-width: none; } .arq-cinema .cabeca h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: .03em; } .arq-cinema .chip { border-radius: 0; border-color: var(--regua); background: none; font-family: var(--fonte-display); letter-spacing: .2em; } .arq-cinema .cartao { border-radius: 0; border-color: var(--regua); background: none; } .arq-cinema .secao { padding: clamp(3.5rem, 9vw, 7rem) 0; } .arq-cinema .retrato { border-radius: 0; width: 100%; height: auto; aspect-ratio: 3 / 4; } .arq-cinema .pessoa { text-align: left; } .arq-cinema .pessoa-papel { color: var(--realce); font-family: var(--fonte-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; } .arq-cinema .aspas blockquote { font-family: var(--fonte-titulo); font-size: 1.15rem; } .arq-cinema .chamada { background: var(--tinta); color: var(--fundo); } .arq-cinema .chamada h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); } .arq-cinema .rodape { background: var(--fundo); border-top: 1px solid var(--regua); } @media (max-width: 860px) { .arq-cinema .topo { position: static; background: var(--fundo); } .cinema-claro .topo a, .cinema-claro .topo button { color: var(--tinta); } .cinema-claro .nav a, .cinema-claro .idiomas { border-color: var(--regua); } .hero-cinema { min-height: 86svh; } .cinema-int { flex-direction: column; align-items: flex-start; } .cena-ficha { margin-inline: auto; } .cena { min-height: 0; padding: 3rem 0; } } /* Filme no lugar da peça geométrica (ver secoes.html). Herda o raio e a proporção do arquétipo — no `papel` fica quadro reto, no `macio` arredondado. */ .hero-arte-filme { background: var(--fundo-3); } .hero-arte-filme video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ------------------------------------------- vida na peça da capa */ /* Sete das dezoito capas tinham a peça geométrica ocupando meia tela sem dizer nada — o `classica` era o pior caso, um retângulo cinza que o olho lê como imagem quebrada. A peça existe de propósito (item sem foto NÃO ganha foto de banco de imagem, ver o topo de secoes.html); o que faltava era ela estar viva. ⚠️ Cada arquétipo ganha um movimento PRÓPRIO, e isso não é capricho: se as dezoito capas passassem a ter a mesma animação, o hub perderia exatamente o que ele vende, que é cara diferente por modelo. Aros respiram, arcos sobem e descem, blocos deslizam, etiquetas balançam, réguas se desenham. Todas são lentas (9-16s), de amplitude pequena e em `alternate` — movimento que se nota pelo canto do olho e não disputa com o texto. A regra global no topo desta folha zera tudo em `prefers-reduced-motion`. */ /* editorial (premium, unissex) — os dois aros respiram fora de fase e a ponte entre eles pulsa: é uma armação de óculos, e armação não gira. */ .arq-editorial .hero-arte span:nth-child(1) { animation: aro-respira 11s ease-in-out infinite alternate; } .arq-editorial .hero-arte span:nth-child(2) { animation: aro-respira 11s ease-in-out infinite alternate-reverse; } .arq-editorial .hero-arte span:nth-child(3) { animation: ponte 11s ease-in-out infinite alternate; } @keyframes aro-respira { from { transform: scale(1); } to { transform: scale(1.05); } } @keyframes ponte { from { opacity: .45; width: 6%; } to { opacity: 1; width: 10%; } } /* sereno (lounge, calma) — os arcos sobem e descem devagar, como respiração. É o arquétipo do "sem pressa": o movimento tinha de ser o mais lento de todos. */ .arq-sereno .hero-arte span:nth-child(1) { animation: mare 16s ease-in-out infinite alternate; } .arq-sereno .hero-arte span:nth-child(2) { animation: mare 16s ease-in-out infinite alternate-reverse; } @keyframes mare { from { transform: translateY(3%); } to { transform: translateY(-4%); } } /* bloco (escola) — os retângulos deslizam em tempos diferentes, como peças sendo encaixadas. */ .arq-bloco .hero-arte span:nth-child(1) { animation: encaixa 9s ease-in-out infinite alternate; } .arq-bloco .hero-arte span:nth-child(2) { animation: encaixa 9s ease-in-out .9s infinite alternate-reverse; } .arq-bloco .hero-arte span:nth-child(3) { animation: encaixa 9s ease-in-out 1.8s infinite alternate; } @keyframes encaixa { from { transform: translate(0, 0); } to { transform: translate(3%, -2.5%); } } /* tabloide (combos) — as etiquetas balançam de leve, penduradas. */ .arq-tabloide .hero-arte span:nth-child(1) { animation: pendura 10s ease-in-out infinite alternate; } .arq-tabloide .hero-arte span:nth-child(2) { animation: pendura 10s ease-in-out 1.2s infinite alternate-reverse; } .arq-tabloide .hero-arte span:nth-child(3) { animation: pendura 10s ease-in-out 2.4s infinite alternate; } @keyframes pendura { from { transform: rotate(-3deg); } to { transform: rotate(1.5deg); } } /* papel (classica) — a régua se desenha da esquerda para a direita e o quadro vazio ganha um fio de luz. Contenção é a direção deste arquétipo: aqui o movimento é o menor da folha. */ .arq-papel .hero-arte span:nth-child(1) { animation: regua 13s ease-in-out infinite alternate; } .arq-papel .hero-arte span:nth-child(2) { animation: regua 13s ease-in-out 1.5s infinite alternate; } .arq-papel .hero-arte span:nth-child(3) { animation: aro-respira 13s ease-in-out infinite alternate; } @keyframes regua { from { width: 18%; opacity: .35; } to { width: 76%; opacity: .9; } } /* macio (familia, bairro) — as bolhas flutuam. Estes dois já tinham gradiente quente e não estavam vazios, mas a peça parada no meio denunciava. */ .arq-macio .hero-arte span:nth-child(1) { animation: flutua 12s ease-in-out infinite alternate; } .arq-macio .hero-arte span:nth-child(2) { animation: flutua 12s ease-in-out 2s infinite alternate-reverse; } .arq-macio .hero-arte span:nth-child(3) { animation: flutua 12s ease-in-out 4s infinite alternate; } @keyframes flutua { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3%, -4%) scale(1.06); } } /* ============================================================== TEXTURAS */ /* Fundo por ramo. Tudo em gradiente CSS: zero requisição, zero imagem. */ body[class*='tex-'] { background-attachment: fixed; } .tex-encarte { background-image: repeating-linear-gradient(90deg, transparent 0 78px, color-mix(in srgb, var(--tinta) 4%, transparent) 78px 79px); } .tex-ondas { background-image: radial-gradient(120% 60% at 50% -10%, var(--marca-suave), transparent 70%); } .tex-lentes { background-image: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--marca) 12%, transparent) 0 1px, transparent 1px), radial-gradient(circle at 82% 12%, transparent 118px, color-mix(in srgb, var(--tinta) 6%, transparent) 118px 119px, transparent 120px); } .tex-bolhas { background-image: radial-gradient(circle at 12% 8%, var(--marca-suave), transparent 34%), radial-gradient(circle at 92% 32%, var(--realce-suave), transparent 30%); } .tex-brasa { background-image: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--marca) 22%, transparent), transparent 68%); } .tex-fita { background-image: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--tinta) 3%, transparent) 22px 44px); } .tex-papel { background-image: repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--tinta) 3%, transparent) 31px 32px); } .tex-planta { background-image: linear-gradient(color-mix(in srgb, var(--tinta) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tinta) 4%, transparent) 1px, transparent 1px); background-size: 46px 46px, 46px 46px; } .tex-risco { background-image: repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--marca) 6%, transparent) 18px 36px); } .tex-pontos { background-image: radial-gradient(color-mix(in srgb, var(--tinta) 8%, transparent) 1px, transparent 1px); background-size: 22px 22px; } .tex-petala { background-image: radial-gradient(80% 50% at 100% 0%, var(--marca-suave), transparent 60%), radial-gradient(60% 40% at 0% 100%, var(--realce-suave), transparent 60%); } .tex-folha { background-image: radial-gradient(70% 45% at 8% 4%, var(--marca-suave), transparent 62%); } .tex-filme { background-image: radial-gradient(130% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%); } .tex-nenhuma { background-image: none; } /* Régua de colunas: as linhas verticais finíssimas que atravessam a página inteira na referência, inclusive por cima da mídia. É o que dá a sensação de projeto editorial em vez de site montado em blocos. */ .tex-colunas { background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), color-mix(in srgb, var(--tinta) 16%, transparent) calc(100% / 6 - 1px), transparent calc(100% / 6)); } /* Aparecer ao rolar. Só entra depois que o JS marca — sem JS, tudo visível. */ .js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .revelar.dentro { opacity: 1; transform: none; } /* ------------------------------------------------------------ responsivo */ @media (max-width: 860px) { .nav { position: fixed; inset: 0 0 auto; top: 72px; flex-direction: column; gap: 0; background: var(--fundo); border-bottom: 1px solid var(--traco-2); padding: .5rem 1.25rem 1.25rem; display: none; } .nav.aberto { display: flex; } .nav a { padding: .85rem 0; border-bottom: 1px solid var(--traco-2); } .menu-botao { display: grid; place-items: center; } .topo-acoes .botao { display: none; } .numeros { gap: 1.5rem; } .chamada-int { flex-direction: column; align-items: flex-start; } } /* ------------------------------------------------------------ hero respiro */ /* A capa de quem vende TEMPO (ver a macro `hero_respiro` em secoes.html). Toda medida aqui é o contrário da capa padrão, e de propósito: onde a padrão aperta, esta afasta; onde a padrão engorda o título, esta afina. Se um dia alguém "corrigir" isto para ficar igual às outras, o modelo volta a ser mais um retângulo de texto com uma foto do lado. */ .hero-respiro { padding: clamp(5rem, 16vh, 11rem) 0 0; overflow: hidden; } .hero-respiro .hero-int { grid-template-columns: 1fr; gap: 0; } /* Recuado da margem: o texto não encosta na borda esquerda como um cabeçalho — ele fica no meio de um campo de ar, que é o assunto do modelo. */ .hero-respiro .hero-texto { max-width: 36ch; margin-left: clamp(0rem, 9vw, 11rem); } /* Peso 400 e corpo médio. A capa padrão usa peso 700/800 num corpo enorme; aqui a casa fala baixo — é a diferença entre "SEM PRESSA" e sem pressa. */ /* Medida MUITO curta no título, de propósito — e é uma restrição do desenho, não um número mágico: esta capa foi feita para título de frases curtas ("Uma cadeira. Um cliente. Sem pressa."), e a coluna estreita faz cada frase cair na sua linha, virando três afirmações empilhadas. Com a medida do parágrafo ela quebrava em "Um cliente. Sem / pressa." e o ritmo — que é o argumento do modelo — ia embora. ⚠️ Quem for usar `respiro` noutro modelo: título longo aqui vira torre magra. Capa que promete calma não comporta manchete de noventa caracteres; se o texto for longo, o modelo pede outra variante, não uma medida maior. */ .hero-respiro h1 { font-size: clamp(1.8rem, 3.1vw, 2.85rem); font-weight: 400; line-height: 1.24; letter-spacing: -.008em; max-width: 11ch; text-wrap: pretty; } .hero-respiro .hero-linha { max-width: 40ch; margin-top: 1.5rem; } .hero-respiro .hero-acoes { margin-top: 2.6rem; } /* O horizonte: sangra de ponta a ponta e fecha a tela. Baixo e largo — faixa, não bloco. Continua no celular (é a atmosfera do modelo, não enfeite de desktop), ao contrário de `.hero-arte`, que some abaixo de 900px. */ .hero-horizonte { margin-top: clamp(3.5rem, 9vh, 7rem); height: clamp(200px, 32vh, 360px); } .hero-horizonte video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ------------------------------------------------------ hero cartão gravado */ /* `classica`. A única capa do conjunto com BORDA — é isso que a separa das outras à primeira vista. Medida curta e tudo centrado: cartão, não página. */ .hero-cartao { padding: clamp(3rem, 7vw, 5.5rem) 0; } .cartao-gravado { max-width: 62ch; margin-inline: auto; text-align: center; border: 1px solid var(--marca); border-radius: var(--raio); padding: clamp(1.6rem, 3.5vw, 2.8rem); background: var(--fundo); } /* A gravura: faixa larga e BAIXA (21:9). Foto em 4:3 dentro de um cartão vira "foto com legenda"; deitada, vira ornamento gravado, que é o que se quer. */ .cartao-gravura { aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--raio-p); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); background: var(--fundo-3); } .cartao-gravura video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-cartao h1 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.16; padding-bottom: clamp(1rem, 2vw, 1.4rem); border-bottom: 1px solid var(--traco-2); } .hero-cartao .hero-linha { margin-inline: auto; max-width: 48ch; } .hero-cartao .hero-acoes { justify-content: center; } /* ------------------------------------------------------------- hero sala */ /* `lounge`. A mídia é a tela; o texto desce para o canto de baixo. */ .hero-sala { position: relative; min-height: clamp(460px, 76vh, 760px); display: flex; align-items: flex-end; padding: 0 0 clamp(2.5rem, 6vh, 4.5rem); overflow: hidden; } .sala-midia { position: absolute; inset: 0; } .sala-midia video { width: 100%; height: 100%; object-fit: cover; display: block; } /* O véu. Sem ele o texto some num quadro claro do filme — e quadro claro é justamente o que uma sala com janela produz. */ .sala-midia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,14,13,.82) 0%, rgba(12,14,13,.5) 34%, rgba(12,14,13,.12) 68%); } .sala-texto { position: relative; z-index: 1; max-width: 46ch; } /* Branco fixo, NÃO do tema: sobre vídeo a cor do tema não garante contraste. */ .hero-sala h1, .hero-sala .hero-linha { color: #fff; } .hero-sala h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; } .hero-sala .hero-linha { color: rgba(255,255,255,.88); } .hero-sala .botao-vazado { border-color: rgba(255,255,255,.62); color: #fff; } .hero-sala .botao-vazado:hover { background: rgba(255,255,255,.14); } /* --------------------------------------------------------- hero revista */ /* `premium`. Manchete na largura inteira; embaixo, coluna estreita de entrada ao lado de mídia que sangra até a borda da JANELA. */ .hero-revista { padding: clamp(3rem, 7vw, 6rem) 0 0; overflow: hidden; } .hero-revista h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; max-width: 20ch; } .revista-corpo { display: grid; gap: clamp(1.8rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3.2rem); align-items: end; } .revista-entrada { padding-bottom: clamp(1rem, 3vw, 2.4rem); } .hero-revista .hero-linha { max-width: 30ch; } .revista-midia { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fundo-3); } .revista-midia video { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 900px) { .revista-corpo { grid-template-columns: minmax(0, 30ch) 1fr; } /* O sangramento: leva a mídia da coluna até a borda da janela. */ .revista-midia { margin-right: calc(50% - 50vw); aspect-ratio: 21 / 10; } } /* -------------------------------------------------------- hero contraste */ /* `unissex`. Declaração no alto à esquerda, resposta embaixo à direita, vazio no meio — a diagonal É a composição. */ .hero-contraste { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); } .hero-contraste h1 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); font-weight: 300; line-height: 1.12; letter-spacing: .012em; max-width: 17ch; } /* O vazio do meio é medido, não sobra: é ele que faz a frase respirar como declaração em vez de manchete de anúncio. */ .contraste-pe { margin-top: clamp(3.5rem, 11vh, 8rem); display: flex; justify-content: flex-end; } .contraste-pe > * { text-align: left; } .hero-contraste .hero-linha { max-width: 42ch; margin-top: 0; } @media (max-width: 860px) { .contraste-pe { justify-content: flex-start; } } /* ----------------------------------------------------------- hero portas */ /* `escola`. Duas ofertas, duas portas, um fio entre elas. */ .hero-portas { padding: clamp(3rem, 7vw, 5.5rem) 0; } .hero-portas h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -.02em; max-width: 19ch; } .hero-portas .hero-linha { max-width: 62ch; } .portas { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2.2rem, 5vw, 3.4rem); border-top: 1px solid var(--traco-2); padding-top: clamp(1.6rem, 3.5vw, 2.6rem); } @media (min-width: 820px) { .portas { grid-template-columns: 1fr 1fr; } /* O fio entre as portas: é ele que diz que são DUAS coisas, não dois botões da mesma coisa. */ .porta-escola { border-left: 1px solid var(--traco-2); padding-left: clamp(1.4rem, 3vw, 2.4rem); } } .porta .numeros { margin-top: 1.5rem; } /* ------------------------------------------------------------ hero único */ /* `cuidado`. Campo alto, uma ação só, e os dados numa faixa fina no pé. */ .hero-unico { padding: clamp(4rem, 12vh, 8rem) 0 0; } .hero-unico h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 400; line-height: 1.14; max-width: 21ch; } .hero-unico .hero-linha { max-width: 50ch; } /* Ação única e GRANDE: o modelo se define pelo botão de agendar ser o único ponto de cor da tela — então ele tem o tamanho de quem é o único. */ .hero-unico .hero-acoes { margin-top: clamp(2rem, 4vw, 2.8rem); } .hero-unico .hero-acoes .botao { padding: .95rem 1.9rem; font-size: 1.04rem; } /* ------------------------------------------------------- hero diretório */ /* `rede`. O corpo da capa é o índice das lojas — resposta imediata a "quais são", antes do endereço completo que vem na seção de unidades. */ .hero-diretorio { padding: clamp(3rem, 7vw, 5rem) 0; } .hero-diretorio h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.018em; max-width: 18ch; } .hero-diretorio .hero-linha { max-width: 58ch; } .diretorio { list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; padding: 0; display: grid; gap: 1px; background: var(--traco-2); border-block: 1px solid var(--traco-2); } /* Fundo no `gap` + fundo em cada item = fios de 1px entre as lojas sem `border` por item (que somaria e daria fio duplo nas junções). */ .diretorio li { background: var(--fundo); } .diretorio a { display: block; padding: .95rem 1rem; } .diretorio a:hover { background: var(--fundo-2); } .diretorio strong { display: block; font-size: 1rem; letter-spacing: -.01em; } .diretorio span { display: block; margin-top: .15rem; font-size: .84rem; color: var(--tinta-2); } @media (min-width: 760px) { .diretorio { grid-auto-flow: column; grid-auto-columns: 1fr; } } /* ---------------------------------------------------------- hero oferta */ /* `combos`. A etiqueta de preço no lugar onde havia três retângulos. */ .hero-oferta { padding: clamp(3rem, 7vw, 5rem) 0; } .hero-oferta-int { align-items: center; } @media (min-width: 900px) { .hero-oferta-int { grid-template-columns: 1fr auto; } } .hero-oferta h1 { font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.04; letter-spacing: -.022em; } .etiqueta-preco { display: grid; justify-items: center; gap: .25rem; text-align: center; padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(2rem, 4.5vw, 3.2rem); border-radius: var(--raio); background: var(--marca); color: var(--marca-tinta); box-shadow: 0 12px 30px rgba(16,18,26,.14); } .etiqueta-nome { font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .88; } .etiqueta-antes { font-size: 1rem; opacity: .72; text-decoration: line-through; } /* O "número gordo" que o modelo promete e não tinha. */ .etiqueta-valor { font-size: clamp(2.4rem, 5.4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- ARQ-BRAND */ /* Inspirado em brand.squarespace.com: rigor editorial suíço, fundo escuro, bordas hairline (1px), indexação mono ( 01 ), tipografia em caixa alta e precisão arquitetônica. */ .arq-brand { --regua-brand: rgba(255, 255, 255, 0.12); --regua-suave: rgba(255, 255, 255, 0.06); letter-spacing: -0.01em; } .arq-brand .caixa { width: min(1280px, 100% - 3.5rem); } /* Tipografia */ .arq-brand h1, .arq-brand h2 { text-transform: uppercase; letter-spacing: -0.025em; font-weight: 500; } .arq-brand .chip, .arq-brand .saudacao, .arq-brand .rotulo, .arq-brand .trilha-n { font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } /* Header / Topo */ .arq-brand .topo { border-bottom: 1px solid var(--regua-brand); background: rgba(18, 20, 24, 0.85); backdrop-filter: blur(12px); } .arq-brand .marca-nome { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.95rem; } .arq-brand .nav a { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; } .arq-brand .idiomas { border-radius: 2px; border: 1px solid var(--regua-brand); background: rgba(255, 255, 255, 0.03); padding: 2px; } .arq-brand .idiomas a { border-radius: 2px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.66rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); } .arq-brand .idiomas a:hover { color: #ffffff; } .arq-brand .idiomas a.ativo { background: #ffffff; color: #121418; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* Botões */ .arq-brand .botao { border-radius: 2px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.75rem 1.4rem; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .arq-brand .botao-cheio { background: #ffffff; color: #0b0d10; border: 1px solid #ffffff; } .arq-brand .botao-cheio:hover { background: transparent; color: #ffffff; } .arq-brand .botao-vazado { border: 1px solid var(--regua-brand); color: #ffffff; } .arq-brand .botao-vazado:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); } /* Hero Editorial Brand */ .arq-brand .hero-editorial { padding: clamp(4rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--regua-brand); } .arq-brand .hero-editorial .hero-int { gap: clamp(2rem, 5vw, 4rem); align-items: center; } .arq-brand .hero-editorial h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 0.96; } .arq-brand .hero-editorial .hero-linha { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--tinta-2); line-height: 1.5; max-width: 52ch; margin: 1.5rem 0 2rem; } .arq-brand .hero-editorial .chip-forte { background: transparent; border: 1px solid var(--regua-brand); color: var(--tinta); padding: 0.35rem 0.75rem; border-radius: 2px; display: inline-block; margin-bottom: 1.5rem; } /* Moldura técnica da arte da capa (Squarespace Frame Mask) */ .arq-brand .hero-editorial .hero-arte { border-radius: 2px; border: 1px solid var(--regua-brand); background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%), linear-gradient(to bottom, #16181d, #0e1014); aspect-ratio: 4 / 3; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .arq-brand .hero-editorial .hero-arte::before { content: '+'; position: absolute; top: 12px; left: 12px; font-family: ui-monospace, monospace; font-size: 14px; color: var(--regua-brand); z-index: 2; } .arq-brand .hero-editorial .hero-arte::after { content: '+'; position: absolute; bottom: 12px; right: 12px; font-family: ui-monospace, monospace; font-size: 14px; color: var(--regua-brand); z-index: 2; } .arq-brand .hero-editorial .hero-arte span:nth-child(1) { inset: 12% auto auto 12%; width: 50%; height: 50%; border: 1px solid var(--regua-brand); border-radius: 2px; background: rgba(255, 255, 255, 0.02); } .arq-brand .hero-editorial .hero-arte span:nth-child(2) { inset: auto 14% 14% auto; width: 44%; height: 44%; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 2px; } .arq-brand .hero-editorial .hero-arte span:nth-child(3) { inset: 48% 0 auto 0; width: 100%; height: 1px; background: var(--regua-brand); border: none; } /* Seções e Grade */ .arq-brand .secao { padding: clamp(4rem, 8vw, 6.5rem) 0; border-bottom: 1px solid var(--regua-brand); } .arq-brand .cabeca h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); } .arq-brand .cartao { background: #14161a; border: 1px solid var(--regua-brand); border-radius: 2px; padding: 1.8rem; transition: border-color 0.2s ease; } .arq-brand .cartao:hover { border-color: rgba(255, 255, 255, 0.35); } /* Passos com numeração em destaque */ .arq-brand .trilha { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .arq-brand .trilha li { border: 1px solid var(--regua-brand); padding: 2rem; background: #121418; border-radius: 2px; } .arq-brand .trilha-n { color: #ffffff; border-bottom: 1px solid var(--regua-brand); padding-bottom: 0.5rem; margin-bottom: 1rem; display: block; } /* Fichas de Serviço (Itens) */ .arq-brand .lista-itens li { border-bottom: 1px solid var(--regua-brand); padding: 1.4rem 0; } .arq-brand .li-nome { text-transform: uppercase; font-family: var(--fonte-titulo); font-size: 1.15rem; letter-spacing: 0.02em; } .arq-brand .preco { font-family: ui-monospace, monospace; font-size: 1.1rem; color: #ffffff; } /* Rodapé e Faixa */ .arq-brand .faixa { border-bottom: 1px solid var(--regua-brand); background: #0e1013; } .arq-brand .rodape { border-top: 1px solid var(--regua-brand); background: #090a0c; } /* Hero com Filme e Efeito Frame Mask Squarespace */ .arq-brand .hero-editorial .hero-arte-filme { position: relative; border-radius: 2px; border: 1px solid var(--regua-brand); background: #090a0d; aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75); transition: border-color 0.3s ease; } .arq-brand .hero-editorial .hero-arte-filme:hover { border-color: rgba(255, 255, 255, 0.4); } .arq-brand .hero-editorial .hero-arte-filme video { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.08) brightness(0.92); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .arq-brand .hero-editorial .hero-arte-filme:hover video { transform: scale(1.03); } /* Retículas técnicas nos cantos */ .arq-brand .hero-editorial .hero-arte-filme::before { content: '+'; position: absolute; top: 14px; left: 14px; font-family: ui-monospace, monospace; font-size: 14px; color: rgba(255, 255, 255, 0.75); z-index: 5; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .arq-brand .hero-editorial .hero-arte-filme::after { content: '+'; position: absolute; bottom: 50px; right: 14px; font-family: ui-monospace, monospace; font-size: 14px; color: rgba(255, 255, 255, 0.75); z-index: 5; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } /* Barra de Interface sobre o vídeo da capa (Squarespace Motion UI) */ .arq-brand .brand-ui { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem 1.2rem; background: linear-gradient(to top, rgba(12, 14, 18, 0.95) 0%, rgba(12, 14, 18, 0.6) 70%, transparent 100%); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--regua-brand); z-index: 6; font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.88); } .arq-brand .brand-status { display: flex; align-items: center; gap: 0.5rem; } .arq-brand .brand-ponto { width: 6px; height: 6px; border-radius: 50%; background: #79d28d; box-shadow: 0 0 8px #79d28d; animation: pulso-brand 2s infinite ease-in-out; } @keyframes pulso-brand { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } .arq-brand .brand-controles { display: flex; gap: 0.35rem; } .arq-brand .brand-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--regua-brand); color: #fff; padding: 0.2rem 0.6rem; border-radius: 2px; cursor: pointer; font-size: 0.72rem; transition: all 0.15s ease; } .arq-brand .brand-btn:hover { background: #ffffff; color: #0c0e14; } /* Galeria de Fotos de Cortes */ .arq-brand .mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; } .arq-brand .mos { border: 1px solid var(--regua-brand); border-radius: 2px; overflow: hidden; background: #14161a; transition: border-color 0.25s ease, transform 0.25s ease; display: block; text-decoration: none; } .arq-brand .mos:hover { border-color: rgba(255, 255, 255, 0.45); transform: translateY(-3px); } .arq-brand .mos .arte { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: #0d0f12; } .arq-brand .mos .arte img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%) contrast(1.05); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; } .arq-brand .mos:hover .arte img { transform: scale(1.06); filter: grayscale(0%) contrast(1.12); } .arq-brand .mos-txt { padding: 0.9rem 1.1rem; font-family: var(--fonte-titulo); text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.04em; display: block; border-top: 1px solid var(--regua-brand); color: #e9edf5; } /* Efeito Spotlight / Glow nos Cartões */ .arq-brand .cartao { position: relative; overflow: hidden; } .arq-brand .cartao::before { content: ''; position: absolute; inset: -1px; border-radius: 2px; background: radial-gradient(350px circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%); opacity: 0.6; transition: opacity 0.3s ease; pointer-events: none; } .arq-brand .cartao:hover::before { opacity: 1; background: radial-gradient(350px circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%); } /* ------------------------------------------------------------- movimento */ /* A capa fica escondida ENQUANTO o movimento está autorizado e ainda não começou — ver `movimento.js`. Sem isto, a página pinta a capa e o primeiro quadro da animação a apaga: o visitante vê o conteúdo aparecer e sumir. A classe `mov` entra inline no (antes desta folha) e é removida pelo `movimento.js` assim que os estados iniciais estão prontos — ou logo de cara, se o GSAP não carregar, ou por prazo de segurança de 2,5s. Em nenhum caminho a capa fica presa: é a mesma disciplina do `.js .revelar`, que existe aqui desde sempre justamente porque esconder-e-contar-com-o-script é como uma página fica em branco quando o script falha. */ .mov .hero { opacity: 0; } /* Com GSAP no comando, a transição CSS do revelar sairia brigando com a timeline pelo mesmo `opacity`/`transform`. Quem anima é um só. */ .mov .revelar { transition: none; } /* ═══════════════════════════════════ AGENDAR ═══════════════════════════════ A tela de marcar horário. Um passo de cada vez, porque cada escolha muda a seguinte: os dias com vaga dependem da duração do serviço, e os horários dependem do dia e de quem atende. O passo que ainda não chegou fica `hidden` — não desbotado. Opção visível e inerte faz o visitante clicar e achar que a página travou. ========================================================================= */ .agendar .ag-passos { display: grid; gap: 1.6rem; max-width: 760px; } .ag-rot { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; font-weight: 650; font-size: .98rem; color: var(--tinta); } .ag-rot b { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); font-size: .8rem; font-weight: 700; } .ag-opcoes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); } .ag-opcao { display: block; text-align: left; cursor: pointer; padding: .8rem .95rem; border-radius: var(--raio-p); border: 1.5px solid var(--traco); background: transparent; color: inherit; transition: border-color .16s ease, transform .16s ease, background .16s ease; } .ag-opcao:hover { border-color: var(--marca); transform: translateY(-2px); } .ag-opcao strong { display: block; font-size: .95rem; font-weight: 650; } .ag-opcao span { display: block; margin-top: .15rem; font-size: .82rem; opacity: .72; } .ag-opcao.escolhido { border-color: var(--marca); background: var(--marca); color: var(--sobre-marca); } .ag-opcao.escolhido span { opacity: .85; } .ag-dia strong { font-variant-numeric: tabular-nums; } /* Os horários são muitos e curtos: cabem numa fita, e fita lê mais rápido que grade quando o olho procura "tem alguma coisa depois das 15h?". */ .ag-horas { display: flex; flex-wrap: wrap; gap: .45rem; } .ag-hora { cursor: pointer; padding: .5rem .8rem; border-radius: 999px; border: 1.5px solid var(--traco); background: transparent; color: inherit; font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 600; transition: border-color .16s ease, background .16s ease; } .ag-hora:hover { border-color: var(--marca); } .ag-hora.escolhido { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); } .ag-resumo { margin: 0 0 .8rem; font-weight: 650; color: var(--marca); } .ag-form { display: grid; gap: .8rem; max-width: 460px; } .ag-form label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; } .ag-form input, .ag-form textarea { padding: .7rem .85rem; border-radius: var(--raio-p); border: 1.5px solid var(--traco); background: transparent; color: inherit; font: inherit; font-weight: 400; } .ag-form input:focus, .ag-form textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; } .ag-vazio, .ag-aviso { margin: .4rem 0 0; font-size: .9rem; opacity: .8; } .ag-aviso { color: var(--marca); font-weight: 600; } .ag-pronto { padding: 1.4rem 1.5rem; border-radius: var(--raio); border: 2px solid var(--marca); display: grid; gap: .4rem; } .ag-pronto-tit { margin: 0; font-weight: 700; font-size: 1.1rem; } .ag-codigo { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: .18em; color: var(--marca); font-variant-numeric: tabular-nums; } .ag-detalhe { margin: 0; font-size: .95rem; } .ag-dica { margin: .2rem 0 0; font-size: .85rem; opacity: .75; } /* ═══════════════════════════ NO CELULAR ════════════════════════════════════ O motor já nasceu fluido — a grade de itens, a equipe e os painéis empilham sozinhos, e nenhum dos modelos rola para o lado. O que faltava era o que só aparece com o DEDO na tela, não com o ponteiro. ========================================================================= */ /* A barra do topo é `sticky`, então todo link de âncora (#contato, #agendar, #unidades) parava com o título da seção ESCONDIDO atrás dela. Vale nas duas telas, mas no telefone é pior: a barra ocupa proporcionalmente mais altura. Uma folga a mais do que a barra tem, para o título não encostar nela. */ .secao[id], section[id], #conteudo { scroll-margin-top: 88px; } @media (max-width: 720px) { /* Área de toque: só ÁREA. O texto continua do mesmo tamanho e no mesmo lugar; o que cresce é a região que responde ao dedo. 44px é a medida que Apple e Google recomendam, e o par EN/PT tinha 27. */ .idiomas a, .nav a, .marca-nome, .quadro-acao, .li-nome { display: inline-flex; align-items: center; min-height: 44px; } .idiomas a { padding-inline: .8rem; } /* Os filtros de painel (Tudo/A seguir/Feitos, Semana/Mês/Ano) e os chips de categoria são pílulas pequenas coladas umas nas outras — o erro de toque cai na vizinha. */ .seg, .chip { min-height: 40px; padding-inline: 1rem; } /* Os links do rodapé ficam empilhados e a 24px de altura: no telefone o rodapé é onde se procura "Contato", e cada linha precisa do próprio alvo. */ .rodape-col a { display: inline-flex; align-items: center; min-height: 44px; } /* O balão de conversa fica sobre o conteúdo no rodapé de qualquer página. Ele é o principal caminho de contato destes sites e por isso continua flutuando, mas encolhe e sobe um pouco, para não cobrir a última linha. */ .zap-flutua { width: 52px; height: 52px; bottom: 16px; right: 16px; } }