/* ========================================================================== Vazto — design system (new language) The tokens, type scale, buttons, plates, grain and mesh come from go-to-market/index.html. They are COPIED here rather than shared, on purpose: the Go-to-Market page stays self-contained, so nothing written here can change it. When the new Home is approved the two can be folded into one file. Palette rule carried over: cyan is 1.8:1 on white, so on a light ground it is only ever a stroke, fill or border — never text. The light-ground accent for text is #027373. ========================================================================== */ :root{ --ink:#03070d; --ink-2:#0b1d1f; --teal-deep:#025159; --teal:#027373; --cyan:#07d2d2; --cyan-lit:#6ef5f5; --paper:#ffffff; --text:#0b1d1f; --text-soft:#4c6668; --rule:rgba(11,29,31,.13); --on-dark:#f1f7f7; --on-dark-soft:rgba(241,247,247,.8); --rule-dark:rgba(241,247,247,.15); --grad-hero: radial-gradient(78% 50% at 50% 106%, rgba(7,210,210,.18), transparent 74%), radial-gradient(130% 96% at 50% -10%, #05b0a8 0%, #049691 10%, #037c7d 20%, #026568 32%, #025159 46%, #0e3034 66%, #071b1f 84%, #03070d 100%); --grad-dark:linear-gradient(165deg,#0c3033 0%,#071619 56%,#03070d 100%); /* O primeiro tom era o ponto mais claro do site: nem o branco puro chegava a 4.5:1 sobre ele. Dois pontos de luminosidade abaixo resolvem, sem que o degradê mude de carácter. */ --grad-teal:linear-gradient(135deg,#048385 0%,#026a6a 40%,#023f46 100%); --grad-tint:linear-gradient(180deg,#e1e0e1 0%,#e9e9e9 15%,#f1f0f1 25%,#f9f8f8 35%,#fefdfd 50%,#f9f8f8 65%,#f1f0f1 75%,#e9e8e9 85%,#e1e0e1 100%); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); --display:"MuseoModerno",ui-rounded,system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --shell:1160px; --gutter:20px; --block:78px; --mast:66px; --ease:cubic-bezier(.2,.7,.3,1); /* --- O TOPO DAS PÁGINAS INSTITUCIONAIS -------------------------------- Método F.U.T.U.R.O., Sobre a Vazto e a página de Produtos abriam com 652px, 486px e 407px, e com a headline a 50, 60 e 40. Três páginas do mesmo site, três aberturas sem relação nenhuma entre si. Estes três tokens são o contrato. Não obrigam as três a serem iguais — o topo do Método diz mais e por isso é mais alto —, mas passam a partilhar a altura mínima, o respiro e a escala do título, que é onde a inconsistência se via. As páginas de PRODUTO ficam de fora, e de propósito: Search, Flow, Project, Customizer e Go-to-Market têm aberturas próprias, aprovadas, e cada uma com a sua cena. */ --hero-min:clamp(400px,52vh,540px); --hero-pad-topo:calc(var(--mast) + clamp(30px,3.6vw,52px)); --hero-pad-pe:clamp(40px,4.6vw,64px); --hero-h1:clamp(30px,3.8vw,50px); } *,*::before,*::after{ box-sizing:border-box } /* O ATRIBUTO `hidden` GANHA SEMPRE. A folha do navegador esconde-o com `[hidden]{ display:none }`, que é uma regra de especificidade mínima: qualquer `display` posto numa classe ganha-lhe. E como quase tudo neste site declara `display` — `.btn` é `inline-flex`, uma secção de formulário é `grid` —, esconder por atributo simplesmente não funcionava. Custou duas vezes na mesma página: as seis etapas do cadastro do Future Partner apareciam todas ao mesmo tempo, e o botão de submeter estava visível logo na primeira. A segunda é a pior — dava para enviar o formulário antes de responder a nada. O `!important` é aqui a leitura correcta da intenção, e não um atalho: `hidden` quer dizer que o elemento não está na página, e isso não é uma preferência de estilo que outra regra deva poder discutir. */ [hidden]{ display:none !important } html{ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:82px } body{ margin:0; background:var(--paper); color:var(--text); font-family:var(--body); font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.08 } p{ margin:0 } figure,figcaption{ margin:0 } ul,ol{ margin:0; padding:0; list-style:none } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer } img,svg{ display:block; max-inline-size:100% } img{ block-size:auto } ::selection{ background:var(--cyan); color:var(--ink) } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px } .shell{ position:relative; z-index:2; width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter) } .shell--wide{ max-width:1320px } .section{ position:relative; overflow:hidden; padding-block:var(--block) } /* -------------------------------------------------------------------------- Grounds — the light/dark rhythm the Go-to-Market page established -------------------------------------------------------------------------- */ .g-paper{ background:var(--paper) } .g-tint { background:var(--grad-tint) } .g-dark { background:var(--grad-dark); color:var(--on-dark) } .g-teal { background:var(--grad-teal); color:var(--on-dark) } .g-hero { background:var(--grad-hero); color:var(--on-dark) } .g-dark::after,.g-teal::after,.g-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:var(--grain); opacity:.05; mix-blend-mode:overlay; } .g-paper::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(58% 42% at 100% 0%, rgba(2,115,115,.055), transparent 66%), radial-gradient(52% 40% at 0% 100%, rgba(7,210,210,.05), transparent 68%); } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .head{ text-align:center; max-width:820px; margin-inline:auto; margin-block-end:42px } .head--start{ text-align:start; margin-inline:0 } .kicker{ display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); } .g-dark .kicker,.g-teal .kicker,.g-hero .kicker{ color:var(--cyan) } .h1{ font-size:clamp(32px,6.2vw,62px); line-height:1.05; letter-spacing:-.032em } .h2{ font-size:clamp(26px,5.4vw,42px); letter-spacing:-.028em } .h3{ font-size:clamp(18px,4vw,21px); letter-spacing:-.018em; line-height:1.25 } .h1 em,.h2 em,.h3 em{ font-style:normal; color:var(--teal) } .g-dark .h1 em,.g-teal .h1 em,.g-hero .h1 em, .g-dark .h2 em,.g-teal .h2 em,.g-hero .h2 em, .g-dark .h3 em,.g-hero .h3 em{ color:var(--cyan) } .lede{ font-size:clamp(15.5px,3.7vw,18px); line-height:1.58; color:var(--text-soft) } .g-dark .lede,.g-teal .lede,.g-hero .lede{ color:var(--on-dark-soft) } .head .h2{ margin-block-start:12px } /* Essa margem separava o título do mini-título por cima dele. Onde o mini-título saiu — e saiu de todas as secções em que era só uma classificação —, o título passou a ser o primeiro elemento do bloco e a margem virou um vazio no topo. Zera-se só quando ele é mesmo o primeiro: um bloco que ainda tenha mini-título mantém o seu respiro. */ .head > .h2:first-child, .head > .h1:first-child{ margin-block-start:0 } .head .lede{ margin-block-start:14px } /* -------------------------------------------------------------------------- Actions -------------------------------------------------------------------------- */ .btn{ position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-block-size:52px; padding-inline:28px; border-radius:100px; font-size:15.5px; font-weight:600; text-align:center; background:linear-gradient(160deg,#03908f,var(--teal) 55%,#02585e); color:#fff; box-shadow:inset 0 1px 0 rgba(180,255,255,.4),0 10px 24px -12px rgba(2,115,115,.95); transition:transform .22s var(--ease), box-shadow .22s, filter .22s; } .btn:hover{ transform:translateY(-2px); filter:brightness(1.1) } .btn::after{ content:""; position:absolute; inset:-16px; z-index:-1; border-radius:inherit; background:radial-gradient(closest-side, color-mix(in srgb, var(--teal) 88%, transparent), transparent 74%); filter:blur(18px); opacity:.16; transform:scale(.9); transition:opacity .38s ease, transform .38s var(--ease); } .btn:hover::after,.btn:focus-visible::after{ opacity:1; transform:scale(1.1) } .g-dark .btn,.g-hero .btn{ background:linear-gradient(160deg,var(--cyan-lit),var(--cyan) 52%,#049fa0); color:#02272c; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(7,210,210,.35),0 12px 32px -12px rgba(7,210,210,.9); } .g-dark .btn::after,.g-hero .btn::after{ background:radial-gradient(closest-side, rgba(7,210,210,.95), transparent 74%) } .g-teal .btn{ background:linear-gradient(160deg,#fff,#dff7f7); color:var(--teal-deep); box-shadow:inset 0 1px 0 #fff,0 12px 28px -14px rgba(0,0,0,.75) } .g-teal .btn::after{ background:radial-gradient(closest-side, rgba(255,255,255,.72), transparent 74%) } .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-block-size:52px; padding-inline:22px; border-radius:100px; font-size:15.5px; font-weight:600; color:var(--teal); border:1.5px solid color-mix(in srgb,var(--teal) 38%,transparent); transition:border-color .22s, background-color .22s; } .btn-ghost:hover{ border-color:var(--teal); background:rgba(2,115,115,.06) } .g-dark .btn-ghost,.g-hero .btn-ghost,.g-teal .btn-ghost{ color:#eafeff; border-color:rgba(7,210,210,.45) } .g-dark .btn-ghost:hover,.g-hero .btn-ghost:hover,.g-teal .btn-ghost:hover{ border-color:var(--cyan); background:rgba(7,210,210,.1) } /* A seta existe nos dois botões; só o de contorno a tinha dimensionada. */ .btn svg{ inline-size:15px; block-size:15px; transition:transform .22s } .btn:hover svg{ transform:translateX(3px) } .btn-ghost svg{ inline-size:15px; block-size:15px; transition:transform .22s } .btn-ghost:hover svg{ transform:translateX(3px) } /* The WhatsApp mark is a brand glyph, not a directional arrow: a touch larger for legibility, and it must not slide on hover. */ .ico-wa{ inline-size:17px !important; block-size:17px !important; fill:currentColor } .btn-ghost:hover .ico-wa,.btn:hover .ico-wa{ transform:none } .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:28px; align-items:center } /* `.centred` aparece nos dois papéis: a envolver as ações e na própria linha delas. A regra descendente sozinha só apanhava o primeiro. */ .head .actions,.centred .actions,.actions.centred{ justify-content:center } .btn,.btn-ghost{ white-space:nowrap; max-inline-size:100% } @media (max-width:659px){ .btn,.btn-ghost{ white-space:normal; text-wrap:balance; padding-inline:22px; text-align:center } } /* -------------------------------------------------------------------------- Icon plate -------------------------------------------------------------------------- */ .duo-fill{ fill:rgba(110,245,245,.26); stroke:none } .duo-line{ fill:none; stroke:var(--cyan-lit); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round } .plate{ position:relative; flex:none; border-radius:20px; display:grid; place-items:center; background:radial-gradient(80% 70% at 30% 22%,#0a8f92 0%,#04656d 42%,#012e35 100%); box-shadow: inset 0 1.5px 0 rgba(160,255,255,.55), inset 0 -10px 18px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(7,210,210,.42), 0 10px 20px -10px rgba(1,46,53,.9), 0 0 30px -8px rgba(7,210,210,.5); } .plate::before{ content:""; position:absolute; inset-block-start:4px; inset-inline:6px; block-size:34%; border-radius:15px 15px 60% 60%/15px 15px 30% 30%; background:linear-gradient(180deg,rgba(255,255,255,.32),transparent); } .plate svg{ position:relative } /* -------------------------------------------------------------------------- Connection mesh — texture, not decoration; drifts on a long cycle and answers the pointer through --px/--py so depth reads without repainting. -------------------------------------------------------------------------- */ .mesh{ position:absolute; inset:0; z-index:1; pointer-events:none; --px:0; --py:0 } .mesh svg{ inline-size:100%; block-size:100% } /* Watermark weight on purpose: read as texture, never as a foreground graphic. `preserveAspectRatio:none` stretches the 0–100 space across the section, so the strokes are scaled non-uniformly and have to stay very light. */ .mesh line{ stroke:var(--cyan); stroke-width:.35; opacity:.07 } .mesh circle{ fill:var(--cyan-lit); opacity:.14 } .mesh .hub{ opacity:.26 } .mesh--wide line{ opacity:.05 } .mesh--wide circle{ opacity:.1 } .mesh .layer{ transform:translate3d(calc(var(--px) * var(--d)),calc(var(--py) * var(--d)),0); transition:transform .5s ease-out } .mesh .layer--far{ --d:14px } .mesh .layer--near{ --d:34px } @media (prefers-reduced-motion:no-preference){ .mesh .layer > g{ animation:drift 28s ease-in-out infinite; transform-origin:center } .mesh .layer--near > g{ animation-duration:36s; animation-direction:reverse } } @keyframes drift{ 0%,100%{ transform:translate3d(0,0,0) } 50% { transform:translate3d(10px,-8px,0) } } /* -------------------------------------------------------------------------- Reveal — the shared motion primitive -------------------------------------------------------------------------- */ .rv{ opacity:0; transform:translateY(26px); transition:opacity .72s var(--ease), transform .72s var(--ease) } .rv.is-in{ opacity:1; transform:none } .no-js .rv{ opacity:1; transform:none } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .rv{ opacity:1; transform:none; transition:none } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important } } /* -------------------------------------------------------------------------- Line drawing — used by the diagrams that build themselves -------------------------------------------------------------------------- */ .draw{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); transition:stroke-dashoffset 1.5s var(--ease) } .is-in .draw{ stroke-dashoffset:0 } /* CONTRASTE-FUNDO-MEDIO */ /* -------------------------------------------------------------------------- Contraste sobre o teal da marca O ciano institucional sobre o teal institucional dá 3.1:1 — abaixo do mínimo para texto pequeno, e é o par mais repetido do site. Nas secções em teal e no fecho passa ao tom claro do próprio ciano. -------------------------------------------------------------------------- */ /* `.finale` nem sempre é escuro: na página do Método é uma secção clara, e estas cores faziam o texto desaparecer. Nomeiam-se os fechos que são escuros — o da Home tem `g-hero`, o das páginas de produto tem `is-vazto`. */ .g-teal .kicker,.finale.g-hero .kicker,.finale.is-vazto .kicker{ color:#d6fdfd } .g-teal .h2 em,.g-teal .h1 em, .finale.g-hero .h2 em,.finale.is-vazto .h2 em{ color:#b6fbfb } .g-teal .lede,.finale.g-hero .lede,.finale.is-vazto .lede{ color:rgba(241,247,247,.88) } /* A barra fixa passa por cima da secção em teal, onde o cinzento do menu perde contraste. */ .mast__nav a{ color:rgba(241,247,247,.88) } /* CONTRASTE-FUNDO-MEDIO */ /* SELECTOR-4 */ /* O selector tem quatro bandeiras e mostra três: o motor esconde a do idioma em uso. Um