/* ============================================================ VOLKY — PÁGINAS COMERCIAIS (públicas, por nó) Bio → Autor · Holding · Engenharia · Tecnologia · Ciência. Herda brand.css (tokens, marks, reveal) + dossie.css (.dsec, .vband, .proof). Adiciona: theming por matéria, topbar-switcher, hero comercial, chips de status (5 estados), cards de portfólio roteáveis/status-only e faixa de CTA. ============================================================ */ /* ---------- THEMING POR MATÉRIA (page scope, em ) ---------- */ /* Ouro = Autor/Holding (institucional). Cada vertente na sua matéria. */ [data-material="gold"] { --vc:var(--accent); --vcs:var(--accent-strong); --vc-line:var(--accent-line); --btn-ink:#0A0C0F; } [data-material="corten"] { --accent:#B5683F; --accent-strong:#CE8A5E; --accent-deep:#8A4E33; --accent-tint:color-mix(in oklab,#B5683F 14%,transparent); --accent-line:color-mix(in oklab,#B5683F 40%,transparent); --vc:#B5683F; --vcs:#CE8A5E; --vc-line:color-mix(in oklab,#B5683F 40%,transparent); --btn-ink:#140A05; } [data-material="cyan"] { --accent:#4FC9C4; --accent-strong:#8FF2EC; --accent-deep:#2C9A95; --accent-tint:color-mix(in oklab,#4FC9C4 14%,transparent); --accent-line:color-mix(in oklab,#4FC9C4 36%,transparent); --vc:#4FC9C4; --vcs:#8FF2EC; --vc-line:color-mix(in oklab,#4FC9C4 36%,transparent); --btn-ink:#03201F; } [data-material="violeta"] { --accent:#6D28D9; --accent-strong:#9D4EFF; --accent-deep:#3F1078; --accent-tint:color-mix(in oklab,#6D28D9 16%,transparent); --accent-line:color-mix(in oklab,#6D28D9 46%,transparent); --vc:#6D28D9; --vcs:#9D4EFF; --vc-line:color-mix(in oklab,#6D28D9 46%,transparent); --btn-ink:#F1ECFA; } /* ---------- TOPBAR · SWITCHER ENTRE OS 5 NÓS ---------- */ /* (reaproveita .topbar/.topbar__brand/.topbar__nav de dossie.css) */ .topbar__nav a.is-here { color:var(--accent-strong); background:color-mix(in oklab,var(--accent) 12%,transparent); } .topbar__nav a .dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:middle; background:currentColor; opacity:0.55; } .topbar__nav a.is-here .dot { opacity:1; } .topbar__cta { flex:none; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:6px 14px; transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .topbar__cta:hover { color:var(--accent-strong); border-color:var(--accent-line); } /* ---------- HERO COMERCIAL ---------- */ .chero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:clamp(84px,11vw,150px) 0 clamp(52px,7vw,92px); } .chero::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(115% 78% at 72% -12%, color-mix(in oklab,var(--accent) 15%,transparent), transparent 60%); } .chero::after { content:""; position:absolute; inset:0; pointer-events:none; 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 70% 20%,#000 28%,transparent 74%); mask-image:radial-gradient(120% 90% at 70% 20%,#000 28%,transparent 74%); } .chero__inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px); } .chero__mark { width:clamp(60px,8vw,84px); height:clamp(60px,8vw,84px); margin-bottom:var(--s6); } .chero__kick { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-strong); display:flex; align-items:center; gap:var(--s4); } .chero__kick::before { content:""; width:44px; height:1px; background:var(--accent-line); } .chero__title { font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; line-height:0.98; font-size:clamp(2.6rem,6.4vw,4.8rem); margin:var(--s5) 0 var(--s4); max-width:18ch; } .chero__title .sub { display:block; font-family:'Spectral',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:0; color:var(--accent-strong); margin-top:var(--s3); } .chero__lead { max-width:60ch; font-size:clamp(1.02rem,1.7vw,1.28rem); line-height:1.6; color:var(--text-2); font-weight:300; } .chero__lead b { color:var(--text); font-weight:500; } .chero__foot { display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s7); } /* chip de matéria */ .matchip { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:7px 15px; } .matchip i { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 20%,transparent); } /* botões */ .btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; padding:13px 24px; border-radius:var(--r-sm); border:1px solid var(--accent); background:var(--accent); color:var(--btn-ink,var(--accent-ink)); transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .btn:hover { background:var(--accent-strong); border-color:var(--accent-strong); transform:translateY(-2px); } .btn--ghost { background:transparent; color:var(--text); border-color:var(--line-2); } .btn--ghost:hover { background:var(--surface); border-color:var(--accent-line); color:var(--text); } /* ---------- CHIPS DE STATUS (vocabulário canônico) ---------- Gradiente de maturidade por FORMA + luminância — nunca por cor semântica (a casa não tem verde). Só "Em operação" acende na cor da matéria; os demais recuam em brilho e usam traço/ponto. */ .stx { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--line-2); color:var(--text-3); } .stx i { width:7px; height:7px; border-radius:50%; flex:none; background:var(--text-3); } .stx.op { border-color:var(--accent-line); color:var(--accent-strong); } .stx.op i { background:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 20%,transparent); } @media (prefers-reduced-motion:no-preference){ .stx.op i { animation:stxpulse 2.6s var(--ease) infinite; } @keyframes stxpulse { 0%,100%{ box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 24%,transparent); } 50%{ box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 5%,transparent); } } } .stx.pil { color:var(--text-2); } .stx.pil i { background:linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%); border:1px solid var(--accent-line); } .stx.dev { color:var(--text-2); } .stx.dev i { background:transparent; border:1.5px dashed var(--text-2); width:8px; height:8px; } .stx.road { color:var(--text-3); border-style:dashed; } .stx.road i { background:transparent; border:1px dotted var(--text-3); } .stx.concept { color:var(--text-3); } .stx.concept i { background:transparent; border:1px solid var(--text-3); opacity:0.6; } /* ---------- GRADE DE PORTFÓLIO ---------- */ .pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } @media (max-width:920px){ .pgrid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .pgrid { grid-template-columns:1fr; } } .pgrid--2 { grid-template-columns:repeat(2,1fr); } @media (max-width:600px){ .pgrid--2 { grid-template-columns:1fr; } } .pcard { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; } .pcard__top { position:relative; min-height:80px; padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--line); background:#07080A; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; } .pcard__glow { position:absolute; inset:0; background:radial-gradient(120% 120% at 82% 0%, color-mix(in oklab,var(--accent) 17%,transparent), transparent 62%); } .pcard__role { position:relative; font-family:var(--font-mono); font-size:0.54rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-strong); } .pcard__name { position:relative; font-family:var(--font-display); font-weight:700; font-size:1.26rem; letter-spacing:0.01em; } .pcard__name .ia { color:var(--accent-strong); } .pcard__body { padding:var(--s4) var(--s5) var(--s5); display:flex; flex-direction:column; gap:var(--s4); flex:1; } .pcard__what { font-size:var(--t-sm); color:var(--text-2); line-height:1.55; flex:1; } .pcard__what b { color:var(--text); font-weight:500; } .pcard__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-top:var(--s3); border-top:1px dashed var(--line-2); } .pcard__go { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-strong); display:inline-flex; align-items:center; gap:6px; } .pcard__go .ar { transition:transform var(--dur-1) var(--ease); } /* roteável (é um ) */ a.pcard { transition:border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } a.pcard:hover { border-color:var(--accent-line); transform:translateY(-3px); } a.pcard:hover .pcard__go .ar { transform:translateX(4px); } /* status-only (sem link) — recuo intencional, sem afordância de clique */ .pcard.is-quiet .pcard__top { background:#0a0b0d; } .pcard.is-quiet .pcard__name { color:var(--text); } /* ---------- LINHA DE NÓS (roteador Autor/Holding → vertentes) ---------- */ .noderow { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } @media (max-width:820px){ .noderow { grid-template-columns:1fr; } } .nodecard { position:relative; display:flex; flex-direction:column; gap:var(--s3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:var(--s6); overflow:hidden; transition:border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .nodecard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--nc,var(--accent)); } .nodecard:hover { transform:translateY(-3px); border-color:color-mix(in oklab,var(--nc,var(--accent)) 50%,var(--line)); } .nodecard__head { display:flex; align-items:center; gap:var(--s3); } .nodecard__head svg { width:34px; height:34px; flex:none; } .nodecard__k { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--nc,var(--accent-strong)); } .nodecard__name { font-family:var(--font-display); font-weight:700; font-size:1.22rem; } .nodecard__d { font-size:var(--t-sm); color:var(--text-2); line-height:1.5; } .nodecard__sols { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:var(--s4); border-top:1px dashed var(--line-2); } .nodecard__sols span { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.04em; border:1px solid var(--line-2); border-radius:var(--r-pill); padding:3px 10px; color:var(--text-2); } .nodecard__go { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--nc,var(--accent-strong)); display:inline-flex; align-items:center; gap:6px; } .nodecard[data-nc="eng"] { --nc:#CE8A5E; } .nodecard[data-nc="tec"] { --nc:#8FF2EC; } .nodecard[data-nc="cie"] { --nc:#9D4EFF; } .nodecard[data-nc="holding"] { --nc:var(--accent-strong); } /* ---------- NOTA DE MÉTODO (status = maturidade, não cor) ---------- */ .statuskey { display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); } .statuskey__item { display:flex; align-items:center; gap:var(--s3); font-size:var(--t-xs); color:var(--text-3); max-width:24ch; line-height:1.4; } /* ---------- FAIXA DE CTA (LinkedIn · WhatsApp · E-mail) ---------- */ .cta { position:relative; overflow:hidden; border-top:1px solid var(--line); padding:clamp(56px,7vw,96px) 0; } .cta::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(100% 120% at 50% -20%, color-mix(in oklab,var(--accent) 12%,transparent), transparent 60%); } .cta__inner { position:relative; max-width:720px; margin:0 auto; padding:0 clamp(20px,4vw,48px); text-align:center; } .cta__mark { width:44px; height:44px; margin:0 auto var(--s5); } .cta__title { font-family:'Spectral',Georgia,serif; font-weight:500; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; letter-spacing:-0.01em; } .cta__sub { margin-top:var(--s3); font-size:var(--t-sm); color:var(--text-2); line-height:1.6; max-width:48ch; margin-left:auto; margin-right:auto; } .cta__row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s7); } @media (max-width:560px){ .cta__row { grid-template-columns:1fr; } } .cta__lk { display:flex; flex-direction:column; align-items:center; gap:var(--s2); padding:var(--s5) var(--s3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--text-2); transition:border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .cta__lk:hover { transform:translateY(-2px); border-color:var(--accent-line); color:var(--text); } .cta__lk svg { width:22px; height:22px; } .cta__lk span { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; } .cta__lk small { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.04em; color:var(--text-3); text-transform:none; } .cta__back { display:inline-flex; align-items:center; gap:8px; margin-top:var(--s6); font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:8px 18px; transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .cta__back:hover { color:var(--accent-strong); border-color:var(--accent-line); } /* ---------- RODAPÉ ---------- */ .cfoot { border-top:1px solid var(--line); padding:var(--s7) clamp(20px,4vw,48px); text-align:center; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-3); line-height:2.1; } .cfoot b { color:var(--text-2); font-weight:500; } .cfoot a { color:var(--text-3); border-bottom:1px solid var(--line-2); } .cfoot a:hover { color:var(--accent-strong); } /* seção comercial: herda .dsec de dossie.css; helper de largura */ .cwrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,48px); } .dsec__title .accent-strong { color:var(--accent-strong); } /* ---------- MATRIZ (Holding) · bloco tintado por vertente ---------- */ .mblock { padding-bottom:var(--s8); margin-bottom:var(--s8); border-bottom:1px solid var(--line); } .mblock:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; } .mblock__foot { display:flex; justify-content:flex-end; margin-top:var(--s4); } .seemore { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-strong); } .seemore .ar { transition:transform var(--dur-1) var(--ease); } .seemore:hover .ar { transform:translateX(4px); }