*, ::before, ::after { box-sizing: border-box; } html { /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.15; /* 1. Correct the line height in all browsers. */ -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */ -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ -o-tab-size: 4; tab-size: 4; /* 3 */ } hr { height: 0; /* 1 */ color: inherit; /* 2 */ } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } ::-moz-focus-inner { border-style: none; padding: 0; } :-moz-focusring { outline: 1px dotted ButtonText; } :-moz-ui-invalid { box-shadow: none; } legend { padding: 0; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } summary { display: list-item; } :root { --light-primary: #fff; --accent-color: #ffad1e; --accent-color-secondarily: #875f3b; --dark-primary: #000000; /* --dark-secondarily: #000000; */ --border-color: #878776; --bg-th:#5278b8; --bg-td:#ffad1e; --td-hover:#9b8d8d; --bg-list:linear-gradient(145deg, #fef84a, #ffad1e); --bt-btn-lang:linear-gradient(145deg, #223d99, #5fdede); --before-color:linear-gradient(to right, #5278b8, #4c6bde); --btn-color: linear-gradient(145deg, #f70515, #ef323b, #ff5f14); --btn-hover:linear-gradient(145deg, #e73844, #c7020f); --btn-active:linear-gradient(145deg, #c7020f, #a0020d); --bg-header: linear-gradient(to bottom, #000000, #333333); --bg-footer: linear-gradient(to top, #000000, #333333); --bg-box-btn:#ddcece; } p{ margin-bottom: 15px; } *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } *, *::before, *::after { box-sizing: border-box; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } a, button { cursor: revert; text-decoration: none; } ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } :where([draggable="true"]) { -webkit-user-drag: element; } :where(dialog:modal) { all: revert; box-sizing: border-box; } body{ font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;; font-size: 17px; line-height: 20px; line-height: 1.5; box-sizing: border-box; overflow-x: hidden; margin: 0; background-color: var(--light-primary); } h1,h2{ font-weight: 700; font-size: 24px; margin-bottom: 15px; } h3{ font-weight: 600; font-size: 20px; margin-top:10px; } .section{ padding: 20px; max-width: 800px; margin: 0 auto; color: var(--dark-primary); } .section-top{ padding-top: 100px; } .logo{ margin-right: 135px; } .logo-link{ margin-right: 50px; } /* .button-box{ width: 100%; max-width: 380px; min-width: 335px; height: 155px; color: var(--dark-primary); background: var(--bg-box-btn); border-radius: 15px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 15px; &>div { max-width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; letter-spacing: 2px; gap: 5px; } & p { text-align: center; } } */ .hero-text { font-weight: 600; margin-bottom: 15px; } .button { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 18px; font-weight: 600; letter-spacing: 2px; padding: 15px 10px; color: var(--light-primary); background: var(--btn-color); border-radius: 0.75rem; transition: all 0.1s ease; max-width: 350px; height: 60px; margin: 0 auto; } .button:hover { background: var(--btn-hover); } .button:active { letter-spacing: 0px; transform: skew(-10deg) translateY(6px); background: var(--btn-active); } .img-box { width: 100%; height: auto; border-radius: 15px; overflow: hidden; margin-bottom: 15px; & img { width: 100%; height: 100%; margin: 0 auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; } } .no-scroll { overflow: hidden; } .hidden { position: absolute; left: -9999px; visibility: hidden; } strong{ margin: 10px 0px; font-size: 18px; font-weight: 700; display: block; } .header { position: fixed; background: var(--bg-header); color: var(--light-primary); width: 100%; padding: 15px 30px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3); z-index: 998; } .header-container { display: flex; align-items: center; justify-content: space-between; width: 100%; @media(min-width:992px){ justify-content: center; } } @media(min-width:992px){ nav{ margin-left: 75px; } } .nav-mob.is-visible { transform: translateY(0); } .nav-list { display: none; } @media (min-width: 992px) { .nav-list { display: flex; gap: 54px; } } .nav-item { position: relative; &:hover{ color: var(--accent-color); } } .burger-btn { display: flex; flex-direction: column; gap: 4px; @media (min-width:992px) { display: none; } } .top-line, .middle-line,.bottom-line { display: block; width: 20px; height: 1.5px; border-radius: 15px; background-color: var(--light-primary); } .nav-mob { transform: translateY(-200%); background: var(--bg-header); color: var(--light-primary); width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 999; transition: all 0.3s ease; overflow-y: auto; } .nav-btn-close{ position: absolute; top: 33px; right: 27px;; } .nav-list-mob { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font-size: 24px; font-weight: 600; } .nav-link{ transition: all 0.3s ease; } .nav-link.active { border-bottom: 2px solid var(--bg-accent-color); color: var(--accent-color); } .nav-link-mob.active { border-bottom: 2px solid var(--accent-color); color: var(--accent-color); position: relative; } /* --language-dropdown-- */ .language-dropdown { position: relative; display: inline-block; margin-left: 50px; display: none; @media (min-width:992px) { display: block; } } .dropdown-btn { color: var(--light-primary); padding: 10px; font-size: 16px; border: none; cursor: pointer; background: var(--bt-btn-lang); border-radius: 5px; display: flex; align-items: center; gap: 5px; } .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 1; background: var(--bt-btn-lang); border-radius: 15px; overflow: hidden; } .dropdown-item{ display: flex; align-items: center; padding-left: 5px; } .dropdown-content.show { display: block; } .dropdown-content a { color: var(--light-primary); padding: 12px 16px; text-decoration: none; display: block; } .mob a{ padding: 10px 5px; font-size: 16px; } .dropdown-content .dropdown-item:hover { background: var(--bg-box-btn); } .dropdown-content a:hover { color: var(--dark-primary); } .language-dropdown:hover .dropdown-content { display: block; } @media (max-width: 991px) { .language-dropdown:hover .dropdown-content { display: none; } .dropdown-content.show { display: block; } } /* ------- */ .questions-list { display: flex; flex-direction: column; gap: 20px; color: var(--dark-primary); } .questions-item { border-radius: 25px; overflow: hidden; } .questions-content-box { background: var(--bg-box-btn); padding: 12px 42px; } .questions-title { display: grid; grid-template-columns: 1fr 20px; cursor: pointer; align-items: center; font-size: 22px; } .icon { width: 30px; height: 25px; fill: var(--light-primary); } .questions-content { display: none; } @media (min-width:992px) { .hero-cover{ display: flex; gap: 15px; justify-content: center; } .hero-box { width: 50%; } } .hero-mob-text{ font-weight: 600; margin-top: 10px; @media (min-width:768px) { display: none; } } .hero-list-mob { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; @media (min-width:768px) { display: none; } } .hero-item-mob{ width: 100%; margin: 5px; } .hero-list { margin-top: 20px; @media (max-width:768px) { display: none; } } .hero-img-box{ border-radius: 15px; overflow: hidden; margin-top: 15px; & img { width: 100%; height: 100%; margin: 0 auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } @media (min-width:992px) { max-width: 300px; } } @media (max-width:992px) { .hero-img-box{ margin: 0 auto; width: 260px; height: 325px; & img { display: block; margin: 0 auto; -o-object-fit: contain; object-fit: contain; width: 100%; } } } .list { display: flex; flex-direction: column; justify-content: space-around; gap: 15px; padding: 20px 0px 0px 40px; margin-bottom: 15px; } .list-item{ position: relative; padding: 10px 25px 10px 40px; border-radius: 10px; background: var(--bg-list); color: var(--dark-primary); &::before { content: attr(data-title); position: absolute; top: 50%; left: -20px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-weight: 700; font-size: 38px; background: var(--before-color); border-radius: 50%; z-index: 2; color: var(--light-primary); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2), inset 0px -3px 6px rgba(0, 0, 0, 0.3), inset 0px 3px 6px rgba(255, 255, 255, 0.3); } } /* -------table--------- */ table { width: 100%; margin-top: 15px; margin-bottom: 15px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); } @media (max-width:500px) { table { font-size: 12px; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border-color); } } th { background-color: var(--bg-th); font-weight: bold; &:first-child{ border-top-left-radius: 10px; } &:last-child{ border-top-right-radius: 10px; } } tbody tr:hover { background-color: var(--td-hover); color: var(--light-primary); } .hidden { display: none; } .table-double tr>td:nth-child(odd) { background: var(--bg-td); color: var(--dark-primary); } .table-triple td:first-child{ background: var(--accent-color); color: var(--dark-primary); } /* --------------- */ .list-img{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 0px; margin-top: 20px; margin-bottom: 15px; } .list-img-item{ width: 80%; transition: all 0.3s ease-in-out; &:hover, &:focus{ transform: scale(1.1); } } .list-img-item{ overflow: hidden; border-radius: 15px; height: auto; &>img { height: 100%; width: 100%; } } @media(min-width:992px){ .interface> .choose-list{ padding: 10px; flex-direction: row; flex-wrap: wrap; } } .icon-uoutube{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 98px; height: 68px; background: url('./img/youtubelogo.svg') no-repeat center center; background-size: contain; @media (min-width:768px) { width: 155px; height: 104px; } } .footer{ width: 100%; padding: 25px; text-align: center; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3); background: var(--bg-footer); color: var(--light-primary); } .footer-text{ font-size: 12px; } .footer-payment-box { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .footer-payment-list { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: flex-end; justify-content: center; } /* ----------------------------------- */ .swiper{ margin-bottom: 15px; } @media (max-width: 628px) { .swiper.desk { display: none; } } @media (min-width: 629px) { .swiper.mob { display: none; } } .swiper-img-box{ width: 240px; height: 440px; border-radius: 15px; overflow: hidden; } .swiper-button-next::after, .swiper-button-prev::after{ color: #ffbe1f; } .swiper-pagination-bullet.swiper-pagination-bullet-active.swiper-pagination-bullet-active-main{ background: var(--bg-list); } .bonuse-img-box{ display: flex; } /* review */ .review-card { background: var(--light-primary); border-radius: 10px; padding: 15px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--dark-primary); } .review-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .positive-review { border-left: 5px solid #4CAF50; } .positive-review .review-rating { color: #4CAF50; } .neutral-review { border-left: 5px solid #FFC107; } .neutral-review .review-rating { color: #FFC107; } .negative-review { border-left: 5px solid #F44336; } .negative-review .review-rating { color: #F44336; } .review-card h3 { margin-top: 0; font-size: 1.2em; font-weight: bold; } .review-card .review-rating { font-size: 1em; font-weight: bold; margin-bottom: 10px; } .review-card .review-text { font-size: 1em; line-height: 1.5; } /* ----------plus-minus------------- */ @media (min-width:992px) { .plus-minus-box{ display: flex; gap: 15px; } } .group { margin-bottom: 30px; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .plus-group { background-color: #e8f5e9; border: 1px solid #c8e6c9; } .minus-group { background-color: #ffebee; border: 1px solid #ffcdd2; } .plus-minus-box ul li { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-size: 16px; } .plus-group ul li::before { content: '✔'; color: #4CAF50; margin-right: 10px; } .minus-group ul li::before { content: '✖'; color: #F44336; margin-right: 10px; } /* -----------1win-box--- */ @media (min-width:725px) { .win-box{ display: flex; gap: 10px; } .win-box > .win-box-width{ max-width: 50%; ; } .img-mob{ width: 30%; } } .win-box-width{ margin-top: 15px } /* demo */ .iframe-bwb { position: relative; overflow: hidden; border-radius: 10px; background-color: #171515ff; } .iframe-bwb__bg-image { height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; filter: brightness(50%) blur(6px); background-image: url(./img/demo/demo2.webp); } .iframe-bwb__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } .iframe-bwb__button { position: absolute; top: 50%; left: 50%; z-index: 200; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.5em; line-height: 48px; width: 10em; border: 0; margin: 0; box-shadow: none; cursor: pointer; white-space: nowrap; text-align: center; max-width: 99%; letter-spacing: 2px; padding: 15px 10px; color: var(--light-primary); background: var(--btn-color); border-radius: 0.75rem; transition: all 0.1s ease; } .iframe-bwb__button:hover { background: var(--btn-hover); } #game-container { margin-top: 20px; width: 100%; max-width: 100%; height: 500px; display: none; } .game-iframe { width: 100%; height: 100%; border: none; } .main-icon-uoutube{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 98px; height: 68px; background: url('./img/youtubelogo.svg') no-repeat center center; background-size: contain; @media (min-width:768px) { width: 155px; height: 104px; } }