<header class="page-header">
<figure class="page-logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 220 110" style="enable-background:new 0 0 220 110;" xml:space="preserve">
<style type="text/css">
.st0{fill:#107CB8;}
.st1{fill:#A6B3BF;stroke:#A6B3BF;stroke-width:0.2268;stroke-miterlimit:10;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#A7B3BF;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#107CB8;}
.st4{fill:#107CB8;stroke:#107CB8;stroke-width:3.9685;stroke-miterlimit:10;}
</style>
<g id="XMLID_23_">
<path id="XMLID_21_" class="st0" d="M163,14.1c3.5,2.7,6.1,6.7,6.8,12l0.1,0.9l-0.9,0l-8.6,0.3l-0.7,0l-0.1-0.7
c-0.5-2.3-1.9-3.9-3.7-5.1c-2.2-1.4-5.1-2-7.7-2c-2.1,0-4.2,0.4-6.2,1.2c-1.6,0.7-3.1,1.7-4.1,3c-0.5,0.7-0.9,1.4-1.1,2.2
c-0.2,0.9-0.3,1.8-0.2,2.8v0c0.2,2.7,1.8,4.2,4.1,5.2c2.5,1,5.7,1.3,8.8,1.6h0c4.2,0.5,8.9,1.3,12.9,3.3c4.1,2,7.4,5.1,8.6,10.2
l0,0c0.1,0.7,0.2,1.4,0.3,2.1c0.1,0.7,0.1,1.4,0.1,2c0,5.7-2.6,10.3-6.6,13.5c-4.5,3.7-10.6,5.6-16.6,5.6c-5.2,0-11-1.7-15.4-5
c-3.8-2.8-6.5-6.8-7.1-12l0,0l-0.1-1.6l0-0.9l0.9,0c3.2-0.1,6.4-0.2,9.6-0.2l0.1,0.8l0,0.4l0.1,0.5c0.2,2.3,1.7,4.1,3.6,5.4
c2.4,1.6,5.6,2.4,8.5,2.4c3.3,0,6.7-1,9.2-2.8c2.1-1.5,3.5-3.6,3.5-6.2c0-0.5-0.1-1.2-0.2-1.9l0,0c-0.4-1.9-2-3.1-4.2-3.8
c-2.3-0.8-5.3-1.1-8.3-1.4c-4.5-0.4-9.3-1.1-13.3-3.1l-0.8-0.4c-4.2-2.3-7.4-6.1-7.9-12.7l0,0c-0.2-2.2,0-4.3,0.6-6.4
c0.6-2,1.5-3.9,2.8-5.6c2-2.7,4.8-4.7,8-6.1c3.4-1.5,7.1-2.2,10.8-2.2C153.7,9.5,159,11,163,14.1L163,14.1z"/>
<polygon id="XMLID_20_" class="st0" points="41.8,52.6 27.6,31.5 27.6,71.1 27.6,71.9 26.7,71.9 18.1,71.9 17.2,71.9 17.2,71.1
17.2,11 17.2,10.1 18.1,10.1 25.1,10.1 25.5,10.1 25.8,10.5 45,38.7 64.1,10.5 64.4,10.1 64.8,10.1 71.7,10.1 72.5,10.1 72.5,11
72.5,71.1 72.5,71.9 71.7,71.9 63.1,71.9 62.3,71.9 62.3,71.1 62.3,31.5 48.1,52.6 47.8,52.9 47.4,52.9 42.5,52.9 42,52.9 "/>
<path id="XMLID_31_" class="st1" d="M30.1,87.3c0-0.5-0.2-0.9-0.5-1.4c-0.3-0.5-0.7-0.9-1.2-1.2c-0.5-0.4-1.1-0.7-1.8-0.9
c-0.7-0.2-1.5-0.3-2.3-0.3c-0.9,0-1.7,0.1-2.4,0.4c-0.8,0.3-1.4,0.7-2,1.2c-0.6,0.5-1,1.1-1.4,1.9c-0.3,0.8-0.5,1.6-0.5,2.6
c0,0.9,0.2,1.6,0.5,2.3c0.3,0.7,0.7,1.3,1.3,1.9c0.6,0.5,1.2,0.9,2,1.2c0.8,0.3,1.6,0.4,2.5,0.4c1.5,0,2.8-0.4,3.8-1.1
c1.1-0.7,1.8-1.8,2-3.2h-1c-0.2,1.1-0.8,1.9-1.7,2.5c-0.9,0.6-2,0.9-3.2,0.9c-0.9,0-1.8-0.2-2.5-0.5c-0.7-0.3-1.2-0.7-1.6-1.3
c-0.4-0.5-0.7-1-0.9-1.6c-0.2-0.6-0.3-1.1-0.3-1.6c0-0.7,0.1-1.3,0.3-1.9c0.2-0.6,0.6-1.2,1-1.7c0.4-0.5,1-0.9,1.7-1.1
c0.7-0.3,1.4-0.4,2.3-0.4c0.7,0,1.3,0.1,1.8,0.3c0.6,0.2,1.1,0.4,1.5,0.7c0.4,0.3,0.8,0.6,1,1c0.2,0.4,0.4,0.7,0.4,1.1H30.1z
M32.4,89.4c0-0.7,0.1-1.3,0.3-1.9c0.2-0.6,0.6-1.1,1-1.6c0.5-0.5,1-0.9,1.7-1.1c0.7-0.3,1.4-0.4,2.3-0.4c0.9,0,1.6,0.1,2.3,0.4
c0.7,0.3,1.2,0.7,1.7,1.1s0.8,1,1,1.6c0.2,0.6,0.3,1.2,0.3,1.9s-0.1,1.3-0.3,1.9c-0.2,0.6-0.6,1.1-1,1.6c-0.4,0.5-1,0.9-1.7,1.1
c-0.7,0.3-1.4,0.4-2.3,0.4c-0.8,0-1.6-0.1-2.3-0.4c-0.7-0.3-1.2-0.7-1.7-1.1c-0.5-0.5-0.8-1-1-1.6C32.5,90.7,32.4,90,32.4,89.4
L32.4,89.4z M31.4,89.4c0,0.8,0.1,1.5,0.4,2.3s0.7,1.4,1.2,1.9c0.5,0.5,1.2,1,2,1.3c0.8,0.3,1.7,0.5,2.6,0.5c1,0,1.8-0.2,2.6-0.5
s1.4-0.7,2-1.3c0.5-0.6,1-1.2,1.2-1.9c0.3-0.7,0.4-1.5,0.4-2.3c0-0.8-0.1-1.5-0.4-2.3c-0.3-0.7-0.7-1.4-1.2-1.9
c-0.5-0.6-1.2-1-2-1.3c-0.8-0.3-1.7-0.5-2.6-0.5c-1,0-1.8,0.2-2.6,0.5c-0.8,0.3-1.5,0.7-2,1.3c-0.5,0.5-0.9,1.2-1.2,1.9
C31.5,87.8,31.4,88.6,31.4,89.4L31.4,89.4z M45.8,95h1v-6.5c0-0.5,0.1-1,0.3-1.5c0.2-0.5,0.5-0.9,0.9-1.3c0.4-0.4,0.9-0.7,1.5-0.9
c0.6-0.2,1.3-0.3,2.1-0.3c0.8,0,1.5,0.1,2,0.3c0.5,0.2,1,0.4,1.3,0.8c0.3,0.3,0.5,0.7,0.7,1.2c0.1,0.5,0.2,1,0.2,1.6V95h1v-6.9
c0-0.5,0-1-0.1-1.5c-0.1-0.5-0.3-0.9-0.6-1.4c-0.3-0.5-0.8-0.9-1.6-1.2c-0.7-0.3-1.7-0.5-2.9-0.5c-1.2,0-2.2,0.2-2.9,0.7
c-0.8,0.5-1.4,1.1-1.8,1.8h0v-2.2h-1V95z M68.7,87.1c0-0.5-0.1-0.9-0.3-1.4c-0.2-0.4-0.5-0.8-0.8-1.1c-0.4-0.3-0.9-0.6-1.6-0.8
c-0.7-0.2-1.5-0.3-2.5-0.3c-0.9,0-1.7,0.1-2.3,0.3c-0.6,0.2-1.1,0.5-1.5,0.8c-0.3,0.3-0.6,0.7-0.7,1c-0.1,0.4-0.2,0.7-0.2,1.1
c0,0.5,0.1,0.9,0.3,1.2c0.2,0.4,0.4,0.6,0.7,0.8c0.3,0.2,0.6,0.4,1,0.5c0.4,0.1,0.7,0.2,1.1,0.2l3.9,0.5c0.7,0.1,1.2,0.3,1.6,0.6
c0.4,0.3,0.6,0.8,0.6,1.4c0,0.8-0.3,1.4-1,1.8s-1.7,0.6-3.1,0.6c-1,0-1.8-0.1-2.5-0.3s-1.1-0.4-1.4-0.7c-0.3-0.3-0.5-0.6-0.6-0.9
c-0.1-0.3-0.2-0.7-0.2-1.1h-1c0.1,1.3,0.6,2.3,1.6,2.9c1,0.6,2.3,0.9,3.9,0.9c0.6,0,1.2,0,1.8-0.1c0.6-0.1,1.2-0.2,1.7-0.5
c0.5-0.2,1-0.6,1.3-1c0.3-0.4,0.5-1,0.5-1.7c0-0.9-0.3-1.6-0.9-2.1c-0.6-0.5-1.5-0.8-2.6-0.9L62,88.4c-0.7-0.1-1.3-0.3-1.6-0.6
c-0.4-0.3-0.6-0.7-0.6-1.3c0-0.7,0.3-1.2,0.9-1.6c0.6-0.4,1.5-0.6,2.8-0.6c1.4,0,2.5,0.2,3.1,0.7c0.7,0.4,1,1.1,1.1,2.1H68.7z
M81.6,83.8h-1v6.5c0,0.5-0.1,1-0.3,1.5c-0.2,0.5-0.5,0.9-0.9,1.3c-0.4,0.4-0.9,0.7-1.5,0.9c-0.6,0.2-1.3,0.3-2.1,0.3
c-0.8,0-1.5-0.1-2-0.3s-1-0.4-1.3-0.8c-0.3-0.3-0.5-0.7-0.7-1.2c-0.1-0.5-0.2-1-0.2-1.6v-6.8h-1v6.9c0,0.5,0,1,0.1,1.5
c0.1,0.5,0.3,0.9,0.6,1.4c0.3,0.5,0.8,0.9,1.6,1.2c0.7,0.3,1.7,0.5,2.9,0.5c1.2,0,2.2-0.2,3-0.7c0.8-0.5,1.4-1.1,1.8-1.8h0V95h1
V83.8z M84.2,95h1V79.4h-1V95z M88.8,83.8h-2.5v0.9h2.5v7.5c0,1.1,0.2,1.9,0.5,2.3c0.3,0.4,1.1,0.7,2.2,0.7c0.7,0,1.3,0,1.7-0.1
v-0.9c-0.2,0-0.3,0-0.5,0c-0.4,0.1-0.7,0.1-0.9,0.1c-0.7,0-1.2-0.1-1.5-0.3c-0.3-0.2-0.5-0.6-0.5-1.3v-8h3.3v-0.9h-3.3V80h-1V83.8z
M94.6,95h1V83.8h-1V95z M94.6,81.7h1v-2.3h-1V81.7z M98.2,95h1v-6.5c0-0.5,0.1-1,0.3-1.5c0.2-0.5,0.5-0.9,0.9-1.3
c0.4-0.4,0.9-0.7,1.5-0.9c0.6-0.2,1.3-0.3,2.1-0.3c0.8,0,1.5,0.1,2,0.3c0.5,0.2,1,0.4,1.3,0.8c0.3,0.3,0.5,0.7,0.7,1.2
c0.1,0.5,0.2,1,0.2,1.6V95h1v-6.9c0-0.5,0-1-0.1-1.5c-0.1-0.5-0.3-0.9-0.6-1.4c-0.3-0.5-0.8-0.9-1.6-1.2c-0.7-0.3-1.7-0.5-2.9-0.5
c-1.2,0-2.2,0.2-2.9,0.7c-0.8,0.5-1.4,1.1-1.8,1.8h0v-2.2h-1V95z M116.9,84.3c1.6,0,2.9,0.4,3.9,1.2c0.9,0.8,1.4,2,1.4,3.4
c0,1.6-0.5,2.8-1.4,3.7c-1,0.8-2.2,1.3-3.7,1.3c-1.6,0-2.9-0.4-3.8-1.3c-0.9-0.8-1.4-2.1-1.4-3.7c0-0.8,0.1-1.5,0.4-2.1
c0.3-0.6,0.6-1.1,1.1-1.5c0.5-0.4,1-0.7,1.6-0.9C115.6,84.4,116.2,84.3,116.9,84.3L116.9,84.3z M122.2,86.1L122.2,86.1
c-0.3-0.5-0.6-0.9-1-1.3c-0.4-0.3-0.8-0.6-1.3-0.8c-0.8-0.3-1.8-0.5-3-0.5c-1,0-1.9,0.2-2.7,0.5c-0.8,0.3-1.4,0.7-1.9,1.2
c-0.5,0.5-0.9,1.1-1.1,1.8c-0.2,0.7-0.4,1.4-0.4,2.1c0,0.8,0.1,1.5,0.3,2.2c0.2,0.7,0.6,1.3,1.1,1.8c0.5,0.5,1.1,1,1.9,1.3
c0.8,0.3,1.7,0.5,2.7,0.5c1.2,0,2.3-0.2,3.2-0.7c0.9-0.4,1.6-1.1,2.1-2h0v2.3c0,0.6-0.1,1.1-0.2,1.6c-0.1,0.5-0.4,1-0.8,1.4
c-0.4,0.4-0.9,0.8-1.6,1c-0.7,0.2-1.5,0.4-2.6,0.4c-1.6,0-2.7-0.2-3.5-0.7c-0.7-0.5-1.2-1.2-1.3-2.1h-1c0.2,1.3,0.7,2.3,1.7,2.9
c0.9,0.6,2.3,0.9,4.1,0.9c1.2,0,2.3-0.1,3.1-0.4c0.8-0.3,1.4-0.7,1.9-1.2c0.4-0.5,0.7-1.1,0.9-1.7c0.2-0.6,0.3-1.3,0.3-2V83.8h-1
V86.1z"/>
<path id="XMLID_6_" class="st2" d="M139.1,96.1l-5-0.6c-1.1-0.2-3.1-0.6-4-0.6l4.7,1.7c5.1,1.7,11.5,2.9,16.8,3.4
c11.2,1,19.3,0.6,28.1-3.2c5.2-2.3,11.5-5.9,14.2-10.7c0.9-1.5,2.1-4.9,1.4-6.9c-3.2,3.6-6.7,5.6-11,7.9
C171.9,93.6,153.8,97.5,139.1,96.1L139.1,96.1z"/>
<path id="XMLID_5_" class="st3" d="M156.1,90.4l-4.9,1.4c-1,0.3-3.1,0.6-3.9,1l5-0.3c5.4-0.5,11.7-1.7,16.8-3.4
c10.7-3.4,18.1-6.9,24.7-13.9c3.9-4.1,8.3-9.9,8.9-15.4c0.2-1.7,0-5.3-1.4-6.9c-1.5,4.6-4,7.7-7.1,11.5
C185.4,75.4,170.2,86,156.1,90.4L156.1,90.4z"/>
<path id="XMLID_4_" class="st2" d="M166.7,79.5l-4.1,2.9c-0.9,0.6-2.7,1.6-3.4,2.2l4.6-1.9c4.9-2.2,10.5-5.5,14.8-8.7
c9-6.7,14.8-12.5,18.8-21.2c2.3-5.1,4.6-12.1,3.4-17.5c-0.4-1.7-1.7-5-3.6-6c0,4.8-1.2,8.6-2.9,13.2
C189.5,55.8,178.6,70.7,166.7,79.5L166.7,79.5z"/>
<path id="XMLID_24_" class="st4" d="M79.3,71.1V10.9h21.6c4.4,0,7.9,0.6,10.6,1.8c2.7,1.2,4.7,3.1,6.2,5.6c1.5,2.5,2.3,5.2,2.3,7.9
c0,2.6-0.7,5-2,7.3c-1.3,2.3-3.3,4.1-6,5.5c3.5,1.1,6.2,2.9,8,5.5c1.9,2.6,2.8,5.6,2.8,9.1c0,2.8-0.6,5.5-1.7,7.9
c-1.1,2.4-2.5,4.3-4.2,5.6c-1.7,1.3-3.8,2.3-6.3,3c-2.5,0.7-5.6,1-9.3,1H79.3z M86.9,36.2h12.5c3.4,0,5.8-0.2,7.3-0.7
c1.9-0.6,3.4-1.6,4.4-3c1-1.4,1.5-3.2,1.5-5.3c0-2-0.5-3.8-1.4-5.3c-0.9-1.5-2.2-2.6-3.9-3.1c-1.7-0.6-4.6-0.8-8.8-0.8H86.9V36.2z
M86.9,64.1h14.3c2.5,0,4.2-0.1,5.2-0.3c1.7-0.3,3.2-0.9,4.4-1.6c1.2-0.8,2.1-1.9,2.9-3.4c0.8-1.5,1.1-3.2,1.1-5.1
c0-2.3-0.6-4.2-1.7-5.9c-1.1-1.7-2.6-2.8-4.6-3.5c-1.9-0.7-4.8-1-8.4-1H86.9V64.1z"/>
</g>
</svg>
</figure>
<h1 class="page-title reveal">
<span class="reveal-text">SUPORTE</span>
<div class="reveal-block"></div>
</h1>
</header>
<main class="page-content">
<div class="support-form form">
<div class="form-fields">
<div class="field --inline">
<label class="label">Cliente</label>
<div class="control">
<input name="cliente" class="input" type="text" placeholder="Qual é o nome da sua empresa?">
</div>
</div>
<div class="field --inline">
<label class="label">Requisitante</label>
<div class="control">
<input name="requisitante" class="input" type="text" placeholder="Qual o seu nome?">
</div>
</div>
<div class="field --inline">
<label class="label">E-mail</label>
<div class="control">
<input name="email" class="input" type="text" placeholder="Qual o seu e-mail?">
</div>
</div>
<div class="field --inline">
<label class="label">Telefone</label>
<div class="control">
<input name="telefone" class="input" type="text" placeholder="Qual número podemos ligar para você?">
</div>
</div>
<div class="field --inline">
<label class="label">Processo</label>
<div class="control">
<input name="processo" class="input" type="text" placeholder="Qual é o nome do processo?">
</div>
</div>
<div class="field --inline">
<label class="label">Número</label>
<div class="control">
<input name="numero" class="input" type="text" placeholder="Existe um case/instância relacionado?">
</div>
</div>
<div class="field --textarea">
<label class="label">Descrição</label>
<div class="control">
<textarea name="descricao" class="textarea --grow" placeholder="Descreva o seu problema detalhadamente, assim podemos agilizar o seu atendimento!"></textarea>
</div>
</div>
<div class="field">
<label class="label">Anexo</label>
<div class="control">
</div>
</div>
</div>
<div class="form-actions">
<button class="btn --primary --cta a-pulse js-start-form">Precisa de Ajuda?</button>
</div>
</div>
</main>
<footer class="page-footer">
<div class="contact-info">
<div class="row">
<div class="col-12">
<svg class="icon --small lnr lnr-phone-handset"><use xlink:href="#lnr-phone-handset"></use></svg>
<span>(51) 3407 1008 / 3407 1009</span>
</div>
<div class="col-12">
<svg class="icon --small lnr lnr-envelope"><use xlink:href="#lnr-envelope"></use></svg>
<span>suporte@mbsconsulting.com.br</span>
</div>
<div class="col-12">
<svg class="icon --small lnr lnr-map-marker"><use xlink:href="#lnr-map-marker"></use></svg>
<adress>
Rua Padre Chagas, 147<br>
Sala 1501 - Moinhos de Vento<br>
Porto Alegre - RS
</adress>
</div>
<div class="col-12">
<svg class="icon --small lnr lnr-earth"><use xlink:href="#lnr-earth"></use></svg>
<a href="http://www.mbsconsulting.com.br/" target="_blank">mbsconsulting.com.br</a>
</div>
</div>
</div>
<div class="footer-bg"></div>
</footer>@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400');
@mixin center-flex {
display: flex;
justify-content: center;
align-items: center;
}
$form-height: 480px;
$form-width: 420px;
$blue: #3c80fb;
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font-family: 'Open Sans', sans-serif;
background-color: #f5f5f5;
}
.page-header {
@include center-flex;
flex-direction: column;
padding-top: 30px;
h1 {
font-size: 48px;
color: #a7b3bf;
}
}
.reveal {
position: relative;
}
.reveal-text {
opacity: 0;
animation: appear 1s linear .3s;
}
.reveal-block {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #107cb8;
transform: scale3d(0, 1, 1);
animation: reveal 1s ease-in-out .3s;
}
.page-logo {
display: block;
width: 220px;
height: 100px;
margin-bottom: 50px;
}
.page-content {
@include center-flex;
flex: 1;
padding: 30px 0;
}
.page-footer {
@include center-flex;
flex-direction: column;
padding: 30px 0 0;
}
.footer-bg {
position: relative;
height: 80px;
width: 100%;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: $blue;
background: linear-gradient(to right, #3c80fb 0%,#107cb8 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
}
.btn {
appearance: none;
align-items: center;
border: 1px solid transparent;
box-shadow: none;
display: inline-flex;
font-size: 15px;
height: 34px;
justify-content: flex-start;
line-height: 1.5;
padding: 5px 14px;
position: relative;
vertical-align: top;
user-select: none;
background-color: white;
border-color: #dbdbdb;
color: #363636;
cursor: pointer;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.btn.--grow {
flex-grow: 1;
transition: all .3s cubic-bezier(.25,.8,.25,1);
}
.btn.--primary {
color: #fff;
background-color: $blue;
background: linear-gradient(to right, #3c80fb 0%,#107cb8 100%);;
}
.btn.--cta {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
letter-spacing: .25px;
font-size: 13px;
height: 40px;
}
.form {
display: flex;
flex-direction: column;
}
.form-fields {
padding: 0 10px;
}
.field {
display: flex;
flex-direction: column;
&:not(:last-child) {
margin-bottom: 10px;
}
}
.label {
font-weight: bold;
font-size: 13px;
padding: 5px 0;
margin-bottom: 8px;
}
.control {
display: flex;
flex: 1;
}
.input {
font-family: 'Open Sans', sans-serif;
height: 35px;
border: 0;
}
.textarea {
font-family: 'Open Sans', sans-serif;
padding: 8px;
resize: vertical;
&.--grow { width: 100%; }
}
.field.--textarea {
padding: 10px;
}
.field.--inline {
position: relative;
.input, .textarea {
width: 100%;
}
.label {
left: 10px;
position: absolute;
top: 50%;
transform: translatey(-50%);
}
.label.--textarea {
top: 10px;
transform: none;
}
}
.form-actions {
display: flex;
justify-content: center;
}
.support-form {
position: relative;
min-width: $form-width;
min-height: 100px;
overflow: hidden;
transition: all .4s ease-in-out;
transition-delay: .3s;
.input {
padding-left: 110px;
}
.form-fields {
transition: transform .4s ease-in-out,
opacity .4s ease-in-out;
transition-delay: .3s;
opacity: 0;
position: absolute;
width: $form-width - 40px;
left: 50%;
transform: translate(-50%, 120%);
}
.form-actions {
width: 100%;
position: absolute;
top: 50%;
transform: translatey(-50%);
transition: all .4s ease-in-out;
transition-delay: .3s;
}
}
.support-form.is-active {
min-height: $form-height;
background-color: #fff;
box-shadow: 0 0 5px 4px rgba(0, 0, 0, .045), 0 0 1px 0 rgba(0, 0, 0, .05);
.form-fields {
top: 15px;
transform: translate(-50%, 0);
opacity: 1;
}
.form-actions {
transform: translatey($form-height / 2 - 40px);
}
}
.icon {
width: 35px;
height: 35px;
}
.icon.--small {
width: 15px;
height: 15px;
}
.contact-info {
font-size: 11px;
}
.a-pulse {
padding-left: 25px;
padding-right: 25px;
border-radius: 24px;
box-shadow: 0 0 0 0 rgba(#5a99d4, .25);
animation: pulse 1.8s infinite;
transition: transform .3s ease-in-out,
box-shadow .3s ease;
outline: 0;
border: 0;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 50%;
transform: translatey(-50%);
border-radius: 24px;
transition: transform .3s ease-in-out,
box-shadow .3s ease;
}
&:hover {
animation-play-state: paused;
transform: translateY(-5px);
box-shadow: 0 0 0 0 rgba(#5a99d4, .0),
0 0 6px rgba(0,0,0, .05),
0 6px 12px rgba(0,0,0, .1);
&:after {
transform: translateY(-50% -5px);
box-shadow: 0 0 6px rgba(0,0,0, .05),
0 6px 12px rgba(0,0,0, .1);
}
}
}
@keyframes pulse {
80% {
box-shadow: 0 0 0 20px rgba(#5a99d4, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
}
}
@keyframes reveal {
0% {
transform: scale3d(0, 1, 1);
transform-origin: 0% 100%;
}
25% {
transform: scale3d(1, 1, 1);
transform-origin: 0% 100%;
}
50% {
transform: scale3d(1, 1, 1);
transform-origin: 100% 0%;
}
100% {
transform: scale3d(0, 1, 1);
transform-origin: 100% 0%;
}
}
@keyframes appear {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.contact-info {
width: 190px;
color: #45484a;
.icon {
margin-right: 8px;
fill: #606971;
}
}
.row {
display: flex;
flex-flow: row wrap;
}
.col-12 {
width: 100%;
display: flex;
//justify-content: center;
align-items: center;
&:not(:last-child) {
margin-bottom: 10px;
}
}
adress {
line-height: 1.5;
}
a {
color: $blue;
text-decoration: none;
}
textarea {
border: 1px solid #eee;
}$(() => {
const $formTrigger = $('.js-start-form')
const Form = {
init() {
this.$btn = $('.js-start-form')
this.$form = $('.support-form')
Form.setTrigger()
},
setTrigger() {
Form.$btn.click(Form.open)
},
open() {
Form.$form.addClass('is-active')
Form.$btn.addClass('--grow js-send-form')
.removeClass('a-pulse')
.text('Enviar Solicitação')
Form.$send = $('.js-send-form')
}
}
Form.init()
setTimeout(() => {
$('.reveal-text').css('opacity', 1)
}, 600)
})
External CSS
This Pen doesn't use any external CSS resources.