/* Bio do ChurrasPao · /bio/ (so PT). Molde: bio do Bar da Lapa (cs-bar-da-lapa-website), com a marca do ChurrasPao (123-brand-chp/DESIGN.md). Trocar o tema = trocar so o bloco :root. Contraste medido na pagina renderizada (ver o PR). */ /* Bebas Neue (400), Raleway (400-700) e Barlow Semi Condensed (600), subconjunto latin do Google Fonts (OFL), servidos de /bio/fontes/ */ @font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(/bio/fontes/bebas-neue-latin-v16.woff2) format("woff2")} @font-face{font-family:"Raleway";font-style:normal;font-weight:400 700;font-display:swap;src:url(/bio/fontes/raleway-latin-v37.woff2) format("woff2")} @font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/bio/fontes/barlow-semi-condensed-600-latin-v16.woff2) format("woff2")} :root{ --bg:#030406; --bg-2:#14110E; /* preto da marca (cor principal); superficie de foto carregando */ --fg:#F3E7D3; /* creme: texto no escuro, 16.78:1 */ --fg-2:#B8AE9F; /* creme apagado pra apoio */ --fg-3:#8F877B; /* creme bem apagado: subfooter */ --accent:#F47A20; --accent-hover:#FF8E3A; /* laranja: chamada e botao, 7.47:1 no preto */ --on-accent:#030406; /* preto sobre o laranja */ --fil:#EE3D22; --fil-2:#CCB478; /* filete do titulo: vermelho nas linhas creme, dourado na linha laranja */ --ink-rgb:244,122,32; /* o laranja em rgb, pro brilho do fundo */ --hi-rgb:243,231,211; --line:rgba(var(--hi-rgb),.09); --glass:linear-gradient(180deg,rgba(243,231,211,.07),rgba(243,231,211,.025)); --glass-hi:inset 0 1px 0 rgba(var(--hi-rgb),.09); --glass-on-media:rgba(3,4,6,.86); --on-photo:#FFFFFF; --on-photo-2:#EDE3D1; --display:"Bebas Neue",Oswald,Impact,"Arial Narrow",sans-serif; --detalhe:"Barlow Semi Condensed","Arial Narrow",Raleway,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --gutter:20px; color-scheme:dark; } @media (max-width:359px){:root{--gutter:16px}} *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--fg);font-family:Raleway,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5; font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh} ::selection{background:var(--accent);color:var(--on-accent)} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em} /* fundo: reticula de pontos, como impressao de cartaz (grafismo do brand book), e o calor do fogo no topo */ .bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .bgfx::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 900px 600px at 50% -18%,rgba(var(--ink-rgb),.15),transparent 62%)} .bgfx::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(var(--hi-rgb),.08) 1.6px,transparent 2px);background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);mask-image:linear-gradient(180deg,#000,transparent 78%)} .wrap{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;padding:14px var(--gutter) 0} /* 1 · header: so o logo (a bio e so em portugues, sem seletor de lingua) */ .top{display:flex;align-items:center;gap:12px;min-height:48px} .top .logo{height:44px;width:auto;flex:none} .chev{width:16px;height:16px;flex:none} /* 2 · frase grande: uma linha por frase, "sanduiche" em laranja, filete deslocado atras como no logo */ .hero{padding-top:22px} /* uma frase por linha, nunca quebrando: "DE CHURRASCO" e a mais larga (--h1w, em em), entao o tamanho acompanha a largura da caixa */ :root{--h1w:4.9} h1{font-size:min(6rem,calc((100vw - 2 * var(--gutter)) / var(--h1w)));line-height:.88} h1 .l{display:block;white-space:nowrap;width:max-content} h1 .l2{color:var(--accent)} /* filete: uma copia do texto so em contorno, deslocada .045em (brand book: .chp-fil) */ .fil{position:relative;isolation:isolate} .fil::before{content:attr(data-t);position:absolute;left:.045em;top:.045em;width:100%;color:transparent;-webkit-text-stroke:2px var(--fil);z-index:-1;pointer-events:none} .l2.fil::before{-webkit-text-stroke-color:var(--fil-2)} /* 3 · topo: video em retrato 3:4, poster por baixo (e o LCP), CTA em vidro escuro encostado na base */ .palco{position:relative;margin-top:22px} .palco .arte{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:var(--bg-2);box-shadow:0 30px 70px -34px rgba(0,0,0,.6)} .palco .arte img,.palco .video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .palco .video{opacity:0;transition:opacity .6s var(--ease)} .palco .video.tocando{opacity:1} .palco .arte::after{content:"";position:absolute;z-index:1;inset:auto 0 0 0;height:30%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(3,4,6,.75))} .pausa{position:absolute;z-index:3;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer; color:var(--fg);background:rgba(3,4,6,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glass-hi)} .pausa[hidden]{display:none} .pausa svg{width:16px;height:16px} .pausa .i-play,.pausa[aria-pressed=true] .i-pausa{display:none} .pausa[aria-pressed=true] .i-play{display:inline} .cta{position:relative;z-index:2;margin:-64px 10px 0;padding:14px 14px 14px;border-radius:20px; background:var(--glass-on-media);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%); box-shadow:var(--glass-hi),0 10px 40px -12px rgba(0,0,0,.5)} .selo{display:inline-flex;align-items:center;gap:8px;font-family:var(--detalhe);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .selo i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--ink-rgb),.6)} @media (prefers-reduced-motion:no-preference){.selo i{animation:ping 2.4s var(--ease) infinite}} @keyframes ping{70%{box-shadow:0 0 0 7px rgba(var(--ink-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ink-rgb),0)}} .cta h2{margin-top:6px;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-wrap:balance} .btn{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:0 20px;border-radius:999px; background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:700;letter-spacing:-.01em; transition:background .2s,gap .3s var(--ease),transform .15s var(--ease)} .btn:hover{background:var(--accent-hover);gap:12px}.btn:active{transform:scale(.97)} /* par de botoes: todo destino de pedido e por unidade (Fonseca ou Regiao Oceanica), entao os dois tem o mesmo peso */ .par{margin-top:12px;display:grid;gap:10px} .par .btn{margin-top:0} .par-2{grid-template-columns:1fr 1fr} .par-2 .largo{grid-column:1 / -1} /* terceiro botao do par (Retirada na Regiao Oceanica) ocupa a linha inteira */ /* tela estreita: "Pedir na Regiao Oceanica" tem que caber em uma linha no card do topo */ @media (max-width:359px){.btn{padding:0 12px;font-size:15px;gap:6px}.cta{margin-left:6px;margin-right:6px}} /* destaque com validade (opcional): o marca html.expirado depois de data-destaque-ate; sem JS o