/* ========================================================================== MyT Global Recruitment — Design Tokens Paleta alinhada ao logo real: círculo roxo + setas laranja ========================================================================== */ :root { /* ── BRAND ───────────────────────────────── */ --color-brand-primary: #620a83; /* Roxo principal — alinhado ao ícone da logo */ --color-brand-primary-dark: #3D0552; /* Roxo escuro */ --color-brand-primary-light: #8B15B3; /* Roxo claro */ --color-brand-accent: #F97316; /* Laranja */ --color-brand-accent-dark: #EA580C; /* Laranja escuro */ --color-brand-accent-light: #FB923C; /* Laranja claro */ /* ── GRADIENTES ──────────────────────────── */ --gradient-hero: linear-gradient(135deg, #3D0552 0%, #620a83 50%, #8B15B3 100%); --gradient-cta: linear-gradient(90deg, #EA580C 0%, #F97316 100%); --gradient-card: linear-gradient(135deg, #620a83 0%, #8B15B3 100%); --gradient-subtle: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%); /* ── NEUTRAS ─────────────────────────────── */ --color-neutral-950: #0F0A1E; --color-neutral-900: #1E1B2E; --color-neutral-700: #374151; --color-neutral-500: #6B7280; --color-neutral-200: #E5E7EB; --color-neutral-100: #F3F4F6; --color-neutral-50: #FAFAFA; --color-purple-50: #F5F3FF; --color-purple-100: #EDE9FE; --color-white: #FFFFFF; /* ── FEEDBACK ────────────────────────────── */ --color-success: #10B981; --color-error: #EF4444; --color-warning: #F59E0B; /* ── TIPOGRAFIA ──────────────────────────── */ --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; /* Escala Major Third (1.25) */ --text-xs: 0.64rem; --text-sm: 0.8rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: 3.052rem; --text-5xl: 3.815rem; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* aliases para compatibilidade */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ── ESPAÇAMENTO ─────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── BORDAS ──────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ── SOMBRAS ─────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(98,10,131,0.06); --shadow-md: 0 4px 12px rgba(98,10,131,0.10); --shadow-lg: 0 10px 30px rgba(98,10,131,0.15); --shadow-xl: 0 20px 50px rgba(98,10,131,0.20); --shadow-orange: 0 8px 24px rgba(249,115,22,0.35); /* ── TRANSIÇÕES ──────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-INDEX ─────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-toast: 500; /* ── LAYOUT ──────────────────────────────── */ --container-max: 1200px; --container-padding: 1.5rem; --section-py-mobile: 4rem; --section-py-desk: 6rem; --header-height: 72px; } /* ========================================================================== DARK THEME OVERRIDES Applied when — converte seções brancas para escuras ========================================================================== */ /* ── Body e tipografia base ─────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0F0A1E; color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: white; } [data-theme="dark"] p { color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] strong { color: white; } /* ── Backgrounds utilitários ────────────────────────────────────────────── */ [data-theme="dark"] .bg-white { background-color: #0F0A1E; } [data-theme="dark"] .bg-light { background-color: #0D0520; } [data-theme="dark"] .bg-subtle { background: linear-gradient(135deg, #160935 0%, #2a0d5e 100%); } /* ── Rótulos e títulos de seção (em seções antes brancas) ───────────────── */ [data-theme="dark"] .section-title { color: white; } [data-theme="dark"] .section-subtitle { color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .section-tag { color: rgba(249, 115, 22, 0.9); } /* ── Seção #sobre — diff cards ──────────────────────────────────────────── */ [data-theme="dark"] .diff-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(249, 115, 22, 0.2); border-left-color: var(--color-brand-accent); } [data-theme="dark"] .diff-card:hover { background: rgba(255, 255, 255, 0.07); border-left-color: var(--color-brand-primary-light); box-shadow: 0 20px 50px rgba(98, 10, 131, 0.25); } [data-theme="dark"] .diff-card__title { color: white; } [data-theme="dark"] .diff-card__desc { color: rgba(255, 255, 255, 0.6); } /* KPI bar dentro do #sobre */ [data-theme="dark"] .kpi__label { color: rgba(255, 255, 255, 0.65); } /* ── Seção #cases — case cards ──────────────────────────────────────────── */ [data-theme="dark"] .case-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } [data-theme="dark"] .case-card:hover { background: rgba(255, 255, 255, 0.07); box-shadow: 0 24px 60px rgba(98, 10, 131, 0.2); } [data-theme="dark"] .case-card__title { color: white; } [data-theme="dark"] .case-card__text { color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .case-card__country { color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] .case-card__badge { background: rgba(98, 10, 131, 0.3); color: #C4B5FD; } [data-theme="dark"] .case-card__result { background: rgba(98, 10, 131, 0.2); } [data-theme="dark"] .case-card__result-text { color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .case-card__label { color: #A78BFA; } /* ========================================================================== LIGHT THEME OVERRIDES Applied when — overrides dark defaults section by section ========================================================================== */ /* ── Header ─────────────────────────────────────────────────────────────── */ [data-theme="light"] #site-header.is-solid { background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 20px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(98, 10, 131, 0.08); } [data-theme="light"] .nav__link { color: var(--color-neutral-700); } [data-theme="light"] .nav__link:hover, [data-theme="light"] .nav__link.is-active { color: var(--color-brand-primary); } [data-theme="light"] .lang-switcher { color: var(--color-neutral-500); } [data-theme="light"] .lang-switcher a { color: var(--color-neutral-600, #4B5563); } [data-theme="light"] .lang-switcher a:hover { color: var(--color-brand-primary); background: rgba(98, 10, 131, 0.07); } [data-theme="light"] .lang-switcher a.is-active { color: white; background: rgba(249, 115, 22, 0.85); } [data-theme="light"] .nav__hamburger { background: rgba(98, 10, 131, 0.07); border-color: rgba(98, 10, 131, 0.15); } [data-theme="light"] .nav__hamburger span { background: var(--color-brand-primary); } [data-theme="light"] .nav__hamburger:hover { background: rgba(98, 10, 131, 0.12); } /* ── Mobile drawer ──────────────────────────────────────────────────────── */ [data-theme="light"] #mobile-drawer { background: white; } [data-theme="light"] .drawer__menu .nav__link { color: var(--color-neutral-700); } /* ── Seção Metodologia — fundo escuro vira roxo claro ───────────────────── */ [data-theme="light"] #metodologia { background: #F5F3FF; } [data-theme="light"] #metodologia::before { background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.25), transparent); } [data-theme="light"] #metodologia .section-tag { color: var(--color-brand-accent); } [data-theme="light"] #metodologia .section-title { color: var(--color-neutral-900); } [data-theme="light"] #metodologia .section-subtitle { color: var(--color-neutral-500); } [data-theme="light"] .method-step__number { background: rgba(98, 10, 131, 0.06); border-color: rgba(249, 115, 22, 0.5); } [data-theme="light"] .method-step:hover .method-step__number { background: rgba(249, 115, 22, 0.1); } [data-theme="light"] .method-step__title { color: var(--color-neutral-900); } [data-theme="light"] .method-step__desc { color: var(--color-neutral-500); } /* Timeline (legado) */ [data-theme="light"] .timeline-item__title { color: var(--color-neutral-900); } [data-theme="light"] .timeline-item__desc { color: var(--color-neutral-500); } /* ── Seção Contato — fundo escuro vira roxo claro ───────────────────────── */ [data-theme="light"] #contato { background: #F0EBFF; } [data-theme="light"] #contato .section-tag { color: var(--color-brand-accent); } [data-theme="light"] #contato .section-title { color: var(--color-neutral-900); } [data-theme="light"] #contato .section-subtitle { color: var(--color-neutral-500); } [data-theme="light"] .tabs { background: rgba(98, 10, 131, 0.08); } [data-theme="light"] .tabs__btn { color: var(--color-neutral-700); } [data-theme="light"] .form-label { color: var(--color-neutral-700); } [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea { background: white; border-color: rgba(98, 10, 131, 0.2); color: var(--color-neutral-900); } [data-theme="light"] .form-input::placeholder, [data-theme="light"] .form-textarea::placeholder { color: #9CA3AF; } [data-theme="light"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(98,10,131,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 18px; } [data-theme="light"] .form-select option { background: white; color: var(--color-neutral-900); } [data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus, [data-theme="light"] .form-textarea:focus { background: white; } [data-theme="light"] .contact-info__item { background: rgba(98, 10, 131, 0.05); border-color: rgba(98, 10, 131, 0.1); } [data-theme="light"] .contact-info__item:hover { background: rgba(98, 10, 131, 0.08); } [data-theme="light"] .contact-info__label { color: var(--color-neutral-500); } [data-theme="light"] .contact-info__value { color: #1F2937; } [data-theme="light"] .contact-info__value a { color: #1F2937; } [data-theme="light"] .contact-info__value a:hover { color: var(--color-brand-primary); } [data-theme="light"] .form-success__desc { color: var(--color-neutral-700); } /* ── Hero float card — ajuste para maior contraste no tema claro ────────── */ [data-theme="light"] .hero__float-card { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } [data-theme="light"] .hero__kpi { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); } [data-theme="light"] .hero__kpi-label { color: rgba(255, 255, 255, 0.75); }