style.css

:root {

    --title-color: #fdd846;
    --bkg-color  : #3a3a3a;
    --bkg-color-mobile : #3a3a3aBB;
    --text-color : ghostwhite;

    --comp-color1 : #474FFC;
    --comp-color2: #FC2DED;

    --font-title : 'Alfa Slab One';/*'Alfa Slab One';*/
    --font-text : 'Quicksand';/*Newsreader;*/
    --font-arcade : 'Press Start 2P';

    --cor-estoque-inicial : var(--title-color);
    --cor-juros : lavender;

    --mobile-break-point: 500px;

    --tetris-purple: #DF00FF;
    --tetris-green: #00f000;
    --tetris-red: #ff1200;
    --tetris-yellow: #ffe600;
    --tetris-orange: #ff6700;
    --tetris-orangesemi : #f0a000;
    --tetris-blue: #0086ff;
    --tetris-cyan: #00fff8;

    --container-border-width: 10px;
    --setinha-width: 0.5rem;

}

* {
    box-sizing: border-box;
}

html {
    /*overflow-y: hidden;*/
}

img.logo {

    display: block;
    margin: 0 auto; 

}

body {

    margin: 0;
    background-color: var(--bkg-color);
    color: var(--text-color);
    font-family: var(--font-text);
    font-weight: lighter;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: .01em;
    /*overflow-y: hidden;*/

}

h1 {

    font-family: var(--font-arcade);
    font-weight: normal;
    font-size: 1rem;
    text-align: center;
    color: var(--text-color);
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.4;

}

h2, h3 {

    font-family: var(--font-text);
    /*font-weight: 400;*/
    color: var(--title-color);
    /*text-align: center;*/

}

h4 {

    font-family: var(--font-text);
    font-weight: bold;
    text-transform: uppercase;
}

.container-placar {

    font-family: var(--font-arcade);
    text-transform: uppercase;
    font-size: .6rem;

}

table {

    border: 10px ridge var(--text-color);
    padding: 1rem;
    margin: 0 auto;
    border-radius: 1rem;

}

table td {

    padding-top: 1rem;
    line-height: 1.4;

}

table tr:first-child td {

    padding-top: 0;

}

td.js--text {
    text-align: right;
    color: var(--tetris-yellow);
}

.text {

    max-width: 36rem;
    margin: 0 auto;

}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: scale(1.5, 0.5) translateY(0);
    }
    40% {
      transform: scale(1.5, 0.5) translateY(-30px);
    }
    60% {
      transform: scale(1.5, 0.5) translateY(-15px);
    }
  }

.arrow-start, .arrow-end {

    font-size: 3rem;
    transform: scale(1.5, 0.5);
    text-shadow: 0 -1rem white;

}

.arrow-start {

    animation: bounce 2s infinite;
    transition: opacity 1s 2s;

}

.arrow-start a {
    text-decoration: none;
    color: inherit;
}

.arrow-end-wrapper {

    display: flex;
    justify-content: center;

}

.arrow-end  {

    display: inline-block;

}


@media (max-width: 500px) {

    h1 {
        font-size: 1.2rem;
    }

    .container-placar {

        font-size: .6rem;

    }

    section.faq {
        margin-right:  10px;
        margin-left: 10px;
    }

    
}

.slide {

    height: 98vh;
    padding: 1rem 0;
    /*min-width: 100vw;*/
    position: relative;
    /*scroll-snap-align: start;*/
}

.slide#abertura {

    display: grid;
    grid-template-rows: 10vh 1fr 10vh 10vh;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;

}

.text p {

    line-height: 1.4;

}

a.back,
a.next {

    text-decoration: none;
    /*position: absolute;
    top: 50vh;*/

    font-size: 5rem;
    color: var(--text-color);

}

.wrapper-navigation {

    display: block;
    transform: rotate(90deg) scale(.35,1);
    letter-spacing: -1rem;
    max-width: 10rem;
    margin: 0 auto;

}

.next {

    right: 5px;

}

.back {

    left: 5px;

}

html { scroll-behavior: smooth; }

.container {

    margin-top: -80vh;
    /*display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;*/
    /*scroll-snap-type: block mandatory;*/
    /*height: 100vh; sera q isso está atrapalhando o scroll trigger? 
    overflow-x: hidden;
    overflow-y: scroll;*/
    /*background-color: blanchedalmond;*/

}

.container-step {

    width: calc(50vw - 3rem - 150px);

}

.slide.stepper {
    min-height: 100%;
}

.slide:nth-child(even) .container-step {

    margin-left: 3rem;
    text-align: right;

}

