/* © 2026 Galaxy Host. All Rights Reserved. by vincent */
.main-block1 { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, rgb(119 119 119) 100%), url(../../resource/img/background-main.png); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; height: 100vh; min-height: 680px; } .main-block1.bg-tint { background-color: rgba(15, 15, 15, 0.9); background-blend-mode: multiply; } .main-block1 .main-text-container { position: relative; margin: 0 auto; top: 30%; width: 830px; height: 480px; display: flex; flex-direction: column; align-items: center; } .main-block1-text { font-size: 48px; color: #FFFFFF; text-align: center; width: 100%; font-weight: 600; line-height: 1.4; } .main-block1-text2 { font-size: 24px; color: #FFFFFF; text-align: center; width: 470px; font-weight: 300; line-height: 1.3; margin-top: 15px; } .main-block1-buttons-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 390px; margin-top: 45px; } .main-block1-button1 { background-color: rgba(59,130,246,.7); color: #FFFFFF; font-size: 22px; width: 195px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; transition: .3s; } .main-block1-button2 { background-color: transparent; color: #FFFFFF; font-size: 22px; width: 170px; height: 60px; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; border-radius: 5px; cursor: pointer; transition: .3s; text-decoration: none; } .main-block1-button1:hover { background-color: rgba(59,130,246,.8); } .main-block1-button2:hover { background-color: #FFFFFF30; } .main-block1-online-container { width: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 70px; } .main-block1-online-text { font-size: 16px; color: #FFFFFF65; font-weight: 500; } .main-block1-online-block { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 10px; } .main-block1-online-circle { width: 15px; height: 15px; background-color: #60A5FA; border: 4px solid #00000050; border-radius: 100%; box-shadow: 0px 0px 12px 2px rgba(96, 165, 250, 0.27); } .main-block1-online { font-size: 24px; font-weight: 800; color: #FFFFFF50; margin-left: 10px; } .main-block1-online .online-var { color: #60A5FA; } .wrapper { width: 1425px; margin: 0 auto; padding: 0 30px; } .main-block2 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 500px; position: relative; top: -70px; } .main-block2-text-block { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #FFFFFF; } .main-block2-text { font-size: 48px; font-weight: 900; width: 460px; line-height: 1.3; } .main-block2-text2 { font-size: 24px; font-weight: 300; width: 585px; line-height: 1.3; margin: 40px 0; } .main-block2-button { display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: rgba(59, 130, 246, .7); width: 225px; height: 50px; border-radius: 5px; font-size: 19px; font-weight: 600; gap: 7px; color: #FFFFFF; text-decoration: none; transition: .3s; } .main-block2-button:hover { background-color: rgba(59, 130, 246, .8); } .main-block2-laucher-block { position: relative; } .main-block2-launcher-img { width: 550px; pointer-events: none; border-radius: 10px; } .main-block2-launcher-bg { width: 610px; height: 320px; background-color: #1A0F05; position: absolute; top: 40px; left: -30px; z-index: -1; border-radius: 10px; } .main-block2-launcher-info-block { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 460px; background: linear-gradient(90deg, rgba(59, 130, 246, .2) 0%, rgba(59, 130, 246, .2) 100%); backdrop-filter: blur(10px); color: #FFFFFF; padding: 20px 40px; border-radius: 10px; position: absolute; right: -100px; bottom: -80px; } .main-block2-launcher-info-text-block { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; } .main-block2-launcher-info-icon { font-size: 40px; color: #2563EB; flex-shrink: 0; } .main-block2-launcher-info-text1 { font-size: 24px; font-weight: 800; } .main-block2-launcher-info-text2 { font-size: 18px; font-weight: 400; width: 360px; line-height: 1.3; } .main-block2-launcher-info-text2 a { color: rgba(59, 130, 246, .7); text-decoration: none; } .main-block2-launcher-help-btn { background: #2563EB; color: #fff; font-size: 15px; font-weight: 700; padding: 10px 22px; border-radius: 10px; text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: .3s; } .main-block2-launcher-help-btn:hover { background: #1D4ED8; box-shadow: 0 0 20px rgba(37, 99, 235, 0.11); } .main-block3 { margin-top: 100px; position: relative; } .main-block3-text1 { font-size: 36px; font-weight: 800; color: #FFFFFF; } .main-block3-text2 { font-size: 20px; font-weight: 400; color: #FFFFFF50; margin-top: 10px; } .main-block3-blocks-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; margin-top: 40px; gap: 25px; } .main-block3-block { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 275px; height: 350px; background: linear-gradient(90deg, rgba(59, 130, 246, .15) 0%, rgba(59, 130, 246, .15) 100%); border-radius: 15px; color: #FFFFFF; line-height: 1.3; padding: 30px; } .main-block3-block-title { font-size: 25px; font-weight: 800; } .main-block3-block-text { font-size: 19px; font-weight: 500; color: #FFFFFF60; width: 180px; position: relative; top: -30px; } .main-block3-block-subs { font-size: 20px; font-weight: 600; color: #FFFFFF60; position: relative; top: 30px; } .main-block3-block-button { color: #FFFFFF; text-decoration: none; background-color: #3B82F6; font-size: 20px; font-weight: 400; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: .3s; } .main-block3-block-button:hover { background-color: #60A5FA; } .main-block4 { margin-top: 130px; margin-bottom: 100px; position: relative; } .main-block4-title { font-size: 48px; font-weight: 800; width: 100%; text-align: center; color: #FFFFFF; margin-bottom: 50px; } .main-block4-text { font-size: 22px; font-weight: 400; color: #FFFFFF; width: 1050px; text-align: justify; margin: 0 auto; line-height: 1.3; } .main-block4-text span.text-title { font-weight: 700; } .main-block4-text span.text-main { display: block; margin-left: 30px; } .shape1 { width: 0px; height: 0px; position: absolute; box-shadow: 13em 4em 190px 150px rgb(59 130 246 / 0.13); z-index: -2; } .shape2 { width: 0px; height: 0px; right: 0; position: absolute; box-shadow: -5em 20em 190px 150px rgb(59 130 246 / 0.13); z-index: -2; } .shape3 { width: 0px; height: 0px; bottom: 0; left: 50%; position: absolute; box-shadow: 0em 4em 190px 150px rgb(59 130 246 / 0.13); z-index: -2; } @media (max-width: 1630px) { .main-block2-launcher-info-block { right: 70px; } .wrapper { width: 1160px; } } @media (max-width: 1230px) { .wrapper { width: auto; } .main-block2 { flex-direction: column; gap: 50px; height: 700px; top: 0; } .main-block2-text-block { align-items: center; text-align: center; } .main-block2-launcher-info-block { right: 4px; } .main-block3 { margin-top: 180px; } .main-block3-text-block { text-align: center; } .main-block4-text { width: auto; } .shape1 { top: 50%; box-shadow: 0em -1em 190px 150px rgb(59 130 246 / 0.13); } .shape2 { top: 50%; box-shadow: -17em 3em 190px 150px rgb(59 130 246 / 0.13); } } @media (max-width: 840px) { .main-block1 { height: auto; min-height: 100vh; min-height: 100svh; } .main-block1 .main-text-container { width: 100%; max-width: 560px; height: auto; top: auto; justify-content: flex-start; padding: 120px 24px 70px; } .main-block1-text { font-size: 25px; font-weight: 800; } .main-block1-text2{ font-size: 16px; width: 100%; max-width: 420px; font-weight: 400; } .main-block1-buttons-container { width: 100%; max-width: 320px; } .main-block1-online-text { font-size: 14px; } .main-block2-button { width: 205px; height: 45px; font-size: 17px; } .main-block1-online-circle { width: 10px; height: 10px; background-color: #60A5FA; border: 2px solid #00000050; } .main-block1-online { font-size: 20px; } .main-block1-button1 { font-size: 17px; width: 150px; height: 50px; } .main-block1-button2 { font-size: 17px; width: 143px; height: 48px; } .main-block2 { height: auto; } .main-block2-text { font-size: 25px; width: 100%; max-width: 460px; } .main-block2-text2 { font-size: 16px; margin: 30px 0; width: 100%; } .main-block2-laucher-block { width: 100%; max-width: 500px; } .main-block2-launcher-img { width: 100%; } .main-block2-launcher-bg { width: 100%; height: 62%; top: 5%; left: 0; } .main-block2-launcher-info-block { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 26px; padding: 18px 20px; flex-wrap: wrap; gap: 16px; } .main-block2-launcher-info-img { width: 45px; } .main-block2-launcher-info-text-block { gap: 15px; } .main-block2-launcher-info-text1 { font-size: 21px; } .main-block2-launcher-info-text2 { font-size: 16px; width: 100%; } .main-block3-text1 { font-size: 25px; } .main-block3-text2 { font-size: 16px; font-weight: 500; } .main-block3-block { width: 245px; height: 310px; } .main-block3-block-title { font-size: 22px; } .main-block3-block-text { font-size: 18px; width: 170px; top: -30px; } .main-block3-block-subs { font-size: 18px; top: 30px; } .main-block3-block-button { font-size: 19px; font-weight: 600; height: 55px; } .main-block4-title { font-size: 25px; margin-bottom: 30px; } .main-block4-text { font-size: 16px; } } @media (max-width: 560px) { .main-block1 .main-text-container { width: 100%; padding: 110px 20px 60px; } .main-block2-laucher-block { max-width: 420px; } .main-block2-launcher-info-block { transform: none; right: auto; margin-top: 22px; } } @media (max-width: 450px) { .main-block2-laucher-block { transform: none; } .main-block3-blocks-container { gap: 16px; } .main-block3-block { width: 100%; max-width: 300px; } } .server-status-widget { display: flex; flex-direction: row; align-items: center; gap: 15px; background-color: #FFFFFF10; border: 2px solid #FFFFFF20; border-radius: 15px; backdrop-filter: blur(10px); padding: 15px 25px; margin-bottom: 30px; } .status-widget-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .status-widget-dot.s-online { background-color: #43b581; box-shadow: 0 0 10px rgba(67, 181, 129, 0.35); } .status-widget-dot.s-offline { background-color: #f04747; box-shadow: 0 0 10px rgba(240, 71, 71, 0.35); } .status-widget-dot.s-maintenance { background-color: #faa61a; box-shadow: 0 0 10px rgba(250, 166, 26, 0.35); } .status-widget-info { flex: 1; } .status-widget-label { font-size: 16px; font-weight: 700; color: #FFFFFF; } .status-widget-details { font-size: 13px; font-weight: 500; color: #FFFFFF50; } .status-widget-link { text-decoration: none; font-size: 14px; font-weight: 600; color: #2563EB; background-color: #2563EB15; border: 1px solid #2563EB40; padding: 8px 18px; border-radius: 8px; transition: .3s; } .status-widget-link:hover { background-color: #2563EB30; } .social-icons-container { display: flex; justify-content: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; } .social-icon-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; transition: .3s; } .social-icon-card:hover { transform: translateY(-5px); } .social-icon-circle { width: 80px; height: 80px; border-radius: 50%; background: #ffffff10; border: 2px solid #ffffff20; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #ffffff80; transition: .3s; } .social-icon-card:hover .social-icon-circle { background: #2563EB; border-color: #2563EB; color: #fff; box-shadow: 0 0 25px rgba(37, 99, 235, 0.11); } .social-icon-name { font-size: 16px; font-weight: 600; color: #ffffff60; transition: .3s; } .social-icon-card:hover .social-icon-name { color: #fff; } .social-icon-card.social-soon { cursor: default; } .social-icon-card.social-soon:hover { transform: none; } .social-icon-card.social-soon .social-icon-circle { opacity: .65; } .social-icon-card.social-soon:hover .social-icon-circle { background: #ffffff10; border-color: #ffffff20; color: #ffffff80; box-shadow: none; } .social-icon-card.social-soon:hover .social-icon-name { color: #ffffff60; } .soon-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #60A5FA; margin-left: 4px; } @media (max-width: 840px) { .social-icons-container { gap: 20px; } .social-icon-circle { width: 60px; height: 60px; font-size: 24px; } .social-icon-name { font-size: 13px; } } .server-ip-widget { max-width: 500px; margin: 0 auto 30px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 20px 25px; backdrop-filter: blur(10px); } .ip-widget-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; } .ip-widget-row:not(:last-child) { padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ip-widget-label { font-size: 14px; font-weight: 600; color: #ffffff80; white-space: nowrap; } .ip-widget-value { font-size: 16px; font-weight: 700; color: #3B82F6; font-family: monospace; flex: 1; direction: ltr; text-align: center; } .ip-widget-copy { background: #3B82F6; border: none; border-radius: 10px; width: 38px; height: 38px; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; } .ip-widget-copy:hover { background: #2563eb; } .ip-widget-countdown { text-align: center; } .countdown-label { font-size: 13px; font-weight: 600; color: #ffffff60; margin-bottom: 12px; } .countdown-values { display: flex; justify-content: center; gap: 20px; } .countdown-item { display: flex; flex-direction: column; align-items: center; } .countdown-item span { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; } .countdown-item small { font-size: 12px; color: #ffffff60; margin-top: 4px; } @media (max-width: 570px) { .server-ip-widget { margin: 0 15px 25px; padding: 16px 18px; } .ip-widget-value { font-size: 14px; } .countdown-item span { font-size: 24px; } .countdown-values { gap: 12px; } }