Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Voltar ao template

Fonte de Authentication

HTML completo e independente para estudo e adaptação.

<!doctype html>
<html lang="pt-BR" data-theme="glass">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Authentication template</title>
  <style>
  :root { color-scheme: dark; --ink:#f5f3ff; --muted:#b9b3cc; --surface:#15121f; --panel:#211c31; --line:rgba(255,255,255,.14); --brand:#ff7a1a; --success:#62d7a4; }
  * { box-sizing:border-box; } body { margin:0; min-width:320px; background:#100d18; color:var(--ink); font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
  button, input { font:inherit; } a { color:inherit; } .su-kicker { display:inline-block; color:var(--brand); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
  .sc-btn { min-height:42px; padding:.72rem 1rem; border-radius:.8rem; border:1px solid var(--line); cursor:pointer; font-weight:750; } .sc-btn-primary { border-color:var(--brand); background:var(--brand); color:#fff; } .sc-btn-outline { background:transparent; color:var(--ink); }
  .sc-input { width:100%; min-height:44px; padding:.7rem .8rem; border:1px solid var(--line); border-radius:.7rem; background:#100d18; color:var(--ink); } .sc-card { border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,.04); padding:1rem; }
  .su-template-commercial { display:grid; grid-template-columns:1fr minmax(0,2fr) minmax(180px,.7fr); overflow:hidden; border:1px solid var(--line); border-radius:1.25rem; background:radial-gradient(circle at 80% 20%,rgba(255,122,26,.22),transparent 36%),var(--surface); } .su-template-commercial nav { grid-column:1/-1; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--line); } .su-template-commercial nav span { color:var(--muted); font-size:.85rem; } .su-template-commercial>div { padding:3rem 1.25rem; } .su-template-commercial h2 { max-width:13ch; margin:.6rem 0; font-size:clamp(2rem,5vw,4.5rem); line-height:.95; } .su-template-commercial p { max-width:48ch; color:var(--muted); } .su-template-commercial>div>div { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; } .su-template-commercial aside { display:flex; min-height:360px; flex-direction:column; justify-content:flex-end; gap:.5rem; padding:1.25rem; border-left:1px solid var(--line); background:linear-gradient(160deg,rgba(255,122,26,.22),transparent 55%); } .su-template-commercial aside strong { color:var(--brand); font-size:5rem; line-height:.8; }
  .su-template-app { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:430px; border:1px solid var(--line); border-radius:1.25rem; overflow:hidden; background:var(--surface); } .su-template-app aside { display:flex; flex-direction:column; gap:.4rem; padding:1.25rem; border-right:1px solid var(--line); } .su-template-app aside a { padding:.65rem .7rem; color:var(--muted); text-decoration:none; } .su-template-app aside .is-active { border-radius:.65rem; background:rgba(255,122,26,.16); color:var(--ink); } .su-template-app>div { padding:2rem; } .su-template-app h2 { margin:.5rem 0 1.5rem; font-size:clamp(1.8rem,4vw,3rem); } .su-template-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; } .su-template-kpis article { display:grid; gap:.25rem; padding:1rem; border:1px solid var(--line); border-radius:.85rem; background:#171321; } .su-template-kpis small { color:var(--muted); } .su-template-kpis strong { font-size:1.4rem; } .su-template-kpis em { color:var(--success); font-size:.8rem; font-style:normal; }
  .su-template-auth { display:grid; width:min(100%,440px); gap:.85rem; margin:3rem auto; padding:2rem; border:1px solid var(--line); border-radius:1.25rem; background:linear-gradient(150deg,rgba(255,122,26,.17),transparent 42%),var(--surface); } .su-template-auth h2 { margin:0 0 .6rem; font-size:2.3rem; line-height:1; } .su-template-auth label { display:grid; gap:.4rem; color:var(--muted); font-size:.86rem; } .su-template-auth>a { color:var(--brand); font-size:.9rem; text-align:center; }
  @media (max-width:720px) { .su-template-commercial { grid-template-columns:1fr; } .su-template-commercial nav span { display:none; } .su-template-commercial aside { min-height:150px; border-top:1px solid var(--line); border-left:0; } .su-template-app { grid-template-columns:1fr; } .su-template-app aside { display:none; } .su-template-app>div { padding:1.2rem; } .su-template-kpis { grid-template-columns:1fr; } }

:root{color-scheme:light dark;--tpl-bg:#0c0c0d;--tpl-surface:#151517;--tpl-text:#f7f4f1;--tpl-muted:#aaa4a0;--tpl-line:rgba(255,255,255,.13);--tpl-accent:#e95d22}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--tpl-bg);color:var(--tpl-text);font:15px/1.55 Inter,ui-sans-serif,system-ui,sans-serif}.su-product-template{min-height:100vh;overflow:hidden}.su-product-template h1,.su-product-template h2,.su-product-template h3,.su-product-template p{margin-top:0}.su-product-template h1{font-size:clamp(3rem,8vw,8rem);line-height:.9;letter-spacing:-.07em}.su-product-template h2{font-size:clamp(2rem,5vw,4.7rem);line-height:.95;letter-spacing:-.055em}.su-product-template h3{font-size:1.25rem}.su-product-template p{color:var(--tpl-muted)}.su-product-template>nav,.su-product-template>footer{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.2rem clamp(1rem,5vw,5rem);border-bottom:1px solid var(--tpl-line)}.su-product-template>footer{border-top:1px solid var(--tpl-line);border-bottom:0}.su-product-template .sc-card{border:1px solid var(--tpl-line);background:var(--tpl-surface);color:inherit}.tpl-card-grid,.tpl-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:clamp(2rem,6vw,6rem)}.tpl-card-grid article{min-height:240px;padding:1.4rem}.tpl-card-grid small{color:var(--tpl-accent)}.tpl-card-grid p{margin-bottom:0}
.tpl-saas .sc-btn-outline,.tpl-ai .sc-btn-outline,.tpl-analytics .sc-btn-outline,.tpl-support .sc-btn-outline{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}.tpl-saas .sc-btn-outline:hover,.tpl-ai .sc-btn-outline:hover,.tpl-analytics .sc-btn-outline:hover,.tpl-support .sc-btn-outline:hover{color:#111;background:#fff}
.tpl-startup .sc-btn-outline{color:#fff;border-color:#fff;background:transparent}.tpl-startup .sc-btn-outline:hover{color:#111;background:#fff}.tpl-analytics button{min-height:38px;padding:.55rem .8rem;border:1px solid #ffffff2b;border-radius:.6rem;color:#eaf1fa;background:#0d1a29;font:inherit;cursor:pointer}.tpl-analytics button+button{margin-left:.45rem}.tpl-authentication .sc-btn-primary{color:#fff}
.tpl-saas{background:radial-gradient(circle at 80% 4%,#52220f55,transparent 28%),#0c0c0d}.tpl-saas>header{min-height:720px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding:clamp(4rem,9vw,9rem) 5vw}.tpl-saas>header p{max-width:52ch;font-size:1.15rem}.tpl-saas>header>div{display:flex;flex-wrap:wrap;gap:.7rem}.tpl-saas>header>div>span,.tpl-saas>header>div>h1,.tpl-saas>header>div>p{width:100%}.tpl-product-window{min-height:430px;display:grid;align-content:end;gap:1rem;padding:2rem;border:1px solid #ffffff1f;border-radius:2rem;background:linear-gradient(145deg,#211a18,#0d0d0e);box-shadow:0 35px 90px #0008}.tpl-product-window i{display:block;height:54px;border-radius:.8rem;background:linear-gradient(90deg,#e95d2233,#ffffff09)}.tpl-logo-row,.tpl-integrations>div,.tpl-clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;gap:2rem;padding:2rem 5vw;border-block:1px solid var(--tpl-line);color:#817c78}.tpl-bento,.tpl-pricing{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1px;padding:1px;background:var(--tpl-line)}.tpl-bento>*{min-height:260px;padding:2rem;background:#101011}.tpl-bento>div{grid-row:span 2}.tpl-steps,.tpl-integrations,.tpl-pricing,.tpl-faq,.tpl-saas>figure{padding:clamp(3rem,7vw,8rem) 5vw}.tpl-steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;list-style:none}.tpl-steps li{padding:2rem;border:1px solid var(--tpl-line)}.tpl-saas>figure blockquote{max-width:18ch;margin:0;font-size:clamp(2.2rem,6vw,5rem);line-height:1}.tpl-pricing{grid-template-columns:1fr auto;align-items:end}.tpl-pricing article{display:grid;gap:.8rem;padding:2rem;border:1px solid var(--tpl-accent);border-radius:1.2rem}.tpl-pricing b{font-size:3rem}
.tpl-startup{--tpl-accent:#f7ff47;background:#151515;color:#fafafa}.tpl-startup .sc-btn-primary{background:var(--tpl-accent)!important;color:#111!important;border-color:#111!important}.tpl-startup>nav,.tpl-startup>footer{border-color:#fff}.tpl-startup>header{padding:8vw 4vw;border-bottom:1px solid #fff}.tpl-startup>header h1{text-transform:uppercase;font-size:clamp(4rem,13vw,12rem)}.tpl-startup>header p{max-width:42ch;font-size:1.35rem}.tpl-startup-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #fff}.tpl-startup-metrics b{padding:2rem;border-right:1px solid #fff;font-size:1.5rem}.tpl-problem,.tpl-product-strip,.tpl-traction,.tpl-team,.tpl-startup-cta{padding:clamp(4rem,9vw,9rem) 4vw}.tpl-problem{display:grid;grid-template-columns:.4fr 1fr;gap:5vw}.tpl-solution{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #fff}.tpl-solution>div{min-height:300px;padding:2rem;border-right:1px solid #fff}.tpl-solution span{font-size:4rem}.tpl-product-strip{display:grid;grid-template-columns:1fr 1fr;background:var(--tpl-accent);color:#111}.tpl-product-strip p{color:#333}.tpl-product-strip aside{display:grid;gap:.6rem}.tpl-product-strip i{height:38px;background:#111}.tpl-product-strip strong{font-size:5rem}.tpl-traction{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}.tpl-traction div{display:grid;align-content:end;border-top:1px solid #fff}.tpl-traction b{font-size:4rem}.tpl-team div{display:flex;flex-wrap:wrap;gap:1rem}.tpl-team span{padding:.7rem 1rem;border:1px solid #fff;border-radius:999px}.tpl-startup-cta{display:flex;align-items:end;justify-content:space-between;background:#fff;color:#111}
.tpl-ai{background:radial-gradient(circle at 50% -10%,#183d70,#060a12 38%);font-family:"Space Grotesk",Inter,sans-serif}.tpl-ai>header{min-height:700px;display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:center;padding:7vw 5vw}.tpl-ai-console{padding:1.2rem;border:1px solid #6ba4ff55;border-radius:1rem;background:#07101de8;box-shadow:0 0 70px #2d74d733}.tpl-ai-console p{padding:1rem;border-bottom:1px solid #ffffff12}.tpl-ai-console b{color:#79b0ff}.tpl-ai-console div{display:flex;gap:.7rem}.tpl-ai-console span,.tpl-models b{padding:.55rem .75rem;border:1px solid #6ba4ff44;border-radius:.55rem;color:#9fc5ff}.tpl-ai-usecases,.tpl-before-after,.tpl-ai-workflow,.tpl-models,.tpl-security,.tpl-ai-pricing,.tpl-ai .tpl-faq{padding:clamp(3rem,7vw,7rem) 5vw}.tpl-ai-grid{padding:0;grid-template-columns:repeat(4,1fr)}.tpl-before-after{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}.tpl-before-after>div{min-height:230px;padding:2rem;border:1px solid #ffffff19;border-radius:1rem}.tpl-ai-workflow ol{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:0;list-style-position:inside}.tpl-ai-workflow li{padding:1.5rem;border-top:1px solid #69a6ff}.tpl-models{background:#eaf2ff;color:#0b1730}.tpl-models>div{display:flex;flex-wrap:wrap;gap:.7rem}.tpl-models b{color:#174d9c;border-color:#174d9c55}.tpl-security{display:grid;grid-template-columns:1fr .4fr;align-items:end}
.tpl-agency{background:#f0ede5;color:#141311;font-family:Georgia,serif;--tpl-muted:#5f5a52;--tpl-line:#28241d38}.tpl-agency .sc-btn{font-family:Inter,sans-serif}.tpl-agency>nav{font-family:Inter,sans-serif}.tpl-agency>header{min-height:660px;display:grid;align-content:end;padding:5vw}.tpl-agency>header h1{max-width:12ch;font-weight:400}.tpl-work{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;padding:0 5vw 8vw}.tpl-work article:first-child{grid-column:span 7}.tpl-work article:nth-child(2){grid-column:span 5;margin-top:8rem}.tpl-work article:nth-child(3){grid-column:3/span 6}.tpl-media{height:clamp(280px,44vw,680px);background:linear-gradient(145deg,#1d322a,#ba8d61)}.tpl-work article:nth-child(2) .tpl-media{background:linear-gradient(145deg,#49325d,#d2a0aa)}.tpl-work article:nth-child(3) .tpl-media{background:linear-gradient(145deg,#9aa5a8,#eee)}.tpl-work h2{margin-top:1rem;font-size:2rem}.tpl-case,.tpl-services,.tpl-agency>figure,.tpl-agency-contact{padding:8vw 5vw}.tpl-case{display:grid;grid-template-columns:1fr 2fr;gap:4vw;border-block:1px solid var(--tpl-line)}.tpl-case h2{grid-column:2}.tpl-case b{grid-column:2;font-size:4rem}.tpl-services{display:grid;grid-template-columns:1fr 1fr}.tpl-services ul{margin:0;padding:0;list-style:none;font-size:2rem}.tpl-process{display:flex;align-items:center;gap:1rem;padding:2rem 5vw;font-family:Inter,sans-serif}.tpl-process i{height:1px;flex:1;background:currentColor}.tpl-agency>figure blockquote{max-width:18ch;margin:0;font-size:4rem;line-height:1}.tpl-agency-contact{display:flex;align-items:end;justify-content:space-between;background:#191713;color:#fff}
.tpl-portfolio{background:#f7f7f4;color:#151515;--tpl-muted:#62625e;--tpl-line:#15151524}.tpl-portfolio>header{padding:9vw 4vw 5vw}.tpl-portfolio>header h1{max-width:15ch;font-weight:450}.tpl-featured-project{display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;padding:2vw 4vw 7vw}.tpl-portfolio-art{min-height:620px;display:grid;place-items:center;background:#d6ff3f;font-size:10vw}.tpl-featured-project aside{align-self:end}.tpl-project-list{padding:0 4vw}.tpl-project-list article{display:grid;grid-template-columns:80px 1fr auto;align-items:center;padding:1.5rem 0;border-top:1px solid var(--tpl-line)}.tpl-project-list h3{margin:0;font-size:2rem}.tpl-about,.tpl-skills,.tpl-recognition,.tpl-portfolio-contact{padding:8vw 4vw}.tpl-about{display:grid;grid-template-columns:1.4fr .6fr;gap:4vw}.tpl-skills,.tpl-recognition{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-block:1px solid var(--tpl-line)}.tpl-portfolio-contact h2{font-size:clamp(2.5rem,8vw,8rem)}
.tpl-commerce{background:#f5efe7;color:#241d18;--tpl-muted:#71665e;--tpl-line:#38291f2c}.tpl-promo{text-align:center;padding:.55rem;background:#2f493a;color:#fff}.tpl-commerce>nav{padding-block:1.6rem}.tpl-commerce>header{display:grid;grid-template-columns:.8fr 1.2fr;min-height:680px}.tpl-commerce>header>div{align-self:center;padding:5vw}.tpl-commerce-hero-art{background:radial-gradient(circle at 50% 45%,#f7dfb4 0 12%,transparent 13%),linear-gradient(145deg,#a4b4a2,#ede0ce)}.tpl-categories{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--tpl-line)}.tpl-categories a{padding:2rem;text-align:center;border-right:1px solid var(--tpl-line)}.tpl-products{padding:7vw 4vw}.tpl-products>div{display:flex;justify-content:space-between}.tpl-product-grid{padding:1rem 0 0;grid-template-columns:repeat(4,1fr)}.tpl-product-grid article{min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(#ffffff55,#c9bca6)}.tpl-commerce-campaign,.tpl-benefits,.tpl-newsletter,.tpl-commerce>figure{padding:6vw 4vw}.tpl-commerce-campaign{display:flex;align-items:end;justify-content:space-between;min-height:430px;background:#2f493a;color:#fff}.tpl-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.tpl-benefits div{display:grid;border-top:1px solid var(--tpl-line);padding-top:1rem}.tpl-commerce>figure blockquote{font-size:3rem}.tpl-newsletter{display:grid;grid-template-columns:1fr 1fr;align-items:end}.tpl-newsletter>div{display:flex}
.tpl-dashboard,.tpl-crm{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:#f3f4f6;color:#18202b;--tpl-muted:#667080;--tpl-line:#1c27321c}.tpl-dashboard>aside,.tpl-crm>aside{display:flex;flex-direction:column;gap:2rem;padding:1.5rem;background:#121821;color:#fff}.tpl-dashboard>aside nav,.tpl-crm>aside nav{line-height:2.8;color:#aeb7c4}.tpl-dashboard>aside small{margin-top:auto}.tpl-dashboard>main,.tpl-crm>main{padding:2rem}.tpl-dashboard main>header,.tpl-crm main>header{display:flex;justify-content:space-between;align-items:center}.tpl-dashboard h1,.tpl-crm h1{font-size:3rem}.tpl-kpis,.tpl-forecast,.tpl-analytics-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.tpl-kpis article,.tpl-forecast div,.tpl-analytics-kpis article{display:grid;gap:.5rem;padding:1.2rem;border:1px solid var(--tpl-line);border-radius:.8rem;background:#fff}.tpl-kpis b,.tpl-forecast b,.tpl-analytics-kpis b{font-size:1.8rem}.tpl-kpis em,.tpl-analytics-kpis em{color:#14845c;font-style:normal}.tpl-dashboard-grid,.tpl-dashboard-bottom,.tpl-crm-detail{display:grid;grid-template-columns:1.4fr .6fr;gap:1rem;margin-top:1rem}.tpl-dashboard-grid>article,.tpl-dashboard-bottom>article,.tpl-crm-detail>article,.tpl-crm-inbox{padding:1.4rem;border:1px solid var(--tpl-line);border-radius:.8rem;background:#fff}.tpl-chart{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;min-height:280px}.tpl-chart>div{grid-column:1/-1}.tpl-chart i{height:var(--h,70%);min-height:60px;margin:.4rem;background:#cf5b2e}.tpl-chart i:nth-of-type(2){min-height:110px}.tpl-chart i:nth-of-type(3){min-height:90px}.tpl-chart i:nth-of-type(4){min-height:160px}.tpl-chart i:nth-of-type(5){min-height:130px}.tpl-chart i:nth-of-type(6){min-height:190px}.tpl-data-table{margin-top:1rem;padding:1.2rem;border:1px solid var(--tpl-line);border-radius:.8rem;background:#fff}.tpl-data-table>div,.tpl-data-table p{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1rem;align-items:center;border-bottom:1px solid var(--tpl-line);padding:.8rem}.tpl-pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem;overflow:auto}.tpl-pipeline>div{min-width:240px}.tpl-pipeline h2{font-size:1rem}.tpl-pipeline article{display:grid;gap:.5rem;margin-bottom:.8rem;padding:1rem;border:1px solid var(--tpl-line);border-radius:.7rem;background:#fff}.tpl-crm-inbox{margin-top:1rem}.tpl-crm-inbox p{display:grid;grid-template-columns:1fr 2fr auto;gap:1rem}
.tpl-analytics{min-height:100vh;padding:2rem clamp(1rem,4vw,4rem);background:#07101b;color:#eaf1fa;--tpl-muted:#8292a6;--tpl-line:#ffffff18}.tpl-analytics>header{display:flex;justify-content:space-between;align-items:center}.tpl-analytics h1{font-size:3rem}.tpl-analytics>nav{padding:1rem 0;border-bottom:1px solid var(--tpl-line)}.tpl-analytics-kpis{grid-template-columns:repeat(3,1fr);margin-top:1.5rem}.tpl-analytics-kpis article,.tpl-analytics-chart,.tpl-analytics-split article,.tpl-cohorts,.tpl-analytics .tpl-data-table{background:#0d1a29;color:inherit;border-color:var(--tpl-line)}.tpl-analytics-chart{margin-top:1rem;padding:1.5rem;border:1px solid var(--tpl-line);border-radius:.8rem}.tpl-analytics-chart svg{width:100%;max-height:260px;overflow:visible}.tpl-analytics-chart polyline{fill:none;stroke:#55a4ff;stroke-width:5}.tpl-analytics-split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.tpl-analytics-split article,.tpl-cohorts{padding:1.5rem;border:1px solid var(--tpl-line);border-radius:.8rem}.tpl-analytics-split p{display:flex;justify-content:space-between}.tpl-cohorts{margin-top:1rem}.tpl-cohorts>div{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem;margin:.3rem}.tpl-cohorts i{padding:1rem;background:#2b77cb;text-align:center;font-style:normal}
.tpl-authentication{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#0c1018}.tpl-authentication>aside{display:flex;flex-direction:column;justify-content:space-between;padding:4vw;background:radial-gradient(circle at 30% 20%,#516ea6aa,transparent 34%),linear-gradient(145deg,#1a2843,#10141d)}.tpl-authentication>aside h1{font-size:clamp(3rem,7vw,6rem)}.tpl-authentication>aside blockquote{font-size:1.4rem}.tpl-authentication>main{width:min(100%,520px);display:grid;align-content:center;gap:1rem;padding:4vw;margin:auto}.tpl-authentication>main h2{font-size:2.7rem}.tpl-authentication label{display:grid;gap:.4rem}.tpl-authentication a{text-align:center;color:#8bb5ff}.tpl-auth-divider{display:flex;align-items:center;gap:1rem}.tpl-auth-divider:before,.tpl-auth-divider:after{content:"";height:1px;flex:1;background:var(--tpl-line)}
.tpl-auth-patterns{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding:clamp(3rem,7vw,7rem) 4vw;background:#111722}.tpl-auth-patterns>header{grid-column:1/-1;display:grid;grid-template-columns:.5fr 1.5fr;align-items:end}.tpl-auth-patterns>header h2{margin:0}.tpl-auth-patterns>article{min-height:260px;display:grid;align-content:end;gap:1rem;padding:1.3rem;border:1px solid #ffffff18;border-radius:1rem;background:#171e2b}.tpl-auth-patterns>article small{color:#8bb5ff}.tpl-auth-patterns>article strong{font-size:1.3rem}.tpl-auth-patterns .is-illustrated>div{min-height:120px;border-radius:.8rem;background:radial-gradient(circle at 65% 35%,#fff 0 4%,transparent 5%),linear-gradient(145deg,#516ea6,#273754)}.tpl-auth-patterns .is-glass{background:linear-gradient(145deg,#ffffff12,#ffffff05);backdrop-filter:blur(12px)}.tpl-auth-patterns .is-enterprise{border-color:#8bb5ff66}
.tpl-docs{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr) 190px;grid-template-rows:auto 1fr;background:#fff;color:#19202b;--tpl-muted:#667080;--tpl-line:#1c27321c}.tpl-docs>header{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:2rem;padding:1rem 1.4rem;border-bottom:1px solid var(--tpl-line)}.tpl-docs>aside{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;border-right:1px solid var(--tpl-line)}.tpl-docs>aside b{margin-top:1rem}.tpl-docs a{color:var(--tpl-muted)}.tpl-docs .is-active{color:#d4521e}.tpl-docs>main{padding:2rem 4vw}.tpl-docs>main>nav{font-size:.8rem;color:var(--tpl-muted)}.tpl-docs article{max-width:780px}.tpl-docs article h1{font-size:4rem}.tpl-docs pre{overflow:auto;padding:1.2rem;border-radius:.7rem;background:#121821;color:#dce7f5}.tpl-doc-callout,.tpl-doc-preview{padding:1.2rem;border:1px solid #d4521e55;border-radius:.7rem;background:#fff8f4}.tpl-doc-preview{display:flex;align-items:center;justify-content:space-between}.tpl-docs article>footer{display:flex;justify-content:space-between;margin-top:4rem;padding-top:1rem;border-top:1px solid var(--tpl-line)}.tpl-doc-toc{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;flex-direction:column;padding:2rem 1rem!important;border:0!important;border-left:1px solid var(--tpl-line)!important}
.tpl-pricing-page{background:#f7f8fa;color:#17202c;--tpl-muted:#667080;--tpl-line:#1923321f}.tpl-pricing-page>header{text-align:center;padding:7vw 4vw 3vw}.tpl-pricing-page>header h1{max-width:13ch;margin-inline:auto}.tpl-billing-toggle{display:inline-flex;padding:.25rem;border:1px solid var(--tpl-line);border-radius:999px}.tpl-billing-toggle button{padding:.7rem 1rem;border:0;border-radius:999px;background:transparent}.tpl-billing-toggle .is-active{background:#1c2736;color:#fff}.tpl-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem 4vw 6vw}.tpl-plan-grid article{display:flex;flex-direction:column;min-height:450px;padding:2rem;border:1px solid var(--tpl-line);border-radius:1rem;background:#fff}.tpl-plan-grid .is-featured{transform:translateY(-1rem);border:2px solid #d4521e}.tpl-plan-grid b{font-size:3rem}.tpl-plan-grid ul{display:grid;gap:.7rem;padding-left:1rem}.tpl-plan-grid .sc-btn{margin-top:auto}.tpl-usage,.tpl-comparison,.tpl-pricing-page .tpl-faq,.tpl-enterprise{padding:5vw 4vw}.tpl-comparison p{display:grid;grid-template-columns:2fr repeat(3,1fr);padding:1rem;border-bottom:1px solid var(--tpl-line)}.tpl-enterprise{display:flex;align-items:end;justify-content:space-between;background:#17202c;color:#fff}
.tpl-support{background:#f5f7fb;color:#1d2734;--tpl-muted:#697482;--tpl-line:#1c27321c}.tpl-support>header{text-align:center;padding:7vw 4vw;background:linear-gradient(145deg,#e6efff,#fff)}.tpl-support>header h1{font-size:5rem}.tpl-support>header>div{width:min(100%,720px);display:flex;margin:auto}.tpl-support-categories,.tpl-popular,.tpl-support-status,.tpl-support-contact,.tpl-ticket{padding:5vw}.tpl-support-categories .tpl-card-grid{padding:0;grid-template-columns:repeat(3,1fr)}.tpl-support-categories .sc-card{background:#fff;color:inherit}.tpl-popular{display:grid;grid-template-columns:1fr 1fr}.tpl-popular li{padding:1rem;border-bottom:1px solid var(--tpl-line)}.tpl-support-status{display:flex;align-items:center;justify-content:space-between;background:#1f4937;color:#fff}.tpl-support-status>div{display:flex;align-items:center;gap:1rem}.tpl-support-status i{width:12px;height:12px;border-radius:50%;background:#59d39d;box-shadow:0 0 0 8px #59d39d22}.tpl-support-status span,.tpl-support-status b,.tpl-support-status small{display:block}.tpl-support-contact>div{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.tpl-support-contact article{padding:2rem;border:1px solid var(--tpl-line);border-radius:1rem;background:#fff}.tpl-ticket{display:flex;align-items:end;justify-content:space-between;border-top:1px solid var(--tpl-line)}
@media(max-width:900px){.tpl-saas>header,.tpl-ai>header,.tpl-commerce>header,.tpl-featured-project,.tpl-about,.tpl-authentication,.tpl-docs{grid-template-columns:1fr}.tpl-product-window{min-height:320px}.tpl-ai-grid,.tpl-product-grid,.tpl-auth-patterns{grid-template-columns:repeat(2,1fr)}.tpl-work article,.tpl-work article:first-child,.tpl-work article:nth-child(2),.tpl-work article:nth-child(3){grid-column:span 12;margin-top:0}.tpl-dashboard,.tpl-crm{grid-template-columns:76px 1fr}.tpl-dashboard>aside nav,.tpl-crm>aside nav,.tpl-dashboard>aside small,.tpl-crm>aside input{display:none}.tpl-docs>header{grid-column:1;grid-template-columns:1fr}.tpl-docs>aside,.tpl-doc-toc{display:none!important}}
@media(max-width:680px){.su-product-template>nav{align-items:flex-start}.su-product-template>nav>div,.su-product-template>nav>span{display:none}.tpl-card-grid,.tpl-product-grid,.tpl-plan-grid,.tpl-support-categories .tpl-card-grid,.tpl-benefits,.tpl-kpis,.tpl-forecast,.tpl-analytics-kpis,.tpl-analytics-split,.tpl-dashboard-grid,.tpl-dashboard-bottom,.tpl-crm-detail,.tpl-ai-workflow ol,.tpl-startup-metrics,.tpl-solution,.tpl-steps ol,.tpl-auth-patterns{grid-template-columns:1fr}.tpl-saas>header{padding:5rem 1rem}.tpl-bento,.tpl-pricing,.tpl-problem,.tpl-product-strip,.tpl-traction,.tpl-services,.tpl-before-after,.tpl-security,.tpl-newsletter,.tpl-popular{grid-template-columns:1fr}.tpl-bento>div{grid-row:auto}.tpl-startup>header h1{font-size:4rem}.tpl-startup-cta,.tpl-agency-contact,.tpl-commerce-campaign,.tpl-enterprise,.tpl-ticket{align-items:flex-start;flex-direction:column;gap:2rem}.tpl-case{grid-template-columns:1fr}.tpl-case h2,.tpl-case b{grid-column:1}.tpl-portfolio-art{min-height:380px}.tpl-project-list article{grid-template-columns:50px 1fr}.tpl-project-list article span{display:none}.tpl-commerce>header{min-height:620px}.tpl-commerce-hero-art{min-height:320px}.tpl-categories{grid-template-columns:repeat(2,1fr)}.tpl-dashboard,.tpl-crm{display:block}.tpl-dashboard>aside,.tpl-crm>aside{display:none}.tpl-dashboard>main,.tpl-crm>main{padding:1rem}.tpl-dashboard main>header,.tpl-crm main>header,.tpl-analytics>header{align-items:flex-start;flex-direction:column}.tpl-pipeline{grid-template-columns:repeat(3,260px)}.tpl-crm-inbox p{grid-template-columns:1fr}.tpl-data-table{overflow:auto}.tpl-data-table>div,.tpl-data-table p{min-width:620px}.tpl-authentication>aside{min-height:400px}.tpl-authentication>main{padding:3rem 1rem}.tpl-auth-patterns>header{grid-template-columns:1fr}.tpl-docs>main{padding:2rem 1rem}.tpl-docs article h1{font-size:2.8rem}.tpl-plan-grid .is-featured{transform:none}.tpl-support>header h1{font-size:3rem}.tpl-support>header>div{display:grid}.tpl-support-contact>div{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.su-product-template *{animation:none!important;transition:none!important}}
</style>
</head>
<body>
  <!-- Authentication template: composição autossuficiente. Troque textos, dados e ações pelo conteúdo do seu produto. -->
  <div class="su-product-template tpl-authentication"><aside><strong>Arc</strong><div><small>OPERAÇÃO SEGURA</small><h1>Seu trabalho continua de onde parou.</h1><p>Acesso protegido, sessões auditáveis e recuperação sem atrito.</p></div><blockquote>“Segurança que não aparece como obstáculo.”</blockquote></aside><main><span>ACESSO</span><h2>Entre na sua conta</h2><p>Use seu e-mail profissional para continuar.</p><label>E-mail<input class="sc-input" type="email" placeholder="nome@empresa.com"></label><label>Senha<input class="sc-input" type="password" placeholder="Sua senha"></label><button class="sc-btn sc-btn-primary" type="button">Continuar</button><div class="tpl-auth-divider"><span>ou</span></div><button class="sc-btn sc-btn-outline" type="button">Continuar com SSO</button><a href="/docs/accessibility/">Esqueci minha senha</a><small>Primeiro acesso? Solicite um convite ao administrador.</small></main><section class="tpl-auth-patterns"><header><span>PADRÕES DE ACESSO</span><h2>Uma linguagem para cada contexto.</h2></header><article class="is-minimal"><small>MINIMAL</small><strong>Acesso rápido</strong><input class="sc-input" placeholder="E-mail"></article><article class="is-illustrated"><small>ILLUSTRATED</small><strong>Primeiro acesso</strong><div aria-hidden="true"></div></article><article class="is-glass"><small>GLASS</small><strong>Confirmar identidade</strong><input class="sc-input" placeholder="Código de 6 dígitos"></article><article class="is-enterprise"><small>ENTERPRISE</small><strong>Workspace corporativo</strong><button class="sc-btn sc-btn-outline" type="button">Continuar com SSO</button></article></section></div>
</body>
</html>