/* ===================================================================== BENLIT — landing page Mesma estrutura e animações da versão anterior, agora com a identidade BENLIT: grafite institucional, ouro como acento, tipografia geométrica. Referências: BENLIT-identidade-visual.md e BENLIT-brief-conteudo.md ===================================================================== */ /* ---------- Fontes ---------- [EUROSTILE — família licenciada. Colocar os .woff2 em /fonts/ e remover os comentários dos blocos abaixo. Enquanto isso a pilha cai no substituto Saira Semi Condensed e, sem CDN, na fonte do sistema.] @font-face { font-family: "Eurostile"; src: url("../fonts/eurostile-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Eurostile"; src: url("../fonts/eurostile-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Eurostile"; src: url("../fonts/eurostile-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } */ /* ---------- Tokens ---------- */ :root { /* institucional */ --grafite: #282F38; --grafite-fundo: #1E242B; --grafite-eleva: #333B45; --grafite-linha: #3E4650; /* acento */ --ouro: #BA9C64; --ouro-texto: #7C6228; /* ouro para texto sobre fundo claro (AA sobre papel e papel-alt) */ --ouro-claro: #D8C49A; --ouro-veu: rgba(186, 156, 100, .12); /* superfícies claras */ --papel: #F7F5F1; --papel-alt: #EDE9E1; --papel-linha: #DAD4C8; /* texto */ --texto: #22262C; --texto-suave: #5C636D; --texto-claro: #E8E9EB; --texto-claro-2: #A9B0B9; --erro: #A4331F; --fonte: "Eurostile", "Saira Semi Condensed", "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif; /* Tipografia fluida, escala contida */ --fs-h1: clamp(2.4rem, 1.7rem + 3.1vw, 4.4rem); --fs-h2: clamp(1.8rem, 1.4rem + 2vw, 2.9rem); --fs-h3: clamp(1.4rem, 1.25rem + .8vw, 2rem); --fs-h4: clamp(1.15rem, 1.08rem + .35vw, 1.45rem); --fs-h5: clamp(.8rem, .78rem + .1vw, .875rem); --fs-large: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); --fs-main: 1.0625rem; --fs-small: .85rem; /* Espaçamentos */ --space-1: 1rem; --space-125: 1.25rem; --space-15: 1.5rem; --space-2: clamp(1.5rem, 1.35rem + .5vw, 2rem); --space-25: clamp(1.75rem, 1.5rem + .8vw, 2.5rem); --space-3: clamp(2rem, 1.7rem + 1vw, 3rem); --space-4: clamp(2.5rem, 2rem + 1.6vw, 4rem); --section-main: clamp(3.5rem, 2.5rem + 4vw, 7rem); --section-large: clamp(4.5rem, 3rem + 6vw, 10rem); --site-margin: clamp(1.25rem, .9rem + 1.4vw, 2.5rem); --gutter: 1.5rem; --max-width: 1200px; --raio-campo: 10px; --raio-bloco: 18px; --raio-pilula: 999px; --icon-size: clamp(2.25rem, 2.15rem + .4vw, 2.625rem); --logo-width: clamp(150px, 15vw, 200px); --octagon: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%); --curva: cubic-bezier(.22, .61, .36, 1); --focus-width: 3px; } /* ---------- Temas por seção (animados pelo JS no ) ---------- */ body { --theme-bg: var(--grafite); --theme-text: var(--texto-claro); --theme-bg2: var(--grafite-eleva); --theme-accent: var(--ouro); --theme-linha: var(--grafite-linha); --theme-link-hover: var(--grafite); } .u-theme-light { --theme-bg: var(--papel); --theme-text: var(--texto); --theme-bg2: #fff; --theme-accent: var(--ouro-texto); --theme-linha: var(--papel-linha); --theme-link-hover: var(--papel); background-color: var(--theme-bg); color: var(--theme-text); } .u-theme-alt { --theme-bg: var(--papel-alt); --theme-text: var(--texto); --theme-bg2: #fff; --theme-accent: var(--ouro-texto); --theme-linha: var(--papel-linha); --theme-link-hover: var(--papel); background-color: var(--theme-bg); color: var(--theme-text); } .u-theme-dark { --theme-bg: var(--grafite); --theme-text: var(--texto-claro); --theme-bg2: var(--grafite-eleva); --theme-accent: var(--ouro); --theme-linha: var(--grafite-linha); --theme-link-hover: var(--grafite); background-color: var(--theme-bg); color: var(--theme-text); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--grafite); -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; font-family: var(--fonte); font-size: var(--fs-main); line-height: 1.62; font-weight: 400; color: var(--theme-text); background-color: var(--theme-bg); -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3, h4, h5, h6, p, blockquote, label, ul, ol, fieldset, legend { margin: 0; padding: 0; font: inherit; } ul, ol { list-style: none; } fieldset { border: 0; min-width: 0; } button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } svg { height: auto; } input, textarea, select { font: inherit; color: inherit; } ::selection { background-color: var(--ouro); color: var(--grafite); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: var(--focus-width) solid var(--ouro); outline-offset: 3px; } /* ---------- Utilitários ---------- */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-cover-absolute { position: absolute; inset: 0; width: 100%; height: 100%; } .u-section { position: relative; display: flex; flex-direction: column; justify-content: center; background-color: var(--theme-bg); color: var(--theme-text); } .u-container { position: relative; z-index: 1; width: calc(100% - var(--site-margin) * 2); max-width: var(--max-width); margin-inline: auto; } .u-container-full { position: relative; z-index: 1; width: calc(100% - var(--site-margin) * 2); margin-inline: auto; } .u-color-faded { color: color-mix(in srgb, currentColor 68%, transparent); } .u-max-width-30ch { max-width: 34ch; } .spacer-large { height: var(--section-large); } .spacer-main { height: var(--section-main); } .spacer-margin { height: var(--site-margin); } /* Respiro curto: o primeiro título aparece logo abaixo do octógono */ .spacer-revela { height: clamp(1.25rem, 3vh, 2.5rem); } /* Filete de ouro: só na transição de um bloco claro para um bloco grafite */ .filete { border-top: 1px solid rgba(186, 156, 100, .4); } /* ---------- Tipografia ---------- */ .u-text-h1, .u-text-h2, .u-text-h3, .u-text-h4 { font-weight: 400; letter-spacing: -.02em; text-wrap: balance; } .u-text-h1 { font-size: var(--fs-h1); line-height: 1.06; } .u-text-h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; } .u-text-h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; } .u-text-h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 500; letter-spacing: -.005em; } .u-text-h5 { font-size: var(--fs-h5); line-height: 1.2; font-weight: 500; letter-spacing: .01em; } .u-text-large { font-size: var(--fs-large); line-height: 1.45; } .u-text-main { font-size: var(--fs-main); line-height: 1.62; } .u-text-small { font-size: var(--fs-small); line-height: 1.5; } .char, .word { display: inline-block; } .word { white-space: nowrap; } /* ---------- Assinatura ---------- */ .assinatura { display: block; width: var(--logo-width); padding: .4rem 0; } .assinatura picture { display: block; } .assinatura img { width: 100%; height: auto; } /* Sobre fundo claro vale a versão grafite; sobre grafite, a versão clara */ .assinatura picture.assinatura_escuro { display: none; } .nav_component.is-dark .assinatura picture.assinatura_claro { display: none; } .nav_component.is-dark .assinatura picture.assinatura_escuro { display: block; } .assinatura img { width: 100%; height: auto; } /* ---------- Estrutura ---------- */ .page_wrap { display: flex; flex-direction: column; min-height: 100svh; overflow: clip; } .page_main { display: flex; flex-direction: column; flex: 1; } /* ---------- Transição de página ---------- */ .transition_wrap { position: fixed; inset: 0 0 auto; z-index: 2000; width: 100%; height: 100vh; height: 100dvh; display: none; flex-direction: column; justify-content: center; align-items: center; } @media (prefers-reduced-motion: no-preference) { .transition_wrap { display: flex; } } .transition_logo { position: relative; z-index: 2; width: min(15rem, 62vw); } .transition_background_wrap { z-index: 1; display: flex; justify-content: center; align-items: center; } .transition_background { aspect-ratio: 1; height: 100%; flex: none; overflow: hidden; will-change: clip-path; } .transition_background_fill { background-color: var(--grafite); } .overlay_wrap { background-color: #000; pointer-events: none; } /* ---------- Navegação ---------- */ .nav_component { position: fixed; inset: 0 0 auto; z-index: 900; pointer-events: none; color: var(--theme-text); } .nav_component.is-dark { --theme-text: var(--texto-claro); --theme-bg: var(--grafite); --theme-link-hover: var(--grafite); } .nav_skip_wrap { position: absolute; top: 0; left: 0; z-index: 2; margin: .5rem; padding: .6rem .9rem; border-radius: var(--raio-campo); background-color: var(--grafite); color: var(--texto-claro); pointer-events: auto; transform: translateX(-200%); } .nav_skip_wrap:focus { transform: translateX(0); } .nav_desktop_wrap { position: relative; z-index: 1; margin-top: 1.5rem; display: none; } .nav_desktop_layout { display: flex; justify-content: space-between; align-items: center; gap: var(--space-125); width: 100%; pointer-events: auto; } .nav_logo { position: relative; z-index: 2; display: flex; align-items: center; } .nav_links_component { display: flex; flex-direction: row; align-items: stretch; gap: .375rem; pointer-events: auto; } .nav_links_wrap { display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch; gap: .375rem; } .nav_links_item { display: flex; } .nav_link { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-1); height: 100%; padding: .8rem 1.1rem; border-radius: var(--raio-campo); color: inherit; cursor: pointer; overflow: clip; background-color: color-mix(in srgb, currentColor 7%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); outline-offset: calc(var(--focus-width) * -1) !important; } .nav_link.is-cta { background-color: var(--theme-text); color: var(--theme-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav_link_text { position: relative; z-index: 2; white-space: nowrap; } .nav_link_base { z-index: -1; background-color: var(--ouro); visibility: hidden; } .nav_actions_wrap { display: flex; flex: none; } .nav_buttons_item { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; } /* Mobile */ .nav_mobile_wrap { position: relative; z-index: 1; margin-top: 1.25rem; } .nav_mobile_layout { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--space-15); width: 100%; pointer-events: auto; } .button_menu_wrap { position: relative; display: inline-block; } .button_menu_element { position: relative; display: flex; justify-content: center; align-items: center; width: 2.75rem; aspect-ratio: 1; clip-path: var(--octagon); background-color: color-mix(in srgb, var(--theme-text) 14%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s var(--curva); } .button_menu_wrap:hover .button_menu_element { background-color: color-mix(in srgb, var(--theme-text) 22%, transparent); } .button_menu_icon { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .28rem; width: 46%; aspect-ratio: 1; } .button_menu_icon_line { width: 100%; height: 1.5px; border-radius: var(--raio-pilula); background-color: var(--theme-text); transition: transform .3s var(--curva); } .button_menu_wrap.is-active .button_menu_icon_line:first-child { transform: translateY(.2rem) rotate(45deg); } .button_menu_wrap.is-active .button_menu_icon_line:last-child { transform: translateY(-.2rem) rotate(-45deg); } .clickable_btn { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 3; } .nav_menu_wrap { position: fixed; inset: 0 0 auto; width: 100%; height: 100vh; height: 100dvh; visibility: hidden; } .nav_menu { position: relative; z-index: 1; width: 100%; padding-bottom: 6rem; background-color: var(--grafite); color: var(--texto-claro); clip-path: polygon(100% 0, 100% 50%, 85% 85%, 40% 100%, 0 85%, 0 0); } .nav_menu_contain { padding-top: 6.5rem; } .nav_menu .nav_links_component { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .nav_menu .nav_links_wrap { flex-direction: column; align-items: flex-start; gap: .25rem; } .nav_menu .nav_link { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: .4rem 0; } .nav_menu .nav_link .nav_link_text { font-size: var(--fs-h2); line-height: 1.1; font-weight: 400; text-transform: none; letter-spacing: -.015em; } .nav_menu .nav_link.is-cta { background-color: var(--ouro); color: var(--grafite); padding: .9rem 1.6rem; border-radius: var(--raio-campo); } .nav_menu .nav_link.is-cta .nav_link_text { font-size: var(--fs-h5); font-weight: 500; letter-spacing: .01em; } .nav_menu_backdrop { position: absolute; inset: 0; z-index: 0; background-color: color-mix(in srgb, #000 40%, transparent); pointer-events: auto; } @media (min-width: 48em) { .nav_desktop_wrap { display: block; } .nav_mobile_wrap, .nav_menu_wrap { display: none; } } /* Tooltip que segue o cursor */ .tooltip { position: fixed; top: 0; left: 0; z-index: 950; padding: .4rem .7rem; border-radius: 6px; background-color: var(--grafite); color: var(--texto-claro); opacity: 0; pointer-events: none; transition: opacity .2s; } body:has([data-tooltip]:hover) .tooltip { opacity: 1; } /* ---------- Herói ---------- */ .hero_wrap { position: relative; z-index: 5; display: block; height: 125svh; color: var(--texto-claro); } .hero_track { position: absolute; inset: 0 0 auto; width: 100%; height: 125vh; pointer-events: none; } .hero_trigger { width: 100%; } .hero_trigger.is-1 { height: 40%; } .hero_trigger.is-2 { height: 60%; } .hero_component { position: relative; width: 100%; height: 100svh; overflow: clip; } .hero_content { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; height: 100svh; } .hero_contain { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; padding-bottom: 9svh; color: var(--texto-claro); } .hero_layout { display: flex; justify-content: center; } .hero_texto { display: grid; gap: 1.25rem; justify-items: center; text-align: center; } .hero_filete { width: 3.5rem; height: 1px; background: var(--ouro); opacity: .8; } .hero_chamada { max-width: 15ch; font-size: clamp(2.1rem, 1.5rem + 2.7vw, 3.9rem); line-height: 1.08; font-weight: 400; letter-spacing: -.025em; color: #fff; text-wrap: balance; } .hero_arraste { display: inline-flex; flex-direction: column; align-items: center; gap: .55rem; color: #C0C6CE; letter-spacing: .02em; } .hero_arraste_seta { display: block; width: 1px; height: 1.75rem; background: linear-gradient(to bottom, transparent, var(--ouro)); } @media (prefers-reduced-motion: no-preference) { .hero_arraste_seta { animation: descer 2s var(--curva) infinite; transform-origin: top; } } @keyframes descer { 0% { transform: scaleY(.35); opacity: .3; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.35); opacity: .3; } } .hero_visual_wrap { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; height: 100svh; } .hero_visual { position: relative; aspect-ratio: 1; height: 100%; width: 100vw; overflow: hidden; will-change: clip-path, transform, width; background-color: var(--grafite); } .hero_overlay { z-index: 3; opacity: .06; } .hero_scene { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } /* Órbitas do fundo: presença sutil, sem competir com a moeda */ .hero_orbitas { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; } .hero_orbitas svg { width: min(150vmin, 1100px); height: min(150vmin, 1100px); } .orbita { opacity: .07; } .eletron { fill: #BA9C64; opacity: .5; } .giro { transform-origin: 300px 300px; } @media (prefers-reduced-motion: no-preference) { .giro { animation: orbitar linear infinite; } .g1 { animation-duration: 46s; } .g2 { animation-duration: 64s; animation-direction: reverse; } .g3 { animation-duration: 34s; } } @keyframes orbitar { to { transform: rotate(360deg); } } /* --- Único momento animado: a moeda é montada em setores, de fora para dentro --- */ .moeda_palco { position: relative; width: min(34svh, 38vmin, 330px); aspect-ratio: 1; } /* Luz dourada de ambiente, atrás da moeda */ .moeda_luz { position: absolute; left: 50%; top: 50%; z-index: 0; width: 230%; height: 230%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(186,156,100,.34) 0%, rgba(186,156,100,.16) 34%, rgba(186,156,100,.05) 56%, transparent 72%); animation: acender 2600ms var(--curva) 150ms forwards, respirar 5s ease-in-out 2800ms infinite; } @keyframes acender { to { opacity: 1; } } @keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: .74; } } .moeda_setor, .moeda_inteira { position: absolute; inset: 0; z-index: 1; background: url("../assets/moeda-benlits.png") center / contain no-repeat; background-image: image-set(url("../assets/moeda-benlits.webp") type("image/webp"), url("../assets/moeda-benlits.png") type("image/png")); } .moeda_setor { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--s, .96)); animation: assentar-setor 1100ms var(--curva) forwards; animation-delay: calc(320ms + var(--i) * 190ms); will-change: transform, opacity; } .moeda_inteira { opacity: 0; animation: surgir-moeda 620ms var(--curva) 2050ms forwards; } @keyframes assentar-setor { to { opacity: 1; transform: none; } } @keyframes surgir-moeda { to { opacity: 1; } } /* Seis fatias saindo do centro, cada uma entra da sua direção */ .moeda_setor.s1 { clip-path: polygon(50% 50%, 50% -50%, 136.6% 0%); --dx: 7%; --dy: -9%; --i: 0; } .moeda_setor.s2 { clip-path: polygon(50% 50%, 136.6% 0%, 136.6% 100%); --dx: 11%; --dy: 0; --i: 1; } .moeda_setor.s3 { clip-path: polygon(50% 50%, 136.6% 100%, 50% 150%); --dx: 7%; --dy: 9%; --i: 2; } .moeda_setor.s4 { clip-path: polygon(50% 50%, 50% 150%, -36.6% 100%); --dx: -7%; --dy: 9%; --i: 3; } .moeda_setor.s5 { clip-path: polygon(50% 50%, -36.6% 100%, -36.6% 0%); --dx: -11%; --dy: 0; --i: 4; } .moeda_setor.s6 { clip-path: polygon(50% 50%, -36.6% 0%, 50% -50%); --dx: -7%; --dy: -9%; --i: 5; } /* Terminada a montagem: libera as camadas e entrega o controle da luz ao scroll */ .moeda_palco.is-pronto .moeda_setor { will-change: auto; } .moeda_palco.is-pronto .moeda_luz { animation: none; opacity: 1; } @media (max-width: 991px) { .moeda_palco { width: min(30svh, 46vmin, 290px); } } /* Telas baixas: moeda e título encolhem para o conjunto caber sem apertar */ @media (max-height: 640px) { .moeda_palco { width: min(23svh, 42vmin, 200px); } .hero_chamada { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.1rem); } .hero_texto { gap: .85rem; } .hero_contain { padding-bottom: 6svh; } } @media (max-width: 767px) { .hero_wrap { height: 112svh; } .hero_track { height: 112vh; } .hero_trigger.is-1 { height: 35%; } .hero_trigger.is-2 { height: 65%; } .moeda_palco { width: min(28svh, 54vmin, 250px); } .moeda_luz { width: 200%; height: 200%; } .hero_chamada { max-width: 13ch; } } @media (prefers-reduced-motion: reduce) { .hero_wrap { height: 100svh; } .hero_trigger.is-1 { height: 100%; } .hero_trigger.is-2 { display: none; } } /* ---------- Como funciona ---------- */ /* A seção fica atrás do painel e é revelada conforme ele encolhe */ .how_wrap { position: relative; z-index: 1; margin-top: -14svh; } @media (max-width: 767px) { .how_wrap { margin-top: -30svh; } } .how_title_wrap { display: grid; gap: var(--space-15); max-width: 46ch; } .how_layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); width: 100%; } .card_wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .75rem .75rem 1.75rem; border-radius: var(--raio-bloco); background-color: color-mix(in srgb, var(--theme-text) 7%, transparent); } .card_visual { position: relative; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-15); border-radius: 12px; overflow: hidden; background-color: color-mix(in srgb, var(--theme-text) 10%, transparent); } .card_visual svg { width: 100%; height: 100%; display: block; } /* Vídeo no lugar da ilustração: mesma caixa quadrada, sem distorcer nem vazar */ .card_visual.is-video { background-color: #0E1116; } .card_visual.is-video .card_video { border-radius: inherit; } .card_video { width: 100%; height: 100%; display: block; object-fit: cover; background-color: #0E1116; } .card_index { margin-bottom: .5rem; color: color-mix(in srgb, var(--theme-text) 78%, transparent); } .card_title { margin-bottom: .6rem; } .card_wrap p { max-width: 30ch; margin-inline: auto; padding-inline: .5rem; } @media (max-width: 991px) { .how_layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .how_layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .card_visual { width: 100%; } } /* ---------- Seções de público ---------- */ .product_contain { display: flex; flex-direction: column; align-items: flex-start; } .product_header { display: flex; align-items: center; margin-bottom: var(--space-25); } .product_header_text_wrap { padding: .7rem 1rem; border-radius: var(--raio-campo) 0 0 var(--raio-campo); border: 1px solid var(--theme-linha); border-right: 0; } .product_link { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-1); padding: .7rem 1rem; border-radius: 0 var(--raio-campo) var(--raio-campo) 0; color: inherit; cursor: pointer; overflow: clip; background-color: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid var(--theme-linha); outline-offset: calc(var(--focus-width) * -1) !important; } .product_link_text { position: relative; z-index: 2; white-space: nowrap; } .product_title { max-width: 20ch; } .product_layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; margin-top: var(--space-3); } .product_layout.is-invertido .product_visual { order: -1; } .product_visual { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--raio-bloco); border: 1px solid var(--theme-linha); background-color: var(--theme-bg2); } .product_visual_anim { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .product_visual_anim svg { width: 100%; height: 100%; display: block; } .product_visual_anim picture { display: block; width: 100%; height: 100%; } .product_imagem { width: 100%; height: 100%; object-fit: cover; display: block; } .product_lifestyle_wrap { position: absolute; z-index: 2; width: 34%; aspect-ratio: 1; inset: auto -8% -8% auto; } .product_lifestyle_img { position: relative; z-index: 0; width: 100%; height: 100%; clip-path: var(--octagon); background: var(--grafite-eleva); } .product_lifestyle_img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .product_texto { display: grid; gap: var(--space-15); align-content: start; } .product_texto .u-text-large { max-width: 42ch; } .apoios { display: grid; gap: .75rem; } .apoio { display: grid; grid-template-columns: 14px 1fr; gap: .9rem; align-items: start; max-width: 62ch; } .apoio::before { content: ""; width: 14px; height: 2px; margin-top: .85em; background: var(--ouro); } .contraste { padding-left: 1.25rem; border-left: 2px solid var(--ouro); font-style: italic; max-width: 44ch; } .prazo { display: inline-block; padding: .05em .4em; border: 1px dashed color-mix(in srgb, var(--theme-accent) 65%, transparent); border-radius: 6px; color: var(--theme-text); font-style: normal; } .pendente { display: grid; gap: .75rem; max-width: 62ch; } .pendente li { max-width: 66ch; padding: .9rem 1.1rem; border: 1px dashed var(--papel-linha); border-radius: var(--raio-campo); color: var(--texto); background: #fff; } .aviso { max-width: 60ch; display: inline-flex; gap: .5rem; align-items: center; padding: .5rem .8rem; border-radius: var(--raio-campo); border: 1px solid var(--ouro); background: #fff; color: #6F5624; font-weight: 500; } @media (max-width: 860px) { .product_layout { grid-template-columns: 1fr; gap: var(--space-3); } .product_layout.is-invertido .product_visual { order: 0; } .product_lifestyle_wrap { width: 30%; inset: auto -4% -6% auto; } } /* ---------- Botões ---------- */ .button_main_wrap { position: relative; display: inline-block; border-radius: var(--raio-pilula); } .button_main_link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; } .button_main_element { position: relative; display: flex; align-items: center; justify-content: center; gap: .9rem; padding: .8rem .35rem .8rem 1.5rem; border-radius: inherit; } .button_main_text_wrap { position: relative; overflow: clip; } .button_main_text { position: relative; z-index: 1; } .button_main_icon { position: relative; z-index: 1; display: flex; flex: none; justify-content: center; align-items: center; width: var(--icon-size); aspect-ratio: 1; margin-block: -.5rem; clip-path: var(--octagon); background-color: var(--ouro); color: var(--grafite); } .button_main_icon_inner { position: relative; z-index: 1; width: 40%; } .button_main_icon_inner svg { width: 100%; height: auto; } .button_main_icon_base { z-index: 0; background-color: var(--ouro-claro); clip-path: var(--octagon); will-change: transform; } .button_main_base { z-index: -1; border-radius: inherit; background-color: var(--grafite); } .button_main_wrap { color: var(--texto-claro); } .u-theme-dark .button_main_base, .footer_wrap .button_main_base { background-color: var(--ouro); } .u-theme-dark .button_main_wrap, .footer_wrap .button_main_wrap { color: var(--grafite); } .u-theme-dark .button_main_icon, .footer_wrap .button_main_icon { background-color: var(--grafite); color: var(--ouro); } .u-theme-dark .button_main_icon_base, .footer_wrap .button_main_icon_base { background-color: var(--grafite-eleva); } .button_arrow_wrap, .button_close_wrap { position: relative; display: inline-block; } .button_arrow_element, .button_close_element { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; clip-path: var(--octagon); background-color: var(--theme-text); color: var(--theme-bg); } .button_arrow_element { width: var(--icon-size); } .button_close_element { width: 2.5rem; } .button_arrow_icon { position: relative; z-index: 1; width: 40%; aspect-ratio: 1; } .button_close_icon { position: relative; z-index: 1; width: 33%; aspect-ratio: 1; } .button_arrow_base { z-index: 0; clip-path: var(--octagon); background-color: var(--theme-text); } .u-button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); } /* ---------- Símbolos ---------- */ .simbolo { width: 34px; height: 34px; color: var(--theme-accent); } .u-theme-dark .simbolo, .footer_wrap .simbolo { color: var(--ouro); } .simbolo svg { width: 100%; height: 100%; display: block; } /* Na conversão o símbolo é o próprio leão da marca */ .simbolo.is-leao { width: 40px; height: 46px; } .simbolo.is-leao img { width: 100%; height: 100%; object-fit: contain; } /* ---------- Formulário ---------- */ .form_wrap { width: 100%; } .alternador_rotulo { margin: 0 0 .5rem; font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); } .alternador { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 4px; border: 1px solid var(--ouro); border-radius: var(--raio-campo); background: var(--papel); margin-bottom: var(--space-15); } .alternador button { min-height: 3.1rem; padding: .5rem 1rem; border-radius: 7px; font-weight: 600; font-size: 1rem; color: var(--texto-suave); transition: background-color .18s var(--curva), color .18s var(--curva); } .alternador button:hover { color: var(--texto); } .alternador button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; } .alternador button[aria-pressed="true"] { background: var(--grafite); color: var(--texto-claro); } .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } .campo { display: grid; gap: .4rem; } .campo.largo { grid-column: 1 / -1; } .campo label { font-weight: 500; font-size: .95rem; } .campo input, .campo select, .campo textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid var(--papel-linha); border-radius: var(--raio-campo); background: #fff; transition: border-color .18s var(--curva); } .campo textarea { min-height: 6rem; resize: vertical; } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--grafite); outline: none; } .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: var(--focus-width) solid var(--ouro); outline-offset: 3px; } .campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--erro); } .campo .erro { display: none; font-size: .85rem; color: var(--erro); } /* confirmação de quem indicou, abaixo do campo de código */ .campo .indicacao { margin: .35rem 0 0; font-size: .85rem; color: var(--ouro-texto); } .campo .indicacao strong { font-weight: 600; } .campo .indicacao button { margin-left: .5rem; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--texto-suave); text-decoration: underline; cursor: pointer; } .campo_codigo[readonly] { background: var(--papel-alt); cursor: default; } /* isca anti-robô: fora da tela, mas não display:none — robô ignora o que está escondido por display, e precisamos que ele encontre e preencha */ .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .campo.invalido .erro { display: block; } .grupo { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } .grupo.ativo { display: grid; } .consentimento { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: .95rem; } .consentimento input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--grafite); } .consentimento.invalido { color: var(--erro); } .consentimento a { color: var(--ouro-texto); text-decoration: underline; text-underline-offset: 3px; } .form-acoes { grid-column: 1 / -1; display: grid; gap: .75rem; justify-items: start; margin-top: .5rem; } .form-acoes .u-text-small { color: var(--texto-suave); } .form-erro { display: none; grid-column: 1 / -1; padding: .9rem 1.1rem; border: 1px solid var(--erro); border-radius: var(--raio-campo); color: var(--erro); } .form-erro.visivel { display: block; } @media (max-width: 600px) { .campos, .grupo { grid-template-columns: 1fr; } } .confirmacao { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 1.5rem 0; } .protocolo { display: inline-flex; align-items: center; gap: .75rem; padding: .6rem .6rem .6rem 1rem; border: 1px solid var(--papel-linha); border-radius: var(--raio-campo); background: var(--papel); font-weight: 500; font-size: 1.15rem; letter-spacing: .04em; } .protocolo button { min-height: 2.25rem; padding: .35rem .8rem; border-radius: 7px; background: var(--grafite); color: var(--texto-claro); font-size: .85rem; font-weight: 500; } /* ---------- Modal ---------- */ .modal_dialog { position: fixed; inset: 0 0 auto; z-index: 1010; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: clip; } .modal_dialog::backdrop { opacity: 0; } .modal_inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; width: 100%; height: 100dvh; } .modal_backdrop { position: absolute; inset: 0 0 auto; width: 100%; height: 100vh; height: 100dvh; background-color: #000; opacity: .4; } .modal_content_wrap { position: relative; width: 100%; max-width: 40rem; height: 100%; background-color: var(--papel); color: var(--texto); } .modal_scroll { position: relative; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-2); overflow: hidden auto; } .modal_close { position: sticky; top: 0; z-index: 2; align-self: flex-end; } .modal_content { display: flex; flex-direction: column; flex: 1; width: 100%; } .modal_titulo { margin-bottom: .75rem; } .modal_apoio { margin-bottom: var(--space-2); color: var(--texto-suave); max-width: 48ch; } /* ---------- Rodapé ---------- */ .footer_wrap { position: relative; overflow: clip; background-color: var(--grafite); color: var(--texto-claro); } .footer_contain { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4); width: 100%; min-height: 100svh; padding: var(--section-large) var(--site-margin) var(--site-margin); } /* Marca d'água: o leão aparece uma única vez, cortado pela borda */ .footer_marca { position: absolute; right: -10%; bottom: -8%; z-index: 1; width: min(44vw, 560px); aspect-ratio: 1512 / 1724; background: url("../assets/leao.png") center / contain no-repeat; background-image: image-set(url("../assets/leao.webp") type("image/webp"), url("../assets/leao.png") type("image/png")); opacity: .05; pointer-events: none; } .footer_layout { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); flex: 1; pointer-events: none; } .footer_nav { grid-column: span 7; } .footer_group_list { display: flex; flex-direction: column; align-items: flex-start; } .footer_group_item { display: flex; pointer-events: auto; } .footer_link_wrap { display: block; padding-block: .35rem; transition: opacity .15s var(--curva); } .footer_group_list:hover .footer_link_wrap:not(:hover) { opacity: .45; } .footer_content { grid-column: span 5; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); pointer-events: auto; } .footer_chamada { max-width: 26ch; } .footer_dados { display: grid; gap: .35rem; color: var(--texto-claro-2); } .footer_bottom_wrap { position: relative; z-index: 3; } .footer_bottom_content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem var(--space-15); margin-bottom: var(--space-2); } .footer_bottom_link_list { display: flex; flex-wrap: wrap; gap: var(--space-1); } .footer_bottom_link { color: var(--texto-claro-2); transition: color .2s var(--curva); } .footer_bottom_link:hover { color: var(--texto-claro); } .footer_bottom_text { color: var(--texto-claro-2); } @media (max-width: 991px) { .footer_contain { min-height: auto; padding-top: var(--section-main); } .footer_layout { display: flex; flex-direction: column; gap: var(--space-3); } } @media (max-width: 479px) { .footer_bottom_content { flex-direction: column; align-items: flex-start; } } /* ---------- Movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Perguntas frequentes ---------- */ .perguntas { display: grid; border-top: 1px solid var(--theme-linha); max-width: 860px; } .pergunta { border-bottom: 1px solid var(--theme-linha); } .pergunta-botao { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.15rem 0; text-align: left; font-weight: 500; font-size: 1.1rem; line-height: 1.35; } .pergunta-botao svg { flex: none; width: 18px; height: 18px; color: var(--theme-accent); transition: transform .18s var(--curva); } .pergunta-botao[aria-expanded="true"] svg { transform: rotate(45deg); } .pergunta-conteudo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s var(--curva); } .pergunta-conteudo > div { overflow: hidden; } .pergunta-conteudo p { padding-bottom: 1.25rem; max-width: 62ch; color: color-mix(in srgb, var(--theme-text) 78%, transparent); } .pergunta.aberta .pergunta-conteudo { grid-template-rows: 1fr; } /* ---------- Cartão do formulário ---------- */ .cartao_form { background: #fff; color: var(--texto); border-radius: var(--raio-bloco); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 18px 48px rgba(40, 47, 56, .10); } .cartao_form .button_main_wrap { color: var(--texto-claro); } .cartao_form .button_main_base { background-color: var(--grafite); } .cartao_form .button_main_icon { background-color: var(--ouro); color: var(--grafite); } .cartao_form .button_main_icon_base { background-color: var(--ouro-claro); } .botao_enviar { display: inline-block; } .botao_enviar[disabled] { opacity: .6; cursor: default; } .titulo_perguntas { margin-bottom: var(--space-25); } .product_texto.is-largo { max-width: 100%; } .card_text { width: 100%; } /* ---------- Botão de pré-cadastro ---------- */ .botao_cadastro { position: relative; display: inline-flex; align-items: center; gap: 1rem; padding: .85rem .5rem .85rem 1.6rem; border-radius: var(--raio-pilula); background: var(--theme-text); color: var(--theme-bg); font-size: var(--fs-h5); font-weight: 500; letter-spacing: .01em; line-height: 1.2; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .3s var(--curva), box-shadow .3s var(--curva); box-shadow: 0 10px 26px -14px rgba(40, 47, 56, .55); } /* brilho dourado que atravessa o botão no hover */ .botao_cadastro::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-115%); background: linear-gradient(100deg, transparent 0%, rgba(186, 156, 100, .55) 45%, transparent 100%); transition: transform .75s var(--curva); } .botao_cadastro_texto { position: relative; z-index: 1; } .botao_cadastro_icone { position: relative; z-index: 1; display: flex; flex: none; justify-content: center; align-items: center; width: var(--icon-size); aspect-ratio: 1; margin-block: -.4rem; clip-path: var(--octagon); background: var(--ouro); color: var(--grafite); transition: transform .45s var(--curva), background-color .3s var(--curva); } .botao_cadastro_icone svg { width: 42%; height: auto; } @media (hover: hover) and (pointer: fine) { .botao_cadastro:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(40, 47, 56, .6); } .botao_cadastro:hover::after { transform: translateX(115%); } .botao_cadastro:hover .botao_cadastro_icone { transform: translateX(4px); background: var(--ouro-claro); } } .botao_cadastro:focus-visible { outline: var(--focus-width) solid var(--ouro); outline-offset: 4px; } /* versão maior, para o fecho da página */ .botao_cadastro.is-destaque { padding: 1.05rem .6rem 1.05rem 2rem; font-size: var(--fs-main); gap: 1.25rem; } .botao_cadastro.is-destaque .botao_cadastro_icone { width: calc(var(--icon-size) * 1.16); } .chamada_final_contain { display: grid; gap: var(--space-15); justify-items: start; } .chamada_final .product_title { max-width: 18ch; } .chamada_final_texto { max-width: 52ch; } /* ---------- Janela do formulário ---------- */ .modal_dialog { width: 100%; max-width: none; max-height: none; height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; overflow: clip; } .modal_dialog::backdrop { background: rgba(20, 24, 30, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal_inner { position: relative; display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100dvh; } .modal_fundo { position: absolute; inset: 0; } .modal_painel { position: relative; width: min(100%, 40rem); max-height: 100dvh; margin-left: auto; background: var(--papel); color: var(--texto); box-shadow: -24px 0 60px -30px rgba(20, 24, 30, .5); } .modal_rolagem { height: 100dvh; padding: clamp(1.25rem, 4vw, 2.25rem); overflow: hidden auto; overscroll-behavior: contain; } .modal_topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-2); } .modal_titulo { margin-bottom: .6rem; } .modal_apoio { max-width: 44ch; color: var(--texto-suave); } .modal_fechar { flex: none; display: flex; justify-content: center; align-items: center; width: 2.75rem; aspect-ratio: 1; clip-path: var(--octagon); background: color-mix(in srgb, var(--texto) 10%, transparent); color: var(--texto); transition: background-color .2s var(--curva); } .modal_fechar svg { width: 40%; height: auto; } .modal_fechar:hover { background: color-mix(in srgb, var(--texto) 18%, transparent); } .modal_dialog .cartao_form { padding: 0; background: transparent; box-shadow: none; } @media (max-width: 640px) { .modal_painel { width: 100%; margin-left: 0; } } /* Respiro acima de cada botão, para nunca encostar no texto anterior */ .u-button-group { margin-top: var(--space-25); } .card_wrap + .u-button-group, .how_layout + .u-button-group { margin-top: var(--space-3); } .apoios + .u-button-group { margin-top: var(--space-2); } .chamada_final_contain .u-button-group { margin-top: var(--space-1); } /* ---------- Conclusão do pré-cadastro ---------- */ .sucesso { position: relative; display: grid; min-height: min(78dvh, 620px); border-radius: var(--raio-bloco); background: var(--grafite); overflow: hidden; } .sucesso_fundo { position: absolute; inset: 0; z-index: 0; } .sucesso_orbitas { position: absolute; inset: 0; width: 100%; height: 100%; } .sucesso_orbitas .orbita_linha { fill: none; stroke: #BA9C64; stroke-width: 1; opacity: .08; } .sucesso_orbitas .eletron { fill: #BA9C64; opacity: .45; } .sucesso_orbitas .giro { transform-origin: 300px 300px; } @media (prefers-reduced-motion: no-preference) { .sucesso_orbitas .giro { animation: orbitar linear infinite; } .sucesso_orbitas .g1 { animation-duration: 52s; } .sucesso_orbitas .g2 { animation-duration: 70s; animation-direction: reverse; } .sucesso_orbitas .g3 { animation-duration: 38s; } } /* as moedas caem atrás do texto e se acumulam no rodapé do painel */ .sucesso_moedas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; touch-action: none; } .sucesso_conteudo { position: relative; z-index: 2; display: grid; gap: 1rem; justify-items: center; align-content: start; padding: clamp(2rem, 7vw, 3rem) clamp(1.25rem, 5vw, 2.5rem) 0; text-align: center; color: var(--texto-claro); pointer-events: none; } .sucesso_selo { width: 68px; height: 68px; display: grid; place-items: center; } .sucesso_selo img { width: 100%; height: auto; } .sucesso_titulo { color: #fff; } .sucesso_texto { max-width: 26ch; color: #C5CAD1; } .sucesso .protocolo { pointer-events: auto; margin-top: .5rem; border-color: rgba(186, 156, 100, .45); background: rgba(255, 255, 255, .06); color: var(--texto-claro); } .sucesso .protocolo button { background: var(--ouro); color: var(--grafite); } .sucesso_dica { color: #9AA2AC; } .sucesso_sensor { pointer-events: auto; margin-top: .25rem; padding: .5rem 1rem; border-radius: var(--raio-pilula); border: 1px solid rgba(186, 156, 100, .5); background: transparent; color: var(--ouro); font-size: var(--fs-small); font-weight: 500; } .sucesso_sensor:hover { background: rgba(186, 156, 100, .12); } /* ---------- Conclusão em tela cheia ---------- */ .modal_dialog.is-concluido .modal_painel { width: 100%; max-width: none; height: 100dvh; margin: 0; background: var(--grafite); box-shadow: none; } .modal_dialog.is-concluido .modal_rolagem { height: 100dvh; padding: 0; overflow: hidden; } .modal_dialog.is-concluido .modal_topo { position: absolute; top: 0; right: 0; z-index: 3; margin: 0; padding: clamp(.9rem, 3vw, 1.4rem); } .modal_dialog.is-concluido .modal_fechar { background: rgba(255, 255, 255, .12); color: var(--texto-claro); } .modal_dialog.is-concluido .modal_fechar:hover { background: rgba(255, 255, 255, .2); } .modal_dialog.is-concluido .sucesso { min-height: 100dvh; height: 100dvh; border-radius: 0; } /* o conteúdo fica centrado na metade de cima, e as moedas se acumulam embaixo */ .modal_dialog.is-concluido .sucesso_conteudo { align-content: center; gap: clamp(.75rem, 2.5vw, 1.25rem); padding: clamp(1.5rem, 6vh, 3rem) clamp(1.25rem, 6vw, 2.5rem) 0; height: 56dvh; } .modal_dialog.is-concluido .sucesso_selo { width: clamp(52px, 12vh, 84px); height: auto; } @media (max-height: 620px) { .modal_dialog.is-concluido .sucesso_conteudo { height: 52dvh; } .modal_dialog.is-concluido .sucesso_selo { width: 46px; } }