.slide:nth-child(odd) .container-step {

    margin-left: auto;
    margin-right: 3rem;
    
}

@media (max-width: 500px) {

    .slide:nth-child(even) .container-step,
    .slide:nth-child(odd) .container-step {

        margin: 0;
        position: absolute;
        top: 0; /*tem um padding de 1rem no container */
        left: 1rem;
        width: calc(100vw - 2rem);
        background-color: var(--bkg-color-mobile);

    }

}



/* scroller */

.vis {
    position: sticky;
    z-index: -1;
    top: 10vh;
    bottom: 10vh;
    /*min-height: 90vh;*/
    left: 0;
    width: 100%;
    opacity: 1/*0;*/
}

.tetris-container {

    outline: 10px solid var(--comp-color1);
    max-width: 100%;
    width: 200px;
    margin: 0 auto;
    height: 80vh;
    position: relative;
    opacity: 0;

}

.tetris {

    width: 100%;
    height: 100%;
    /*background-color: floralwhite;*/

}


/* vis */

rect.estoque {

    fill: var(--title-color);

}

.quadradinho, .quadradinho-explicacao {

    position: absolute;
    background-color: var(--tetris-yellow);
    transform: scale(0);

}

.quadradinho-explicacao {

    left : 50%;
    top: 50%;

}

.container-step p {

    line-height: 1.3;

}

.espaco-superior {

    margin-top: 25vh;

}

.quadradinho-exemplo {

    display: inline-block; /*se não ele não preenche o elemento vazio*/
    width: .5em;
    height: .5em;
    background: var(--cor-estoque-inicial);
    vertical-align: middle;

}

.retangulo-azul {

    border: 3px solid var(--comp-color1);
    padding: 0 .25em;

}

[data-destaque] {

    padding: .1em .3em;
    border-radius: .2em;

}

[data-destaque="estoque"] {

    background-color: var(--tetris-yellow);
    color: var(--bkg-color);

}

[data-texto="estoqueanterior"], [data-texto="estoque_final"] {

    color: var(--tetris-yellow);

}

[data-destaque="juros"], [data-tipo="juros_refin"] {

    /* fazer no JS? */

    background-color: var(--tetris-cyan);
    color: var(--bkg-color);

}

[data-texto="juros"] {

    color: var(--tetris-cyan);

}

[data-destaque="vencimentos"] {

    background-color: var(--tetris-orange);

}

[data-texto="vencimentos"] {

    color: var(--tetris-orange);

}

[data-texto="recursos_orcamento"] {

    color: var(--tetris-blue);

}

[data-destaque="refinanciamento"] {

    background-color: var(--tetris-red);

}

[data-texto="refinanciamento"] {

    color: var(--tetris-red);

}

[data-texto="emissoes"] {

    color: var(--tetris-red);

}

[data-texto="pib"] {

    color: var(--comp-color1);

}




[data-tipo='juros_outras_fontes'], [data-tipo='juros_refin'] {

    background-color: var(--tetris-cyan);

}

/* [data-tipo="juros_outras_fontes"] {

    background-color: limegreen;



[data-tipo="vencimentos_outras_fontes"] {

    border: 0px solid var(--tetris-orange);

}

[data-tipo="vencimentos_refin"] {

    background-color: skyblue;

}

*/

[data-tipo="fantasmas_refin"] {

    background-color: transparent;
    border: 1px solid grey;

}

.setinha-saldo {

    position: absolute;
    border: .5rem solid;
    border-color: transparent transparent transparent var(--text-color);
    transform: translate(calc(-10px - 0.5rem), -50%);
    top: 100vh;

}

.setinha-saldo::before {

    transform: translate(-100%, -50%);
    position: absolute;
    text-align: right;
    font-size: .6rem;
    padding-right: 1em;

}

[data-setinha-saldo-anterior]::before {

    content: '2020';

}

[data-setinha-saldo-final]::before {

    content: '2021';

}

/* General Layout */

section.visualizacao {

    position: relative;

}

/* * * * * * * * * * * * * * * */
/* the FAQ */

svg[role='separator'] {

    width: 100%;
    margin-bottom: 2rem;

}

svg[role='separator'] > path {

    stroke: var(--text-color);
    fill: transparent;
    stroke-width: .1;


}

section.faq .chamada {

    /*height: 50vh;*/

}

/*.chamada-inner {
    margin-top: 50vh;
    margin-bottom: 50vh;
}*/

section.faq {

    margin-top : 5rem;

}

