/* ============================================================ Hinov Capital & Gestão — site institucional Folha de estilo única. Edite as variáveis abaixo para ajustar cores; o resto do arquivo é organizado por seção. ============================================================ */ /* ---- Reset mínimo ---- */ * { box-sizing: border-box; } html, body { margin: 0; } html { scroll-behavior: smooth; } a { color: inherit; text-decoration: none; } img, svg { display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } /* ============================================================ TEMAS — troque os valores para recolorir o site inteiro. O tema padrão é "escuro" (definido em :root). O atributo data-theme="claro" no aplica o tema claro. ============================================================ */ :root, html[data-theme="escuro"] { --accent: #5b93c9; --page: #050607; --ink: #eef1f4; /* texto corrido */ --head: #ffffff; /* títulos */ --muted-1: #9aa3ac; --muted-2: #828b94; --muted-3: #79828b; --faint: #5c656d; --label: #c3cad1; --card: #080a0c; /* fundo de cartões */ --row-hover: #0c0f12; --grid: #0e1216; /* linhas da grade de fundo */ --bd-1: #2a3138; /* borda forte */ --bd-2: #1c2227; /* borda média */ --bd-3: #15191d; /* borda/divisor sutil */ --btn-bg: #ffffff; /* botão primário: fundo */ --btn-fg: #000000; /* botão primário: texto */ --glow: rgba(91,147,201,0.10); --glow-2: rgba(91,147,201,0.07); --header-fade: rgba(5,6,7,0.82); --header-fade0: rgba(5,6,7,0); } html[data-theme="claro"] { --accent: #163a52; --page: #e9ebee; --ink: #15191e; --head: #0a0d12; --muted-1: #565d66; --muted-2: #6b7280; --muted-3: #6b7280; --faint: #8b929a; --label: #454c54; --card: #ffffff; --row-hover: #dfe2e5; --grid: #dadde1; --bd-1: #c5cace; --bd-2: #d7dbdf; --bd-3: #e1e4e7; --btn-bg: #163a52; --btn-fg: #ffffff; --glow: rgba(22,58,82,0.06); --glow-2: rgba(22,58,82,0.05); --header-fade: rgba(233,235,238,0.86); --header-fade0: rgba(233,235,238,0); } /* Durante a troca de tema desligamos as transições por 1 frame (evita o "fantasma" de cor em propriedades ligadas a variável). */ html.theme-switching * { transition: none !important; } /* ---- Base ---- */ body { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: var(--page); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .mono { font-family: 'IBM Plex Mono', monospace; } ::selection { background: var(--accent); color: #fff; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 44px; } /* Animação decorativa do anel */ @keyframes hnv-spin { to { transform: rotate(360deg); } } /* ============================================================ CABEÇALHO ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: linear-gradient(to bottom, var(--header-fade), var(--header-fade0)); backdrop-filter: blur(2px); } .site-header .wrap { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 13px; } .logo .word { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--head); } .nav-area { display: flex; align-items: center; gap: 30px; } .nav { display: flex; align-items: center; gap: 30px; } .nav a { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-3); white-space: nowrap; transition: color .2s; } .nav a:hover { color: var(--head); } .nav a.active { color: var(--head); } .theme-toggle { display: flex; align-items: center; margin-left: 8px; border: 1px solid var(--bd-1); border-radius: 2px; overflow: hidden; } .theme-toggle button { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px; color: var(--muted-3); background: transparent; } .theme-toggle button.active { color: #fff; background: var(--accent); } /* ============================================================ PÁGINAS (troca via JS) ============================================================ */ .page { display: none; } .page.active { display: block; } .page-pad { padding: 152px 44px 120px; } /* respiro do cabeçalho fixo */ .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .page-title { margin: 26px 0 0; font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase; color: var(--head); line-height: 1.02; font-size: clamp(34px, 5vw, 62px); max-width: 880px; } .lead { margin: 28px 0 0; font-size: 17px; line-height: 1.65; color: var(--muted-1); max-width: 600px; } /* ============================================================ HERO (Início) ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--bd-3); } .hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 70% 18%, var(--glow), var(--header-fade0) 60%); } .hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(8.3333% - 1px), var(--grid) calc(8.3333% - 1px), var(--grid) 8.3333%); } .hero-ring { position: absolute; right: -90px; top: 50%; transform: translateY(-50%); pointer-events: none; } #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000 28%, rgba(0,0,0,0.5) 50%, transparent 72%); mask-image: linear-gradient(to left, #000 28%, rgba(0,0,0,0.5) 50%, transparent 72%); } .hero-ring svg { opacity: 0.16; animation: hnv-spin 64s linear infinite; transform-origin: 50% 50%; } .hero-body { position: relative; max-width: 1320px; margin: 0 auto; width: 100%; padding: 128px 44px 64px; flex: 1; display: flex; flex-direction: column; justify-content: center; } .eyebrow.dot { display: inline-flex; align-items: center; gap: 10px; } .eyebrow.dot::before { content: ""; width: 6px; height: 6px; background: var(--accent); display: inline-block; } .hero-body h1 { margin: 30px 0 0; font-weight: 600; letter-spacing: -0.035em; text-transform: uppercase; color: var(--head); line-height: 0.98; font-size: clamp(40px, 6.4vw, 92px); max-width: 1020px; } .hero-body p { margin: 34px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted-1); max-width: 540px; } .btns { margin: 46px 0 0; display: flex; gap: 16px; flex-wrap: wrap; } .btn { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 28px; white-space: nowrap; } .btn-primary { color: var(--btn-fg); background: var(--btn-bg); } .btn-primary:hover { background: var(--accent); color: #fff; } .btn-ghost { color: var(--head); border: 1px solid var(--bd-1); } .btn-ghost:hover { border-color: var(--head); } /* Barra de indicadores ao pé do hero */ .statbar { position: relative; border-top: 1px solid var(--bd-3); } .statbar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 44px; } .stat { padding: 20px 24px; border-right: 1px solid var(--bd-3); } .stat:last-child { border-right: none; } .stat .k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .stat .v { font-family: 'IBM Plex Mono', monospace; font-size: 14px; margin-top: 7px; color: var(--ink); } /* ============================================================ SEÇÕES GENÉRICAS ============================================================ */ .section { position: relative; border-bottom: 1px solid var(--bd-3); } .section .wrap { padding: 120px 44px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 52px; } .section-head.tall { margin-bottom: 64px; } .tag { display: flex; align-items: baseline; gap: 18px; } .tag .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--accent); } .tag h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); } .more { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--muted-3); transition: color .2s; } .more:hover { color: var(--head); } /* Passos (4 colunas) */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bd-2); } .step { padding: 32px 24px 38px; border-right: 1px solid var(--bd-2); min-height: 210px; } .step:last-child { border-right: none; } .step .n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); } .step h3 { margin: 46px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--head); } .step p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-2); } /* Manifesto / princípio */ .principle { position: relative; border-bottom: 1px solid var(--bd-3); overflow: hidden; } .principle .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 120% at 20% 50%, var(--glow-2), var(--header-fade0) 55%); } .principle .wrap { position: relative; padding: 128px 44px; display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; } .principle p { margin: 24px 0 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); max-width: 820px; } /* ============================================================ TABELAS (grades) ============================================================ */ .table { border-top: 1px solid var(--bd-1); } .thead, .trow { display: grid; align-items: center; } .thead { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding: 14px 0; border-bottom: 1px solid var(--bd-2); } .trow { width: 100%; text-align: left; padding: 20px 14px; margin: 0 -14px; border-bottom: 1px solid var(--bd-3); transition: background .18s; } a.trow:hover, button.trow:hover { background: var(--row-hover); } .trow .id { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); } .trow .name { font-size: 16px; font-weight: 500; color: var(--head); } .trow .mut { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted-2); } /* Tabela de fundos da home (4 colunas) */ .cols-funds-home { grid-template-columns: 64px 1.5fr 1fr 1.4fr; } /* Tabela de fundos da página Fundos (5 colunas) */ .cols-funds { grid-template-columns: 56px 1.4fr 0.9fr 1.3fr 1.4fr; } .trow.cols-funds { padding: 24px 14px; } .trow .name .big { font-size: 17px; font-weight: 600; color: var(--head); } .trow .name .seg { font-size: 12.5px; color: var(--faint); margin-top: 4px; } /* ============================================================ CONFORMIDADE / PAINÉIS / CHAVE-VALOR ============================================================ */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .duo.narrow { gap: 24px; } .conf-head p { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; font-weight: 500; letter-spacing: -0.02em; color: var(--head); max-width: 440px; } .kv-list { border-top: 1px solid var(--bd-1); } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--bd-2); } .kv:last-child { border-bottom: none; } .kv .k { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted-3); } .kv .k.plain { font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; color: var(--muted-2); } .kv .v { font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-align: right; color: var(--ink); } .panel { border: 1px solid var(--bd-2); background: var(--card); padding: 36px; } .panel .panel-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .panel .kv-list { margin-top: 24px; border-top: none; } .panel .kv { border-bottom: 1px solid var(--bd-2); } .panel .kv:last-child { border-bottom: none; } .note { font-size: 13px; line-height: 1.6; color: var(--faint); max-width: 760px; } .note.mt { margin-top: 24px; } /* Documentos por fundo (chips) */ .chips { margin-top: 52px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .chips .chips-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-right: 8px; } .chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; border: 1px solid var(--bd-1); padding: 10px 18px; color: var(--ink); transition: border-color .2s; } .chip:hover { border-color: var(--head); } /* Listas de políticas / documentos (links com PDF) */ .doc-row { display: grid; align-items: center; padding: 22px 14px; margin: 0 -14px; border-bottom: 1px solid var(--bd-3); transition: background .18s; } .doc-row:hover { background: var(--row-hover); } .doc-row.policy { grid-template-columns: 90px 1fr 100px 60px; } .doc-row.simple { display: flex; justify-content: space-between; padding: 20px 14px; } .doc-row .code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); } .doc-row .pol { font-size: 16px; font-weight: 500; color: var(--ink); } .doc-row .ver { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint); } .doc-row .pdf { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted-2); text-align: right; } .subhead { margin: 0 0 26px; font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); } .subhead.gap { margin-top: 56px; } .block-gap { margin-top: 88px; } .block-gap-lg { margin-top: 80px; } /* Estrutura (2 diretorias) */ .org { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--bd-2); } .org .cell { padding: 30px 24px 0; border-right: 1px solid var(--bd-2); min-height: 220px; } .org .cell:last-child { border-right: none; } .org .code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--accent); } .org .role { margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--head); } .org .people { margin-top: 28px; border-top: 1px solid var(--bd-3); } .org .person { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted-2); padding: 13px 0; border-bottom: 1px solid var(--bd-3); } /* Parâmetros monitorados (4 quadros) */ .params { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd-2); border: 1px solid var(--bd-2); } .param { background: var(--card); padding: 26px; } .param .t { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); } .param .d { font-size: 13px; color: var(--muted-3); margin-top: 10px; } /* Contato */ .contact-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; } .contact-addr { font-size: 17px; line-height: 1.6; color: var(--head); } .contact-addr span { color: var(--muted-2); } /* utilidades de coluna interna */ .col-r { text-align: right; } /* ============================================================ RODAPÉ — sempre escuro, nos dois temas ============================================================ */ .site-footer { background: #000; border-top: 1px solid #15191d; } .site-footer .wrap { padding: 80px 44px 44px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; align-items: start; } .footer-brand .logo .word { color: #fff; } .footer-brand p { margin: 22px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.8; color: #5c656d; max-width: 250px; } .footer-col .h { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #454d54; } .footer-col .links { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .footer-col .links a { font-size: 13px; color: #9aa3ac; transition: color .2s; } .footer-col .links a:hover { color: #fff; } .footer-col .info { margin-top: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.9; color: #9aa3ac; } .footer-legal { margin-top: 60px; padding-top: 28px; border-top: 1px solid #15191d; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-legal p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #454d54; max-width: 740px; } .footer-legal .copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #454d54; } .footer-seal-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; } .anbima-seal { width: 88px; opacity: 0.65; filter: grayscale(15%); transition: opacity .25s, filter .25s; } .anbima-seal:hover { opacity: 1; filter: none; } .hero-body .titulo-principal { font-size: clamp(38px, 5.8vw, 84px); } /* ============================================================ RESPONSIVO (ajuste simples para telas estreitas) ============================================================ */ @media (max-width: 860px) { .nav { display: none; } /* em telas estreitas resta o alternador de tema */ } @media (max-width: 980px) { .duo, .footer-grid { grid-template-columns: 1fr; gap: 40px; } .steps, .params, .org { grid-template-columns: 1fr 1fr; } .principle .wrap { grid-template-columns: 1fr; } } @media (max-width: 560px) { .wrap, .hero-body, .section .wrap, .page-pad { padding-left: 22px; padding-right: 22px; } .statbar .wrap { grid-template-columns: 1fr 1fr; } .steps, .params, .org { grid-template-columns: 1fr; } .org .cell { border-right: none; border-bottom: 1px solid var(--bd-2); } .org .cell:last-child { border-bottom: none; } }