:root { --accent: rgba(40, 40, 40, 1.00); --hilight-light: rgba(10, 180, 250, 1.00); --hilight: rgba(20, 120, 220, 1.00); --hilight-dark: rgba(10, 60, 110, 1.00); --positive: rgba(30, 240, 120, 1.00); --negative: rgba(240, 20, 70, 1.00); --white: rgba(255, 255, 255, 1.00); --black: rgba(0, 0, 0, 1.00); } ::-webkit-scrollbar {width: 5px; height: 5px; background-color: rgba(255, 255, 255, 0.50); border-radius: 5px;} ::-webkit-scrollbar-button {height: 0px;} ::-webkit-scrollbar-track-piece {background: rgba(0, 0, 0, 0.00);} ::-webkit-scrollbar-thumb {width: 8px; margin: 0 1px; border-radius: 5px; background-color: rgba(0, 10, 40, 0.20);} ::-webkit-scrollbar-thumb:hover {width: 5px; height: 5px; background-color: var(--hilight);} body, html {height: 100svh; background: white; position: relative; padding: 0; margin: 0; font-family: "Alan Sans", sans-serif; font-optical-sizing: auto; font-size: 12px; color: var(--accent); font-weight: 400; overflow-x: hidden;} html {scroll-behavior: smooth !important; -webkit-scroll-behavior: smooth !important;} * {box-sizing: border-box; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; position: relative; text-decoration: none;} div, section, ul, li {position: relative; float: left;} ul {padding: 0; margin: 0;} ul li {font-size: 1.3rem; line-height: 1.3rem; font-weight: 400;} p {font-size: 1.3rem; line-height: 1.3rem; font-weight: 400; padding: 0; margin: 0;} .bullet {display: flex; flex-direction: column; gap: 20px; list-style: none;} .bullet li {padding: 0 0 0 20px;} .bullet li:before {content: ''; width: 10px; aspect-ratio: 1 / 1; background-color: var(--hilight); border-radius: 20px; position: absolute; left: 0; top: 4px;} strong {font-weight: 800;} label {position: relative;} h1, h2, h3, h4, h5 {margin: 0;} h1 {font-size: 3.0rem; font-weight: 600;} h2 {font-size: 2.5rem; font-weight: 200;} h3 {font-size: 2.0rem; font-weight: 400;} h4 {font-size: 1.5rem; font-weight: 600;} video {max-width: 100%;} .txt-grad {background: -webkit-linear-gradient(180deg, rgba(250, 100, 0, 1.00) 0%, rgba(250, 200, 0, 1.00) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} section {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; overflow-x: hidden;} label.toggle {display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: initial; cursor: pointer;} label.toggle i {display: block; width: 2.2rem; height: 1.4rem; border-radius: 5rem; background-color: rgba(0, 0, 0, 0.10); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10); transition: all 0.5s;} label.toggle:hover i {background-color: rgba(0, 0, 0, 0.20);} label.toggle i::before {content: ''; height: calc(100% - 4px); aspect-ratio: 1 / 1; border-radius: 100%; background-color: var(--hilight); filter: grayscale(1); position: absolute; left: 2px; top: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.20); transition: all 0.5s;} label.toggle:hover i::before {filter: grayscale(0.5);} /* INPUTS */ .input-c {display: block; position: relative; width: 100%;} .input-c .icon {width: 2rem; height: 2rem; filter: grayscale(1); opacity: 0.50; position: absolute; top: 50%; right: 1rem; transform: translate(0, -50%); cursor: pointer; transition: all 0.3s;} .input-c .icon:hover {filter: grayscale(0.00); opacity: 1.00;} .input-c .icon img {width: 100%; height: 100%; object-fit: contain;} input, select, textarea {width: 100%; height: 50px; padding: 0 15px; border-radius: 50px; font-family: "Alan Sans", sans-serif; font-size: 1.4rem; line-height: 52px; font-weight: 600; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: all 0.5s;} textarea {line-height: initial;} input:hover, select:hover, textarea:hover {box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);} input:focus, select:focus, textarea:focus {color: var(--accent); box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.25);} select {padding: 0 40px 0 15px;} input[type="checkbox"], input[type="radio"] {display: none;} input:disabled, select:disabled {opacity: 0.5; cursor: not-allowed;} select option {background: white; padding: 10px; font-weight: 200; font-size: 1.4rem;} /* SELECTS */ .lbl {position: absolute; left: 0; top: -17px; font-size: 1rem; font-weight: 400; color: var(--accent); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); text-transform: uppercase; opacity: 0.75;} .lbl span {text-transform: none; opacity: 0.50;} /*.input-c, .input-c .ic {display: block; flex-grow: 1; position: relative;} .input-c.multi {display: flex; flex-direction: row; justify-content: space-between; column-gap: 1px;} .input-c label.icon, .input-c.multi .ic label.icon {position: absolute; top: 50%; right: 0; transform: translate(-15px, -50%); z-index: -1; transition: all 0.5s;} .input-c input:focus + label.icon, .input-c input:active + label.icon, .input-c.multi .ic input:focus + label.icon, .input-c.multi .ic input:active + label.icon {z-index: 1; opacity: 1.00;}*/ input ~ .s-arrow, select ~ .s-arrow {display: block; width: 36px; height: 36px; position: absolute; top: 6px; right: 7px; box-shadow: inset 0 0 0 0 rgba(250, 170, 0, 0.00); cursor: pointer; transition: all 0.5s; z-index: -1;} input ~ .s-arrow:after, select ~ .s-arrow:after {content: ''; width: 8px; height: 8px; border-right: 2px solid; border-bottom: 2px solid; border-color: var(--hilight); position: absolute; left: 50%; top: calc(50% - 2px); transform: translate(-50%, -50%) rotate(45deg); transition: all 0.5s;} input:hover ~ .s-arrow:after, select:hover ~ .s-arrow:after {border-color: var(--hilight);} input:focus ~ .s-arrow:after, select:focus ~ .s-arrow:after, input:active ~ .s-arrow:after, select:active ~ .s-arrow:after {background-color: var(--hilight); border-color: var(--hilight); border-radius: 10px; top: calc(50% + 1px); transform: translate(-50%, -50%) rotate(45deg) scale(0.8); z-index: 2;} input::-webkit-calendar-picker-indicator {display: none !important;} /* TEXTAREAS */ textarea {width: 100%; max-width: 100%; min-width: 100%; height: 140px; max-height: 140px; min-height: 140px; padding: 20px} /* INPUT NUMBERS */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;} /* INPUT RANGE */ input[type="range"] {width: 100%; height: 10px; background: rgba(255, 255, 255, 0.20); padding: 0; -webkit-appearance: none; overflow: hidden; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 0 0 rgba(255, 255, 255, 0.05), inset 0 10px 0 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 0 rgba(255, 255, 255, 0.10); transition: all 0.5s;} input[type="range"]:hover {background: rgba(255, 255, 255, 0.30); box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 0 rgba(255, 255, 255, 0.00), inset 0 0 0 0 rgba(255, 255, 255, 0.00), inset 0 -1px 0 0 rgba(255, 255, 255, 0.50);} input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; width: 10px; height: 20px; background: -webkit-linear-gradient(45deg, rgba(180, 120, 0, 1.00) 0%, rgba(240, 220, 120, 1.00) 40%, rgba(190, 150, 60, 1.00) 100%); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.20), 0 0 0 0 var(--hilight-dark), inset 0 0 0 1px rgba(255, 255, 255, 0.20), inset 0 10px 0 0 rgba(255, 255, 255, 0.30), -410px 0 0 400px var(--hilight); transition: all 0.5s;} input[type="range"]:hover::-webkit-slider-thumb {width: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.20), 0 0 30px 10px var(--hilight-dark), inset 0 0 0 1px rgba(255, 255, 255, 0.30), inset 0 10px 0 0 rgba(255, 255, 255, 0.50), -410px 0 0 400px var(--hilight);} button {cursor: pointer} /* LINKS -------------------------------------------------------------------------------------------------------- */ .g-link {color: var(--hilight); position: relative; cursor: pointer; transition: all 0.5s; z-index: 1;} .g-link:before {content: ''; width: 100%; height: 100%; background: var(--hilight); opacity: 0.0; border-radius: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 2px var(--hilight); transition: all 0.2s; z-index: -1;} .g-link:hover:before {opacity: 0.10; padding: 7px 15px;} /* BUTTONS ------------------------------------------------------------------------------------------------------ */ .g-btn {display: flex; align-items: center; justify-content: center; max-width: fit-content; gap: 0.5rem; background: rgba(255, 255, 255, 0.50); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 100px; padding: 18px 30px; position: relative; font-size: 1.8rem; font-weight: 500; color: var(--accent); text-align: center; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.025), 0 2px 2px 0 rgba(0, 0, 0, 0.025), 0 4px 5px 0 rgba(0, 0, 0, 0.025), 0 8px 8px 0 rgba(0, 0, 0, 0.025), 0 16px 16px 0 rgba(0, 0, 0, 0.025), 0 32px 32px 0 rgba(0, 0, 0, 0.025), 0 64px 64px 0 rgba(0, 0, 0, 0.025); overflow: hidden; cursor: pointer; transition: all 0.5s;} .g-btn:hover {background: rgba(0, 0, 0, 0.00); color: var(--hilight); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075), 0 2px 2px 0 rgba(0, 0, 0, 0.075), 0 4px 5px 0 rgba(0, 0, 0, 0.075), 0 8px 8px 0 rgba(0, 0, 0, 0.075), 0 16px 16px 0 rgba(0, 0, 0, 0.075), 0 32px 32px 0 rgba(0, 0, 0, 0.075), 0 64px 64px 0 rgba(0, 0, 0, 0.075);} .g-btn:active {box-shadow: inset 0 1px 0 0 rgba(250, 200, 0, 0.25), inset 0 -1px 0 0 rgba(0, 0, 0, 0.50), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 10px 20px 0 rgba(250, 200, 0, 0.25); transition: all 0.1s;} .g-btn:after, .g-btn:after {content: ''; width: 100%; height: 100%; background: var(--white); opacity: 0.25; position: absolute; left: 50%; top: 50%; transform: translate(100%, -50%) skew(-35deg); transition: all 0.5s;} .g-btn:hover:after { transform: translate(-100%, -50%) skew(-35deg); opacity: 0.25;} .g-btn.hl {background: transparent; position: relative; white-space: nowrap; color: var(--white); box-shadow: 0 1px 1px 0 rgba(20, 120, 220, 0.15), 0 2px 2px 0 rgba(20, 120, 220, 0.15), 0 4px 5px 0 rgba(20, 120, 220, 0.15), 0 8px 8px 0 rgba(20, 120, 220, 0.15), 0 16px 16px 0 rgba(20, 120, 220, 0.15), 0 32px 32px 0 rgba(20, 120, 220, 0.15), 0 64px 64px 0 rgba(20, 120, 220, 0.15);} .g-btn.hl:before {content: ''; width: calc(100% + 2px); height: calc(100% + 2px); background-color: var(--hilight); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;} .g-btn.hl:hover {box-shadow: 0 1px 1px 0 rgba(20, 120, 220, 0.50), 0 2px 2px 0 rgba(20, 120, 220, 0.50), 0 4px 5px 0 rgba(20, 120, 220, 0.50), 0 8px 8px 0 rgba(20, 120, 220, 0.50), 0 16px 16px 0 rgba(20, 120, 220, 0.50), 0 32px 32px 0 rgba(20, 120, 220, 0.50), 0 64px 64px 0 rgba(20, 120, 220, 0.05);} .g-btn.hl.white {color: var(--hilight); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.15), 0 2px 2px 0 rgba(255, 255, 255, 0.15), 0 4px 5px 0 rgba(255, 255, 255, 0.15), 0 8px 8px 0 rgba(255, 255, 255, 0.15), 0 16px 16px 0 rgba(255, 255, 255, 0.15), 0 32px 32px 0 rgba(255, 255, 255, 0.15), 0 64px 64px 0 rgba(255, 255, 255, 0.15);} .g-btn.hl.white:before {content: ''; width: 100%; height: 100%; background-color: var(--white); opacity: 1.00; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; z-index: -1;} .g-btn.hl.white:hover {box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 2px 2px 0 rgba(255, 255, 255, 0.25), 0 4px 5px 0 rgba(255, 255, 255, 0.25), 0 8px 8px 0 rgba(255, 255, 255, 0.25), 0 16px 16px 0 rgba(255, 255, 255, 0.25), 0 32px 32px 0 rgba(255, 255, 255, 0.25), 0 64px 64px 0 rgba(255, 255, 255, 0.25);} .g-btn.hl.white:hover:before {opacity: 0.80;} .g-btn .icon {} .g-btn.hl .icon {filter: brightness(0) invert(1);} .g-btn.medium {padding: 12px 24px; font-size: 1.4rem;} .g-btn.small {padding: 8px 18px; font-size: 1rem;} /* MODAL */ .modal-wm {width: 100vw; height: 100vh; background-color: rgba(30, 30, 30, 0.60); backdrop-filter: blur(10px); position: fixed; left: 50%; top: -110vh; transform: translateX(-50%) translateY(-50%); z-index: 20; transition: top 0.5s 0.5s;} .modal-c {width: calc(100% - 20px); max-width: 800px; max-height: calc(100% - 20px); background-color: rgba(30, 30, 30, 0.80); padding: 90px 30px 100px 30px; position: fixed; left: 50%; top: -150%; transform: translateX(-50%) translateY(-50%); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00); z-index: 21; transition: all 0.5s 0.0s;} .modal-c.small {max-width: 520px;} .modal-c .title-c {width: calc(100% - 60px); padding: 0 0 20px 0; margin: 0 30px; text-transform: uppercase; letter-spacing: 5px; font-size: 1.2rem; line-height: 0.95rem; font-weight: 100; position: absolute; left: 0px; top: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.10);} .modal-c .title-c .input-c {width: auto; position: absolute; right: 0px; top: -20px;} .modal-c .title-c .input-c label {padding-right: 70px;} .modal-c .sub-title-c {width: 100%; margin: 20px 0; font-size: 0.8rem; letter-spacing: 0px; line-height: 0.85rem; font-weight: 500; text-transform: uppercase;} .modal-c .sub-title-c .item {padding: 0 10px 0 0; white-space: nowrap;} .modal-c .sub-title-c .item span {letter-spacing: 3px; opacity: 0.5; font-weight: 300;} .modal-c .alert-c {padding: 20px 20px 20px 60px; text-align: center;} .modal-c .alert-c .icon {left: 10px;} .modal-c p:not(.alert-c) {padding: 0; margin: 0 0 20px 0;} .modal-c .ctrls-c {width: 100%; width: 100%; position: absolute; left: 0px; bottom: 30px; text-align: center;} .modal-c .ctrls-c .g-btn {margin: 0 5px; opacity: 0.50;} .modal-c .ctrls-c .g-btn:hover {opacity: 1.00;} .modal-c .ic {width: calc(100% + 15px); height: 100%; max-height: calc(100vh - 200px); padding: 0 15px 0 0; overflow-x: hidden; overflow-y: auto;} .modal-c .ic .title-c {width: 100%; padding: 0; margin: 0 0 20px 0; letter-spacing: 2px; font-size: 1rem; line-height: 0.90rem; text-transform: uppercase; position: relative; left: initial; top: initial; border-bottom: none;} .modal-c .ic .title-c span {font-size: 0.8rem; line-height: 0.75rem; opacity: 0.50;} #LOGIN[type=checkbox]:checked ~ .modal-wm {top: 50%; transform: translateX(-50%) translateY(-50%); transition: top 0.5s 0.0s;} #LOGIN[type=checkbox]:checked ~ .modal-c {top: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.40); transition: all 0.5s 0.3s;} /* MAIN CONTAINER */ .mc {width: calc(100vw - 40px); max-width: 1200px;} /* HIDDE INPUT */ .hi {display: none;} .anchor {transform: translate(0, -100px);} /* MAIN NAVIGATION */ #MainNav {display: flex; align-items: center; justify-content: center; width: 100%; height: 160px; position: fixed; top: 0px; left: 0px; animation: navScroll both; animation-timeline: view(); animation-range: exit 10% exit 100%; z-index: 1000;} @keyframes navScroll { from {height: 160px; background: transparent; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);} to {height: 80px; background-color: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} } #MainNav.scrolled {height: 100px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} #MainNav .mc {display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100px; anchor-name: --hovered-link; transition: all 0.5s} #MainNav.scrolled .mc {box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.10);} #MainNav .mc .logo-c {height: 32px; display: flex; flex-direction: row; column-gap: 5px; justify-content: flex-start; align-items: center; font-size: 1.8rem;} #MainNav .mc .logo-c img {height: 100%; backdrop-filter: screen; margin: 0 5px 0 0;} #MainNav .mc .logo-c span {color: var(--accent); font-weight: 700;} #MainNav .mc .links-c {flex-direction: row; justify-content: space-between; align-items: center; list-style: none;} #MainNav .mc .links-c * {position: relative;} #MainNav .mc .links-c .mob {display: none;} #MainNav .mc .links-c a {display: flex; flex-direction: row; column-gap: 5px; align-items: center; padding: 10px 15px; font-size: 1.4rem; white-space: nowrap; font-weight: 400; transition: all 0.5s;} #MainNav .mc .links-c a:hover {color: var(--hilight);} #MainNav .mc .links-c li.active > a span {color: var(--hilight);} #MainNav .mc .links-c li.active > a .icon {filter: grayscale(0%) brightness(1); opacity: 1.0} #MainNav .mc .links-c a.drop {padding: 15px 35px 15px 20px;} #MainNav .mc .links-c a.drop:after {content: ''; width: 6px; height: 6px; border-left: 2px solid; border-bottom: 2px solid; border-color: var(--white); position: absolute; top: calc(50% - 2px); right: 17px; transform: translate(0, -50%) rotate(-45deg); z-index: 10; transition: all 0.5s;} #MainNav .mc .links-c a.drop:hover:after {border-color: var(--hilight);} #MainNav .mc .links-c a span {color: var(--accent); transition: all 0.5s;} #MainNav .mc .links-c a:hover span {color: var(--hilight);} #MainNav .mc .links-c label {display: none;} #MainNav .mc .links-c a.drop + .drop-c {max-height: 0; background-color: black; padding: 0; border-radius: 10px; position: absolute; right: 0; transform: translate(0, -15px); opacity: 0.00; overflow: hidden; transition: all 0.5s;} #MainNav .mc .links-c a.drop + .drop-c a {width: 100%; color: var(--white); font-weight: 400; letter-spacing: 0.5px;} #MainNav .mc .links-c a.drop + .drop-c a:hover {color: var(--hilight);} #MainNav .mc .links-c a.drop + .drop-c a .icon {transform: translate(0, -1px);} #MainNav .mc .links-c a.drop:hover + .drop-c, #MainNav .mc .links-c a.drop + .drop-c:hover {padding: 10px 0; max-height: 400px; transform: translate(0, 0); opacity: 1.00;} #MainNav .mc .links-c a.hl {padding: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--white), 0 0 0 0 rgba(250, 200, 0, 0.00); font-weight: 600; text-align: left;} #MainNav .mc .links-c a.hl:hover {border-radius: 10px; box-shadow: inset 0 0 0 0 var(--white), 0 0 20px 0 rgba(250, 200, 0, 0.50);} #MainNav .mc .links-c a.hl:before {content: ''; width: 100%; height: 100%; background: -webkit-linear-gradient(180deg, rgba(250, 100, 0, 1.00) 0%, rgba(250, 200, 0, 1.00) 100%); opacity: 0.00; border-radius: 10px; position: absolute; left: 0; top: 0; transition: all 0.5s;} #MainNav .mc .links-c a.hl:hover:before {opacity: 1.00;} #MainNav .mc .links-c a.hl span {display: block; width: 100%; height: 100%; padding: 15px 20px; border-radius: 10px; position: relative; overflow: hidden; z-index: 1;} #MainNav .mc .links-c a.hl span:after, #MainNav .mc .links-c a.hl span:before {content: ''; width: 100%; height: 100%; background-color: var(--white); opacity: 0.00; position: absolute; left: 0; top: 50%; transform: translate(-25%, -50%) skew(-15deg); z-index: 1; transition: all 0.5s;} #MainNav .mc .links-c a.hl span:before {width: calc(100% - 4px); height: calc(100% - 4px); background: black; border-radius: 8px; left: 50%; transform: translate(-50%, -50%); z-index: -1;} #MainNav .mc .links-c a.hl:hover span:before {opacity: 1.00;} #MainNav .mc .links-c a.hl:hover span:after {opacity: 0.10; transform: translate(-50%, -50%) skew(-35deg);} #MainNav .mc .links-c a.hl.drop span {padding-right: 35px} #MainNav .mc .main-btn {display: none; position: absolute; right: 0; transform: translate(0, -500px); transition: opacity 1s 1s;} #MainNav.no-nav {height: 100px; animation: none;} #MainNav.no-nav .mc {max-width: 520px;} /* BACKDROP LAYER ----------------------------------------------------------------------------------------------- */ .backdrop-layer {width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none;} .backdrop-layer:before, .backdrop-layer:after {content: ''; width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: fixed; filter: blur(200px); opacity: 0.25; pointer-events: none;} .backdrop-layer:before {background-color: var(--hilight); left: 100%; top: 0; transform: translate(-75%, -75%); animation: HilightAnime linear forwards; animation-timeline: scroll();} .backdrop-layer:after {display: none; background-color: var(--hilight-dark); left: 0; top: 100%; transform: translate(-25%, -25%); animation: HilightDarkAnime linear forwards; animation-timeline: scroll();} .backdrop-layer[mouse="true"]:before { animation: none; left: 50%; top: 0; right: initial; transform: translate(calc(-50% + var(--mouse-offset-x, 0px)), calc(-75% + var(--mouse-offset-y, 0px))); transition: transform 0.12s linear; } @keyframes HilightAnime { 0% {left: 100%; top: 0; transform: translate(-50%, -50%); filter: blur(200px); opacity: 0.25;} 25% {left: 0; top: 0; transform: translate(-25%, -50%); filter: blur(400px); opacity: 0.20;} 50% {left: 0; top: 100%; transform: translate(-25%, -25%); filter: blur(200px); opacity: 0.45;;} 75% {left: 100%; top: 100%; transform: translate(-50%, -25%); filter: blur(400px); opacity: 0.00;} 100% {left: 100%; top: 0; transform: translate(-50%, -50%); filter: blur(200px); opacity: 0.00;} } @keyframes HilightDarkAnime { 0% {left: 0; top: 100%; transform: translate(-25%, -25%); filter: blur(200px); opacity: 0.25;} 25% {left: 100%; top: 100%; transform: translate(-75%, -25%); filter: blur(400px); opacity: 0.20;} 50% {left: 100%; top: 0; transform: translate(-75%, -75%); filter: blur(200px); opacity: 0.45;;} 75% {left: 0; top: 0; transform: translate(-25%, -75%); filter: blur(400px); opacity: 0.30;} 100% {left: 0; top: 100%; transform: translate(-25%, -25%); filter: blur(200px); opacity: 0.35;} } /* TOOL TIPS ---------------------------------------------------------------------------------------------------- */ .tooltip {display: flex; min-width: none; max-width: 0; max-height: 0; padding: 0; background: var(--black); border-radius: 5px; position: absolute; left: 50%; top: 0; opacity: 0.00; transform: translate(-50%, 0); color: var(--white); text-align: center; font-weight: 200; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), 0 5px 20px 0 rgba(0, 0, 0, 0.20); overflow: hidden; transition: transform 0.5s, opacity 0.5s;} .tooltip.left {text-align: left; left: 0; right: initial; transform: translate(0, 0);} .tooltip.right {text-align: right; left: initial; right: 0; transform: translate(0, 0);} .tooltip.small {white-space: nowrap;} a:hover > .tooltip, span:hover > .tooltip, label:hover > .tooltip, div:hover > .tooltip, button:hover > .tooltip {width: fit-content; max-width: 300px; max-height: 300px; padding: 10px 15px; opacity: 1.00; transform: translate(-50%, calc(-100% - 5px));} a:hover > .tooltip.left, span:hover > .tooltip.left, label:hover > .tooltip.left, div:hover > .tooltip.left, button:hover > .tooltip.left, a:hover > .tooltip.right, span:hover > .tooltip.right, label:hover > .tooltip.right, div:hover > .tooltip.right, button:hover > .tooltip.right {transform: translate(0, calc(-100% - 5px));} .info {width: 12px; height: 12px; border-radius: 100%; box-shadow: 0 0 0 1px var(--hilight); color: var(--hilight); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600;} /* HOME SECTION ------------------------------------------------------------------------------------------------- */ #home {padding: 180px 0 100px 0; overflow: hidden;} #home .mc {display: flex; align-items: center; animation: homeScroll both; animation-timeline: scroll(root block); mix-blend-mode: multiply; -webkit-mix-blend-mode: multiply;} @keyframes homeScroll { 0% {opacity: 1; transform: translate(0, 0) scale(1.0);} 50% {opacity: 0.5; transform: translate(0, 100%) scale(0.75);} 100% {opacity: 0.0; transform: translate(0, 150%) scale(0.5);} } #home .mc .lc {width: 40%; z-index: 2;} #home .mc .lc h1 {opacity: 0.00; margin: 0 0 20px 0; font-size: 5.4rem; line-height: 5.4rem; font-weight: 400; color: var(--hilight); animation: leftIntro 1s 0.5s forwards ease-out;} #home .mc .lc h2 {opacity: 0.00; font-size: 2.6rem; font-weight: 300; animation: leftIntro 1s 1.0s forwards ease-out;} #home .mc .lc .cta-c {display: flex; gap: 20px; opacity: 0.00; margin: 40px 0 0 0; animation: leftIntro 1s 2.0s forwards ease-out; white-space: nowrap;} @keyframes leftIntro { from {opacity: 0.00; transform: translate(-100px, 0);} to {opacity: 1.00; transform: translate(0, 0);} } #home .mc .rc {display: flex; justify-content: center; align-items: center; width: 60%; z-index: 1;} /* HOW IT WORKS ------------------------------------------------------------------------------------------------- */ #how-it-works {width: 100vw; display: flex; padding: 100px 0; z-index: 10; overflow: hidden; animation: howScroll both; animation-timeline: scroll(root block);} @keyframes howScroll { from {background-color: transparent; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00);} to {background-color: var(--white); box-shadow: 0 -50px 50px 0 rgba(0, 0, 0, 0.10);} } #how-it-works:before {content: ''; width: 100%; height: 100%; background-color: var(--hilight); opacity: 0.10; position: absolute; left: 0; top: 0; animation: howBeforeScroll both; animation-timeline: scroll(root block);} @keyframes howBeforeScroll { 0% {opacity: 0.10;} 50% {background-color: var(--white); opacity: 1.00; } 100% {background-color: var(--white); opacity: 1.00;} } #how-it-works h3 {font-size: 4rem; margin: 0 0 40px 0;} #how-it-works .ic {display: flex; gap: 40px;} #how-it-works .ic .item {display: flex; gap: 20px; flex: 1 1 0; opacity: 0.00; transition: all 0s 2s ease-out;} #how-it-works .ic .item:nth-child(1) {transform: translate(-50%, 0) scale(1.5);} #how-it-works .ic .item:nth-child(2) {transform: translate(0, 0) scale(1.5);} #how-it-works .ic .item:nth-child(3) {transform: translate(50%, 0) scale(1.5);} #how-it-works .ic .item.show {opacity: 1.00; filter: blur(0); transform: translate(0, 0) scale(1.0); transition: all 0.5s 0s;} #how-it-works .ic .item .content {display: flex; flex-direction: column;} #how-it-works .ic .item .content .number {margin: 0 0 20px 0; font-weight: 600; font-size: 3rem; color: var(--hilight);} #how-it-works .ic .item .content .number:before {content: ''; width: 120px; height: 4px; background-color: var(--hilight); position: absolute; left: 0; bottom: -12px} #how-it-works .ic .item .content h4 {margin: 0 0 10px 0; font-size: 2rem; line-height: 1.8rem;} /* WHY COINPAY ------------------------------------------------------------------------------------------------- */ #why-coinpay {width: 100vw; display: flex; padding: 100px 0; overflow: hidden;} #why-coinpay:before {content: ''; width: 100%; height: 100%; background-color: var(--white); opacity: 0.50; position: absolute; left: 0; top: 0;} #why-coinpay h3 {font-size: 4rem; margin: 0 0 40px 0;} #why-coinpay .ic {display: flex; gap: 40px; flex-wrap: wrap;} #why-coinpay .ic .item {display: flex; align-items: center; gap: 20px; width: calc(33.333333% - 27px); min-height: 170px; opacity: 0.00; filter: blur(5px); padding: 40px 30px 40px 160px; border-radius: 20px; text-align: left; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.025), 0 2px 2px 0 rgba(0, 0, 0, 0.025), 0 4px 5px 0 rgba(0, 0, 0, 0.025), 0 8px 8px 0 rgba(0, 0, 0, 0.025), 0 16px 16px 0 rgba(0, 0, 0, 0.025), 0 32px 32px 0 rgba(0, 0, 0, 0.025), 0 64px 64px 0 rgba(0, 0, 0, 0.025); overflow: hidden; transition: all 0s 2s ease-out;} #why-coinpay .ic .item:nth-child(1) {transform: translate(-50%, -50%) scale(1.5);} #why-coinpay .ic .item:nth-child(2) {transform: translate(0, -50%) scale(1.5);} #why-coinpay .ic .item:nth-child(3) {transform: translate(50%, -50%) scale(1.5);} #why-coinpay .ic .item:nth-child(4) {transform: translate(-50%, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(5) {transform: translate(0, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(6) {transform: translate(50%, 50%) scale(1.5);} #why-coinpay .ic .item.show {opacity: 1.00; filter: blur(0); transform: translate(0, 0) scale(1.0); transition: all 0.5s 0s;} #why-coinpay .ic .item .img-c {width: 128px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%);} #why-coinpay .ic .item .img-c img {width: 80%; height: 80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; transition: all 0.5s;} #why-coinpay .ic .item .img-c img:last-child {filter: blur(10px); z-index: 1;} #why-coinpay .ic .item:hover .img-c img {filter: grayscale(1) brightness(1.1) contrast(1.5);} #why-coinpay .ic .item:hover .img-c img:last-child {filter: brightness(0) invert(1) blur(20px);} #why-coinpay .ic .item .img-c:before {content: ''; width: 0%; aspect-ratio: 1 / 1; border-radius: 100%; border: 1px solid var(--hilight); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #why-coinpay .ic .item:hover .img-c:before {animation: ringAnime 0.75s linear;} @keyframes ringAnime { 0% {width: 0%; opacity: 0.00; border: 1px solid var(--hilight);} 50% {width: 150%; opacity: 1.00; border: 1px solid var(--white);} 100% {width: 300%; opacity: 0.00; border: 1px solid var(--white);} } #why-coinpay .ic .item .img-c i {display: block; width: 100%; aspect-ratio: 1 / 1; opacity: 0.50; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; transition: all 0.5s;} #why-coinpay .ic .item:hover .img-c i {opacity: 1.00;} #why-coinpay .ic .item .img-c i:before, #why-coinpay .ic .item .img-c i:after {content: ''; width: 180%; aspect-ratio: 1 / 1; border-radius: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #why-coinpay .ic .item .img-c i:before {background: linear-gradient(0deg,rgba(20, 120, 220, 0.20) 0%, rgba(20, 120, 220, 0.00) 100%); box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.75);} #why-coinpay .ic .item:hover .img-c i:before {animation: beforeAnime 0.75s ease-out} @keyframes beforeAnime { 0% {width: 180%} 75% {width: 200%} 100% {width: 180%} } #why-coinpay .ic .item .img-c i:after {width: 140%; background: linear-gradient(0deg,rgba(20, 120, 220, 0.00) 0%, rgba(20, 120, 220, 0.20) 100%); box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.75);} #why-coinpay .ic .item:hover .img-c i:after {animation: afterAnime 0.75s ease-out} @keyframes afterAnime { 0% {width: 140%} 75% {width: 130%} 100% {width: 140%} } #why-coinpay .ic .item .content {display: flex; flex-direction: column;} #why-coinpay .ic .item .content h4 {margin: 0 0 10px 0; font-size: 2rem; line-height: 1.8rem;} #why-coinpay .ic .item .content h4, #why-coinpay .ic .item .content p {transition: all 0.5s;} #why-coinpay .ic .item:hover .content h4, #why-coinpay .ic .item:hover .content p {color: var(--white);} #why-coinpay .ic .item > i {display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; left: 0; bottom: 0; overflow: hidden;} #why-coinpay .ic .item > i:before {content: ''; width: 150%; aspect-ratio: 1 / 1; background-color: var(--hilight); opacity: 0.00; border-radius: 100%; filter: blur(50px); position: absolute; left: 0; top: 50%; transform: translate(-100%, -50%); transition: all 0.75s; z-index: -1;} #why-coinpay .ic .item:hover > i:before {opacity: 0.50; transform: translate(-15%, -50%);} /* TWO WAYS ------------------------------------------------------------------------------------------------- */ #two-ways {width: 100vw; background-color: var(--white); display: flex; padding: 0 0 100px 0;} #two-ways h3 {font-size: 4rem; margin: 0 0 40px 0;} #two-ways .ic {display: flex; gap: 40px; float: initial;} #two-ways .ic .item {display: flex; gap: 20px; flex: 1 1 0; min-width: 0; padding: 50px; border-radius: 20px;} #two-ways .ic .item .img-c {width: 128px; max-width: 128px; z-index: 1;} #two-ways .ic .item .img-c:before {content: ''; width: 100%; height: 10px; border-radius: 100%; background-color: var(--hilight-dark); filter: blur(7px); opacity: 0.00; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, calc(50% + 50px)); transition: all 0.5s 0.5s;} #two-ways .ic .item.show .img-c:before {opacity: 0.50; transform: translate(-50%, -50%); transition: all 0.5s 0.5s;} #two-ways .ic .item .img-c img {position: absolute; opacity: 0.00; transition: all 0.5s;} /* IMAGE ITEM 1 */ #two-ways .ic .item:nth-child(1) .img-c img:nth-child(1) {width: 100%; left: 50%; top: 60%; transform: translate(-50%, calc(-150% - 18px)); z-index: 2; transition: all 0.5s 0.5s;} #two-ways .ic .item:nth-child(1) .img-c img:nth-child(2) {width: 70%; left: 55%; top: 36%; transform: translate(-50%, calc(-100% - 18px)); z-index: 1; transition: all 0.5s 1s;} #two-ways .ic .item:nth-child(1) .img-c i {width: calc(100% + 40px); aspect-ratio: 1 / 1; opacity: 0.00; border-radius: 100%; border: dashed 4px var(--hilight); position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 12%)); animation: dashAnime 10s linear infinite; animation-play-state: running; z-index: -1; transition: all 0.5s 0.0s;} @keyframes dashAnime { from {transform: translate(-50%, calc(-50% - 12%)) rotate(0deg);} to {transform: translate(-50%, calc(-50% - 12%)) rotate(360deg);} } #two-ways .ic .item:nth-child(1).show .img-c i {opacity: 0.15; transition: all 0.5s 1.5s;} #two-ways .ic .item:nth-child(1).show .img-c img:nth-child(1) {transform: translate(-50%, calc(-50% - 18px));} #two-ways .ic .item:nth-child(1).show .img-c img:nth-child(2) {transform: translate(-50%, calc(-50% - 18px));} /* IMAGE ITEM 2 */ #two-ways .ic .item:nth-child(2) .img-c img:nth-child(1) {width: 100%; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 18px)) scale(0.8); z-index: 1; transition: all 0.5s 0.5s;} #two-ways .ic .item:nth-child(2) .img-c img:nth-child(2) {width: 60%; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 18px)) scale(1.5) rotate(-360deg); z-index: 2; transition: all 0.5s 1s;} #two-ways .ic .item:nth-child(2).show .img-c img:nth-child(1) {transform: translate(-50%, calc(-50% - 18px)) scale(1.0); } #two-ways .ic .item:nth-child(2).show .img-c img:nth-child(2) {transform: translate(-50%, calc(-50% - 18px)) scale(1.0) rotate(0deg);} #two-ways .ic .item:nth-child(2) .img-c img:nth-child(3) {width: 50%; aspect-ratio: 1 / 1; left: -25%; top: 50%; z-index: -2; animation: rotateCog 5s linear infinite; transition: all 0.5s 0.0s;} #two-ways .ic .item:nth-child(2) .img-c img:nth-child(4) {width: 40%; aspect-ratio: 1 / 1; right: -20%; top: -10%; z-index: -2; animation: rotateCog 5s linear infinite reverse; transition: all 0.5s 0.0s;} @keyframes rotateCog { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #two-ways .ic .item.show .img-c img {opacity: 1.00; transition: all 0.5s 0s;} #two-ways .ic .item:nth-child(2).show .img-c img:nth-child(3) {opacity: 0.15; transition: all 0.5s 1.5s;} #two-ways .ic .item:nth-child(2).show .img-c img:nth-child(4) {opacity: 0.15; transition: all 0.5s 1.5s;} #two-ways .ic .item .content {display: flex; flex-direction: column; min-width: 0; z-index: 1;} #two-ways .ic .item .content h4 {margin: 0 0 40px 0; font-size: 2rem; line-height: 1.8rem;} #two-ways .ic .item .content h4:before {content: ''; width: 120px; height: 4px; background-color: var(--white); opacity: 0.50; position: absolute; left: 0; bottom: -22px;} #two-ways .ic .item .content ul li span {white-space: nowrap;} #two-ways .ic .item:nth-child(1) {opacity: 0.00; transform: translate(-50%, 0);} #two-ways .ic .item:nth-child(2) {opacity: 0.00; transform: translate(50%, 0);} #two-ways .ic .item.show {opacity: 1.00; transform: translate(0, 0); transition: all 0.5s 0s;} #two-ways .ic .item > i {width: 100%; height: 100%; position: absolute; border-radius: inherit; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; z-index: -2; pointer-events: none; transition: all 0.5s;} #two-ways .ic .item > i:last-of-type {z-index: -1; filter: blur(10px);} #two-ways .ic .item:nth-child(odd) > i {transform: translate(-50%, -50%) rotateY(180deg) rotateX(180deg);} #two-ways .ic .item > i:before {content: ''; width: 120%; aspect-ratio: 1 / 1; background: linear-gradient(90deg, var(--white) 0%, var(--hilight-light) 40%, var(--hilight) 70%, var(--hilight-dark) 100%); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: gradRotate 10s infinite linear; animation-play-state: running; z-index: -1;} #two-ways .ic .item > i:after {content: ''; width: calc(100% - 4px); height: calc(100% - 4px); background-color: rgba(255, 255, 255, 1.00); border-radius: 18px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; z-index: 1;} @keyframes gradRotate { 0% {transform: translate(-50%, -50%) rotate(0deg);} 50% {transform: translate(-50%, -50%) rotate(180deg);} 100% {transform: translate(-50%, -50%) rotate(360deg);} } #two-ways .ic .item:hover > i:last-of-type {filter: blur(0px);} #two-ways .ic .item:hover > i:last-of-type:before {opacity: 1.00;} #two-ways .ic .item:hover > i:first-of-type {filter: blur(40px); opacity: 0.50;} #two-ways .ic .item:hover > i:first-of-type:after {opacity: 0.00;} /* CALL TO ACTION ------------------------------------------------------------------------------------------------- */ #call-to-action {width: 100vw; padding: 50px 0; background-color: transparent; text-align: center;} #call-to-action:before {content: ""; width: 100%; height: 100%; background-color: var(--hilight); position: absolute; left: 0px; top: 0px;} #call-to-action .mc {display: flex; flex-direction: column; align-items: center; gap: 40px; z-index: 3} #call-to-action h4 {font-size: 2.2rem; font-weight: 300; text-align: center; color: var(--white);} #call-to-action h4 strong {opacity: 0.00; transform: translate(0, -200%); transition: all 0.25s 0.0s;} #call-to-action h4 strong.show:nth-child(1) {transition: all 0.5s 0.5s;} #call-to-action h4 strong.show:nth-child(2) {transition: all 0.5s 1.0s;} #call-to-action h4 strong.show:nth-child(3) {transition: all 0.5s 1.5s;} #call-to-action .item {opacity: 0.00; transform: translate(0, 100%);} #call-to-action .item.show {opacity: 1.00; transform: translate(0, 0);} #call-to-action .pattern {width: 100%; height: 100%; background: url('../img/pattern.svg'); background-size: 128px; opacity: 0.20; position: absolute; left: 0px; top: 0px; animation: patterngAnime both; animation-timeline: scroll(root block);} @keyframes patterngAnime { from {background-position: 0 0;} to {background-position: 0 10000%;} } /* DEPOSIT SECTION ------------------------------------------------------------------------------------------------- */ #deposit {width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 100px 0; overflow: hidden;} #deposit .mc {display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 520px; z-index: 1;} #deposit.address .mc {display: flex; flex-direction: column; align-items: center; gap: 20px; width: fit-content;} #deposit .mc > .amount {display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; width: 100%; border-radius: 20px; padding: 20px; background-color: rgba(255, 255, 255, 0.05); font-weight: 600; color: var(--black); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(255, 255, 255, 0.50);} #deposit .mc > .amount .value {font-size: 4rem; font-weight: 600;} #deposit .mc > .amount .currency {font-size: 2rem; font-weight: 200;} #deposit .mc > .amount small {width: 100%; opacity: 0.75; font-size: 1.1rem; font-weight: 100; color: var(--black); text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.50);} #deposit .mc > .amount .glow {width: 100%; height: 100%; opacity: 0.50; filter: brightness(0) invert(1); position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); z-index: 1; pointer-events: none;} #deposit .mc > .ic {display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 20px; border-radius: 20px; background-color: var(--white); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.025), 0 2px 2px 0 rgba(0, 0, 0, 0.025), 0 4px 4px 0 rgba(0, 0, 0, 0.025), 0 8px 8px 0 rgba(0, 0, 0, 0.025), 0 16px 16px 0 rgba(0, 0, 0, 0.025); z-index: 1;} #deposit .mc > .ic .glow {width: 100%; aspect-ratio: 10 / 1; opacity: 0.25; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%);} #deposit .mc > .ic h4 {display: flex; justify-content: space-between;} #deposit.address .mc > .ic .assets-list {display: flex; flex-direction: column; gap: 1px; pointer-events: none;} #deposit .mc > .ic .assets-list {padding-bottom: 0.5rem; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);} #deposit .mc > .ic .assets-list label {cursor: pointer;} #deposit .mc > .ic .assets-list label .ic {display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border-radius: 50px; padding: 0.25rem 0.75rem 0.25rem 0.25rem; transition: all 0.3s; cursor: pointer;} #deposit .mc > .ic .assets-list label .ic::before {content: ''; width: 100%; height: 100%; background-color: var(--hilight); opacity: 0.00; position: absolute; left: 0; top: 0; border-radius: inherit; transition: all 0.3s;} #deposit .mc > .ic .assets-list label .ic:hover::before {opacity: 0.10;} #deposit .mc > .ic .assets-list label .ic .asset {display: flex; justify-content: space-between; align-items: center; gap: 5px; position: relative; z-index: 1;} #deposit .mc > .ic .assets-list label .ic .asset .asset-icon {width: 4rem; height: 4rem; background-size: cover; border-radius: 100%;} #deposit .mc > .ic .assets-list label .ic .asset .asset-icon > img {width: 100%; height: 100%; border-radius: inherit;} #deposit .mc > .ic .assets-list label .ic .blockchain {display: flex; align-items: center; gap: 0.25rem; font-size: 1.1rem; font-weight: 600; color: var(--hilight);} #deposit .mc > .ic .assets-list label .ic .blockchain label {display: flex; flex-direction: column; gap: 0; border-radius: 50px; padding: 0.5rem 1.0rem; opacity: 0.50; font-size: 1rem; font-weight: 400; line-height: 0.9rem; color: var(--black); transition: all 0.3s;} #deposit .mc > .ic .assets-list label .ic .blockchain label:hover {opacity: 1.00; color: var(--hilight);} #deposit .mc > .ic .assets-list label .ic .blockchain label::before {content: ''; width: 100%; height: 100%; background-color: var(--hilight); opacity: 0.00; position: absolute; left: 0; top: 0; border-radius: inherit; transition: all 0.3s;} #deposit .mc > .ic .assets-list label .ic .blockchain label:hover::before {opacity: 0.10;} #deposit.address .mc > .ic .assets-list label .ic .blockchain label {opacity: 1.00;} #deposit .mc > .ic .assets-list label .ic .blockchain label span {font-size: 0.7rem; opacity: 0.50;} #deposit .mc > .ic #MultiAsset:checked + h4 label.toggle i::before {filter: grayscale(0); left: calc(100% - 2px); transform: translate(-100%, 0);} #deposit .mc > .ic .address-container {display: flex; flex-direction: column; gap: 10px;} #deposit .mc > .ic .address-container .qrcode {align-self: center; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 256px; aspect-ratio: 1 / 1; padding: 1rem; background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; display: flex; justify-content: center; align-items: center;} #deposit .mc > .ic .address-container .qrcode img {max-width: 100%; aspect-ratio: 1 / 1;} #deposit .mc > .ic .address-container .qrcode img.loading {opacity: 0.25;} #deposit .mc > .ic .address-container .address-text {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem; border-radius: 10px; background-color: rgba(0, 0, 0, 0.05); font-size: 1rem;} #deposit .mc > .ic .address-container .address-text h5 {width: 100%; font-size: 1.1rem; font-weight: 600; color: var(--hilight);} #deposit .mc > .ic .recomended-amount {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem; border-radius: 10px; background-color: rgba(0, 0, 0, 0.05); font-size: 1rem;} #deposit .mc > .ic .recomended-amount h5 {width: 100%; font-size: 1.1rem; font-weight: 600; color: var(--hilight);} #deposit .mc > .ic .recomended-amount .amount {font-size: 2rem;} #deposit .mc > .ic .recomended-amount .amount span {font-size: 1rem; opacity: 0.75;} #deposit .mc > .ic .recomended-amount .amount-info {display: block; position: relative; width: 100%; font-size: 0.8rem; padding-top: 0.5rem; color: var(--accent); font-weight: 200; box-shadow: inset 0 1px 0 0 var(--white)} #deposit .mc > .ic .ctrls {display: flex; justify-content: center;} #deposit .mc > .ic .session {width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 1rem 0 0 0; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);} #deposit .mc > .ic .session .session-id {opacity: 0.50;} #deposit .mc > .ic .session .session-id span:first-child {color: var(--hilight);} #deposit .mc > .ic .session .session-timer {color: var(--hilight); opacity: 0.50;} #deposit .mc > .ic .session .session-timer-bar {width: 100%; height: 4px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.10);} #deposit .mc > .ic .session .session-timer-bar #SessionTimerBar {width: 100%; height: 100%; border-radius: inherit; background-color: var(--hilight); animation: timerAnime linear;} @keyframes timerAnime { from {width: 100%;} to {width: 0%;} } /* FOOTER SECTION ------------------------------------------------------------------------------------------------- */ #footer {width: 100vw; display: flex; background: var(--accent); padding: 100px 0 120px 0;} #footer .mc {display: flex; flex-direction: column; row-gap: 40px; align-items: center;} #footer .mc .ic {display: flex; gap: 100px; justify-content: space-around;} #footer .mc .ic ul {display: flex; flex-direction: column; gap: 20px; padding: 0; list-style: none;} #footer .mc .ic ul li strong {color: var(--white); font-weight: 600; font-size: 1.4rem} #footer .mc .ic ul li .g-link {min-width: 200px; color: var(--white); opacity: 0.50;} #footer .mc .ic ul li .g-link:hover {opacity: 1.00; color: var(--hilight);} #footer .mc .sub {display: flex; flex-direction: column; gap: 20px; align-items: center;} #footer .mc .sub .logo-c {height: 32px; display: flex; flex-direction: row; column-gap: 5px; justify-content: flex-start; align-items: center; filter: brightness(0) invert(1); opacity: 0.75; font-size: 2.2rem;} #footer .mc .sub .logo-c img {height: 100%} #footer .mc .sub small {font-size: 1.1rem; color: var(--white); opacity: 0.50;} /* HORIZONTAL SEPERATORS */ .hs-00 {width: 100%; height: 0px;} .hs-10 {width: 100%; height: 10px;} .hs-20 {width: 100%; height: 20px;} .hs-30 {width: 100%; height: 30px;} .hs-40 {width: 100%; height: 40px;} .hs-60 {width: 100%; height: 60px;} .hs-80 {width: 100%; height: 80px;} .hs-100 {width: 100%; height: 100px;} .hs-l {width: 100%; height: 1px; margin: 10px 0; background: -webkit-linear-gradient(180deg, rgba(250, 100, 0, 1.00) 0%, rgba(250, 200, 0, 1.00) 100%); opacity: 0.075;} /*ALIGNMENTS*/ .hi {display: none;} /* ICONS */ .icon {display: inline-block; position: relative; width: 40px; height: 40px; background-size: 40px; background-image: url('../img/sprt.webp');} .icon.white {filter: grayscale(1) brightness(8);} .icon.negative {filter: hue-rotate(-170deg) saturate(120%) contrast(150%) brightness(0.9);} .icon.s30 {width: 30px; height: 30px;} .icon.s20 {width: 20px; height: 20px;} .icon.s16 {width: 16px; height: 16px;} @media only screen and (max-width: 920px) { @keyframes navScroll { from {height: 100px; background: transparent; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);} to {height: 100px; background-color: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} } #MainNav:not(.no-nav) .mc {position: absolute; top: 0; justify-content: flex-end;} #MainNav:not(.no-nav) .mc .logo-c {position: absolute; left: 50%; transform: translate(-50%);} #MainNav .mc .links-c {flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 320px; height: 100svh; background-color: var(--accent); padding: 100px 0 0 0; position: absolute; top: 0; right: -20px; transform: translate(100%, 0); overflow-x: hidden; overflow-y: auto; overflow: auto; transition: all 0.5s;} #MainNav .mc .links-c li {width: 100%; perspective: 0px;} #MainNav .mc .links-c .mob {display: block;} #MainNav .mc .links-c a {display: flex; flex-direction: row; justify-content: flex-end; width: 100%; padding: 25px 70px 25px 20px; position: relative; font-size: 1.5rem;} #MainNav .mc .links-c a span {color: var(--white);} #MainNav .mc .links-c a.drop {width: 100%; padding: 17px 70px 17px 20px; text-align: right;} #MainNav .mc .links-c a.drop:after {display: none;} #MainNav .mc .links-c label {display: block; width: 50px; height: 50px; border-radius: 5px; position: absolute; top: 0; right: 0; transition: all 0.5s; z-index: 1; cursor: pointer;} #MainNav .mc .links-c label:before {content: ''; width: 8px; height: 8px; border-left: 2px solid; border-bottom: 2px solid; border-color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 2px)) rotate(-45deg); transition: all 0.5s;} #MainNav .mc .links-c label:hover {background: rgba(255, 255, 255, 0.10);} #MainNav .mc .links-c label:hover:before {border-color: var(--hilight);} #MainNav .mc .links-c a.drop + .drop-c {width: 100%; padding: 0; background: transparent; position: relative; right: initial; transform: rotateX(0deg) translate(0, 0); text-align: right;} #MainNav .mc .links-c a.drop + .drop-c:before {content: ''; width: 0; height: 1px; background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; right: 0; bottom: 0; opacity: 1; transition: all 0.5s;} #MainNav .mc .links-c a.drop + .drop-c a {padding: 17px 30px; color: var(--white); font-weight: 200; letter-spacing: 0.5px;} #MainNav .mc .links-c a.drop + .drop-c a:hover {color: var(--hilight);} #MainNav .mc .links-c a.drop:hover + .drop-c, #MainNav .mc .links-c a.drop + .drop-c:hover {padding: 0; max-height: 0px; transform: rotateX(0deg) translate(0, 0); opacity: 1.00;} #MainNav .mc .links-c a.hl {width: calc(100% - 35px); margin: 0 0 35px 0; text-align: right;} #MainNav .mc .links-c a.hl:before {display: none;} #MainNav .mc .links-c a.hl span {padding: 25px 30px;} #MainNav .mc .links-c a.hl.drop {width: calc(100% - 55px); padding: 0; margin: 0 0 10px 0; text-align: right;} #MainNav .mc .links-c a.hl.drop:before {display: block;} #MainNav .mc .links-c a.hl.drop span {padding: 25px 30px;} #MainNav .mc .links-c li input[type=checkbox]:checked ~ a.drop + .drop-c {padding: 10px 0; max-height: 400px; opacity: 1.00;} #MainNav .mc .links-c li input[type=checkbox]:checked ~ a.drop + .drop-c:before {content: ''; width: 100%; transition: all 0.5s 0.5s;} #MainNav .mc .links-c li input[type=checkbox]:checked ~ label:before {border-color: var(--hilight-dark); transform: translate(-50%, -50%) rotate(135deg);} #MainNav .mc .main-btn {display: flex; flex-direction: row; column-gap: 0; align-items: center;width: 60px; height: 60px; padding: 10px; opacity: 1.00; transform: translate(0, 0); transition: opacity 1s; cursor: pointer;} #MainNav .mc .main-btn i {width: 40px; height: 1px; display: flex; flex-direction: row; column-gap: -2px; align-items: center; transition: all 0.5s;} #MainNav .mc .main-btn i:before, #MainNav .mc .main-btn i:after {content: ''; width: 50%; height: 2px; background: var(--hilight); position: relative; box-shadow: 1px 0 0 0 var(--hilight), -1px 0 0 0 var(--hilight); transition: all 0.5s;} #MainNav .mc .main-btn i:nth-child(1) {position: absolute; top: 15px;} #MainNav .mc .main-btn i:nth-child(3) {position: absolute; bottom: 15px;} #MainNav .mc .main-btn:hover i:nth-child(1), #MainNav .mc .main-btn:hover i:nth-child(3) {transform: scale(0.8);} #MainNav .mc .main-btn:hover i:before, #MainNav .mc .main-btn:hover i:after {background-color: var(--hilight); box-shadow: 1px 0 0 0 var(--hilight), -1px 0 0 0 var(--hilight);} #MainBtn:checked + nav .mc .main-btn i:nth-child(2) {opacity: 0.00; transform: scale(0.0);} #MainBtn:checked + nav .mc .main-btn:hover i:nth-child(1), #MainBtn:checked + nav .mc .main-btn i:nth-child(1), #MainBtn:checked + nav .mc .main-btn:hover i:nth-child(3), #MainBtn:checked + nav .mc .main-btn i:nth-child(3) {transform: scale(1.2);} #MainBtn:checked + nav .mc .main-btn i:nth-child(1):before, #MainBtn:checked + nav .mc .main-btn:hover i:nth-child(1):before {transform: translate(6px, -2px) rotate(45deg) scale(1.0) !important; transform-origin: left;} #MainBtn:checked + nav .mc .main-btn i:nth-child(1):after, #MainBtn:checked + nav .mc .main-btn:hover i:nth-child(1):after {transform: translate(-6px, -2px) rotate(-45deg) scale(1.0) !important; transform-origin: right;} #MainBtn:checked + nav .mc .main-btn i:nth-child(3):before, #MainBtn:checked + nav .mc .main-btn:hover i:nth-child(3):before {transform: translate(6px, 2px) rotate(-45deg) scale(1.0) !important; transform-origin: left;} #MainBtn:checked + nav .mc .main-btn i:nth-child(3):after, #MainBtn:checked + nav .mc .main-btn:hover i:nth-child(3):after {transform: translate(-6px, 2px) rotate(45deg) scale(1.0) !important; transform-origin: right;} /*#MainBtn:checked + nav {height: 100vh; min-height: 120px; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075), 0 2px 2px 0 rgba(0, 0, 0, 0.075), 0 4px 4px 0 rgba(0, 0, 0, 0.075), 0 8px 8px 0 rgba(0, 0, 0, 0.075), 0 16px 16px 0 rgba(0, 0, 0, 0.075), 0 32px 32px 0 rgba(0, 0, 0, 0.075);}*/ #MainBtn:checked + nav .mc .links-c {transform: translate(0, 0);} /* HOME ------------------------------------------------------------------------------------------------------ */ #home {padding: 120px 0 50px 0; overflow: hidden;} #home .mc {display: flex; flex-direction: column; gap: 40px;} @keyframes homeScroll { 0% {opacity: 1; transform: translate(0, 0) scale(1.0);} 50% {opacity: 0.5; transform: translate(0, 100%) scale(0.75);} 100% {opacity: 0.0; transform: translate(0, 150%) scale(0.5);} } #home .mc .lc h1 {font-size: 3.4rem; line-height: 3.4rem;} #home .mc .lc h2 {opacity: 0.00; font-size: 1.6rem;} #home .mc .lc .cta-c {width: 100%; justify-content: center; flex-wrap: wrap;} @keyframes leftIntro { from {opacity: 0.00; transform: translate(0, 100px);} to {opacity: 1.00; transform: translate(0, 0);} } #home .mc .lc, #home .mc .rc {flex-direction: column; width: 100%;} #home .mc .rc {height: 40svh;} #home .mc .rc video {height: 460px !important; aspect-ratio: 1 / 1;} /* HOW IT WORKS ------------------------------------------------------------------------------------------------- */ #how-it-works {flex-direction: column; padding: 50px 0;} #how-it-works .mc {display: flex; flex-direction: column; align-items: center;} #how-it-works h3 {font-size: 3rem; text-align: center;} #how-it-works .ic {flex-direction: column; max-width: 400px;} #how-it-works .ic .item {display: flex; gap: 20px; flex: 1 1 0; opacity: 0.00; transition: all 0.25s 2s ease-out;} #how-it-works .ic .item:nth-child(1), #how-it-works .ic .item:nth-child(2), #how-it-works .ic .item:nth-child(3) {transform: translate(0, 50%) scale(1.5);} #how-it-works .ic .item.show {opacity: 1.00; filter: blur(0); transform: translate(0, 0) scale(1.0); transition: all 0.5s 0.5s;} /* WHY COINPAY ------------------------------------------------------------------------------------------------- */ #why-coinpay {padding: 50px 0;} #why-coinpay h3 {font-size: 3rem; text-align: center;} #why-coinpay .ic {gap: 20px; flex-wrap: wrap;} #why-coinpay .ic .item {display: flex; gap: 20px; width: calc(50% - 10px); opacity: 0.00; filter: blur(5px); border-radius: 20px; padding: 20px 20px 20px 118px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.025), 0 2px 2px 0 rgba(0, 0, 0, 0.025), 0 4px 5px 0 rgba(0, 0, 0, 0.025), 0 8px 8px 0 rgba(0, 0, 0, 0.025), 0 16px 16px 0 rgba(0, 0, 0, 0.025), 0 32px 32px 0 rgba(0, 0, 0, 0.025), 0 64px 64px 0 rgba(0, 0, 0, 0.025); transition: all 0.25s 2s ease-out;} #why-coinpay .ic .item:nth-child(1) {transform: translate(-50%, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(2) {transform: translate(50%, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(3) {transform: translate(-50%, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(4) {transform: translate(50%, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(5) {transform: translate(-50%, 50%) scale(1.5);} #why-coinpay .ic .item:nth-child(6) {transform: translate(50%, 50%) scale(1.5);} #why-coinpay .ic .item.show {opacity: 1.00; filter: blur(0); transform: translate(0, 0) scale(1.0); transition: all 0.5s 0.5s;} #why-coinpay .ic .item .img-c {width: 96px; transform: translate(-8px, -50%);} /* TWO WAYS ------------------------------------------------------------------------------------------------- */ #two-ways {padding: 50px 0;} #two-ways h3 {font-size: 3rem; text-align: center;} #two-ways {width: 100vw; background-color: var(--white); display: flex; padding: 0 0 100px 0;} #two-ways .ic {flex-direction: column;} #two-ways .ic .item:nth-child(1), #two-ways .ic .item:nth-child(2) {opacity: 0.00; transform: translate(0%, 50%);} #two-ways .ic .item.show {opacity: 1.00; transform: translate(0, 0); transition: all 0.5s 0s;} /* FOOTER SECTION ------------------------------------------------------------------------------------------------- */ #footer {padding: 60px 0 170px 0;} } @media only screen and (max-width: 768px) { /* HOME SECTION ------------------------------------------------------------------------------------------------- */ #home .mc h1 {font-size: 2.4rem; line-height: 3.6rem;} #home .mc h2 {font-size: 1.1rem; line-height: 1.8rem;} #home .mc .cta-c {margin: 45px 0;} #home .mc .cta-c:before {opacity: 0.50} #home .mc .cta-c:after {opacity: 0.25} /* FOOTER ------------------------------------------------------------------------------------------------- */ #footer .mc .ic { gap: 30px;} #footer .mc .ic ul {} } @media only screen and (max-width: 520px) { #MainBtn:checked + #MainNav .mc .logo-c {z-index: 100; filter: brightness(0) invert(1);} /* HOME ------------------------------------------------------------------------------------------------------ */ #why-coinpay .ic .item {width: 100%;} #why-coinpay .ic .item:nth-child(even) {flex-direction: row-reverse; padding: 20px 118px 20px 20px; text-align: right;} #why-coinpay .ic .item:nth-child(even) .img-c {left: initial; right: 0; transform: translate(8px, -50%);} /* TWO WAYS ------------------------------------------------------------------------------------------------------ */ #two-ways .ic .item {flex-wrap: wrap; padding: 50px 20px 30px 20px; justify-content: center;} #two-ways .ic .item .content h4 {text-align: center;} #two-ways .ic .item .img-c {width: 96px; aspect-ratio: 1 / 1;} #two-ways .ic .item > i:before {width: 180%;} /* FOOTER ------------------------------------------------------------------------------------------------- */ #footer .mc .ic {gap: 20px; flex-wrap: wrap;} #footer .mc .ic ul {width: calc(50% - 10px); text-align: center;} } @media only screen and (min-width: 2200px) { body, html {font-size: 14px;} p {font-size: 1.6rem; line-height: 2rem;} .mc {max-width: 1400px} /* BUTTONS ------------------------------------------------------------------------------------------------------ */ .g-btn {height: 70px; line-height: 70px; padding: 0 40px 0 40px; font-size: 2rem;} /* FULL SECTIONS ------------------------------------------------------------------------------------------------ */ section.full .mc {row-gap: 60px;} /* HOME SECTION ------------------------------------------------------------------------------------------------- */ #home {padding: 320px 0 160px;} #home .mc h1 {max-width: 1200px; font-size: 4.4rem;} #home .mc h2 {max-width: 1200px; line-height: 3rem;} }