/* ========================================================================== Mindli — Landing Page (estática) Este arquivo é a fusão de dois arquivos do projeto front-end (Angular): 1. front-end/src/styles.css ................ tokens do design system 2. front-end/src/app/pages/landing/landing.component.css Do design system veio só o que a landing usa — as regras de formulário, card-glass, spinner e theme-toggle ficaram no webapp. Já o CSS do componente da landing foi copiado na íntegra, incluindo `.pill-badge` e `.btn-hero-secondary`, que hoje não têm elemento correspondente no HTML. O abre em `light-theme`, que é o padrão do ThemeService do webapp. Os overrides de `.dark-theme` continuam aqui caso um toggle seja adicionado. ========================================================================== */ /* ========================================================================== 1. Design System — Tokens (Dual Theme: Clean White padrão & Dark Mode) ========================================================================== */ :root { /* Brand Palette (compartilhada entre os temas — design.png) */ --brand-purple: #6C4DFF; /* Primary Purple */ --brand-blue: #4285F4; /* Primary Blue */ --brand-teal: #00D1C1; /* Teal / Cyan */ --brand-navy: #0E1330; /* Deep Navy */ --brand-gray-light: #F2F4F7; /* Soft Gray */ /* Tokens padrão: CLEAN WHITE (Light Mode — WCAG 4.5:1+) */ --bg-primary: #F8FAFC; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #FFFFFF; --bg-input: #F2F4F7; /* Gradientes e acentos */ --accent-primary: var(--brand-purple); --accent-primary-hover: #593BE6; --accent-secondary: var(--brand-teal); --accent-gradient: linear-gradient(135deg, #6C4DFF 0%, #4285F4 50%, #00D1C1 100%); /* Texto (Light Mode — Dark Navy #0E1330) */ --text-primary: #0E1330; --text-secondary: #475569; --text-muted: #64748B; /* Bordas */ --border-color: rgba(14, 19, 48, 0.12); --border-color-focus: var(--brand-teal); /* Tipografia */ --font-family-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* Glassmorphism & Shadows (Light Mode) */ --glass-shadow: 0 12px 32px -8px rgba(14, 19, 48, 0.12), 0 4px 12px rgba(14, 19, 48, 0.04); --glass-border: 1px solid rgba(14, 19, 48, 0.08); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; /* Micro-animações */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* DARK MODE OVERRIDES (.dark-theme) */ body.dark-theme { --bg-primary: #0E1330; --bg-secondary: #161C42; --bg-card: rgba(22, 28, 66, 0.75); --bg-card-hover: rgba(26, 33, 77, 0.9); --bg-input: #151A3B; --text-primary: #FFFFFF; --text-secondary: #A0A7C4; --text-muted: #6C749C; --border-color: rgba(255, 255, 255, 0.12); --border-color-focus: var(--brand-teal); --glass-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 1px 0 rgba(255, 255, 255, 0.12); --glass-border: 1px solid rgba(255, 255, 255, 0.12); } /* ========================================================================== 2. Base ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; font-family: var(--font-family-body); background-color: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color var(--transition-normal), color var(--transition-normal); } body.light-theme { background: var(--bg-primary); background-image: radial-gradient(at 0% 0%, rgba(108, 77, 255, 0.06) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(0, 209, 193, 0.06) 0px, transparent 50%); background-attachment: fixed; } body.dark-theme { background: var(--bg-primary); background-image: radial-gradient(at 0% 0%, rgba(108, 77, 255, 0.25) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(0, 209, 193, 0.2) 0px, transparent 50%); background-attachment: fixed; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-display); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; } /* Botão primário do design system. Mantido antes das regras da landing para reproduzir a mesma cascata do webapp, onde este bloco vem de styles.css e é sobrescrito pelo CSS do componente. */ .btn-primary { width: 100%; padding: 0.95rem 1.5rem; font-family: var(--font-family-display); font-size: 1rem; font-weight: 600; color: #ffffff; background: var(--accent-gradient); border: none; border-radius: 30px; cursor: pointer; box-shadow: 0 8px 24px -4px rgba(108, 77, 255, 0.45); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px -4px rgba(0, 209, 193, 0.55); } .btn-primary:active:not(:disabled) { transform: translateY(0); } /* ========================================================================== 3. Landing ========================================================================== */ .landing-page { min-height: 100vh; background: var(--bg-primary); color: var(--text-primary); display: flex; flex-direction: column; } /* Header */ .landing-header { display: flex; align-items: center; gap: 36px; padding: 22px 56px; max-width: 1280px; margin: 0 auto; width: 100%; } .header-brand { display: flex; align-items: center; gap: 10px; } .brand-mark { width: 34px; height: 34px; object-fit: contain; } body.dark-theme .brand-mark { filter: brightness(0) invert(1); } .brand-title { font-size: 22px; font-weight: 600; letter-spacing: -0.2px; color: var(--text-primary); } .header-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-left: 12px; } .nav-link { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); } .nav-link:hover { color: var(--brand-purple); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* Os CTAs eram