/* ================================================================ rogerweikers.com — stylesheet global Usado por: index.htm, english.htm e todas as páginas de /cases ================================================================ */ /* ============================================ 00. TOKENS ============================================ */ :root{ --bg: #10141c; --bg-alt: #0b0e14; --bg-elevated: #171d29; --text: #e4e4e4; --text-dim: #8f8f8f; --text-faint: #5c5c5c; --accent: #4a80c4; --accent-dark: #275b9b; --border: rgba(228,228,228,0.09); --border-strong: rgba(228,228,228,0.18); --font-display: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --container: 1240px; --gutter: clamp(24px, 5vw, 64px); --radius: 3px; --ease: cubic-bezier(.22,.61,.36,1); } /* ============================================ 01. RESET ============================================ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; height:100%; } [id]{ scroll-margin-top:100px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; /* rodapé fixo no fim da viewport mesmo quando o conteúdo é curto (ex.: aba "Autoria" do Arquivo, com poucas fichas) */ min-height:100%; display:flex; flex-direction:column; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-0.02em; } /* brilho ambiente de fundo — preso à tela (fixed), não ao documento. Antes era pintado direto no , que em páginas longas fica muito alto; um gradiente sutil pintado numa área tão grande podia mostrar uma "costura" visível onde o navegador divide a pintura em blocos internamente. Preso à tela, o gradiente nunca cresce além da altura da janela, e a costura some — como efeito colateral, os 3 brilhos ficam sempre visíveis juntos (não só ao rolar até aquele trecho da página), o que também fica bem. */ body::before{ content:""; position:fixed; inset:-150px; z-index:-1; pointer-events:none; background: radial-gradient(ellipse 900px 700px at 8% 0%, rgba(39,91,155,0.16), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 40%, rgba(74,128,196,0.09), transparent 55%), radial-gradient(ellipse 1000px 800px at 15% 100%, rgba(39,91,155,0.10), transparent 60%); /* o degradê em si é sutil demais pra 8 bits de cor — sem isso dá pra ver "anéis" de banding na transição; o blur espalha a transição de cor por mais pixels e disfarça o degrau. inset:-150px evita que o blur crie uma borda visível nítida na beirada do próprio elemento */ filter:blur(90px); } /* film grain overlay */ body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); } .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:16px; height:1px; background:var(--accent); display:inline-block; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter); } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } @media (max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr; } } .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } /* ============================================ 02. HEADER (compartilhado por todas as páginas) ============================================ */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(26,26,26,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:padding .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; padding-bottom:28px; transition:padding .35s var(--ease); } .site-header.is-scrolled{ border-bottom-color:var(--border); } .site-header.is-scrolled .container{ padding-top:16px; padding-bottom:16px; } .logo{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-0.01em; } .logo span{ font-weight:400; color:var(--text-dim); } .main-nav{ display:flex; align-items:center; gap:40px; } .main-nav ul{ display:flex; gap:32px; } .main-nav a{ font-size:14px; color:var(--text-dim); position:relative; padding:4px 0; transition:color .25s var(--ease); } .main-nav a:hover, .main-nav a:focus-visible{ color:var(--text); } .main-nav a.is-active{ color:var(--text); } .main-nav a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--accent); } .lang-switch{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); } .lang-switch a{ color:inherit; opacity:0.5; transition:opacity .2s; padding:2px; } .lang-switch a.is-active{ opacity:1; color:var(--text); } .lang-switch a:hover{ opacity:0.85; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:28px; height:20px; background:none; border:none; } .nav-toggle span{ display:block; width:100%; height:1px; background:var(--text); transition:transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } @media (max-width:860px){ .nav-toggle{ display:flex; } .main-nav{ position:fixed; top:0; right:0; width:min(78vw,320px); height:100vh; background:var(--bg-alt); border-left:1px solid var(--border); flex-direction:column; align-items:flex-start; justify-content:center; padding:48px var(--gutter); transform:translateX(100%); transition:transform .4s var(--ease); } .main-nav.is-open{ transform:translateX(0); } .main-nav ul{ flex-direction:column; gap:22px; } .main-nav ul a{ font-size:20px; } .lang-switch{ margin-top:36px; } } /* ============================================ 03. HERO ============================================ */ .hero{ position:relative; padding:196px 0 96px; overflow:hidden; } .hero::before{ content:""; position:absolute; top:-24%; right:-14%; width:920px; height:920px; background:radial-gradient(circle, var(--accent-dark) 0%, transparent 68%); opacity:0.25; filter:blur(10px); pointer-events:none; } .hero__inner{ position:relative; max-width:880px; } .hero__eyebrow{ margin-bottom:28px; } .hero h1{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); margin-bottom:28px; } .hero h1 em{ font-style:normal; color:var(--text-dim); font-weight:400; } .hero p{ font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--text-dim); max-width:620px; margin-bottom:44px; } .btn-row{ display:flex; gap:16px; flex-wrap:wrap; } .btn{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em; padding:15px 26px; border-radius:var(--radius); border:1px solid var(--border-strong); background:none; transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); display:inline-flex; align-items:center; gap:10px; } .btn--primary{ background:var(--accent); border-color:var(--accent); color:#0f1420; font-weight:500; } .btn--primary:hover{ background:#5c8fd1; border-color:#5c8fd1; transform:translateY(-2px); } .btn--ghost{ color:var(--text-dim); } .btn--ghost:hover{ border-color:var(--text-dim); color:var(--text); transform:translateY(-2px); } /* geography status strip */ .geo-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; white-space:nowrap; background:var(--bg-alt); } .geo-strip__track{ display:inline-flex; animation:geo-scroll 34s linear infinite; } @media (prefers-reduced-motion: reduce){ .geo-strip__track{ animation:none; } } .geo-strip:hover .geo-strip__track{ animation-play-state:paused; } @keyframes geo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .geo-strip__item{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); letter-spacing:0.08em; padding:14px 28px; display:inline-flex; align-items:center; gap:10px; border-right:1px solid var(--border); } .geo-strip__item b{ color:var(--text-dim); font-weight:500; } .geo-strip__item .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; } /* ============================================ 04. SECTION HEADS (compartilhado) ============================================ */ .section{ padding:120px 0; } .section--tight{ padding:44px 0; } #experiencia{ padding-top:88px; } .section__head{ max-width:640px; margin-bottom:64px; } .section__head .eyebrow{ margin-bottom:20px; } .section__head h2{ font-size:clamp(1.8rem, 3vw, 2.6rem); } .section__head h2 em{ font-style:normal; color:var(--text-dim); font-weight:400; } .section__head p{ color:var(--text-dim); margin-top:18px; font-size:1.05rem; } /* ============================================ 05. CASES ============================================ */ .case-card{ position:relative; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg-elevated); transition:border-color .3s var(--ease), transform .3s var(--ease); } .case-card:hover, .case-card:focus-within{ border-color:var(--border-strong); transform:translateY(-6px); } .case-card__media{ aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--border); } .case-card__media img{ width:100%; height:100%; object-fit:cover; transition:filter .5s var(--ease), transform .6s var(--ease); } /* efeito escuro→claro no hover: só em dispositivos com mouse de verdade. em touch (tablet/celular) a imagem já aparece na versão clara — não existe hover real nesses aparelhos, então escurecer por padrão só pioraria a leitura. */ @media (hover: hover) and (pointer: fine){ .case-card__media img{ filter:brightness(0.55) saturate(0.85); } .case-card:hover .case-card__media img, .case-card:focus-within .case-card__media img{ filter:brightness(1) saturate(1); transform:scale(1.045); } } .case-card__body{ padding:24px 26px 28px; } .case-card__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .case-card__index{ font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.1em; } .case-card__tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--border-strong); border-radius:20px; padding:3px 10px; } .case-card__body h3{ font-size:1.2rem; margin:10px 0 8px; } .case-card__body p{ font-size:0.92rem; color:var(--text-dim); } .case-card__arrow{ position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong); background:rgba(20,20,20,0.6); display:flex; align-items:center; justify-content:center; opacity:0; transform:translate(-6px,6px); transition:opacity .3s var(--ease), transform .3s var(--ease); } .case-card:hover .case-card__arrow, .case-card:focus-within .case-card__arrow{ opacity:1; transform:translate(0,0); } .case-card__arrow svg{ width:14px; height:14px; stroke:var(--text); } .cases-footer{ margin-top:52px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap; } /* ============================================ 06. ABOUT SUMMARY ============================================ */ .about{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .about__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--gutter); align-items:start; } @media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } } .about h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.25; } .about h2 em{ font-style:normal; color:var(--text-dim); font-weight:400; } .about__copy{ margin-top:14px; } .about__copy p{ color:var(--text-dim); font-size:1.02rem; margin-bottom:20px; } .about__meta{ margin-top:32px; display:grid; grid-template-columns:repeat(3,auto); gap:32px; font-family:var(--font-mono); } @media (max-width:520px){ .about__meta{ grid-template-columns:1fr; } } .about__meta div b{ display:block; font-size:1.6rem; color:var(--text); font-weight:600; font-family:var(--font-display); } .about__meta div span{ font-size:11px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; } /* ============================================ 07. CONTATO ============================================ */ .contact{ text-align:center; padding:140px 0; } .contact__photo{ width:88px; height:88px; border-radius:50%; overflow:hidden; margin:0 auto 28px; border:1px solid var(--border-strong); } .contact__photo img{ width:100%; height:100%; object-fit:cover; } .contact h2{ font-size:clamp(2rem,4.4vw,3.4rem); max-width:760px; margin:22px auto 40px; } .contact h2 em{ font-style:normal; color:var(--text-dim); font-weight:400; } .contact__email{ font-family:var(--font-mono); font-size:clamp(1rem,2vw,1.3rem); color:var(--accent); border-bottom:1px solid transparent; transition:border-color .25s var(--ease); } .contact__email:hover{ border-color:var(--accent); } .contact__links{ margin-top:36px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; } .contact__links a{ font-size:14px; color:var(--text-dim); transition:color .2s; } /* link dentro de texto corrido (ex: bullets do Sobre) — sem sublinhado, setinha discreta indicando link */ .link-inline{ color:inherit; text-decoration:none; transition:color .2s var(--ease); } .link-inline::after{ content:"↗"; font-size:0.7em; margin-left:2px; display:inline-block; transform:translateY(-1px); } .link-inline:hover{ color:var(--accent); } .contact__links a:hover{ color:var(--text); } /* ============================================ 08. FOOTER (compartilhado) ============================================ */ .site-footer{ border-top:1px solid var(--border); padding:40px 0; margin-top:auto; } .site-footer .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .footer-tagline{ font-size:13px; color:var(--text-faint); } .social-row{ display:flex; gap:18px; } .social-row a{ width:34px; height:34px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s, transform .2s; } .social-row a:hover{ border-color:var(--border-strong); transform:translateY(-2px); } .social-row svg{ width:15px; height:15px; stroke:var(--text-dim); } .to-top{ position:fixed; right:28px; bottom:28px; width:44px; height:44px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index:900; } .to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); } .to-top:hover{ border-color:var(--accent); } .to-top svg{ width:16px; height:16px; stroke:var(--text); } /* ============================================ 09. CASE PAGES (usado só em /cases/*.htm) ============================================ */ /* sub-nav discreta: 01 → 09, abaixo do header */ .case-subnav{ position:sticky; top:0; z-index:500; margin-top:76px; background:var(--bg-alt); border-bottom:1px solid var(--border); } .case-subnav__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .case-subnav__scroll::-webkit-scrollbar{ display:none; } .case-subnav__list{ display:flex; gap:4px; padding:0 var(--gutter); max-width:var(--container); margin:0 auto; } .case-subnav__item{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--text-faint); white-space:nowrap; /* padding assimétrico de propósito: a JetBrains Mono não fica centralizada visualmente com padding igual em cima/embaixo — o texto senta mais perto do topo por padrão, então empurramos pra baixo (mais espaço em cima, menos embaixo), mantendo a altura total do botão igual */ padding:20px 14px 12px; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease); } .case-subnav__item:hover{ color:var(--text-dim); } .case-subnav__item.is-current{ color:var(--text); border-bottom-color:var(--accent); } /* degradê nas bordas — sinaliza que há mais itens fora da tela */ .case-subnav__fade{ position:absolute; top:0; bottom:0; width:52px; z-index:2; pointer-events:none; opacity:0; transition:opacity .25s var(--ease); } .case-subnav__fade--left{ left:0; background:linear-gradient(to right, var(--bg-alt), transparent); } .case-subnav__fade--right{ right:0; background:linear-gradient(to left, var(--bg-alt), transparent); } .case-subnav__fade.is-visible{ opacity:1; } /* setinhas de navegação — só aparecem quando há conteúdo cortado */ .case-subnav__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:26px; height:26px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), visibility .25s; } .case-subnav__arrow.is-visible{ opacity:1; visibility:visible; pointer-events:auto; } .case-subnav__arrow--left{ left:10px; } .case-subnav__arrow--right{ right:10px; } .case-subnav__arrow svg{ width:11px; height:11px; stroke:var(--text-dim); } .case-subnav__arrow:hover{ border-color:var(--accent); } .case-subnav__arrow:hover svg{ stroke:var(--text); } /* cabeçalho do case */ .case-hero{ padding:84px 0 44px; } .case-hero__meta{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:0.04em; } .case-hero__meta span b{ color:var(--text-dim); font-weight:500; } .case-hero h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); margin-top:18px; } .case-hero__subtitle{ font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:var(--text-dim); max-width:680px; margin-top:20px; } /* corpo de texto explicativo */ .case-copy{ max-width:680px; } .case-copy p{ color:var(--text-dim); font-size:1.02rem; margin-bottom:20px; } .case-copy p:last-child{ margin-bottom:0; } /* lista simples de responsabilidades/atuação dentro do texto de um case */ .case-list{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:10px; } .case-list li{ position:relative; padding-left:22px; color:var(--text-dim); font-size:1.02rem; } .case-list li::before{ content:""; position:absolute; left:0; top:0.65em; width:8px; height:1px; background:var(--accent); } /* bloco de projeto repetível — título + resumo + grid flexível de fotos + nota final */ .case-project{ padding:56px 0; border-top:1px solid var(--border); } .case-project:first-of-type{ border-top:none; padding-top:0; } .case-project__index{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--accent); } .case-project h3{ font-size:1.5rem; margin:10px 0 12px; } .case-project__summary{ color:var(--text-dim); font-size:1.02rem; max-width:720px; margin-bottom:28px; } .case-project__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; } .case-project__grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border); } .case-project__grid figcaption{ margin-top:8px; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); } /* receitas fixas — escolha manual de quantas fotos por linha, em vez de deixar o navegador decidir */ .case-project__grid--1{ grid-template-columns:1fr; } .case-project__grid--2{ grid-template-columns:repeat(2,1fr); } .case-project__grid--3{ grid-template-columns:repeat(3,1fr); } .case-project__grid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:700px){ .case-project__grid--2, .case-project__grid--3, .case-project__grid--4{ grid-template-columns:1fr; } } .case-project__note{ margin-top:24px; color:var(--text-dim); font-size:0.96rem; max-width:720px; padding-left:16px; border-left:2px solid var(--border-strong); } /* caixa de nota/disclosure no fim de um case */ .case-note{ background:var(--bg-elevated); border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:var(--radius); padding:24px 28px; margin-top:8px; } .case-note__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block; } .case-note p{ font-size:0.95rem; color:var(--text-dim); } /* galeria */ .gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } .gallery__item--wide{ grid-column:1 / -1; } .gallery__item img{ width:100%; border-radius:var(--radius); border:1px solid var(--border); aspect-ratio:16/10; object-fit:cover; } .gallery__item--wide img{ aspect-ratio:16/8; } .gallery__item figcaption{ margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:0.03em; } @media (max-width:700px){ .gallery{ grid-template-columns:1fr; } } /* navegação pro próximo case */ .case-next{ border-top:1px solid var(--border); padding:56px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .case-next__label{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:0.08em; text-transform:uppercase; } .case-next__title{ font-size:1.5rem; margin-top:8px; transition:color .2s var(--ease); } .case-next a:hover .case-next__title{ color:var(--accent); } .case-next__arrow{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); } /* blocos curtos de abordagem, lado a lado (reaproveita o espírito do .about__meta) */ .case-approach{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px; } @media (max-width:700px){ .case-approach{ grid-template-columns:1fr; } } .case-approach__item{ border-top:1px solid var(--border-strong); padding-top:16px; } .case-approach__item h4{ font-family:var(--font-display); font-size:0.98rem; font-weight:600; margin-bottom:8px; } .case-approach__item p{ font-size:0.9rem; color:var(--text-dim); } /* destaques de impacto — pares de cards, mais peso visual que texto corrido */ .case-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:8px; } @media (max-width:700px){ .case-highlights{ grid-template-columns:1fr; } } .case-highlight{ background:var(--bg-elevated); border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:var(--radius); padding:22px 24px; } .case-highlight p{ font-size:0.95rem; color:var(--text-dim); } /* variante em 3 colunas, texto menor — usada pra dividir um parágrafo grande em blocos curtos */ .case-highlights--3{ grid-template-columns:repeat(3,1fr); } .case-highlights--3 .case-highlight{ padding:18px 20px; } .case-highlights--3 .case-highlight p{ font-size:0.86rem; } @media (max-width:900px){ .case-highlights--3{ grid-template-columns:1fr; } } /* ícone decorativo grande e discreto pro Contato, no lugar da foto */ .contact__icon{ width:64px; height:64px; margin:0 auto 24px; color:var(--text-faint); opacity:0.55; } .contact__icon svg{ width:100%; height:100%; } /* divisor entre o projeto principal e um módulo secundário da mesma empresa */ .case-divider{ display:flex; align-items:center; gap:16px; margin:8px 0 8px; } .case-divider::after{ content:""; flex:1; height:1px; background:var(--border); } .case-divider__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; } /* rótulo pequeno acima de uma mini-galeria dentro do case */ .gallery-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:20px; } /* ============================================ 11. MODAL / POPUP (genérico, reaproveitável) ============================================ */ .modal-trigger{ background:none; border:none; color:var(--accent); font-family:var(--font-mono); font-size:13px; letter-spacing:0.02em; cursor:pointer; padding:0; margin-top:20px; display:inline-flex; align-items:center; gap:6px; } .modal-trigger:hover{ text-decoration:underline; } .modal-overlay{ display:none; position:fixed; inset:0; z-index:2000; background:rgba(6,8,13,0.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:32px 20px; } .modal-overlay.is-open{ display:flex; } .modal-panel{ position:relative; background:var(--bg-elevated); border:1px solid var(--accent); border-radius:4px; width:100%; max-width:680px; max-height:85vh; overflow-y:auto; padding:52px 48px; } @media (max-width:600px){ .modal-panel{ padding:40px 24px; } } .modal-close{ position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong); background:none; color:var(--text-dim); font-size:18px; line-height:1; padding-bottom:3px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .modal-close:hover{ border-color:var(--accent); color:var(--text); } .modal-doc h3{ font-size:1.4rem; margin-top:16px; margin-bottom:14px; } .modal-doc p{ color:var(--text-dim); font-size:0.98rem; line-height:1.65; margin-bottom:4px; } .modal-doc h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin:30px 0 14px; } .modal-doc .case-list{ margin-top:14px; } .modal-doc hr.modal-rule{ border:none; border-top:1px solid var(--border); margin:28px 0; } .modal-doc .modal-note{ font-size:0.9rem; color:var(--text-faint); } /* bloco repetível de recomendação (popup de reconhecimentos) */ .rec-item{ padding:4px 0; } .rec-item__name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--text); display:block; } .rec-item__role{ display:block; font-size:0.88rem; color:var(--text-dim); margin-top:2px; } .rec-item__meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; } .rec-item__location{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); } .rec-item__location svg{ width:13px; height:13px; color:var(--accent); flex:none; } .rec-item__quote{ margin:14px 0 0; padding-left:14px; border-left:2px solid var(--border-strong); font-size:0.96rem; font-style:italic; color:var(--text-dim); line-height:1.6; } .rec-item__transnote{ display:block; margin-top:6px; font-size:0.8rem; color:var(--text-faint); } /* ============================================ 12. ACESSIBILIDADE ============================================ */ a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ============================================ 13. LIGHTBOX (fotos ampliadas dos projetos) ============================================ */ .case-project__grid img{ cursor:zoom-in; } .lightbox{ display:none; position:fixed; inset:0; z-index:2100; background:rgba(4,6,10,0.92); align-items:center; justify-content:center; } .lightbox.is-open{ display:flex; } .lightbox__stage{ display:flex; flex-direction:column; align-items:center; gap:14px; max-width:88vw; } .lightbox__img{ max-width:88vw; max-height:82vh; object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,0.5); } /* qdo a galeria tem tira de miniaturas, a foto principal cede um pouco de altura pra abrir espaço embaixo, sem estourar a tela */ .lightbox.has-thumbs .lightbox__img{ max-height:68vh; } /* tira de miniaturas do lightbox — mesmo padrão de interação do carrossel do Arquivo (.archive-carousel__thumbs*), só que maior, já que aqui a imagem principal fica em tela cheia */ .lightbox__thumbs-wrap{ position:relative; width:100%; } .lightbox__thumbs{ display:none; gap:8px; padding:2px 4px; overflow-x:auto; scrollbar-width:none; justify-content:center; } .lightbox__thumbs::-webkit-scrollbar{ display:none; } .lightbox__thumbs-fade{ position:absolute; top:0; bottom:0; width:36px; z-index:2; pointer-events:none; opacity:0; transition:opacity .2s var(--ease); } .lightbox__thumbs-fade--left{ left:0; background:linear-gradient(to right, rgba(4,6,10,0.92), transparent); } .lightbox__thumbs-fade--right{ right:0; background:linear-gradient(to left, rgba(4,6,10,0.92), transparent); } .lightbox__thumbs-fade.is-visible{ opacity:1; } .lightbox__thumb{ flex:none; width:76px; aspect-ratio:4/3; padding:0; border-radius:3px; border:2px solid transparent; background:var(--bg-elevated); overflow:hidden; cursor:pointer; opacity:0.5; transition:opacity .2s var(--ease), border-color .2s var(--ease); } .lightbox__thumb img{ width:100%; height:100%; object-fit:cover; } .lightbox__thumb:hover{ opacity:0.8; } .lightbox__thumb.is-active{ opacity:1; border-color:var(--accent); } @media (max-width:640px){ .lightbox__thumb{ width:56px; } } .lightbox__close{ position:absolute; top:24px; right:24px; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); background:rgba(255,255,255,0.04); color:var(--text); font-size:20px; line-height:1; padding-bottom:3px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .lightbox__close:hover{ border-color:var(--accent); } .lightbox__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid var(--border-strong); background:rgba(255,255,255,0.04); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; } .lightbox__arrow svg{ width:22px; height:22px; } .lightbox__arrow:hover{ border-color:var(--accent); } .lightbox__arrow--prev{ left:20px; } .lightbox__arrow--next{ right:20px; } @media (max-width:640px){ .lightbox__arrow--prev{ left:8px; } .lightbox__arrow--next{ right:8px; } .lightbox__arrow{ width:38px; height:38px; } } .lightbox__count{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:14px; color:var(--text); background:rgba(255,255,255,0.08); padding:7px 16px; border-radius:20px; } /* ============================================ 14. VÍDEO EMBUTIDO (capa clicável, YouTube só carrega no clique) ============================================ */ .video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; cursor:pointer; background-size:cover; background-position:center; background-color:var(--bg-elevated); border:1px solid var(--border); margin-bottom:24px; } .video-embed::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0.28); transition:background .2s var(--ease); } .video-embed:hover::before{ background:rgba(0,0,0,0.42); } .video-embed__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,0.94); display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease); z-index:1; } .video-embed:hover .video-embed__play{ transform:translate(-50%,-50%) scale(1.08); } .video-embed__play svg{ width:26px; height:26px; margin-left:4px; color:#14171c; } .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; } @media (max-width:640px){ .video-embed__play{ width:56px; height:56px; } .video-embed__play svg{ width:20px; height:20px; } } /* ============================================ DISCLAIMER — link no footer ============================================ */ .footer-disclaimer-link{ background:none; border:none; padding:0; margin-left:10px; font:inherit; font-size:0.85em; color:inherit; opacity:0.6; text-decoration:underline; cursor:pointer; } .footer-disclaimer-link:hover{ opacity:1; } /* linha com E-mail → e Mensagem → lado a lado, mesmo estilo */ .contact__cta-row{ display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; } button.contact__email{ background:none; border:none; border-bottom:1px solid transparent; padding:0; cursor:pointer; } /* popup do formulário de contato */ .modal-doc .form-intro{ color:var(--text-dim); font-size:0.98rem; line-height:1.6; margin:14px 0 24px; } .contact-form{ display:flex; flex-direction:column; gap:18px; } .form-bottom{ display:flex; flex-direction:column; gap:8px; } .modal-doc .form-bottom .form-status{ min-height:1.1em; margin:0; } .form-bottom .form-actions{ margin-top:0; } .form-row{ display:flex; gap:20px; } @media (max-width:600px){ .form-row{ flex-direction:column; gap:20px; } } .form-field{ flex:1; display:flex; flex-direction:column; gap:8px; } .form-field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); } .form-field input, .form-field textarea{ font-family:var(--font-display); font-size:15px; color:var(--text); background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:var(--radius); padding:12px 14px; transition:border-color .25s var(--ease); width:100%; } .form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--accent); } .form-field textarea{ resize:vertical; min-height:110px; } .form-field--hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-status{ font-family:var(--font-mono); font-size:13px; min-height:1.4em; } .form-status[data-state="ok"]{ color:var(--accent); } .form-status[data-state="error"]{ color:#d17a7a; } .form-actions{ margin-top:4px; } .btn[disabled]{ opacity:0.55; cursor:default; } .modal-panel--form{ max-width:600px; } /* painel do disclaimer — deliberadamente "sem graça", tipo bula/documento legal, pra não competir visualmente com os popups de conteúdo (Lexis, depoimentos) */ .modal-panel--legal{ border-color:var(--border); max-width:560px; padding:40px 36px; background:var(--bg); } .modal-doc--legal{ font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--text-faint); } .modal-doc--legal .eyebrow{ color:var(--text-faint); font-size:11px; } .modal-doc--legal .eyebrow::before{ background:var(--text-faint); } .modal-doc--legal h3{ font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); margin-top:14px; margin-bottom:18px; } .modal-doc--legal h4{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); margin:22px 0 10px; } .modal-doc--legal p{ font-size:12px; line-height:1.7; color:var(--text-dim); margin-bottom:14px; } .modal-doc--legal .case-list{ margin-top:0; padding-left:16px; } .modal-doc--legal .case-list li{ font-size:12px; line-height:1.7; color:var(--text-dim); margin-bottom:8px; } .modal-doc--legal hr.modal-rule{ border:none; border-top:1px dashed var(--border); margin:20px 0; } .modal-doc--legal .link-inline{ font-size:12px; } /* ============================================ VIDEO TABS — seletor de abas acima de um .video-embed (usado quando há mais de uma versão de vídeo: mobile/tablet/desktop) ============================================ */ .video-group{ margin-top:24px; } .video-tabs{ display:flex; gap:8px; } .video-tabs__btn{ background:none; border:1px solid var(--border-strong); color:var(--text-dim); font-family:var(--font-mono); font-size:12px; padding:8px 16px; border-radius:20px; cursor:pointer; } .video-tabs__btn.is-active{ border-color:var(--accent); color:var(--text); } /* ============================================ ARQUIVO — ícone "em construção" ============================================ */ .wip-icon{ width:76px; height:76px; margin:40px auto 20px; color:var(--text-dim); opacity:0.85; } .wip-icon svg{ width:100%; height:100%; } .wip-icon__dot{ animation:wip-pulse 1.6s ease-in-out infinite; } .wip-icon__dot:nth-child(5){ animation-delay:0.2s; } .wip-icon__dot:nth-child(6){ animation-delay:0.4s; } @keyframes wip-pulse{ 0%, 80%, 100%{ opacity:0.25; } 40%{ opacity:1; } } /* ============================================ CONTATO — ícone de "conversa" animado ============================================ */ .talk-icon{ width:44px; height:44px; margin:0 auto 16px; color:var(--text-dim); opacity:0.85; } .talk-icon svg{ width:100%; height:100%; } .talk-icon svg circle{ animation:wip-pulse 1.6s ease-in-out infinite; } .talk-icon svg circle:nth-of-type(2){ animation-delay:0.2s; } .talk-icon svg circle:nth-of-type(3){ animation-delay:0.4s; } /* ============================================ ARQUIVO — filtro, grid de fichas e carrossel ============================================ */ /* busca do arquivo — filtra as fichas por título/descrição, sem reload. padding só em cima (24px) — o espaço embaixo é fechado junto com .archive-section + .archive-grid logo abaixo, pra dar exatamente os mesmos 24px dos dois lados da barra de busca */ .archive-search-wrap{ padding:24px 0 0; } .archive-search{ display:flex; align-items:stretch; max-width:520px; margin:0 auto; background:var(--bg-elevated); border:1px solid var(--border); border-radius:20px; transition:border-color .2s var(--ease); } .archive-search:focus-within{ border-color:var(--accent); } .archive-search__field{ position:relative; flex:1; min-width:0; display:flex; align-items:center; } .archive-search__icon{ position:absolute; top:50%; left:14px; transform:translateY(-50%); width:15px; height:15px; stroke:var(--text-faint); pointer-events:none; } .archive-search__input{ width:100%; background:none; border:none; padding:9px 36px 9px 38px; font-family:var(--font-body); font-size:14px; color:var(--text); } .archive-search__input::placeholder{ color:var(--text-faint); } .archive-search__input:focus{ outline:none; } .archive-search__clear{ display:none; position:absolute; top:50%; right:8px; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:none; border:none; color:var(--text-faint); font-size:16px; line-height:1; cursor:pointer; } .archive-search__clear:hover{ color:var(--text); } .archive-search.has-value .archive-search__clear{ display:block; } .archive-search__divider{ width:1px; align-self:center; height:20px; background:var(--border); flex-shrink:0; } .archive-search__about{ flex-shrink:0; background:none; border:none; cursor:pointer; padding:9px 18px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; font-weight:400; color:var(--text-dim); white-space:nowrap; transition:color .2s var(--ease); } .archive-search__about:hover{ color:var(--accent); } /* filtro de categorias — reaproveita a estrutura visual do .case-subnav, mas os itens são