section.faq h2,
section.faq h3 {

    font-family: var(--font-text);
    font-weight: bold;

}

section.faq h2 {

    text-align: center;
    padding-bottom: 1rem;
    /*border-bottom: 3px solid currentColor;*/
    /*display: inline-block;*/
    margin-bottom: 1.5rem;
    font-family: var(--font-arcade);
    color: var(--text-color);
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: normal;

}

section.faq ul {

    padding: 0;
    list-style: none;

}

section.faq ol > li::marker {

    color: var(--title-color);
    font-size: 1.17rem;
    font-weight: bold;


}

section.faq a,
a.story-link {

    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid dimgray;
    transition: all .25s;

}

section.faq a:hover,
a.story-link:hover {

    border-bottom: 2px solid currentColor;
    font-weight: bold;

}



/* = = = = = = = = = = = = = */
/* = = = =  ABERTURA = = = = */

p.arcade {

    font-family: var(--font-arcade);
    text-transform: uppercase;
    font-size: 1.4rem;
}

p.arcade.smaller {

    font-size: 1rem;

} 

.center {
    text-align: center;
}

.press-start p {

    margin: 0;
    text-align: center;

}

.press-start p + p {

    margin-top: .3rem;
    transition: opacity 1s 2s;

}

.hidden {

    opacity : 0;

}

footer > .svg-wrapper {

    width: 80px;
    height: 80px;
    margin: 0 auto;

}

.svg-wrapper > svg {
    /*width: 200px;
    height: 200px;*/
}

.container-svg-abertura {

    width: 100%;
    max-width: 36rem;
    margin: 0 auto;

}

/*
.container-svg-abertura::before {
    content: 'a dinâmica da';
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}
*/

.container-svg-abertura svg {

    width: 100%;
    border: 2px solid transparent;
    /* sem essa borda de 2px ele fica com um efeito muito louco no final, um jitter bizarro */
}

:root {
    --tetris-purple: #DF00FF;
    --tetris-green: #00f000;
    --tetris-red: #ff1200;
    --tetris-yellow: #ffe600;
    --tetris-orange: #ff6700;
    --tetris-orangesemi : #f0a000;
    --tetris-blue: #0086ff;
    --tetris-cyan: #00fff8;
}

path {

    stroke: var(--text-color);
    fill: transparent;
    stroke-width: .1;
    /*stroke-width: 0.05px;*/
    transition: transform steps(30) 2s var(--transition-delay), stroke .5s calc(2.2s + var(--transition-delay)), fill .5s calc(2.2s + var(--transition-delay)); 

    --delay-base: 250ms;

    --delay-cor : calc(2s + 10 * 0.25s);

}

svg.inicio path {

    stroke: darkgrey;
    transform: translate(0,-100%);
    

}

svg.inicio path.I-block { fill: var(--tetris-cyan);}
svg.inicio path.O-block { fill: var(--tetris-yellow);}
svg.inicio path.L-block { fill: var(--tetris-orange);}
svg.inicio path.J-block { fill: var(--tetris-blue);}
svg.inicio path.S-block { fill: var(--tetris-green);}
svg.inicio path.Z-block { fill: var(--tetris-red);}
svg.inicio path.T-block { fill: var(--tetris-purple);}


.delay0 {--transition-delay: calc(0 * var(--delay-base) + var(--delay-base));}
.delay0-1 {--transition-delay: calc(0.3 * var(--delay-base) + var(--delay-base));}
.delay0-2 {--transition-delay: calc(0.6 * var(--delay-base) + var(--delay-base));}
.delay1 {--transition-delay: calc(1 * var(--delay-base) + var(--delay-base));}
.delay1-1 {--transition-delay: calc(1.5 * var(--delay-base) + var(--delay-base));}
.delay2 {--transition-delay: calc(2 * var(--delay-base) + var(--delay-base));}
.delay3 {--transition-delay: calc(3 * var(--delay-base) + var(--delay-base));}
.delay4 {--transition-delay: calc(4 * var(--delay-base) + var(--delay-base));}
.delay5 {--transition-delay: calc(5 * var(--delay-base) + var(--delay-base));}
.delay6 {--transition-delay: calc(6 * var(--delay-base) + var(--delay-base));}
.delay7 {--transition-delay: calc(7 * var(--delay-base) + var(--delay-base));}
.delay8 {--transition-delay: calc(8 * var(--delay-base) + var(--delay-base));}
.delay9 {--transition-delay: calc(9 * var(--delay-base) + var(--delay-base));}

.rotulos-detentores {
    position: absolute;
    margin: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(100%);
}