daily pastebin goal
11%
SHARE
TWEET

Untitled

renatofreire Aug 13th, 2018 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* prettier-ignore */
  2. @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600';
  3. body {
  4.   font-family: "Source Sans Pro", sans-serif; }
  5.  
  6. @media (min-width: 960px) {
  7.   .huge {
  8.     font-size: rem(46); }
  9.   .heading-1 {
  10.     font-size: rem(36); }
  11.   .heading-2 {
  12.     font-size: rem(18); }
  13.   .heading-3 {
  14.     font-size: rem(12); }
  15.   .standard-text, .button.v2 {
  16.     font-size: rem(16); }
  17.   .detail {
  18.     font-size: rem(14); }
  19.   .link {
  20.     font-size: rem(14); }
  21.   .small-paragraph {
  22.     font-size: rem(14); } }
  23.  
  24. @media (min-width: 680px) and (max-width: 959px) {
  25.   .huge {
  26.     font-size: rem(38); }
  27.   .heading-1 {
  28.     font-size: rem(36); }
  29.   .heading-2 {
  30.     font-size: rem(16); }
  31.   .heading-3 {
  32.     font-size: rem(10); }
  33.   .standard-text, .button.v2 {
  34.     font-size: rem(14); }
  35.   .detail {
  36.     font-size: rem(12); }
  37.   .link {
  38.     font-size: rem(12); }
  39.   .small-paragraph {
  40.     font-size: rem(14); } }
  41.  
  42. @media (max-width: 679px) {
  43.   .huge {
  44.     font-size: rem(38); }
  45.   .heading-1 {
  46.     font-size: rem(28); }
  47.   .heading-2 {
  48.     font-size: rem(16); }
  49.   .heading-3 {
  50.     font-size: rem(10); }
  51.   .standard-text, .button.v2 {
  52.     font-size: rem(16); }
  53.   .detail {
  54.     font-size: rem(14); }
  55.   .link {
  56.     font-size: rem(14); }
  57.   .small-paragraph {
  58.     font-size: rem(14); } }
  59.  
  60. .heading-1 {
  61.   color: #959595;
  62.   font-weight: 200;
  63.   letter-spacing: .3pt; }
  64.   @media (max-width: 679px) {
  65.     .heading-1 {
  66.       font-weight: 300; } }
  67.  
  68. .heading-2 {
  69.   color: #606060;
  70.   font-weight: 300; }
  71.   @media (max-width: 679px) {
  72.     .heading-2 {
  73.       font-weight: 400; } }
  74.  
  75. .heading-3 {
  76.   color: #959595;
  77.   font-weight: 300;
  78.   letter-spacing: .3pt;
  79.   text-transform: uppercase; }
  80.   @media (max-width: 679px) {
  81.     .heading-3 {
  82.       font-weight: 400; } }
  83.  
  84. .standard-text, .button.v2 {
  85.   color: #606060;
  86.   font-weight: 300; }
  87.   @media (max-width: 679px) {
  88.     .standard-text, .button.v2 {
  89.       font-weight: 400; } }
  90.  
  91. .small-paragraph {
  92.   color: #606060;
  93.   font-weight: 300;
  94.   letter-spacing: .3pt; }
  95.   @media (max-width: 679px) {
  96.     .small-paragraph {
  97.       font-weight: 400; } }
  98.  
  99. .detail {
  100.   color: #959595;
  101.   font-weight: 300;
  102.   letter-spacing: .3pt; }
  103.   @media (max-width: 679px) {
  104.     .detail {
  105.       font-weight: 400; } }
  106.  
  107. .huge {
  108.   color: #606060;
  109.   font-weight: 200;
  110.   letter-spacing: .3pt; }
  111.   @media (max-width: 679px) {
  112.     .huge {
  113.       font-weight: 400; } }
  114.  
  115. .small {
  116.   color: #959595;
  117.   font-weight: 300;
  118.   letter-spacing: .3pt;
  119.   font-size: rem(10); }
  120.  
  121. .button.v2 {
  122.   background: #2acb9b;
  123.   border: 2px solid #2acb9b;
  124.   border-radius: 4px;
  125.   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  126.   box-sizing: border-box;
  127.   color: #fff;
  128.   cursor: pointer;
  129.   display: inline-block;
  130.   font-family: "Source Sans Pro", sans-serif;
  131.   font-weight: 400;
  132.   height: 50px;
  133.   line-height: 1;
  134.   padding: 13px 0;
  135.   position: relative;
  136.   text-align: center;
  137.   text-decoration: none;
  138.   transition: all .15s linear;
  139.   vertical-align: top;
  140.   white-space: nowrap;
  141.   width: 210px; }
  142.   .button.v2:hover, .button.v2:focus {
  143.     background-color: #28b88d;
  144.     border-color: #28b88d; }
  145.   .button.v2[disabled] {
  146.     background-color: #dfdfdf;
  147.     border-color: #dfdfdf;
  148.     cursor: default; }
  149.     .button.v2[disabled]:hover, .button.v2[disabled]:focus {
  150.       background-color: #dfdfdf;
  151.       border-color: #dfdfdf;
  152.       cursor: default; }
  153.   .button.v2.is-loading {
  154.     background: #2acb9b;
  155.     border-color: #2acb9b; }
  156.     .button.v2.is-loading .label {
  157.       opacity: 0;
  158.       transform: scale(1.2); }
  159.     .button.v2.is-loading .loader {
  160.       opacity: 1;
  161.       transform: scale(1); }
  162.   .button.v2 .label {
  163.     display: inline-block;
  164.     transition: opacity, transform .3s ease-out; }
  165.   .button.v2 .loader {
  166.     left: 50%;
  167.     margin-left: -15px;
  168.     margin-top: -15px;
  169.     opacity: 0;
  170.     position: absolute;
  171.     top: 50%;
  172.     transform: scale(0.2);
  173.     transition: opacity, transform .3s ease-in; }
  174.  
  175. .button--primary.v2 {
  176.   background-color: #08abce;
  177.   border: 2px solid #08abce; }
  178.   .button--primary.v2:hover, .button--primary.v2:focus {
  179.     background-color: #148fbf;
  180.     border-color: #148fbf; }
  181.   .button--primary.v2.button--basic {
  182.     background-color: transparent;
  183.     color: #08abce; }
  184.     .button--primary.v2.button--basic:hover, .button--primary.v2.button--basic:focus {
  185.       background-color: transparent;
  186.       color: #148fbf; }
  187.   .button--primary.v2.is-loading {
  188.     background: #08abce;
  189.     border-color: #08abce; }
  190.  
  191. .input.v2, .single-input {
  192.   border: 1px solid #dfdfdf;
  193.   border-radius: 4px;
  194.   box-sizing: border-box;
  195.   color: #959595;
  196.   display: inline-block;
  197.   font-family: "Source Sans Pro", sans-serif;
  198.   font-size: 1.375rem;
  199.   font-weight: 200;
  200.   height: 50px;
  201.   max-width: 100%;
  202.   padding: 0 20px; }
  203.   @media (max-width: 679px) {
  204.     .input.v2, .single-input {
  205.       font-weight: 400; } }
  206.   .input.v2.error, .error.single-input {
  207.     border-color: #dc7f7f; }
  208.  
  209. .questionnaire-header__content, .welcome, .questionnaire-content {
  210.   max-width: 1600px;
  211.   padding-right: 5%;
  212.   padding-left: 5%;
  213.   margin-right: auto;
  214.   margin-left: auto; }
  215.  
  216. *,
  217. *::before,
  218. *::after {
  219.   box-sizing: border-box; }
  220.  
  221. body {
  222.   font-family: "Source Sans Pro", sans-serif;
  223.   -webkit-font-smoothing: antialiased; }
  224.  
  225. ul {
  226.   padding-left: 0; }
  227.  
  228. .questionnaire-header--filled {
  229.   background-color: #2acb9b; }
  230.  
  231. .questionnaire-header__logo {
  232.   display: block;
  233.   width: 26px;
  234.   text-indent: -9999px;
  235.   background-image: url("../assets/images/logo-minimal.svg");
  236.   background-repeat: no-repeat; }
  237.   @media (min-width: 768px) {
  238.     .questionnaire-header__logo {
  239.       width: 144px;
  240.       background-image: url("../assets/images/logo.svg"); } }
  241.  
  242. .questionnaire-header__title {
  243.   font-size: 1.25rem; }
  244.   @media (min-width: 768px) {
  245.     .questionnaire-header__title {
  246.       font-size: 1.5rem; } }
  247.  
  248. .questionnaire-header__help {
  249.   display: block;
  250.   width: 100px;
  251.   height: 20px;
  252.   color: #fff;
  253.   text-decoration: none;
  254.   cursor: pointer;
  255.   background-color: initial;
  256.   border: 0;
  257.   outline: none;
  258.   font-family: "Source Sans Pro", sans-serif;
  259.   font-weight: 600;
  260.   text-align: right;
  261.   text-decoration: none; }
  262.  
  263. .questionnaire-header__content {
  264.   display: flex;
  265.   align-items: center;
  266.   justify-content: space-around;
  267.   height: 64px;
  268.   color: #fff;
  269.   text-align: center; }
  270.  
  271. .welcome {
  272.   min-height: 100vh;
  273.   padding-top: 10px;
  274.   padding-bottom: 20px;
  275.   overflow-y: hidden; }
  276.  
  277. .welcome-wrapper {
  278.   min-width: 100vw;
  279.   background-image: linear-gradient(#348e7c -10%, #3c7271 130%); }
  280.  
  281. @media (min-width: 1024px) {
  282.   .welcome-nav {
  283.     float: right; } }
  284.  
  285. .welcome-nav__title {
  286.   display: none; }
  287.  
  288. .welcome-nav__toggle {
  289.   position: absolute;
  290.   top: 26px;
  291.   right: 25px;
  292.   display: inline-block;
  293.   width: 24px;
  294.   height: 24px;
  295.   text-indent: -9999px;
  296.   cursor: pointer;
  297.   background-image: url("../assets/images/menu.svg"); }
  298.   @media (min-width: 1024px) {
  299.     .welcome-nav__toggle {
  300.       display: none; } }
  301.  
  302. .welcome-nav__menu {
  303.   height: 0;
  304.   margin-top: 0;
  305.   margin-right: -6%;
  306.   margin-left: -6%;
  307.   overflow-y: hidden;
  308.   background-color: #4a4740;
  309.   transition: height 0.25s ease-in; }
  310.   @media (min-width: 1024px) {
  311.     .welcome-nav__menu {
  312.       height: 100%;
  313.       margin-right: 0;
  314.       margin-left: 0;
  315.       background-color: inherit;
  316.       transition: none;
  317.       transform: none; } }
  318.   .welcome-nav__menu--active {
  319.     height: 270px;
  320.     transition: height 0.25s ease-in; }
  321.  
  322. .welcome-nav__item {
  323.   text-align: center;
  324.   list-style-type: none; }
  325.   @media (min-width: 1024px) {
  326.     .welcome-nav__item {
  327.       display: inline-block; }
  328.       .welcome-nav__item:not(:last-child) {
  329.         margin-right: 20px; } }
  330.  
  331. .welcome-nav__link {
  332.   font-size: 1.125rem;
  333.   font-weight: 600;
  334.   line-height: 3;
  335.   color: #fff;
  336.   text-decoration: none; }
  337.   @media (min-width: 1024px) {
  338.     .welcome-nav__link {
  339.       text-shadow: rgba(0, 0, 0, 0.25) 1px 1px 1px;
  340.       opacity: 0.75;
  341.       transition: opacity 0.15s; }
  342.       .welcome-nav__link:hover {
  343.         opacity: 1; } }
  344.  
  345. .welcome-content {
  346.   color: #fff;
  347.   text-align: center;
  348.   justify-content: center; }
  349.   @media (min-width: 1024px) {
  350.     .welcome-content {
  351.       display: flex;
  352.       margin-top: 70px; } }
  353.   @media (min-width: 1440px) {
  354.     .welcome-content {
  355.       width: 100%; } }
  356.   @media (min-width: 2560) {
  357.     .welcome-content {
  358.       position: static;
  359.       margin-top: 50px; } }
  360.   @media (min-width: 1440px) {
  361.     .welcome-content {
  362.       margin-right: auto;
  363.       margin-left: auto; } }
  364.   .welcome-content__apresentation {
  365.     width: 100%;
  366.     right: 0;
  367.     bottom: 0;
  368.     left: 0;
  369.     padding: 10px 5px; }
  370.     @media (min-width: 768px) {
  371.       .welcome-content__apresentation {
  372.         padding: 10px 50px; } }
  373.     @media (min-width: 1024px) {
  374.       .welcome-content__apresentation {
  375.         position: static;
  376.         width: 100%;
  377.         margin-top: 30px;
  378.         text-align: center;
  379.         background-color: inherit; } }
  380.   .welcome-content__call {
  381.     margin-top: 0;
  382.     font-size: 1.625rem;
  383.     font-weight: 600;
  384.     line-height: 1.5; }
  385.     @media (min-width: 768px) {
  386.       .welcome-content__call {
  387.         font-weight: 600;
  388.         font-size: 2.25rem;
  389.         line-height: 1.2; } }
  390.     @media (min-width: 1024px) {
  391.       .welcome-content__call {
  392.         line-height: 48px; } }
  393.     .welcome-content__call--intro {
  394.       display: block; }
  395.   .welcome-content__description {
  396.     display: none;
  397.     font-weight: 600; }
  398.     @media (min-width: 768px) {
  399.       .welcome-content__description {
  400.         display: block;
  401.         line-height: 1.5; } }
  402.     @media (min-width: 1024px) {
  403.       .welcome-content__description {
  404.         width: 100%;
  405.         font-weight: 400;
  406.         margin-bottom: 35px; } }
  407.     @media (min-width: 1024px) {
  408.       .welcome-content__description {
  409.         font-size: 1.5rem; } }
  410.   .welcome-content__button {
  411.     display: inline-block;
  412.     width: 95%;
  413.     margin-right: auto;
  414.     margin-left: auto;
  415.     padding-top: 10px;
  416.     padding-bottom: 10px;
  417.     font-size: 20px;
  418.     font-weight: 600;
  419.     color: #fff;
  420.     border-radius: 8px;
  421.     text-align: center;
  422.     line-height: 1.2;
  423.     text-decoration: none;
  424.     background-color: #08abce;
  425.     transition: background-color 0.15s ease;
  426.     cursor: pointer; }
  427.     .welcome-content__button:hover {
  428.       background-color: #148fbf; }
  429.     @media (min-width: 1024px) {
  430.       .welcome-content__button {
  431.         width: 325px;
  432.         padding-top: 15px;
  433.         padding-bottom: 15px;
  434.         margin-left: 0; } }
  435.  
  436. .questionnaire {
  437.   display: flex;
  438.   min-height: 100vh;
  439.   color: #4a4740;
  440.   text-align: center;
  441.   flex-direction: column;
  442.   background-color: #f0f4ee; }
  443.   .questionnaire__question {
  444.     margin-top: 0;
  445.     margin-bottom: 8px; }
  446.   .questionnaire__hint {
  447.     margin-top: 0;
  448.     margin-bottom: 24px;
  449.     font-size: 1rem;
  450.     font-weight: 400; }
  451.   .questionnaire__error {
  452.     margin-bottom: 16px;
  453.     font-size: 0.875rem;
  454.     color: #da7b7f;
  455.     text-align: center;
  456.     opacity: 0;
  457.     transition: opacity 0.2s; }
  458.     .questionnaire__error-visible {
  459.       opacity: 1; }
  460.   .questionnaire__next, .questionnaire__previous {
  461.     display: block;
  462.     padding: 18px 44px;
  463.     font-family: "Source Sans Pro", sans-serif;
  464.     font-weight: 600;
  465.     cursor: pointer;
  466.     border: 0;
  467.     margin-right: auto;
  468.     margin-bottom: 12px;
  469.     margin-left: auto; }
  470.     @media (min-width: 1024px) {
  471.       .questionnaire__next, .questionnaire__previous {
  472.         padding: 8px 15px; } }
  473.   .questionnaire__next {
  474.     color: #fff;
  475.     background-color: #2acb9b;
  476.     border-radius: 5px; }
  477.     .questionnaire__next:hover {
  478.       background-color: #28b88d; }
  479.     .questionnaire__next[disabled] {
  480.       color: #959595;
  481.       background-color: #dfdfdf; }
  482.   .questionnaire__previous {
  483.     color: #548483;
  484.     background-color: inherit; }
  485.  
  486. .questionnaire-content {
  487.   width: 100%;
  488.   max-width: 960px;
  489.   margin-top: 32px;
  490.   flex: 1 0 auto; }
  491.   @media (min-width: 1024px) {
  492.     .questionnaire-content {
  493.       margin-top: 54px; } }
  494.  
  495. .progress-bar {
  496.   height: 6px;
  497.   background-color: #dfdfdf;
  498.   box-shadow: 0 1px 2px #dfdfdf; }
  499.   .progress-bar__status {
  500.     display: block;
  501.     height: 6px;
  502.     background-color: #417675;
  503.     transition: width 0.2s ease-in; }
  504.  
  505. .loader {
  506.   position: absolute;
  507.   top: 0;
  508.   bottom: 0;
  509.   right: 0;
  510.   left: 0;
  511.   text-indent: -9999px;
  512.   background-image: url("../assets/images/loading.gif");
  513.   background-repeat: no-repeat;
  514.   background-position: center 35%; }
  515.  
  516. .single-input {
  517.   display: block;
  518.   width: 100%;
  519.   max-width: 440px;
  520.   height: 50px;
  521.   margin-right: auto;
  522.   margin-bottom: 6px;
  523.   margin-left: auto;
  524.   text-align: center;
  525.   transition: border 0.5s ease-in-out;
  526.   line-height: normal; }
  527.   .single-input::placeholder {
  528.     color: #dfdfdf; }
  529.   .single-input:focus, .single-input:active {
  530.     border: 1px solid #959595;
  531.     outline: none; }
  532.   .single-input:-webkit-autofill {
  533.     box-shadow: 0 0 0 20px #fff inset; }
  534.  
  535. .multiple-choices {
  536.   display: flex; }
  537.   .multiple-choices__list {
  538.     margin-right: auto;
  539.     margin-bottom: 6px;
  540.     margin-left: auto;
  541.     background-color: #fff;
  542.     border: 1px solid #dfdfdf;
  543.     border-radius: 5px; }
  544.     @media (min-width: 1024px) {
  545.       .multiple-choices__list {
  546.         min-width: 440px; } }
  547.   .multiple-choices__label {
  548.     display: block;
  549.     width: 100%;
  550.     padding: 12px 24px;
  551.     font-size: 1.25rem;
  552.     line-height: 2rem;
  553.     text-align: left;
  554.     cursor: pointer; }
  555.     .multiple-choices__label:hover {
  556.       background-color: #f5f5f5; }
  557.   .multiple-choices__item {
  558.     list-style: none; }
  559.     .multiple-choices__item:not(:last-child) {
  560.       border-bottom: 1px solid #dfdfdf; }
  561.     .multiple-choices__item:first-child .multiple-choices__label {
  562.       border-top-left-radius: 5px;
  563.       border-top-right-radius: 5px; }
  564.     .multiple-choices__item:last-child .multiple-choices__label {
  565.       border-bottom-right-radius: 5px;
  566.       border-bottom-left-radius: 5px; }
  567.   .multiple-choices__input {
  568.     display: none; }
  569.   .multiple-choices__title {
  570.     display: block; }
  571.   .multiple-choices__input:checked + .multiple-choices__label {
  572.     color: #fff;
  573.     background-color: #417675; }
  574.  
  575. .probability {
  576.   height: 100vh;
  577.   min-height: 100vh;
  578.   background-image: url("../assets/images/noise-pattern.png"), radial-gradient(circle at 51% 50%, #8ddeaf, #2acb9b); }
  579.  
  580. .probability-feedback {
  581.   text-align: center;
  582.   color: #fff; }
  583.   .probability-feedback::before {
  584.     content: "";
  585.     display: block;
  586.     width: 190px;
  587.     height: 190px;
  588.     margin-right: auto;
  589.     margin-left: auto; }
  590.     @media (min-width: 768px) {
  591.       .probability-feedback::before {
  592.         margin-top: 150px; } }
  593.   .probability-feedback--success::before {
  594.     margin-top: 90px;
  595.     background-image: url("../assets/images/success-probability.svg"); }
  596.   .probability-feedback--unsuccess::before {
  597.     background-image: url("../assets/images/unsuccess-probability.svg"); }
  598.     @media (max-width: 360px) {
  599.       .probability-feedback--unsuccess::before {
  600.         margin-top: 0; } }
  601.     @media (min-width: 361px) {
  602.       .probability-feedback--unsuccess::before {
  603.         margin-top: 90px; } }
  604.   .probability-feedback__title {
  605.     margin-bottom: 0;
  606.     font-size: 2rem; }
  607.   .probability-feedback__subtitle {
  608.     margin-top: 12px;
  609.     font-size: 1.5rem; }
  610.     @media (min-width: 360px) {
  611.       .probability-feedback__subtitle {
  612.         margin-bottom: 42px; } }
  613.   .probability-feedback__description {
  614.     line-height: 20px; }
  615.   .probability-feedback__subtitle, .probability-feedback__description {
  616.     width: 90%;
  617.     margin-right: auto;
  618.     margin-left: auto; }
  619.   .probability-feedback__button {
  620.     position: fixed;
  621.     right: 0;
  622.     bottom: 15px;
  623.     left: 0;
  624.     display: block;
  625.     width: 90%;
  626.     max-width: 345px;
  627.     padding: 16px;
  628.     margin-right: auto;
  629.     margin-left: auto;
  630.     font-family: "Source Sans Pro", sans-serif;
  631.     font-weight: 600;
  632.     font-size: 1.25rem;
  633.     color: #28b88d;
  634.     text-decoration: none;
  635.     background-color: #fff;
  636.     border: 0;
  637.     border-radius: 8px;
  638.     cursor: pointer; }
  639.     @media (min-width: 768px) {
  640.       .probability-feedback__button {
  641.         position: static; } }
  642.  
  643. @keyframes hideshow {
  644.   0% {
  645.     opacity: 0; }
  646.   50% {
  647.     opacity: 0; }
  648.   75% {
  649.     opacity: 0; }
  650.   100% {
  651.     opacity: 1; } }
  652.  
  653. .recharts-reference-dot-dot {
  654.   animation: hideshow 2.5s ease; }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top