/* ========================================================================== FluxoGen — tema "Leo" da landing pública (redesign claro, SPEC docs/redesign/) Carregado APENAS por base_landing.html (após tokens.css/tailwind.css/base.css). O tema é ativado por [data-theme="leo"] no : os tokens semânticos do projeto (--bg, --surface, --text…) são re-apontados para os valores claros, então partials preservados (demo mágica, estimador) e páginas-guia que usam as classes semânticas do Tailwind (bg-canvas, text-ink…) herdam o tema sem mudança de markup. tokens.css e o app logado ficam intactos. ========================================================================== */ /* ---- Fontes self-hosted (Google Fonts → static/fonts/, licença OFL) ---- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/fraunces-var-latin.5d2835174326.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/fraunces-var-latin-ext.3592119408ee.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.43751174b6b8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-ext.f2a04185547c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.792477d09826.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-ext.63af7d5e18e5.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.b550bca8934b.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-ext.5a1b7c983a9d.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.0bd523f60499.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-ext.d3aa06d13d3c.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 1. Design tokens (SPEC §1) ========================================================================== */ [data-theme="leo"] { color-scheme: light; /* Base Leo */ --ink: #16181A; /* texto, títulos e bordas de card */ --border-subtle: #E4E4E8; /* divisores, footer */ /* Marca (emerald mantido) */ --brand-600: #059669; --brand-700: #047857; /* botão primário */ --accent-teal: #0D9488; /* Gradiente de assinatura (Opção A) */ --grad-brand: linear-gradient(321.5deg, #34D399 3%, #0D9488 45%, #2563EB 99%); --grad-brand-h: linear-gradient(90deg, #34D399, #0D9488 55%, #2563EB); /* Ilustrações line-art */ --cream: #FBF3E1; /* Forma */ --radius-card: 16px; --radius-input: 12px; --radius-pill: 9999px; --border-card: 2px solid var(--ink); --shadow-offset: 7px; /* 5px no mobile (media query abaixo) */ /* Tipografia */ --font-display: "Fraunces", Georgia, serif; --font-body: "Poppins", "Inter", system-ui, sans-serif; --fs-h1: clamp(3.25rem, 7.5vw, 6.75rem); --fs-h2: clamp(2.25rem, 4.5vw, 3.875rem); --fs-h2-card: clamp(2.125rem, 3.6vw, 3.25rem); --fs-lead: clamp(1.25rem, 2.3vw, 1.8125rem); --fs-body: 1rem; /* Layout */ --container: 1280px; --gutter: 40px; /* ---- Re-aponta os tokens semânticos do projeto (tokens.css) para o tema claro Leo: partials preservados e páginas-guia herdam sem tocar no markup (bg-canvas, text-ink, border-line… resolvem para cá). ---- */ --bg: #FAFAFB; --surface: #FFFFFF; --surface-2: #F3F3F5; --border: #E4E4E8; --border-strong: #C9C9CF; --text: var(--ink); --text-muted: #5B6168; --text-faint: #6B7076; /* ≥4.5:1 sobre #FAFAFB/branco (AA em texto pequeno) */ --primary: var(--brand-700); --on-primary: #FFFFFF; --accent: var(--accent-teal); --success: var(--brand-600); --warning: #B45309; --error: #DC2626; --font-sans: var(--font-body); } @media (max-width: 900px) { [data-theme="leo"] { --shadow-offset: 5px; --gutter: 20px; } } /* ========================================================================== Regras globais do tema ========================================================================== */ [data-theme="leo"] body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; } [data-theme="leo"] h1, [data-theme="leo"] h2, [data-theme="leo"] .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; color: var(--ink); font-variation-settings: "opsz" 144; } [data-theme="leo"] ::selection { background: var(--brand-600); color: #fff; } /* Compensa o header sticky ao navegar por âncora (#demo, #preco…) */ [data-theme="leo"] section[id], [data-theme="leo"] div[id="demo"] { scroll-margin-top: 96px; } /* Acentos emerald-400 herdados dos partials (legíveis no dark, fracos no claro): rebaixa para o tom de marca legível em fundo claro. */ [data-theme="leo"] .text-emerald-400 { color: var(--brand-600); } /* Foco visível em todos os interativos (SPEC §6) */ [data-theme="leo"] a:focus-visible, [data-theme="leo"] button:focus-visible, [data-theme="leo"] input:focus-visible, [data-theme="leo"] textarea:focus-visible, [data-theme="leo"] summary:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; } /* ========================================================================== 2. Componentes base (SPEC §2) ========================================================================== */ /* --- Container --- */ .container-leo { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* --- Card Leo: borda ink + sombra gradiente deslocada (§2.1) --- */ .card-leo { position: relative; background: var(--surface); border: var(--border-card); border-radius: var(--radius-card); padding: 34px; } .card-leo::before { content: ""; position: absolute; inset: 0; background: var(--grad-brand); border-radius: var(--radius-card); transform: translate(var(--shadow-offset), var(--shadow-offset)); z-index: -1; } .card-leo--flat { position: relative; background: var(--surface); border: var(--border-card); border-radius: var(--radius-card); padding: 24px; } .card-leo--dark { background: var(--ink); border-color: var(--ink); color: #fff; } .card-leo--dark h2, .card-leo--dark h3 { color: #fff; } /* --- Botões (§2.2): pill, Poppins 600 15px --- */ .btn-leo { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: var(--radius-pill); padding: 12px 24px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; transition: background-color .15s ease, transform .15s ease, color .15s ease; } .btn-leo:hover { transform: translateY(-1px); } .btn-leo:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-leo--primary { background: var(--brand-700); color: #fff; } .btn-leo--primary:hover { background: var(--brand-600); } .btn-leo--outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); padding: 10.5px 22.5px; /* compensa a borda para alinhar com os demais */ } .btn-leo--outline:hover { background: var(--bg); } .btn-leo--gradient { background: var(--grad-brand-h); color: #fff; } .btn-leo--gradient:hover { filter: brightness(1.06); } .btn-leo--lg { font-size: 17px; padding: 16px 34px; } /* Wrapper para card-leo aninhado em outro card-leo: sem isto o ::before (z-index -1) escapa para trás do card pai e a sombra some (SPEC §2.1). */ .leo-isolate { isolation: isolate; } /* --- Demo interativa (S3): só re-skin, JS intacto --- */ .demo-card-leo { padding: 40px; } @media (max-width: 600px) { .demo-card-leo { padding: 22px; } } .demo-label-leo { display: block; font-weight: 600; font-size: 17px; color: var(--ink); } .demo-textarea-leo { width: 100%; margin-top: 14px; border: 1.5px solid var(--ink); border-radius: var(--radius-input); padding: 16px; font-family: var(--font-body); font-size: 15px; min-height: 110px; resize: vertical; background: #fff; color: var(--ink); } .demo-textarea-leo::placeholder { color: var(--text-faint); } .demo-textarea-leo:focus { outline: 2px solid var(--brand-600); outline-offset: 1px; border-color: var(--brand-600); } .demo-row-leo { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; } .demo-row-leo small { color: var(--text-muted); } .chip-leo--action { cursor: pointer; transition: border-color .15s ease; } .chip-leo--action:hover:not(:disabled) { border-color: var(--brand-600); color: var(--brand-700); } .chip-leo--action:disabled { opacity: .5; cursor: wait; } /* --- Cabeçalho padrão de seção Leo --- padding-block apenas: um shorthand `padding` aqui zeraria o padding lateral herdado de .container-leo (gutter) no mesmo elemento. */ .section-leo { padding-block: 80px 20px; } .section-leo h2.title-leo { font-size: var(--fs-h2); margin-bottom: 12px; } .section-leo .sub-leo { color: var(--text-muted); margin-bottom: 46px; max-width: 38em; } /* --- S4 Pipeline: balão → BPMN → doc Word --- */ .pipe-grid { display: grid; grid-template-columns: 1fr 44px 1.15fr 44px 1fr; align-items: stretch; isolation: isolate; /* sombras dos card-leo internos */ } .pipe-arrow { display: grid; place-items: center; color: var(--ink); } .pipe-step { display: flex; flex-direction: column; } .pipe-label { font-weight: 600; font-size: 14px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; color: var(--ink); } .pipe-label .num { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; } .pipe-who { font-size: 12px; color: var(--text-muted); margin-top: 10px; } .pipe-canvas { padding: 14px; flex: 1; display: grid; place-items: center; } .pipe-canvas img { width: 100%; height: auto; display: block; } /* Documento Word estilizado (doc-word, SPEC §3.1) */ .doc-word { font-size: 11.5px; line-height: 1.6; color: #3D4147; } .doc-word .doc-head { border-bottom: 1.5px solid var(--border-subtle); padding-bottom: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink); } .doc-word .doc-head b { font-size: 12.5px; } .doc-word .w-badge { background: #2B579A; color: #fff; font-size: 9.5px; font-weight: 600; border-radius: 4px; padding: 2px 7px; white-space: nowrap; } .doc-word .doc-h { font-size: 11.5px; font-weight: 700; margin: 8px 0 3px; color: var(--ink); } .doc-word .sig { margin-top: 10px; font-size: 10px; color: var(--text-muted); } @media (max-width: 900px) { .pipe-grid { grid-template-columns: 1fr; } .pipe-arrow svg { transform: rotate(90deg); } .pipe-arrow { padding: 10px 0; } } /* --- S5 Exemplos por área --- */ .ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; isolation: isolate; } .ex-card { display: flex; flex-direction: column; } .ex-card .ex-tag { display: inline-block; align-self: flex-start; background: var(--grad-brand); color: #fff; font-size: 11.5px; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 12px; margin-bottom: 14px; } .ex-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 10px; color: var(--ink); } .ex-card .ex-in { font-size: 12.5px; color: var(--text-muted); font-style: italic; border-left: 3px solid var(--brand-600); padding-left: 12px; margin: 12px 0 16px; line-height: 1.55; } .ex-card .ex-mini { background: var(--cream); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px; margin-bottom: 14px; } .ex-card .ex-mini img { width: 100%; height: auto; display: block; } .ex-card .ex-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .ex-card a.more { font-size: 14px; font-weight: 600; color: var(--brand-700); text-decoration: none; margin-top: auto; } .ex-card a.more:hover { text-decoration: underline; } @media (max-width: 1024px) { .ex-grid { grid-template-columns: 1fr; gap: 28px; } } /* --- S6 Features 2×2 --- */ .features-leo { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 40px; padding: 70px 0; isolation: isolate; } .features-leo .card-leo { padding: 44px 40px 40px; } .features-leo h2 { font-size: var(--fs-h2-card); margin-bottom: 22px; } .features-leo p { color: var(--ink); font-size: 16.5px; max-width: 30em; } @media (max-width: 900px) { .features-leo { grid-template-columns: 1fr; padding: 40px 0; gap: 30px; } .features-leo .card-leo { padding: 30px 26px; } } /* --- S7 Split: browser-mock + copy + barras de velocidade --- */ .split-leo { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 60px 0; } .split-leo h2 { font-size: var(--fs-h2); margin-bottom: 20px; } .split-leo .split-copy p { font-size: 17px; max-width: 28em; } .browser-mock { position: relative; } .browser-mock .sparkle-outline { position: absolute; top: -26px; right: 60px; z-index: 1; } .browser-leo { background: var(--cream); border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; } .browser-leo .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 2px solid var(--ink); } .browser-leo .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); flex-shrink: 0; } .browser-leo .url { flex: 1; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); font-size: 12px; padding: 4px 14px; color: var(--text-muted); } .browser-leo img { display: block; width: 100%; height: auto; } .float-badge { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: #fff; z-index: 1; } .float-badge.tl { top: -16px; left: -16px; } .float-badge.br { bottom: -14px; right: -14px; } /* Barras de velocidade (conteúdo preservado da seção antiga) */ .speed-leo { margin-top: 34px; } .speed-leo .speed-row { margin-bottom: 18px; } .speed-leo .speed-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; } .speed-leo .speed-track { height: 12px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1.5px solid var(--border-subtle); } .speed-leo .speed-fill { height: 100%; border-radius: var(--radius-pill); } .speed-leo .speed-fill--slow { background: var(--border-strong); } .speed-leo .speed-fill--fast { background: var(--grad-brand-h); } .speed-leo .speed-note { font-size: 12px; color: var(--text-faint); margin-top: 6px; } @media (max-width: 900px) { .split-leo { grid-template-columns: 1fr; gap: 44px; padding: 30px 0; } } /* --- S9 Tabela comparativa --- */ .compare-leo { border: 2px solid var(--ink); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); } .compare-leo .scroll { overflow-x: auto; } .compare-leo table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; font-size: 14.5px; } .compare-leo thead tr { background: var(--cream); } .compare-leo th { padding: 14px 18px; font-weight: 600; color: var(--ink); font-size: 13.5px; } .compare-leo th.fluxogen-col { background: var(--ink); color: #fff; } .compare-leo td { padding: 13px 18px; border-top: 1.5px solid var(--border-subtle); color: var(--ink); } .compare-leo td.fluxogen-col { background: rgba(5, 150, 105, .07); font-weight: 600; color: var(--brand-700); } .compare-leo .ok { color: var(--brand-700); font-weight: 600; } .compare-leo .warn { color: #B45309; } .compare-leo .no { color: var(--text-muted); } /* --- Grid utilitário 3 colunas (S10) --- */ .grid-3-leo { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); margin-top: 40px; } @media (max-width: 1024px) { .grid-3-leo { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-3-leo { grid-template-columns: 1fr; } } /* --- Chips de confiança (§2.4) --- */ .chip-leo { border: 1.5px solid var(--ink); background: var(--surface); border-radius: var(--radius-pill); padding: 7px 16px; font-size: 13.5px; font-weight: 500; display: inline-flex; gap: 7px; align-items: center; color: var(--ink); } .chip-leo b { font-weight: 600; } /* --- S11 Preço: planos --- */ .plans-leo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: stretch; isolation: isolate; margin-top: 40px; } .plan-leo { display: flex; flex-direction: column; } .plan-leo h3 { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -.02em; color: var(--ink); } .plan-leo .price { font-size: 44px; font-weight: 700; font-family: var(--font-body); margin: 16px 0 4px; color: var(--ink); } .plan-leo .cred { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; } .plan-leo p { font-size: 15px; } .plan-leo .btn-leo { margin-top: auto; align-self: flex-start; } .plan-leo .plan-tag { display: inline-block; align-self: flex-start; background: var(--grad-brand); color: #fff; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 4px 12px; margin-bottom: 14px; } .card-leo--dark.plan-leo h3, .card-leo--dark.plan-leo .price { color: #fff; } .card-leo--dark.plan-leo .cred { color: #B7BCC2; } .pix-note { margin-top: 26px; font-size: 14px; color: var(--text-muted); } .pix-note b { color: var(--ink); } @media (max-width: 900px) { .plans-leo { grid-template-columns: 1fr; gap: 26px; } } /* --- Accordion FAQ (§2.5) --- */ .faq-leo details { border-bottom: 1px solid var(--border-subtle); } .faq-leo summary { font-weight: 600; font-size: 17px; padding: 18px 34px 18px 0; cursor: pointer; list-style: none; position: relative; color: var(--ink); } .faq-leo summary::-webkit-details-marker { display: none; } .faq-leo summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .faq-leo details[open] summary::after { transform: translateY(-30%) rotate(225deg); } .faq-leo .faq-answer { font-size: 16px; color: var(--text-muted); padding: 0 0 20px; max-width: 46em; } /* --- Balão de fala (pipeline S4) --- */ .bubble-leo { background: var(--cream); border: 2px solid var(--ink); border-radius: 14px 14px 14px 4px; padding: 16px 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink); } /* --- Canvas quadriculado (ilustrações BPMN) --- */ .canvas-leo { background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(22, 24, 26, .06) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(22, 24, 26, .06) 23px 24px), var(--cream); border-radius: 10px; } /* ========================================================================== Navbar (SPEC §2.3): transparente sobre --bg; sticky com blur ao rolar ========================================================================== */ .nav-leo { position: sticky; top: 0; z-index: 70; /* acima do CTA fixo mobile (z-50) para o drawer cobrir tudo */ background: transparent; border-bottom: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease, backdrop-filter .2s ease; } .nav-leo__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 104px; transition: height .2s ease; } .nav-leo.is-stuck { background: rgba(250, 250, 251, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--border-subtle); } .nav-leo.is-stuck .nav-leo__inner { height: 72px; } .nav-leo__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .nav-leo__wordmark { font-family: var(--font-body); font-weight: 700; font-size: 22px; /* tom do wordmark rebaixado de #10B981 para AA (contraste 5.4:1) */ color: var(--brand-700); letter-spacing: -0.01em; } .nav-leo__links { display: flex; align-items: center; /* não esticar os links (senão o texto cola no topo) */ gap: 28px; font-weight: 500; font-size: 15px; } .nav-leo__links a { color: var(--ink); text-decoration: none; white-space: nowrap; /* 'Como funciona' não quebra e estica a linha */ transition: color .15s ease; } .nav-leo__links a:hover { color: var(--brand-700); } .nav-leo__cta { display: flex; gap: 12px; align-items: center; } .nav-leo__burger { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 8px; } /* Drawer mobile: full-screen, links Fraunces 32px, CTAs no rodapé */ .nav-leo__drawer { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: 16px var(--gutter) 32px; } .nav-leo__drawer-head { display: flex; align-items: center; justify-content: space-between; height: 56px; } .nav-leo__drawer-links { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; flex: 1; } .nav-leo__drawer-links a { font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; padding: 10px 0; } .nav-leo__drawer-foot { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 900px) { .nav-leo__inner { height: 72px; } .nav-leo__links, .nav-leo__cta { display: none; } .nav-leo__burger { display: grid; place-items: center; } } /* ========================================================================== Hero (SPEC §4 S2) ========================================================================== */ .hero-leo { display: grid; grid-template-columns: 1.4fr .6fr; gap: 60px; align-items: start; padding: 70px 0 30px; } .hero-leo__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-muted); margin-bottom: 18px; } .hero-leo__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-600); } .hero-leo h1 { font-size: var(--fs-h1); } .hero-leo__lead { font-size: var(--fs-lead); font-weight: 600; line-height: 1.35; margin-top: 36px; max-width: 20em; color: var(--ink); } .hero-leo__hint { margin-top: 28px; font-size: 19px; font-weight: 500; max-width: 26em; color: var(--ink); } .hero-leo__hint .spark { display: inline-block; vertical-align: -3px; } /* Ilustração do hero (line-art Leo): balão → BPMN → doc Word */ .hero-illo { justify-self: end; width: 100%; max-width: 470px; padding-top: 6px; } .hero-illo svg { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .hero-leo { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 16px; } /* mobile: hero fica só com o texto — a ilustração é desktop */ .hero-illo { display: none; } } /* --- S14 Footer --- */ .foot-link { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 8px; transition: color .15s ease; } .foot-link:hover { color: var(--brand-700); } /* --- Movimento reduzido (SPEC §6) --- */ @media (prefers-reduced-motion: reduce) { [data-theme="leo"] *, [data-theme="leo"] *::before, [data-theme="leo"] *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } [data-theme="leo"] html { scroll-behavior: auto; } }