/* ============================================================ VOLKY — VERTENTES & PRODUTOS (Sistema, entregáveis 1–3) Deriva de brand.css (Master Brand aprovado). Carregar DEPOIS. A coerência vive na FORMA + TIPO (mesma espinha, mesmo mark). A diferenciação vive no MATERIAL — mesma marca, três matérias: ENGENHARIA = Aço Corten (o ferro que o tempo prova) TECNOLOGIA = luz/fluxo cyan (a matéria virando informação) CIÊNCIA = ouro mineral (o nobre revelado na matéria) Atributo em : data-mode = dark | light ============================================================ */ /* ---------- material por vertente (escopo local) ---------- */ .v-eng { --va: #B5683F; --va-strong: #CE8A5E; --va-deep: #7A4530; --va-ink: #0A0C0F; --va-tint: color-mix(in oklab, #B5683F 14%, transparent); } .v-tec { --va: #4FC9C4; --va-strong: #8FF2EC; --va-deep: #2C9A95; --va-ink: #04201F; --va-tint: color-mix(in oklab, #4FC9C4 14%, transparent); } .v-cie { --va: #6D28D9; --va-strong: #9D4EFF; --va-deep: #3F1078; --va-ink: #0B0618; --va-tint: color-mix(in oklab, #6D28D9 16%, transparent); } /* ---------- PADRÃO DE MARCA ---------- A espinha (V) + os cubos-matéria são branco puro sobre fundo escuro, e cinza-escuro 90% (#1A1A1A) sobre fundo claro — via currentColor. A cor do MATERIAL (corten/cyan/violeta) é fixa nos cubos superiores. */ svg[viewBox="0 0 100 100"] { color: #FFFFFF; } .canvas--light svg[viewBox="0 0 100 100"], .on-paper svg[viewBox="0 0 100 100"], [data-mode="light"] svg[viewBox="0 0 100 100"] { color: #1A1A1A; } /* ---------- HERO ---------- */ .vhero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--s9) var(--s8); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .vhero__grid { position: absolute; inset: 0; opacity: 0.5; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 75%); pointer-events: none; } .vhero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; width: 100%; } .vhero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.02em; line-height: 0.98; } .vhero__lead { max-width: 600px; margin-top: var(--s6); font-size: var(--t-lg); line-height: 1.45; color: var(--text-2); font-weight: 300; } /* ---------- ESPECTRO matéria → energia ---------- */ .spectrum { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .spectrum__cell { padding: var(--s7) var(--s6); border-right: 1px solid var(--line); position: relative; min-height: 360px; display: flex; flex-direction: column; } .spectrum__cell:last-child { border-right: 0; } .spectrum__cell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--va); } .spectrum__state { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--va); } .spectrum__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); letter-spacing: 0.02em; margin: var(--s3) 0 var(--s2); } .spectrum__phys { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .spectrum__body { color: var(--text-2); font-size: var(--t-sm); margin-top: var(--s5); } .spectrum__mark { height: 132px; display: flex; align-items: center; justify-content: center; margin: var(--s4) 0; } .spectrum__gold { margin-top: auto; padding-top: var(--s5); } .spectrum__swatches { display: flex; gap: 6px; } .spectrum__swatches i { height: 22px; flex: 1; border-radius: 2px; } .spectrum__goldlbl { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: var(--s2); display: block; } @media (max-width: 920px){ .spectrum { grid-template-columns: 1fr; } .spectrum__cell { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; } } /* três matérias lado a lado (substitui a faixa de gradiente único) */ .matband { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } .matband__cell { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .matband__chip { height: 72px; display: flex; } .matband__chip i { flex: 1; } .matband__lbl { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; background: var(--surface); } .matband__lbl b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); } .matband__lbl span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } @media (max-width: 760px){ .matband { grid-template-columns: 1fr; } } /* ---------- ENDOSSO lockup por vertente ---------- */ .vlock { display: flex; flex-direction: column; } .vlock__canvas { display: grid; place-items: center; min-height: 220px; padding: var(--s7); position: relative; background: #0A0C0F; } .vlock__canvas--grid { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 32px 32px; } .endorse--vert { display: flex; align-items: stretch; gap: var(--s4); color: #E9ECEF; } .endorse--vert .vmark { width: 52px; height: 52px; flex: none; } .endorse--vert .e-txt { display: flex; flex-direction: column; justify-content: center; gap: 4px; border-left: 1px solid var(--va); padding-left: var(--s4); } .endorse--vert .e-master { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.2em; font-size: 1.2rem; line-height: 1; } .endorse--vert .e-div { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--va); } /* ---------- ZONA-MARK (mark explodido, deliverable 03/coerência) ---------- */ .zonemark { position: relative; background: #0A0C0F; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s8); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s7); align-items: center; } .zonemark__svg { display: grid; place-items: center; } .zonemark__legend { display: flex; flex-direction: column; gap: var(--s5); } .zonemark__row { display: grid; grid-template-columns: 16px 1fr; gap: var(--s4); align-items: start; } .zonemark__dot { width: 12px; height: 12px; margin-top: 5px; } .zonemark__row h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: 0.01em; } .zonemark__row .st { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; } .zonemark__row p { font-size: var(--t-sm); color: var(--text-2); margin-top: 4px; } @media (max-width: 880px){ .zonemark { grid-template-columns: 1fr; } } /* ---------- DERIVAÇÃO (herda / diverge) ---------- */ .derive { width: 100%; border-collapse: collapse; } .derive th { text-align: left; padding: var(--s4); border-bottom: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 500; vertical-align: bottom; } .derive td { padding: var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--t-sm); color: var(--text-2); } .derive td.attr { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text); letter-spacing: 0.02em; white-space: nowrap; } .derive .col-eng { color: #CE8A5E; } .derive .col-tec { color: #8FF2EC; } .derive .col-cie { color: #9D4EFF; } .derive tr td:first-child { border-right: 1px solid var(--line); } /* chip de estado */ .statechip { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--va); color: var(--va); } .statechip i { width: 7px; height: 7px; background: var(--va); } /* ---------- card de vertente (cabeçalho de seção colorido) ---------- */ .vcard { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .vcard__top { padding: var(--s6); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s5); background: var(--surface); } .vcard__mark { width: 64px; height: 64px; flex: none; } .vcard__meta h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); letter-spacing: 0.04em; } .vcard__meta .sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; } .vcard__body { padding: var(--s6); } /* régua de derivação visual */ .inherit-row { display: flex; flex-wrap: wrap; gap: var(--s2); } .inherit-row .pill { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; border: 1px solid var(--line-2); color: var(--text-2); padding: 5px 10px; border-radius: var(--r-pill); } .inherit-row .pill--va { border-color: var(--va); color: var(--va); }