/* quitta.ai — GENERATED FILE, DO NOT EDIT. Built by tools/build-css.py from: - css/tokens/colors.css - css/tokens/typography.css - css/tokens/spacing.css - css/tokens/effects.css - css/components.css - css/site.css - css/onepager.css Edit those sources and re-run: python3 tools/build-css.py */ /* ==================== css/tokens/colors.css ==================== */ /* Quitta color system — "The Settled Ledger". Base palette + semantic aliases. Lime (--quitado) is a VERDICT, not a decoration: settlement moments only, ≤8% of any layout. Never lime text on light surfaces (fails AA) — use --cedula there. Mirror rule: --sombra is a DARK-SURFACE colour. On ink it is 7.7:1; on paper it is 2.1:1 and fails AA. On light surfaces use --cinza-verde for body/small text, or --sombra-forte for large display text (>=24px) only. */ :root{ /* base */ --tinta:#0B1F16; /* dominant dark ink-green */ --tinta-2:#10291D; /* raised surface on ink */ --cedula:#166534; /* emerald accent */ --cedula-escura:#0F3D22; /* deep emerald (hover, judicial track) */ --quitado:#A3E635; /* electric lime — settlement only */ --quitado-hover:#B4F04A; --recibo:#F4F7F4; /* ledger paper */ --branco:#FFFFFF; --sombra:#9DB3A5; /* muted sage — dark surfaces only */ --sombra-forte:#7C9086; /* sage darkened for large display text on paper (3.39:1) */ --cinza-verde:#5B6B61; /* muted body text on light */ --verde-claro:#CFE0D4; /* body text on emerald */ /* hairlines */ --hair:rgba(11,31,22,.12); --hair-dark:rgba(157,179,165,.22); --hair-lime:rgba(163,230,53,.45); /* Hairlines are decorative and exempt from 1.4.11. A form field's border is not — it is the component boundary — so fields get their own token at 3.71:1 on --tinta-2. */ --border-field:#5F8474; /* semantic */ --surface-page:var(--recibo); --surface-card:var(--branco); --surface-ink:var(--tinta); --surface-ink-raised:var(--tinta-2); --surface-emerald:var(--cedula-escura); --text-body:var(--tinta); --text-muted:var(--cinza-verde); --text-on-ink:var(--recibo); --text-muted-on-ink:var(--sombra); --text-accent:var(--cedula); /* accent text on light */ --text-verdict:var(--quitado); /* accent text on dark only */ /* Focus ring is surface-dependent: cedula reaches 6.6:1 on paper but only 2.4:1 on ink. --focus-ring inherits, so any ink container can retint every control inside it at once. */ --focus-ring:var(--cedula); --focus-ring-on-ink:var(--quitado); /* 11.4:1 on --tinta */ } /* Opt an ink-coloured container into the on-ink focus ring. */ .q-on-ink{--focus-ring:var(--focus-ring-on-ink)} /* ==================== css/tokens/typography.css ==================== */ /* Quitta type system. Gloock = display only (max ~2 lines, never paragraphs). Outfit = body/UI. Geist Mono = ALL numbers, amounts, dates, IDs, percentages, registry labels. */ :root{ --font-display:'Gloock',Georgia,serif; --font-body:'Outfit',system-ui,sans-serif; --font-mono:'Geist Mono','SFMono-Regular',ui-monospace,monospace; /* scale (from quitta.ai) */ --text-h1:clamp(38px,4.6vw,58px); --text-h2:clamp(30px,3.4vw,42px); --text-display-num:52px; /* big step numerals */ --text-stat:34px; /* panel-foot stat */ --text-lead:18px; --text-body-lg:16.5px; --text-body-md:15px; --text-body-sm:14.5px; --text-caption:14px; --text-mono-md:13px; /* ledger rows */ --text-mono-label:12px; /* eyebrows, registry labels */ --text-mono-sm:11.5px; --text-mono-micro:11px; /* letterspacing — mono registry labels are always wide */ --ls-eyebrow:.28em; --ls-tag:.2em; --ls-label:.18em; --ls-row-hdr:.16em; --ls-badge:.14em; /* leading */ --lh-display:1.12; --lh-heading:1.18; --lh-body:1.6; --lh-relaxed:1.65; } /* ==================== css/tokens/spacing.css ==================== */ /* Quitta spacing, radii, shadow, motion — exact values from quitta.ai. Generous margins, minimal decoration. */ :root{ --wrap-max:1180px; --wrap-pad:28px; --section-pad:96px; --gap-grid:22px; /* card grids */ --gap-hero:64px; --gap-nav:34px; --nav-h:68px; --card-pad:32px 28px; /* pillar */ --panel-pad:22px; /* radii */ --radius-btn:8px; --radius-input:9px; --radius-icon:11px; --radius-card:14px; --radius-frame:16px; --radius-hero:20px; --radius-badge:6px; --radius-pill:99px; /* elevation — a single soft ink shadow; panels only */ --shadow-panel:0 24px 60px -28px rgba(11,31,22,.28); /* motion */ --ease-score:cubic-bezier(.2,.7,.2,1); --speed-fast:.15s; --speed-hover:.2s; --speed-strike:.45s; --speed-reveal:.7s; } /* ==================== css/tokens/effects.css ==================== */ /* Signature surfaces: horizontal ledger ruling on light; very low opacity (or none) on dark. */ :root{ --ruling-light:repeating-linear-gradient(to bottom,transparent 0,transparent 87px,rgba(11,31,22,.035) 87px,rgba(11,31,22,.035) 88px); --ruling-dark:repeating-linear-gradient(to bottom,transparent 0,transparent 87px,rgba(244,247,244,.028) 87px,rgba(244,247,244,.028) 88px); } .q-ruling{background-color:var(--recibo);background-image:var(--ruling-light)} .q-ruling-dark{background-color:var(--tinta);background-image:var(--ruling-dark)} ::selection{background:var(--quitado);color:var(--tinta)} /* ==================== css/components.css ==================== */ /* Quitta component classes — mirrored 1:1 from quitta.ai (q- prefix). */ /* eyebrow / registry label */ .q-eyebrow{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--cedula);font-weight:500} .q-eyebrow--dark{color:var(--quitado)} /* buttons */ .q-btn{display:inline-block;background:var(--tinta);color:var(--recibo);font-family:var(--font-body);font-weight:600;font-size:15px;padding:13px 26px;border-radius:var(--radius-btn);border:none;cursor:pointer;text-decoration:none;transition:transform var(--speed-fast) ease,background var(--speed-fast) ease} .q-btn:hover{background:var(--cedula-escura);transform:translateY(-1px)} .q-btn--lime{background:var(--quitado);color:var(--tinta)} .q-btn--lime:hover{background:var(--quitado-hover)} .q-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} /* aria-disabled rather than [disabled]: a natively disabled button drops focus mid-interaction */ .q-btn[aria-disabled="true"]{cursor:default} .q-btn[aria-disabled="true"]:hover{transform:none} /* form fields (native: dark CTA form) */ /* field label — registry idiom: mono, uppercase, letterspaced */ .q-field{display:flex;flex-direction:column;gap:7px} .q-label{font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:var(--ls-badge); text-transform:uppercase;color:var(--sombra)} .q-label--light{color:var(--cinza-verde)} .q-input,.q-select{font-family:var(--font-body);font-size:15px;padding:15px 18px;border-radius:var(--radius-input);border:1px solid var(--border-field);background:var(--tinta-2);color:var(--recibo);width:100%} /* placeholder sits on --tinta-2: --sombra is 7.71:1 there, --cinza-verde only 2.74:1 */ .q-input::placeholder{color:var(--sombra);opacity:1} .q-input--light,.q-select--light{background:var(--branco);border-color:var(--hair);color:var(--tinta)} .q-input--light::placeholder{color:var(--cinza-verde)} .q-input:focus-visible,.q-select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} /* settlement strike — lime diagonal across a settled amount */ .q-strike{position:relative;white-space:nowrap} .q-strike::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.12em;min-height:2.5px;background:var(--quitado);border-radius:var(--radius-pill);transform:rotate(-4deg)} /* QUITADO rubber stamp */ .q-stamp{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;padding:6px 14px;border:2px solid var(--cedula);border-radius:var(--radius-badge);color:var(--cedula);transform:rotate(-4deg)} .q-stamp--dark{border-color:var(--quitado);color:var(--quitado)} .q-stamp--fill{background:var(--quitado);color:var(--tinta);border-color:var(--quitado);transform:none;padding:4px 10px;letter-spacing:.1em} /* commitment chip */ .q-chip{border-top:2.5px solid var(--quitado);padding-top:18px} .q-chip .k{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:var(--ls-tag);color:var(--sombra);text-transform:uppercase} .q-chip .v{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--branco);margin-top:8px;line-height:1.5} .q-chip--light .k{color:var(--cinza-verde)} .q-chip--light .v{color:var(--tinta)} /* diagnostic panel */ .q-panel{background:var(--branco);border:1px solid var(--hair);border-radius:var(--radius-card);box-shadow:var(--shadow-panel);overflow:hidden} .q-panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--hair)} .q-panel-head .t{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--ls-label);color:var(--cinza-verde)} .q-pulse{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;color:var(--cedula)} .q-pulse i{width:8px;height:8px;border-radius:50%;background:var(--quitado);animation:q-pl 1.8s infinite} @keyframes q-pl{0%,100%{opacity:1}50%{opacity:.35}} .q-panel-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:18px 22px 20px;background:var(--tinta)} .q-panel-foot .l{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--ls-row-hdr);color:var(--sombra)} .q-panel-foot .big{font-family:var(--font-display);font-size:var(--text-stat);color:var(--quitado);line-height:1;margin-top:6px} .q-panel-foot .r{font-family:var(--font-mono);font-size:11.5px;color:var(--sombra);text-align:right;line-height:1.7} /* ledger rows — dashed dividers between data rows */ .q-ledger{padding:8px 22px 4px} .q-lrow{display:grid;grid-template-columns:1.12fr .6fr 1.4fr .88fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--hair);font-family:var(--font-mono);font-size:var(--text-mono-md)} /* column headers sit on the white panel — --sombra is 2.23:1 there and fails AA */ .q-lrow.hdr{font-size:10.5px;letter-spacing:var(--ls-row-hdr);color:var(--cinza-verde);border-bottom:1px solid var(--hair)} .q-lrow .tid{color:var(--tinta);font-weight:500} .q-lrow .vint{color:var(--cinza-verde)} .q-scorebar{height:6px;background:var(--recibo);border-radius:var(--radius-pill);overflow:hidden} .q-scorebar i{display:block;height:100%;background:var(--cedula);border-radius:var(--radius-pill);transition:width 1s var(--ease-score)} .q-scorebar.hot i{background:var(--quitado)} /* The bar alone cannot satisfy 1.4.11: the emerald and lime fills sit at opposite luminance extremes, so no single track colour reaches 3:1 against both. The score is published as text instead — which is also the ledger-native way to show a number. */ .q-score{display:flex;align-items:center;gap:10px} .q-score .q-scorebar{flex:1;min-width:0} .q-score-val{color:var(--cinza-verde);font-variant-numeric:tabular-nums;min-width:2.1em;text-align:right} @media(max-width:560px){ /* too narrow for both — the number carries the value */ .q-score .q-scorebar{display:none} .q-score-val{min-width:0;text-align:left} /* with the bar gone the score column only holds two digits; give the width back to the claim id and verdict so neither wraps to a second line */ .q-lrow{grid-template-columns:1.25fr .58fr .45fr 1.22fr;gap:8px} } @media(max-width:400px){ /* reclaim gutter so the claim id stays on one line at the 320px reflow width */ .q-ledger{padding:8px 14px 4px} } .q-verd{text-align:right;color:var(--cinza-verde);position:relative} .q-verd.q{color:var(--cedula);font-weight:700} .q-verd.q::after{content:"";position:absolute;left:8%;right:-2%;top:52%;height:2.5px;background:var(--quitado);border-radius:var(--radius-pill);transform:rotate(-4deg)} /* hairline rules: solid between sections, dashed between data rows */ .q-hairline{border:none;border-top:1px solid var(--hair)} .q-dashed{border:none;border-top:1px dashed var(--hair)} .q-hairline--dark{border-top-color:var(--hair-dark)} .q-dashed--dark{border-top-color:var(--hair-dark)} /* default links */ a.q-link{color:var(--cedula);text-decoration:none} a.q-link:hover{color:var(--cedula-escura);text-decoration:underline} /* ==================== css/site.css ==================== */ /* quitta.ai site layout. Page-level composition only — section patterns (hero, pillars, steps, tracks, CTA, nav, footer) that the design system deliberately leaves to the UI kit rather than shipping as primitives. Everything here is built from tokens; no raw palette values. Primitives live in components.css (q-*). */ /* ---------- base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-weight:400; line-height:var(--lh-body);background-image:var(--ruling-light)} a{color:inherit;text-decoration:none} a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} /* Ink surfaces retint the inherited focus ring — cedula is only 2.4:1 on --tinta. */ .dark,.cta-card,.partner-card,.step.final,.q-panel-foot{--focus-ring:var(--focus-ring-on-ink)} /* skip link — off-screen until focused, then pinned to the top-left */ .skip-link{position:absolute;top:0;left:-9999px;z-index:100;background:var(--surface-ink); color:var(--text-on-ink);font-family:var(--font-body);font-weight:600;font-size:var(--text-body-md); padding:13px 22px;border-radius:0 0 var(--radius-btn) 0} .skip-link:focus{left:0} .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)} .mono{font-family:var(--font-mono)} .mark{display:inline-block;vertical-align:middle} /* ---------- nav ---------- */ nav{position:sticky;top:0;z-index:50;background:rgba(244,247,244,.88);backdrop-filter:blur(10px); border-bottom:1px solid var(--hair)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)} .logo{display:flex;align-items:center;gap:11px;font-weight:600;font-size:21px;letter-spacing:.01em} .logo .dot{color:var(--cedula)} .nav-mid{display:flex;align-items:center;gap:var(--gap-nav);min-width:0} .nav-links{display:flex;gap:var(--gap-nav);font-size:var(--text-body-sm);font-weight:500;color:var(--text-muted)} .nav-links a{white-space:nowrap} .nav-links a:hover{color:var(--tinta)} /* flex-shrink:0 — o bloco EN+CTA nunca é esmagado pelo meio da barra */ .nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0} /* padding/negative-margin pair: the hit area grows to ~35px for a thumb without the two-letter label pushing the CTA sideways. */ .nav-lang{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:.15em; color:var(--text-muted);font-weight:500;padding:8px 6px;margin:0 -6px} .nav-lang:hover{color:var(--tinta)} /* Page pills — the in-page anchors above scroll you around this page, these leave it. Different destination, different affordance: bordered pills, mono, so the two groups never read as one undifferentiated row of links. Direct children only ( > ): the links inside a dropdown panel are menu rows, not pills. */ .nav-pages{display:flex;align-items:center;gap:8px;min-width:0} .nav-pages > a,.nav-drop summary{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:.12em; text-transform:uppercase;font-weight:500;color:var(--text-muted);white-space:nowrap; border:1px solid var(--hair);border-radius:var(--radius-pill);padding:7px 13px;line-height:1; transition:color var(--speed-fast) ease,border-color var(--speed-fast) ease} .nav-pages > a:hover,.nav-drop summary:hover{color:var(--tinta);border-color:var(--tinta)} .nav-pages > a:focus-visible,.nav-drop summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .nav-pages > a[aria-current="page"]{color:var(--tinta);border-color:var(--tinta)} /* Dropdown pills — native details/summary: the menus open and close without JavaScript and the summary announces expanded/collapsed for free. The inline script only adds niceties (Esc, click-outside, one menu at a time). */ .nav-drop{position:relative} .nav-drop summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px; user-select:none;-webkit-user-select:none} .nav-drop summary::-webkit-details-marker{display:none} .nav-drop summary::after{content:"";width:6px;height:6px;margin-top:-3px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);transition:transform var(--speed-fast) ease} .nav-drop[open] summary{color:var(--tinta);border-color:var(--tinta)} .nav-drop[open] summary::after{transform:rotate(225deg);margin-top:3px} .nav-drop-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:232px; display:flex;flex-direction:column;gap:2px;padding:8px; background:var(--surface-card);border:1px solid var(--hair); border-radius:var(--radius-card);box-shadow:var(--shadow-panel)} .nav-drop-panel a{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:.12em; text-transform:uppercase;font-weight:500;color:var(--text-muted);white-space:nowrap; padding:10px 12px;border-radius:var(--radius-btn);line-height:1; transition:color var(--speed-fast) ease,background var(--speed-fast) ease} .nav-drop-panel a:hover{color:var(--tinta);background:var(--recibo)} .nav-drop-panel a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px} /* ---------- hero ---------- */ .hero{padding:84px 0 var(--section-pad);position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-hero);align-items:center} h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-h1);line-height:var(--lh-display); letter-spacing:-.005em;margin:22px 0 24px} /* headline strike — shallower and longer-origin than the verdict strike (q-strike) */ h1 .risco,h2 .risco{position:relative;white-space:nowrap} h1 .risco::after,h2 .risco::after{content:"";position:absolute;left:-2%;right:-2%;top:56%;height:.09em; background:var(--quitado);border-radius:var(--radius-pill);transform:rotate(-2.2deg);transform-origin:left center} .hero p.sub{font-size:var(--text-lead);color:var(--text-muted);max-width:34em;line-height:var(--lh-relaxed)} .hero-ctas{display:flex;gap:16px;align-items:center;margin-top:36px;flex-wrap:wrap} /* The secondary CTA next to the button. Underlined rather than hover-only: on a phone there is no hover, and without it this reads as the sentence it sits beside. */ .hero-demo-link{display:inline-flex;align-items:center;gap:8px;padding:7px 0; font-weight:500;color:var(--cedula);text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--cedula) 45%,transparent); transition:color var(--speed-fast) ease,text-decoration-color var(--speed-fast) ease} .hero-demo-link:hover{color:var(--cedula-escura);text-decoration-color:currentColor} .hero-note{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)} /* diagnostic panel — animation layer over the q-panel primitive */ .q-lrow{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease} .q-lrow.show{opacity:1;transform:none} .q-lrow.hdr{opacity:1;transform:none} .q-scorebar i{width:0} .q-verd.q::after{transform:rotate(-4deg) scaleX(0);transform-origin:left center; transition:transform var(--speed-strike) ease .5s} .q-lrow.show .q-verd.q::after{transform:rotate(-4deg) scaleX(1)} /* ---------- section scaffolding ---------- */ section{padding:var(--section-pad) 0} .sec-head{max-width:640px;margin-bottom:56px} h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);line-height:var(--lh-heading); margin:18px 0 16px} .sec-head p{color:var(--text-muted);font-size:17px} .dark{background:var(--surface-ink);color:var(--text-on-ink);background-image:none} .dark h2{color:var(--branco)} .dark .sec-head p{color:var(--text-muted-on-ink)} /* ---------- integrations ---------- */ .integ{display:flex;flex-direction:column;gap:22px} .integ-row{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:baseline; padding-top:18px;border-top:1px solid var(--hair)} .integ-k{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:var(--ls-tag); color:var(--cedula);text-transform:uppercase} .integ-chips{display:flex;flex-wrap:wrap;gap:10px} .integ-chip{font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--tinta); border:1px solid var(--hair);border-radius:999px;padding:7px 14px;background:var(--branco)} /* the open-ended chip carries the actual claim — the named ones are examples */ .integ-chip--any{border-style:dashed;background:transparent;color:var(--cinza-verde)} .integ-note{margin-top:26px;font-family:var(--font-mono);font-size:var(--text-mono-micro); letter-spacing:var(--ls-badge);color:var(--cinza-verde);max-width:58em} /* ---------- intelligence pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)} .pillars--4{grid-template-columns:repeat(4,1fr)} .pillar{background:var(--surface-ink-raised);border:1px solid var(--hair-dark);border-radius:var(--radius-card); padding:var(--card-pad);display:flex;flex-direction:column;gap:14px; transition:transform var(--speed-hover) ease,border-color var(--speed-hover) ease} .pillar:hover{transform:translateY(-3px);border-color:var(--hair-lime)} .pillar .ic{width:46px;height:46px;border-radius:var(--radius-icon);background:var(--surface-ink); border:1px solid var(--hair-dark);display:flex;align-items:center;justify-content:center; /* a marca usa currentColor: sobre tinta ela vira papel */ color:var(--recibo)} .pillar h3{font-size:19px;font-weight:600;color:var(--branco);letter-spacing:.01em} .pillar p{font-size:var(--text-body-sm);color:var(--text-muted-on-ink);line-height:var(--lh-relaxed)} .pillar .tag{font-family:var(--font-mono);font-size:var(--text-mono-micro);letter-spacing:var(--ls-tag); color:var(--quitado)} /* fontes nomeadas do pilar — mono, ancorado no rodapé do card */ .pillar .src{margin-top:auto;padding-top:14px;border-top:1px dashed var(--hair-dark); font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:.05em;color:var(--sombra)} /* faixa da camada proprietária — fecha o grid de parceiros */ .layer-strip{margin-top:var(--gap-grid);border:1px dashed var(--hair-dark);border-radius:var(--radius-card); padding:20px 26px;font-size:var(--text-body-sm);color:var(--text-muted-on-ink);line-height:var(--lh-relaxed)} .layer-strip b{color:var(--branco)} /* nota de rodapé reutilizada em superfície tinta — --cinza-verde falha lá */ .dark .integ-note{color:var(--sombra)} /* ---------- gatilho open finance ---------- */ .of-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-hero);align-items:center} .of-h{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3vw,36px); line-height:var(--lh-heading);color:var(--branco);margin:16px 0 14px} .of-h em{font-style:italic} .of-sub{color:var(--text-muted-on-ink);font-size:var(--text-body-lg);line-height:var(--lh-relaxed);max-width:32em} .dash-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px} .dash-list li{font-size:var(--text-body-sm);color:var(--text-muted-on-ink);padding-left:26px; position:relative;line-height:1.55} .dash-list li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:2.5px; background:var(--quitado);border-radius:var(--radius-pill);transform:rotate(-18deg)} .dash-list strong{color:var(--recibo)} /* thread de negociação — ilustração, não interface real */ .thread{display:flex;flex-direction:column;gap:12px;max-width:430px;justify-self:end;width:100%} .evt{align-self:center;font-family:var(--font-mono);font-size:var(--text-mono-label); letter-spacing:var(--ls-badge);text-transform:uppercase;color:var(--quitado); border:1px dashed var(--hair-lime);border-radius:var(--radius-pill);padding:8px 16px} .evt--solid{border-style:solid} .bub{max-width:88%;padding:14px 17px;border-radius:14px;font-size:var(--text-body-sm); line-height:var(--lh-relaxed)} .bub .who{display:block;font-family:var(--font-mono);font-size:var(--text-mono-micro); letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} .bub.out{background:var(--surface-emerald);color:var(--verde-claro); border-bottom-left-radius:4px;align-self:flex-start} .bub.out .who{color:var(--quitado)} .bub.in{background:var(--surface-ink-raised);border:1px solid var(--hair-dark);color:var(--recibo); border-bottom-right-radius:4px;align-self:flex-end} .bub.in .who{color:var(--sombra)} .bub .amt{font-family:var(--font-mono);font-weight:700;color:var(--quitado)} /* ---------- flow steps ---------- */ /* cor explícita: o painel branco também vive dentro de .dark, que retinge o inherit */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hair); border-radius:var(--radius-frame);overflow:hidden;background:var(--surface-card);color:var(--text-body)} .steps--five{grid-template-columns:repeat(5,1fr)} .steps--three{grid-template-columns:repeat(3,1fr)} .step{padding:36px 28px 40px;border-right:1px solid var(--hair);position:relative; transition:background var(--speed-hover) ease} .step:last-child{border-right:none} .step:hover{background:#fbfdfa} /* ghosted numeral: --sombra at .55 flattened to 1.51:1 — darkened and opacity dropped for 3.39:1 */ .step .num{font-family:var(--font-display);font-size:var(--text-display-num);color:var(--sombra-forte); line-height:1} .step h3{font-size:18.5px;font-weight:600;margin:18px 0 10px;line-height:1.35} .step p{font-size:var(--text-caption);color:var(--text-muted);line-height:var(--lh-relaxed)} .step .cred{margin-top:18px;font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:.06em; color:var(--cedula);border-top:1px dashed var(--hair);padding-top:14px} .step.final{background:var(--surface-ink);color:var(--text-on-ink)} .step.final .num{color:var(--quitado);opacity:1} .step.final h3{color:var(--branco)} .step.final p{color:var(--text-muted-on-ink)} .step.final .cred{color:var(--quitado);border-top-color:var(--hair-dark)} /* ---------- dual track ---------- */ .tracks{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);margin-top:8px} .tracks--3{grid-template-columns:repeat(3,1fr)} /* cor explícita: o card branco também vive dentro de .dark, que retinge o inherit */ .track{border:1px solid var(--hair);border-radius:var(--radius-card);padding:34px 30px; background:var(--surface-card);color:var(--text-body)} .track.jud{background:var(--surface-emerald);border-color:transparent;color:var(--text-on-ink)} .track h3{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px} .track.jud h3{color:var(--branco)} .track ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px} .track li{font-size:var(--text-body-sm);color:var(--text-muted);padding-left:26px;position:relative;line-height:1.55} .track.jud li{color:var(--verde-claro)} /* list bullets are lime dashes rotated -18deg — the tally *gesture* (an upward diagonal accent), not the tally's actual angle, which is 21.4deg */ .track li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:2.5px;background:var(--quitado); border-radius:var(--radius-pill);transform:rotate(-18deg)} .always{margin-top:26px;display:flex;align-items:center;gap:14px;font-family:var(--font-mono); font-size:12.5px;letter-spacing:var(--ls-badge);color:var(--cedula)} /* --cedula é 2.4:1 sobre tinta; em seção escura o texto vai de sage */ .dark .always{color:var(--sombra)} /* ---------- economia da execução ---------- */ .exec-panel{margin-top:var(--gap-grid);background:var(--surface-emerald); border-radius:var(--radius-card);padding:36px 32px;color:var(--text-on-ink)} .exec-panel h3{font-size:20px;font-weight:600;color:var(--branco)} .exec-lead{margin-top:6px;font-size:var(--text-body-lg);color:var(--verde-claro)} .exec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-hero);margin-top:26px} .exec-grid .k{font-family:var(--font-mono);font-size:var(--text-mono-label); letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--quitado)} .exec-grid p{margin-top:10px;font-size:var(--text-body-sm);color:var(--verde-claro); line-height:var(--lh-relaxed)} /* ---------- comissão comparada ---------- */ /* rótulo de papel do card (Operação tradicional / Modelo Quitta, 01 · Extrajudicial…) */ .track .role{display:block;font-family:var(--font-mono);font-size:var(--text-mono-micro); letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--cedula);margin-bottom:12px} .track.jud .role{color:var(--quitado)} /* barra de incidência da comissão — o argumento inteiro num desenho */ .barzone{display:grid;grid-template-columns:118px 1fr;gap:24px;align-items:start;margin-top:20px} .fee-bar{display:flex;flex-direction:column;width:118px;height:196px;border-radius:var(--radius-btn); overflow:hidden} .fee-bar .seg{flex:1;display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:.08em; text-transform:uppercase;line-height:1.6;padding:8px} .fee-bar--trad .seg{background:var(--surface-ink);color:var(--sombra)} .fee-bar--q .seg.fee{flex:.45;background:var(--quitado);color:var(--tinta);font-weight:700} .fee-bar--q .piso{border-top:2.5px dashed var(--recibo)} .fee-bar--q .seg.base{flex:.55;background:transparent;border:1px dashed var(--hair-dark); border-top:none;border-radius:0 0 var(--radius-btn) var(--radius-btn);color:var(--verde-claro)} .pisolab{margin-top:10px;font-family:var(--font-mono);font-size:var(--text-mono-sm); letter-spacing:.08em;text-transform:uppercase;color:var(--verde-claro)} .fee-note{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--lh-relaxed)} .track.jud .fee-note{color:var(--verde-claro)} /* ---------- tabela comparativa ---------- */ /* Compartilhada pela home e pelos one-pagers: mora em site.css porque os dois bundles a consomem. Alterar aqui muda /#modelo e /unimed/ ao mesmo tempo. */ .cmp-wrap{border:1px solid var(--hair);border-radius:var(--radius-frame);overflow:hidden; background:var(--surface-card)} .cmp-scroll{overflow-x:auto} .cmp{width:100%;border-collapse:collapse;min-width:640px} .cmp caption{caption-side:top;text-align:left;padding:18px 24px 0; font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:var(--ls-badge); text-transform:uppercase;color:var(--text-muted)} .cmp th,.cmp td{padding:15px 24px;text-align:left;vertical-align:top; border-bottom:1px dashed var(--hair);font-size:var(--text-body-sm)} .cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none} .cmp thead th{font-family:var(--font-mono);font-size:var(--text-mono-micro); letter-spacing:var(--ls-row-hdr);text-transform:uppercase;color:var(--text-muted); border-bottom:1px solid var(--hair);padding-top:16px;padding-bottom:14px;font-weight:500} .cmp thead th.q{color:var(--cedula);font-weight:700} .cmp tbody th{font-family:var(--font-mono);font-size:var(--text-mono-sm); letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500; white-space:nowrap} .cmp td.q{background:#FAFDF6;color:var(--tinta)} .cmp .num{font-family:var(--font-mono);color:var(--tinta);font-weight:500} .cmp .weak{color:var(--text-muted)} /* selo de simulação — precisa ser inequívoco: é modelo, não cliente real */ .sim{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px} .sim .txt{font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:.1em; text-transform:uppercase;color:var(--text-muted)} /* quatro colunas de modelo + a coluna de rótulos não cabem em 640px sem espremer os números; a variante rola na horizontal um pouco mais cedo */ .cmp--4{min-width:860px} /* tradicional × Quitta (2 colunas) cabe mais cedo — depois de .cmp para vencer o cascade */ .cmp--2{min-width:560px} .cmp-note{margin-top:22px;max-width:62em;font-size:15px;color:var(--text-muted); line-height:var(--lh-relaxed)} /* ---------- commitment strip ---------- */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin-top:var(--gap-hero)} /* ---------- partner channel ---------- */ .partner-card{background:var(--surface-emerald);color:var(--text-on-ink);border-radius:var(--radius-hero); padding:64px;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-hero);align-items:center} .partner-card h2{color:var(--branco);margin-bottom:0} .partner-card p{color:var(--verde-claro);font-size:var(--text-body-lg);line-height:var(--lh-relaxed)} .partner-card .q-btn{margin-top:28px} /* ---------- CTA ---------- */ .cta-card{background:var(--surface-ink);border-radius:var(--radius-hero);padding:72px 64px;display:grid; grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;overflow:hidden} .cta-card::after{content:"";position:absolute;right:-60px;top:-70px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(163,230,53,.14),transparent 65%)} .cta-card h2{color:var(--branco);margin-top:14px} .cta-card p{color:var(--text-muted-on-ink);font-size:var(--text-body-lg);max-width:30em} .cta-form{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1} .cta-form .q-btn{margin-top:6px} .cta-small{font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--text-muted-on-ink);margin-top:4px} .q-label-opt{color:var(--text-muted-on-ink);letter-spacing:normal;text-transform:none} /* submit result — announced via role=status, and shown to sighted users too */ .cta-status{font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--quitado); margin-top:2px;min-height:1em} .cta-status:empty{display:none} /* ---------- FAQ ---------- */ .faq{max-width:820px} .faq details{border-top:1px solid var(--hair)} .faq details:last-child{border-bottom:1px solid var(--hair)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between; align-items:baseline;gap:18px;padding:22px 4px;font-size:17.5px;font-weight:600;color:var(--text-body)} .faq summary::-webkit-details-marker{display:none} /* indicador +/− em mono — vira sinal de aberto sem depender do marker nativo */ .faq summary::after{content:"+";font-family:var(--font-mono);font-size:18px;line-height:1; color:var(--cedula);flex-shrink:0} .faq details[open] summary::after{content:"−"} .faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} .faq .a{padding:0 4px 24px;color:var(--text-muted);font-size:var(--text-body-sm); line-height:var(--lh-relaxed);max-width:56em} .faq .a strong{color:var(--text-body)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--hair);padding:44px 0;background:var(--surface-page)} .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px} .foot-tag{font-family:var(--font-display);font-style:normal;font-size:17px;color:var(--text-muted)} /* English gloss beside the tagline (en page only) */ .foot-gloss{font-family:var(--font-mono);font-size:var(--text-mono-micro);color:var(--text-muted); letter-spacing:.06em} /* --sombra is 2.06:1 on paper; --cinza-verde reaches 5.23:1 */ .foot-mono{font-family:var(--font-mono);font-size:var(--text-mono-label);color:var(--text-muted);letter-spacing:.08em} /* ---------- scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(18px); transition:opacity var(--speed-reveal) ease,transform var(--speed-reveal) ease} .reveal.in{opacity:1;transform:none} /* ---------- 404 ---------- */ body.page-404{min-height:100vh;display:flex;flex-direction:column} body.page-404 nav{position:static;backdrop-filter:none} body.page-404 .nav-in{justify-content:flex-start} body.page-404 main{flex:1;display:flex;align-items:center;padding:80px 0} body.page-404 .wrap{width:100%} /* the 404 headline is a smaller display cut and carries no negative tracking */ body.page-404 h1{font-size:clamp(34px,4.4vw,52px);line-height:1.14;margin:20px 0 18px;max-width:16em; letter-spacing:normal} /* the LP footer masks the ledger ruling behind a solid surface; the 404 lets it run through */ body.page-404 footer{background:transparent} body.page-404 p.sub{font-size:17.5px;color:var(--text-muted);max-width:34em} body.page-404 p.sub .en{display:block;margin-top:10px;font-size:15.5px;color:var(--sombra)} body.page-404 .ctas{display:flex;gap:16px;align-items:center;margin-top:36px;flex-wrap:wrap} body.page-404 footer{padding:34px 0} /* tighter wrap gap — keeps the footer height (and the vertically-centred main) unchanged */ body.page-404 .foot-in{gap:14px} /* ---------- motion preferences ---------- */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .q-lrow,.reveal{opacity:1!important;transform:none!important} .q-scorebar i{width:var(--w)!important} } /* ---------- responsive ---------- */ /* The anchors go before the pills: they only scroll you around a page you are already on, so losing them costs a scroll, while losing the pills costs the page entirely. 1120 = measured one-row minimum of the full bar (~1094px) plus breathing room. */ @media(max-width:1120px){ .nav-links{display:none} } @media(max-width:1080px){ .pillars--4{grid-template-columns:repeat(2,1fr)} } @media(max-width:880px){ /* Too narrow for logo + pills + CTA on one line (measured minimum ~880px). The pills take their own row below the logo. They wrap instead of scrolling sideways: a sideways-scrolling row hid "Parcerias" past the right edge with nothing on screen to say it was there, and a menu nobody can see is not a menu. Scoped with :has() so the 404 bar, which carries only the logo, keeps its fixed --nav-h instead of collapsing. */ .nav-in:has(.nav-mid){flex-wrap:wrap;height:auto;padding-top:10px} /* width has to grow by the two negative margins, not just 100%: box-sizing is border-box, so width:100% would spend the padding out of the 100% and leave the row narrower than the page — pills wrapping early and the hairline stopping short of the right edge. */ .nav-mid{order:3;width:calc(100% + var(--wrap-pad) * 2);margin:8px calc(var(--wrap-pad) * -1) 0; padding:8px var(--wrap-pad);border-top:1px solid var(--hair); flex-wrap:wrap;row-gap:8px} .nav-pages{flex-wrap:wrap;row-gap:8px} /* An open dropdown drops a full-width sheet under the whole bar instead of a card anchored to its pill: at this width a 232px card next to a right-hand pill would hang off the screen, and the sheet keeps the bar itself the same height whether the menu is open or shut. position:static on the details hands the containing block to