/* ============================================================ VOLKY — MASTER BRAND SYSTEM Folha de sistema. Governada pelo Exoesqueleto: aprecia permanência · integração · herança · método. Tema dirigido por atributos em : data-mode = dark | light data-accent = warm | lum data-display = geo | serif ============================================================ */ /* ---------- 1. TOKENS INVARIANTES ---------- */ :root { /* Espaçamento — base 4 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* Raios — mínimos. Cantos quase retos = permanência estrutural */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* Tipografia */ --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* display resolvido por data-display abaixo */ /* Escala de tipo — fluida, institucional */ --t-mono: 0.72rem; --t-xs: 0.78rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: clamp(2rem, 3.4vw, 2.75rem); --t-3xl: clamp(2.6rem, 5vw, 4rem); --t-4xl: clamp(3.4rem, 8vw, 6.5rem); --t-mega: clamp(5rem, 16vw, 14rem); /* Movimento — deliberado, com peso. Nada lúdico. */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 180ms; --dur-2: 340ms; --dur-3: 620ms; --maxw: 1240px; --rail: 256px; } /* ---------- 2. ACENTO DE TRANSFORMAÇÃO ---------- */ :root, [data-accent="warm"] { /* Metálico quente — o ouro do motor, o metal, a estrutura */ --accent: #C9A24E; --accent-strong: #E0BE72; --accent-deep: #9C7B30; --accent-ink: #0A0C0F; --accent-tint: color-mix(in oklab, var(--accent) 14%, transparent); --accent-line: color-mix(in oklab, var(--accent) 38%, transparent); --accent-name: "Metálico quente"; } [data-accent="lum"] { /* Luminoso preciso — a onda sônica, a inteligência, a energia */ --accent: #4FC9C4; --accent-strong: #7FE2DD; --accent-deep: #2C9A95; --accent-ink: #04201F; --accent-tint: color-mix(in oklab, var(--accent) 14%, transparent); --accent-line: color-mix(in oklab, var(--accent) 38%, transparent); --accent-name: "Luminoso preciso"; } /* ---------- 3. DISPLAY ---------- */ :root, [data-display="geo"] { --font-display: 'Archivo', system-ui, sans-serif; --display-name: "Geométrica"; --display-tight: -0.02em; } [data-display="serif"] { --font-display: 'Spectral', Georgia, serif; --display-name: "Serifa"; --display-tight: -0.01em; } /* ---------- 4. TEMA — DARK (padrão institucional) ---------- */ :root, [data-mode="dark"] { --bg: #0A0C0F; --bg-1: #0E1115; --surface: #14181D; --surface-2: #1B2026; --line: #262C34; --line-2: #353D47; --text: #E9ECEF; --text-2: #A2ABB5; --text-3: #6B7480; --text-inv: #0A0C0F; --grid-line: color-mix(in oklab, #FFFFFF 4%, transparent); color-scheme: dark; } [data-mode="light"] { --bg: #E7E5DF; --bg-1: #F1F0EB; --surface: #FAF9F6; --surface-2: #FFFFFF; --line: #D9D6CE; --line-2: #C4C0B6; --text: #15181B; --text-2: #4C535B; --text-3: #828A92; --text-inv: #FAF9F6; --grid-line: color-mix(in oklab, #000000 6%, transparent); color-scheme: light; } /* ---------- 5. RESET / BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: var(--display-tight); text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } img { display: block; max-width: 100%; } /* utilitários tipográficos */ .mono { font-family: var(--font-mono); } .kicker { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); } .kicker--accent { color: var(--accent); } .lead { font-size: var(--t-lg); line-height: 1.5; color: var(--text-2); font-weight: 300; } .accent { color: var(--accent); } .idx { font-family: var(--font-mono); color: var(--accent); font-size: var(--t-mono); letter-spacing: 0.1em; } /* ---------- 6. LAYOUT — RAIL + CONTEÚDO ---------- */ .shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; } .rail { position: sticky; top: 0; align-self: start; height: 100vh; border-right: 1px solid var(--line); background: var(--bg-1); padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s6); overflow-y: auto; } .rail__brand { display: flex; align-items: center; gap: var(--s3); } .rail__brand .vmark { width: 30px; height: 30px; } .rail__brand .wm { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.16em; font-size: 1.05rem; } .rail__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; line-height: 1.5; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav a { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s2); font-size: var(--t-sm); color: var(--text-2); border-left: 2px solid transparent; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .nav a .n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); } .nav a:hover { color: var(--text); background: var(--surface); } .nav a.is-active { color: var(--text); border-left-color: var(--accent); } .nav a.is-active .n { color: var(--accent); } .rail__foot { margin-top: auto; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--text-3); line-height: 1.7; text-transform: uppercase; } /* back-link ao hub do sistema — presente em todos os documentos da casa */ .rail__home { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); transition: color var(--dur-1) var(--ease); } .rail__home:hover { color: var(--accent); } .rail__home .ar { font-size: 0.9rem; line-height: 1; } .content { min-width: 0; } /* ---------- 7. SEÇÃO ---------- */ .section { padding: var(--s10) var(--s8); border-bottom: 1px solid var(--line); position: relative; } .section--tight { padding-top: var(--s8); } .section__inner { max-width: var(--maxw); margin: 0 auto; } .section__head { margin-bottom: var(--s8); max-width: 760px; } .section__head .kicker { margin-bottom: var(--s4); } .section__head h2 { font-size: var(--t-2xl); margin-bottom: var(--s4); } .section__head .lead { margin-top: var(--s4); } .principle { border-left: 2px solid var(--accent); padding-left: var(--s5); margin: var(--s6) 0; max-width: 640px; } .principle .kicker { margin-bottom: var(--s2); } .principle p { color: var(--text); font-size: var(--t-md); line-height: 1.5; } /* grades genéricas */ .grid { display: grid; gap: var(--s5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } } /* ---------- 8. CARTÕES / CANVAS DE MARCA ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); } .card--flush { padding: 0; overflow: hidden; } .card__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-2); } .card__label .tag { color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.62rem; } .canvas { display: grid; place-items: center; min-height: 240px; padding: var(--s7); position: relative; } .canvas--dark { background: #0A0C0F; color: #E9ECEF; } .canvas--light { background: #F1F0EB; color: #15181B; } .canvas--accent { background: var(--accent); color: var(--accent-ink); } .canvas--grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; } /* ---------- 9. LOGOMARK ---------- */ .vmark { display: block; } .vmark path, .vmark line, .vmark polygon, .vmark circle { vector-effect: non-scaling-stroke; } .lockup { display: flex; align-items: center; gap: var(--s4); } .lockup .vmark { width: 56px; height: 56px; flex: none; } .lockup__wm { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 2.2rem; line-height: 1; } .lockup--lg .vmark { width: 92px; height: 92px; } .lockup--lg .lockup__wm { font-size: 3.6rem; } /* lockup de divisão (endosso) */ .endorse { display: flex; align-items: stretch; gap: var(--s4); } .endorse .vmark { width: 48px; height: 48px; flex: none; } .endorse__txt { display: flex; flex-direction: column; justify-content: center; gap: 3px; border-left: 1px solid currentColor; padding-left: var(--s4); } .endorse__master { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em; font-size: 1.15rem; line-height: 1; } .endorse__div { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; } /* ---------- 10. CARD DE DIREÇÃO (logomark) ---------- */ .dir { display: flex; flex-direction: column; position: relative; } .dir.is-rec { outline: 1px solid var(--accent-line); } .dir__rec { position: absolute; top: var(--s4); right: var(--s4); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 4px 8px; border-radius: var(--r-xs); z-index: 2; } .dir__body { padding: var(--s5); } .dir__body h3 { font-size: var(--t-lg); margin-bottom: var(--s2); } .dir__body .concept { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.08em; margin-bottom: var(--s3); } .dir__body p { font-size: var(--t-sm); color: var(--text-2); } /* ---------- 11. COR ---------- */ .swatch { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .swatch__chip { height: 96px; } .swatch__meta { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; background: var(--surface); } .swatch__name { font-size: var(--t-sm); font-weight: 500; } .swatch__hex { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); text-transform: uppercase; } .ramp { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .ramp__step { height: 72px; display: flex; align-items: flex-end; padding: var(--s2); } .ramp__step span { font-family: var(--font-mono); font-size: 0.6rem; } /* ---------- 12. TIPOGRAFIA ---------- */ .type-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); align-items: baseline; } .type-row__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); line-height: 1.7; } .type-row__meta b { color: var(--text-2); font-weight: 500; display: block; } .type-spec { display: block; font-family: var(--font-display); line-height: 1.05; } .type-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } .type-cmp__col { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); position: relative; } .type-cmp__col.is-rec { outline: 1px solid var(--accent-line); } /* ---------- 13. GRAFISMO ---------- */ .glyph-tile { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface); position: relative; overflow: hidden; } .glyph-tile figcaption { position: absolute; bottom: var(--s3); left: var(--s4); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } /* ---------- 14. APLICAÇÕES ---------- */ .app-frame { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .app-frame__bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); background: var(--surface-2); } .app-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; } .app-frame__bar span { margin-left: var(--s2); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-3); } /* cartão do fundador */ .bizcard { aspect-ratio: 1.75 / 1; border-radius: var(--r-md); padding: var(--s6); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .bizcard__name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.01em; } .bizcard__role { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; } /* assinatura de e-mail */ .sig { display: flex; gap: var(--s5); padding: var(--s5); font-family: var(--font-body); } .sig__bar { width: 2px; background: var(--accent); border-radius: 2px; } .sig__name { font-weight: 600; font-size: var(--t-md); } .sig__role { color: var(--text-2); font-size: var(--t-sm); } .sig__meta { margin-top: var(--s3); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); line-height: 1.8; } /* placeholder de imagem */ .ph { background-color: var(--surface-2); background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, var(--grid-line) 9px, var(--grid-line) 10px); display: grid; place-items: center; color: var(--text-3); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); } /* ---------- 15. ESPINHA NARRATIVA — três escalas ---------- */ .scales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .scale { padding: var(--s7) var(--s6); border-right: 1px solid var(--line); position: relative; min-height: 420px; display: flex; flex-direction: column; } .scale:last-child { border-right: 0; } .scale__id { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } .scale__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); letter-spacing: 0.04em; margin: var(--s4) 0 var(--s2); } .scale__sub { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; } .scale__body { color: var(--text-2); font-size: var(--t-sm); margin-top: var(--s4); } .scale__brands { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s5); } .scale__brands span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; border: 1px solid var(--line-2); padding: 4px 9px; border-radius: var(--r-pill); color: var(--text-2); } @media (max-width: 920px) { .scales { grid-template-columns: 1fr; } .scale { border-right: 0; border-bottom: 1px solid var(--line); } } /* ---------- 16. TOKENS TABELA ---------- */ .tokens { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--t-xs); } .tokens th { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-2); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; font-size: 0.62rem; } .tokens td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; } .tokens td:first-child { color: var(--accent); } .tokens .tk-chip { width: 16px; height: 16px; border-radius: var(--r-xs); border: 1px solid var(--line-2); display: inline-block; vertical-align: middle; margin-right: var(--s2); } /* ---------- 17. HERO / CAPA ---------- */ .hero { 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); } .hero__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 70% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%); pointer-events: none; } .hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; width: 100%; } .hero__mega { font-family: var(--font-display); font-weight: 700; font-size: var(--t-mega); letter-spacing: -0.03em; line-height: 0.82; display: flex; align-items: center; gap: 0.08em; } .hero__mega .vmark { width: 0.9em; height: 0.9em; } .hero__lead { max-width: 620px; margin-top: var(--s6); font-size: var(--t-lg); line-height: 1.45; color: var(--text-2); font-weight: 300; } .hero__meta { display: flex; gap: var(--s7); margin-top: var(--s8); flex-wrap: wrap; } .hero__meta div { display: flex; flex-direction: column; gap: 4px; } .hero__meta dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } .hero__meta dd { font-size: var(--t-sm); color: var(--text); } /* ---------- 18. APRECIA / DEPRECIA ---------- */ .balance { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .balance__col { padding: var(--s6); } .balance__col:first-child { border-right: 1px solid var(--line); } .balance__col h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s4); font-weight: 500; } .balance__col--up h4 { color: var(--accent); } .balance__col--down h4 { color: var(--text-3); } .balance__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); } .balance__col li { font-size: var(--t-sm); display: flex; gap: var(--s3); align-items: baseline; } .balance__col li::before { content: ""; width: 6px; height: 6px; flex: none; transform: translateY(-1px); } .balance__col--up li::before { background: var(--accent); } .balance__col--down li::before { background: var(--text-3); transform: rotate(45deg) translateY(-1px); width: 5px; height: 5px; } .balance__col--down li { color: var(--text-3); } /* ---------- 19. NOTA DE DECISÃO ---------- */ .decision { display: flex; gap: var(--s4); margin-top: var(--s6); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .decision__k { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); writing-mode: vertical-rl; transform: rotate(180deg); flex: none; } .decision p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; } .decision p b { color: var(--text); font-weight: 600; } /* ---------- 20. MISC ---------- */ .spacer-s { height: var(--s6); } .spacer-m { height: var(--s8); } .divider { height: 1px; background: var(--line); border: 0; margin: var(--s7) 0; } .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } @media (max-width: 980px) { .two-up, .grid-2, .type-cmp, .balance { grid-template-columns: 1fr; } .balance__col:first-child { border-right: 0; border-bottom: 1px solid var(--line); } } /* reveal on scroll — resting state é SEMPRE visível (nada fica oculto se o relógio de animação congelar). A entrada é um enhancement aditivo. */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .reveal.is-armed { opacity: 0; transform: translateY(14px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* responsivo: colapsa rail */ @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s4); border-right: 0; border-bottom: 1px solid var(--line); } .rail__brand { margin-right: auto; } .nav { flex-direction: row; flex-wrap: wrap; } .nav a { border-left: 0; border-bottom: 2px solid transparent; } .nav a.is-active { border-left: 0; border-bottom-color: var(--accent); } .nav a .n { display: none; } .rail__foot, .rail__tag { display: none; } .section, .hero { padding-left: var(--s5); padding-right: var(--s5); } }