:root { --bg: #0b0c0f; --elev: #12141a; --text: #ffffff; --muted: #e0e0e0; --brand: #ff6f61; --line: #1f232b; --shadow: 0 8px 30px rgba(0,0,0,.35); --radius: 16px; --maxw: 1120px; --arm: 28px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; } a{color:inherit;text-decoration:none} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 0px} #marcas .brand-belt{ padding-top: 22px; } header.site { position:relative; z-index:50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 76%, transparent); border-bottom:1px solid var(--line); } .nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 14px 0; } .brand { font-weight:800; letter-spacing:.02em; color: var(--text); transition: color .2s ease; } .brand:hover { color:var(--brand); } nav ul { display:flex; gap:.9rem; list-style:none; padding:0; margin:0; } nav a { padding:.55rem .8rem; border-radius:0; font-weight:600; color:var(--text); transition: color .2s ease; } nav a:hover { color:var(--brand); border:none; background:none; } .nav-drop{ position:relative; } .nav-sub::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } .nav-drop > a::after{ content:"\25BE"; font-size:.7em; margin-left:6px; opacity:.75; } .nav-sub{ position:absolute; top:calc(100% + 8px); left:0; margin:0; padding:5px; min-width:190px; list-style:none; display:flex; flex-direction:column; gap:0; background:var(--elev); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.55); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:80; } .nav-drop:hover > .nav-sub, .nav-drop:focus-within > .nav-sub{ opacity:1; visibility:visible; transform:translateY(0); } .nav-sub a{ display:flex; align-items:center; gap:8px; padding:.15rem .7rem; border-radius:8px; font-weight:600; color:var(--text); white-space:nowrap; transition:color .2s ease, background .2s ease; } .nav-sub a:hover{ color:var(--brand); background:rgba(255,255,255,.05); } .nav-sub i{ font-size:.72em; opacity:.7; } .socials { display:flex; gap:.6rem; } .socials a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:none; color:var(--text); transition:.2s ease; font-size:18px; background:none; } .socials a:hover { color:var(--brand); background:none; } .hero { padding: 100px 0 60px; } #sobre.hero-bg { position: relative; background: url('https://braian.com.br/imagens/fundo-v2.jpg') center top / auto 100% repeat-x; color:#fff; } #sobre.hero-bg .container { position:relative; z-index:1; } .wrap { display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center; } .hero h1 { font-size: clamp(28px, 6vw, 46px); margin:0 0 28px; font-weight:900; line-height:1.08; color:#fff; text-transform:uppercase; letter-spacing:.02em; } .sub { font-size: clamp(16px, 2.4vw, 19px); color:#fff; margin:0 0 34px; } .stats { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 14px; } /* chips de destaque: estaticos de proposito (nao sao clicaveis, sem hover) */ .tag { display:inline-flex; align-items:center; padding:.65rem .95rem; border-radius:999px; font-size:.95rem; background:var(--elev); border:1px solid var(--line); color:#fff; box-shadow:var(--shadow); line-height:1.4; cursor:default; } .tag i { font-size:1rem; color:var(--brand); } .tag .t { display:inline-block; margin-left:.55rem; font-weight:600; } .tag .t strong { font-weight:800; } .hero-socials{ display:none; justify-content:center; gap:16px; margin:10px 0 12px; } .masthead-name{ display:none; } /* padding de secao SO no eixo vertical: o lateral vem do .container (o :not(#sobre) tem especificidade de ID e atropelava o .container) */ section { padding-block: 40px; border-top:1px solid var(--line); } main > section:not(#sobre) { padding-block: 32px; text-align:center; } h2 { font-size: clamp(24px, 2.4vw, 30px); line-height:1.1; margin: 0 0 10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; text-align:center; } /* ---- ritmo de fundo (nivel 2): degrau tonal entre as secoes escuras. NAO alternar pro claro: o branco das marcas e o unico nivel 1 do site e precisa continuar unico, senao vira zebra. O tom #0f1116 fica ENTRE o --bg e o --elev, entao os cards (que sao --elev) continuam se destacando. ---- */ #timeline { background:#0f1116; } #achadinhos { background: var(--bg); } #contato { background:#0f1116; } /* #timeline e #contato SAO a propria .container (max-width 1120px), entao pintar fundo neles cobria so os 1120px e sobrava faixa preta do body dos dois lados no desktop. Aqui a largura e solta (fundo vaza ate a borda) e o limite de 1120 volta como padding, entao o conteudo fica exatamente onde estava. O max(0px,...) zera o padding abaixo de 1120px, ou seja, mobile nao muda nada. */ #timeline, #contato{ max-width:none; padding-inline: max(0px, calc((100% - var(--maxw)) / 2)); } /* ancora sob header sticky de 61px: sem isso o clique no menu come o h2 */ main > section { scroll-margin-top: 76px; } h2::after { content:""; display:block; width:60px; height:3px; margin:6px auto 10px; background:var(--brand); border-radius:2px; } #timeline h2::after { margin:14px auto 18px; } p.lead { color: var(--muted); font-size: 1.08rem; margin:12px auto 0; max-width:70ch; line-height:1.7; letter-spacing:.01em; text-wrap: balance; } #timeline.container { padding-top: 24px; } #timeline .timeline { margin-top: 16px; } #marcas { /* era #fff: num site escuro o branco puro e um pico de luminancia de ~1:21, um flash. #f4f5f7 mantem a placa clara que os logos precisam, sem o estouro. */ background:#f4f5f7; color:#0b0c0f; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding-block: 56px; } #marcas h2 { color:#0b0c0f; } #marcas .lead { color:#444; } /* (os logos sao normalizados na fonte: todos num canvas padrao 480x300, entao a celula e um unico clamp e a esteira fica perfeitamente uniforme) */ /* esteira de marcas: animacao continua, sem interacao (drag desativado de proposito) */ .brand-belt{ overflow:hidden; padding:18px 0 26px; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); transform: translateZ(0); will-change: transform; } .brand-track{ display:flex; flex-wrap:nowrap; gap:0; align-items:center; width:max-content; will-change: transform; transform: translate3d(0,0,0); user-select:none; -webkit-user-select:none; /* backdrop pro mix-blend-mode dos logos: o track cria stacking context (transform), entao o multiply precisa achar o tom da secao AQUI dentro pra casar o branco embutido */ background:#f4f5f7; } .brand-track .logos{ display:flex; gap: clamp(20px, 4vw, 44px); align-items:center; padding-right: clamp(20px, 4vw, 44px); } .brand-track .logo{ flex:none; width: clamp(116px, 15vw, 168px); } .brand-track img{ width:100%; height:auto; display:block; -webkit-user-drag:none; pointer-events:none; filter: grayscale(1); opacity:.7; /* multiply mata o fundo branco embutido do logo (branco x fundo = fundo), sem borda */ mix-blend-mode: multiply; transition: filter .25s ease, opacity .25s ease; } .brand-track .logo:hover img{ filter:none; opacity:1; } /* ---- Achadinhos: vitrine ARRASTAVEL. Ao contrario da esteira de marcas (que gira sozinha porque e decorativa e nao clicavel), aqui o card e um link: alvo em movimento seria frustrante no dedo, entao quem controla e o usuario. ---- */ .achados-belt{ overflow-x:auto; overflow-y:hidden; padding:18px 0 6px; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .achados-belt::-webkit-scrollbar{ display:none; } .achados-belt{ cursor:grab; } .achados-belt.arrastando{ cursor:grabbing; } /* sem isso o navegador entende que o usuario quer arrastar a imagem pra fora */ .achado, .achado img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; } /* o til de ironia, igual ao da pagina /achadinhos */ .achados h2 .til{ color:var(--brand); font-weight:400; font-size:.86em; display:inline-block; transform:translateY(-.04em); } .achados-track{ display:flex; gap:14px; width:max-content; padding:0 clamp(16px, 3vw, 40px); } .achado{ flex:none; width:clamp(150px, 42vw, 180px); scroll-snap-align:center; background:var(--elev); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition: transform .12s ease, border-color .15s ease; } .achado:hover{ transform:translateY(-3px); border-color:#3a4250; } .achado-img{ position:relative; aspect-ratio:1/1; background:#fff; } .achado-img img{ width:100%; height:100%; object-fit:contain; display:block; padding:12px; } .achado-preco{ position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:baseline; gap:4px; background:rgba(11,12,15,.9); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:3px 9px; font-size:.62rem; color:#c7ccd3; line-height:1.4; } .achado-preco b{ color:#fff; font-weight:800; font-size:.76rem; } .achado-nome{ display:block; padding:10px 12px 13px; font-size:.85rem; font-weight:700; line-height:1.25; color:#fff; } @media (prefers-reduced-motion: reduce){ .achado:hover{ transform:none; } } /* ---- atalhos no celular ---- O header/nav estao display:none no mobile e NAO havia hamburger, ou seja, o site simplesmente nao tinha navegacao no celular: pra chegar no formulario a pessoa rolava 3.658px sem atalho nenhum. Esta barra aparece quando o hero sai da tela e serve os dois publicos ao mesmo tempo. */ .barra-mobile{ display:none; } @media (max-width:900px){ .barra-mobile{ display:flex; position:fixed; left:0; right:0; top:0; z-index:60; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom:1px solid var(--line); padding: calc(6px + env(safe-area-inset-top)) 8px 6px; transform: translateY(-115%); transition: transform .25s ease; } .barra-mobile.visivel{ transform:none; } .barra-mobile a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; padding:6px 4px; border-radius:12px; font-size:.72rem; font-weight:700; color:var(--muted); letter-spacing:.02em; line-height:1.2; } .barra-mobile a i{ font-size:1.05rem; } .barra-mobile .barra-cta{ color:var(--brand); } /* o rodape nao pode ficar debaixo da barra */ body{ padding-bottom:0; } } @media (prefers-reduced-motion: reduce){ .barra-mobile{ transition:none; } } @media (prefers-reduced-motion: reduce){ * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .timeline-wrap{ position:relative; } .timeline{ position:relative; list-style:none; margin:40px 0 0; padding:0; } .timeline::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background: var(--line); } .tl-item{ position:relative; width:100%; display:flex; align-items:flex-start; margin-bottom:100px; padding-top:60px; opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .tl-item.is-visible{ opacity:1; transform:none; } .tl-year{ position:absolute; left:50%; transform:translateX(-50%); top:0; background:#1a1d24; border:1px solid var(--line); padding:6px 14px; border-radius:999px; font-weight:800; letter-spacing:.02em; z-index:3; } .tl-col{ width:50%; padding:12px 24px; position:relative; } .tl-col.left{ text-align:right; } .tl-col.right{ text-align:left; } .timeline .tl-card::before{ content:""; position:absolute; top:50%; transform:translateY(-50%); width: var(--arm); height:1px; background: var(--line); } .timeline .tl-col.left .tl-card::before{ right: calc(var(--arm) * -1); } .timeline .tl-col.right .tl-card::before{ left: calc(var(--arm) * -1); } .timeline .tl-col.no-connector .tl-card::before{ display:none; } .tl-card{ display:inline-block; background: var(--elev); border:1px solid var(--line); border-radius:14px; padding:18px; max-width:380px; box-shadow: var(--shadow); position:relative; z-index:1; font-size:.95rem; margin-top:28px; line-height:1.6; opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } /* (content-visibility removido: o paint containment cortava o bracinho ::before que liga o card a linha central; e a timeline ja inicia oculta, entao nao ha ganho) */ .tl-card.is-visible{ opacity:1; transform: none; } .tl-header{ display:flex; justify-content:flex-start; align-items:center; gap:8px; margin-bottom:8px; } .tl-title{ font-weight:800; font-size:1.08rem; margin:0; display:inline; text-align:left; } .tl-when{ display:inline-block; margin-left:8px; font-size:.8rem; color:var(--muted); font-weight:700; opacity:.9; } .tl-roles { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; justify-content:center; } .tl-role { background: var(--line); color: var(--muted); font-size:.8rem; padding:4px 10px; border-radius:8px; font-weight:600; } .tl-text{ margin:12px 0 0; color:#e7e7e7; font-size:.95rem; line-height:1.6; max-width: 65ch; text-align:justify; } .tl-media{ margin:0 0 10px; border-radius:10px; overflow:hidden; border:1px solid var(--line); } .tl-media img{ display:block; width:100%; height:auto; max-height:200px; object-fit:cover; } .tl-controls{ display:flex; justify-content:center; margin-top:18px; gap:10px; } .tl-btn{ background:transparent; color:var(--muted); border:1px solid var(--line); padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer; transition:.2s ease; } .tl-btn:hover{ color:#fff; border-color: var(--brand); box-shadow:0 0 0 3px rgba(255,111,97,.12); } .tl-end{ display:block; color:var(--muted); font-weight:700; font-size:.95rem; border:none; padding:0; text-align:center; margin-top:10px; } .form{max-width:720px;margin:24px auto 0} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .field{text-align:left} .label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem} /* 16px e fonte do site: campos nao herdam por padrao (e section:not(#sobre) { padding-block: 28px; } .timeline{ margin-top:12px; } .timeline::before{ left:50%; } .tl-item{ flex-direction:column; margin-bottom:40px; padding-top:36px; } .tl-year{ top:0; font-size:.95rem; } .tl-col{ width:100%; padding:0 8px; text-align:center; } /* sem altura fantasma em coluna vazia */ .timeline .tl-card::before{ display:none; } .tl-card{ max-width:520px; width:100%; margin:12px auto 0; text-align:left; } .tl-header{ flex-direction:column; align-items:flex-start; gap:2px; } } /* utilitario: visivel so para leitores de tela */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* rodape: divisoria suave (mesma linguagem das linhas do site) e assinatura */ .site-footer{ text-align:center; padding:8px 0 64px; } .footer-rule{ width:min(560px, 72%); height:1px; margin:0 auto 28px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); } .footer-brand{ margin:0 0 6px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; color:#fff; } .footer-copy{ display:block; font-size:.8rem; color:var(--muted); } /* ponto coral de assinatura: abre o site no letreiro e fecha no rodape */ .brand-dot{ color:var(--brand); } .tl-btn { --btn-fg: var(--text); --btn-bg: transparent; --btn-bd: var(--line); --btn-fg-hover: #fff; --btn-bg-hover: color-mix(in srgb, var(--elev) 88%, transparent); --btn-bd-hover: var(--brand); display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; font: 700 0.95rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif; letter-spacing:.02em; color: var(--btn-fg); background: var(--btn-bg); border:1px solid var(--btn-bd); border-radius:12px; cursor:pointer; transition:.15s ease; } .tl-btn:hover, .tl-btn:focus-visible { color: var(--btn-fg-hover); background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255,111,97,.12); } .tl-btn--brand { --btn-fg: #0b0c0f; /* texto escuro no botao coral: passa contraste AA mantendo a cor da marca */ --btn-bg: var(--brand); --btn-bd: var(--brand); --btn-fg-hover: #0b0c0f; --btn-bg-hover: color-mix(in srgb, var(--brand) 85%, #000 15%); --btn-bd-hover: var(--brand); } @media (max-width: 600px){ .tl-btn{ padding:11px 16px; } /* mantem .95rem: mesmo corpo de texto em qualquer tela */ } .hc-dialog{ padding:0; border:none; background:transparent; } .hc-dialog::backdrop{ background:rgba(0,0,0,.6); backdrop-filter: blur(2px); } .hc-card{ width:min(520px, 92vw); margin:auto; background: color-mix(in srgb, var(--elev) 94%, transparent); border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow); color:#fff; padding:20px 18px; } .hc-card h3{ margin:0 0 6px; font-size:1.2rem; font-weight:900; text-transform:uppercase; letter-spacing:.02em; } .hc-sub{ margin:0 0 14px; color:var(--muted); } .hc-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; } .hc-alt{ display:flex; align-items:center; gap:10px; justify-content:center; margin-top:8px; color:var(--muted); font-size:.95rem; } .hc-alt span{ opacity:.85; } .hc-slider{ margin: 6px 0 2px; } .hc-slider input[type="range"]{ width:100%; height:12px; border-radius:999px; appearance:none; background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 0%, #2a2e37 0%); outline:none; } .hc-slider input[type="range"]::-webkit-slider-thumb{ appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--brand); box-shadow: 0 1px 6px rgba(0,0,0,.35); cursor:grab; } .hc-slider input[type="range"]::-moz-range-thumb{ width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--brand); box-shadow: 0 1px 6px rgba(0,0,0,.35); cursor:grab; } html, body { overflow-x: clip; } #sobre.hero-bg{ background: url('https://braian.com.br/imagens/fundo-v2.jpg') center top / cover no-repeat !important; } .timeline::before{ background: color-mix(in srgb, var(--line) 70%, transparent); } .timeline .tl-card { text-align: left; } .timeline .tl-card .tl-header { justify-content:flex-start; align-items:flex-start; } .timeline .tl-card .tl-title { text-align:left; } @media (min-width: 901px){ .timeline .tl-card::before{ display:block; content:""; position:absolute; top:50%; transform:translateY(-50%); width: var(--arm, 28px); height:1px; background: var(--line); } .timeline .tl-col.left .tl-card::before{ right: calc(var(--arm, 28px) * -1); } .timeline .tl-col.right .tl-card::before{ left: calc(var(--arm, 28px) * -1); } } .timeline .tl-item{ margin-bottom: 56px; padding-top: 44px; } .timeline .tl-item:last-child{ margin-bottom: 0; } @media (max-width: 900px){ .timeline .tl-item{ margin-bottom: 30px; padding-top: 56px; /* ano centrado: 30px do card de cima e 30px do de baixo, em TODOS os anos */ } } .hero { position: relative; } .hero.hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 44%, rgba(0,0,0,.12) 64%, rgba(0,0,0,0) 82% ); pointer-events: none; } .hero h1 { text-shadow: 0 2px 16px rgba(0,0,0,.65); } .hero .sub, .hero .tag .t { text-shadow: 0 1px 8px rgba(0,0,0,.6); } @media (max-width: 900px){ .hero.hero-bg::before{ background: linear-gradient( 180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.26) 40%, rgba(0,0,0,.4) 76%, rgba(0,0,0,.48) 100% ); } } @media (max-width: 640px){ .hero h1{ font-size: clamp(26px, 8.2vw, 40px); line-height: 1.05; margin-top: 8px; } .hero .sub{ font-size: clamp(15px, 4vw, 17px); } .hero.hero-bg::before{ background: linear-gradient( 180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,.46) 76%, rgba(0,0,0,.54) 100% ); } } /* ===================== "No ar agora" (destaques em andamento) ===================== */ .now-wrap{ max-width: 980px; margin: 6px auto 30px; padding: 0 4px; } .now-head{ display:flex; justify-content:center; margin: 4px 0 18px; } .now-live{ display:inline-flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; color:#fff; padding:7px 14px; border-radius:999px; background: color-mix(in srgb, var(--brand) 16%, var(--elev)); border:1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); } .now-dot{ width:9px; height:9px; border-radius:50%; background:#ff4d4d; flex:none; box-shadow:0 0 0 0 rgba(255,77,77,.6); animation: nowPulse 1.9s infinite; } @keyframes nowPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,77,77,.55); } 70%{ box-shadow:0 0 0 9px rgba(255,77,77,0); } 100%{ box-shadow:0 0 0 0 rgba(255,77,77,0); } } /* cada card com a altura do proprio conteudo, centrado na linha do tempo */ .now-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; position:relative; align-items:center; } /* a linha do tempo atravessa os projetos no ar: horizontal no desktop, vertical no mobile */ .now-grid::before{ content:""; position:absolute; z-index:-1; background: color-mix(in srgb, var(--line) 85%, transparent); top:50%; left:24px; right:24px; height:1px; } /* mesma "vida" dos cards da timeline: revelam no scroll e respondem igual ao mouse */ .now-card{ display:flex; flex-direction:column; text-align:left; background:var(--elev); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); color:inherit; opacity:0; transform:translateY(10px); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .5s ease; } .now-card.is-visible{ opacity:1; transform:none; } .now-grid .now-card:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: 0 14px 34px rgba(0,0,0,.42); } .now-thumb{ aspect-ratio: 16 / 10; overflow:hidden; background:#0f1218; } .now-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .now-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; } .now-name{ margin:0; font-size:1.08rem; font-weight:800; line-height:1.25; display:flex; align-items:center; gap:8px; } .now-name i{ font-size:.72rem; color:var(--brand); opacity:.9; } .now-desc{ margin:0; font-size:.95rem; color:#e7e7e7; line-height:1.6; } .now-since{ margin-top:2px; font-size:.8rem; font-weight:700; color:var(--muted); } .now-card--link{ cursor:pointer; } /* Botao que revela/recolhe a trajetoria completa */ .tl-reveal{ margin: 26px 0 4px; text-align:center; position:relative; } /* ponte da linha do tempo: desce dos projetos no ar ate o botao (altura = vao real pos margin-collapse; z-index negativo garante que nunca pinta sobre card) */ .tl-reveal::before{ content:""; position:absolute; left:50%; bottom:100%; width:1px; height:30px; z-index:-1; background: linear-gradient(180deg, color-mix(in srgb, var(--line) 60%, transparent), var(--line)); pointer-events:none; } /* continuacao do fio: do botao ate a linha central da timeline (so renderiza quando aberta) */ .timeline-wrap::before{ content:""; position:absolute; left:50%; top:-4px; width:1px; height:30px; background: var(--line); pointer-events:none; } #tl-toggle{ letter-spacing:.04em; } #tl-toggle i{ transition: transform .25s ease; font-size:.8em; opacity:.9; } #tl-toggle.is-open i{ transform: rotate(180deg); } @media (max-width: 900px){ .now-wrap{ margin: 2px auto 16px; padding: 0 8px; } /* respiro alinhado com os cards da timeline */ /* Empilhar na vertical: 100% compativel, nada escondido, sem scroll oculto */ .now-grid{ display: grid; grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; overflow: visible; scroll-snap-type: none; margin: 0 auto; padding: 0; } .now-card{ scroll-snap-align: none; width: 100%; max-width: 480px; margin-inline: auto; } .now-thumb{ aspect-ratio: 16 / 9; } /* no celular a linha vira vertical e centralizada, como a da timeline */ .now-grid::before{ top:24px; bottom:24px; left:50%; right:auto; width:1px; height:auto; } .tl-reveal::before{ height:26px; } } /* ======================================================================= HERO: retrato recortado FLUTUANDO no espaco da nebula (estetica Monty Python / Terry Gilliam). Sem moldura, sem caixa: so o recorte, com sombra pra dar profundidade (nao parecer PNG colado) e um leve voo continuo. ======================================================================= */ .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; } .hero-copy{ min-width:0; } .hero-kicker{ margin:0 0 10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:clamp(11px, 2.6vw, 13px); color:var(--brand); text-shadow:0 2px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); text-wrap:balance; /* quebra em linhas equilibradas, sem palavra viuva */ } .hero-side{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; } /* o recorte solto, sem moldura */ .hero-portrait{ width:100%; max-width:380px; margin:0; line-height:0; animation:heroDrift 9s ease-in-out infinite; /* deriva do conjunto: sobe num leve arco */ will-change:transform; } .hero-portrait a{ display:block; line-height:0; -webkit-user-drag:none; user-select:none; } .hero-portrait img{ -webkit-user-drag:none; user-select:none; } .hero-portrait img{ width:100%; height:auto; display:block; transform:scaleX(-1); /* mantem o espelhamento */ filter:drop-shadow(0 16px 26px rgba(0,0,0,.5)); /* profundidade: ele nao parece colado */ animation:heroTilt 7s ease-in-out infinite; /* inclinacao sutil, periodo diferente = organico */ will-change:transform; } /* deriva do conjunto: sobe descrevendo um leve arco lateral (gravidade zero) */ @keyframes heroDrift{ 0% { transform:translate(0, 0); } 25% { transform:translate(5px, -8px); } 50% { transform:translate(0, -16px); } 75% { transform:translate(-5px, -8px); } 100% { transform:translate(0, 0); } } /* inclinacao do recorte (mantendo o espelhamento) */ @keyframes heroTilt{ 0%,100% { transform:scaleX(-1) rotate(-1.1deg); } 50% { transform:scaleX(-1) rotate(1.1deg); } } /* variante mobile: foto na orientacao real (sem espelhar) */ @keyframes heroTiltMobile{ 0%,100% { transform:rotate(-1.1deg); } 50% { transform:rotate(1.1deg); } } /* deriva mais contida no celular (nao sobe ate o separador do nome) */ @keyframes heroDriftMobile{ 0% { transform:translate(0, 0); } 25% { transform:translate(3px, -4px); } 50% { transform:translate(0, -8px); } 75% { transform:translate(-3px, -4px); } 100% { transform:translate(0, 0); } } .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; } .hero-cta-btn{ padding:13px 22px; font-size:1rem; } /* Botao secundario do hero: vidro escuro mais solido + borda clara, legivel sobre a nebulosa (sem virar coral p/ nao competir com o primario "Fale comigo") */ .hero-cta-btn--ghost{ --btn-fg:#fff; --btn-bg: rgba(11,12,16,.72); --btn-bd: rgba(255,255,255,.85); --btn-fg-hover:#fff; --btn-bg-hover: rgba(11,12,16,.88); --btn-bd-hover:#fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero-cta-btn i{ font-size:.95em; } @media (max-width:900px){ /* ritmo do cabecalho mobile: letreiro -16- cabeca -16- sociais -24- texto */ .wrap{ grid-template-columns:1fr; gap:24px; align-items:start; } .hero-side{ order:-1; margin-top:16px; gap:16px; } .hero-portrait{ width:clamp(150px, 44vw, 200px); animation-name:heroDriftMobile; } /* no celular: foto na orientacao real (sem espelhar) e MANTEM a flutuacao */ .hero-portrait img{ transform:none; animation:heroTiltMobile 7s ease-in-out infinite; } /* kicker alinhado a esquerda junto do H1, igual ao desktop, e num tamanho legivel */ .hero-kicker{ text-align:left; font-size:clamp(12px, 3.4vw, 13px); } .hero-cta{ margin-top:18px; } .hero-cta-btn{ flex:1 1 160px; justify-content:center; padding:14px 18px; } } @media (max-width:380px){ .hero-portrait{ width:clamp(140px, 46vw, 180px); } .hero-cta{ flex-direction:column; } .hero-cta-btn{ flex:0 0 auto; width:100%; } } @media (prefers-reduced-motion: reduce){ .hero-portrait, .hero-portrait img{ animation:none; } .hero-cta-btn{ transition:none; } } /* ======================================================================= Polimento da timeline (a "prova de estrada"): vida no hover, marcador de ano com toque da marca, e a linha central com fade suave nas pontas. ======================================================================= */ .timeline .tl-card{ transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .5s ease; } .timeline .tl-card:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: 0 14px 34px rgba(0,0,0,.42); } .tl-year{ background: color-mix(in srgb, var(--brand) 12%, #1a1d24); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); color:#fff; } /* fade em pixels fixos: em % a linha sumia por ~200px no inicio da timeline mobile */ .timeline::before{ background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--line) 85%, transparent) 24px, color-mix(in srgb, var(--line) 85%, transparent) calc(100% - 24px), transparent 100%) !important; } @media (prefers-reduced-motion: reduce){ .timeline .tl-card:hover{ transform:none; } .now-grid .now-card:hover{ transform:none; } } /* ======================================================================= Acessibilidade: foco visivel consistente (teclado) e skip link. ======================================================================= */ :where(a, button, input, textarea, select, [tabindex]):focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; } .input:focus-visible, .textarea:focus-visible{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,111,97,.30); } .hc-slider input[type="range"]:focus-visible{ outline: 3px solid var(--brand); outline-offset: 4px; } .hc-slider input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 4px rgba(255,111,97,.35); } .hc-slider input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow: 0 0 0 4px rgba(255,111,97,.35); } /* Skip link: invisivel ate receber foco por teclado */ .skip-link{ position:absolute; left:8px; top:-60px; z-index:200; background:var(--brand); color:#fff; font-weight:800; padding:10px 16px; border-radius:10px; box-shadow:var(--shadow); transition: top .15s ease; } .skip-link:focus{ top:8px; } /* ===== seletor de idioma: globo + idioma atual; clica e revela os 3 por extenso (autonimos). CODIGO de idioma, NUNCA bandeira: bandeira = pais (nosso ES e neutro LatAm, nosso EN e US), e o Windows nem renderiza emoji de bandeira (mostra as letras). Globo (FA) renderiza em todo lugar. ===== */ .site-lang{ position:relative; flex:none; } .lang-trigger{ display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:999px; color:var(--text); font-family:inherit; font-weight:700; font-size:12px; line-height:1; letter-spacing:.04em; padding:7px 12px; cursor:pointer; transition:.2s ease; } .lang-trigger:hover{ color:var(--brand); border-color:var(--brand); } .lang-trigger .fa-globe{ font-size:13px; } .lang-trigger .lang-caret{ font-size:9px; opacity:.7; transition:transform .2s ease; } .site-lang.open .lang-trigger{ color:var(--brand); border-color:var(--brand); } .site-lang.open .lang-caret{ transform:rotate(180deg); } .lang-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:158px; background:var(--elev); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; z-index:120; flex-direction:column; gap:2px; display:none; } .site-lang.open .lang-menu{ display:flex; } .lang-menu button, .lang-menu a{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--text); font-family:inherit; font-weight:600; font-size:13px; line-height:1.2; padding:9px 12px; border-radius:8px; cursor:pointer; text-decoration:none; transition:.15s ease; } .lang-menu button:hover, .lang-menu a:hover{ background:var(--line); color:var(--brand); } .lang-menu .ativo{ color:var(--brand); } .lang-menu .ativo::after{ content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; float:right; font-size:11px; } @media (max-width: 900px){ /* mobile: o seletor desce p/ uma LINHA PROPRIA centralizada abaixo dos icones sociais do hero (o i18n.js move o .site-lang p/ depois de .hero-socials em .site-lang{ width:-moz-max-content; width:max-content; margin:4px auto 16px; } .hero-side > .site-lang .lang-trigger{ background:rgba(255,255,255,.05); } /* menu centralizado sob o gatilho (que esta centralizado) */ .hero-side > .site-lang .lang-menu{ right:auto; left:50%; transform:translateX(-50%); } } /* pill de idioma nas paginas estaticas /en/ e /es/: com o mesmo visual dos */ .site-lang a{ background:none; border:0; color:var(--text); font-family:inherit; font-weight:700; font-size:12px; line-height:1; padding:7px 11px; cursor:pointer; letter-spacing:.04em; transition:.2s ease; text-decoration:none; display:inline-block; } .site-lang a:hover{ color:var(--brand); } .site-lang a.ativo{ background:var(--brand); color:#0b0c0f; } @media (max-width: 900px){ .site-lang a{ font-size:10px; padding:6px 8px; } } @media (max-width: 380px){ .site-lang a{ padding:5px 6px; letter-spacing:0; } }