/* ============================================================ MUNTZ DESIGN SYSTEM — core tokens Calibrado a partir do brandbook oficial (Etapa 1, 2024). Posicionamento: Muntz Marketing de Performance — uma martech que une expertise em comunicação digital ao poder da tecnologia. Verticais: CRM Marketing · Automação · Tráfego · Branding. Tipografia: - Gorga Grotesque (própria, em fonts/) — display/marca - Space Grotesk (Google Fonts) — corpo e UI - JetBrains Mono (Google Fonts) — code/numerais Paleta principal (5 famílias): - Ametista #BD5FFF — Maturidade, Sofisticação (acento principal) - Violeta #1F004A — Montanha, Equilíbrio (autoridade) - Orquídea #0A45E2 — Confiança, Performance - Solar #FF5618 — Positividade - Vivaz #E6FC53 — Inspiração ============================================================ */ /* ---------- Fonts (locais) ---------- */ @font-face { font-family: "Gorga Grotesque"; src: url("/assets/fonts/GorgaGrotesque-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Gorga Grotesque"; src: url("/assets/fonts/GorgaGrotesque-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Gorga Grotesque"; src: url("/assets/fonts/GorgaGrotesque-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gorga Grotesque"; src: url("/assets/fonts/GorgaGrotesque-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Gorga Grotesque"; src: url("/assets/fonts/GorgaGrotesque-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Gorga Grotesque"; src: url("/assets/fonts/GorgaGrotesque-Bolditalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } /* Google Fonts: Space Grotesk (body/UI) + JetBrains Mono (numerais). Carregue no com: */ :root { /* ============ MARCA — Ametista (acento principal) ============ */ --ametista-50: #FAF2FF; --ametista-100: #ECE7FA; /* light variant oficial */ --ametista-150: #E9E0FF; /* segundo light oficial */ --ametista-200: #E5C7FF; --ametista-300: #D092FB; /* light variant oficial */ --ametista-400: #C879FF; --ametista-500: #BD5FFF; /* === ametista oficial === */ --ametista-600: #A23DEB; --ametista-700: #8936C3; /* dark variant oficial */ --ametista-800: #6F1FB8; --ametista-900: #5A0BAE; /* ============ MARCA — Violeta Muntz (autoridade) ============ */ --violeta-50: #F3EFFA; --violeta-100: #E2D6F4; --violeta-200: #C3AAE8; --violeta-300: #9C77D6; --violeta-400: #6E40BD; --violeta-500: #4A1B8C; --violeta-600: #2D0966; --violeta-700: #1F004A; /* === violeta muntz oficial === */ --violeta-800: #150033; --violeta-900: #1C0B27; /* dark variant oficial */ --violeta-950: #050010; /* ============ MARCA — Orquídea Azul (confiança, performance) ============ */ --orquidea-50: #F0F4FF; --orquidea-100: #E0E9FF; /* light variant oficial */ --orquidea-200: #BFD0FF; --orquidea-300: #8FAAFF; --orquidea-400: #5C7BF5; --orquidea-500: #0A45E2; /* === orquídea azul oficial === */ --orquidea-600: #0838B8; --orquidea-700: #001F6F; /* dark variant oficial */ --orquidea-800: #001550; --orquidea-900: #000A30; /* ============ MARCA — Laranja Solar (positividade) ============ */ --solar-50: #FFF4EE; --solar-100: #FFDFD3; /* light variant oficial */ --solar-200: #FFBCA1; --solar-300: #FF9670; --solar-400: #FF7842; --solar-500: #FF5618; /* === laranja solar oficial === */ --solar-600: #E44D15; /* dark variant oficial */ --solar-700: #B83D0E; --solar-800: #8C2D08; --solar-900: #5F1D04; /* ============ MARCA — Vivaz (inspiração, amarelo neon) ============ */ --vivaz-50: #FBFEE6; --vivaz-100: #F1FDA8; /* light variant oficial */ --vivaz-200: #EBFD7E; --vivaz-300: #E6FC53; /* === vivaz oficial === */ --vivaz-400: #C7DC3A; --vivaz-500: #ABBE25; --vivaz-600: #92A60C; /* dark variant oficial */ --vivaz-700: #748408; --vivaz-800: #586404; --vivaz-900: #3C4302; /* Tokens "brand-*" para acesso direto às cores principais oficiais */ --brand-ametista: #BD5FFF; --brand-violeta: #1F004A; --brand-orquidea: #0A45E2; --brand-solar: #FF5618; --brand-vivaz: #E6FC53; --brand-negativa: #F1F5F8; /* ============ NEUTROS (cool, sutilmente tintados de violeta) ============ */ --neutral-0: #FFFFFF; --neutral-25: #FAFAFC; --neutral-50: #F1F5F8; /* paper / off-white */ --neutral-100: #E5E7EE; --neutral-200: #D2D5DF; --neutral-300: #B6BAC6; --neutral-400: #8E8E8E; --neutral-500: #6B6B78; --neutral-600: #4F4F5C; --neutral-700: #3A3A48; --neutral-800: #1E1E28; --neutral-900: #0B0B12; /* ============ SEMÂNTICOS (mapeados pra cores da marca onde faz sentido) ============ */ /* INFO = Orquídea Azul — "Confiança e Performance" é literalmente o significado oficial */ --info-50: var(--orquidea-50); --info-100: var(--orquidea-100); --info-500: var(--orquidea-500); --info-700: var(--orquidea-700); /* SUCCESS — Vivaz é da marca mas amarelo-neon não vira "success" legível; usamos um teal harmonizado para uptrends/aprovação. */ --success-50: #E6F7F0; --success-500: #16A074; --success-700: #0E6B4D; /* WARNING — Solar é "Positividade" na marca, então usamos um âmbar derivado pra leitura de alerta sem reapropriar o sentido oficial do Solar. */ --warning-50: #FDF4E3; --warning-500: #F2A93B; --warning-700: #B47514; /* DANGER */ --danger-50: #FCEBEC; --danger-500: #E5484D; --danger-700: #B22227; /* ============ DATA-VIZ — usa as 5 famílias oficiais da marca, em ordem ============ */ --chart-1: var(--ametista-500); /* #BD5FFF — acento principal */ --chart-2: var(--orquidea-500); /* #0A45E2 — performance */ --chart-3: var(--solar-500); /* #FF5618 — energia */ --chart-4: var(--vivaz-300); /* #E6FC53 — inspiração */ --chart-5: var(--violeta-400); /* #6E40BD — variação roxa */ --chart-6: var(--neutral-400); /* fallback gray */ /* ============ PAPÉIS SEMÂNTICOS (LIGHT MODE) ============ */ --bg: var(--neutral-50); --bg-elevated: var(--neutral-0); --bg-sunken: var(--neutral-100); --bg-brand: var(--violeta-700); --bg-brand-soft: var(--ametista-100); --fg: var(--violeta-900); --fg-muted: var(--neutral-600); --fg-subtle: var(--neutral-500); --fg-on-brand: var(--neutral-50); --fg-on-accent: var(--violeta-900); --fg-accent: var(--ametista-700); --border: var(--neutral-100); --border-strong: var(--neutral-200); --border-brand: var(--ametista-500); --ring-focus: color-mix(in oklch, var(--ametista-500) 50%, transparent); /* ============ TIPOGRAFIA ============ */ /* Gorga Grotesque — display & marca (Light/Regular/Bold + italics) */ /* Space Grotesk — body & UI (Google Fonts) */ /* JetBrains Mono — code/numerais (Google Fonts) */ --font-display: "Gorga Grotesque", "Space Grotesk", system-ui, sans-serif; --font-sans: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 4rem; /* 64px */ --text-display: 5.5rem; /* 88px */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* Gorga ships em 300/400/700; Space Grotesk tem 300–700 contínuo */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* só pra Space Grotesk */ --weight-semibold: 600; /* só pra Space Grotesk */ --weight-bold: 700; --weight-extrabold: 700; /* alias — Gorga não tem extra-bold */ /* ============ ESPAÇAMENTO (base 4px) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ============ RAIOS ============ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* ============ SOMBRAS — tintadas de violeta ============ */ --shadow-xs: 0 1px 2px rgba(31, 0, 74, 0.06); --shadow-sm: 0 2px 4px rgba(31, 0, 74, 0.06), 0 1px 2px rgba(31, 0, 74, 0.04); --shadow-md: 0 6px 16px rgba(31, 0, 74, 0.08), 0 2px 4px rgba(31, 0, 74, 0.04); --shadow-lg: 0 16px 40px rgba(31, 0, 74, 0.12), 0 4px 8px rgba(31, 0, 74, 0.05); --shadow-xl: 0 32px 80px rgba(31, 0, 74, 0.18), 0 8px 16px rgba(31, 0, 74, 0.06); --shadow-glow-ametista: 0 0 0 4px rgba(189, 95, 255, 0.18), 0 8px 32px rgba(189, 95, 255, 0.3); --shadow-glow-solar: 0 0 0 4px rgba(255, 86, 24, 0.18), 0 8px 32px rgba(255, 86, 24, 0.3); --shadow-glow-vivaz: 0 0 0 4px rgba(230, 252, 83, 0.22), 0 8px 32px rgba(230, 252, 83, 0.3); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* ============ MOVIMENTO ============ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ============ LAYOUT ============ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --section-py: clamp(64px, 9vw, 128px); } /* ============ Surface: Violeta (escuro, autoridade) ============ */ .on-violeta, [data-surface="violeta"] { --bg: var(--violeta-700); --bg-elevated: var(--violeta-600); --bg-sunken: var(--violeta-800); --fg: var(--neutral-50); --fg-muted: color-mix(in oklch, var(--neutral-50) 70%, transparent); --fg-subtle: color-mix(in oklch, var(--neutral-50) 50%, transparent); --fg-accent: var(--ametista-300); --border: color-mix(in oklch, var(--neutral-50) 10%, transparent); --border-strong: color-mix(in oklch, var(--neutral-50) 20%, transparent); } /* ============ Element styles ============ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg); background: var(--bg); } h1, .h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } h2, .h2 { /* Gorga só pra h1/display; h2+ usa Space Grotesk Bold pra leitura em densidade UI */ font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h3, .h3 { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); } h4, .h4 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); } h5, .h5 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); } h6, .h6 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); } .display { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-bold); line-height: 0.95; letter-spacing: -0.035em; } .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-accent); } p, .p { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-muted); } .lead { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg); font-weight: var(--weight-medium); } code, .code { font-family: var(--font-mono); font-size: 0.92em; background: var(--neutral-100); color: var(--violeta-700); padding: 0.12em 0.4em; border-radius: var(--radius-xs); } a { color: var(--fg-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--ametista-800); }