/* ========================================================== Zuno — Criação de Sites Estilos globais (mobile-first) ========================================================== */ /* ---------- Fontes (self-hosted, OFL) ---------- */ @font-face { font-family: "Sora"; src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Sora"; src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- */ :root { --ink: #04060F; --night: #070C1D; --panel: #0C1430; --panel-2: #111C40; --line: rgba(140, 165, 255, .14); --line-strong: rgba(140, 165, 255, .26); --text: #EDF1FB; --muted: #9AA6C8; --blue: #2F6BFF; --blue-bright: #5B91FF; --blue-deep: #1638B8; --glow: rgba(47, 107, 255, .55); --paper: #F3F5FB; --paper-2: #FFFFFF; --paper-ink: #0A1230; --paper-muted: #56618A; --paper-line: rgba(10, 18, 48, .1); --danger: #FF7A8A; --ok: #5BE3A6; --font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --ease: cubic-bezier(.22, .8, .24, 1); --header-h: 68px; --gutter: 20px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; letter-spacing: -.025em; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 6px; } .container { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; } .skip-link:focus { top: 12px; } .accent { background: linear-gradient(100deg, #8DB8FF 0%, var(--blue-bright) 35%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .theme-light .accent { background: none; color: var(--blue); } /* ---------- Botões ---------- */ .btn { --btn-h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: var(--btn-h); padding: 0 24px; border-radius: 14px; border: 1px solid transparent; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .btn-sm { --btn-h: 42px; padding: 0 18px; font-size: .88rem; } .btn-lg { --btn-h: 56px; padding: 0 30px; font-size: 1rem; } .btn-block { width: 100%; } .btn-primary { background: #2563EB; color: #fff; /* contraste AA com texto branco */ box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px -10px var(--glow); } .btn-primary:hover { background: #2B66EE; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 16px 40px -12px var(--glow); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: rgba(255,255,255,.03); border-color: var(--line-strong); color: var(--text); } .btn-ghost:hover { border-color: rgba(140,165,255,.5); background: rgba(255,255,255,.06); transform: translateY(-2px); } .btn[disabled] { opacity: .6; cursor: progress; transform: none; } .link-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--blue-bright); font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-decoration: none; } .link-cta::after { content: ""; width: 18px; height: 1.5px; background: currentColor; transition: width .35s var(--ease); } .link-cta:hover::after { width: 30px; } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); transition: background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(4, 6, 15, .78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); } .header-inner { height: 100%; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(47,107,255,.55)); } .brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.04em; } .main-nav { margin-left: auto; } .main-nav ul { display: flex; gap: 6px; } .main-nav a:not(.btn) { display: block; padding: 8px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; transition: color .3s, background-color .3s; } .main-nav a:not(.btn):hover, .main-nav a[aria-current="true"] { color: var(--text); background: rgba(255,255,255,.05); } .nav-cta-mobile { display: none; } .nav-toggle { display: none; } @media (max-width: 899px) { .header-cta { display: none; } .nav-toggle { display: inline-grid; place-content: center; gap: 6px; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 1.8px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease); } .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.9px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.9px) rotate(-45deg); } .main-nav { position: fixed; inset: var(--header-h) 0 auto; margin: 0; padding: 18px var(--gutter) 26px; background: rgba(4, 6, 15, .97); border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .main-nav.is-open { transform: none; opacity: 1; visibility: visible; } .main-nav ul { flex-direction: column; gap: 2px; } .main-nav a:not(.btn) { padding: 13px 4px; font-size: 1.05rem; color: var(--text); border-radius: 0; border-bottom: 1px solid var(--line); } .nav-cta-mobile { display: flex; width: 100%; margin-top: 18px; } .site-header.menu-open { background: rgba(4, 6, 15, .97); } } /* ---------- Seções ---------- */ .section { position: relative; padding-block: 88px; } .section-head { max-width: 640px; margin-bottom: 44px; } .section-head--split { max-width: none; display: grid; gap: 16px; } .section-title { font-size: clamp(2rem, 5.2vw, 3.35rem); font-weight: 700; } .section-lead { margin-top: 16px; color: var(--muted); font-size: 1.06rem; max-width: 56ch; } .section-head--split .section-lead { margin-top: 0; } .theme-light { background: var(--paper); color: var(--paper-ink); } .theme-light .section-lead { color: var(--paper-muted); } .kicker { color: var(--blue-bright); font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: .01em; margin-bottom: 18px; } @media (min-width: 900px) { .section { padding-block: 128px; } .section-head--split { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 48px; } .section-head { margin-bottom: 60px; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-top: calc(var(--header-h) + 34px); padding-bottom: 64px; background: radial-gradient(120% 70% at 50% 0%, #0B1638 0%, transparent 60%), var(--ink); } .hero::after { /* grade sutil */ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(140,165,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(140,165,255,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 65% 45%, #000 0%, transparent 75%); } .hero-glow { position: absolute; width: 760px; height: 760px; right: -220px; top: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.35) 0%, rgba(47,107,255,.08) 40%, transparent 70%); filter: blur(10px); pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; gap: 44px; } /* ----- Vídeo de fundo do Hero ----- */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; pointer-events: none; user-select: none; opacity: 0; transition: opacity 1.2s var(--ease); } .hero.has-video .hero-video { opacity: 1; } .hero.video-failed .hero-media { display: none; } /* degradê para legibilidade: escuro onde está o texto, mais aberto onde está o cenário */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,15,.70) 0%, rgba(4,6,15,0) 18%, rgba(4,6,15,0) 72%, var(--ink) 100%), linear-gradient(180deg, rgba(4,6,15,.88) 0%, rgba(4,6,15,.86) 52%, rgba(4,6,15,.66) 78%, rgba(4,6,15,.72) 100%); } .hero.has-video::after { opacity: 0; } /* a grade decorativa sai quando o vídeo assume o fundo */ @media (min-width: 1000px) { .hero-video { object-position: 60% 40%; } .hero-scrim { background: linear-gradient(180deg, rgba(4,6,15,.65) 0%, rgba(4,6,15,0) 16%, rgba(4,6,15,0) 76%, var(--ink) 100%), radial-gradient(62% 58% at 50% 54%, rgba(4,6,15,.9) 0%, rgba(4,6,15,.8) 55%, rgba(4,6,15,.5) 100%); /* mais escuro no centro, onde fica o texto */ } } @media (max-width: 599px) { .hero-video { object-position: 32% 30%; } } .hero-title { font-size: clamp(2.55rem, 9.2vw, 4.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; } .hero-title .accent { display: inline; } .hero-lead { margin-top: 22px; font-size: 1.1rem; color: var(--muted); max-width: 46ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* conteúdo do hero centralizado */ .hero-grid { justify-items: center; } .hero-copy { width: 100%; max-width: 820px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-copy .hero-title { max-width: 15ch; } .hero-copy .hero-lead { max-width: 42ch; margin-inline: auto; } .hero-copy .hero-actions { justify-content: center; } @media (max-width: 599px) { .hero-actions { width: 100%; } .hero-actions .btn { flex: 1 1 100%; } } /* ----- Hero cinematográfico: revelação controlada pela rolagem ----- */ /* --p (0 a 1) é o progresso da rolagem dentro do hero, definido em main.js */ .hero[data-hero-scroll] { --p: 0; } .js .hero[data-hero-scroll] { height: 240svh; min-height: 0; padding: 0; display: block; overflow: clip; } .js .hero[data-hero-scroll] .hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 7vh, 72px); padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; } .js .hero[data-hero-scroll] .hero-pin > .container { width: 100%; } .js .hero[data-hero-scroll] [data-hero-step] { --r: clamp(0, (var(--p) - var(--s)) / var(--len), 1); opacity: var(--r); transform: translate3d(0, calc((1 - var(--r)) * var(--dy, 16px)), 0); will-change: opacity, transform; } .hero [data-hero-step="2"] { --s: .05; --len: .18; --dy: 28px; } .hero [data-hero-step="3"] { --s: .2; --len: .14; } .hero [data-hero-step="4"] { --s: .31; --len: .14; } .hero [data-hero-step="5"] { --s: .43; --len: .14; } .js .hero[data-hero-scroll].hero-actions-off .hero-actions { pointer-events: none; } /* o vídeo é o protagonista no início; o véu escurece conforme o texto surge */ .js .hero[data-hero-scroll] .hero-scrim { opacity: calc(.42 + .58 * clamp(0, (var(--p) - .02) / .26, 1)); } .hero-cue { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 1; translate: -50% 0; pointer-events: none; display: none; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,241,251,.82); text-shadow: 0 1px 12px rgba(0,0,0,.6); } .js .hero[data-hero-scroll] .hero-cue { display: flex; opacity: calc(1 - clamp(0, var(--p) / .06, 1)); } .hero-cue-line { position: relative; width: 1.5px; height: 42px; background: rgba(237,241,251,.25); overflow: hidden; border-radius: 2px; } .hero-cue-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: hero-cue 2.2s cubic-bezier(.6,0,.4,1) infinite; } @keyframes hero-cue { to { top: 100%; } } @media (max-height: 760px) and (min-width: 600px) { .js .hero[data-hero-scroll] .hero-title { font-size: clamp(2.4rem, 7.4vh, 4.2rem); } .js .hero[data-hero-scroll] .hero-lead { margin-top: 16px; } .js .hero[data-hero-scroll] .hero-actions { margin-top: 24px; } } /* ----- Faixa informativa do hero (marquee) ----- */ .hero-ticker { position: relative; z-index: 2; margin-top: 18px; } .js .hero[data-hero-scroll] .hero-ticker { position: relative; z-index: 2; width: 100%; margin: 0; padding-inline: var(--gutter); flex: none; } .ticker-viewport { position: relative; max-width: 1180px; margin-inline: auto; height: 52px; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(91,145,255,.08), rgba(91,145,255,0) 45%), linear-gradient(90deg, rgba(8,18,52,.92), rgba(12,28,78,.9) 50%, rgba(8,18,52,.92)); border: 1px solid rgba(80,135,255,.42); box-shadow: inset 0 1px 0 rgba(170,200,255,.12), 0 14px 40px -18px rgba(0,0,0,.8), 0 0 28px -14px rgba(47,107,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* bordas laterais esfumadas para o texto entrar e sair com suavidade */ .ticker-viewport::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(8,18,52,1) 0, rgba(8,18,52,0) 7%, rgba(8,18,52,0) 93%, rgba(8,18,52,1) 100%); } /* brilho que percorre a borda só durante a entrada (controlado por --r) */ .ticker-viewport::after { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, transparent calc(var(--r, 1) * 120% - 30%), rgba(160,200,255,.95) calc(var(--r, 1) * 120% - 12%), transparent calc(var(--r, 1) * 120%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: calc(var(--r, 1) * (1 - var(--r, 1)) * 4); } .ticker-track { display: flex; width: max-content; height: 100%; will-change: transform; } .ticker-set { display: flex; align-items: center; height: 100%; flex: none; } .ticker-item { position: relative; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 0 26px 0 28px; height: 100%; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #DDE6FF; } .ticker-item::before { /* separador */ content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; translate: 0 -50%; rotate: 45deg; background: #3D78FF; box-shadow: 0 0 10px rgba(61,120,255,.9); } .ticker-item svg { flex: none; width: 18px; height: 18px; color: #6FA0FF; } .ticker-cta { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: #fff; background: linear-gradient(180deg, #3B76FF, #2258E6); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 18px -4px rgba(47,107,255,.85); letter-spacing: .12em; transition: background-color .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease); } .ticker-cta span { font-size: 1rem; line-height: 1; transition: transform .3s var(--ease); } .ticker-cta:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 26px -2px rgba(80,140,255,1); } .ticker-cta:hover span { transform: translate(2px, -2px); } .ticker-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* entrada controlada pela rolagem: opacidade (passo 5) + máscara horizontal */ .js .hero[data-hero-scroll] .hero-ticker[data-hero-step] { transform: translate3d(0, calc((1 - var(--r)) * 10px), 0); } .js .hero[data-hero-scroll] .ticker-viewport { clip-path: inset(0 calc((1 - var(--r)) * 100%) 0 0 round 14px); } .js .hero[data-hero-scroll].hero-ticker-off .ticker-cta { pointer-events: none; } @media (max-width: 599px) { .ticker-viewport { height: 46px; border-radius: 12px; } .ticker-item { font-size: .72rem; padding: 0 20px 0 22px; letter-spacing: .1em; } .ticker-cta { height: 30px; padding: 0 13px; } } /* movimento reduzido: sem deslocamento, mensagens em faixa estática que quebra linha */ @media (prefers-reduced-motion: reduce) { .js .hero[data-hero-scroll] .hero-ticker { margin-top: 0; } .ticker-viewport { height: auto; clip-path: none !important; } .ticker-viewport::after { display: none; } .ticker-viewport::before { display: none; } .ticker-set { flex-wrap: wrap; height: auto; padding: 8px 10px; row-gap: 4px; width: 100%; } .ticker-track { width: 100%; } .ticker-item { height: 38px; } } @media (max-width: 999px) { .js .hero[data-hero-scroll] { height: 185svh; } .js .hero[data-hero-scroll] .hero-pin { padding-bottom: 32px; } } @media (prefers-reduced-motion: reduce) { .js .hero[data-hero-scroll] { height: auto; } .js .hero[data-hero-scroll] .hero-pin { position: relative; min-height: 100svh; height: auto; } .js .hero[data-hero-scroll] [data-hero-step] { opacity: 1; transform: none; } .js .hero[data-hero-scroll] .hero-scrim { opacity: 1; } .js .hero[data-hero-scroll] .hero-cue { display: none; } } /* ---------- Mascote ---------- */ .mascot { position: relative; pointer-events: none; } .mascot-btn, .mascot-img { pointer-events: auto; } .mascot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 40%; } .mascot-img { width: 100%; height: auto; position: relative; z-index: 1; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotate(var(--mr, 0deg)); transition: transform .9s var(--ease); filter: drop-shadow(0 26px 34px rgba(0,0,0,.5)); animation: mascot-float 6s ease-in-out infinite; } .mascot-glow { position: absolute; left: 50%; top: 32%; width: 85%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(60,120,255,.45), transparent 65%); animation: glow-pulse 4.5s ease-in-out infinite; } .theme-light .mascot-glow { background: radial-gradient(circle, rgba(47,107,255,.25), transparent 65%); } .theme-light .mascot-img { filter: drop-shadow(0 22px 26px rgba(10,18,48,.22)); } .mascot.is-waving .mascot-img { animation: mascot-wave .9s var(--ease); } @keyframes mascot-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes glow-pulse { 0%, 100% { opacity: .65; scale: .95; } 50% { opacity: 1; scale: 1.06; } } @keyframes mascot-wave { 0% { rotate: 0deg; } 25% { rotate: -6deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } 100% { rotate: 0deg; } } .speech { position: absolute; z-index: 3; left: 62%; top: -10%; width: max-content; max-width: 190px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(12, 20, 48, .88); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-display); font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--text); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); transition: opacity .35s var(--ease), transform .35s var(--ease); } .speech.is-swapping { opacity: 0; transform: translateY(4px); } @media (min-width: 1000px) { .speech { max-width: 230px; font-size: .9rem; left: 30%; top: -22%; } } /* ---------- Para quem ---------- */ .audience-grid { display: grid; gap: 14px; } .audience { position: relative; display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(17, 28, 64, .7), rgba(12, 20, 48, .35)); border: 1px solid var(--line); transition: border-color .4s var(--ease), transform .4s var(--ease); } .audience:hover { border-color: var(--line-strong); transform: translateY(-3px); } .audience-icon { width: 30px; height: 30px; color: var(--blue-bright); margin-bottom: 22px; } .audience h3 { font-size: 1.35rem; font-weight: 600; } .audience p { margin-top: 10px; color: var(--muted); } @media (min-width: 760px) { .audience-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } .audience { padding: 34px 30px; } } /* ---------- Para quem: microanimações (escopo .audiences) ---------- */ .audiences .audience-grid { position: relative; } .audiences .audience { isolation: isolate; overflow: hidden; border: 1px solid rgba(91,145,255,.22); background: linear-gradient(180deg, rgba(14,26,66,.72), rgba(8,16,42,.6)); box-shadow: inset 0 1px 0 rgba(160,190,255,.06); } .audiences .audience::before { /* iluminação de fundo no hover */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 30% 0%, rgba(47,107,255,.22), transparent 62%); opacity: 0; transition: opacity .6s var(--ease); } .audiences .audience--growth { border-color: rgba(80,135,255,.55); background: radial-gradient(120% 80% at 50% 0%, rgba(40,90,230,.22), transparent 60%), linear-gradient(180deg, rgba(16,32,84,.8), rgba(9,18,48,.7)); box-shadow: 0 0 0 1px rgba(47,107,255,.12), 0 0 34px -10px rgba(47,107,255,.55), inset 0 1px 0 rgba(160,190,255,.1); } .aud-art { width: 100%; max-width: 260px; aspect-ratio: 240 / 140; margin: -6px 0 16px -10px; } .aud-art svg { display: block; width: 100%; height: 100%; overflow: visible; } /* entrada (uma única vez, controlada pelo IntersectionObserver existente) */ .js .audiences [data-reveal] { opacity: 1; transform: none; transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); transition-delay: 0s; } .js .audiences [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); } .js .audiences [data-reveal].is-in { animation: aud-in .9s var(--ease) var(--d, 0ms) backwards; } @keyframes aud-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .audiences .audience-grid .audience:nth-child(1) { --d: 120ms; } .audiences .audience-grid .audience:nth-child(2) { --d: 240ms; } .audiences .audience-grid .audience:nth-child(3) { --d: 360ms; } /* peças comuns do SVG */ .aud-art * { transform-box: fill-box; transform-origin: center; } .aud-halo { fill: rgba(47,107,255,.16); filter: blur(14px); opacity: .7; } .aud-orbit { fill: none; stroke: rgba(91,145,255,.28); stroke-width: 1.2; } .aud-orbit--inner { stroke: rgba(91,145,255,.16); } .aud-comet { fill: none; stroke: #8FB7FF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 4px rgba(91,145,255,.9)); } .audience.is-in .aud-comet { stroke-dasharray: 12 88; opacity: 0; animation: aud-comet-once 1.8s cubic-bezier(.45,0,.25,1) calc(var(--d) + 700ms) 1 backwards; } .audience.is-in .aud-comet--fast { stroke-dasharray: 9 91; animation-duration: 1.4s; animation-direction: reverse; } @keyframes aud-orbit { to { stroke-dashoffset: -100; } } @keyframes aud-comet-once { 0% { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } /* 1. Negócios locais: loja, pino e órbita */ .aud-stroke { fill: rgba(47,107,255,.14); stroke: #6FA0FF; stroke-width: 2; stroke-linejoin: round; } .aud-fill { fill: url(#ag-store); } .aud-window { fill: rgba(140,180,255,.3); } .aud-store, .aud-pin-wrap { opacity: 0; transform: scale(.86); } .audience.is-in .aud-store, .audience.is-in .aud-pin-wrap, .audience.is-in .aud-bolt, .audience.is-in .aud-arrow { opacity: 1; transform: none; } .audience.is-in .aud-store { animation: aud-pop .9s var(--ease) calc(var(--d) + 250ms) backwards; } .audience.is-in .aud-store .aud-fill { animation: aud-sign 1.2s ease-in-out calc(var(--d) + 1s) 1; } @keyframes aud-sign { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 7px rgba(120,170,255,.95)) brightness(1.25); } } .audience.is-in .aud-pin-wrap { animation: aud-pop .8s var(--ease) calc(var(--d) + 550ms) backwards; } .audience.is-in .aud-pin { animation: aud-drop .7s cubic-bezier(.3,1.5,.5,1) calc(var(--d) + 550ms) 1 backwards; } @keyframes aud-drop { from { transform: translateY(-14px); } to { transform: none; } } .aud-ripple { fill: none; stroke: rgba(111,160,255,.7); stroke-width: 1.4; opacity: 0; } .audience.is-in .aud-ripple { animation: aud-ripple 1.1s ease-out calc(var(--d) + 1.1s) 1; } @keyframes aud-pop { from { opacity: 0; transform: scale(.86) translateY(6px); } to { opacity: 1; transform: none; } } @keyframes aud-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes aud-ripple { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } } @keyframes aud-glow { 0%, 70%, 100% { filter: drop-shadow(0 0 0 rgba(47,107,255,0)); } 82% { filter: drop-shadow(0 0 8px rgba(91,145,255,.75)); } } /* 2. Marcas em crescimento: linha desenhada, pontos, seta e brilho */ .aud-bars rect { fill: url(#ag-bar); transform-origin: bottom; transform-box: fill-box; transform: scaleY(0); } .audience.is-in .aud-bars rect { animation: aud-bar .9s var(--ease) both; } .audience.is-in .aud-bars rect:nth-child(1) { animation-delay: calc(var(--d) + 200ms); } .audience.is-in .aud-bars rect:nth-child(2) { animation-delay: calc(var(--d) + 320ms); } .audience.is-in .aud-bars rect:nth-child(3) { animation-delay: calc(var(--d) + 440ms); } .audience.is-in .aud-bars rect:nth-child(4) { animation-delay: calc(var(--d) + 560ms); } @keyframes aud-bar { to { transform: scaleY(1); } } .aud-line { fill: none; stroke: url(#ag-line); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(47,107,255,.7)); } .audience.is-in .aud-line { animation: aud-draw 1.6s cubic-bezier(.65,0,.35,1) calc(var(--d) + 300ms) both; } @keyframes aud-draw { to { stroke-dashoffset: 0; } } .aud-line-shine { fill: none; stroke: #EAF2FF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; opacity: .9; filter: drop-shadow(0 0 5px #9CC2FF); } .audience.is-in .aud-line-shine { stroke-dasharray: 10 110; stroke-dashoffset: 10; animation: aud-shine 2.2s ease-in-out calc(var(--d) + 2s) 1 both; } @keyframes aud-shine { 0% { stroke-dashoffset: 10; opacity: 0; } 10% { opacity: .95; } 55% { stroke-dashoffset: -100; opacity: .95; } 60%, 100% { stroke-dashoffset: -100; opacity: 0; } } .aud-dots circle { fill: #0A1838; stroke: #8FB7FF; stroke-width: 2.4; transform: scale(0); transition: stroke .4s var(--ease); } .audience.is-in .aud-dots circle { animation: aud-dot .5s cubic-bezier(.3,1.6,.5,1) both; } .audience.is-in .aud-dots circle:nth-child(1) { animation-delay: calc(var(--d) + 650ms); } .audience.is-in .aud-dots circle:nth-child(2) { animation-delay: calc(var(--d) + 950ms); } .audience.is-in .aud-dots circle:nth-child(3) { animation-delay: calc(var(--d) + 1250ms); } @keyframes aud-dot { from { transform: scale(0); fill: #8FB7FF; } to { transform: scale(1); fill: #0A1838; } } .aud-arrow path { fill: none; stroke: #9CC2FF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(91,145,255,.8)); } .aud-arrow { opacity: 0; transform: translate(-10px, 14px); transition: transform .5s var(--ease); } .aud-pin-wrap { transition: transform .5s var(--ease); } .aud-bolt { transition: transform .5s var(--ease), filter .5s var(--ease); } .audience.is-in .aud-arrow { animation: aud-arrow .7s var(--ease) calc(var(--d) + 1.7s) backwards, aud-arrow-glow 1s ease-in-out calc(var(--d) + 2.4s) 1; } @keyframes aud-arrow-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 9px rgba(156,194,255,1)) brightness(1.3); } } @keyframes aud-arrow { from { opacity: 0; transform: translate(-10px, 14px); } to { opacity: 1; transform: none; } } /* 3. Negócios digitais: raio com pulso, contorno percorrido e órbitas */ .aud-orbits-tilt { transform: rotate(-12deg); } .aud-bolt { opacity: 0; transform: scale(.8) rotate(-6deg); } .audience.is-in .aud-bolt { animation: aud-bolt-in .8s cubic-bezier(.3,1.4,.5,1) calc(var(--d) + 300ms) backwards; } @keyframes aud-bolt-in { from { opacity: 0; transform: scale(.8) rotate(-6deg); } to { opacity: 1; transform: none; } } .aud-bolt-fill { fill: url(#ag-bolt); filter: drop-shadow(0 0 6px rgba(47,107,255,.6)); } .audience.is-in .aud-bolt-fill { animation: aud-pulse 1.3s ease-in-out calc(var(--d) + 1s) 1; } @keyframes aud-pulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(47,107,255,.6)); } 50% { filter: drop-shadow(0 0 14px rgba(110,160,255,.95)); } } .aud-bolt-trace { fill: none; stroke: #EAF2FF; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 0 100; } .audience.is-in .aud-bolt-trace { stroke-dasharray: 16 84; opacity: 0; animation: aud-comet-once 1.4s linear calc(var(--d) + 1s) 1 backwards; } .audience--digital .aud-halo { animation: none; } .audience.is-in.audience--digital .aud-halo { animation: aud-halo 1.3s ease-in-out calc(var(--d) + 1s) 1; } .audience--digital .aud-orbit { stroke-dasharray: 600; stroke-dashoffset: 600; } .audience.is-in.audience--digital .aud-orbit { animation: aud-orbit-draw 1.4s cubic-bezier(.45,0,.25,1) calc(var(--d) + 350ms) forwards; } @keyframes aud-orbit-draw { to { stroke-dashoffset: 0; } } @keyframes aud-halo { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: .95; transform: scale(1.06); } } /* interação: hover (mouse) e foco (teclado) */ .audiences .audience .link-cta::after { width: 16px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1.5 14 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1.5 14 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .45s var(--ease); } .audiences .audience .link-cta:hover::after { width: 16px; } .aud-store, .aud-bolt { transition: transform .5s var(--ease); } @media (hover: hover) { .js .audiences .audience.is-in:hover { transform: translateY(-6px); border-color: rgba(110,160,255,.6); box-shadow: 0 0 0 1px rgba(47,107,255,.14), 0 24px 50px -28px rgba(47,107,255,.65); } .js .audiences .audience--growth.is-in:hover { border-color: rgba(120,170,255,.85); box-shadow: 0 0 0 1px rgba(47,107,255,.25), 0 0 48px -8px rgba(47,107,255,.7); } .audiences .audience:hover::before { opacity: 1; } .audiences .audience:hover .link-cta::after { transform: translateX(6px); } .audiences .audience--local:hover .aud-pin-wrap { transform: translateY(-5px); } .audiences .audience--local:hover .aud-store { transform: translateY(-2px) scale(1.03); } .audiences .audience--growth:hover .aud-arrow { transform: translate(3px, -3px); } .audiences .audience--growth:hover .aud-dots circle { stroke: #CFE0FF; } .audiences .audience--growth:hover .aud-line { filter: drop-shadow(0 0 10px rgba(91,145,255,.95)); } .audiences .audience--digital:hover .aud-bolt { transform: scale(1.07) rotate(-3deg); } .audiences .audience--digital:hover .aud-bolt { filter: brightness(1.2) drop-shadow(0 0 10px rgba(120,170,255,.9)); } .audiences .audience--digital:hover .aud-halo { opacity: 1; } } .audiences .audience:focus-within { border-color: rgba(110,160,255,.6); } .audiences .audience:focus-within::before { opacity: 1; } .audiences .audience:focus-within .link-cta::after { transform: translateX(6px); } /* toque: leve resposta ao pressionar, sem esconder conteúdo */ @media (hover: none) { .audiences .audience:active::before { opacity: 1; } .audiences .audience:active .link-cta::after { transform: translateX(6px); } } @media (min-width: 760px) and (max-width: 999px) { .aud-art { margin-left: -14px; } } @media (prefers-reduced-motion: reduce) { .audiences .aud-art *, .js .audiences [data-reveal] { animation: none !important; } .audiences .aud-store, .audiences .aud-pin-wrap, .audiences .aud-bolt, .audiences .aud-arrow { opacity: 1 !important; transform: none !important; } .audiences .aud-line { stroke-dashoffset: 0 !important; } .audiences .aud-bars rect, .audiences .aud-dots circle { transform: none !important; } .audiences .aud-comet { opacity: 0 !important; animation: none !important; } .audiences .aud-orbit { stroke-dashoffset: 0 !important; } .audiences .aud-line-shine, .audiences .aud-bolt-trace, .audiences .aud-ripple { opacity: 0 !important; animation: none !important; } } /* ---------- Projetos ---------- */ .projects { background: linear-gradient(180deg, var(--ink), var(--night)); } .project-grid { display: grid; gap: 18px; } .project-card { display: flex; flex-direction: column; width: 100%; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); cursor: pointer; transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); } .project-card:hover { border-color: rgba(91,145,255,.45); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(47,107,255,.5); } .project-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(90% 90% at 50% 100%, #142355 0%, #0A1230 70%); display: grid; place-items: center; padding: 7% 8% 0; } .project-visual > img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); } .project-card:hover .project-visual > img, .project-card:hover .scr { transform: scale(1.025); } .project-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px 20px; border-top: 1px solid var(--line); } .project-name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; } .project-type { color: var(--muted); font-size: .88rem; margin-top: 2px; } .tag { flex: none; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; } .tag--client { color: #CFE0FF; border-color: rgba(91,145,255,.55); background: rgba(47,107,255,.16); } .noscript-list { color: var(--muted); display: grid; gap: 8px; } @media (min-width: 760px) { .project-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } .project-card--featured { grid-column: 1 / -1; } .project-card--featured .project-visual { aspect-ratio: 21 / 9; padding: 4% 14% 0; } } /* revelar imagens progressivamente */ .js .reveal-visual { clip-path: inset(14% 8% 14% 8% round 22px); opacity: 0; transition: clip-path 1.2s var(--ease), opacity 1s var(--ease); } .js .reveal-visual.is-in { clip-path: inset(0 0 0 0 round 0); opacity: 1; } .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* ----- Telas-conceito (mockups em CSS) ----- */ .scr { --s-bg: #111; --s-ink: #fff; --s-accent: #2F6BFF; --s-soft: rgba(255,255,255,.6); position: relative; width: 100%; aspect-ratio: 16 / 10; align-self: end; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--s-bg); color: var(--s-ink); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 -10px 50px -10px rgba(0,0,0,.6); container-type: inline-size; transition: transform .8s var(--ease); font-family: var(--font-body); } .scr-bar { display: flex; gap: 5px; padding: 2.2cqw 2.6cqw; background: rgba(0,0,0,.25); } .scr-bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255,255,255,.25); } .scr-nav { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 5cqw; font-size: 1.9cqw; } .scr-logo { font-weight: 800; font-size: 2.6cqw; margin-right: auto; letter-spacing: -.02em; } .scr-nav span { opacity: .7; } .scr-nav b { padding: .9cqw 2.2cqw; border-radius: 99px; background: var(--s-accent); color: var(--s-btn-ink, #fff); font-weight: 700; } .scr-hero { position: relative; padding: 4cqw 5cqw; max-width: 58%; z-index: 1; } .scr-eyebrow { font-size: 1.7cqw; color: var(--s-accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .scr-h { font-family: var(--font-display); font-size: 5.4cqw; line-height: 1.02; font-weight: 700; letter-spacing: -.03em; margin-top: 1.4cqw; } .scr-p { font-size: 1.9cqw; color: var(--s-soft); margin-top: 1.8cqw; line-height: 1.45; } .scr-btn { display: inline-block; margin-top: 3cqw; padding: 1.4cqw 3cqw; border-radius: 99px; background: var(--s-accent); color: var(--s-btn-ink, #fff); font-size: 1.8cqw; font-weight: 700; } .scr-art { position: absolute; inset: 0; pointer-events: none; } /* Luxury Motors */ .scr--luxury { --s-bg: #07080A; --s-accent: #C9A55C; --s-btn-ink: #111; --s-soft: rgba(255,255,255,.55); } .scr--luxury .scr-h { font-weight: 300; letter-spacing: -.02em; } .scr--luxury .scr-art { background: radial-gradient(55% 32% at 80% 72%, rgba(201,165,92,.32), transparent 70%), linear-gradient(168deg, transparent 56%, rgba(201,165,92,.9) 56.3%, transparent 57%), linear-gradient(171deg, transparent 62%, rgba(255,255,255,.2) 62.3%, transparent 63%), radial-gradient(38% 14% at 80% 80%, #1d2026 0%, #0c0d10 60%, transparent 61%); -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 72%); mask-image: linear-gradient(90deg, transparent 52%, #000 72%); } /* Barbearia do Japa */ .scr--barber { --s-bg: #161412; --s-accent: #E04A3A; --s-soft: rgba(245,232,210,.65); --s-ink: #F5E8D2; } .scr--barber .scr-h { text-transform: uppercase; font-weight: 800; letter-spacing: -.01em; } .scr--barber .scr-art { background: repeating-linear-gradient(135deg, transparent 0 3cqw, rgba(224,74,58,.85) 3cqw 5cqw, transparent 5cqw 7cqw, rgba(245,232,210,.85) 7cqw 9cqw) right 6cqw top 14cqw / 13cqw 62% no-repeat, radial-gradient(50% 50% at 82% 50%, rgba(224,74,58,.18), transparent 70%); border-radius: 0; } /* Sabor & Mesa */ .scr--food { --s-bg: #F6EFE4; --s-ink: #2B1A10; --s-accent: #C2502A; --s-soft: rgba(43,26,16,.65); } .scr--food .scr-bar { background: rgba(43,26,16,.08); } .scr--food .scr-bar i { background: rgba(43,26,16,.25); } .scr--food .scr-h { font-weight: 700; } .scr--food .scr-art { background: radial-gradient(circle at 74% 53%, #C2502A 0 4.2cqw, transparent 4.4cqw), radial-gradient(circle at 83% 60%, #6E8B3D 0 3.6cqw, transparent 3.8cqw), radial-gradient(circle at 75% 66%, #E9B44C 0 3cqw, transparent 3.2cqw), radial-gradient(circle at 81% 50%, #F2E3C2 0 2.4cqw, transparent 2.6cqw), radial-gradient(circle at 78% 58%, #fff 0 13cqw, transparent 13.2cqw), radial-gradient(circle at 78% 58%, #E8DCC8 0 15cqw, transparent 15.2cqw); } /* Método Foco */ .scr--course { --s-bg: #0E0B1F; --s-accent: #B9F24A; --s-btn-ink: #10140A; --s-soft: rgba(255,255,255,.62); } .scr--course .scr-art { background: radial-gradient(45% 55% at 82% 55%, rgba(123,92,255,.55), transparent 70%), linear-gradient(transparent, transparent); } .scr--course .scr-card { position: absolute; right: 7cqw; top: 22cqw; width: 26cqw; padding: 2.4cqw; border-radius: 2cqw; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: 1.7cqw; line-height: 1.9; } .scr--course .scr-card em { display: block; font-style: normal; color: var(--s-accent); font-weight: 700; font-size: 1.9cqw; margin-bottom: .6cqw; } /* variante celular */ .scr--phone { aspect-ratio: 9 / 19; border-radius: 26px; max-width: 100%; box-shadow: 0 0 0 6px #05070d, 0 0 0 7px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.6); } .scr--phone .scr-bar { justify-content: center; padding: 4cqw; background: transparent; } .scr--phone .scr-bar i { display: none; } .scr--phone .scr-bar::before { content: ""; width: 26cqw; height: 6cqw; border-radius: 99px; background: #05070d; } .scr--phone .scr-nav { font-size: 4cqw; padding: 4cqw 7cqw; } .scr--phone .scr-nav span:not(.scr-logo), .scr--phone .scr-nav b { display: none; } .scr--phone .scr-nav::after { content: ""; width: 7cqw; height: 4.4cqw; background: linear-gradient(currentColor 0 0) top / 100% 1.2cqw no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 1.2cqw no-repeat; opacity: .8; } .scr--phone .scr-logo { font-size: 6cqw; } .scr--phone .scr-hero { max-width: none; padding: 8cqw 7cqw; } .scr--phone .scr-eyebrow { font-size: 3.6cqw; } .scr--phone .scr-h { font-size: 11.5cqw; margin-top: 3cqw; } .scr--phone .scr-p { font-size: 4.2cqw; margin-top: 4cqw; } .scr--phone .scr-btn { font-size: 4cqw; padding: 3.4cqw 7cqw; margin-top: 7cqw; } .scr--phone .scr-art { top: 58%; } .scr--phone.scr--food .scr-art { top: 52%; background-size: 220% 100%; background-position: 70% 0; } .scr--phone.scr--barber .scr-art { background-size: 30cqw 70%, 100% 100%; background-position: center bottom 8cqw, center; } .scr--phone .scr-card { display: none; } /* ---------- Modal de projeto ---------- */ .project-modal { width: min(1100px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--night); color: var(--text); box-shadow: 0 40px 120px -20px rgba(0,0,0,.8); } .project-modal::backdrop { background: rgba(2, 4, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .project-modal[open] { animation: modal-in .45s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } .modal-inner { position: relative; } .modal-close { position: sticky; top: 12px; float: right; margin: 12px 12px -58px 0; z-index: 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(7,12,29,.85); color: var(--text); cursor: pointer; } .modal-close svg { width: 20px; height: 20px; } .modal-close:hover { border-color: var(--blue-bright); } .modal-stage { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: end; padding: 64px 22px 0; background: radial-gradient(90% 100% at 50% 100%, #142355, #0A1230 70%); } .modal-stage .scr { border-radius: 12px 12px 0 0; } .modal-stage .modal-phone { display: none; } .modal-stage > img { width: 100%; max-width: 900px; justify-self: center; padding-bottom: 20px; } .modal-content { padding: 28px 22px 30px; display: grid; gap: 22px; } .modal-title { font-size: clamp(1.6rem, 4vw, 2.3rem); } .modal-sub { color: var(--muted); margin-top: 6px; } .modal-text { color: var(--muted); max-width: 62ch; } .modal-facts { display: flex; flex-wrap: wrap; gap: 8px; } .modal-facts li { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: .84rem; color: var(--text); } .modal-note { font-size: .84rem; color: var(--muted); border-left: 2px solid var(--blue); padding-left: 12px; } .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (min-width: 760px) { .modal-stage { grid-template-columns: 1fr 22%; gap: 4%; padding: 70px 6% 0; } .modal-stage .modal-phone { display: block; align-self: end; margin-bottom: 26px; } .modal-stage > img { grid-column: 1 / -1; } .modal-content { grid-template-columns: 1.2fr .8fr; padding: 36px 6% 40px; gap: 28px 48px; } .modal-content .modal-actions { align-self: start; justify-content: flex-end; } } /* ---------- Projetos: vitrine em duas fileiras (escopo #projetos) ---------- */ #projetos.projects { overflow: hidden; background: radial-gradient(70% 50% at 50% 60%, rgba(30,70,200,.14), transparent 70%), linear-gradient(180deg, var(--ink), var(--night)); } #projetos .section-head { margin-bottom: 40px; } .pj-showcase { --pj-w: clamp(272px, 36vw, 520px); --pj-gap: clamp(14px, 1.6vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .pj-row { min-width: 0; } .pj-row { position: relative; overflow-x: clip; overflow-y: visible; padding-block: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .pj-track { display: flex; width: max-content; will-change: transform; } .pj-set { display: flex; gap: var(--pj-gap); padding-right: var(--pj-gap); } .pj-card { position: relative; flex: none; width: var(--pj-w); display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; border-radius: 22px; overflow: hidden; color: var(--text); background: linear-gradient(180deg, #0F1838, #0A1129); border: 1px solid rgba(91,145,255,.18); box-shadow: 0 24px 50px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(160,190,255,.06); transition: transform .55s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .pj-visual { position: relative; display: block; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--pj-tint); } .pj-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .pj-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 70%, rgba(6,10,26,.35)); } .pj-fallback { display: none; position: absolute; inset: 0; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: rgba(255,255,255,.75); } .pj-card.is-noimg img { display: none; } .pj-card.is-noimg .pj-fallback { display: grid; } .pj-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 18px; border-top: 1px solid rgba(91,145,255,.14); } .pj-text { display: grid; gap: 2px; min-width: 0; } .pj-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; } .pj-type { color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pj-card .tag { font-size: .7rem; padding: 5px 9px; } @media (hover: hover) { .pj-card:hover { transform: scale(1.03); border-color: rgba(110,160,255,.6); box-shadow: 0 0 0 1px rgba(47,107,255,.2), 0 30px 60px -28px rgba(47,107,255,.55); z-index: 2; } .pj-card:hover .pj-visual img { transform: scale(1.045); } } .pj-card:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; transform: scale(1.02); } @media (max-width: 599px) { .pj-meta { padding: 12px 14px 14px; flex-direction: column; align-items: flex-start; gap: 8px; } .pj-name { font-size: .98rem; } } /* movimento reduzido: sem deslocamento automático, rolagem manual acessível */ .pj-showcase.is-static .pj-row { --pj-pad: var(--gutter); overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-inline: var(--pj-pad); scroll-padding-inline: var(--pj-pad); } .pj-showcase.is-static .pj-set { padding-right: 0; } .pj-showcase.is-static .pj-card { scroll-snap-align: start; } @media (min-width: 1220px) { .pj-showcase.is-static .pj-row { --pj-pad: calc((100vw - 1180px) / 2); } } /* ---------- Serviços: vitrine de soluções ---------- */ .services { overflow: hidden; background: linear-gradient(180deg, #F5F8FF 0%, var(--paper) 100%); } .sol-curve { position: absolute; left: -40px; bottom: 0; width: min(46vw, 620px); height: 420px; pointer-events: none; } .sol-curve path { fill: none; stroke: rgba(47,107,255,.18); stroke-width: 1.2; } .sol-layout { position: relative; display: grid; gap: 44px; } .sol-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; color: var(--blue); font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; } .sol-eyebrow::after { content: ""; width: 72px; height: 1px; background: currentColor; opacity: .6; } .sol-title { color: #0B1E4F; max-width: 15ch; font-size: clamp(2rem, 4.6vw, 2.95rem); } .sol-intro .section-lead { max-width: 38ch; } .sol-intro .btn { margin-top: 30px; } .sol-grid { display: grid; gap: 16px; } .sol-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 0; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,244,255,.9)); border: 1px solid rgba(47,107,255,.13); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 40px -32px rgba(16,40,120,.35); transition: border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); } .sol-card:hover { border-color: rgba(47,107,255,.32); transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px -34px rgba(16,40,120,.45); } .sol-icon { width: 32px; height: 32px; color: var(--blue); } .sol-card h3 { margin-top: 16px; font-size: 1.32rem; font-weight: 600; letter-spacing: -.025em; color: #0B1E4F; } .sol-card > p { margin-top: 8px; color: var(--paper-muted); font-size: .96rem; max-width: 44ch; } .sol-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 22px; padding: 4px 0; color: #1F5BEA; font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-decoration: none; } .sol-link::after { content: ""; width: 14px; height: 10px; background: currentColor; transition: transform .35s var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; } .sol-link:hover::after { transform: translateX(4px); } /* palco do mockup */ .sol-mock { position: relative; margin: auto -24px 0; aspect-ratio: 16 / 8.6; max-width: calc(100% + 48px); overflow: hidden; border-radius: 0 0 21px 21px; } @media (min-width: 1100px) { .sol-mock { margin-inline: -30px; max-width: calc(100% + 60px); } } .mk-desk, .mk-phone { position: absolute; container-type: inline-size; overflow: hidden; font-family: var(--font-body); } .mk-desk { left: 6%; bottom: -8%; width: 80%; aspect-ratio: 16 / 10; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(16,40,120,.1), 0 24px 50px -24px rgba(16,40,120,.45); transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transform-origin: 50% 100%; transition: transform .7s var(--ease); } .sol-card:hover .mk-desk { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-4px); } .mk-phone { right: 6%; bottom: 5%; width: 18%; aspect-ratio: 9 / 19; border-radius: 14px; background: #fff; box-shadow: 0 0 0 4px #0B1024, 0 0 0 5px rgba(255,255,255,.5), 0 24px 40px -16px rgba(16,40,120,.55); transition: transform .7s var(--ease); } .sol-card:hover .mk-phone { transform: translateY(-6px); } .mk-bar { display: flex; gap: 1cqw; padding: 1.8cqw 2.2cqw; background: #EEF2FA; } .mk-bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #C9D3E8; } .mk-screen { position: relative; height: 100%; color: #0B1E4F; } .mk-nav { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 4cqw; font-size: 2cqw; } .mk-nav > span { width: 6cqw; height: .9cqw; border-radius: 9px; background: currentColor; opacity: .18; } .mk-nav em { font-style: normal; padding: .8cqw 2.2cqw; border-radius: 99px; background: #2563EB; color: #fff; font-weight: 700; font-size: 1.7cqw; } .mk-logo { display: flex; align-items: center; gap: 1.2cqw; margin-right: auto; font-weight: 800; font-size: 2.4cqw; letter-spacing: -.02em; } .mk-dot { width: 2.4cqw; height: 2.4cqw; border-radius: 30%; background: linear-gradient(135deg, #5B91FF, #1F55E0); } .mk-z { width: 2.6cqw; height: 2.6cqw; background: linear-gradient(135deg, #8DB8FF, #2F6BFF); clip-path: polygon(10% 0, 100% 0, 92% 22%, 45% 78%, 88% 78%, 80% 100%, 0 100%, 8% 78%, 55% 22%, 10% 22%); } .mk-ic { width: 2.6cqw; height: 2.6cqw; color: currentColor; opacity: .7; } .mk-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3cqw; padding: 2cqw 4cqw; height: 50%; } .mk-copy { display: grid; gap: 1.6cqw; align-content: center; } .mk-copy strong, .mk-phone strong { font-family: var(--font-display); font-size: 4.2cqw; line-height: 1.08; letter-spacing: -.03em; } .mk-copy em, .mk-phone em { justify-self: start; font-style: normal; padding: 1cqw 2.6cqw; border-radius: 99px; background: #2563EB; color: #fff; font-weight: 700; font-size: 1.7cqw; } .mk-line { display: block; height: 1cqw; width: 80%; border-radius: 9px; background: currentColor; opacity: .16; } .mk-line--s { width: 55%; } .mk-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; padding: 2cqw 4cqw; } .mk-feats span { height: 7cqw; border-radius: 1.6cqw; background: #F1F5FD; box-shadow: inset 0 0 0 1px rgba(16,40,120,.06); position: relative; } .mk-feats span::before { content: ""; position: absolute; left: 1.8cqw; top: 50%; translate: 0 -50%; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: .5cqw solid rgba(47,107,255,.6); } .mk-feats--dark span { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } /* institucional: prédio em vidro */ .mk-building { position: relative; height: 100%; border-radius: 1.6cqw; overflow: hidden; background: linear-gradient(180deg, #A9C7FF 0%, #E7F0FF 60%, #CFDDF7 100%); } .mk-building span { position: absolute; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 1.6cqw, rgba(255,255,255,.35) 1.6cqw 1.9cqw), repeating-linear-gradient(180deg, transparent 0 1.8cqw, rgba(255,255,255,.25) 1.8cqw 2.1cqw), linear-gradient(115deg, #1B3E8F, #0E2560 55%, #2D5BC4); } .mk-building span:first-child { left: 22%; width: 34%; height: 88%; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); } .mk-building span:last-child { left: 56%; width: 26%; height: 64%; opacity: .85; } .mk-building--sm { height: 62cqw; margin: 0 6cqw 2cqw; border-radius: 4cqw; } /* landing: escura */ .mk-dark { background: #0A1838; } .mk-dark .mk-bar { background: #0E1E45; } .mk-dark .mk-bar i { background: #2A3B66; } .mk-dark .mk-screen { color: #EAF0FF; background: radial-gradient(60% 70% at 80% 40%, rgba(47,107,255,.35), transparent 70%); } .mk-photo { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 2cqw 2cqw rgba(0,0,0,.35)); } .mk-dark .mk-hero .mk-photo { height: 120%; } /* loja */ .mk-banner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; margin: 1cqw 4cqw 3cqw; padding: 4cqw 5cqw; border-radius: 2cqw; color: #fff; background: linear-gradient(120deg, #0B1E4F, #1F4FD0); overflow: hidden; } .mk-banner .mk-art { justify-self: end; width: 15cqw; height: 15cqw; color: #8DB8FF; filter: drop-shadow(0 1cqw 2cqw rgba(0,0,0,.35)); } .mk-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2cqw; padding: 0 4cqw; } .mk-products span { display: grid; place-items: center; gap: 1cqw; padding: 2cqw 1cqw; border-radius: 1.6cqw; background: #F2F5FC; color: #1B2440; } .mk-products svg { width: 8cqw; height: 8cqw; } .mk-products i { width: 60%; height: .9cqw; border-radius: 9px; background: rgba(16,40,120,.2); } .mk-products--2 { grid-template-columns: 1fr 1fr; gap: 4cqw; padding: 3cqw 6cqw; } .mk-products--2 svg { width: 20cqw; height: 20cqw; } .mk-products--2 i { height: 2.4cqw; } /* cardápio: escuro e quente */ .mk-food { background: #1A1410; } .mk-food .mk-bar { background: #241B15; } .mk-food .mk-bar i { background: #4A3B30; } .mk-food .mk-screen { color: #F6EBDD; background: radial-gradient(60% 80% at 78% 40%, rgba(194,80,42,.35), transparent 70%); } .mk-food .mk-nav em, .mk-food .mk-copy em { background: #C2502A; } .mk-dish { justify-self: center; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #C2502A 0 13%, transparent 14%), radial-gradient(circle at 62% 46%, #6E8B3D 0 11%, transparent 12%), radial-gradient(circle at 48% 64%, #E9B44C 0 10%, transparent 11%), radial-gradient(circle at 60% 30%, #F2E3C2 0 8%, transparent 9%), radial-gradient(circle, #3A2A1E 0 60%, #F4EEE6 61% 70%, #D9CDBE 71% 74%, transparent 75%); } .mk-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 1cqw 4cqw; } .mk-thumbs span { height: 9cqw; border-radius: 1.4cqw; background: radial-gradient(circle at 50% 55%, #E9B44C 0 18%, transparent 19%), radial-gradient(circle at 50% 55%, #C2502A 0 32%, #F4EEE6 33% 44%, transparent 45%), #2A211A; } .mk-thumbs span:nth-child(2n) { background: radial-gradient(circle at 50% 55%, #6E8B3D 0 22%, transparent 23%), radial-gradient(circle at 50% 55%, #E9B44C 0 32%, #F4EEE6 33% 44%, transparent 45%), #2A211A; } /* celular */ .mk-phone .mk-screen { display: grid; align-content: start; gap: 4cqw; padding-bottom: 6cqw; } .mk-phone .mk-nav { padding: 9cqw 7cqw 3cqw; font-size: 6cqw; } .mk-phone .mk-logo { font-size: 8cqw; gap: 3cqw; } .mk-phone .mk-dot, .mk-phone .mk-z { width: 7cqw; height: 7cqw; } .mk-phone strong { font-size: 11cqw; padding: 0 7cqw; } .mk-phone .mk-line { height: 3cqw; margin: 0 7cqw; width: 70%; } .mk-phone em { margin: 0 7cqw; font-size: 5.5cqw; padding: 3cqw 6cqw; } .mk-phone .mk-photo { height: 46cqw; margin-top: 2cqw; } .mk-food.mk-phone em { background: #C2502A; } .mk-menu { display: grid; gap: 4cqw; padding: 0 6cqw; } .mk-menu span { display: grid; grid-template-columns: 22cqw 1fr; align-items: center; gap: 4cqw; } .mk-menu i { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #C2502A 0 35%, #F4EEE6 36% 60%, #E3D8C9 61%); } .mk-menu span:nth-child(2n) i { background: radial-gradient(circle, #6E8B3D 0 35%, #F4EEE6 36% 60%, #E3D8C9 61%); } .mk-menu b { height: 3cqw; border-radius: 9px; background: rgba(16,40,120,.18); box-shadow: 0 5cqw 0 -.2cqw rgba(47,107,255,.35); width: 80%; } /* serviço extra: redesign */ .sol-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 22px; border-radius: 16px; border: 1px dashed rgba(47,107,255,.3); background: rgba(255,255,255,.6); color: var(--paper-muted); font-size: .95rem; } .sol-extra > svg { flex: none; width: 24px; height: 24px; color: var(--blue); } .sol-extra > span { flex: 1 1 260px; min-width: 0; } .sol-extra strong { color: #0B1E4F; } .sol-extra .sol-link { margin: 0; } @media (min-width: 700px) { .sol-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .sol-extra { grid-column: 1 / -1; } } @media (min-width: 1100px) { .sol-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.6fr); gap: 48px; align-items: start; } .sol-intro { position: sticky; top: calc(var(--header-h) + 48px); padding-top: 48px; } .sol-card { padding: 30px 30px 0; } } /* ---------- Diferenciais ---------- */ .reason-grid { display: grid; gap: 14px; } .reason { padding: 28px 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(12, 20, 48, .45); } .reason h3 { font-size: 1.22rem; font-weight: 600; } .reason p { margin-top: 10px; color: var(--muted); } .reason--feature { background: radial-gradient(80% 120% at 100% 0%, rgba(47,107,255,.32), transparent 60%), linear-gradient(160deg, #10204F, #0A1230); border-color: rgba(91,145,255,.35); } .reason--feature h3 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -.03em; } .reason--feature p { color: #C2CCEA; font-size: 1.06rem; max-width: 46ch; } .reason-icon { width: 34px; height: 34px; color: var(--blue-bright); margin-bottom: 26px; } @media (min-width: 900px) { .reason-grid { grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; } .reason--feature { grid-row: span 2; padding: 44px 40px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; } .reason--feature .reason-icon { margin-bottom: auto; } .reason:nth-child(4) { grid-column: 2 / 4; } .reason { padding: 32px 30px; } } /* ---------- Por que a Zuno: microanimações (escopo .reasons) ---------- */ .reasons .reason { position: relative; isolation: isolate; overflow: hidden; transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); } .reasons .reason::before { /* iluminação do hover */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(110% 80% at 20% 0%, rgba(47,107,255,.2), transparent 62%); opacity: 0; transition: opacity .6s var(--ease); } /* entrada única, em sequência */ .js .reasons [data-reveal] { opacity: 1; transform: none; transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); transition-delay: 0s; } .js .reasons [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); } .js .reasons [data-reveal].is-in { animation: rs-in .9s var(--ease) var(--d, 0ms) backwards; } @keyframes rs-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .reasons .rs-art, .reasons .rs-art * { transform-box: fill-box; transform-origin: center; } .rs-art { display: block; height: 32px; width: auto; margin-bottom: 18px; overflow: visible; } /* 1. O site é seu: chave, reflexo e gradiente vivo */ .reasons .rs-own { background: linear-gradient(160deg, #10204F, #0A1230); } .reasons .rs-own::before { opacity: 1; inset: -30%; background: radial-gradient(40% 40% at 78% 18%, rgba(47,107,255,.42), transparent 70%), radial-gradient(35% 35% at 20% 85%, rgba(30,80,220,.22), transparent 70%); animation: rs-drift 18s ease-in-out infinite alternate; } @keyframes rs-drift { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(-6%,5%,0) rotate(8deg); } } .rs-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; } .rs-sheen::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(160,195,255,.13) 45%, rgba(200,220,255,.2) 50%, rgba(160,195,255,.13) 55%, transparent); transform: translateX(-130%) skewX(-12deg); opacity: 0; } .rs-own.is-in .rs-sheen::after { animation: rs-sheen 8s ease-in-out calc(var(--d, 0ms) + 1.2s) infinite; } @keyframes rs-sheen { 0% { transform: translateX(-130%) skewX(-12deg); opacity: 0; } 6% { opacity: 1; } 30% { transform: translateX(330%) skewX(-12deg); opacity: 1; } 31%, 100% { transform: translateX(330%) skewX(-12deg); opacity: 0; } } .rs-key { overflow: visible; } .rs-key-glow { fill: rgba(91,145,255,.55); filter: blur(5px); opacity: 0; transform-box: fill-box; transform-origin: center; } .rs-key-body { transform-box: view-box; transform-origin: 8px 14px; } .rs-own.is-in .rs-key-body { animation: rs-turn 6s var(--ease) calc(var(--d, 0ms) + .8s) infinite; } .rs-own.is-in .rs-key-glow { animation: rs-keyglow 6s ease-in-out calc(var(--d, 0ms) + .8s) infinite; } @keyframes rs-turn { 0%, 62%, 100% { transform: rotate(0deg); } 72% { transform: rotate(-16deg); } 82% { transform: rotate(4deg); } 90% { transform: rotate(0deg); } } @keyframes rs-keyglow { 0%, 60%, 100% { opacity: 0; } 76% { opacity: 1; } } /* 2. Contatos: visita, página, contato acendendo em sequência */ .rs-track { fill: none; stroke: rgba(91,145,255,.22); stroke-width: 1.5; stroke-dasharray: 2 4; } .rs-flow { fill: none; stroke: #6FA0FF; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 3px rgba(91,145,255,.9)); } .rs-node circle { fill: #0B1638; stroke: rgba(91,145,255,.45); stroke-width: 1.5; transition: stroke .4s, fill .4s; } .rs-glyph { fill: #6FA0FF; } .rs-glyph--line { fill: none; stroke: #6FA0FF; stroke-width: 1.4; stroke-linejoin: round; } .rs-ring { fill: none !important; stroke: rgba(111,160,255,.8) !important; opacity: 0; } .rs-leads.is-in .rs-flow { animation: rs-flow 3.6s cubic-bezier(.65,0,.35,1) calc(var(--d, 0ms) + .6s) infinite; } @keyframes rs-flow { 0% { stroke-dasharray: 0 100; opacity: 1; } 70% { stroke-dasharray: 100 0; opacity: 1; } 100% { stroke-dasharray: 100 0; opacity: 0; } } .rs-leads.is-in .rs-node > circle:last-of-type { animation: rs-node 3.6s ease-out calc(var(--d, 0ms) + .6s) infinite; } .rs-leads.is-in .rs-node:nth-of-type(1) > circle:last-of-type { animation-name: rs-node-1; } .rs-leads.is-in .rs-node:nth-of-type(2) > circle:last-of-type { animation-name: rs-node-2; } .rs-leads.is-in .rs-node:nth-of-type(3) > circle:last-of-type { animation-name: rs-node-3; } @keyframes rs-node-1 { 0%, 4% { fill: #0B1638; stroke: rgba(91,145,255,.45); } 8%, 80% { fill: rgba(47,107,255,.3); stroke: #8FB7FF; } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } @keyframes rs-node-2 { 0%, 34% { fill: #0B1638; stroke: rgba(91,145,255,.45); } 38%, 80% { fill: rgba(47,107,255,.3); stroke: #8FB7FF; } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } @keyframes rs-node-3 { 0%, 66% { fill: #0B1638; stroke: rgba(91,145,255,.45); } 70%, 82% { fill: #2563EB; stroke: #CFE0FF; } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } .rs-leads.is-in .rs-ring { animation: rs-ring 3.6s ease-out calc(var(--d, 0ms) + .6s) infinite; } @keyframes rs-ring { 0%, 68% { opacity: 0; transform: scale(1); } 72% { opacity: .9; } 100% { opacity: 0; transform: scale(2); } } /* 3. Processo: linha de progresso com etapas */ .rs-progress { fill: none; stroke: #6FA0FF; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 3px rgba(91,145,255,.8)); } .rs-dots circle { fill: #0B1638; stroke: rgba(91,145,255,.45); stroke-width: 1.5; } .rs-process.is-in .rs-progress { animation: rs-progress 5s cubic-bezier(.45,0,.3,1) calc(var(--d, 0ms) + .6s) infinite; } @keyframes rs-progress { 0% { stroke-dasharray: 0 100; opacity: 1; } 75% { stroke-dasharray: 100 0; opacity: 1; } 92% { stroke-dasharray: 100 0; opacity: 1; } 100% { stroke-dasharray: 100 0; opacity: 0; } } .rs-process.is-in .rs-dots circle { animation: rs-step 5s ease-out calc(var(--d, 0ms) + .6s) infinite; } .rs-process.is-in .rs-dots circle:nth-child(2) { animation-name: rs-step-2; } .rs-process.is-in .rs-dots circle:nth-child(3) { animation-name: rs-step-3; } .rs-process.is-in .rs-dots circle:nth-child(4) { animation-name: rs-step-4; } .rs-process.is-in .rs-dots circle:nth-child(5) { animation-name: rs-step-5; } @keyframes rs-step { 0% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1.15); } 8%, 92% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1); } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } @keyframes rs-step-2 { 0%, 17% { fill: #0B1638; stroke: rgba(91,145,255,.45); transform: scale(1); } 19% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1.25); } 25%, 92% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1); } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } @keyframes rs-step-3 { 0%, 36% { fill: #0B1638; stroke: rgba(91,145,255,.45); transform: scale(1); } 38% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1.25); } 44%, 92% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1); } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } @keyframes rs-step-4 { 0%, 54% { fill: #0B1638; stroke: rgba(91,145,255,.45); transform: scale(1); } 56% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1.25); } 62%, 92% { fill: #6FA0FF; stroke: #CFE0FF; transform: scale(1); } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } @keyframes rs-step-5 { 0%, 73% { fill: #0B1638; stroke: rgba(91,145,255,.45); transform: scale(1); } 75% { fill: #2563EB; stroke: #EAF2FF; transform: scale(1.35); } 81%, 92% { fill: #2563EB; stroke: #EAF2FF; transform: scale(1); } 100% { fill: #0B1638; stroke: rgba(91,145,255,.45); } } /* 4. Fala com quem faz: balão com digitação */ .rs-bubble { fill: rgba(47,107,255,.14); stroke: #6FA0FF; stroke-width: 1.6; stroke-linejoin: round; transition: fill .45s, filter .45s; } .rs-typing circle { fill: #8FB7FF; opacity: .25; } .rs-talk.is-in .rs-bubble { animation: rs-breathe 4s ease-in-out calc(var(--d, 0ms) + .6s) infinite; } @keyframes rs-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .rs-talk.is-in .rs-typing circle { animation: rs-type 1.6s ease-in-out calc(var(--d, 0ms) + .6s) infinite; } .rs-talk.is-in .rs-typing circle:nth-child(2) { animation-delay: calc(var(--d, 0ms) + .8s); } .rs-talk.is-in .rs-typing circle:nth-child(3) { animation-delay: calc(var(--d, 0ms) + 1s); } @keyframes rs-type { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 25% { opacity: 1; transform: translateY(-2px); } } /* hover (mouse) e foco (teclado) */ @media (hover: hover) { .js .reasons .reason.is-in:hover { transform: translateY(-5px); border-color: rgba(110,160,255,.55); box-shadow: 0 22px 50px -28px rgba(47,107,255,.6); } .js .reasons .rs-own.is-in:hover { border-color: rgba(120,170,255,.75); box-shadow: 0 0 0 1px rgba(47,107,255,.2), 0 0 50px -10px rgba(47,107,255,.6); } .reasons .reason:hover::before { opacity: 1; } .reasons .rs-own:hover::before { filter: brightness(1.35); } .reasons .rs-own:hover .rs-key { filter: drop-shadow(0 0 8px rgba(120,170,255,.95)); } .reasons .rs-leads:hover .rs-node circle, .reasons .rs-process:hover .rs-dots circle { stroke: #A9C9FF; } .reasons .rs-leads:hover .rs-art, .reasons .rs-process:hover .rs-art { filter: drop-shadow(0 0 6px rgba(91,145,255,.6)); } .reasons .rs-talk:hover .rs-bubble { fill: rgba(47,107,255,.3); filter: drop-shadow(0 0 6px rgba(120,170,255,.8)); } } .reasons .rs-art, .reasons .rs-key { transition: filter .45s var(--ease); } .reasons .reason:focus-within::before { opacity: 1; } @media (hover: none) { .reasons .reason:active::before { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .reasons .reason *, .reasons .reason::before, .reasons .rs-sheen::after, .js .reasons [data-reveal] { animation: none !important; } .reasons .rs-progress, .reasons .rs-flow { stroke-dasharray: 100 0 !important; } .reasons .rs-dots circle, .reasons .rs-node > circle:last-of-type { fill: rgba(47,107,255,.35); stroke: #8FB7FF; } .reasons .rs-typing circle { opacity: .8; } } /* ---------- Processo: jornada vertical centralizada ---------- */ .process { background: linear-gradient(180deg, var(--ink), var(--night) 60%, var(--ink)); } .steps { --progress: 0; --dot: 56px; --gap: 56px; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap); max-width: 640px; margin: 8px auto 0; padding: 0; list-style: none; } /* linha vertical: do centro do primeiro indicador ao centro do último */ .steps::before, .steps::after { content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; top: calc(var(--dot) / 2); bottom: var(--line-end, 0px); } .steps::before { background: linear-gradient(180deg, rgba(140,165,255,.3), rgba(140,165,255,.14)); } .steps::after { background: linear-gradient(180deg, var(--blue-bright), var(--blue)); transform-origin: top; transform: scaleY(var(--progress)); box-shadow: 0 0 14px var(--glow); } .step { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .step-dot { position: relative; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: #0A1230; border: 1px solid var(--line-strong); color: var(--muted); box-shadow: 0 0 0 8px var(--night); transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); } .step-dot svg { width: 22px; height: 22px; } .step.is-active .step-dot { background: radial-gradient(circle at 35% 30%, #4C84FF, #2563EB 70%); border-color: #7DA6FF; color: #fff; box-shadow: 0 0 0 8px var(--night), 0 0 0 9px rgba(91,145,255,.25), 0 0 28px var(--glow); } .step-card { margin-top: 18px; width: 100%; padding: 24px 28px 26px; border-radius: 20px; background: linear-gradient(180deg, #0B1330, #08102A); border: 1px solid var(--line); transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } .step h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; } .step-no { color: var(--blue-bright); font-variant-numeric: tabular-nums; } .step-sep { color: rgba(140,165,255,.45); font-weight: 400; } .step p { margin: 10px auto 0; color: var(--muted); max-width: 46ch; font-size: .97rem; line-height: 1.6; } .step.is-active .step-card { border-color: rgba(91,145,255,.28); } /* entrada: indicador surge e o card sobe, um por vez conforme a rolagem */ .js .steps .step[data-reveal] { opacity: 1; transform: none; transition: none; } .js .steps .step[data-reveal] .step-dot, .js .steps .step[data-reveal] .step-card { opacity: 0; } .js .steps .step[data-reveal] .step-dot { transform: scale(.6); } .js .steps .step[data-reveal] .step-card { transform: translateY(22px); } .js .steps .step[data-reveal].is-in .step-dot { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s cubic-bezier(.3,1.4,.5,1), background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .js .steps .step[data-reveal].is-in .step-card { opacity: 1; transform: none; transition: opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s, border-color .4s var(--ease), box-shadow .4s var(--ease); } @media (hover: hover) and (pointer: fine) { .steps .step:hover .step-card { border-color: rgba(91,145,255,.5); box-shadow: 0 18px 44px -24px rgba(47,107,255,.65), inset 0 1px 0 rgba(140,175,255,.12); } .js .steps .step[data-reveal].is-in:hover .step-card { transform: translateY(-3px); } .steps .step:hover .step-dot { border-color: #7DA6FF; color: #fff; } .js .steps .step[data-reveal].is-in:hover .step-dot { transform: scale(1.06); } } @media (max-width: 599px) { .steps { --dot: 48px; --gap: 40px; } .step-dot svg { width: 20px; height: 20px; } .step-card { margin-top: 14px; padding: 20px 20px 22px; border-radius: 18px; } .step h3 { font-size: 1.1rem; } .step p { font-size: .94rem; } } /* ---------- Títulos centralizados (Para quem, Projetos, Por que, Processo, Dúvidas) ---------- */ #para-quem .section-head, #projetos .section-head, #diferenciais .section-head, #processo .section-head { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 760px; margin-inline: auto; text-align: center; } #para-quem .section-title, #projetos .section-title, #diferenciais .section-title, #processo .section-title { max-width: 18ch; } #para-quem .section-lead, #projetos .section-lead, #processo .section-lead { margin: 14px auto 0; max-width: 54ch; } /* ---------- Investimento ---------- */ .invest-grid { display: grid; gap: 44px; } .invest-intro .btn { margin-top: 28px; } .invest-list { margin: 0; display: grid; gap: 12px; } .invest-item { padding: 24px 24px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--paper-line); } .invest-item dt { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -.015em; display: flex; align-items: flex-start; gap: 12px; } .invest-item dt::before { content: ""; flex: none; margin-top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47,107,255,.15); } .invest-item dd { margin: 8px 0 0; color: var(--paper-muted); } @media (min-width: 900px) { .invest-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; } .invest-list { grid-template-columns: 1fr 1fr; gap: 16px; } .invest-item { padding: 28px; } } /* ---------- FAQ compacto ---------- */ #faq.section { padding-block: 64px; background: linear-gradient(180deg, var(--ink), #050A19 50%, var(--ink)); } .faq-wrap { display: grid; gap: 26px; } .faq-heading { font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: 700; letter-spacing: -.03em; } .faq-intro-text { margin-top: 10px; color: var(--muted); max-width: 38ch; } .faq-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--blue-bright); font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-decoration: none; } .faq-more::after { content: "→"; transition: transform .3s var(--ease); } .faq-more:hover::after { transform: translateX(4px); } .faq-list { display: grid; border-top: 1px solid rgba(91,145,255,.16); min-width: 0; } .faq-item { border-bottom: 1px solid rgba(91,145,255,.16); border-radius: 0; transition: background-color .3s var(--ease); } .faq-item[open] { background: linear-gradient(90deg, rgba(47,107,255,.09), rgba(47,107,255,.02)); box-shadow: inset 2px 0 0 #3D78FF; } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 14px 17px 16px; color: #E9EEFB; font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; line-height: 1.35; transition: color .25s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: #fff; } .faq-item summary:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; border-radius: 8px; } .faq-item[open] summary { color: #D6E4FF; } .faq-q { flex: 1; min-width: 0; } .faq-toggle { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(91,145,255,.4); color: var(--blue-bright); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease); } .faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); } .faq-toggle::after { transform: rotate(90deg); } .faq-item summary:hover .faq-toggle { border-color: rgba(110,160,255,.75); } .faq-item[open] .faq-toggle { background: #2563EB; border-color: #2563EB; color: #fff; } .faq-item[open] .faq-toggle::after { transform: rotate(0deg); opacity: 0; } .faq-answer { overflow: hidden; } .faq-answer p { padding: 0 56px 18px 16px; color: #B5C1E0; font-size: .95rem; line-height: 1.65; max-width: 66ch; } @media (min-width: 900px) { #faq.section { padding-block: 88px; } .faq-wrap { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 64px; align-items: start; } .faq-head { position: sticky; top: calc(var(--header-h) + 32px); } } @media (max-width: 420px) { .faq-item summary { padding: 16px 10px 16px 12px; font-size: .95rem; } .faq-answer p { padding: 0 12px 16px 12px; } } #faq .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 900px; } #faq .faq-head { position: static; text-align: center; display: flex; flex-direction: column; align-items: center; } #faq .faq-intro-text { margin-inline: auto; max-width: 46ch; } #faq .faq-more { margin-top: 12px; } /* ---------- FAQ: acabamento premium ---------- */ #faq .faq-list { gap: 12px; border-top: 0; } #faq .faq-item { position: relative; border: 1px solid rgba(91,145,255,.14); border-radius: 16px; background: linear-gradient(180deg, rgba(14,24,58,.55), rgba(8,14,36,.55)); box-shadow: none; overflow: hidden; transition: border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .45s var(--ease); } /* filete de luz azul na borda esquerda da pergunta aberta */ #faq .faq-item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #7DA6FF, #2563EB); box-shadow: 0 0 12px rgba(61,120,255,.8); transform: scaleY(0); opacity: 0; transition: transform .5s var(--ease), opacity .4s var(--ease); } #faq .faq-item summary { padding: 19px 18px 19px 22px; } #faq .faq-item:hover { border-color: rgba(91,145,255,.34); box-shadow: 0 0 0 1px rgba(91,145,255,.06), 0 14px 36px -26px rgba(47,107,255,.7); } #faq .faq-item.is-open, html:not(.js) #faq .faq-item[open] { border-color: rgba(91,145,255,.5); background: radial-gradient(120% 140% at 0% 0%, rgba(47,107,255,.16), transparent 60%), linear-gradient(180deg, rgba(16,30,74,.75), rgba(9,16,42,.75)); box-shadow: 0 0 0 1px rgba(91,145,255,.12), 0 18px 46px -24px rgba(47,107,255,.75); } #faq .faq-item.is-open::before, html:not(.js) #faq .faq-item[open]::before { transform: scaleY(1); opacity: 1; } #faq .faq-item.is-open summary { color: #fff; } /* ícone: gira 180° e o "+" vira "−" */ #faq .faq-toggle { width: 30px; height: 30px; transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .55s cubic-bezier(.3,1.25,.5,1); } #faq .faq-item summary:hover .faq-toggle { border-color: rgba(125,166,255,.85); box-shadow: 0 0 14px rgba(61,120,255,.45); } #faq .faq-item[open] .faq-toggle { background: transparent; border-color: rgba(91,145,255,.4); color: var(--blue-bright); } #faq .faq-item[open] .faq-toggle::after { transform: rotate(90deg); opacity: 1; } #faq .faq-item.is-open .faq-toggle, html:not(.js) #faq .faq-item[open] .faq-toggle { transform: rotate(180deg); background: #2563EB; border-color: #3D78FF; color: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 0 18px rgba(61,120,255,.55); } #faq .faq-item.is-open .faq-toggle::after, html:not(.js) #faq .faq-item[open] .faq-toggle::after { transform: rotate(0deg); opacity: 0; } /* resposta: além da altura, o texto desliza e aparece */ #faq .faq-answer p { padding: 0 64px 20px 22px; opacity: 0; transform: translateY(-6px); transition: opacity .45s var(--ease) .06s, transform .5s var(--ease) .06s; } #faq .faq-item.is-open .faq-answer p, html:not(.js) #faq .faq-item[open] .faq-answer p { opacity: 1; transform: none; } /* entrada discreta da seção: cabeçalho e perguntas sobem em sequência */ .js #faq .faq-item[data-reveal] { transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms), border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .45s var(--ease); } @media (max-width: 420px) { #faq .faq-item summary { padding: 17px 14px 17px 18px; } #faq .faq-answer p { padding: 0 16px 18px 18px; } } @media (prefers-reduced-motion: reduce) { #faq .faq-item, #faq .faq-item::before, #faq .faq-toggle, #faq .faq-answer p { transition: none !important; } } /* ---------- Orçamento ---------- */ .quote { overflow: hidden; background: var(--night); border-top: 1px solid var(--line); } .quote-grid { position: relative; display: grid; gap: 36px; } .quote-form { display: grid; gap: 18px; padding: 24px 20px; border-radius: var(--radius-lg); background: rgba(12, 20, 48, .7); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); } .field-row { display: grid; gap: 18px; } .field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } .field label, .field legend { font-weight: 700; font-size: .9rem; padding: 0; } .optional { color: var(--muted); font-weight: 500; } .field input:not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 12px; background: rgba(4, 6, 15, .55); border: 1px solid var(--line-strong); color: var(--text); font-size: 1rem; transition: border-color .25s, box-shadow .25s; } .field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .field select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat; } .field select option { background: var(--panel); color: var(--text); } .field input::placeholder, .field textarea::placeholder { color: rgba(154,166,200,.6); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(47,107,255,.2); } .field [aria-invalid="true"] { border-color: var(--danger) !important; } .field-error { min-height: 0; color: var(--danger); font-size: .85rem; } .field-error:empty { display: none; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; cursor: pointer; } .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-weight: 600; font-size: .92rem; transition: all .25s var(--ease); } .chip input:checked + span { background: rgba(47,107,255,.18); border-color: var(--blue-bright); color: var(--text); } .chip input:focus-visible + span { outline: 2px solid var(--blue-bright); outline-offset: 2px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { font-size: .95rem; font-weight: 600; } .form-status:empty { display: none; } .form-status.is-ok { color: var(--ok); } .form-status.is-error { color: var(--danger); } .form-status.is-info { color: #BFD3FF; } .form-privacy { font-size: .82rem; color: var(--muted); text-align: center; } .config-notice { padding: 14px 16px; border-radius: 12px; border: 1px dashed #F5C35B; background: rgba(245,195,91,.08); color: #F7DCA2; font-size: .86rem; line-height: 1.5; } .config-notice code { font-size: .82rem; color: #fff; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .quote-form { padding: 32px; } } /* ---------- Orçamento: formulário compacto (escopo #orcamento) ---------- */ #orcamento.quote { padding-block: 72px; background: radial-gradient(70% 60% at 50% 0%, rgba(30,70,200,.16), transparent 70%), linear-gradient(180deg, #050B1E 0%, #040A1C 60%, #030815 100%); border-top-color: rgba(91,145,255,.14); } #orcamento .quote-grid { gap: 28px; max-width: 980px; } .quote-head { text-align: center; max-width: 560px; margin-inline: auto; } .quote-eyebrow { color: var(--blue-bright); font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px; } .quote-heading { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; } .quote-sub { margin-top: 10px; color: #B3C0E2; font-size: 1rem; } /* painel do formulário */ #orcamento .quote-form { position: relative; gap: 16px; padding: 22px 18px; border-radius: 20px; background: linear-gradient(170deg, rgba(14,30,80,.7), rgba(7,16,44,.85)); border: 1px solid rgba(80,135,255,.32); box-shadow: inset 0 1px 0 rgba(160,190,255,.08), 0 30px 70px -40px rgba(0,0,0,.85); } #orcamento .field { gap: 7px; align-content: start; } #orcamento .field label, #orcamento .field legend { font-weight: 600; font-size: .86rem; color: #E4EBFF; } #orcamento .field legend { margin-bottom: 7px; } #orcamento .field input:not([type="radio"]), #orcamento .field select, #orcamento .field textarea { min-height: 48px; padding: 11px 14px; background: rgba(10,22,60,.55); border-color: rgba(91,145,255,.28); border-radius: 11px; font-size: .97rem; } #orcamento .field textarea { min-height: 96px; } #orcamento .field input:not([type="radio"]):hover, #orcamento .field select:hover, #orcamento .field textarea:hover { border-color: rgba(91,145,255,.48); } #orcamento .field input:focus, #orcamento .field select:focus, #orcamento .field textarea:focus { border-color: #5B91FF; box-shadow: 0 0 0 3px rgba(47,107,255,.22); } #orcamento .field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23C9D8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 18px 18px; background-position: right 12px center; background-repeat: no-repeat; } .input-icon { position: relative; display: block; } .input-icon input { padding-right: 44px !important; } .input-icon svg { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 19px; height: 19px; color: #C9D8FF; opacity: .8; pointer-events: none; } #orcamento .chips { gap: 7px; } #orcamento .chip span { min-height: 42px; padding: 0 16px; font-size: .9rem; border-color: rgba(91,145,255,.3); color: #C3CFEE; } #orcamento .chip:hover span { border-color: rgba(91,145,255,.6); } #orcamento fieldset[aria-invalid="true"] .chip span { border-color: rgba(255,122,138,.6); } #orcamento .chip input:checked + span { background: rgba(37,99,235,.9); border-color: #3D78FF; color: #fff; } #orcamento .quote-form [data-submit] { min-height: 54px; border-radius: 13px; margin-top: 2px; } .submit-arrow { width: 18px; height: 18px; transition: transform .35s var(--ease); } #orcamento [data-submit]:hover .submit-arrow { transform: translateX(3px); } #orcamento .form-privacy { color: #8E9CC4; margin-top: -4px; } #orcamento .config-notice { padding: 11px 14px; font-size: .84rem; } /* colunas: 1 no celular, 2 no tablet, 3 no computador */ #orcamento .field-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { #orcamento .quote-form { padding: 28px; } #orcamento .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } #orcamento .field-row--3 > .field:last-child { grid-column: 1 / -1; } } @media (min-width: 960px) { #orcamento.quote { padding-block: 88px; } #orcamento .quote-form { padding: 32px 34px; gap: 18px; } #orcamento .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #orcamento .field-row--3 > .field:last-child { grid-column: auto; } #orcamento .field-row--chips { grid-template-columns: auto 1fr; column-gap: 36px; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--ink); padding: 64px 0 calc(28px + env(safe-area-inset-bottom)); } .footer-grid { display: grid; gap: 36px; } .footer-brand p { margin-top: 14px; color: var(--muted); max-width: 30ch; } .footer-title { font-family: var(--font-body); font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin-bottom: 14px; } .footer-nav ul, .footer-contact ul { display: grid; gap: 10px; } .footer-nav a, .footer-contact a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; transition: color .25s; } .footer-nav a:hover, .footer-contact a:hover { color: var(--blue-bright); } .footer-contact svg { width: 18px; height: 18px; color: var(--blue-bright); } .footer-bottom { margin-top: 48px; color: var(--muted); font-size: .84rem; } .footer-bottom p { padding-top: 24px; border-top: 1px solid var(--line); } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } /* ---------- CTA fixo no celular ---------- */ .mobile-cta { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; min-height: 54px; transform: translateY(140%); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); box-shadow: 0 18px 40px -10px rgba(0,0,0,.7), 0 0 30px -6px var(--glow); } .mobile-cta.is-visible { transform: none; opacity: 1; } @media (min-width: 900px) { .mobile-cta { display: none; } } /* ---------- Animação de entrada do hero ---------- */ .js [data-load] { opacity: 0; transform: translateY(18px); } .js.is-loaded [data-load] { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); } .js.is-loaded [data-load="2"] { transition-delay: .12s; } .js.is-loaded [data-load="3"] { transition-delay: .26s; } .js.is-loaded [data-load="4"] { transition-delay: .4s; } .js.is-loaded [data-load="5"] { transition-delay: .55s; } .js .hero-device[data-load] { transform: translateY(30px) scale(.97); } .js.is-loaded .hero-device[data-load] { transform: none; transition-duration: 1.4s; } .js .mascot--hero[data-load] { transform: translateY(40px); } .js.is-loaded .mascot--hero[data-load] { transform: none; transition-delay: .5s; transition-duration: 1.2s; } .js .speech { opacity: 0; transform: translateY(8px) scale(.96); } .js.is-loaded .speech { opacity: 1; transform: none; transition-delay: 1.4s; } .js.is-loaded .speech.is-swapping { opacity: 0; transition-delay: 0s; } /* ---------- Movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .js [data-reveal], .js [data-load], .js .reveal-visual, .js .speech { opacity: 1 !important; transform: none !important; clip-path: none !important; } .mascot-img { --mx: 0px !important; --my: 0px !important; --mr: 0deg !important; } } /* aproxima a primeira seção do hero */ .audiences { padding-top: 56px; } @media (min-width: 900px) { .audiences { padding-top: 72px; } } @media (max-width: 599px) { .project-meta { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 899px) { /* no celular o mascote aparece só no topo e nos serviços, para o formulário chegar mais rápido */ } .mk-feats--col { grid-template-columns: 1fr; gap: 4cqw; padding: 2cqw 7cqw; } .mk-feats--col span { height: 16cqw; border-radius: 4cqw; } .mk-feats--col span::before { left: 5cqw; width: 6cqw; height: 6cqw; border-width: 1.2cqw; } /* ========================================================== Auditoria final — ajustes de responsividade e toque ========================================================== */ /* áreas seguras (iPhone com notch/ilha): com viewport-fit=cover o fundo ocupa a tela toda e o conteúdo respeita as bordas seguras */ :root { --gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } .mobile-cta { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); } /* hero em celulares baixos (ex.: 320×568): título, texto, botões e faixa cabem na tela */ @media (max-width: 599px) and (max-height: 700px) { .js .hero[data-hero-scroll] .hero-pin { gap: 22px; padding-top: calc(var(--header-h) + 14px); padding-bottom: 18px; } .js .hero[data-hero-scroll] .hero-title { font-size: clamp(2.05rem, 6.7vh, 2.75rem); } .js .hero[data-hero-scroll] .hero-lead { margin-top: 14px; font-size: 1rem; } .js .hero[data-hero-scroll] .hero-actions { margin-top: 20px; gap: 10px; } .js .hero[data-hero-scroll] .hero-actions .btn { --btn-h: 48px; } } /* celular deitado: composição mais compacta, mesmo conteúdo */ @media (orientation: landscape) and (max-height: 500px) { .js .hero[data-hero-scroll] .hero-pin { gap: 16px; padding-top: calc(var(--header-h) + 6px); padding-bottom: 12px; } .js .hero[data-hero-scroll] .hero-copy .hero-title { max-width: 24ch; font-size: clamp(1.7rem, 8.6vh, 2.4rem); } .js .hero[data-hero-scroll] .hero-lead { margin-top: 10px; font-size: .95rem; max-width: 60ch; } .js .hero[data-hero-scroll] .hero-actions { margin-top: 14px; width: auto; } .js .hero[data-hero-scroll] .hero-actions .btn { --btn-h: 44px; flex: 0 1 auto; } .js .hero[data-hero-scroll] .ticker-viewport { height: 42px; } .js .hero[data-hero-scroll] .hero-cue { display: none; } } /* alvos de toque confortáveis (≥ 44px) sem mudar o desenho */ @media (pointer: coarse), (max-width: 899px) { .sol-link { min-height: 44px; padding-block: 0; margin-top: 6px; margin-bottom: 16px; } .sol-extra .sol-link { margin: 0; } #faq .faq-more { min-height: 44px; margin-top: 2px; margin-bottom: -10px; } .footer-nav ul, .footer-contact ul { gap: 2px; } .footer-nav a, .footer-contact a { min-height: 40px; } .brand { min-height: 44px; } }