*, ::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: #5278b8; --accent-color-secondarily: #875f3b; --dark-primary: #000000; --bg-gradient: linear-gradient(to bottom, #666666, #dddddd); --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; } .text-weight{ font-weight: 700; } body{ font-size: 16px; line-height: 20px; box-sizing: border-box; overflow-x: hidden; margin: 0; background-color: var(--light-primary); line-height: 1.6; font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif; color: #585858; font-weight: 400; scroll-behavior: smooth; margin: 0; padding: 0; background-image: url('./img/bg_fader.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } h1,h2{ font-weight: 700; font-size: 24px; margin-bottom: 15px; color: #585858; } h1{ font-size: 30px; } h3{ font-weight: 600; font-size: 20px; margin-top:10px; } .line { height: 1px; background-color: #ccc; border: none; margin: 40px 0; width: 100%; } .section{ padding: 20px; max-width: 1100px; margin: 0 auto; color: var(--dark-primary); } .section-top{ padding-top: 100px; } .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; } } .btn-box{ max-width: 400px; margin: 0 auto; } .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; width: 100%; 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; max-height: 900px; max-width: 900px; } } .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: #caa869; color: var(--light-primary); width: 100%; padding: 0px 20px; 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; padding: 20px; @media(min-width:992px){ max-width: 1100px; margin: 0 auto; } } @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: 45px; font-family: Dosis, HelveticaNeue, Helvetica Neue, sans-serif; font-weight: 600; font-size: 18px; } } .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: #4a4a4a; 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: 20px; right: 40px;; } .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; font-family: Dosis, HelveticaNeue, Helvetica Neue, sans-serif; font-weight: 600; font-size: 18px; } .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; } @media screen and (min-width: 768px) { .logo{ font-size: 20px; text-align: center; } } /* --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; } } /* ------- */ .flex { display: flex; flex-direction: column; align-items: center; justify-content: center; @media screen and (min-width: 768px) { flex-direction: row; justify-content: space-between; } } .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); } .table-p th{ font-size: 18px; color: var(--light-primary); } .table-p td { padding: 15px; font-size: 14px; } @media screen and (max-width: 768px) { .table-p th{ font-size: 12px; color: var(--light-primary); } .table-p td { padding: 2px; font-size: 10px; } } /* --------------- */ .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===== */ .footer{ width: 100%; padding: 25px; text-align: center; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3); background:#caa869; color: #636363; } .footer-logo{ display: block; margin-bottom: 25px; } .footer-social-list { display: flex; gap: 35px; justify-content: center; align-items: center; margin-bottom: 15px; } .footer-payment-box{ flex: 1; text-align: center; } .social-link { display: block; transition: all 0.3s ease; } .footer-partners__list { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 15px; } .footer-links { margin-bottom: 35px; flex: 1; } .footer-links__group:not(:last-child) { margin-bottom: 35px; } .footer-links__group { display: flex; flex-direction: column; gap: 10px; & a{ font-size: 14px; font-weight: 600; transition: all 0.3s ease; } & a:hover{ color: var(--accent-color); } } @media screen and (min-width: 768px) { .footer-cover { display: flex; justify-content: space-between; align-items: center; } .social-link:hover{ transform: scale(1.1); } } @media screen and (min-width: 992px) { .footer-links { display: flex; align-items: center; justify-content: center; gap: 70px; } .footer-links__group:not(:last-child) { margin-bottom: 0px; } } .footer-text { font-size: 12px; color: #636363; margin-top: 15px; } .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; } #game-container { margin-top: 20px; width: 100%; max-width: 100%; height: 400px; display: none; margin-bottom: 15px; /* height: heightpx; */ background-image:url(./img/where-play/where-play1.webp); background-position: center; background-repeat: no-repeat; background-size: cover; } .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; } } /* ---------- */ .container { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .items-box{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; } .item { background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 8px; width: 290px; } .item h3 { margin: 0; color: #333; text-align: center; } .prices { display: flex; justify-content: space-between; margin-top: 10px; font-size: 16px; display: flex; flex-direction: column; gap: 5px; & span { text-align: center; } } @media (max-width: 480px) { .prices { flex-direction: column; align-items: center; text-align: center; } } /* --------------- */ .tip { background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 8px; } .tip h3 { margin: 0; color: #333; } .checklist { margin-top: 10px; padding-left: 20px; } @media (max-width: 480px) { .container { width: 100%; padding: 15px; } } .review { background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 8px; font-style: italic; } .review span { font-weight: bold; color: #333; } @media (max-width: 480px) { .container { width: 100%; padding: 15px; } } /* download-section */ .download-top-section { position: relative; padding-top: 50px; } .section-fon { position: relative; width: 100vw; height: 50vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .section-fon{ width: 100vw; height: 50vh; } .section-fon img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .section-fon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 -200px 150px 10px #1f2125; z-index: 2; } @media (min-width:600px) { .section-fon{ height: 65vh; } } @media (min-width:1200px) { .section-fon{ height: 78vh; } } .download-section { position: relative; padding-left: 20px; padding-right: 20px; max-width: 900px; margin: -70px auto 0 auto; z-index: 3; overflow: hidden; } .download-box { display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; } .download-cover { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; } .download-img{ border-radius: 20%; grid-column: 1 } .download-content { grid-column: 2; display: flex; flex-direction: column; justify-content: flex-start; } .download-title{ line-height: 1.7rem; font-size: 1.2rem; letter-spacing: 0; font-weight: 700; margin: 0 0 5px 0; @media (min-width:600px) { font-size: 1.7rem; } @media (min-width:992px) { font-size: 1.9rem; } } .download-content a { color: #00a173; line-height: 1.5rem; font-size: 1rem; letter-spacing: .00625em; font-weight: 500; } .info-cover{ margin-top: 15px; @media (min-width: 600px) { display: flex; } } .info-container { display: flex; align-items: center; gap: 50px; @media (max-width: 600px) { margin-bottom: 15px; } } .rating-value{ display: flex; align-items: center; gap: 3px; } .info-box { display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; } .info-box:not(:last-child)::after { content: ""; position: absolute; top: 0; right: -30px; height: 100%; width: 1px; background-color: #6f6f6f; } .info-content { font-size: 18px; font-weight: 700; margin-bottom: 5px; } .info-description { font-size: 14px; color: #6f6f6f; } .icon { font-style: normal; margin-left: 5px; } .info-btn{ background: #00a173; width: 100%; margin: 0 auto; @media (min-width:600px) { max-width: 200px; } @media (min-width:768px) { max-width: 300px; } } .info-btn:hover{ background: #03bb87; } /* --------------- */ .iframe-bwb { position: relative; overflow: hidden; border-radius: 10px; background-color: #171515ff; margin-bottom: 15px; height: 400px; } .iframe-bwb__bg-image { height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; filter: brightness(50%) blur(6px); background-image: url(./assets/main1_11zon.webp); } .iframe-bwb__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } .iframe-bwb__button-box{ display: flex; flex-direction: column; gap: 15px; } .iframe-bwb__button { position: absolute; top: 40%; left: 50%; z-index: 200; transform: translate(-50%, -50%); font-size: 1.3em; line-height: 48px; width: 12em; border: 0; margin: 0; box-shadow: none; cursor: pointer; white-space: nowrap; text-align: center; max-width: 99%; letter-spacing: 2px; padding: 10px 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); } .iframe-bwb__red{ background: linear-gradient(145deg, #f74b57, #e40310); transition: all 0.3s ease; } .iframe-bwb__red:hover{ background: linear-gradient(145deg, #e73844, #c7020f); } .btn-demo{ top: 60%; background: #ffcc29; transition: all 0.3s ease; } .btn-demo:hover{ background: #ecb709; } .link { color: var(--accent-color); transition: text-decoration 0.3s ease; } .link:hover { text-decoration: underline; } /* blog */ .news-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 20px auto 0px auto; } @media screen and (min-width: 600px) { .news-list { grid-template-columns: repeat(3, 1fr); } } .card-news{ display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 15px; background-color: #f3f2f7; transition: all 0.3s ease; &:hover{ background-color: #e6e5ea; transform: translateY(-5px); box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); } } .content_news{ height: 160px; } .img-news{ background-size: cover; background-repeat: no-repeat; height: 15.5rem; border-radius: 15px; width: 100%; } .label { background-color: #caa869; color: #585858; text-transform: uppercase; border-radius: .5rem; justify-content: center; align-items: center; min-height: 2.125rem; padding: .563rem .75rem; font-size: .75rem; font-weight: 600; line-height: 1rem; display: inline-block; overflow: hidden; } .news-date{ display: flex; justify-content: space-between; margin-top: 15px; margin-bottom: 10px; color: #17161c; } .news-title{ font-size: 1.333rem; line-height: 1.467rem; font-weight: 700; text-transform: uppercase; } /* card */ /* --- общий контейнер --- */ .casino-table-v4 { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .casino-card{ border-radius: 16px; border: 3px solid #767676; overflow: hidden; @media screen and (max-width: 768px) { border: 5px solid #767676; } } .casino-table-row-inner { background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 24px; } /* --- строка основных ячеек --- */ .casino-table-cells { display: flex; align-items: center; padding: 16px 24px; gap: 24px; background-color: #f4f5f8; } /* логотип */ .casino-table-cell_logo { position: relative; flex: 0 0 120px; height: 120px; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 8px; } .casino-table-cell_logo .casino-pos { position: absolute; left: 2px; } /* рейтинг + название */ .casino-table-cell_rating { display: flex; flex-direction: column; flex: 1 1 200px; color: #111827; } .casino-table-cell_rating .casino-name span { font-size: 18px; font-weight: 600; display: block; margin-bottom: 4px; } .casino-rating-stars-wrap { display: flex; align-items: center; gap: 8px; } .casino-rating-numbers .good-rating { color: #16a34a; font-weight: 700; } .casino-rating-stars img { width: 16px; height: 16px; } /* подсказка рейтинга (по ховеру) */ .casino-rating-content__hint { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: none; z-index: 10; } .casino-table-cell_rating:hover .casino-rating-content__hint { display: block; } /* бонус */ .casino-table-cell_bonus { flex: 1 1 280px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; text-align: center; } .casino-bonus-text { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: #6b7280; margin-bottom: 8px; } .casino-bonus-number { font-size: 20px; font-weight: 700; color: #111827; } .casino-bonus-number small { font-weight: 400; font-size: 14px; } .text-bonus { color: #f97316; font-size: 16px; margin-top: 4px; } /* фичи */ .casino-table-cell_features { flex: 1 1 250px; display: flex; flex-direction: column; gap: 4px; color: #374151; } .casino-features-item::before { content: "✔"; color: #10b981; margin-right: 6px; } .casino-table-cell_link { flex: 0 0 140px; } .casino-link { position: relative; display: block; width: 100%; padding: 12px 0; background: linear-gradient(90deg, #facc15 0%, #f59e0b 100%); color: #111827; font-weight: 700; text-align: center; border-radius: 6px; text-decoration: none; overflow: hidden; transition: all; } .casino-link:hover { transform: scale(1.02); } .casino-link::before { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 55%, rgba(255,255,255,0) 100% ); transform: skewX(-20deg); animation: shine 1.6s infinite ease-in-out; } @keyframes shine { 0% { left: -50%; } 100% { left: 150%; } } /* --- футер --- */ .footer-wrap { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; font-size: 11px; color: #6b7280; } .casino-licenses-mob { display: none; } /* --- адаптив --- */ @media (max-width: 768px) { .casino-table-row-inner { border: none; box-shadow: none; } .casino-rating-stars-wrap{ margin: 0 auto; } .casino-table-cell_logo{ height: 210px; } .casino-table-cells { flex-direction: column; align-items: stretch; padding: 0px; gap: 5px; } .casino-table-cell_bonus{ padding: 8px; } .casino-table-cell_logo, .casino-table-cell_rating, .casino-table-cell_bonus, .casino-table-cell_features, .casino-table-cell_link { flex: 1 1 auto; text-align: center; } .casino-table-cell_rating .casino-name span { margin-bottom: 2px; } .casino-bonus-number { font-size: 18px; } /* лицензии показываем под футером */ .casino-licenses-mob { display: block; font-size: 12px; } .casino-link-wrapper{ max-width: 270px; margin: 0 auto; } .footer-wrap{ padding: 12px 24px 6px 24px; } } .casino-table-cell_features .casino-features-item { position: relative; font-size: 12px; line-height: 1.85em; border-radius: 8px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a5b68; } .casino-table-cell.casino-table-cell_features:hover * { background-color: rgba(144, 238, 144, 0.3) !important; } .features { padding: 20px; max-width: 600px; margin: 0 auto; display: flex; gap: 40px; } .features ul { list-style-type: disc; padding-left: 20px; margin: 0; } .features li { margin-bottom: 8px; font-size: 12px; color: #000; font-family: sans-serif; }