nimiq-style.min.css

/*!
Nimiq Style CSS Framework v0.8.5
URL: https://github.com/nimiq/nimiq-style
Styleguide: https://nimiq.com/styleguide
*/html{font-size:8px;--nimiq-size:8px;font-family:Muli,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-size:2.25rem}.nq-h1,.nq-style h1{font-size:3rem;line-height:1.2;font-weight:700;margin:3rem 0}.nq-h2,.nq-style h2{font-size:2.5rem;line-height:1.2;font-weight:700;margin:2.5rem 0}.nq-h3,.nq-style h3{font-size:2rem;line-height:1.2;font-weight:700;margin:2rem 0}.nq-style p,.nq-text{font-size:2rem;line-height:1.3125;color:rgba(31,35,72,.7);margin:2rem 0}.nq-text-s{font-size:1.75rem;line-height:1.2;font-weight:600;margin:1rem 0}.nq-label{font-size:1.75rem;line-height:.857;font-weight:600;text-transform:uppercase;letter-spacing:.107em;margin:1rem 0;color:rgba(31,35,72,.7)}.nq-notice{font-weight:600;font-size:2rem}.nq-notice.info{color:var(--nimiq-light-blue)}.nq-notice.success{color:var(--nimiq-green)}.nq-notice.warning{color:var(--nimiq-orange)}.nq-notice.error{color:var(--nimiq-red)}.nq-link,.nq-style a,.nq-text a{color:var(--nimiq-light-blue);text-decoration:none;cursor:pointer}.nq-link:active,.nq-link:hover{text-decoration:underline}.nq-list,.nq-style ol,.nq-style ul{font-size:2rem;margin:2rem 0}.nq-list li,.nq-style li{margin:.5rem 0}.nq-button-s::-moz-focus-inner,.nq-button::-moz-focus-inner{border:0}.nq-button{position:relative;height:7.5rem;line-height:2.5rem;background-image:var(--nimiq-blue-bg);color:var(--nimiq-white);font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:.094em;border:none;padding:0 4rem;border-radius:500px;min-width:25rem;margin:2rem auto;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15);cursor:pointer;transition:transform 450ms var(--nimiq-ease),box-shadow 450ms var(--nimiq-ease);will-change:box-shadow;text-decoration:none;display:block;text-align:center;font-family:inherit}a.nq-button{display:inline-flex;color:var(--nimiq-white);justify-content:center;align-items:center}.nq-button:not([disabled])::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:500px;background-image:var(--nimiq-blue-bg-darkened);opacity:0;transition:opacity .3s var(--nimiq-ease);z-index:-1}.nq-button:focus,.nq-button:hover{box-shadow:0 1rem 2.5rem rgba(0,0,0,.2);transform:translate3D(0,-2px,0)}.nq-button:active::before,.nq-button:focus::before,.nq-button:hover::before{opacity:1}.nq-button:active{outline:0;box-shadow:0 .2rem .3rem rgba(0,0,0,.2);transform:translate3D(0,1px,0);transition:transform .2s cubic-bezier(.41,.34,.26,1.55),box-shadow .2s cubic-bezier(.41,.34,.26,1.55)!important}.nq-button-pill,.nq-button-s{display:inline-block;font-size:1.75rem;line-height:3.375rem;height:3.375rem;text-decoration:none;font-weight:700;padding:0 1.5rem;background-color:rgba(31,35,72,.07);color:var(--nimiq-blue);border-radius:1.6875rem;transition:color .3s var(--nimiq-ease),background-color .3s var(--nimiq-ease);will-change:color,background-color;border:none;cursor:pointer;position:relative;font-family:inherit}.nq-button-s[disabled]{opacity:.4;cursor:not-allowed}.nq-button-pill::before,.nq-button-s::before{content:'';display:block;position:absolute;left:-1.5rem;top:-1.5rem;right:-1.5rem;bottom:-1.5rem}.nq-button-s:active,.nq-button-s:focus,.nq-button-s:hover{color:var(--nimiq-blue-darkened);background:rgba(31,35,72,.12)}.nq-button-s[disabled]:hover{background:rgba(31,35,72,.07)}.nq-button-pill{color:var(--nimiq-white);background:var(--nimiq-blue);background-image:var(--nimiq-blue-bg)}.nq-button-pill:active,.nq-button-pill:focus,.nq-button-pill:hover{background:var(--nimiq-blue-darkened);background-image:var(--nimiq-blue-bg-darkened)}.nq-button.light-blue{background:var(--nimiq-light-blue);background-image:var(--nimiq-light-blue-bg)}.nq-button.light-blue::before{background-image:var(--nimiq-light-blue-bg-darkened)}.nq-button.light-blue.inverse{color:var(--nimiq-light-blue)}.nq-button.light-blue.inverse:active,.nq-button.light-blue.inverse:focus,.nq-button.light-blue.inverse:hover{color:var(--nimiq-light-blue-darkened)}.nq-button-s.light-blue{color:var(--nimiq-light-blue);background:rgba(5,130,202,.1)}.nq-button-s.light-blue:active,.nq-button-s.light-blue:focus,.nq-button-s.light-blue:hover{color:var(--nimiq-light-blue-darkened);background:rgba(5,130,202,.2)}.nq-button-s.light-blue[disabled]:hover{color:var(--nimiq-light-blue);background:rgba(5,130,202,.1)}.nq-button-pill.light-blue{background:var(--nimiq-light-blue);background-image:var(--nimiq-light-blue-bg)}.nq-button-pill.light-blue:active,.nq-button-pill.light-blue:focus,.nq-button-pill.light-blue:hover{background:var(--nimiq-light-blue-darkened);background-image:var(--nimiq-light-blue-bg-darkened)}.nq-button.green{background:var(--nimiq-green);background-image:var(--nimiq-green-bg)}.nq-button.green::before{background-image:var(--nimiq-green-bg-darkened)}.nq-button.green.inverse{color:var(--nimiq-green)}.nq-button.green.inverse:active,.nq-button.green.inverse:focus,.nq-button.green.inverse:hover{color:var(--nimiq-green-darkened)}.nq-button-s.green{color:var(--nimiq-green);background:rgba(33,188,165,.1)}.nq-button-s.green:active,.nq-button-s.green:focus,.nq-button-s.green:hover{color:var(--nimiq-green-darkened);background:rgba(33,188,165,.2)}.nq-button-s.green[disabled]:hover{color:var(--nimiq-green);background:rgba(33,188,165,.1)}.nq-button-pill.green{background:var(--nimiq-green);background-image:var(--nimiq-green-bg)}.nq-button-pill.green:active,.nq-button-pill.green:focus,.nq-button-pill.green:hover{background:var(--nimiq-green-darkened);background-image:var(--nimiq-green-bg-darkened)}.nq-button.orange{background:var(--nimiq-orange);background-image:var(--nimiq-orange-bg)}.nq-button.orange::before{background-image:var(--nimiq-orange-bg-darkened)}.nq-button.orange.inverse{color:var(--nimiq-orange)}.nq-button.orange.inverse:active,.nq-button.orange.inverse:focus,.nq-button.orange.inverse:hover{color:var(--nimiq-orange-darkened)}.nq-button-s.orange{color:var(--nimiq-orange);background:rgba(252,135,2,.1)}.nq-button-s.orange:active,.nq-button-s.orange:focus,.nq-button-s.orange:hover{color:var(--nimiq-orange-darkened);background:rgba(252,135,2,.2)}.nq-button-s.orange[disabled]:hover{color:var(--nimiq-orange);background:rgba(252,135,2,.1)}.nq-button-pill.orange{background:var(--nimiq-orange);background-image:var(--nimiq-orange-bg)}.nq-button-pill.orange:active,.nq-button-pill.orange:focus,.nq-button-pill.orange:hover{background:var(--nimiq-orange-darkened);background-image:var(--nimiq-orange-bg-darkened)}.nq-button.red{background:var(--nimiq-red);background-image:var(--nimiq-red-bg)}.nq-button.red::before{background:var(--nimiq-red-bg-darkened)}.nq-button.red.inverse{color:var(--nimiq-red)}.nq-button.red.inverse:active,.nq-button.red.inverse:focus,.nq-button.red.inverse:hover{color:var(--nimiq-red-darkened)}.nq-button-s.red{color:var(--nimiq-red);background:rgba(216,65,51,.1)}.nq-button-s.red:active,.nq-button-s.red:focus,.nq-button-s.red:hover{color:var(--nimiq-red-darkened);background:rgba(216,65,51,.2)}.nq-button-s.red[disabled]:hover{color:var(--nimiq-red);background:rgba(216,65,51,.1)}.nq-button-pill.red{background:var(--nimiq-red);background-image:var(--nimiq-red-bg)}.nq-button-pill.red:active,.nq-button-pill.red:focus,.nq-button-pill.red:hover{background:var(--nimiq-red-darkened);background-image:var(--nimiq-red-bg-darkened)}.nq-button.gold{background:var(--nimiq-gold);background-image:var(--nimiq-gold-bg)}.nq-button.gold:before{background:var(--nimiq-gold-bg-darkened)}.nq-button.gold.inverse{color:var(--nimiq-gold)}.nq-button.gold.inverse:active,.nq-button.gold.inverse:focus,.nq-button.gold.inverse:hover{color:var(--nimiq-gold-darkened)}.nq-button-pill.gold{background:var(--nimiq-gold);background-image:var(--nimiq-gold-bg)}.nq-button-pill.gold:active,.nq-button-pill.gold:focus,.nq-button-pill.gold:hover{background:var(--nimiq-gold-darkened);background-image:var(--nimiq-gold-bg-darkened)}.nq-button.inverse{background:var(--nimiq-white);color:var(--nimiq-blue);transition:transform 450ms var(--nimiq-ease),box-shadow 450ms var(--nimiq-ease),color .3s var(--nimiq-ease)}.nq-button.inverse::before{background:#eff0f2}.nq-button-s.inverse{background:rgba(255,255,255,.2);color:var(--nimiq-white)}.nq-button-s.inverse:active,.nq-button-s.inverse:focus,.nq-button-s.inverse:hover{background:rgba(255,255,255,.25)}.nq-button[disabled]{background:rgba(31,35,72,.07);color:rgba(31,35,72,.3);box-shadow:none!important;transform:none;cursor:not-allowed}.nq-button[disabled]:active,.nq-button[disabled]:hover{transform:none}.nq-button.inverse[disabled],.nq-button.inverse[disabled]:active,.nq-button.inverse[disabled]:hover{background:rgba(255,255,255,.2);color:rgba(255,255,255,.5)}.nq-button-pill::after,.nq-button-s::after,.nq-button::after{content:"";position:absolute;left:-5px;top:-5px;right:-5px;bottom:-5px;border:2px solid rgba(5,130,202,.5);border-radius:500px;opacity:0}.nq-button-pill.inverse::after,.nq-button-s.inverse::after,.nq-button.inverse::after{border-color:rgba(255,255,255,.4)}.nq-button-pill:focus,.nq-button-s:focus,.nq-button:focus{outline:0}.nq-button-pill:focus::after,.nq-button-s:focus::after,.nq-button:focus::after{opacity:1}.nq-input,.nq-input-s{font-family:inherit;font-size:inherit;font-weight:inherit;padding:1.25rem 2.25rem;border:none;--border-color:rgba(31, 35, 72, 0.1);box-shadow:inset 0 0 0 .25rem var(--border-color);color:var(--nimiq-blue);background:0 0;border-radius:.5rem;outline:0;transition:color .2s ease,box-shadow .2s ease;background-clip:padding-box}.nq-input-s{padding:.6875rem 1.4375rem;box-shadow:inset 0 0 0 .1875rem var(--border-color)}.nq-input-s.vanishing,.nq-input.vanishing{--border-color:rgba(31, 35, 72, 0)}.nq-input-s::placeholder,.nq-input::placeholder{color:rgba(31,35,72,.5);transition:color .2s ease}.nq-input-s:hover,.nq-input:hover{--border-color:rgba(31, 35, 72, 0.14)}.nq-input-s:focus::placeholder,.nq-input-s:hover::placeholder,.nq-input:focus::placeholder,.nq-input:hover::placeholder{color:rgba(5,130,202,.7)}.nq-input-s.vanishing:focus,.nq-input-s:focus,.nq-input.vanishing:focus,.nq-input:focus{--border-color:rgba(5, 130, 202, 0.2);color:var(--nimiq-light-blue)}body,html{box-sizing:border-box;-webkit-overflow-scrolling:touch;min-width:300px}*,:after,:before{box-sizing:inherit}.flex-grow{flex-grow:1}.flex-grow-half{flex-grow:.5}.flex-grow-double{flex-grow:2}.hidden{visibility:hidden}.display-none{display:none!important}.nq-card{max-width:75rem;background:var(--nimiq-card-bg);border-radius:1.25rem;box-shadow:0 .5rem 3.5rem rgba(0,0,0,.111158);margin:2rem;color:var(--nimiq-blue)}@media (max-width:450px){.nq-card{margin:2rem 1rem}}.nq-card-header{padding:4rem;text-align:center;border-top-left-radius:1rem;border-top-right-radius:1rem}@media (max-width:450px){.nq-card-header{padding:3rem}}.nq-card-header .nq-h1,.nq-card-header .nq-h2{margin:0}.nq-card-header .nq-notice{margin:3rem 0 0;text-align:center}.nq-card-body{padding:4rem}@media (max-width:450px){.nq-card-body{padding:3rem}}.nq-card-header+.nq-card-body{padding-top:1rem}.nq-card-body>:first-child{margin-top:0}.nq-card-body>:last-child{margin-bottom:0}.nq-card-footer{padding:1rem;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.nq-card-body+.nq-card-footer{padding-top:0}.margin-top-5{margin-top:5rem}.margin-top-4{margin-top:4rem}.margin-top-3{margin-top:3rem}.margin-top-2{margin-top:2rem}.margin-top-1{margin-top:1rem}.nq-shadow{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15)}.nq-shadow-l{box-shadow:0 .5rem 2.5rem rgba(0,0,0,.15)}html{--nimiq-blue:#1F2348;--nimiq-light-blue:#0582CA;--nimiq-gold:#E9B213;--nimiq-green:#21BCA5;--nimiq-orange:#FC8702;--nimiq-red:#D94432;--nimiq-purple:#5F4B8B;--nimiq-pink:#FA7268;--nimiq-light-green:#88B04B;--nimiq-brown:#795548;--nimiq-gray:#F4F4F4;--nimiq-light-gray:#FAFAFA;--nimiq-white:#FFF;--nimiq-light-blue-on-dark:#0CA6FE;--nimiq-red-on-dark:#FF5C48;--nimiq-blue-darkened:#151833;--nimiq-light-blue-darkened:#0071C3;--nimiq-gold-darkened:#E5A212;--nimiq-green-darkened:#20B29E;--nimiq-orange-darkened:#FC7500;--nimiq-red-darkened:#D13030;--nimiq-blue-bg:radial-gradient(100% 100% at bottom right, #260133, var(--nimiq-blue));--nimiq-light-blue-bg:radial-gradient(100% 100% at bottom right, #265DD7, var(--nimiq-light-blue));--nimiq-gold-bg:radial-gradient(100% 100% at bottom right, #EC991C, var(--nimiq-gold));--nimiq-green-bg:radial-gradient(100% 100% at bottom right, #41A38E, var(--nimiq-green));--nimiq-orange-bg:radial-gradient(100% 100% at bottom right, #FD6216, var(--nimiq-orange));--nimiq-red-bg:radial-gradient(100% 100% at bottom right, #CC3047, var(--nimiq-red));--nimiq-purple-bg:radial-gradient(100% 100% at bottom right, #4D4C96, var(--nimiq-purple));--nimiq-pink-bg:radial-gradient(100% 100% at bottom right, #E0516B, var(--nimiq-pink));--nimiq-light-green-bg:radial-gradient(100% 100% at bottom right, #70B069, var(--nimiq-light-green));--nimiq-brown-bg:radial-gradient(100% 100% at bottom right, #724147, var(--nimiq-brown));--nimiq-blue-bg-darkened:radial-gradient(100% 100% at bottom right, #180021, var(--nimiq-blue-darkened));--nimiq-light-blue-bg-darkened:radial-gradient(100% 100% at bottom right, #2355C4, var(--nimiq-light-blue-darkened));--nimiq-gold-bg-darkened:radial-gradient(100% 100% at bottom right, #E58A1B, var(--nimiq-gold-darkened));--nimiq-green-bg-darkened:radial-gradient(100% 100% at bottom right, #3D9988, var(--nimiq-green-darkened));--nimiq-orange-bg-darkened:radial-gradient(100% 100% at bottom right, #EA5200, var(--nimiq-orange-darkened));--nimiq-red-bg-darkened:radial-gradient(100% 100% at bottom right, #BF2D46, var(--nimiq-red-darkened));--nimiq-highlight-bg:rgba(31, 35, 72, 0.06);--nimiq-card-bg:white}body{color:var(--nimiq-blue);background:var(--nimiq-gray);margin:0}.nq-blue{color:var(--nimiq-blue)!important}.nq-light-blue{color:var(--nimiq-light-blue)!important}.nq-gold{color:var(--nimiq-gold)!important}.nq-green{color:var(--nimiq-green)!important}.nq-orange{color:var(--nimiq-orange)!important}.nq-red{color:var(--nimiq-red)!important}.nq-purple{color:var(--nimiq-purple)!important}.nq-pink{color:var(--nimiq-pink)!important}.nq-light-green{color:var(--nimiq-light-green)!important}.nq-brown{color:var(--nimiq-brown)!important}.nq-blue-bg{background:var(--nimiq-blue);background-image:var(--nimiq-blue-bg)}.nq-light-blue-bg{background:var(--nimiq-light-blue);background-image:var(--nimiq-light-blue-bg)}.nq-gold-bg{background:var(--nimiq-gold);background-image:var(--nimiq-gold-bg)}.nq-green-bg{background:var(--nimiq-green);background-image:var(--nimiq-green-bg)}.nq-orange-bg{background:var(--nimiq-orange);background-image:var(--nimiq-orange-bg)}.nq-red-bg{background:var(--nimiq-red);background-image:var(--nimiq-red-bg)}.nq-purple-bg{background:var(--nimiq-purple);background-image:var(--nimiq-purple-bg)}.nq-pink-bg{background:var(--nimiq-pink);background-image:var(--nimiq-pink-bg)}.nq-light-green-bg{background:var(--nimiq-light-green);background-image:var(--nimiq-light-green-bg)}.nq-brown-bg{background:var(--nimiq-brown);background-image:var(--nimiq-brown-bg)}.nq-gray-bg{background:var(--nimiq-gray)}.nq-blue-bg,.nq-blue-bg .nq-link,.nq-gold-bg,.nq-gold-bg .nq-link,.nq-green-bg,.nq-green-bg .nq-link,.nq-light-blue-bg,.nq-light-blue-bg .nq-link,.nq-orange-bg,.nq-orange-bg .nq-link,.nq-red-bg,.nq-red-bg .nq-link{color:var(--nimiq-white)}.nq-blue-bg .nq-label,.nq-blue-bg .nq-text,.nq-gold-bg .nq-label,.nq-gold-bg .nq-text,.nq-green-bg .nq-label,.nq-green-bg .nq-text,.nq-light-blue-bg .nq-label,.nq-light-blue-bg .nq-text,.nq-orange-bg .nq-label,.nq-orange-bg .nq-text,.nq-red-bg .nq-label,.nq-red-bg .nq-text{color:rgba(255,255,255,.7)}.nq-blue-bg,.nq-blue-bg .nq-card .nq-blue-bg{--nimiq-light-blue:var(--nimiq-light-blue-on-dark);--nimiq-red:var(--nimiq-red-on-dark)}.nq-blue-bg .nq-button.inverse,.nq-blue-bg .nq-card{--nimiq-light-blue:#0582CA;--nimiq-red:#D94432}.nq-blue-bg .nq-input,.nq-blue-bg .nq-input-s{--border-color:rgba(255, 255, 255, 0.2);color:var(--nimiq-white)}.nq-blue-bg .nq-input-s.vanishing,.nq-blue-bg .nq-input.vanishing{--border-color:rgba(255, 255, 255, 0)}.nq-blue-bg .nq-input-s::placeholder,.nq-blue-bg .nq-input::placeholder{color:rgba(255,255,255,.3)}.nq-blue-bg .nq-input-s:focus,.nq-blue-bg .nq-input-s:hover,.nq-blue-bg .nq-input:focus,.nq-blue-bg .nq-input:hover{--border-color:rgba(255, 255, 255, 0.3);color:var(--nimiq-white)}.nq-icon{width:1em;height:1em}html{--nimiq-ease:cubic-bezier(0.25, 0, 0, 1);--attr-duration:.2s;--movement-duration:.4s}