html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;} body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-text-size-adjust: none; } mark { background-color: transparent; color: inherit; } input::-moz-focus-inner { border: 0; padding: 0; } input, select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; } /* Basic */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: #fff; overflow: hidden; } body.is-preload *, body.is-preload *:before, body.is-preload *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } body, input, select, textarea { color: #fff; font-family: Arial, sans-serif; font-size: 15pt; font-weight: 300 !important; letter-spacing: -0.025em; line-height: 1.75em; } a { -moz-transition: border-color 0.2s ease-in-out; -webkit-transition: border-color 0.2s ease-in-out; -ms-transition: border-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out; border-bottom: dotted 1px; color: inherit; outline: 0; text-decoration: none; } a:hover { border-color: transparent; } /* Icon */ .icon { text-decoration: none; position: relative; } .icon > .label { display: none; } /* Wrapper */ #wrapper { height: 100%; left: 0; position: fixed; top: 0; width: 100%; background: #000; } /* Main */ #main { height: 100%; left: 0; position: fixed; text-align: center; top: 0; width: 100%; } #main:before { content: ''; display: inline-block; height: 100%; margin-right: 0; vertical-align: middle; width: 1px; } /* Header */ #header { -moz-animation: header 1s linear forwards; -webkit-animation: header 1s linear forwards; -ms-animation: header 1s linear forwards; animation: header 1s linear forwards; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); cursor: default; display: inline-block; opacity: 0; position: relative; text-align: center; top: -1em; vertical-align: middle; width: 90%; z-index: 2; } #header p { font-size: 1em; margin: 0.75em 0 0.25em 0; opacity: 0.75; } #header nav { margin: 1.25em 0 0 0; } #header nav li { -moz-animation: nav-icons 0.5s ease-in-out forwards; -webkit-animation: nav-icons 0.5s ease-in-out forwards; -ms-animation: nav-icons 0.5s ease-in-out forwards; animation: nav-icons 0.5s ease-in-out forwards; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); display: inline-block; height: 5.35em; line-height: 5.885em; opacity: 0; position: relative; top: 0; width: 5.35em; } #header nav li:nth-child(1) { -moz-animation-delay: .5s; -webkit-animation-delay: .5s; -ms-animation-delay: .5s; animation-delay: .5s; } #header nav li:nth-child(2) { -moz-animation-delay: .75s; -webkit-animation-delay: .75s; -ms-animation-delay: .75s; animation-delay: .75s; } #header nav li:nth-child(3) { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } #header nav li:nth-child(4) { -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; -ms-animation-delay: 1.25s; animation-delay: 1.25s; } #header nav li:nth-child(5) { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -ms-animation-delay: 1.5s; animation-delay: 1.5s; } #header nav li:nth-child(6) { -moz-animation-delay: 1.75s; -webkit-animation-delay: 1.75s; -ms-animation-delay: 1.75s; animation-delay: 1.75s; } #header nav li:nth-child(7) { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } #header nav li:nth-child(8) { -moz-animation-delay: 2.25s; -webkit-animation-delay: 2.25s; -ms-animation-delay: 2.25s; animation-delay: 2.25s; } #header nav li:nth-child(9) { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; animation-delay: 2.5s; } #header nav li:nth-child(10) { -moz-animation-delay: 2.75s; -webkit-animation-delay: 2.75s; -ms-animation-delay: 2.75s; animation-delay: 2.75s; } #header nav a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; border: 0; display: inline-block; } #header nav a:before { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 100%; border: solid 1px #fff; display: block; font-size: 1.75em; height: 2.5em; line-height: 2.5em; position: relative; text-align: center; top: 0; width: 2.5em; } #header nav a:hover { font-size: 1.1em; } #header nav a:hover:before { background-color: rgba(255, 255, 255, 0.175); color: #fff; } #header nav a:active { font-size: 0.95em; background: none; } #header nav a:active:before { background-color: rgba(255, 255, 255, 0.35); color: #fff; } #header nav a span { display: none; } /* Footer */ #footer { bottom: 0; cursor: default; height: 6em; left: 0; line-height: 8em; position: absolute; text-align: center; width: 100%; z-index: 2; } /** ********** ** * RESPONSIVE ** ********** **/ /* Wide */ @media screen and (max-width: 1680px) { body, input, select, textarea { font-size: 13pt; } } /* Normal */ @media screen and (max-width: 1280px) { body, input, select, textarea { font-size: 12pt; } } /* Mobile */ @media screen and (max-width: 736px) { body { min-width: 320px; } body, input, select, textarea { font-size: 11pt; } #header h1 { height: 175px; } #header p { font-size: 1em; } #header nav { font-size: 1em; } #header nav a:hover { font-size: 1em; } #header nav a:active { font-size: 1em; } } /* Mobile (Portrait) */ @media screen and (max-width: 480px) { #header nav { padding: 0 1em; } }/* --- header --- */ @-moz-keyframes header { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes header { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes header { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes header { 0% { opacity: 0; } 100% { opacity: 1; } } /* --- nav-icons --- */ @-moz-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-ms-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }@font-face { font-family: 'rorx'; src: url('../font/rorx.eot?37110886'); src: url('../font/rorx.eot?37110886#iefix') format('embedded-opentype'), url('../font/rorx.woff2?37110886') format('woff2'), url('../font/rorx.woff?37110886') format('woff'), url('../font/rorx.ttf?37110886') format('truetype'), url('../font/rorx.svg?37110886#rorx') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'rorx'; src: url('../font/rorx.svg?37110886#rorx') format('svg'); } } */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "rorx"; font-style: normal; font-weight: normal; speak: never; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-mail:before { content: '\e800'; } /* '' */ .icon-instagram:before { content: '\e801'; } /* '' */ .icon-discord:before { content: '\e802'; } /* '' */ .icon-tiktok:before { content: '\e803'; } /* '' */ .icon-separators:before { content: '\e804'; } /* '' */ @import url("reset.css"); @import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap'); @import url("keyframes.css"); @import url("rorx-icons.css"); body, input, select, textarea { font-family: 'Laila', sans-serif; } #wrapper { background: #0c102e; } /* header */ #header h1 { font-size: 0; background: url('images/rise-of-the-robots-x-logo.png') center center/contain no-repeat; height: 250px; } #header nav a:before { border-radius: 0; border: none; } #header nav a:hover:before { background-color: transparent; } /* btn */ .btn { position: relative; text-decoration: none; border: none; } .btn.parallelogram { background: #ff2e43; border-bottom: 2px solid #99101e; margin-bottom: -2px; padding: 10px 50px 8px; font-family: "Oxanium", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media screen and (max-width: 736px) { .btn.parallelogram { padding: 10px 10px 8px; font-size: 14px; } } .btn.parallelogram:hover, .btn.parallelogram:active, .btn.parallelogram:visited { border-bottom: 2px solid #99101e; letter-spacing: 4px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .parallelogram:before, .parallelogram:after { content:''; position: absolute; top: 0; width: 30px; height: calc(100% + 2px); border-bottom: 2px solid #99101e; background: #ff2e43; } .parallelogram:before { left: -20px; transform: skew(20deg); border-left: 2px solid #99101e; } .parallelogram:after { right: -20px; transform: skew(-20deg); border-right: 2px solid #99101e; } .btn.parallelogram .spaner { position: relative; z-index: 1; padding: 0 30px; } .btn.parallelogram .spaner:before, .btn.parallelogram .spaner:after { content: '\e804'; font-family: 'rorx'; font-size: 46px; position: absolute; top: 50%; } .btn.parallelogram .spaner:before { left: -50px; transform: translate(0,-50%); text-align: left; } .btn.parallelogram .spaner:after { right: -50px; transform: translate(0,-50%); text-align: right; } @media screen and (max-width: 736px) { .btn.parallelogram .spaner:before { left: -25px; } .btn.parallelogram .spaner:after { right: -25px; } } @media screen and (max-width: 480px) { .btn.parallelogram:hover, .btn.parallelogram:active, .btn.parallelogram:visited { letter-spacing: 2px; } .btn.parallelogram .spaner { padding: 0; } .btn.parallelogram .spaner:before, .btn.parallelogram .spaner:after { content: none; } }