* {box-sizing: border-box;} @font-face { font-family: 'Alverata-Bold'; src: url('Alverata-Bold.otf') format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NunitoSans-Regular'; src: url('NunitoSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NunitoSans-Italic'; src: url('NunitoSans-Italic.ttf') format('truetype'); font-weight:normal; font-style: italic; } @property --angle { syntax: '<angle>'; inherits: false; initial-value: 135deg; } body {line-height: 1.5;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-family: sans-serif;background: #071351;color:#fff} body,h1,h2,h3,h4,h5,h6,p,div, hr {margin: 0;padding: 0;} ol,ul {list-style: none;} a {text-decoration: none;color: inherit;} input,button,textarea,select {margin: 0;padding: 0;font: inherit;color: inherit;background: none;border: none;outline: none;appearance: none;-webkit-appearance: none;} button {cursor: pointer;background-color: transparent;} h1,h2,h3,h4,h5,h6 {font-weight: normal;line-height: 1.75rem; font-family: 'Alverata-Bold', sans-serif;word-break:break-word;font-size: 20px;} :root { --card-w:200px; --card-h:300px; --control-open: 830px; --radius:10px; } button {border-radius: 20px;padding: 5px 15px;line-height: 1.25em;font-size: 12px;} .disabled {opacity: .3;pointer-events: none;} .close {border: 2px solid rgba(255, 255, 255, .3);position: absolute;bottom: 10px;right: 10px;font-size: 15px;text-transform: lowercase; background:#05114d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M6 0H5V5H0V6H5V11H6V6H11V5H6V0Z' fill='%23fff'/%3E%3C/svg%3E") center center no-repeat;transform: rotate(45deg);background-size: 12px; display: flex;align-items: center;justify-content: center;border-radius: 50%;padding: 0;width: 25px;height: 25px;opacity: .9;transition:all .25s ease-in-out; &:hover {transform: rotate(225deg);background-size:10px ;background-color: #060e38;} } #control { border:2px solid #1f64c4;display:flex;border-radius: var(--radius);position:fixed;z-index: 200; top:20px;left:20px;padding:0 20px 0 20px;background:rgba(7, 19, 81, .85); backdrop-filter: blur(5px);height:calc(var(--card-h) + 2px);overflow:hidden;transition:width .25s ease-in-out; width:var(--card-w); &.open { width: var(--control-open);overflow:visible; .options{opacity: 1;} #description{animation: show-description 1s ease-in-out forwards;} .logo button { span {background-color: transparent;} span::before {top: 0;transform: rotate(45deg);} span::after {top: 0;transform: rotate(-45deg);} } } .logo { width:var(--card-w);display:flex;flex-direction: column; align-items: center;justify-content: center;position:absolute;left:0;padding:20px;height: 100%; img{width: 50px;margin: 30px auto 15px auto;} p{color:#f2aa39;font-size: 16px;text-align: center;} button { margin-top: 40px;color:#071351;background: #f2aa39;width: 100px;position:relative; span { display: inline-block;width: 10px;height: 2px;background-color: black;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transition: background-color 0.3s ease;left:15px; &::before, &::after {content: '';position: absolute;width: 10px;height: 2px;background-color: #0d1d6e;left: 0;transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;} &::before {top: -4px} &::after {top: 4px} } } } .options { width:calc( var( --card-w) * 1.5);position:absolute;left:210px;opacity:0;transition: all .25s ease-in-out;transition-delay:.3s ;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;height:100%; .select-container { margin-bottom: 15px;width: 100%; &>span{margin-bottom: 5px;display: block;} } #apply-btn {border: 1px solid #fff;padding: 5px 15px;margin-top: 10px;transition: all .25s ease-in-out;outline: 0;position: relative;} #apply-btn:hover {background:#1a33b3} #apply-btn:not(.disabled) {animation: filter-ready .25s ease-in-out;} #reset-btn {font-size: 14px;margin-left: 2em;text-decoration: underline;cursor: pointer;transition:all .25s ease-in-out} #reset-btn:hover {color:#357ce2} } .description { width: 302px;height: auto;position: relative;left: 510px;padding: 0 20px;margin: 20px 0;border-left:1px solid #1f64c4;display: flex;flex-direction: column;justify-content: center;opacity:0;transition:opacity .5s ease-in-out;transition-delay: .5s; h2{width: 100%;display: block;} h2.centered{text-align: center;} p{margin-top: 0.5em;font-size: 15px;opacity: .8;} } } #main.init { .sorted {display: none;} .random {display: flex;} } #main { width:100%;height: auto;max-height: 100vh;position: fixed;top:0;left: 0;z-index:100;gap:10px;display: flex;padding:20px;flex-wrap: wrap;align-items: flex-start;justify-content: flex-start;scrollbar-width: thin;overflow-x:hidden;overflow-y:auto;transition:none;padding-bottom: 100px; .sorted, .random {width: 100%;flex-wrap: wrap;gap: 10px; } .sorted {display: flex;} .random {display: none;} #empty, .card { background-color: transparent;width: var(--card-w); height: var(--card-h); perspective: 1000px;transform:translate3d(0,0,0); &.Onboard { .card-grad {background-image: linear-gradient(135deg,#357ce2 0%, #163180 100%);} .card-inner .card-back { border: 2px solid #357ce2;fill:#357ce2; a:hover{color: #357ce2;} } } &.Engage { .card-grad {background-image: linear-gradient(135deg,#f2aa39 0%, #7a4163 100%);} .card-inner .card-back { border: 2px solid #f2aa39;fill: #f2aa39; a:hover{color: #f2aa39;} } } &.Grow { .card-grad {background-image: linear-gradient(135deg,#1b9486 0%, #163b7d 100%);} .card-inner .card-back { border: 2px solid #1b9486;fill: #1b9486; a:hover{color: #1b9486;} } } &.Guard	 { .card-grad {background-image: linear-gradient(135deg,#773e64 0%, #0950ad 100%);} .card-inner .card-back { border: 2px solid #773e64;fill:#773e64; a:hover{color: #773e64;} } }										 &.active { z-index: 99; .card-inner { transform: rotateY(180deg); .card-back { div{opacity: 1;transition-delay:.5s;} } } } .card-inner { position: relative;width: 100%;height: 100%;transform-style: preserve-3d;position:relative;border-radius: var(--radius); p{margin-bottom: 20px;} button{border:1px solid #fff;} .card-front, .card-back { position: absolute;width: 100%;height: 100%;backface-visibility: hidden;border-radius: var(--radius);padding: 20px;line-height: 1.5em; } .card-front { display: flex;flex-direction: column;justify-content: space-between;text-align: left;overflow: hidden;z-index: 10;cursor: pointer; h2,p,a,button,div {z-index: 10;} h2,p,div {pointer-events: none;} .card-grad { pointer-events: none; position:absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 0; background-size: 100%; background-position: 0; transition: all 2s ease-in-out; } } .card-back { background-color: #0a2f80;transform: rotateY(180deg);position: absolute;right:0;z-index:25;border: 2px solid transparent;transition: border 1s ease-in-out;overflow:hidden; div{opacity: 0;width:375px;transition:opacity .25s ease-in-out;transition-delay: 0;} a {color: #fff;transition: all .25s ease-in-out;position: relative} a svg {width:1rem;height: 1rem;line-height: 1rem; position: absolute;top:1px;right:-20px;transition:all .25s ease-in-out;fill:#fff} a:hover svg {right: -30px;fill:inherit} } } } } #main.canHover { .sorted {display: none;} .random {display: flex;} .card { --angle: 135deg; &.Onboard { .card-inner {background-image: linear-gradient(var(--angle),#357ce2 0%, #163180 100%); animation: spinGradient 3s linear infinite;} } &.Engage { .card-inner {background-image: linear-gradient(var(--angle),#f2aa39 0%, #7a4163 100%); animation: spinGradient 3s linear infinite;} } &.Grow { .card-inner {background-image: linear-gradient(var(--angle),#1b9486 0%, #163b7d 100%); animation: spinGradient 3s linear infinite;} } &.Guard	 { .card-inner {background-image: linear-gradient(var(--angle),#773e64 0%, #0950ad 100%); animation: spinGradient 3s linear infinite;} }	 } .card .card-inner { height: 100%; border-radius: var(--radius); transition:all .3s ease-in-out !important;transform: rotateY(0deg) !important;transition-duration:.5s !important;cursor: default; .card-back { background:#0d1d6e url(card-back.svg) center no-repeat; background-size: 28%; border: 0 !important;overflow: hidden;width: calc(100% - 6px) !important;height: calc(100% - 6px) !important;top: 3px;right: 3px !important; } } .card:hover .card-inner { transform: rotateY(180deg) !important;transition-duration:.2s !important; } } @keyframes intro { 0%{transform: rotateY(90deg);} 100%{transform: rotateY(0deg);} } @keyframes show-description { 0%{opacity: 0;} 100%{opacity: 1;} } @keyframes filter-ready { 0%{transform: scale(1.4); background:#1a33b3 } 100%{transform: scale(1); background:transparent} } @keyframes to-close { 0%{ transform: rotateY(0deg) ;} 100%{ transform: rotateY(180deg);} } @keyframes to-open { 0%{ transform: rotateY(180deg) ;} 100%{ transform: rotateY(0deg) ;} } @keyframes spinGradient { 0% { --angle: 0deg; } 100% { --angle: 360deg; } } .custom-select { position: relative; width: 100%; user-select: none; } .selected { padding: 10px; border: 1px solid #ccc; background: #071351; color: #fff; cursor: pointer; border-radius: 5px; &:after { display: block; content: ""; border-left: 1px solid; height: 100%; width: 34px; position: absolute; right: 0; height: 70%; top: 15%; background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0 L5 5 L8 0' style='fill:none; stroke:%23fff;stroke-width:1' /%3E%3C/svg%3E ") center no-repeat; } } .dropdown { position: absolute; width: 100%; border-top: none; background: #091861; color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease; z-index: 10; list-style: none; padding: 0; margin:0; } .dropdown.open { max-height: 400px; overflow-y: hidden; } .dropdown li { padding: 10px; cursor: pointer; } .dropdown li:hover, .dropdown li.focused { background-color: #11206d; } #modal { position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(21, 46, 124, .6);display: flex;justify-content: center;align-items: center;z-index: 999; .modal-content { background-image: linear-gradient(var(--angle),#357ce2 0%, #163180 100%); animation: spinGradient 4s ease-out infinite;position: relative;max-width: 950px;width: 90%;text-align: left;padding:2px;border-radius: 10px; .modal-inner { background: #152e7c; border-radius: var(--radius);padding:40px 80px; img{width:135px;margin-bottom: 20px;} h2{font-size: 28px;font-weight: 300;margin: 0;padding: 0;} &>div {display: flex;flex-direction: column;gap:1rem} p, ul, li {font-family: 'NunitoSans-Regular';} ul {padding: 0;margin: 0;;} ul li {margin: 0 0 1rem 50px;position: relative;} ul li:before {display: block;position: absolute;left:-25px;top:3px;content: "";width:15px;height: 15px;border-radius: 50%;border:1px solid #fff;background: url(arrow.svg) center no-repeat;background-size: 8px;} em{font-family: "NunitoSans-Italic";} } } .close {top: 20px;right: 20px;background-color: transparent;border: 1px solid #fff;} .get-started { border: 1px solid #fff;padding: 5px 15px;margin-top: 10px;transition: all .25s ease-in-out;outline: 0;position: relative; &:hover {background:#1a33b3} } }