/* Fontes carregadas via Google Fonts (ver no de index.html): Plus Jakarta Sans = display/headings (geometric, matches the "get build" wordmark) DM Sans = body/UI text (neutral workhorse, high legibility at small sizes) */ /* ---- tokens/colors.css ---- Source: Identidade-Visual/Cores.png (brand palette) */ :root { /* ---- Base palette ---- */ --blue-600: #0066FF; /* Getbuild Blue — primary brand color, from the logo mark */ --blue-700: #0052CC; --blue-500: #2E7DFF; --blue-100: #E4EEFF; --blue-50: #F2F7FF; --ink-900: #0B0B0B; /* Getbuild Black — near-black, used for wordmark + dark surfaces */ --navy-900: #141B29; /* Deep navy — dark backgrounds (wallpapers, dark sections) */ --navy-800: #1C2536; --navy-700: #26324A; --slate-500: #67819F; /* Muted blue-slate — secondary brand tone */ --slate-300: #B6C6DB; /* Pale blue-slate — tints, backgrounds */ --slate-100: #E9EFF6; --gray-500: #898989; /* Neutral gray — tertiary/utility color */ --gray-300: #C7C7C7; --gray-100: #EDEDED; --white: #FFFFFF; /* ---- Semantic aliases ---- */ --color-brand: var(--blue-600); --color-brand-hover: var(--blue-700); --color-brand-tint: var(--blue-100); --color-brand-tint-soft: var(--blue-50); --surface-page: var(--white); --surface-card: var(--white); --surface-sunken: var(--gray-100); --surface-dark: var(--navy-900); --surface-dark-raised: var(--navy-800); --text-primary: var(--ink-900); --text-secondary: var(--slate-500); --text-muted: var(--gray-500); --text-on-dark: var(--white); --text-on-dark-muted: var(--slate-300); --text-link: var(--color-brand); --border-default: var(--gray-100); --border-strong: var(--gray-300); --border-on-dark: var(--navy-700); --state-success: #1F9D55; --state-warning: #E5A527; --state-danger: #E5484D; --state-info: var(--blue-600); --focus-ring: var(--blue-500); } /* ---- tokens/typography.css ---- */ :root { --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif; --font-body: "DM Sans", "Segoe UI", sans-serif; /* Display / headings scale */ --text-display-xl: 700 64px/1.05 var(--font-display); --text-display-lg: 700 48px/1.1 var(--font-display); --text-display-md: 700 36px/1.15 var(--font-display); --text-display-sm: 600 28px/1.2 var(--font-display); --text-heading: 600 22px/1.3 var(--font-display); /* Body scale */ --text-body-lg: 400 18px/1.6 var(--font-body); --text-body-md: 400 16px/1.6 var(--font-body); --text-body-sm: 400 14px/1.5 var(--font-body); --text-caption: 500 12px/1.4 var(--font-body); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; } /* ---- tokens/spacing.css ---- */ :root { --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; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06); --shadow-md: 0 4px 16px rgba(11, 11, 11, 0.08); --shadow-lg: 0 12px 32px rgba(11, 11, 11, 0.12); --shadow-brand: 0 8px 24px rgba(0, 102, 255, 0.24); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ } /* ---- styles.css (página "Em construção") ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--navy-900); } .page { min-height: 100vh; position: relative; overflow: hidden; background: var(--navy-900) url("assets/robot_.png") center / auto no-repeat; } .page__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 14, 20, 0.88) 0%, rgba(11, 14, 20, 0.65) 42%, transparent 72%); } .page__shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; } /* Acima de ~1600px o padding fluido do conteúdo já atingiu seu teto (clamp), então sem um limite o texto fica preso perto da borda esquerda enquanto o espaço vazio só cresce à direita. Centralizar o shell redistribui essa sobra igualmente para os dois lados. */ @media (min-width: 1600px) { .page__shell { max-width: 1600px; margin: 0 auto; } } .page__header { padding: clamp(28px, 5vh, 64px) clamp(24px, 6.5vw, 96px) 0; } .logo { height: clamp(32px, 4vw, 40px); display: block; } .page__main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(18px, 3vh, 26px); max-width: 620px; padding: var(--space-12) clamp(24px, 6.5vw, 96px); } .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 16px; border-radius: var(--radius-pill); background: rgba(0, 102, 255, 0.14); color: var(--blue-500); font: 600 13px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; } .headline { margin: 0; font: 500 clamp(36px, 4.2vw, 60px)/1.12 var(--font-display); color: var(--white); letter-spacing: -0.02em; text-wrap: balance; } .lede { margin: 0; font: 300 clamp(17px, 1.4vw, 20px)/1.6 var(--font-body); color: var(--text-on-dark-muted); text-wrap: pretty; } .contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-2); } .cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--white); font: 400 16px var(--font-display); text-decoration: none; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .cta:hover { background: var(--color-brand-hover); transform: translateY(-2px); } .cta:active { transform: scale(0.97); } .email-line { margin: 0; font: 400 15px var(--font-body); color: var(--slate-300); } .email-link { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--border-on-dark); padding-bottom: 1px; transition: border-color var(--duration-fast) var(--ease-standard); } .email-link:hover { border-color: var(--slate-300); } .page__footer { padding: 0 clamp(24px, 6.5vw, 96px) clamp(24px, 4.5vh, 40px); font: 500 14px var(--font-body); color: var(--slate-500); } /* Em telas de celular o bloco de texto alinhado à esquerda fica descentralizado em relação à foto de fundo (que já perde destaque nesse tamanho). Centralizar tudo — logo, badge, textos e CTA — deixa a composição equilibrada. */ @media (max-width: 640px) { .page__header { display: flex; justify-content: center; } .page__main { align-items: center; text-align: center; max-width: none; } .badge { align-self: center; } .contact { align-items: center; } .page__footer { text-align: center; } }