/* =================================================================== LEANDRO FERRE — Portfólio Premium Design system: dark, minimalista, tecnológico Fontes carregadas via no (não @import, para não bloquear o render) =================================================================== */ :root{ /* --- paleta (fixa pelo briefing) --- */ --color-primary: #6D28D9; --color-secondary: #8B5CF6; --color-accent: #A855F7; --color-bg: #0F0F17; --color-bg-alt: #131320; --color-card: #181824; --color-card-hover: #1E1E2E; --color-text: #F8FAFC; --color-text-secondary: #A1A1AA; --color-border: rgba(248,250,252,0.08); --color-border-hover: rgba(168,85,247,0.35); --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%); --gradient-subtle: linear-gradient(180deg, rgba(109,40,217,0.12) 0%, rgba(15,15,23,0) 60%); /* --- tipografia --- */ --font-display: 'Clash Display', 'Satoshi', sans-serif; --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; --container: 1200px; /* --- escala de espaçamento única --- todas as seções usam --space-section como padding vertical padrão; --space-section-sm é reservado para blocos internos/subseções. */ --space-section: clamp(56px, 7vw, 96px); --space-section-sm: clamp(36px, 4.5vw, 64px); --space-gap-lg: clamp(32px, 4vw, 52px); --space-gap-md: 28px; --space-gap-sm: 16px; --radius-lg: 20px; --radius-md: 14px; --shadow-card: 0 20px 50px -30px rgba(0,0,0,0.6); --shadow-card-hover: 0 30px 60px -20px rgba(109,40,217,0.35); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* grão sutil sobre todo o fundo — textura "impressa" discreta */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035; 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"); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; } .container{ max-width:var(--container); margin:0 auto; padding:0 32px; } ::selection{ background:var(--color-accent); color:#fff; } /* focus visível para acessibilidade */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* ---------- tipografia ---------- */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; line-height:1.05; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); margin-bottom:20px; } .eyebrow::before{ content:""; width:16px; height:16px; border:1px solid currentColor; border-radius:2px; position:relative; } .eyebrow::before{ background: linear-gradient(currentColor,currentColor) center/1px 100% no-repeat, linear-gradient(currentColor,currentColor) center/100% 1px no-repeat; background-color:transparent; } .section-head{ max-width:640px; margin-bottom:64px; } .section-head h2{ font-size:clamp(32px,4vw,48px); margin-bottom:18px; } .section-head p{ color:var(--color-text-secondary); font-size:17px; } .case-intro{ color:var(--color-text-secondary); font-size:14.5px; margin-bottom:18px; } /* ---------- progress bar (registro de impressão) ---------- */ #scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--gradient-brand); z-index:1000; transition:width 0.1s linear; } /* ---------- header / nav ---------- */ header#site-header{ position:fixed; top:0; left:0; right:0; z-index:900; padding:22px 0; transition:background 0.35s ease, padding 0.35s ease, border-color .35s ease; border-bottom:1px solid transparent; } header#site-header.scrolled{ padding:14px 0; background:rgba(15,15,23,0.75); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--color-border); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; } .brand-mark{ display:flex; align-items:center; gap:10px; } .brand-logo-svg{ height:24px; width:auto; display:block; } nav.main-nav ul{ display:flex; gap:40px; } nav.main-nav a{ font-size:14.5px; font-weight:500; color:var(--color-text-secondary); position:relative; padding:4px 0; transition:color .25s ease; } nav.main-nav a:hover{ color:var(--color-text); } nav.main-nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gradient-brand); transition:width .3s ease; } nav.main-nav a:hover::after{ width:100%; } .nav-cta{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:10px 20px; border-radius:100px; background:var(--gradient-brand); color:#fff !important; box-shadow:0 8px 24px -8px rgba(109,40,217,0.55); transition:transform .25s ease, box-shadow .25s ease; } .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(168,85,247,0.65); } .nav-toggle{ display:none; background:none; border:0; color:var(--color-text); } @media (max-width:900px){ nav.main-nav{ position:fixed; top:0; right:-100%; height:100vh; width:min(320px,80vw); background:var(--color-bg-alt); border-left:1px solid var(--color-border); padding:100px 32px 32px; transition:right .4s cubic-bezier(.16,1,.3,1); } nav.main-nav.open{ right:0; } nav.main-nav ul{ flex-direction:column; gap:26px; } .nav-cta{ display:none; } .nav-toggle{ display:flex; z-index:950; } } /* ---------- hero ---------- */ .hero{ position:relative; display:flex; align-items:center; padding:126px 0 48px; background:var(--gradient-subtle); overflow:hidden; } /* --- fundo vivo: blueprint grid + scanline + glow --- */ .hero-field{ position:absolute; inset:0; z-index:0; pointer-events:none; } .hero-grid-svg{ position:absolute; inset:0; opacity:0.05; } .hero-scanline{ position:absolute; left:0; right:0; height:120px; background:linear-gradient(180deg, rgba(168,85,247,0) 0%, rgba(168,85,247,0.06) 50%, rgba(168,85,247,0) 100%); animation:scanMove 9s ease-in-out infinite; } @keyframes scanMove{ 0%{ transform:translateY(-120px); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(100vh); opacity:0; } } .hero-glow{ position:absolute; top:-10%; right:-10%; width:60%; height:80%; background:radial-gradient(circle, rgba(109,40,217,0.22) 0%, rgba(109,40,217,0) 65%); filter:blur(10px); } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center; } /* headline: linhas reveladas + readout de "sinal" */ .hero-headline{ font-size:clamp(40px,5.6vw,74px); margin-bottom:26px; } .hl-line{ display:block; overflow:hidden; } .hl-inner{ display:block; } .hl-break{ display:none; } .hl-break--mobile{ display:block; } @media (min-width:961px){ .hl-break--mobile{ display:none; } .hl-break--desktop{ display:block; } } .signal-word{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; min-width:5ch; } .hero-copy p.lede{ font-size:19px; color:var(--color-text-secondary); max-width:520px; margin-bottom:34px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; } .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:100px; font-size:15px; font-weight:600; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } .btn svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); } .btn:active{ transform:scale(0.97); } .btn-primary{ background:var(--gradient-brand); color:#fff; box-shadow:0 10px 30px -10px rgba(109,40,217,0.6); } .btn-primary::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg); transition:left .6s ease; } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(168,85,247,0.7); } .btn-primary:hover::before{ left:130%; } .btn-primary:hover svg{ transform:translateX(3px); } .btn-ghost{ background:transparent; border-color:var(--color-border); color:var(--color-text); z-index:1; } .btn-ghost::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(168,85,247,0.08); transform:translateX(-101%); transition:transform .35s cubic-bezier(.16,1,.3,1); } .btn-ghost:hover{ border-color:var(--color-border-hover); } .btn-ghost:hover::before{ transform:translateX(0); } .btn-ghost:hover svg{ transform:translate(2px,-2px); } /* indicadores premium (substituem os stats simples) */ .hero-indicators{ display:flex; gap:20px; flex-wrap:wrap; } .indicator{ position:relative; padding:13px 16px; border:1px solid var(--color-border); border-radius:10px; background:rgba(248,250,252,0.02); min-width:150px; transition:border-color .3s ease, background .3s ease, transform .3s ease; } .indicator:hover{ border-color:var(--color-border-hover); background:rgba(168,85,247,0.05); transform:translateY(-2px); } .indicator-tick{ position:absolute; width:8px; height:8px; opacity:0; transition:opacity .3s ease; } .indicator-tick.tl{ top:-1px; left:-1px; border-top:1px solid var(--color-accent); border-left:1px solid var(--color-accent); } .indicator-tick.tr{ top:-1px; right:-1px; border-top:1px solid var(--color-accent); border-right:1px solid var(--color-accent); } .indicator-tick.bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--color-accent); border-left:1px solid var(--color-accent); } .indicator-tick.br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--color-accent); border-right:1px solid var(--color-accent); } .indicator:hover .indicator-tick{ opacity:1; } .indicator-value{ display:block; color:var(--color-text); font-family:var(--font-display); font-size:26px; font-weight:600; } .indicator-label{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.03em; color:var(--color-text-secondary); margin-top:4px; text-transform:uppercase; } /* --- instrumento de precisão / signature visual do hero --- */ .hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; height:400px; } .reg-target{ position:relative; width:280px; height:280px; } .reg-target canvas{ width:100%; height:100%; display:block; } .reg-corner{ position:absolute; width:26px; height:26px; opacity:.55; } .reg-corner svg{ width:100%; height:100%; } .reg-corner.tl{ top:-10px; left:-10px; } .reg-corner.tr{ top:-10px; right:-10px; transform:scaleX(-1); } .reg-corner.bl{ bottom:-10px; left:-10px; transform:scaleY(-1); } .reg-corner.br{ bottom:-10px; right:-10px; transform:scale(-1); } /* estado inicial para animação de entrada via JS/GSAP (fallback sem JS = visível) */ .hero-anim{ opacity:1; } .js .hero-anim{ opacity:0; } .js .hl-inner{ transform:translateY(110%); } .js .hero-visual{ opacity:0; transform:translateX(16px); } @media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } .hero-visual{ height:280px; order:-1; } .hero-indicators{ gap:14px; } .indicator{ min-width:130px; padding:14px; } } /* ---------- logos / brands strip ---------- */ .brands-strip{ padding:36px 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); overflow:hidden; } .brands-strip .eyebrow{ display:flex; justify-content:center; margin:0 auto 28px; width:fit-content; } .brands-track-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .brands-track{ display:flex; align-items:center; gap:22px; width:max-content; animation:brands-scroll 32s linear infinite; } /* pausa suave ao passar o mouse — não é preciso para ver as marcas, que já ficam sempre visíveis e coloridas por padrão */ .brands-track-wrap:hover .brands-track{ animation-play-state:paused; } @keyframes brands-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* cada marca vive num "chip" uniforme — normaliza logos com fundos/proporções diferentes e mantém a cor original sempre visível (sem escala de cinza e sem depender de hover) */ .brand-chip{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:172px; height:108px; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px; } .brand-chip img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; } @media (max-width:640px){ .brand-chip{ width:140px; height:88px; padding:14px; } } /* ---------- about ---------- */ .about{ padding:var(--space-section) 0; } .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start; } .about-copy p{ color:var(--color-text-secondary); margin-bottom:20px; font-size:16.5px; } .about-copy p strong{ color:var(--color-text); font-weight:600; } .about-copy p a{ color:var(--color-accent); text-decoration:underline; text-underline-offset:2px; } .about-copy p a:hover{ color:var(--color-text); } /* processo — constrói confiança mostrando como o trabalho acontece */ .process-list{ margin-top:36px; display:flex; flex-direction:column; gap:22px; } .process-item{ display:flex; gap:18px; align-items:flex-start; } .process-num{ font-family:var(--font-mono); font-size:13px; color:var(--color-accent); flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--color-border-hover); display:flex; align-items:center; justify-content:center; margin-top:2px; } .process-item h4{ font-size:16px; margin-bottom:4px; } .process-item p{ color:var(--color-text-secondary); font-size:14px; margin-bottom:0; } /* card de credibilidade — substitui a órbita, foco em confiança e conversão */ .about-visual{ display:flex; align-items:stretch; } .trust-card{ position:relative; width:100%; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:44px 40px; display:flex; flex-direction:column; gap:28px; background-image:var(--gradient-subtle); } .trust-mark{ width:28px; height:28px; color:var(--color-accent); opacity:.8; } .trust-quote{ font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.35; color:var(--color-text); margin:0; } .trust-stats{ display:flex; flex-wrap:wrap; gap:28px; padding-top:8px; border-top:1px solid var(--color-border); } .trust-stats .stat b{ font-family:var(--font-display); font-size:28px; display:block; background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; } .trust-stats .stat span{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.06em; } .trust-cta{ align-self:flex-start; margin-top:auto; } @media (max-width:960px){ .about-grid{ grid-template-columns:1fr; gap:56px; } .trust-card{ padding:32px 26px; } } /* ---------- services ---------- */ .services{ padding:var(--space-section) 0; background:var(--color-bg-alt); position:relative; } .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .service-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:18px; padding:36px 30px; position:relative; overflow:hidden; transition:transform .35s ease, border-color .35s ease, background .35s ease; } .service-card::before{ content:""; position:absolute; inset:0; border-radius:18px; padding:1px; background:var(--gradient-brand); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s ease; pointer-events:none; } .service-card:hover{ transform:translateY(-6px); background:var(--color-card-hover); } .service-card:hover::before{ opacity:1; } .service-icon{ position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; animation:service-icon-float 5s ease-in-out infinite; } .service-card .rmark-mini{ width:26px; height:26px; color:var(--color-accent); opacity:.9; position:relative; z-index:1; } .service-icon .spinner-ring{ position:absolute; top:50%; left:50%; width:60px; height:60px; transform:translate(-50%,-50%) rotate(0deg); animation:service-spinner-rotate 2.2s linear infinite; } .service-icon .spinner-path{ fill:none; stroke:var(--color-border-hover); stroke-width:1.2; stroke-linecap:round; transform-origin:center; stroke-dasharray:1,160; stroke-dashoffset:0; animation:service-spinner-dash 1.6s ease-in-out infinite; transition:stroke .3s ease; } .service-card:hover .spinner-path{ stroke:rgba(168,85,247,0.9); } /* stagger so the six icons never sync up */ .service-card:nth-child(1) .service-icon, .service-card:nth-child(1) .spinner-ring, .service-card:nth-child(1) .spinner-path{ animation-delay:0s; } .service-card:nth-child(2) .service-icon, .service-card:nth-child(2) .spinner-ring, .service-card:nth-child(2) .spinner-path{ animation-delay:.5s; } .service-card:nth-child(3) .service-icon, .service-card:nth-child(3) .spinner-ring, .service-card:nth-child(3) .spinner-path{ animation-delay:1s; } .service-card:nth-child(4) .service-icon, .service-card:nth-child(4) .spinner-ring, .service-card:nth-child(4) .spinner-path{ animation-delay:1.5s; } .service-card:nth-child(5) .service-icon, .service-card:nth-child(5) .spinner-ring, .service-card:nth-child(5) .spinner-path{ animation-delay:2s; } .service-card:nth-child(6) .service-icon, .service-card:nth-child(6) .spinner-ring, .service-card:nth-child(6) .spinner-path{ animation-delay:2.5s; } @keyframes service-icon-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } @keyframes service-spinner-rotate{ 100%{ transform:translate(-50%,-50%) rotate(360deg); } } @keyframes service-spinner-dash{ 0%{ stroke-dasharray:1,160; stroke-dashoffset:0; } 50%{ stroke-dasharray:104,160; stroke-dashoffset:-37; } 100%{ stroke-dasharray:104,160; stroke-dashoffset:-136; } } .service-card h3{ font-size:20px; margin-bottom:12px; } .service-card p{ color:var(--color-text-secondary); font-size:14.5px; } @media (max-width:960px){ .services-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } } /* ---------- cases ---------- */ .cases{ padding:var(--space-section) 0; } .case-featured{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-gap-lg); background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:48px; margin-bottom:var(--space-gap-md); } .case-featured .case-visual{ border-radius:var(--radius-md); overflow:hidden; background:var(--gradient-subtle); display:flex; align-items:center; justify-content:center; min-height:320px; position:relative; cursor:pointer; aspect-ratio:520/698; align-self:start; } .case-visual img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); } .case-visual:hover img{ transform:scale(1.045); } .case-visual::after{ content:"Ver case completo →"; position:absolute; bottom:14px; right:14px; background:rgba(15,15,23,0.85); color:var(--color-text); font-family:var(--font-mono); font-size:11.5px; padding:8px 14px; border-radius:100px; border:1px solid var(--color-border-hover); opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; } .case-visual:hover::after, .case-visual:focus-visible::after{ opacity:1; transform:none; } .case-visual:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; } .case-stats{ display:flex; flex-wrap:wrap; gap:28px; margin:22px 0 26px; } .case-stats .stat b{ font-family:var(--font-display); font-size:26px; display:block; color:var(--color-text); } .case-stats .stat span{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.06em; } .case-block{ margin-bottom:18px; } .case-block h4{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); margin-bottom:6px; } .case-block p{ color:var(--color-text-secondary); font-size:15px; } .case-role{ display:inline-block; margin-top:6px; padding:6px 14px; border-radius:100px; background:rgba(168,85,247,0.1); border:1px solid var(--color-border-hover); font-size:12.5px; color:var(--color-text); } .case-source{ margin-top:20px; font-size:12px; color:var(--color-text-secondary); } .case-source a{ text-decoration:underline; } .case-editions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; } .case-edition{ flex:1; min-width:160px; background:rgba(255,255,255,0.02); border:1px solid var(--color-border); border-radius:12px; padding:16px 18px; } .case-edition .ed-year{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-accent); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:8px; } .case-edition .stat{ display:inline-block; margin-right:20px; } .case-secondary{ font-size:12.5px; color:var(--color-text-secondary); margin-top:4px; } @media (max-width:900px){ .case-featured{ grid-template-columns:1fr; padding:32px 24px; } } /* ---------- por que trabalhar comigo ---------- */ .why-me{ padding:var(--space-section-sm) 0 var(--space-section); } .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .why-item{ display:flex; align-items:flex-start; gap:12px; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:22px; } .why-item svg{ flex-shrink:0; width:20px; height:20px; color:var(--color-accent); margin-top:2px; } .why-item span{ font-size:14.5px; } @media (max-width:960px){ .why-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .why-grid{ grid-template-columns:1fr; } } /* ---------- audiovisual ---------- */ .audiovisual{ padding:var(--space-section) 0; background:var(--color-bg-alt); } .av-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .av-slot{ aspect-ratio:16/10; border-radius:var(--radius-md); border:1px dashed var(--color-border-hover); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:radial-gradient(ellipse at center, rgba(109,40,217,0.08), transparent 70%); color:var(--color-text-secondary); font-size:13px; text-align:center; padding:20px; } .av-slot svg{ width:28px; height:28px; opacity:.6; } @media (max-width:960px){ .av-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .av-grid{ grid-template-columns:1fr; } } /* ---------- trabalhos selecionados (peças reais) ---------- */ .work-gallery{ padding:var(--space-section) 0 var(--space-section-sm); } .work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .work-item{ position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--color-card); border:1px solid var(--color-border); transition:transform .35s ease, border-color .35s ease; } .work-item:hover{ transform:translateY(-6px); border-color:var(--color-border-hover); } .work-item img{ width:100%; height:240px; object-fit:cover; display:block; background:var(--color-bg-alt); } .work-item .work-caption{ padding:18px 20px 22px; } .work-item .work-caption h4{ font-size:16.5px; margin-bottom:4px; } .work-item .work-caption span{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.06em; } @media (max-width:900px){ .work-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .work-grid{ grid-template-columns:1fr; } } /* categorias dentro de Projetos Complementares */ .work-category{ margin-bottom:var(--space-gap-lg); } .work-category:last-of-type{ margin-bottom:0; } .work-category-title{ font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-secondary); margin-bottom:20px; display:flex; align-items:center; gap:14px; } .work-category-title::after{ content:""; flex:1; height:1px; background:var(--color-border); } .work-category-note{ font-size:13px; color:var(--color-text-secondary); margin:-8px 0 18px; } /* Branding: 3 cards do mesmo tamanho (herda a base de 3 colunas) */ .work-grid--3{ grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .work-grid--3{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .work-grid--3{ grid-template-columns:1fr; } } /* Comunicação Digital: 4 cards menores, mesmo tamanho entre si */ .work-grid--4{ grid-template-columns:repeat(4,1fr); gap:18px; } .work-grid--4 .work-item img{ height:170px; } @media (max-width:900px){ .work-grid--4{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .work-grid--4{ grid-template-columns:1fr; } } /* menções leves de eventos, sem imagem dedicada */ .event-chip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .event-chip{ display:flex; gap:14px; align-items:flex-start; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:22px; } .event-chip-icon{ flex-shrink:0; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(168,85,247,0.1); color:var(--color-accent); } .event-chip h4{ font-size:15.5px; margin-bottom:6px; } .event-chip p{ font-size:13px; color:var(--color-text-secondary); line-height:1.5; } @media (max-width:900px){ .event-chip-grid{ grid-template-columns:1fr; } } /* ---------- CTA inline (distribuído entre seções) ---------- */ .cta-inline{ margin-top:var(--space-gap-lg); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg, rgba(109,40,217,0.12), rgba(168,85,247,0.05)); border:1px solid var(--color-border-hover); border-radius:var(--radius-lg); padding:32px 36px; } .cta-inline p{ font-size:17px; font-weight:600; color:var(--color-text); margin:0; max-width:480px; } .cta-inline .btn{ flex-shrink:0; } @media (max-width:700px){ .cta-inline{ flex-direction:column; align-items:flex-start; text-align:left; } } .case-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--color-accent); } .case-cta:hover{ color:var(--color-text); } .case-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:16px; } .case-actions .case-cta{ margin-top:0; } .view-case-btn{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13.5px; font-weight:600; padding:11px 20px; border-radius:100px; background:transparent; border:1px solid var(--color-border-hover); color:var(--color-text); transition:background .25s ease, transform .25s ease; } .view-case-btn:hover{ background:rgba(168,85,247,0.1); transform:translateY(-2px); } /* ---------- direção de arte ---------- */ .art-direction{ padding:var(--space-section) 0; background:var(--color-bg-alt); } .art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .art-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:32px; transition:transform .3s ease, border-color .3s ease; } .art-card:hover{ transform:translateY(-4px); border-color:var(--color-border-hover); } .art-card .art-tag{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin-bottom:10px; display:block; } .art-card h3{ font-size:22px; margin-bottom:12px; } .art-card p{ color:var(--color-text-secondary); font-size:14.5px; margin-bottom:20px; } .art-card .case-stats{ margin:0 0 14px; gap:22px; } .art-card .case-stats .stat b{ font-size:20px; } .art-card .art-source{ font-size:11.5px; color:var(--color-text-secondary); } @media (max-width:1000px){ .art-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .art-grid{ grid-template-columns:1fr; } } .skip-link{ position:absolute; left:-999px; top:auto; background:var(--color-accent); color:#fff; padding:12px 20px; border-radius:8px; z-index:2000; font-size:14px; font-weight:600; } .skip-link:focus{ left:16px; top:16px; } /* ---------- estado ativo do menu ---------- */ nav.main-nav a.active{ color:var(--color-text); } nav.main-nav a.active::after{ width:100%; } /* ---------- contact ---------- */ .contact{ padding:var(--space-section) 0; } .contact-box{ background:var(--color-card); border:1px solid var(--color-border); border-radius:22px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; } .contact-copy{ display:flex; flex-direction:column; } .contact-copy h2{ font-size:32px; margin-bottom:16px; } .contact-copy > p{ color:var(--color-text-secondary); margin-bottom:20px; } .availability-tag{ display:inline-flex; align-items:center; gap:9px; margin-bottom:28px; padding:8px 16px; border-radius:100px; font-size:13px; font-weight:600; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.35); color:#4ADE80; width:fit-content; } .availability-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,0.25); animation:availability-pulse 2s ease-in-out infinite; } @keyframes availability-pulse{ 0%, 100%{ box-shadow:0 0 0 3px rgba(74,222,128,0.25); } 50%{ box-shadow:0 0 0 6px rgba(74,222,128,0.12); } } .contact-links{ display:flex; flex-direction:column; gap:12px; margin-top:auto; } .next-steps{ margin-top:28px; padding-top:24px; border-top:1px solid var(--color-border); } .next-steps-title{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-secondary); margin-bottom:14px; } .next-steps-item{ display:flex; gap:12px; align-items:baseline; font-size:13.5px; color:var(--color-text-secondary); margin-bottom:10px; } .next-steps-item:last-child{ margin-bottom:0; } .next-steps-item span{ font-family:var(--font-mono); font-size:11px; color:var(--color-accent); flex-shrink:0; } .contact-link{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-md); background:var(--color-bg-alt); border:1px solid var(--color-border); transition:border-color .25s ease, transform .25s ease; } .contact-link:hover{ border-color:var(--color-border-hover); transform:translateX(4px); } .contact-link-icon{ flex-shrink:0; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(168,85,247,0.1); color:var(--color-accent); } .contact-link-icon svg{ width:18px; height:18px; } .contact-link strong{ display:block; font-size:14.5px; } .contact-link small{ display:block; font-size:12.5px; color:var(--color-text-secondary); } .contact-form{ display:flex; flex-direction:column; gap:16px; justify-content:center; height:100%; } .contact-form input, .contact-form textarea{ background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:10px; padding:14px 16px; color:var(--color-text); font-family:var(--font-body); font-size:14.5px; transition:border-color .25s ease; width:100%; } .contact-form input:focus, .contact-form textarea:focus{ border-color:var(--color-border-hover); outline:none; } .contact-form textarea{ resize:vertical; min-height:130px; } .contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--color-text-secondary); } /* ---- opção nova: campos em estilo "underline", sem caixa, com label flutuante ---- */ .contact-form--underline .field-float{ position:relative; flex:1; } .contact-form--underline .field-float input, .contact-form--underline .field-float textarea{ background:transparent; border:none; border-bottom:1px solid var(--color-border); border-radius:0; padding:10px 2px 10px; font-size:15.5px; } .contact-form--underline .field-float input:focus, .contact-form--underline .field-float textarea:focus{ border-bottom-color:var(--color-accent); } .contact-form--underline .field-float textarea{ min-height:100px; padding-top:22px; } .contact-form--underline .field-float label{ position:absolute; left:2px; top:11px; font-size:15.5px; color:var(--color-text-secondary); pointer-events:none; transition:all .2s ease; transform-origin:left top; } .contact-form--underline .field-float textarea ~ label{ top:22px; } .contact-form--underline .field-float input:focus + label, .contact-form--underline .field-float input:not(:placeholder-shown) + label, .contact-form--underline .field-float textarea:focus + label, .contact-form--underline .field-float textarea:not(:placeholder-shown) + label{ top:-10px; font-size:11.5px; color:var(--color-accent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; } .contact-form--underline .field-float input::placeholder, .contact-form--underline .field-float textarea::placeholder{ color:transparent; } .form-row{ display:flex; gap:14px; } .form-row .field-float{ min-width:0; } .subject-field{ border:0; padding:0; margin:0; } .subject-field legend{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-secondary); padding:0; margin-bottom:10px; } /* ---- barra de progresso: transforma o form em "ferramenta" ---- */ .form-progress{ margin-bottom:6px; } .form-progress-track{ height:3px; border-radius:100px; background:var(--color-border); overflow:hidden; } .form-progress-fill{ height:100%; width:8%; border-radius:100px; background:var(--gradient-brand); transition:width .5s cubic-bezier(.16,1,.3,1); } .form-progress-steps{ display:flex; justify-content:space-between; margin-top:8px; } .form-progress-step{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-secondary); transition:color .3s ease; } .form-progress-step.is-active{ color:var(--color-accent); } .form-progress-step.is-done{ color:var(--color-text); } .field-hint{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-secondary); margin-top:-8px; transition:color .25s ease; } .field-hint.is-ready{ color:#4ADE80; } /* ---- cards de assunto (substituem os pills) ---- */ .subject-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .subject-cards input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .subject-cards label{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:12px; text-align:center; background:var(--color-bg-alt); border:1px solid var(--color-border); color:var(--color-text-secondary); cursor:pointer; transition:all .25s ease; } .subject-cards label span{ font-size:12.5px; font-weight:500; } .subject-cards label svg{ transition:transform .25s ease; } .subject-cards input[type="radio"]:checked + label{ background:rgba(168,85,247,0.1); border-color:var(--color-border-hover); color:var(--color-text); } .subject-cards input[type="radio"]:checked + label svg{ transform:scale(1.1); color:var(--color-accent); } .subject-cards input[type="radio"]:focus-visible + label{ outline:2px solid var(--color-accent); outline-offset:2px; } .subject-cards label:hover{ border-color:var(--color-border-hover); } @media (max-width:520px){ .subject-cards{ grid-template-columns:repeat(2,1fr); } } .form-status{ font-size:13.5px; min-height:18px; } .form-status.success{ color:#4ADE80; } .form-status.error{ color:#F87171; } .form-note{ font-size:12.5px; color:var(--color-text-secondary); text-align:center; margin-top:-4px; } @media (max-width:900px){ .contact-box{ grid-template-columns:1fr; padding:36px 24px; gap:40px; } .contact-links{ margin-top:24px; } .contact-form{ justify-content:flex-start; } } @media (max-width:520px){ .form-row{ flex-direction:column; } } /* ---------- footer ---------- */ footer{ padding:56px 0 32px; border-top:1px solid var(--color-border); } .footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .footer-brand{ display:flex; align-items:center; gap:12px; } .footer-logo-svg{ height:20px; width:auto; } .footer-brand p{ color:var(--color-text-secondary); font-size:13.5px; font-family:var(--font-mono); } .footer-social{ display:flex; gap:20px; flex-wrap:wrap; } .footer-social a{ color:var(--color-text-secondary); font-size:13.5px; } .footer-social a:hover{ color:var(--color-text); } /* ---------- reveal on scroll ---------- Por padrão o conteúdo fica VISÍVEL (opacity:1). Só fica oculto aguardando animação quando a classe .js existe no (JS rodou) — mesmo padrão já usado em .hero-anim. Isso garante que, se o JavaScript falhar, atrasar ou for bloqueado (comum em navegadores in-app do WhatsApp/Instagram/ Facebook), o conteúdo nunca fique invisível permanentemente. */ .reveal{ opacity:1; transform:none; filter:none; transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease; } .js .reveal{ opacity:0; transform:translateY(24px); filter:blur(3px); } .reveal.is-visible{ opacity:1; transform:none; filter:blur(0); } /* linha "régua" que se desenha sob o eyebrow de cada seção ao entrar em cena — ecoa a linguagem de precisão/blueprint do hero em todo o site */ .section-head{ position:relative; } .section-head .eyebrow::after{ content:""; position:absolute; left:0; bottom:-8px; height:1px; width:0; background:var(--gradient-brand); transition:width .8s cubic-bezier(.16,1,.3,1) .25s; } .section-head.is-visible .eyebrow::after{ width:56px; } /* ---------- back to top / whatsapp flutuante ---------- */ #backToTop{ position:fixed; bottom:28px; right:28px; z-index:400; width:46px; height:46px; border-radius:50%; background:var(--color-card); border:1px solid var(--color-border-hover); box-shadow:0 10px 26px -10px rgba(109,40,217,0.5); display:flex; align-items:center; justify-content:center; color:var(--color-text); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } #backToTop.show{ opacity:1; pointer-events:auto; transform:none; } #backToTop:hover{ background:var(--gradient-brand); border-color:transparent; box-shadow:0 14px 32px -8px rgba(168,85,247,0.7); color:#fff; } #floatWhatsapp{ position:fixed; bottom:28px; left:28px; z-index:400; width:52px; height:52px; border-radius:50%; background:#22C55E; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -10px rgba(34,197,94,0.7); transition:transform .25s ease, box-shadow .25s ease; } #floatWhatsapp:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 34px -8px rgba(34,197,94,0.8); } #floatWhatsapp svg{ width:24px; height:24px; } @media (max-width:640px){ #floatWhatsapp{ width:46px; height:46px; bottom:20px; left:20px; } #backToTop{ bottom:20px; right:20px; } } /* =================================================================== WORK ITEM — clicável (abre modal com o case study da peça) =================================================================== */ .work-item{ cursor:pointer; } .work-item:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; } /* =================================================================== MODAL — case study de "Trabalhos selecionados" =================================================================== */ .work-modal-overlay{ position:fixed; inset:0; z-index:1100; background:rgba(8,8,14,0.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding:64px 20px; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; } .work-modal-overlay.is-open{ opacity:1; visibility:visible; } .work-modal-box{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); max-width:760px; width:100%; padding:36px; position:relative; box-shadow:var(--shadow-card); transform:translateY(20px) scale(.98); transition:transform .35s ease; } .work-modal-overlay.is-open .work-modal-box{ transform:translateY(0) scale(1); } .work-modal-close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:1px solid var(--color-border); background:transparent; color:var(--color-text); display:flex; align-items:center; justify-content:center; transition:border-color .25s ease; } .work-modal-close:hover{ border-color:var(--color-border-hover); } .work-modal-close svg{ width:16px; height:16px; } .wm-tag{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin-bottom:8px; } .wm-title{ font-family:var(--font-display); font-size:26px; margin-bottom:20px; } .wm-image{ width:100%; height:auto; display:block; border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:26px; } .wm-fields{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; } .wm-field.full{ grid-column:span 2; } .wm-field h4{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); margin-bottom:6px; } .wm-field p{ color:var(--color-text-secondary); font-size:15px; } .wm-tools{ display:flex; flex-wrap:wrap; gap:8px; } .wm-tools span{ font-family:var(--font-mono); font-size:12px; padding:6px 13px; border-radius:100px; border:1px solid var(--color-border); color:var(--color-text-secondary); } .wm-stats-row{ display:flex; flex-wrap:wrap; gap:26px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--color-border); } .wm-stat b{ font-family:var(--font-display); font-size:22px; display:block; } .wm-stat span{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.06em; } .wm-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .wm-list li{ font-size:14.5px; color:var(--color-text-secondary); padding-left:18px; position:relative; } .wm-list li::before{ content:"—"; position:absolute; left:0; color:var(--color-accent); } .wm-source{ margin-top:22px; padding-top:18px; border-top:1px solid var(--color-border); font-size:12px; color:var(--color-text-secondary); } @media (max-width:640px){ .work-modal-box{ padding:26px 20px; } .wm-fields{ grid-template-columns:1fr; } .wm-field.full{ grid-column:span 1; } }